Initial Draft

app.py

@@ -0,0 +1,136 @@
+import json
+import gradio as gr
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+from notebook import Notebook
+
+# Height of the Tabs Text Area
+TAB_LINES = 8
+
+    
+# Custom CSS styling
+custom_css = """
+.gradio-container {
+    background-color: #f0f4f8;
+}
+.logo {
+    max-width: 200px;
+    margin: 20px auto;
+    display: block;
+.gr-button {
+    background-color: #4a90e2 !important;
+}
+.gr-button:hover {
+    background-color: #3a7bc8 !important;
+}
+}
+"""
+
+def read_data(path):
+    with open(path, "r") as f:
+        data = json.load(f)
+    return data
+data = read_data(path="output.json")
+
+
+def build_chart(fig_data, chart_config):
+    chart_type = chart_config.get("type")
+
+    if chart_type == "bar":
+        fig = px.bar(fig_data, x='x', y='y', title=chart_config['title'],
+                labels={'y': chart_config['y_axis_label'], 'x': chart_config['x_axis_label']},
+                color='x', template='plotly_white')
+
+    if chart_type == "line":
+        fig = px.line(fig_data, x='x', y='y', title=chart_config['title'],
+                labels={'y': chart_config['y_axis_label'], 'x': chart_config['x_axis_label']},
+                template='plotly_white'
+                )
+
+    if chart_type == "pie":
+        fig = px.pie(fig_data, values='y', names='x',
+        title=chart_config['title'], labels={'y': chart_config['y_axis_label']},template='plotly_white',
+        hole=0.3
+        )
+        fig.update_traces(
+            textposition='inside',  
+            textfont_size=12,  
+        )
+
+    if chart_type == "hist":
+        fig_data['bin_center'] = (fig_data['bin_start'] + fig_data['bin_end']) / 2
+        fig = px.bar(fig_data, x='bin_center', y='frequency', title=chart_config['title'],
+                labels={'frequency': chart_config['y_axis_label'], 'bin_center': chart_config['x_axis_label']},
+                template='plotly_white')
+    
+    fig.update_layout(showlegend=False)
+
+    return fig
+
+def display_data(data_item):
+    body = json.loads(data_item.get("body"))
+
+    sql_config = body.get("sql_config")
+    sql_query, query_description = sql_config.get("sql_query"), sql_config.get("explanation")
+    
+    table_data = body.get("table_data")
+    table_data = pd.DataFrame(table_data)
+
+    chart_data = body.get("chart_data")
+    config = body.get("chart_config")
+    chart_type = config.get("type")
+    fig_data = pd.DataFrame(chart_data.get(chart_type).get("data"))
+    fig = build_chart(fig_data=fig_data, chart_config=config)
+
+    return sql_query, query_description, table_data, fig
+
+
+def export_notebook():
+    global data
+    notebook = Notebook(data=data)
+    notebook_path = notebook.export_notebook()
+    return notebook_path
+
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="purple", secondary_hue="indigo")) as demo:
+    gr.Image("logo.png", label=None, show_label=False, container=False, height=100)
+    gr.Markdown("""
+    <div style='text-align: center;'>
+    <strong style='font-size: 36px;'>Export As Notebook</strong>
+    <br>
+    <span style='font-size: 20px;'>Automate Export Multiple Tabs to Jupyter Notebook.</span>
+    </div>
+    """)
+    with gr.Row():
+        with gr.Tabs():
+            for i,data_item in enumerate(data):
+                sql_query, query_description, table_data, fig = display_data(data_item=data_item)
+                with gr.Tab(f"Tab {i+1}"):
+                    with gr.Row():
+                        with gr.Column():
+                            row1 = gr.Textbox(lines=TAB_LINES, label="Generated SQL", value=sql_query, interactive=False,
+                                                autoscroll=False)
+                        with gr.Column():
+                            row2 = gr.Textbox(lines=TAB_LINES, label="Query Description", value=query_description, interactive=False,
+                                                autoscroll=False)
+
+                    with gr.Row():
+                        with gr.Column():
+                            row3 = gr.DataFrame(label="Table Data", value=table_data, interactive=False,
+                                                 max_height=400, min_width=800)
+                        with gr.Column():    
+                            row4 = gr.Plot(value=fig)
+                            
+    exprt_btn = gr.Button("Export as Notebook", variant="primary")
+    download_component = gr.File(label="Click on the File Size Below 👇 to Download Notebook",visible=False, interactive=False)
+    exprt_btn.click(export_notebook, inputs=None, outputs=download_component)
+    download_component.change(
+        lambda x: gr.update(visible=bool(x)),
+        inputs=download_component,
+        outputs=download_component
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)
+    

