Merge pull request #197 from andrewm4894/add-ui-dev-helper-db

Add UI dev helper db + chart modal

Author: andrewm4894

Makefile

@@ -322,7 +322,7 @@ dagster-cleanup-menu:
 # DASHBOARD OPERATIONS
 # =============================================================================
 
-.PHONY: dashboard dashboardd dashboard-uvicorn dashboardd-uvicorn kill-dashboardd
+.PHONY: dashboard dashboardd dashboard-uvicorn dashboardd-uvicorn dashboard-local-dev kill-dashboardd seed-local-db
 
 # start dashboard locally
 dashboard:
@@ -340,6 +340,46 @@ dashboardd:
 dashboardd-uvicorn:
 	nohup uvicorn dashboard.app:app --host 0.0.0.0 --port 5003 --reload > /dev/null 2>&1 &
 
+# seed local development database with dummy data
+seed-local-db:
+	@echo "🌱 Seeding local development database (python_ingest_simple only)..."
+	source venv/bin/activate && python scripts/development/seed_local_db.py --metric-batches "python_ingest_simple" --db-path tmpdata/anomstack-local-dev.db --hours 72 --interval 10 --force
+
+seed-local-db-all:
+	@echo "🌱 Seeding database with ALL metric batches (python_ingest_simple, netdata, posthog, yfinance, currency)..."
+	source venv/bin/activate && python scripts/development/seed_local_db.py --metric-batches "python_ingest_simple,netdata,posthog,yfinance,currency" --db-path tmpdata/anomstack-all.db --hours 72 --interval 10 --force
+
+seed-local-db-custom:
+	@echo "🌱 Use: make seed-local-db-custom BATCHES='python_ingest_simple,netdata' DB_PATH='tmpdata/my.db'"
+	@echo "   Default BATCHES: python_ingest_simple"
+	@echo "   Default DB_PATH: tmpdata/anomstack-custom.db"
+	source venv/bin/activate && python scripts/development/seed_local_db.py --metric-batches "$(or $(BATCHES),python_ingest_simple)" --db-path "$(or $(DB_PATH),tmpdata/anomstack-custom.db)" --hours 72 --interval 10 --force
+
+# start dashboard in local development mode with seeded database
+dashboard-local-dev:
+	@echo "🚀 Starting dashboard in local development mode..."
+	@echo "📊 Using local development environment with seeded dummy data"
+	@if [ ! -f "tmpdata/anomstack-local-dev.db" ]; then \
+		echo "⚠️  Local dev database not found. Creating it first..."; \
+		$(MAKE) seed-local-db; \
+	fi
+	source venv/bin/activate && ANOMSTACK_ENV_FILE_PATH=profiles/local-dev.env uvicorn dashboard.app:app --host 0.0.0.0 --port 5003 --reload
+
+dashboard-local-dev-all:
+	@echo "🚀 Starting dashboard in local development mode (ALL batches)..."
+	@echo "📊 Using comprehensive database with python_ingest_simple, netdata, posthog, yfinance, AND currency metrics"
+	@if [ ! -f "tmpdata/anomstack-all.db" ]; then \
+		echo "⚠️  All-batches database not found. Creating it first..."; \
+		$(MAKE) seed-local-db-all; \
+	fi
+	source venv/bin/activate && ANOMSTACK_ENV_FILE_PATH=profiles/local-dev-all.env uvicorn dashboard.app:app --host 0.0.0.0 --port 5003 --reload
+
+dashboard-local-dev-custom:
+	@echo "🚀 Starting dashboard in local development mode (custom database)..."
+	@echo "💡 Use: make dashboard-local-dev-custom DB_PATH='tmpdata/my.db'"
+	@echo "   Default DB_PATH: tmpdata/anomstack-custom.db"
+	source venv/bin/activate && ANOMSTACK_DUCKDB_PATH="$(or $(DB_PATH),tmpdata/anomstack-custom.db)" uvicorn dashboard.app:app --host 0.0.0.0 --port 5003 --reload
+
 # kill any running dashboard process
 kill-dashboardd:
 	kill $(shell ps aux | grep dashboard/app.py | grep -v grep | awk '{print $$2}') $(shell lsof -ti :5000)

anomstack/external/duckdb/duckdb.py

@@ -87,7 +87,9 @@ def save_df_duckdb(df: pd.DataFrame, table_key: str) -> pd.DataFrame:
             if "." in table_key:
                 schema, _ = table_key.split(".")
                 query(connection=conn, query=f"CREATE SCHEMA IF NOT EXISTS {schema}")
-            query(connection=conn, query=f"INSERT INTO {table_key} SELECT * FROM df")
+            # Use explicit column names to avoid position-based mapping issues
+            columns = ', '.join(df.columns)
+            query(connection=conn, query=f"INSERT INTO {table_key} ({columns}) SELECT {columns} FROM df")
         except Exception:
             query(connection=conn, query=f"CREATE TABLE {table_key} AS SELECT * FROM df")
         return df
