gallery view, updated prompt for subplots choropleth

app.py

@@ -3,6 +3,7 @@ from dash import html, dcc, callback, Output, Input, State
 import dash_mantine_components as dmc
 import pandas as pd
 from utils import prompt, helpers
+from gallery_data import GALLERY_DATA
 
 # Initialize the Dash app
 app = dash.Dash(__name__, suppress_callback_exceptions=True)
@@ -36,6 +37,34 @@ app.layout = dmc.MantineProvider(
                                     ],
                                     className="brand"
                                 ),
+                                # Tab switcher (added before New Chart button)
+                                html.Div(
+                                    [
+                                        html.Button(
+                                            "VISUALIZER",
+                                            id="tab-visualizer",
+                                            className="tab active",
+                                            type="button",
+                                            **{
+                                                "role": "tab",
+                                                "aria-selected": "true"
+                                            }
+                                        ),
+                                        html.Button(
+                                            "GALLERY",
+                                            id="tab-gallery",
+                                            className="tab",
+                                            type="button",
+                                            **{
+                                                "role": "tab",
+                                                "aria-selected": "false"
+                                            }
+                                        )
+                                    ],
+                                    className="tabs",
+                                    role="tablist",
+                                    **{"aria-label": "ChaRtBot pages"}
+                                ),
                                 html.Button(
                                     "New Chart",
                                     id="new-chart-button",
@@ -50,7 +79,7 @@ app.layout = dmc.MantineProvider(
                             ]
                         ),
                         
-                        # Form section
+                        # Visualizer Page (Form section)
                         html.Div(
                             [
                                 # Prompt textarea
@@ -131,7 +160,7 @@ app.layout = dmc.MantineProvider(
                                     target="_blank",
                                     style={"display": "none", "marginTop": "20px", "textAlign": "right"}
                                 ),
-                                html.Div(id="dataset-explorer", style={"marginTop": "10px"}),  # Add this line
+                                html.Div(id="dataset-explorer", style={"marginTop": "10px"}),
                                 html.Div(id="chartbot-output", style={"marginTop": "10px"}),
                                 html.Div(id="python-content-output", style={"marginTop": "10px"}),
                                 
@@ -140,7 +169,91 @@ app.layout = dmc.MantineProvider(
                                 dcc.Store(id="stored-file-name"),
                                 dcc.Store(id="html-buffer")
                             ],
+                            id="visualizer-page",
                             style={"marginTop": "10px"}
+                        ),
+                        
+                        # Gallery Page
+                        html.Div(
+                            [
+                                # Gallery page header
+                                html.Section(
+                                    html.Div(
+                                        [
+                                            html.H2("Gallery", style={"margin": "0", "fontSize": "18px", "letterSpacing": "-0.02em"}),
+                                            html.P(
+                                                "Browse charts generated by ChaRtBot — each card includes the prompt and the original dataset.",
+                                                style={"margin": "6px 0 0", "fontSize": "13px", "color": "var(--muted)"}
+                                            )
+                                        ],
+                                        className="page-title"
+                                    ),
+                                    className="page-head"
+                                ),
+                                
+                                # Gallery grid
+                                html.Section(
+                                    [
+                                        # Generate cards from GALLERY_DATA
+                                        *[
+                                            html.Article(
+                                                [
+                                                    html.Div(
+                                                        [
+                                                            html.Img(
+                                                                src=item["image"],
+                                                                alt=f"Chart thumbnail {i+1}"
+                                                            )
+                                                        ],
+                                                        className="thumb"
+                                                    ),
+                                                    html.Div(
+                                                        [
+                                                            html.P(
+                                                                f"Prompt: {item['prompt']}",
+                                                                className="gallery-prompt"
+                                                            ),
+                                                            html.Div(
+                                                                [
+                                                                    html.Div(
+                                                                        [
+                                                                            html.A(
+                                                                                "📄 CSV",
+                                                                                className="link",
+                                                                                href=item["csv_link"],
+                                                                                target="_blank" if item["csv_link"] != "#" else ""
+                                                                            ),
+                                                                            html.Span(
+                                                                                item["badge"],
+                                                                                className="badge"
+                                                                            ) if item.get("badge") else None
+                                                                        ],
+                                                                        className="links"
+                                                                    ),
+                                                                    html.Button(
+                                                                        "⋮",
+                                                                        className="kebab",
+                                                                        type="button",
+                                                                        **{"aria-label": "More actions"}
+                                                                    )
+                                                                ],
+                                                                className="meta"
+                                                            )
+                                                        ],
+                                                        className="content"
+                                                    )
+                                                ],
+                                                className="gallery-card"
+                                            )
+                                            for i, item in enumerate(GALLERY_DATA)
+                                        ]
+                                    ],
+                                    className="gallery-grid",
+                                    **{"aria-label": "Gallery grid"}
+                                )
+                            ],
+                            id="gallery-page",
+                            style={"display": "none"}
                         )
                     ],
                     className="card",
