Abstracting sidebar and dark_mode

prompt_order_exeriment/dark_mode.py

@@ -0,0 +1,23 @@
+import reflex as rx
+from reflex.style import color_mode, set_color_mode
+
+
+def dark_mode_toggle() -> rx.Component:
+    return rx.segmented_control.root(
+            rx.segmented_control.item(
+                    rx.icon(tag="monitor", size=20),
+                    value="system",
+                    ),
+            rx.segmented_control.item(
+                    rx.icon(tag="sun", size=20),
+                    value="light",
+                    ),
+            rx.segmented_control.item(
+                    rx.icon(tag="moon", size=20),
+                    value="dark",
+                    ),
+            on_change=set_color_mode,
+            variant="classic",
+            radius="large",
+            value=color_mode,
+            )

prompt_order_exeriment/pages/index.py

@@ -1,7 +1,5 @@
 import reflex as rx
 
-from ..sidebar import sidebar
-
 p1 = '''
 # Prompt Order Experiment
 This experiment aims to explore various scenarios for **prompt fine-tuning** using structured generation. We'll test how the order of elements in a prompt affects model performance. The elements we consider are:
@@ -71,9 +69,6 @@ Structured generation ensures consistent response formats, which is crucial for
 
 
 def page():
-    return rx.hstack(
-            sidebar(),
-            rx.vstack(
-                    rx.markdown(p1),
-                    )
+    return rx.vstack(
+            rx.markdown(p1),
             )

prompt_order_exeriment/pages/overview.py

@@ -1,7 +1,5 @@
 import reflex as rx
 
-from ..sidebar import sidebar
-
 p2 = '''
 # Steps 
 ### Dataset Selection
@@ -26,21 +24,8 @@ def mermaid_svg():
             )
 
 
-def overview():
-    return rx.hstack(
-            sidebar(),
-            rx.vstack(
-                    rx.markdown(p2),
-                    mermaid_svg(),
-                    )
-            )
-
-
 def page():
-    return rx.hstack(
-            sidebar(),
-            rx.vstack(
-                    rx.markdown(p2),
-                    mermaid_svg(),
-                    )
+    return rx.vstack(
+            rx.markdown(p2),
+            mermaid_svg(),
             )

prompt_order_exeriment/pages/results.py

@@ -1,10 +1,9 @@
-import reflex as rx
 import pandas as pd
 import plotly.express as px
+import reflex as rx
+from datasets import load_dataset
 from reflex_ag_grid import ag_grid
 from sklearn.metrics import accuracy_score
-from ..sidebar import sidebar
-from datasets import load_dataset
 
 chart_md = """
 Make sure you explore what happeened between:
@@ -87,30 +86,27 @@ def topic_star_chart():
 
 
 def page():
-    return rx.hstack(
-            sidebar(),
-            rx.vstack(
-                    rx.heading("Results", size="9", margin="20px 0"),
-                    rx.markdown("Here we have a sortable table of our experiments and the results"),
-                    ag_grid(
-                            id="ag_grid_metrics",
-                            row_data=metrics_df.to_dict("records"),
-                            column_defs=metrics_column_defs,
-                            width="60%",
-                            margin="20px auto",  # Center the table
-                            size_columns_to_fit=True
-                            ),
-                    rx.markdown("\n---\n"),
-                    rx.divider(),
-                    rx.heading("Performance Star Chart", size="8", margin="20px 0"),
-                    rx.text(
-                            "The chart below shows how each model performed across the most popular top 10 topics by row count. "
-                            "Each line represents a model, and the radial axis represents accuracy.",
-                            font_size="md",
-                            padding="10px",
-                            ),
-                    rx.markdown(chart_md),
-                    rx.plotly(data=topic_star_chart()),  # Render the radar chart
-                    padding="20px",
-                    )
+    return rx.vstack(
+            rx.heading("Results", size="9", margin="20px 0"),
+            rx.markdown("Here we have a sortable table of our experiments and the results"),
+            ag_grid(
+                    id="ag_grid_metrics",
+                    row_data=metrics_df.to_dict("records"),
+                    column_defs=metrics_column_defs,
+                    width="60%",
+                    margin="20px auto",  # Center the table
+                    size_columns_to_fit=True
+                    ),
+            rx.markdown("\n---\n"),
+            rx.divider(),
+            rx.heading("Performance Star Chart", size="8", margin="20px 0"),
+            rx.text(
+                    "The chart below shows how each model performed across the most popular top 10 topics by row count. "
+                    "Each line represents a model, and the radial axis represents accuracy.",
+                    font_size="md",
+                    padding="10px",
+                    ),
+            rx.markdown(chart_md),
+            rx.plotly(data=topic_star_chart()),  # Render the radar chart
+            padding="20px",
             )

prompt_order_exeriment/prompt_order_exeriment.py

@@ -1,9 +1,36 @@
 import reflex as rx
 
+from .dark_mode import dark_mode_toggle
+from .sidebar import sidebar
 from .pages import index, overview, results
 
+
+def add_components(rest_of_app):
+    """
+    Adds sidebar and dark_mode components
+    :param rest_of_app:
+    :return:
+    """
+    return rx.box(
+            rx.hstack(
+                    sidebar(),
+                    rest_of_app(),
+                    ),
+            rx.box(
+                    dark_mode_toggle(),
+                    position="absolute",  # Enables absolute positioning
+                    top="10px",  # Position 10px from the top
+                    right="10px",  # Position 10px from the right
+                    z_index=1000,  # Ensures it appears above other elements
+                    ),
+            position="relative",  # Sets the container as a relative position reference
+            width="100vw",  # Full width of the viewport
+            height="100vh",  # Full height of the viewport
+            )
+
+
 # Initialize the Reflex app with polished layout
 app = rx.App()
-app.add_page(overview, title='Overview', route='/overview')  # Overview page
-app.add_page(results, title='Results', route='/results')  # Results page
-app.add_page(index, title='Index', route='/')  # Index page
+app.add_page(add_components(overview), title='Overview', route='/overview')  # Overview page
+app.add_page(add_components(results), title='Results', route='/results')  # Results page
+app.add_page(add_components(index), title='Index', route='/')  # Index page