Move opacity card further up (#265)

Co-authored-by: Edoardo Zoni <ezoni@lbl.gov>

Author: RemiLehe

dashboard/app.py

@@ -15,6 +15,7 @@
 from state_manager import server, state, ctrl, initialize_state
 from error_manager import error_panel, add_error
 from utils import (
+    data_depth_panel,
     load_experiments,
     load_database,
     load_data,
@@ -271,6 +272,10 @@ def home_route():
                 with vuetify.VRow():
                     with vuetify.VCol():
                         par_manager.panel()
+                # plots control panel
+                with vuetify.VRow():
+                    with vuetify.VCol():
+                        data_depth_panel()
                 # optimization control panel
                 with vuetify.VRow():
                     with vuetify.VCol():
@@ -279,44 +284,7 @@ def home_route():
                 with vuetify.VRow():
                     with vuetify.VCol():
                         mod_manager.panel()
-                # plots control panel
-                with vuetify.VRow():
-                    with vuetify.VCol():
-                        with vuetify.VExpansionPanels(
-                            v_model=("expand_panel_control_plots", 0)
-                        ):
-                            with vuetify.VExpansionPanel(
-                                title="Control: Plots",
-                                style="font-size: 20px; font-weight: 500;",
-                            ):
-                                with vuetify.VExpansionPanelText():
-                                    # create a row for the slider label
-                                    with vuetify.VRow():
-                                        vuetify.VListSubheader(
-                                            "Projected Data Depth",
-                                            style="margin-top: 16px;",
-                                        )
-                                    # create a row for the slider and text field
-                                    with vuetify.VRow(no_gutters=True):
-                                        with vuetify.VSlider(
-                                            v_model_number=("opacity",),
-                                            change="flushState('opacity')",
-                                            hide_details=True,
-                                            max=1.0,
-                                            min=0.0,
-                                            step=0.025,
-                                            style="align-items: center;",
-                                        ):
-                                            with vuetify.Template(v_slot_append=True):
-                                                vuetify.VTextField(
-                                                    v_model_number=("opacity",),
-                                                    density="compact",
-                                                    hide_details=True,
-                                                    readonly=True,
-                                                    single_line=True,
-                                                    style="margin-top: 0px; padding-top: 0px; width: 80px;",
-                                                    type="number",
-                                                )
+
             # plots card
             with vuetify.VCol(cols=8):
                 with vuetify.VCard():

dashboard/utils.py

@@ -7,6 +7,7 @@
 import pymongo
 import torch
 import yaml
+from trame.widgets import vuetify3 as vuetify
 from state_manager import state
 from error_manager import add_error
 
@@ -351,3 +352,39 @@ def plot(exp_data, sim_data, model_manager, cal_manager):
 
     fig.update_layout(clickmode="event")
     return fig
+
+
+def data_depth_panel():
+    with vuetify.VExpansionPanels(v_model=("expand_panel_control_plots", 0)):
+        with vuetify.VExpansionPanel(
+            title="Control: Plots",
+            style="font-size: 20px; font-weight: 500;",
+        ):
+            with vuetify.VExpansionPanelText():
+                # create a row for the slider label
+                with vuetify.VRow():
+                    vuetify.VListSubheader(
+                        "Projected Data Depth",
+                        style="margin-top: 16px;",
+                    )
+                # create a row for the slider and text field
+                with vuetify.VRow(no_gutters=True):
+                    with vuetify.VSlider(
+                        v_model_number=("opacity",),
+                        change="flushState('opacity')",
+                        hide_details=True,
+                        max=1.0,
+                        min=0.0,
+                        step=0.025,
+                        style="align-items: center;",
+                    ):
+                        with vuetify.Template(v_slot_append=True):
+                            vuetify.VTextField(
+                                v_model_number=("opacity",),
+                                density="compact",
+                                hide_details=True,
+                                readonly=True,
+                                single_line=True,
+                                style="margin-top: 0px; padding-top: 0px; width: 80px;",
+                                type="number",
+                            )