@@ -373,5 +486,30 @@ def reset_chat(n_clicks):
         return "", None, None, None, None, None, None, {"display": "none"}, None, True, None  # Added None for dataset-explorer
     return dash.no_update
 
+# Callback for tab switching
+@callback(
+    Output("tab-visualizer", "className"),
+    Output("tab-gallery", "className"),
+    Output("visualizer-page", "style"),
+    Output("gallery-page", "style"),
+    Input("tab-visualizer", "n_clicks"),
+    Input("tab-gallery", "n_clicks"),
+    prevent_initial_call=True
+)
+def switch_tabs(visualizer_clicks, gallery_clicks):
+    """Handle tab switching between Visualizer and Gallery."""
+    ctx = dash.callback_context
+    if not ctx.triggered:
+        return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}
+    
+    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
+    
+    if button_id == "tab-visualizer":
+        return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}
+    elif button_id == "tab-gallery":
+        return "tab", "tab active", {"display": "none"}, {"marginTop": "10px"}
+    
+    return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}
+
 if __name__ == "__main__":
     app.run(debug=True)

assets/custom.css

@@ -80,6 +80,48 @@ header {
   margin-bottom: 14px;
 }
 
+/* Tab switcher styles */
+.tabs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px;
+  background: rgba(255, 255, 255, 0.70);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.05);
+}
+
+.tab {
+  border: 0;
+  background: transparent;
+  padding: 10px 14px;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(15, 23, 42, 0.70);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.2s ease;
+}
+
+.tab:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
+}
+
+.tab.active {
+  color: #0b2a7a;
+  background: linear-gradient(180deg, rgba(47, 107, 255, 0.18), rgba(47, 107, 255, 0.08));
+  border: 1px solid rgba(47, 107, 255, 0.22);
+}
+
+.tab:hover:not(.active) {
+  background: rgba(47, 107, 255, 0.05);
+}
+
 .brand {
   display: flex;
   gap: 12px;
@@ -223,4 +265,200 @@ h1 {
   .submitBtn {
     width: 100%;
   }
+}
+
+/* Gallery Page Styles */
+.page-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 8px 10px 14px;
+}
+
+.page-title h2 {
+  margin: 0;
+  font-size: 18px;
+  letter-spacing: -0.02em;
+}
+
+.page-title p {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* Gallery grid: 5 rows x 4 columns = 20 items */
+.gallery-grid {
+  margin: 8px 6px 0;
+  padding: 14px 10px 8px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+/* Gallery Cards */
+.gallery-card {
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
+  overflow: hidden;
+  position: relative;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  display: flex;
+  flex-direction: column;
+  min-height: 250px;
+}
+
+.gallery-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(47, 107, 255, 0.18);
+  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.12);
+}
+
+.gallery-card:focus-within {
+  box-shadow: 0 0 0 4px rgba(31, 209, 192, 0.14), 0 18px 44px rgba(16, 24, 40, 0.12);
+}
+
+/* Thumbnail area */
+.thumb {
+  aspect-ratio: 1 / 1;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+  background:
+    radial-gradient(260px 120px at 20% 30%, rgba(79, 172, 254, 0.25), transparent 60%),
+    radial-gradient(260px 120px at 80% 40%, rgba(31, 209, 192, 0.18), transparent 62%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.thumb img {
+  width: 92%;
+  height: 88%;
+  object-fit: contain;
+  border-radius: 14px;
+  border: 1px solid rgba(15, 23, 42, 0.10);
+  box-shadow: 0 12px 22px rgba(16, 24, 40, 0.10);
+  background: white;
+}
+
+/* Badge/Chip styling */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: #2f6bff;
+  background: rgba(47, 107, 255, 0.1);
+  border: 1px solid rgba(47, 107, 255, 0.2);
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+/* Content */
+.content {
+  padding: 12px 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+}
+
+.gallery-prompt {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.35;
+  color: rgba(15, 23, 42, 0.78);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  min-height: calc(1.35em * 3);
+}
+
+.meta {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.links {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: rgba(15, 23, 42, 0.74);
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.75);
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+
+.link:hover {
+  border-color: rgba(47, 107, 255, 0.22);
+  color: rgba(11, 42, 122, 0.95);
+}
+
+.link:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
+}
+
+.kebab {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.75);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: border-color 0.15s ease;
+  font-size: 18px;
+  line-height: 1;
+  color: rgba(15, 23, 42, 0.74);
+}
+
+.kebab:hover {
+  border-color: rgba(15, 23, 42, 0.18);
+}
+
+.kebab:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
+}
+
+/* Responsive gallery grid */
+@media (max-width: 1200px) {
+  .gallery-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 980px) {
+  .gallery-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 680px) {
+  .gallery-grid {
+    grid-template-columns: 1fr;
+  }
 }

