add query into stats page

minlingz · Dec 10, 2023 · 34e1a25 · 34e1a25
1 parent 05c8828
commit 34e1a25
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/app.py b/app.py
@@ -19,15 +19,15 @@
 
 
 # @app.route("/get_data")
-def get_data_from_delta_table():
+def get_data_from_delta_table(q="SELECT * FROM prepared_song_data LIMIT 10"):
     key_vault_url = "https://dek.vault.azure.net/"
     credential = DefaultAzureCredential()
 
     secret_client = SecretClient(vault_url=key_vault_url, credential=credential)
 
     secret_value = secret_client.get_secret("HLDB").value
 
-    query = "SELECT * FROM prepared_song_data LIMIT 10"
+    query = q
     # query = "SELECT * FROM test"
     # Headers for Databricks REST API request
     headers = {
@@ -65,6 +65,13 @@ def get_data_from_delta_table():
         }
 
 
+@app.route("/execute_query", methods=["POST"])
+def execute_query():
+    q = request.form.get("queryInput")
+    data = get_data_from_delta_table(q)
+    return render_template("songs.html", songs=data)
+
+
 @app.route("/get_data", methods=["GET"])
 def get_data():
     data = get_data_from_delta_table()

diff --git a/templates/stats.html b/templates/stats.html
@@ -62,6 +62,17 @@
             margin: 1em 0;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+
+        #queryFormContainer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .queryForm {
+            text-align: center;
+        }
     </style>
 </head>
 <body>
@@ -84,6 +95,14 @@ <h2>Trend Analysis</h2>
         <h2>Artists Styles</h2>
         <img src="{{ url_for('static', filename='images/Artists Comparison.png') }}" alt="Description of the image">
     </section>
+
+    <div id="queryFormContainer">
+        <form action="/execute_query" method="POST" class="queryForm">
+            <label for="queryInput">Enter SQL Query:</label>
+            <input type="text" id="queryInput" name="queryInput">
+            <input type="submit" value="Execute Query">
+        </form>
+    </div>
 
     <footer>
         <section id="contact">