updated tab option placement

app.py

@@ -37,43 +37,61 @@ app.layout = dmc.MantineProvider(
                                     ],
                                     className="brand"
                                 ),
-                                # Tab switcher (added before New Chart button)
+                                # Container for tabs and button
                                 html.Div(
                                     [
                                         html.Button(
-                                            "VISUALIZER",
-                                            id="tab-visualizer",
-                                            className="tab active",
-                                            type="button",
-                                            **{
-                                                "role": "tab",
-                                                "aria-selected": "true"
+                                            "New Chart",
+                                            id="new-chart-button",
+                                            className="pill",
+                                            n_clicks=0,
+                                            style={
+                                                "cursor": "pointer", 
+                                                "border": "none",
+                                                "fontFamily": "inherit"
                                             }
                                         ),
-                                        html.Button(
-                                            "GALLERY",
-                                            id="tab-gallery",
-                                            className="tab",
-                                            type="button",
-                                            **{
-                                                "role": "tab",
-                                                "aria-selected": "false"
-                                            }
+                                        # Tab switcher
+                                        html.Div(
+                                            [
+                                                html.Button(
+                                                    "CREATE",
+                                                    id="tab-create",
+                                                    className="tab active",
+                                                    type="button",
+                                                    style={
+                                                        "height": "30px",
+                                                        "padding": "0 16px",
+                                                    },
+                                                    **{
+                                                        "role": "tab",
+                                                        "aria-selected": "true"
+                                                    }
+                                                ),
+                                                html.Button(
+                                                    "GALLERY",
+                                                    id="tab-gallery",
+                                                    className="tab",
+                                                    type="button",
+                                                    style={
+                                                        "height": "30px",
+                                                        "padding": "0 16px",
+                                                    },
+                                                    **{
+                                                        "role": "tab",
+                                                        "aria-selected": "false"
+                                                    }
+                                                )
+                                            ],
+                                            className="tabs",
+                                            role="tablist",
+                                            **{"aria-label": "ChaRtBot pages"}
                                         )
                                     ],
-                                    className="tabs",
-                                    role="tablist",
-                                    **{"aria-label": "ChaRtBot pages"}
-                                ),
-                                html.Button(
-                                    "New Chart",
-                                    id="new-chart-button",
-                                    className="pill",
-                                    n_clicks=0,
                                     style={
-                                        "cursor": "pointer", 
-                                        "border": "none",
-                                        "fontFamily": "inherit"
+                                        "display": "flex",
+                                        "alignItems": "center",
+                                        "gap": "12px"
                                     }
                                 )
                             ]
@@ -488,11 +506,12 @@ def reset_chat(n_clicks):
 
 # Callback for tab switching
 @callback(
-    Output("tab-visualizer", "className"),
+    Output("tab-create", "className"),
     Output("tab-gallery", "className"),
     Output("visualizer-page", "style"),
     Output("gallery-page", "style"),
-    Input("tab-visualizer", "n_clicks"),
+    Output("new-chart-button", "style"),
+    Input("tab-create", "n_clicks"),
     Input("tab-gallery", "n_clicks"),
     prevent_initial_call=True
 )
@@ -500,16 +519,16 @@ 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"}
+        return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}, {"cursor": "pointer", "border": "none", "fontFamily": "inherit"}
     
     button_id = ctx.triggered[0]["prop_id"].split(".")[0]
     
-    if button_id == "tab-visualizer":
-        return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}
+    if button_id == "tab-create":
+        return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}, {"cursor": "pointer", "border": "none", "fontFamily": "inherit"}
     elif button_id == "tab-gallery":
-        return "tab", "tab active", {"display": "none"}, {"marginTop": "10px"}
+        return "tab", "tab active", {"display": "none"}, {"marginTop": "10px"}, {"display": "none"}
     
-    return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}
+    return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}, {"cursor": "pointer", "border": "none", "fontFamily": "inherit"}
 
 if __name__ == "__main__":
     app.run(debug=True)

gallery_data.py

@@ -12,7 +12,7 @@ GALLERY_DATA = [
     },
     {
         "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.",
+        "prompt": "Create a Manhattan-style plot where purchases are grouped along the x-axis by Category, with each point representing an Order_Value. Alternate colours 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"
     },
@@ -36,7 +36,7 @@ GALLERY_DATA = [
     },
     {
         "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.",
+        "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 colour 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"
     },
@@ -54,7 +54,7 @@ GALLERY_DATA = [
     },
     {
         "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.",
+        "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. colour 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"
     },