@@ -101,7 +103,9 @@ def save_df_duckdb(df: pd.DataFrame, table_key: str) -> pd.DataFrame:
                 if "." in table_key:
                     schema, _ = table_key.split(".")
                     query(connection=conn, query=f"CREATE SCHEMA IF NOT EXISTS {schema}")
-                query(connection=conn, query=f"INSERT INTO {table_key} SELECT * FROM df")
+                # Use explicit column names to avoid position-based mapping issues
+                columns = ', '.join(df.columns)
+                query(connection=conn, query=f"INSERT INTO {table_key} ({columns}) SELECT {columns} FROM df")
             except Exception:
                 query(connection=conn, query=f"CREATE TABLE {table_key} AS SELECT * FROM df")
             return df

dashboard/app.py

@@ -20,8 +20,28 @@
 from dashboard.constants import POSTHOG_SCRIPT
 from dashboard.state import AppState
 
-# load the environment variables
-load_dotenv(override=True)
+# load the environment variables with custom env file support
+def load_env_with_custom_path():
+    """Load environment variables from custom path or default .env file."""
+    from pathlib import Path
+    
+    env_file_path = os.getenv("ANOMSTACK_ENV_FILE_PATH")
+    
+    if env_file_path:
+        env_path = Path(env_file_path)
+        if env_path.exists():
+            print(f"🎯 Using custom environment file: {env_file_path}")
+            load_dotenv(env_path, override=True)
+            print("✅ Custom environment file loaded")
+        else:
+            print(f"❌ Custom environment file not found: {env_file_path}")
+            print("📄 Falling back to default .env file")
+            load_dotenv(override=True)
+    else:
+        # Standard .env loading
+        load_dotenv(override=True)
+
+load_env_with_custom_path()
 
 log = logging.getLogger("anomstack_dashboard")
 

dashboard/charts.py

@@ -61,6 +61,55 @@ def create_chart(df_metric, chart_index):
             config=ChartManager.get_chart_config(),
         )
 
+    @staticmethod
+    def create_expanded_chart(df_metric, chart_index):
+        """
+        Create an expanded chart for modal display with enhanced interactivity.
+        """
+        # Enhanced config for expanded view
+        enhanced_config = {
+            "displayModeBar": True,
+            "modeBarButtonsToRemove": [
+                "select2d",
+                "lasso2d",
+            ],
+            "responsive": True,
+            "scrollZoom": True,
+            "staticPlot": False,
+            "fillFrame": True,
+            "displaylogo": False,
+            "modeBarButtonsToAdd": [],
+            "toImageButtonOptions": {
+                "format": "png",
+                "filename": f"metric_chart_{chart_index}",
+                "height": 600,
+                "scale": 1
+            }
+        }
+        
+        fig = plot_time_series(
+            df_metric,
+            small_charts=False,  # Always use large size for expanded view
+            dark_mode=app.state.dark_mode,
+            show_markers=app.state.show_markers,
+            line_width=app.state.line_width,
+            show_legend=True,  # Always show legend in expanded view
+        )
+        
+        # Update layout for expanded view with larger height and full width
+        fig.update_layout(
+            height=600,
+            autosize=True,
+            margin=dict(l=40, r=40, t=40, b=40)
+        )
+        
+        return fig.to_html(
+            div_id=f"plotly-chart-expanded-{chart_index}",
+            include_plotlyjs=False,
+            full_html=False,
+            config=enhanced_config,
+        )
+
     @staticmethod
     def create_chart_placeholder(metric_name, index, batch_name) -> Card:
         """

dashboard/data.py

@@ -10,6 +10,7 @@
 from datetime import datetime, timedelta
 import logging
 import re
+from typing import Union
 
 import pandas as pd
 
@@ -20,7 +21,7 @@
 log = logging.getLogger("anomstack_dashboard")
 
 
-def parse_time_spec(spec_str: str) -> dict:
+def parse_time_spec(spec_str: Union[str, int, None]) -> dict:
     """
     Parse a time specification string into a dictionary with type and value.
     Supports formats:

dashboard/routes/batch.py

@@ -17,6 +17,7 @@
 from dashboard.components import create_controls
 from dashboard.constants import DEFAULT_LAST_N, DEFAULT_LOAD_N_CHARTS
 from dashboard.data import get_data
+from monsterui.all import Modal, ModalTitle
 
 
 def get_batch_data(batch_name: str) -> pd.DataFrame:
@@ -123,27 +124,137 @@ def get(batch_name: str, chart_index: int):
         fig = ChartManager.create_chart(df_metric, chart_index)
         app.state.chart_cache[batch_name][chart_index] = fig
 
