From ebff2c2fa2fc1bc4bfe01a5b2100e7bb6ce25000 Mon Sep 17 00:00:00 2001
From: jaylin <chieh.lin@rwth-aachen.de>
Date: Mon, 4 Mar 2024 02:27:17 +0100
Subject: [PATCH] create header data

---
 my_flask_app/__pycache__/main.cpython-39.pyc | Bin 12749 -> 14199 bytes
 my_flask_app/main.py                         |  60 ++++++++-
 my_flask_app/templates/app.html              | 123 +++++++++++++++----
 3 files changed, 157 insertions(+), 26 deletions(-)

diff --git a/my_flask_app/__pycache__/main.cpython-39.pyc b/my_flask_app/__pycache__/main.cpython-39.pyc
index 3325cd478eea87c234e99721ffb5d80d466b4250..d4b09b0d9746781714fb499d9d6f9e0daa18e49b 100644
GIT binary patch
delta 5167
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

delta 3747
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
K@l6glR{#LMDowZm

diff --git a/my_flask_app/main.py b/my_flask_app/main.py
index 9538b70..4516f28 100644
--- a/my_flask_app/main.py
+++ b/my_flask_app/main.py
@@ -1,3 +1,4 @@
+import pandas as pd
 from my_flask_app import app
 from .models.models import CustomTable, CustomColumn, Theme, CompressedDataType, RegType, RegRole
 from flask_sqlalchemy import SQLAlchemy
@@ -6,8 +7,8 @@ from sqlalchemy import ARRAY, BIGINT, BOOLEAN, DOUBLE_PRECISION, FLOAT, INTEGER,
 import pydot, base64, os, logging
 from sqlalchemy.orm import scoped_session, sessionmaker
 from sqlalchemy.dialects.postgresql.base import ischema_names
-from sqlalchemy.dialects.postgresql import JSONB, TSTZRANGE, INTERVAL, BYTEA
-
+from sqlalchemy.dialects.postgresql import JSONB, TSTZRANGE, INTERVAL, BYTEA, JSON, UUID, DOUBLE_PRECISION, BYTEA, ARRAY, REAL, TSTZRANGE, UUID, BYTEA, JSONB, JSON, ARRAY, FLOAT, INTEGER, TIMESTAMP, TEXT, BOOLEAN, VARCHAR, NUMERIC, REAL
+from sqlalchemy.dialects.sqlite import JSON, FLOAT, INTEGER, TIMESTAMP, TEXT, BOOLEAN, VARCHAR, NUMERIC, REAL
 
 # Set up database (call db.engine)
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
@@ -106,6 +107,8 @@ def index():
         return f"An error occurred: {str(e)}", 400
     
 
+
+
 @app.route('/handle-drop', methods=['POST'])
 def handle_drop():
     data = request.json
@@ -166,7 +169,19 @@ def get_table_data():
     table_columns = [column.name for column in table_instance.columns]
     sorted_table_columns = sorted(table_columns)
 
-    return jsonify({ 'html_table': html_table, 'table_columns': sorted_table_columns })
+
+    feature_columns = sorted_table_columns
+    if check_json_column(engine, table_name) != []:
+        json_column_names = check_json_column(engine, table_name)
+        for column_name in json_column_names:
+            feature_columns.remove(column_name)
+            jsonKeys = handle_json_column(engine, table_name, column_name) #[('line',), ('coarse', 'fine'), ('name',), ('percent',), ('axisID', 'coarse', 'fine')]
+            for key in jsonKeys:
+                feature_columns.append( column_name + str(key) ) if len(key) > 1 else feature_columns.append( column_name +  str(key).replace(',', ''))
+
+
+
+    return jsonify({ 'html_table': html_table, 'table_columns': sorted_table_columns, 'feature_columns': feature_columns })
 
 
 @app.route('/get-label-column', methods=['POST'])
@@ -205,6 +220,45 @@ def add_label():
     return jsonify({'defined_labels': self_defined_labels})
 
 
+def check_json_column(engine, table_name):
+    insp = inspect(engine)
+    schema = getTableSchema(table_name) if insp.dialect.name == 'postgresql' else insp.default_schema_name
+    json_column_names = []
+
+    columnList = insp.get_columns(table_name, schema) # List of columns
+    for column in columnList:    # column is a dictionary: {'name': 'machine_id', 'type': INTEGER(), 'nullable': False, 'default': None, 'autoincrement': False, 'comment': None}  
+        column_type = column['type']
+        if type(column_type) == JSON or type(column_type) == JSONB:
+            json_column_names.append(column['name'])
+    print(json_column_names)
+    return json_column_names                
+
+def handle_json_column(engine, table_name, column_name):
+    insp = inspect(engine)
+
+    # Create a connection from the engine
+    with engine.connect() as conn:
+        # Prepare the SQL query to fetch a sample JSON object from the specified column
+        if insp.dialect.name == 'postgresql':
+            schema = getTableSchema(table_name)
+            query = f"SELECT DISTINCT {column_name} FROM {schema}.{table_name}"
+        else:
+            query = f"SELECT DISTINCT {column_name} FROM {table_name}"
+        
+        # Execute the query and fetch the result
+        result = conn.execute(text(query)).fetchall()
+        # df = pd.read_sql_query(query, engine)
+        conn.close()
+
+        jsonKeys = []
+        for row in result:
+            name = tuple(sorted(row[0].keys()))
+            if name not in jsonKeys:
+                jsonKeys.append(name)
+        print(jsonKeys)
+        return jsonKeys
+
+
 def database_name_from_uri(engine, database_uri: str):
     if engine.dialect.name == 'postgresql':
         return engine.url.database
diff --git a/my_flask_app/templates/app.html b/my_flask_app/templates/app.html
index 4c70901..353e6d5 100644
--- a/my_flask_app/templates/app.html
+++ b/my_flask_app/templates/app.html
@@ -263,14 +263,12 @@
                 <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                   <div class="accordion-body">
                     <form method="post">
-                        <!-- <label> -->
-                            <input class="form-check-input" id="flexCheckDefault" style="margin: 2px 2px 2px 5px; border-color: black;"  type="checkbox" name="show_all" value="True" onchange="this.form.submit()" {{ 'checked' if show_all else '' }}>
-                            <!-- <span class="uk-label" style="margin: 1px;" >show all</span> -->
-                            <label class="form-check-label" for="flexCheckDefault" style="margin-top: 3px;">
-                                Primary Tables
-                              </label>
-                            <!-- </label> -->
-                        <select class="form-select" name="schema" onchange='this.form.submit()' style="padding: 0px 1px 2px 1px;">
+                        <input class="form-check-input" id="showAllClick" style="margin: 2px 2px 2px 5px; border-color: black;"  type="checkbox" name="show_all" value="True" onchange="this.form.submit()">
+                        <!-- <span class="uk-label" style="margin: 1px;" >show all</span> -->
+                        <label class="form-check-label" for="showAllClick" style="margin-top: 3px;">
+                            Primary Tables
+                        </label>
+                        <select class="form-select" name="schema" id="schemaSelect" onchange="this.form.submit()" style="padding: 0px 1px 2px 1px;">
                             <option value="">Choose here</option>
                             {% for schema in schemas %}
                             <option value="{{ schema }}" {% if schema == schema_Selected %} selected {% endif %}>{{ schema }}</option>
@@ -451,19 +449,20 @@
 
                         <div class="mb-3">
                             <label class="form-label">Feature</label>
-                            <form method="POST" action = "/get_value_column" name = "chart_options"  style="width: 100%; border-color: aqua;">
-                                <select name = "value_column[]" data-placeholder="Value columns" multiple class="chosen-select" tabindex="8">
-                                    <option value="GB">GB</option>              
-                                    <option value="RU">RU</option>
-                                    {% for value_column in value_columns %}
-                                        <option value="{{ value_column }}">{{ value_column }}</option>
-                                    {% endfor %}
-                                </select>  
-                            
-                                <script> $(".chosen-select").chosen(); </script>
-                            
-                                <button type="submit" class="btn btn-primary">Submit</button>
-                            </form>     
+                            <select id="select_features" name = "value_column[]" data-placeholder="Value columns" multiple class="chosen-select" tabindex="8">
+                                <option value="GB">GB</option>              
+                                <option value="RU">RU</option>
+                                <option value="RU">Hey</option>
+                                {% for column in columns %}
+                                    <option>Column select...</option>
+                                    <option value="{{label}}">{{ label }}</option>
+                                {% endfor %}
+                            </select>  
+                        
+                            <script> $(".chosen-select").chosen(); </script>
+                            <br>
+                            <!-- <button type="submit" class="btn btn-primary">Submit</button> -->
+
                         </div>
                             <!-- <div class="mb-3">
                                 <div class="form-check">
@@ -530,6 +529,72 @@
         <div id="resize-handle-left" class="resize-handle-left"></div>
     </div> 
     <script>
+        // function select_schema(){
+        //     document.getElementById('schemaSelect').addEventListener('changed', function() {
+        //         var selectedSchema = this.value;
+        //         console.log(selectedSchema);
+        //         // Iterate over all option elements in the select element
+        //         let options = document.getElementById('schemaSelect').options;
+        //         for (let i = 0; i < options.length; i++) {
+        //             if (options[i].value == selectedSchema) {
+        //                 options[i].selected = true;  // Set the selected attribute to true
+        //             } else {
+        //                 options[i].selected = false; // Ensure other options are not marked as selected
+        //             }
+        //         }
+
+        //         fetch('/update-schema', {
+        //             method: 'POST',
+        //             body: JSON.stringify({ schema: selectedSchema }),
+        //             headers: {
+        //                 'Content-Type': 'application/json'
+        //             }
+        //         })
+        //         .then(response => response.json())
+        //         .then(data => {
+        //             // Update the tables container with the new tables
+        //             const tablesContainer = document.getElementById('show_tables1');
+        //             tablesContainer.innerHTML = ''; // Clear existing tables
+
+        //             data.tables.forEach(table => {
+        //                 // Create new elements for each table and append them to the container
+        //                 const divOuter = document.createElement('div');
+        //                 divOuter.className = "uk-margin";
+        //                 divOuter.style = "height: 15px; margin-bottom: -4px;";
+
+        //                 const divInner = document.createElement('div');
+        //                 divInner.className = "list-group-item-action uk-card uk-card-default uk-card-body uk-card-small";
+        //                 divInner.style = "height: 15px; padding-top: 5px;";
+        //                 divInner.textContent = table;
+
+        //                 divOuter.appendChild(divInner);
+        //                 tablesContainer.appendChild(divOuter);
+        //             });
+        //             showErdCanvas("erdCanvas1", "zoomInBtn1", "zoomOutBtn1", data.image1 );
+        //         })
+        //         .catch(error => console.error('Error:', error));
+        //     });
+        // }
+
+
+        // function show_all() {
+        //     document.getElementById('showAllClick').addEventListener('change', function() {
+        //         var showAll = this.checked; // The checkbox is currently checked (true) or unchecked (false) 
+        //         fetch('/update-show-all', {
+        //             method: 'POST',
+        //             body: JSON.stringify({ show_all: showAll }),
+        //             headers: {
+        //                 'Content-Type': 'application/json'
+        //             }
+        //         })
+        //         .then(response => response.json())
+        //         .then(data => {
+        //             showErdCanvas("erdCanvas1", "zoomInBtn1", "zoomOutBtn1", data.image1 );
+        //         })
+        //         .catch(error => console.error('Error:', error));
+        //     });
+        // }
+
         function addLabel() {
             const labelValue = document.getElementById('defined-label').value; // Get the value of the input
 
@@ -682,7 +747,6 @@
                 // Assign data.table_columns to the select element
                 const selectElement = document.getElementById('select_column');
                 selectElement.innerHTML = '';
-                // Create default option
                 const optionElement = document.createElement('option');
                 optionElement.value = '';
                 optionElement.textContent = 'Label column select';
@@ -694,6 +758,20 @@
                     optionElement.textContent = column;
                     selectElement.appendChild(optionElement);
                 });
+                
+                // Assign data.table_columns to the multi-select element
+                const selectFeatures = document.getElementById('select_features');
+                selectFeatures.innerHTML = '';
+                // Add the table columns as options
+                data.feature_columns.forEach(column => {
+                    const optionElement = document.createElement('option');
+                    optionElement.value = column;
+                    optionElement.textContent = column;
+                    selectFeatures.appendChild(optionElement);
+                });
+
+                // Trigger Chosen to update its view
+                $(".chosen-select").trigger("chosen:updated");
 
                 // toggleTerminal(); // Show the terminal
             })
@@ -777,7 +855,6 @@
 
 
         document.addEventListener('DOMContentLoaded', function() {
-            console.log('DOM is ready');
             // Show the ERD canvas
             showErdCanvas("erdCanvas1", "zoomInBtn1", "zoomOutBtn1", '{{ image1 }}');
             showErdCanvas("erdCanvas2", "zoomInBtn2", "zoomOutBtn2", '{{ image2 }}');
-- 
GitLab