explore dataset feature with filtering & sorting

app.py

@@ -131,6 +131,7 @@ app.layout = dmc.MantineProvider(
                                     target="_blank",
                                     style={"display": "none", "marginTop": "20px", "textAlign": "right"}
                                 ),
+                                html.Div(id="dataset-explorer", style={"marginTop": "10px"}),  # Add this line
                                 html.Div(id="chartbot-output", style={"marginTop": "10px"}),
                                 html.Div(id="python-content-output", style={"marginTop": "10px"}),
                                 
@@ -158,13 +159,14 @@ app.layout = dmc.MantineProvider(
     Output("stored-data", "data"),
     Output("stored-file-name", "data"),
     Output("file-name-display", "children"),
+    Output("dataset-explorer", "children"),  # Add this output
     Input("upload-data", "contents"),
     State("upload-data", "filename")
 )
 def upload_file(contents, filename):
     """Handle CSV file upload and store the data."""
     if contents is None:
-        return None, None, None
+        return None, None, None, None  # Add None for dataset-explorer
     
     try:
         # Parse the uploaded file
@@ -175,15 +177,45 @@ def upload_file(contents, filename):
         
         # Only accept CSV files
         if not filename.endswith('.csv'):
-            return None, None, html.Div("Only CSV files are allowed", style={"color": "red"})
+            return None, None, html.Div("Only CSV files are allowed", style={"color": "red"}), None
         
         # Read CSV file
         df = pd.read_csv(io.StringIO(decoded.decode('utf-8')))
         
-        return df.to_dict("records"), filename, html.Div(f"✓ {filename}", style={"color": "#067A55", "fontWeight": "600"})
+        # Create AG Grid accordion
+        grid_accordion = html.Div([
+            dmc.Accordion(
+                children=[
+                    dmc.AccordionItem(
+                        [
+                            dmc.AccordionControl(
+                                html.Div([
+                                    html.Span("Explore Dataset", style={"fontWeight": "600", "fontSize": "15px"}),
+                                    html.Span(f" ({len(df)} rows, {len(df.columns)} columns)", 
+                                             style={"fontSize": "13px", "color": "#667085", "marginLeft": "8px"})
+                                ])
+                            ),
+                            dmc.AccordionPanel(
+                                helpers.create_ag_grid(df)
+                            )
+                        ],
+                        value="dataset"
+                    )
+                ],
+                chevronPosition="right",
+                variant="filled",
+                style={
+                    "border": "2px solid #E4E7EC",
+                    "borderRadius": "8px",
+                    "boxShadow": "0 1px 3px rgba(0, 0, 0, 0.1)"
+                }
+            )
+        ], style={"marginTop": "20px"})
+        
+        return df.to_dict("records"), filename, html.Div(f"✓ {filename}", style={"color": "#067A55", "fontWeight": "600"}), grid_accordion
     
     except Exception as e:
-        return None, None, html.Div(f"Error: {str(e)}", style={"color": "red"})
+        return None, None, html.Div(f"Error: {str(e)}", style={"color": "red"}), None
 
 # Callback to enable/disable submit button based on inputs
 @callback(
@@ -263,8 +295,7 @@ def create_graph(n_clicks, user_prompt, stored_data, filename):
                         [
                             dmc.AccordionControl(
                                 html.Div([
-                                    html.Span("Code Generated", style={"fontWeight": "600", "fontSize": "15px"}),
-                                    html.Span(" (Click to expand)", style={"fontSize": "13px", "color": "#667085", "marginLeft": "8px"})
+                                    html.Span("Code Generated", style={"fontWeight": "600", "fontSize": "15px"})
                                 ])
                             ),
                             dmc.AccordionPanel(
@@ -326,6 +357,7 @@ def download_html(encoded):
     Output("stored-data", "data", allow_duplicate=True),
     Output("stored-file-name", "data", allow_duplicate=True),
     Output("file-name-display", "children", allow_duplicate=True),
+    Output("dataset-explorer", "children", allow_duplicate=True),  # Add this output
     Output("chartbot-output", "children", allow_duplicate=True),
     Output("python-content-output", "children", allow_duplicate=True),
     Output("download-html", "style", allow_duplicate=True),
@@ -338,7 +370,7 @@ def download_html(encoded):
 def reset_chat(n_clicks):
     """Reset all inputs and outputs to start a new chat."""
     if n_clicks > 0:
-        return "", None, None, None, None, None, {"display": "none"}, None, True, None
+        return "", None, None, None, None, None, None, {"display": "none"}, None, True, None  # Added None for dataset-explorer
     return dash.no_update
 
 if __name__ == "__main__":

utils/helpers.py

@@ -167,4 +167,40 @@ def save_dataframe_to_current_path(df: pd.DataFrame, filename: str) -> None:
         df.to_csv(filename, index=False)
 
     elif 'xls' in filename:
-        df.to_excel(filename, index=False)
+        df.to_excel(filename, index=False)
+
+def create_ag_grid(df):
+    """
+    Create a Dash AG Grid component for data exploration.
+    
+    Args:
+        df: pandas DataFrame
+        
+    Returns:
+        dag.AgGrid component
+    """
+    return dag.AgGrid(
+        id="data-explorer-grid",
+        rowData=df.to_dict("records"),
+        columnDefs=[{
+            "field": col,
+            "filter": True,
+            "sortable": True,
+            "resizable": True,
+            "floatingFilter": True
+        } for col in df.columns],
+        defaultColDef={
+            "filter": True,
+            "sortable": True,
+            "resizable": True,
+            "minWidth": 100
+        },
+        dashGridOptions={
+            "pagination": True,
+            "paginationPageSize": 10,
+            "paginationPageSizeSelector": [10, 20, 50, 100],
+            "animateRows": True
+        },
+        style={"height": "400px", "width": "100%"},
+        className="ag-theme-alpine"
+    )