notebook.py

@@ -0,0 +1,114 @@
+import os
+import textwrap
+import nbformat
+from nbformat import v4 as nbf
+import logging
+import json
+from datetime import datetime, timezone
+import pandas as pd
+
+logger = logging.getLogger(__name__)
+
+class Notebook:
+    def __init__(self, data):
+        self.nb = nbf.new_notebook()
+        
+        self.nb.cells = []
+        self.data = data
+        self.output_path = "tmp/notebook.ipynb"
+        
+        self.imports_added = False
+
+
+    def build_notebook(self):
+        success = 0
+        metrics = self.data
+        logger.info(f"Start building notebook with {len(metrics)} metrics")
+        for i, metric in enumerate(metrics):
+            logger.info(f"Processing metric {i+1} of {len(metrics)}")
+            metric_result = json.loads(metric.get("body"))
+            table_data = metric_result.get("table_data")
+            query_config = metric_result.get("sql_config")
+            
+            chart_data = metric_result.get("chart_data", {})
+            chart_config = metric_result.get("chart_config", {})
+            chart_type = metric_result.get("chart_config", {}).get("type", {})
+            
+            if not self.nb.cells:
+                self._add_title()
+                
+            self._add_metric_header(config=chart_config, index=i)
+            
+            self._add_query_details(query_config=query_config)
+            if not self.imports_added:
+                self._import_libs()
+                self.imports_added = True
+
+            self._add_table(raw_table=table_data)
+
+            if chart_data and chart_config:
+                self._chart_code(chart_type=chart_type, chart_data=chart_data, chart_config=chart_config)
+
+    def export_notebook(self):
+        self.build_notebook()
+        logger.info(f"Exporting notebook to {self.output_path}")
+        os.makedirs(os.path.dirname(self.output_path), exist_ok=True)
+        with open(self.output_path, 'w') as f:
+            nbformat.write(self.nb, f)
+        logger.info(f"Notebook exported successfully to {self.output_path}")
+        return self.output_path
+    
+    def _import_libs(self):
+        self.nb.cells.append(nbf.new_markdown_cell("### 📦 Imports"))
+        self.nb.cells.append(nbf.new_code_cell("import pandas as pd\nimport plotly.express as px"))
+    
+    
+    def _add_title(self):
+        self.nb.cells.append(nbf.new_markdown_cell("# Metrics Dashboard"))
+    
+    
+    def _add_metric_header(self, config, index):
+        self.nb.cells.append(nbf.new_markdown_cell(f"## 📈 Metric {index+1} {config.get('title', "")}\n**Timestamp:** {datetime.now(timezone.utc).isoformat()}"))
+    
+        
+    def _chart_code(self, chart_type, chart_data, chart_config):
+        df_code = f'df = pd.DataFrame({chart_data.get(chart_type).get('data')})'
+        chart_dispatch = {
+            "bar": f"""
+            fig = px.bar(df, x='x', y='y', title='{chart_config['title']}',
+                   labels={{'y': '{chart_config['y_axis_label']}', 'x': '{chart_config['x_axis_label']}'}}, color='x', template='plotly_white')
+            """,
+            
+            "line": f"""
+            fig = px.line(df, x='x', y='y', title='{chart_config['title']}',
+                   labels={{'y': '{chart_config['y_axis_label']}', 'x': '{chart_config['x_axis_label']}'}}, template='plotly_white')
+            """,
+            
+            "pie": f"""
+            fig = px.pie(df, values='y', names='x', title='{chart_config['title']}',
+                   labels={{'y': '{chart_config['y_axis_label']}'}}, template='plotly_white', hole=0.3)
+            fig.update_traces(textposition='inside', textfont_size=12)
+            """,
+            
+            "hist": f"""
+            df['bin_center'] = (df['bin_start'] + df['bin_end']) / 2
+            fig = px.bar(df, x='bin_center', y='frequency', title='{chart_config['title']}',
+                labels={{'frequency': '{chart_config['y_axis_label']}', 'bin_center': '{chart_config['x_axis_label']}'}},
+                template='plotly_white')
+            """
+        }
+        chart_code = f"{df_code}\n{textwrap.dedent(chart_dispatch.get(chart_type))}\nfig.update_layout(showlegend=False)\nfig.show()"
+        
+        self.nb.cells.append(nbf.new_markdown_cell(f"### 📊 Chart"))
+        self.nb.cells.append(nbf.new_code_cell(chart_code))
+        
+    def _add_query_details(self, query_config):
+        sql_clean = query_config['sql_query'].replace("\\n", "\n").strip()
+        self.nb.cells.append(nbf.new_markdown_cell(f"**User Query:** {query_config['text_query']}\n"))
+        self.nb.cells.append(nbf.new_markdown_cell(f"### 🔍 Query Details\n**SQL:**\n```sql\n{sql_clean}\n```\n**Explanation:** {query_config['explanation']}"))
+        
+    def _add_table(self, raw_table):
+        table_data = pd.DataFrame(raw_table).fillna("NAN").to_dict(orient="records")
+        raw_code = f'raw_table = pd.DataFrame({table_data})\nraw_table.head()'
+        self.nb.cells.append(nbf.new_markdown_cell("### Table"))
+        self.nb.cells.append(nbf.new_code_cell(raw_code))