-    return Card(
-        Style(
+    modal_id = f"modal-{batch_name}-{chart_index}"
+    
+    return Div(
+        Card(
+            Style(
+                """
+                .uk-card-header { padding: 1rem; }
+                .uk-card-body { padding: 1rem; }
+                .chart-card-container { position: relative; }
+                .chart-expand-btn {
+                    position: absolute;
+                    top: 0.75rem;
+                    right: 0.75rem;
+                    z-index: 20;
+                    background: rgba(255, 255, 255, 0.95);
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.375rem;
+                    padding: 0.375rem;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                    min-width: 44px;
+                    min-height: 44px;
+                }
+                .chart-expand-btn:hover {
+                    background: rgba(255, 255, 255, 1);
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+                    transform: scale(1.05);
+                }
+                /* Mobile optimizations */
+                @media (max-width: 768px) {
+                    .chart-expand-btn {
+                        top: 0.5rem;
+                        right: 0.5rem;
+                        min-width: 48px;
+                        min-height: 48px;
+                        padding: 0.5rem;
+                    }
+                }
+                .dark .chart-expand-btn {
+                    background: rgba(17, 24, 39, 0.95);
+                    border-color: #374151;
+                    color: #e5e7eb;
+                }
+                .dark .chart-expand-btn:hover {
+                    background: rgba(17, 24, 39, 1);
+                }
             """
-            .uk-card-header { padding: 1rem; }
-            .uk-card-body { padding: 1rem; }
-        """
-        ),
-        Safe(app.state.chart_cache[batch_name][chart_index]),
-        header=Div(
-            H4(metric_name, cls="mb-1"),
-            DivLAligned(
-                P(
-                    f"Anomaly Rate: {anomaly_rate:.1%}",
-                    cls="text-sm text-muted-foreground",
+            ),
+            Safe(app.state.chart_cache[batch_name][chart_index]),
+            # Expand button overlay positioned on entire card
+            Button(
+                UkIcon("expand", height=16, width=16),
+                cls="chart-expand-btn",
+                uk_toggle=f"target: #{modal_id}",
+                title="Click to expand chart",
+                type="button"
+            ),
+            header=Div(
+                H4(metric_name, cls="mb-1"),
+                DivLAligned(
+                    P(
+                        f"Anomaly Rate: {anomaly_rate:.1%}",
+                        cls="text-sm text-muted-foreground",
+                    ),
+                    P(f"Avg Score: {avg_score:.1%}", cls="text-sm text-muted-foreground"),
+                    style="gap: 1rem;",
                 ),
-                P(f"Avg Score: {avg_score:.1%}", cls="text-sm text-muted-foreground"),
-                style="gap: 1rem;",
             ),
+            id=f"chart-{chart_index}",
+            cls="mb-1 chart-card-container",
         ),
-        id=f"chart-{chart_index}",
-        cls="mb-1",
+        # Modal for expanded chart view
+        Modal(
+            ModalTitle(f"{metric_name} - Expanded View"),
+            Div(
+                # Expanded chart will be loaded here
+                Div(
+                    id=f"expanded-chart-{chart_index}",
+                    hx_get=f"/batch/{batch_name}/chart/{chart_index}/expanded",
+                    hx_trigger="load",
+                    cls="min-h-96"
+                ),
+                # Chart statistics
+                Div(
+                    DivLAligned(
+                        P(
+                            f"Anomaly Rate: {anomaly_rate:.1%}",
+                            cls="text-sm text-muted-foreground",
+                        ),
+                        P(f"Avg Score: {avg_score:.1%}", cls="text-sm text-muted-foreground"),
+                        style="gap: 1rem;",
+                    ),
+                    cls="mt-4 p-4 bg-muted rounded-lg"
+                ),
+                cls="space-y-4"
+            ),
+            id=modal_id,
+            cls="uk-modal-full"
+        )
+    )
+
+
+@rt("/batch/{batch_name}/chart/{chart_index}/expanded")
+def get_expanded_chart(batch_name: str, chart_index: int):
+    """Get expanded chart for modal display.
+
+    Args:
+        batch_name (str): The name of the batch.
+        chart_index (int): The index of the chart.
+
+    Returns:
+        Div: The expanded chart.
+    """
+    df = app.state.df_cache[batch_name]
+    metric_stats = app.state.stats_cache[batch_name]
+    metric_name = metric_stats[chart_index]["metric_name"]
+
+    # Generate expanded chart (larger and with more interactive features)
+    df_metric = df[df["metric_name"] == metric_name]
+    df_metric = extract_metadata(df_metric, "anomaly_explanation")
+    
+    # Create expanded chart with enhanced configuration
+    expanded_fig = ChartManager.create_expanded_chart(df_metric, chart_index)
+    
+    return Div(
+        Safe(expanded_fig),
+        cls="w-full"
     )
 
 

dashboard/static/styles.css

@@ -75,6 +75,44 @@ body {
     }
 }
 
+/* Mobile modal optimizations */
+@media (max-width: 768px) {
+    .uk-modal-full .uk-modal-dialog {
+        padding: 1rem;
+    }
+    
+    .uk-modal-title {
+        font-size: 1.25rem;
+        line-height: 1.3;
+        margin-bottom: 1rem;
+    }
+    
+    /* Ensure charts are touch-friendly on mobile */
+    .plotly .modebar {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+    
+    .plotly .modebar-btn {
+        width: 32px;
+        height: 32px;
+    }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+    .chart-expand-btn {
+        opacity: 1 !important;
+        transform: none !important;
+    }
+    
+    .chart-expand-btn:active {
+        transform: scale(0.95);
+        background: rgba(59, 130, 246, 0.1);
+    }
+}
+
 .loading-indicator {
     display: none;
     position: fixed;