Add files for HF deployment

Dockerfile

@@ -12,4 +12,4 @@ COPY --chown=user . .
 
 EXPOSE 7860
 
-CMD ["gunicorn", "dashboard:server", "--bind", "0.0.0.0:7860", "--workers", "4"]
+CMD ["gunicorn", "app:server", "--bind", "0.0.0.0:7860", "--workers", "4"]

app.py

@@ -0,0 +1,1519 @@
+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)