data/1976-2020_president.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f6cb9143a67bdbfa805810e069027f677f56a0765b00e10ea50b7d1a70e45bb5
-size 509865

data/ewf_appearances.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:448f2700a84da26347970f2d97f957b13b484c77112f988e1f7f0b58e4c3a66a
-size 481873

data/gold prices.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f2c08e76148ca0cf0729ec5c95dd3162e60efeb45d7c53341ee371aad887289e
-size 128817

data/oecd_gpia_results.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3b2760c239df55b49b40b2dc461f2194a84745d631b8cd1c14af85073b0d2423
-size 1961100

data/space_missions_data.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f95e3afab4a0ea4050125d838381771d700a18e5ae759675b133f9933f858958
-size 137506

gallery_data.py

@@ -0,0 +1,79 @@
+"""
+Gallery data configuration for ChaRtBot
+Add new gallery items by appending to the GALLERY_DATA list
+"""
+
+GALLERY_DATA = [
+    {
+        "image": "/assets/gallery/1_image.png",
+        "prompt": "Build an Animated Choropleth map of the USA displaying state-wise percentage of votes for DEMOCRAT in all the years",
+        "csv_link": "/assets/gallery/datasets/1976-2020_president.csv",
+        "badge": "Animated choropleth"
+    },
+    {
+        "image": "/assets/gallery/2_image.png",
+        "prompt": "Create a Manhattan-style plot where purchases are grouped along the x-axis by Category, with each point representing an Order_Value. Alternate colors by Category so each group forms its own block, highlighting large spending spikes.",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Manhattan"
+    },
+    {
+        "image": "/assets/gallery/3_image.png",
+        "prompt": "Create a sunburst chart showing the launch ecosystem hierarchy for the year 2005 Use Company as the first level, Rocket as the second level, Mission as the third level, and MissionStatus as the outer level.",
+        "csv_link": "/assets/gallery/datasets/space_missions_data.csv",
+        "badge": "Hierarchical"
+    },
+    {
+        "image": "/assets/gallery/4_image.png",
+        "prompt": "Create a Sankey diagram where the flow goes from Team → Match Result where: - Source nodes are team_name - Target nodes are result Aggregate the number of matches for each team–opponent–result flow. For readability, limit the visualization to teams with the highest total match counts.",
+        "csv_link": "/assets/gallery/datasets/ewf_appearances.csv",
+        "badge": "Flow"
+    },
+    {
+        "image": "/assets/gallery/5_image.png",
+        "prompt": "Create a calendar-like circular gold price chart for the year 2020, wherein going clock-wise on the chart will move from Jan -> Dec. Each month shall have a number of bars equal to the number of days in that month. The length of each bar will represent the price of gold on that day. Use a mustard colour for all the bars.",
+        "csv_link": "/assets/gallery/datasets/gold prices.csv",
+        "badge": "Circular"
+    },
+    {
+        "image": "/assets/gallery/6_image.png",
+        "prompt": "Depict the sum of the purchase amount per day of the week using a heatmap. The X-axis should represent the months, labeled with month names, and the Y-axis should represent the days of the week. Use color to depict the purchase amounts, with the X-axis ordered chronologically by both days and months.",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Heatmap"
+    },
+    {
+        "image": "/assets/gallery/7_image.png",
+        "prompt": "Create a total of four visualizations, (2 rows, 2 columns) which display: 1. Top 5 Categories by Quantity 2. Top 5 Categories by Price 3. Average Purchase Price per State (USA choropleth map, don't display the colorbar) 4. State-wise Quantity Distribution (USA choropleth map, don't display the colorbar)",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Subplots"
+    },
+    {
+        "image": "/assets/gallery/8_image.png",
+        "prompt": "Candle-stick chart of gold prices in the year 2020, add a column named 'Ticker' and make sure all the values in this column are 'Gold'",
+        "csv_link": "/assets/gallery/datasets/gold prices.csv",
+        "badge": "Financial"
+    },
+    {
+        "image": "/assets/gallery/9_image.png",
+        "prompt": "Create a bubble chart that visualizes rocket launch prices over the years Use Date on the x-axis and Price on the y-axis. Size each bubble by Price to reflect the relative cost of each mission. Color the bubbles by Company. Ensure bubbles are semi-transparent to avoid overlap issues. Add detailed hover tooltips showing Company, Rocket, Mission, Location, MissionStatus, and Price.",
+        "csv_link": "/assets/gallery/datasets/space_missions_data.csv",
+        "badge": "Bubble"
+    },
+    {
+        "image": "/assets/gallery/10_image.png",
+        "prompt": "Create an animated bubble chart where Categories are represented as bubbles that grow, shrink, and gently reposition over time based on total Order_Value, revealing how category importance changes month by month.",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Animated bubbles"
+    },
+    {
+        "image": "/assets/gallery/11_image.png",
+        "prompt": "Create a calendar-like circular gold price chart for the year 2020, wherein going clock-wise on the chart will move from Jan -> Dec. Each month shall have a number of bars equal to the number of days in that month. Colour of each bar: Based on the price of gold on that day. Length of each bar: Equal to the day of the month",
+        "csv_link": "/assets/gallery/datasets/gold prices.csv",
+        "badge": "Circular"
+    },
+    {
+        "image": "/assets/gallery/12_image.png",
+        "prompt": "Dumbbell chart showing the teams' scores over the years. Each team shall have only two data points in their dumbbells, the first point and the last. Each point must be a sum of goals scored by the team in the specific season. Use blue colour for the first point and red for the second point in the dumbbell. In the tooltips show the following information: - Team name - Score - Season - Year",
+        "csv_link": "/assets/gallery/datasets/ewf_appearances.csv",
+        "badge": "Dumbbell"
+    }
+]

