Implement project structure and configuration for initial setup

dashboard.py

@@ -1,1519 +0,0 @@
-import base64
-import io
-import random
-
-import dash
-import numpy as np
-import pandas as pd
-import plotly.express as px
-import plotly.graph_objects as go
-from dash import Input, Output, State, callback, dcc, html
-
-# Initialize the Dash app
-app = dash.Dash(__name__, suppress_callback_exceptions=True)
-server = app.server
-
-
-# Define app layout
-app.layout = html.Div(
-    [
-        # Header
-        html.Div(
-            [
-                html.H1(
-                    "Sessions Observatory by helvia.ai 🔭📊",
-                    className="app-header",
-                ),
-                html.P(
-                    "Upload a CSV/Excel file to visualize the chatbot's dialog topics.",
-                    className="app-description",
-                ),
-            ],
-            className="header-container",
-        ),
-        # File Upload Component
-        html.Div(
-            [
-                dcc.Upload(
-                    id="upload-data",
-                    children=html.Div(
-                        [
-                            html.Div("Drag and Drop", className="upload-text"),
-                            html.Div("or", className="upload-divider"),
-                            html.Div(
-                                html.Button("Select a File", className="upload-button")
-                            ),
-                        ],
-                        className="upload-content",
-                    ),
-                    style={
-                        "width": "100%",
-                        "height": "120px",
-                        "lineHeight": "60px",
-                        "borderWidth": "1px",
-                        "borderStyle": "dashed",
-                        "borderRadius": "0.5rem",
-                        "textAlign": "center",
-                        "margin": "10px 0",
-                        "backgroundColor": "hsl(210, 40%, 98%)",
-                        "borderColor": "hsl(214.3, 31.8%, 91.4%)",
-                        "cursor": "pointer",
-                    },
-                    multiple=False,
-                ),
-                # Status message with more padding and emphasis
-                html.Div(
-                    id="upload-status",
-                    className="upload-status-message",
-                    style={"display": "none"},  # Initially hidden
-                ),
-            ],
-            className="upload-container",
-        ),
-        # Main Content Area (hidden until file is uploaded)
-        html.Div(
-            [
-                # Dashboard layout with flexible grid
-                html.Div(
-                    [
-                        # Left side: Bubble chart
-                        html.Div(
-                            [
-                                html.H3(
-                                    id="topic-distribution-header",
-                                    children="Sessions Observatory",
-                                    className="section-header",
-                                ),
-                                # dcc.Graph(id="bubble-chart", style={"height": "80vh"}),
-                                dcc.Graph(
-                                    id="bubble-chart",
-                                    style={"height": "calc(100% - 154px)"},
-                                ),  # this does not work for some reason
-                                html.Div(
-                                    [
-                                        # Only keep Color by
-                                        html.Div(
-                                            [
-                                                html.Div(
-                                                    html.Label(
-                                                        "Color by:",
-                                                        className="control-label",
-                                                    ),
-                                                    className="control-label-container",
-                                                ),
-                                            ],
-                                            className="control-labels-row",
-                                        ),
-                                        # Only keep Color by options
-                                        html.Div(
-                                            [
-                                                html.Div(
-                                                    dcc.RadioItems(
-                                                        id="color-metric",
-                                                        options=[
-                                                            {
-                                                                "label": "Sentiment",
-                                                                "value": "negative_rate",
-                                                            },
-                                                            {
-                                                                "label": "Resolution",
-                                                                "value": "unresolved_rate",
-                                                            },
-                                                            {
-                                                                "label": "Urgency",
-                                                                "value": "urgent_rate",
-                                                            },
-                                                        ],
-                                                        value="negative_rate",
-                                                        inline=True,
-                                                        className="radio-group",
-                                                        inputClassName="radio-input",
-                                                        labelClassName="radio-label",
-                                                    ),
-                                                    className="radio-container",
-                                                ),
-                                            ],
-                                            className="control-options-row",
-                                        ),
-                                    ],
-                                    className="chart-controls",
-                                ),
-                            ],
-                            className="chart-container",
-                        ),
-                        # Right side: Interactive sidebar with topic details
-                        html.Div(
-                            [
-                                html.Div(
-                                    [
-                                        html.H3(
-                                            "Topic Details", className="section-header"
-                                        ),
-                                        html.Div(
-                                            id="topic-title", className="topic-title"
-                                        ),
-                                        html.Div(
-                                            [
-                                                html.Div(
-                                                    [
-                                                        html.H4(
-                                                            "Metadata",
-                                                            className="subsection-header",
-                                                        ),
-                                                        html.Div(
-                                                            id="topic-metadata",
-                                                            className="metadata-container",
-                                                        ),
-                                                    ],
-                                                    className="metadata-section",
-                                                ),
-                                                html.Div(
-                                                    [
-                                                        html.H4(
-                                                            "Key Metrics",
-                                                            className="subsection-header",
-                                                        ),
-                                                        html.Div(
-                                                            id="topic-metrics",
-                                                            className="metrics-container",
-                                                        ),
-                                                    ],
-                                                    className="metrics-section",
-                                                ),
-                                                # Added Tags section
-                                                html.Div(
-                                                    [
-                                                        html.H4(
-                                                            "Tags",
-                                                            className="subsection-header",
-                                                        ),
-                                                        html.Div(
-                                                            id="important-tags",
-                                                            className="tags-container",
-                                                        ),
-                                                    ]
-                                                ),
-                                            ],
-                                            className="details-section",
-                                        ),
-                                        html.Div(
-                                            [
-                                                html.H4(
-                                                    "Sample Dialogs (Summary)",
-                                                    className="subsection-header",
-                                                ),
-                                                html.Div(
-                                                    id="sample-dialogs",
-                                                    className="sample-dialogs-container",
-                                                ),
-                                            ],
-                                            className="samples-section",
-                                        ),
-                                    ],
-                                    className="topic-details-content",
-                                ),
-                                html.Div(
-                                    id="no-topic-selected",
-                                    children=[
-                                        html.Div(
-                                            [
-                                                html.I(
-                                                    className="fas fa-info-circle info-icon"
-                                                ),
-                                                html.H3("No topic selected"),
-                                                html.P(
-                                                    "Click or hover on a bubble to view topic details."
-                                                ),
-                                            ],
-                                            className="no-selection-message",
-                                        )
-                                    ],
-                                    className="no-selection-container",
-                                ),
-                            ],
-                            className="sidebar-container",
-                        ),
-                    ],
-                    className="dashboard-container",
-                )
-            ],
-            id="main-content",
-            style={"display": "none"},
-        ),
-        # Store the processed data
-        dcc.Store(id="stored-data"),
-    ],
-    className="app-container",
-)
-
-# Define CSS for the app
-app.index_string = """
-<!DOCTYPE html>
-<html>
-    <head>
-        {%metas%}
-        <title>Sessions Observatory by helvia.ai 🔭📊</title>
-        {%favicon%}
-        {%css%}
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-        <style>
-            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-            :root {
-                --background: hsl(210, 20%, 95%);
-                --foreground: hsl(222.2, 84%, 4.9%);
-                --card: hsl(0, 0%, 100%);
-                --card-foreground: hsl(222.2, 84%, 4.9%);
-                --popover: hsl(0, 0%, 100%);
-                --popover-foreground: hsl(222.2, 84%, 4.9%);
-                --primary: hsl(222.2, 47.4%, 11.2%);
-                --primary-foreground: hsl(210, 40%, 98%);
-                --secondary: hsl(210, 40%, 96.1%);
-                --secondary-foreground: hsl(222.2, 47.4%, 11.2%);
-                --muted: hsl(210, 40%, 96.1%);
-                --muted-foreground: hsl(215.4, 16.3%, 46.9%);
-                --accent: hsl(210, 40%, 96.1%);
-                --accent-foreground: hsl(222.2, 47.4%, 11.2%);
-                --destructive: hsl(0, 84.2%, 60.2%);
-                --destructive-foreground: hsl(210, 40%, 98%);
-                --border: hsl(214.3, 31.8%, 91.4%);
-                --input: hsl(214.3, 31.8%, 91.4%);
-                --ring: hsl(222.2, 84%, 4.9%);
-                --radius: 0.5rem;
-            }
-
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-                font-family: 'Inter', sans-serif;
-            }
-
-            body {
-                background-color: var(--background);
-                color: var(--foreground);
-                font-feature-settings: "rlig" 1, "calt" 1;
-            }
-
-            .app-container {
-                max-width: 2500px;
-                margin: 0 auto;
-                padding: 1.5rem;
-                background-color: var(--background);
-                min-height: 100vh;
-                display: flex;
-                flex-direction: column;
-            }
-
-            .header-container {
-                margin-bottom: 2rem;
-                text-align: center;
-            }
-
-            .app-header {
-                color: var(--foreground);
-                margin-bottom: 0.75rem;
-                font-weight: 600;
-                font-size: 2rem;
-                line-height: 1.2;
-            }
-
-            .app-description {
-                color: var(--muted-foreground);
-                font-size: 1rem;
-                line-height: 1.5;
-            }
-
-            .upload-container {
-                margin-bottom: 2rem;
-                max-width: 800px;
-                margin-left: auto;
-                margin-right: auto;
-            }
-
-            .upload-content {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                height: 80%;
-                padding: 1.5rem;
-                position: relative;
-            }
-
-            .upload-text {
-                font-size: 1rem;
-                color: var(--primary);
-                font-weight: 500;
-            }
-
-            .upload-divider {
-                color: var(--muted-foreground);
-                margin: 0.5rem 0;
-                font-size: 0.875rem;
-            }
-
-            .upload-button {
-                background-color: var(--primary);
-                color: var(--primary-foreground);
-                border: none;
-                padding: 0.5rem 1rem;
-                border-radius: var(--radius);
-                font-size: 0.875rem;
-                cursor: pointer;
-                transition: opacity 0.2s;
-                font-weight: 500;
-                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-                height: 2.5rem;
-            }
-
-            .upload-button:hover {
-                opacity: 0.9;
-            }
-
-            /* Status message styling */
-            .upload-status-message {
-                margin-top: 1rem;
-                padding: 0.75rem;
-                font-weight: 500;
-                text-align: center;
-                border-radius: var(--radius);
-                font-size: 0.875rem;
-                transition: all 0.3s ease;
-                background-color: var(--secondary);
-                color: var(--secondary-foreground);
-            }
-
-            /* Chart controls styling */
-            .chart-controls {
-                margin-top: 1rem;
-                display: flex;
-                flex-direction: column;
-                gap: 0.75rem;
-                padding: 1rem;
-                background-color: var(--card);
-                border-radius: var(--radius);
-                border: 1px solid var(--border);
-                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-            }
-
-            .control-labels-row {
-                display: flex;
-                width: 100%;
-            }
-
-            .control-options-row {
-                display: flex;
-                width: 100%;
-            }
-
-            .control-label-container {
-                padding: 0 0.5rem;
-                text-align: left;
-            }
-
-            .control-label {
-                font-weight: 500;
-                color: var(--foreground);
-                font-size: 0.875rem;
-                line-height: 1.25rem;
-            }
-
-            .radio-container {
-                padding: 0 0.5rem;
-                width: 100%;
-            }
-
-            .radio-group {
-                display: flex;
-                gap: 1rem;
-            }
-
-            .radio-input {
-                margin-right: 0.375rem;
-                cursor: pointer;
-                height: 1rem;
-                width: 1rem;
-                border-radius: 9999px;
-                border: 1px solid var(--border);
-                appearance: none;
-                -webkit-appearance: none;
-                background-color: var(--background);
-                transition: border-color 0.2s;
-            }
-
-            .radio-input:checked {
-                border-color: var(--primary);
-                background-color: var(--primary);
-                background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-                background-size: 100% 100%;
-                background-position: center;
-                background-repeat: no-repeat;
-            }
-
-            .radio-label {
-                font-weight: 400;
-                color: var(--foreground);
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                font-size: 0.875rem;
-                line-height: 1.25rem;
-            }
-
-            /* Dashboard container */
-            .dashboard-container {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 1.5rem;
-                flex: 1;
-                height: 100%;
-            }
-
-            .chart-container {
-                flex: 2.75;
-                min-width: 400px;
-                background: var(--card);
-                border-radius: var(--radius);
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-                padding: 1rem;
-                border: 0.75px solid var(--border);
-                height: 100%;
-            }
-
-            .sidebar-container {
-                flex: 1;
-                min-width: 300px;
-                background: var(--card);
-                border-radius: var(--radius);
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-                padding: 1rem;
-                position: relative;
-                height: 100vh;
-                overflow-y: auto;
-                border: 1px solid var(--border);
-                height: 100%;
-            }
-
-            .section-header {
-                margin-bottom: 1rem;
-                color: var(--foreground);
-                border-bottom: 1px solid var(--border);
-                padding-bottom: 0.75rem;
-                font-weight: 600;
-                font-size: 1.25rem;
-            }
-
-            .subsection-header {
-                margin: 1rem 0 0.75rem;
-                color: var(--foreground);
-                font-size: 1rem;
-                font-weight: 600;
-            }
-
-            .topic-title {
-                font-size: 1.25rem;
-                font-weight: 600;
-                color: var(--foreground);
-                margin-bottom: 1rem;
-                padding: 0.5rem 0.75rem;
-                background-color: var(--secondary);
-                border-radius: var(--radius);
-            }
-
-            .metadata-container {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 0.75rem;
-                margin-bottom: 1rem;
-            }
-
-            .metadata-item {
-                background-color: var(--secondary);
-                padding: 0.5rem 0.75rem;
-                border-radius: var(--radius);
-                font-size: 0.875rem;
-                display: flex;
-                align-items: center;
-                color: var(--secondary-foreground);
-            }
-
-            .metadata-icon {
-                margin-right: 0.5rem;
-                color: var(--primary);
-            }
-
-            .metrics-container {
-                display: flex;
-                justify-content: space-between;
-                gap: 0.75rem;
-                margin-bottom: 0.75rem;
-            }
-
-            .metric-box {
-                background-color: var(--card);
-                border-radius: var(--radius);
-                padding: 0.75rem;
-                text-align: center;
-                flex: 1;
-                border: 1px solid var(--border);
-            }
-
-            .metric-box.negative {
-                border-left: 3px solid var(--destructive);
-            }
-
-            .metric-box.unresolved {
-                border-left: 3px solid hsl(47.9, 95.8%, 53.1%);
-            }
-
-            .metric-box.urgent {
-                border-left: 3px solid hsl(217.2, 91.2%, 59.8%);
-            }
-
-            .metric-value {
-                font-size: 1.5rem;
-                font-weight: 600;
-                margin-bottom: 0.25rem;
-                color: var(--foreground);
-                line-height: 1;
-            }
-
-            .metric-label {
-                font-size: 0.75rem;
-                color: var(--muted-foreground);
-            }
-
-            .sample-dialogs-container {
-                margin-top: 0.75rem;
-            }
-
-            .dialog-item {
-                background-color: var(--secondary);
-                border-radius: var(--radius);
-                padding: 1rem;
-                margin-bottom: 0.75rem;
-                border-left: 3px solid var(--primary);
-            }
-
-            .dialog-summary {
-                font-size: 0.875rem;
-                line-height: 1.5;
-                margin-bottom: 0.5rem;
-                color: var(--foreground);
-            }
-
-            .dialog-metadata {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 0.5rem;
-                margin-top: 0.5rem;
-                font-size: 0.75rem;
-            }
-
-            .dialog-tag {
-                padding: 0.25rem 0.5rem;
-                border-radius: var(--radius);
-                font-size: 0.7rem;
-                font-weight: 500;
-            }
-
-            .tag-sentiment {
-                background-color: var(--destructive);
-                color: var(--destructive-foreground);
-            }
-
-            .tag-resolution {
-                background-color: hsl(47.9, 95.8%, 53.1%);
-                color: hsl(222.2, 84%, 4.9%);
-            }
-
-            .tag-urgency {
-                background-color: hsl(217.2, 91.2%, 59.8%);
-                color: hsl(210, 40%, 98%);
-            }
-
-            .tag-chat-id {
-                background-color: hsl(215.4, 16.3%, 46.9%);
-                color: hsl(210, 40%, 98%);
-                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-                font-weight: 500;
-            }
-
-            .no-selection-container {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background-color: hsla(0, 0%, 100%, 0.95);
-                z-index: 10;
-                border-radius: var(--radius);
-            }
-
-            .no-selection-message {
-                text-align: center;
-                color: var(--muted-foreground);
-                padding: 1.5rem;
-            }
-
-            .info-icon {
-                font-size: 2rem;
-                margin-bottom: 0.75rem;
-                color: var(--muted);
-            }
-
-            /* Tags container */
-            .tags-container {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 8px;
-                margin-top: 5px;
-                margin-bottom: 15px;
-                padding: 6px;
-                border-radius: 8px;
-                background-color: #f8f9fa;
-            }
-
-
-            .topic-tag {
-                padding: 0.375rem 0.75rem;
-                border-radius: var(--radius);
-                font-size: 0.75rem;
-                display: inline-flex;
-                align-items: center;
-                transition: all 0.2s ease;
-                font-weight: 500;
-                margin-bottom: 0.25rem;
-                cursor: default;
-                background-color: var(--muted);
-                color: var(--muted-foreground);
-                border: 1px solid var(--border);
-            }
-
-            .topic-tag {
-                padding: 6px 12px;
-                border-radius: 15px;
-                font-size: 0.8rem;
-                display: inline-flex;
-                align-items: center;
-                box-shadow: 0 1px 3px rgba(0,0,0,0.12);
-                transition: all 0.2s ease;
-                font-weight: 500;
-                margin-bottom: 5px;
-                cursor: default;
-                border: 1px solid rgba(0,0,0,0.08);
-                background-color: #6c757d;  /* Consistent medium gray color */
-                color: white;
-            }
-
-            .topic-tag:hover {
-                transform: translateY(-1px);
-                box-shadow: 0 3px 5px rgba(0,0,0,0.15);
-                background-color: #5a6268;  /* Slightly darker on hover */
-            }
-
-            .topic-tag-icon {
-                margin-right: 5px;
-                font-size: 0.7rem;
-                opacity: 0.8;
-                color: rgba(255, 255, 255, 0.9);
-            }
-
-            .no-tags-message {
-                color: var(--muted-foreground);
-                font-style: italic;
-                padding: 0.75rem;
-                text-align: center;
-                width: 100%;
-            }
-
-            /* Responsive adjustments */
-            @media (max-width: 768px) {
-                .dashboard-container {
-                    flex-direction: column;
-                }
-                .chart-container, .sidebar-container {
-                    width: 100%;
-                }
-                .app-header {
-                    font-size: 1.5rem;
-                }
-            }
-        </style>
-    </head>
-    <body>
-        {%app_entry%}
-        <footer>
-            {%config%}
-            {%scripts%}
-            {%renderer%}
-        </footer>
-    </body>
-</html>
-"""
-
-
-@callback(
-    Output("topic-distribution-header", "children"),
-    Input("stored-data", "data"),
-)
-def update_topic_distribution_header(data):
-    if not data:
-        return "Sessions Observatory"  # Default when no data is available
-
-    df = pd.DataFrame(data)
-    total_dialogs = df["count"].sum()  # Sum up the 'count' column
-    return f"Sessions Observatory ({total_dialogs} dialogs)"
-
-
-# Define callback to process uploaded file
-@callback(
-    [
-        Output("stored-data", "data"),
-        Output("upload-status", "children"),
-        Output("upload-status", "style"),  # Add style output for visibility
-        Output("main-content", "style"),
-    ],
-    [Input("upload-data", "contents")],
-    [State("upload-data", "filename")],
-)
-def process_upload(contents, filename):
-    if contents is None:
-        return None, "", {"display": "none"}, {"display": "none"}  # Keep hidden
-
-    try:
-        # Parse uploaded file
-        content_type, content_string = contents.split(",")
-        decoded = base64.b64decode(content_string)
-
-        if "csv" in filename.lower():
-            df = pd.read_csv(io.StringIO(decoded.decode("utf-8")))
-        elif "xls" in filename.lower():
-            df = pd.read_excel(io.BytesIO(decoded))
-        else:
-            return (
-                None,
-                html.Div(
-                    [
-                        html.I(
-                            className="fas fa-exclamation-circle",
-                            style={"color": "var(--destructive)", "marginRight": "8px"},
-                        ),
-                        "Please upload a CSV or Excel file.",
-                    ],
-                    style={"color": "var(--destructive)"},
-                ),
-                {"display": "block"},  # Make visible after error
-                {"display": "none"},
-            )
-
-        # Process the dataframe to get topic statistics
-        topic_stats = analyze_topics(df)
-
-        return (
-            topic_stats.to_dict("records"),
-            html.Div(
-                [
-                    html.I(
-                        className="fas fa-check-circle",
-                        style={
-                            "color": "hsl(142.1, 76.2%, 36.3%)",
-                            "marginRight": "8px",
-                        },
-                    ),
-                    f'Successfully uploaded "{filename}"',
-                ],
-                style={"color": "hsl(142.1, 76.2%, 36.3%)"},
-            ),
-            {"display": "block"},  # maybe add the above line here too #TODO
-            {
-                "display": "block",
-                "height": "calc(100vh - 40px)",
-            },  # Make visible after successful upload
-        )
-
-    except Exception as e:
-        return (
-            None,
-            html.Div(
-                [
-                    html.I(
-                        className="fas fa-exclamation-triangle",
-                        style={"color": "var(--destructive)", "marginRight": "8px"},
-                    ),
-                    f"Error processing file: {str(e)}",
-                ],
-                style={"color": "var(--destructive)"},
-            ),
-            {"display": "block"},  # Make visible after error
-            {"display": "none"},
-        )
-
-
-# Function to analyze the topics and create statistics
-def analyze_topics(df):
-    # Group by topic name and calculate metrics
-    topic_stats = (
-        df.groupby("deduplicated_topic_name")
-        .agg(
-            count=("id", "count"),
-            negative_count=("Sentiment", lambda x: (x == "negative").sum()),
-            unresolved_count=("Resolution", lambda x: (x == "unresolved").sum()),
-            urgent_count=("Urgency", lambda x: (x == "urgent").sum()),
-        )
-        .reset_index()
-    )
-
-    # Calculate rates
-    topic_stats["negative_rate"] = (
-        topic_stats["negative_count"] / topic_stats["count"] * 100
-    ).round(1)
-    topic_stats["unresolved_rate"] = (
-        topic_stats["unresolved_count"] / topic_stats["count"] * 100
-    ).round(1)
-    topic_stats["urgent_rate"] = (
-        topic_stats["urgent_count"] / topic_stats["count"] * 100
-    ).round(1)
-
-    # Apply binned layout
-    topic_stats = apply_binned_layout(topic_stats)
-
-    return topic_stats
-
-
-# New binned layout function
-
-
-def apply_binned_layout(df, padding=0, bin_config=None, max_items_per_row=6):
-    """
-    Apply a binned layout where bubbles are grouped into rows based on dialog count.
-    Bubbles in each row will be centered horizontally.
-
-    Args:
-        df: DataFrame containing the topic data
-        padding: Padding from edges as percentage
-        bin_config: List of tuples defining bin ranges and descriptions.
-                    Example: [(300, None, "300+ dialogs"), (250, 299, "250-299 dialogs"), ...]
-        max_items_per_row: Maximum number of items to display in a single row
-
-    Returns:
-        DataFrame with updated x, y positions
-    """
-    # Create a copy of the dataframe to avoid modifying the original
-    df_sorted = df.copy()
-
-    # Default bin configuration if none is provided
-    # 8 rows x 6 bubbles is usually good
-    if bin_config is None:
-        bin_config = [
-            (100, None, "100+ dialogs"),
-            (50, 99, "50-99 dialogs"),
-            (25, 49, "25-49 dialogs"),
-            (9, 24, "9-24 dialogs"),
-            (7, 8, "7-8 dialogs"),
-            (5, 7, "5-6 dialogs"),
-            (4, 4, "4 dialogs"),
-            (0, 3, "0-3 dialogs"),
-        ]
-
-    # Generate bin descriptions and conditions dynamically
-    bin_descriptions = {}
-    conditions = []
-    bin_values = []
-
-    for i, (lower, upper, description) in enumerate(bin_config):
-        bin_name = f"Bin {i + 1}"
-        bin_descriptions[bin_name] = description
-        bin_values.append(bin_name)
-
-        if upper is None:  # No upper limit
-            conditions.append(df_sorted["count"] >= lower)
-        else:
-            conditions.append(
-                (df_sorted["count"] >= lower) & (df_sorted["count"] <= upper)
-            )
-
-    # Apply the conditions to create the bin column
-    df_sorted["bin"] = np.select(conditions, bin_values, default="Bin 8")
-    df_sorted["bin_description"] = df_sorted["bin"].map(bin_descriptions)
-
-    # Sort by bin (ascending to get Bin 1 first) and by count (descending) within each bin
-    df_sorted = df_sorted.sort_values(by=["bin", "count"], ascending=[True, False])
-
-    # Now split bins that have more than max_items_per_row items
-    original_bins = df_sorted["bin"].unique()
-    new_rows = []
-    new_bin_descriptions = bin_descriptions.copy()
-
-    for bin_name in original_bins:
-        bin_mask = df_sorted["bin"] == bin_name
-        bin_group = df_sorted[bin_mask]
-        bin_size = len(bin_group)
-
-        # If bin has more items than max_items_per_row, split it
-        if bin_size > max_items_per_row:
-            # Calculate how many sub-bins we need
-            num_sub_bins = (bin_size + max_items_per_row - 1) // max_items_per_row
-
-            # Calculate items per sub-bin (distribute evenly)
-            items_per_sub_bin = [bin_size // num_sub_bins] * num_sub_bins
-
-            # Distribute the remainder one by one to achieve balance
-            remainder = bin_size % num_sub_bins
-            for i in range(remainder):
-                items_per_sub_bin[i] += 1
-
-            # Original bin description
-            original_description = bin_descriptions[bin_name]
-
-            # Create new row entries and update bin assignments
-            start_idx = 0
-            for i in range(num_sub_bins):
-                # Create new bin name with sub-bin index
-                new_bin_name = f"{bin_name}_{i + 1}"
-
-                # Create new bin description with sub-bin index
-                new_description = f"{original_description} ({i + 1}/{num_sub_bins})"
-                new_bin_descriptions[new_bin_name] = new_description
-
-                # Get slice of dataframe for this sub-bin
-                end_idx = start_idx + items_per_sub_bin[i]
-                sub_bin_rows = bin_group.iloc[start_idx:end_idx].copy()
-
-                # Update bin name and description
-                sub_bin_rows["bin"] = new_bin_name
-                sub_bin_rows["bin_description"] = new_description
-
-                # Add to new rows
-                new_rows.append(sub_bin_rows)
-
-                # Update start index for next iteration
-                start_idx = end_idx
-
-            # Remove the original bin from df_sorted
-            df_sorted = df_sorted[~bin_mask]
-
-    # Combine the original dataframe (with small bins) and the new split bins
-    if new_rows:
-        df_sorted = pd.concat([df_sorted] + new_rows)
-
-    # Re-sort with the new bin names
-    df_sorted = df_sorted.sort_values(by=["bin", "count"], ascending=[True, False])
-
-    # Calculate the vertical positions for each row (bin)
-    bins_with_topics = sorted(df_sorted["bin"].unique())
-    num_rows = len(bins_with_topics)
-
-    available_height = 100 - (2 * padding)
-    row_height = available_height / num_rows
-
-    # Calculate and assign y-positions (vertical positions)
-    row_positions = {}
-    for i, bin_name in enumerate(bins_with_topics):
-        # Calculate row position (centered within its allocated space)
-        row_pos = padding + i * row_height + (row_height / 2)
-        row_positions[bin_name] = row_pos
-
-    df_sorted["y"] = df_sorted["bin"].map(row_positions)
-
-    # Center the bubbles in each row horizontally
-    center_point = 50  # Middle of the chart (0-100 scale)
-    for bin_name in bins_with_topics:
-        # Get topics in this bin
-        bin_mask = df_sorted["bin"] == bin_name
-        num_topics_in_bin = bin_mask.sum()
-
-        if num_topics_in_bin == 1:
-            # If there's only one bubble, place it in the center
-            df_sorted.loc[bin_mask, "x"] = center_point
-        else:
-            if num_topics_in_bin < max_items_per_row:
-                # For fewer bubbles, add a little bit of spacing between them
-                # Calculate the total width needed
-                total_width = (num_topics_in_bin - 1) * 17.5  # 10 units between bubbles
-                # Calculate starting position (to center the group)
-                start_pos = center_point - (total_width / 2)
-                # Assign positions
-                positions = [start_pos + (i * 17.5) for i in range(num_topics_in_bin)]
-                df_sorted.loc[bin_mask, "x"] = positions
-            else:
-                # For multiple bubbles, distribute them evenly around the center
-                # Calculate the total width needed
-                total_width = (num_topics_in_bin - 1) * 15  # 15 units between bubbles
-
-                # Calculate starting position (to center the group)
-                start_pos = center_point - (total_width / 2)
-
-                # Assign positions
-                positions = [start_pos + (i * 15) for i in range(num_topics_in_bin)]
-                df_sorted.loc[bin_mask, "x"] = positions
-
-    # Add original rank for reference
-    df_sorted["size_rank"] = range(1, len(df_sorted) + 1)
-
-    return df_sorted
-
-
-# New function to update positions based on selected size metric
-def update_bubble_positions(df: pd.DataFrame) -> pd.DataFrame:
-    # For the main chart, we always use the binned layout
-    return apply_binned_layout(df)
-
-
-# Callback to update the bubble chart
-@callback(
-    Output("bubble-chart", "figure"),
-    [
-        Input("stored-data", "data"),
-        Input("color-metric", "value"),
-    ],
-)
-def update_bubble_chart(data, color_metric):
-    if not data:
-        return go.Figure()
-
-    df = pd.DataFrame(data)
-
-    # Update positions using binned layout
-    df = update_bubble_positions(df)
-
-    # Always use count for sizing
-    size_values = df["count"]
-    raw_sizes = df["count"]
-    size_title = "Dialog Count"
-
-    # Apply log scaling to the size values for better visualization
-    # To make the smallest bubble bigger, increase the min_size value (currently 2.5).
-    min_size = 1  # Minimum bubble size
-    if size_values.max() > size_values.min():
-        # Log-scale the sizes
-        log_sizes = np.log1p(size_values)
-        # Scale to a reasonable range for visualization
-        # To make the biggest bubble smaller, reduce the multiplier (currently 50).
-        size_values = (
-            min_size
-            + (log_sizes - log_sizes.min()) / (log_sizes.max() - log_sizes.min()) * 50
-        )
-    else:
-        # If all values are the same, use a default size
-        size_values = np.ones(len(df)) * 12.5
-
-    # DEBUG: Print sizes of bubbles in the first and second bins
-    bins = sorted(df["bin"].unique())
-    if len(bins) >= 1:
-        first_bin = bins[0]
-        print(f"DEBUG - First bin '{first_bin}' bubble sizes:")
-        first_bin_df = df[df["bin"] == first_bin]
-        for idx, row in first_bin_df.iterrows():
-            print(
-                f"  Topic: {row['deduplicated_topic_name']}, Raw size: {row['count']}, Displayed size: {size_values[idx]}"
-            )
-
-    if len(bins) >= 2:
-        second_bin = bins[1]
-        print(f"DEBUG - Second bin '{second_bin}' bubble sizes:")
-        second_bin_df = df[df["bin"] == second_bin]
-        for idx, row in second_bin_df.iterrows():
-            print(
-                f"  Topic: {row['deduplicated_topic_name']}, Raw size: {row['count']}, Displayed size: {size_values[idx]}"
-            )
-
-    # Determine color based on selected metric
-    if color_metric == "negative_rate":
-        color_values = df["negative_rate"]
-        # color_title = "Negative Sentiment (%)"
-        color_title = "Negativity (%)"
-        # color_scale = "RdBu"  # no ice, RdBu - og is Reds - matter is good too
-        # color_scale = "Portland"
-        # color_scale = "RdYlGn_r"
-        # color_scale = "Teal"
-        color_scale = "Teal"
-
-    elif color_metric == "unresolved_rate":
-        color_values = df["unresolved_rate"]
-        color_title = "Unresolved (%)"
-        # color_scale = "Burg"  # og is YlOrRd
-        # color_scale = "Temps"
-        # color_scale = "Armyrose"
-        # color_scale = "YlOrRd"
-        color_scale = "Teal"
-    else:
-        color_values = df["urgent_rate"]
-        color_title = "Urgency (%)"
-        # color_scale = "Magenta"  # og is Blues
-        # color_scale = "Tealrose"
-        # color_scale = "Portland"
-        color_scale = "Teal"
-
-    # Set all text positions to bottom for consistent layout
-    text_positions = ["bottom center"] * len(df)
-
-    # Create enhanced hover text that includes bin information
-    hover_text = [
-        f"Topic: {topic}<br>{size_title}: {raw:.1f}<br>{color_title}: {color:.1f}<br>Group: {bin_desc}"
-        for topic, raw, color, bin_desc in zip(
-            df["deduplicated_topic_name"],
-            raw_sizes,
-            color_values,
-            df["bin_description"],
-        )
-    ]
-
-    # Create bubble chart
-    fig = px.scatter(
-        df,
-        x="x",
-        y="y",
-        size=size_values,
-        color=color_values,
-        # text="deduplicated_topic_name", # Remove text here
-        hover_name="deduplicated_topic_name",
-        hover_data={
-            "x": False,
-            "y": False,
-            "bin_description": True,
-        },
-        size_max=42.5,  # Maximum size of the bubbles, change this to adjust the size
-        color_continuous_scale=color_scale,
-        custom_data=[
-            "deduplicated_topic_name",
-            "count",
-            "negative_rate",
-            "unresolved_rate",
-            "urgent_rate",
-            "bin_description",
-        ],
-    )
-
-    # Update traces: Remove text related properties
-    fig.update_traces(
-        mode="markers",  # Remove '+text'
-        marker=dict(sizemode="area", opacity=0.8, line=dict(width=1, color="white")),
-        hovertemplate="%{hovertext}<extra></extra>",
-        hovertext=hover_text,
-    )
-
-    # Create annotations for the bubbles
-    annotations = []
-    for i, row in df.iterrows():
-        # Wrap text every 2 words
-        words = row["deduplicated_topic_name"].split()
-        wrapped_text = "<br>".join(
-            [" ".join(words[i : i + 4]) for i in range(0, len(words), 4)]
-        )
-
-        # Calculate size for vertical offset (approximately based on the bubble size)
-        # Add vertical offset based on bubble size to place text below the bubble
-        marker_size = (
-            size_values[i] / 20  # type: ignore  # FIXME: size_values[df.index.get_loc(i)] / 20
-        )  # Adjust this divisor as needed to get proper spacing
-
-        annotations.append(
-            dict(
-                x=row["x"],
-                y=row["y"]
-                + 0.125  # Adding this so in a row with maximum bubbles, the left one does not overlap with the bin label
-                + marker_size,  # Add vertical offset to position text below the bubble
-                text=wrapped_text,
-                showarrow=False,
-                textangle=0,
-                font=dict(
-                    size=10,
-                    # size=8,
-                    color="var(--foreground)",
-                    family="Arial, sans-serif",
-                    weight="bold",
-                ),
-                xanchor="center",
-                yanchor="top",  # Anchor to top of text box so it hangs below the bubble
-                bgcolor="rgba(255,255,255,0.7)",  # Add semi-transparent background for better readability
-                bordercolor="rgba(0,0,0,0.1)",  # Add a subtle border color
-                borderwidth=1,
-                borderpad=1,
-                # TODO: Radius for rounded corners
-            )
-        )
-
-    # Add bin labels and separator lines
-    unique_bins = sorted(df["bin"].unique())
-    bin_y_positions = [
-        df[df["bin"] == bin_name]["y"].mean() for bin_name in unique_bins
-    ]
-
-    # Dynamically extract bin descriptions
-    bin_descriptions = df.set_index("bin")["bin_description"].to_dict()
-
-    for bin_name, bin_y in zip(unique_bins, bin_y_positions):
-        # Add horizontal line
-        fig.add_shape(
-            type="line",
-            x0=0,
-            y0=bin_y,
-            x1=100,
-            y1=bin_y,
-            line=dict(color="rgba(0,0,0,0.1)", width=1, dash="dot"),
-            layer="below",
-        )
-
-    # Add subtle lines for each bin and bin labels
-    for bin_name, bin_y in zip(unique_bins, bin_y_positions):
-        # Add horizontal line
-        fig.add_shape(
-            type="line",
-            x0=0,
-            y0=bin_y,
-            x1=100,
-            y1=bin_y,
-            line=dict(color="rgba(0,0,0,0.1)", width=1, dash="dot"),
-            layer="below",
-        )
-
-        # Add bin label annotation
-        annotations.append(
-            dict(
-                x=0,  # Position the label on the left side
-                y=bin_y,
-                xref="x",
-                yref="y",
-                text=bin_descriptions[bin_name],
-                showarrow=False,
-                font=dict(size=8.25, color="var(--muted-foreground)"),
-                align="left",
-                xanchor="left",
-                yanchor="middle",
-                bgcolor="rgba(255,255,255,0.7)",
-                borderpad=1,
-            )
-        )
-
-    fig.update_layout(
-        title=None,
-        xaxis=dict(
-            showgrid=False,
-            zeroline=False,
-            showticklabels=False,
-            title=None,
-            range=[0, 100],
-        ),
-        yaxis=dict(
-            showgrid=False,
-            zeroline=False,
-            showticklabels=False,
-            title=None,
-            range=[0, 100],
-            autorange="reversed",  # Keep largest at top
-        ),
-        hovermode="closest",
-        margin=dict(l=0, r=0, t=10, b=10),
-        coloraxis_colorbar=dict(
-            title=color_title,
-            title_font=dict(size=9),
-            tickfont=dict(size=8),
-            thickness=10,
-            len=0.6,
-            yanchor="middle",
-            y=0.5,
-            xpad=0,
-        ),
-        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        hoverlabel=dict(bgcolor="white", font_size=12, font_family="Inter"),
-        annotations=annotations,  # Add bin labels as annotations
-    )
-
-    return fig
-
-
-# Update the update_topic_details callback to use grayscale colors for tags based on frequency
-@callback(
-    [
-        Output("topic-title", "children"),
-        Output("topic-metadata", "children"),
-        Output("topic-metrics", "children"),
-        Output("important-tags", "children"),
-        Output("sample-dialogs", "children"),
-        Output("no-topic-selected", "style"),
-    ],
-    [Input("bubble-chart", "hoverData"), Input("bubble-chart", "clickData")],
-    [State("stored-data", "data"), State("upload-data", "contents")],
-)
-def update_topic_details(hover_data, click_data, stored_data, file_contents):
-    # Determine which data to use (prioritize click over hover)
-    hover_info = hover_data or click_data
-
-    if not hover_info or not stored_data or not file_contents:
-        return "", [], [], "", [], {"display": "flex"}
-
-    # Extract topic name from the hover data
-    topic_name = hover_info["points"][0]["customdata"][0]
-
-    # Get stored data for this topic
-    df_stored = pd.DataFrame(stored_data)
-    topic_data = df_stored[df_stored["deduplicated_topic_name"] == topic_name].iloc[0]
-
-    # Get original data to sample conversations
-    content_type, content_string = file_contents.split(",")
-    decoded = base64.b64decode(content_string)
-
-    if (
-        content_type
-        == "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64"
-    ):
-        df_full = pd.read_excel(io.BytesIO(decoded))
-    else:  # Assume CSV
-        df_full = pd.read_csv(io.StringIO(decoded.decode("utf-8")))
-
-    # Filter to this topic
-    topic_conversations = df_full[df_full["deduplicated_topic_name"] == topic_name]
-
-    # Create the title
-    title = html.Div([html.Span(topic_name)])
-
-    # Create metadata items
-    metadata_items = [
-        html.Div(
-            [
-                html.I(className="fas fa-comments metadata-icon"),
-                html.Span(f"{int(topic_data['count'])} dialogs"),
-            ],
-            className="metadata-item",
-        ),
-    ]
-
-    # Create metrics boxes
-    metrics_boxes = [
-        html.Div(
-            [
-                html.Div(f"{topic_data['negative_rate']}%", className="metric-value"),
-                html.Div("Negative Sentiment", className="metric-label"),
-            ],
-            className="metric-box negative",
-        ),
-        html.Div(
-            [
-                html.Div(f"{topic_data['unresolved_rate']}%", className="metric-value"),
-                html.Div("Unresolved", className="metric-label"),
-            ],
-            className="metric-box unresolved",
-        ),
-        html.Div(
-            [
-                html.Div(f"{topic_data['urgent_rate']}%", className="metric-value"),
-                html.Div("Urgent", className="metric-label"),
-            ],
-            className="metric-box urgent",
-        ),
-    ]
-
-    # New: Extract and process consolidated_tags with improved styling
-    tags_list = []
-    for _, row in topic_conversations.iterrows():
-        tags_str = row.get("consolidated_tags", "")
-        if pd.notna(tags_str):
-            tags = [tag.strip() for tag in tags_str.split(",") if tag.strip()]
-            tags_list.extend(tags)
-
-    # Count tag frequencies for better insight
-    tag_counts = {}
-    for tag in tags_list:
-        tag_counts[tag] = tag_counts.get(tag, 0) + 1
-
-    # Sort by frequency (most common first) and then alphabetically for ties
-    sorted_tags = sorted(tag_counts.items(), key=lambda x: (-x[1], x[0]))
-
-    # Keep only the top K tags
-    TOP_K = 15
-    sorted_tags = sorted_tags[:TOP_K]
-
-    if sorted_tags:
-        # Create beautifully styled tags with count indicators and consistent color
-        tags_output = html.Div(
-            [
-                html.Div(
-                    [
-                        html.I(className="fas fa-tag topic-tag-icon"),
-                        html.Span(f"{tag} ({count})"),
-                    ],
-                    className="topic-tag",
-                )
-                for tag, count in sorted_tags
-            ],
-            className="tags-container",
-        )
-    else:
-        tags_output = html.Div(
-            [
-                html.I(className="fas fa-info-circle", style={"marginRight": "5px"}),
-                "No tags found for this topic",
-            ],
-            className="no-tags-message",
-        )
-
-    # Sample up to 5 random dialogs
-    sample_size = min(5, len(topic_conversations))
-    if sample_size > 0:
-        sample_indices = random.sample(range(len(topic_conversations)), sample_size)
-        samples = topic_conversations.iloc[sample_indices]
-
-        dialog_items = []
-        for _, row in samples.iterrows():
-            # Create dialog item with tags
-            sentiment_tag = html.Span(
-                row["Sentiment"], className="dialog-tag tag-sentiment"
-            )
-            resolution_tag = html.Span(
-                row["Resolution"], className="dialog-tag tag-resolution"
-            )
-            urgency_tag = html.Span(row["Urgency"], className="dialog-tag tag-urgency")
-
-            # Add Chat ID tag if 'id' column exists
-            chat_id_tag = None
-            if "id" in row:
-                chat_id_tag = html.Span(
-                    f"Chat ID: {row['id']}", className="dialog-tag tag-chat-id"
-                )
-
-            # Compile all tags, including the new Chat ID tag if available
-            tags = [sentiment_tag, resolution_tag, urgency_tag]
-            if chat_id_tag:
-                tags.append(chat_id_tag)
-
-            dialog_items.append(
-                html.Div(
-                    [
-                        html.Div(row["Summary"], className="dialog-summary"),
-                        html.Div(
-                            tags,
-                            className="dialog-metadata",
-                        ),
-                    ],
-                    className="dialog-item",
-                )
-            )
-
-        sample_dialogs = dialog_items
-    else:
-        sample_dialogs = [
-            html.Div(
-                "No sample dialogs available for this topic.",
-                style={"color": "var(--muted-foreground)"},
-            )
-        ]
-
-    return (
-        title,
-        metadata_items,
-        metrics_boxes,
-        tags_output,
-        sample_dialogs,
-        {"display": "none"},
-    )
-
-
-if __name__ == "__main__":
-    app.run_server(debug=False)