output.json

@@ -0,0 +1,17 @@
+[
+    {
+        "body": "{\"chart_data\": {\"bar\": {\"data\": [{\"x\": \"1\", \"y\": 2483550}, {\"x\": \"2\", \"y\": 598081}, {\"x\": \"0\", \"y\": 121958}, {\"x\": \"4\", \"y\": 31334}, {\"x\": \"3\", \"y\": 17793}, {\"x\": \"5\", \"y\": 1}]}}, \"table_data\": {\"payment_type\": [1, 2, 0, 4, 3, 5], \"trip_count\": [2483550, 598081, 121958, 31334, 17793, 1]}, \"chart_config\": {\"type\": \"bar\", \"title\": \"Total Number of Trips by Payment Type\", \"x_axis_label\": \"Payment Type\", \"y_axis_label\": \"Number of Trips\", \"legend\": false, \"colors\": []}, \"sql_config\": {\"sql_query\": \"SELECT payment_type, COUNT(*) AS trip_count FROM sample_data. nyc.taxi GROUP BY payment_type ORDER BY trip_count DESC LIMIT 20000;\", \"explanation\": \"Counts the number of trips for each payment type.\", \"text_query\": \"What is the total number of trips by each payment_type?\"}, \"error\": {\"success\": true}, \"hash_key\": \"da469599b102c658f3ef269c9ba5770b\"}"
+    },
+    {
+        "body": "{\"chart_data\": {\"line\": {\"data\": [{\"x\": \"2022-10-31\", \"y\": 34}, {\"x\": \"2022-11-01\", \"y\": 120506}, {\"x\": \"2022-11-02\", \"y\": 126271}, {\"x\": \"2022-11-03\", \"y\": 131484}, {\"x\": \"2022-11-04\", \"y\": 130682}, {\"x\": \"2022-11-05\", \"y\": 130401}, {\"x\": \"2022-11-06\", \"y\": 104570}, {\"x\": \"2022-11-07\", \"y\": 112135}, {\"x\": \"2022-11-08\", \"y\": 121121}, {\"x\": \"2022-11-09\", \"y\": 128700}, {\"x\": \"2022-11-10\", \"y\": 132727}, {\"x\": \"2022-11-11\", \"y\": 117728}, {\"x\": \"2022-11-12\", \"y\": 130944}, {\"x\": \"2022-11-13\", \"y\": 114269}, {\"x\": \"2022-11-14\", \"y\": 82278}, {\"x\": \"2022-11-15\", \"y\": 90728}, {\"x\": \"2022-11-16\", \"y\": 92660}, {\"x\": \"2022-11-17\", \"y\": 95344}, {\"x\": \"2022-11-18\", \"y\": 95454}, {\"x\": \"2022-11-19\", \"y\": 94932}, {\"x\": \"2022-11-20\", \"y\": 81125}, {\"x\": \"2022-11-21\", \"y\": 108526}, {\"x\": \"2022-11-22\", \"y\": 114546}, {\"x\": \"2022-11-23\", \"y\": 105640}, {\"x\": \"2022-11-24\", \"y\": 69663}, {\"x\": \"2022-11-25\", \"y\": 86607}, {\"x\": \"2022-11-26\", \"y\": 99513}, {\"x\": \"2022-11-27\", \"y\": 90529}, {\"x\": \"2022-11-28\", \"y\": 106488}, {\"x\": \"2022-11-29\", \"y\": 119372}, {\"x\": \"2022-11-30\", \"y\": 117677}, {\"x\": \"2022-12-01\", \"y\": 57}]}}, \"table_data\": {\"x\": [\"2022-10-31\", \"2022-11-01\", \"2022-11-02\", \"2022-11-03\", \"2022-11-04\", \"2022-11-05\", \"2022-11-06\", \"2022-11-07\", \"2022-11-08\", \"2022-11-09\", \"2022-11-10\", \"2022-11-11\", \"2022-11-12\", \"2022-11-13\", \"2022-11-14\", \"2022-11-15\", \"2022-11-16\", \"2022-11-17\", \"2022-11-18\", \"2022-11-19\", \"2022-11-20\", \"2022-11-21\", \"2022-11-22\", \"2022-11-23\", \"2022-11-24\", \"2022-11-25\", \"2022-11-26\", \"2022-11-27\", \"2022-11-28\", \"2022-11-29\", \"2022-11-30\", \"2022-12-01\"], \"y\": [34, 120506, 126271, 131484, 130682, 130401, 104570, 112135, 121121, 128700, 132727, 117728, 130944, 114269, 82278, 90728, 92660, 95344, 95454, 94932, 81125, 108526, 114546, 105640, 69663, 86607, 99513, 90529, 106488, 119372, 117677, 57]}, \"chart_config\": {\"type\": \"line\", \"title\": \"Total Number of Trips per Day Over Time\", \"x_axis_label\": \"Date\", \"y_axis_label\": \"Number of Trips\", \"legend\": false, \"colors\": []}, \"sql_config\": {\"sql_query\": \"SELECT CAST(tpep_pickup_datetime AS DATE) AS x, COUNT(*) AS y FROM sample_data.nyc.taxi GROUP BY x ORDER BY x LIMIT 20000;\", \"explanation\": \"Counts the number of trips per day based on the pickup datetime and formats the data for line plot.\", \"text_query\": \"What is the total number of trips per day over time?\"}, \"error\": {\"success\": true}, \"hash_key\": \"fc224d097e70ed97e3c95914afb2c0d5\"}"
+    },
+    {
+        "body": "{\"chart_data\": {\"hist\": {\"data\": [{\"bin_start\": 0, \"bin_end\": 1, \"frequency\": 667647.0}, {\"bin_start\": 1, \"bin_end\": 2, \"frequency\": 1043642.0}, {\"bin_start\": 2, \"bin_end\": 3, \"frequency\": 547827.0}, {\"bin_start\": 3, \"bin_end\": 4, \"frequency\": 268437.0}, {\"bin_start\": 4, \"bin_end\": 5, \"frequency\": 140938.0}, {\"bin_start\": 5, \"bin_end\": 10, \"frequency\": 296746.0}, {\"bin_start\": 10, \"bin_end\": 20, \"frequency\": 251072.0}, {\"bin_start\": 20, \"bin_end\": 30, \"frequency\": 34069.0}, {\"bin_start\": 30, \"bin_end\": 40, \"frequency\": 1547.0}, {\"bin_start\": 40, \"bin_end\": 50, \"frequency\": 355.0}, {\"bin_start\": 50, \"bin_end\": 100, \"frequency\": 303.0}]}}, \"table_data\": {\"bin_id\": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], \"frequency\": [667647, 1043642, 547827, 268437, 140938, 296746, 251072, 34069, 1547, 355, 303]}, \"chart_config\": {\"type\": \"hist\", \"title\": \"Distribution of Trip Distance\", \"x_axis_label\": \"Trip Distance (miles)\", \"y_axis_label\": \"Frequency\", \"legend\": false, \"colors\": []}, \"sql_config\": {\"sql_query\": \"\\nSELECT \\n    CASE \\n        WHEN trip_distance < 1 THEN 1\\n        WHEN trip_distance < 2 THEN 2\\n        WHEN trip_distance < 3 THEN 3\\n        WHEN trip_distance < 4 THEN 4\\n        WHEN trip_distance < 5 THEN 5\\n        WHEN trip_distance < 10 THEN 6\\n        WHEN trip_distance < 20 THEN 7\\n        WHEN trip_distance < 30 THEN 8\\n        WHEN trip_distance < 40 THEN 9\\n        WHEN trip_distance < 50 THEN 10\\n        ELSE 11\\n    END AS bin_id,\\n    COUNT(*) AS frequency\\nFROM \\n    sample_data.nyc.taxi\\nWHERE \\n    trip_distance < 100\\nGROUP BY \\n    bin_id\\nORDER BY \\n    bin_id;\\n\", \"explanation\": \"Retrieves the frequency of trips within specified distance bins for the first 1000 rows using CASE statements.\", \"text_query\": \"What is the distribution of trip_distance? only use first 1000 rows\"}, \"error\": {\"success\": true}, \"hash_key\": \"3ba0e8041cabdeee7f140c9232eb16f7\"}"
+    },
+    {
+        "body": "{\"chart_data\": {\"pie\": {\"data\": [{\"x\": \"1.0\", \"y\": 90.54768674926224}, {\"x\": \"2.0\", \"y\": 4.076100072646959}, {\"x\": \"nan\", \"y\": 3.7494193315926347}, {\"x\": \"5.0\", \"y\": 0.9550169904114006}, {\"x\": \"3.0\", \"y\": 0.27749109436818514}, {\"x\": \"99.0\", \"y\": 0.2704508261862314}, {\"x\": \"4.0\", \"y\": 0.1231893214196009}, {\"x\": \"6.0\", \"y\": 0.0006456141127555825}]}}, \"table_data\": {\"RatecodeID\": [1.0, 2.0, NaN, 5.0, 3.0, 99.0, 4.0, 6.0], \"trip_count\": [2945260, 132584, 121958, 31064, 9026, 8797, 4007, 21], \"percentage\": [90.54768674926224, 4.076100072646959, 3.7494193315926347, 0.9550169904114006, 0.27749109436818514, 0.2704508261862314, 0.1231893214196009, 0.0006456141127555825]}, \"chart_config\": {\"type\": \"pie\", \"title\": \"Percentage Share of Trips by RatecodeID\", \"x_axis_label\": \"RatecodeID\", \"y_axis_label\": \"Percentage\", \"legend\": true, \"colors\": []}, \"sql_config\": {\"sql_query\": \"SELECT RatecodeID, COUNT(*) AS trip_count FROM sample_data.nyc.taxi GROUP BY RatecodeID ORDER BY trip_count DESC LIMIT 20000;\", \"explanation\": \"Counts the number of trips for each RatecodeID.\", \"text_query\": \"What is the percentage share of trips by RatecodeID? show as pie chart\"}, \"error\": {\"success\": true}, \"hash_key\": \"0efdf6fa1df25fd3116353db8630552d\"}"
+    },
+    {
+        "body": "{\"chart_data\": {\"bar\": {\"data\": [{\"x\": \"2\", \"y\": 2.929572542537025}, {\"x\": \"1\", \"y\": 2.579547053346901}, {\"x\": \"6\", \"y\": 0.0}]}}, \"table_data\": {\"x\": [2, 1, 6], \"y\": [2.929572542537025, 2.579547053346901, 0.0]}, \"chart_config\": {\"type\": \"bar\", \"title\": \"Average Tip Amount per VendorID\", \"x_axis_label\": \"VendorID\", \"y_axis_label\": \"Average Tip Amount\", \"legend\": false, \"colors\": []}, \"sql_config\": {\"sql_query\": \"SELECT VendorID AS x, AVG(tip_amount) AS y FROM sample_data. nyc.taxi GROUP BY VendorID ORDER BY y DESC LIMIT 20;\", \"explanation\": \"Calculates the average tip_amount for each VendorID and orders the results by the average tip amount in descending order, limiting to the top 20 VendorIDs.\", \"text_query\": \"What is the average tip_amount per VendorID?\"}, \"error\": {\"success\": true}, \"hash_key\": \"9db02b369fb12b3c3b1974d32e2cb47c\"}"
+    }
+]

requirements.txt

@@ -0,0 +1,4 @@
+gradio
+pandas
+plotly
+nbformat