utils/prompt.py

@@ -96,7 +96,21 @@ def get_prompt_text() -> str:
                               title='Map Title')
             The locations parameter should reference the column with state codes, not the column with full state names.
             Always verify that locationmode='USA-states' is present in the code.
-
+            
+            CHOROPLETH MAPS IN SUBPLOTS:
+            When creating a choropleth map of the USA as part of subplots using graph_objects (go.Choropleth), you MUST include the following:
+            1. After creating all traces with fig.add_trace(), add:
+               fig.update_layout(title_text='Your Title', height=800, plot_bgcolor='white', paper_bgcolor='white')
+               Note: Generic background settings don't apply to choropleths in subplots, so this is necessary.
+            2. Force the USA scope on the specific choropleth subplot using:
+               fig.update_geos(scope="usa", projection_type="albers usa", bgcolor="white", row=X, col=Y)
+               Replace X and Y with the actual row and column numbers where the choropleth is located.
+            Example:
+            # After adding all traces
+            fig.update_layout(title_text='E-commerce Data Visualization', height=800, plot_bgcolor='white', paper_bgcolor='white')
+            # Force USA scope on the choropleth subplot (adjust row, col as needed)
+            fig.update_geos(scope="usa", projection_type="albers usa", bgcolor="white", row=2, col=2)
+            
             {dumbbell_charts_section}
             
             {polar_charts_section}