docs/ui: compact ui with more explanations

agent/assets/custom.css

@@ -3,3 +3,19 @@ header {
     background-position: center; /* Center the background image */
     background-repeat: no-repeat; /* Prevent image from repeating */
 }
+
+.v-application {
+    line-height: 1;
+  }
+
+.v-input__slot {
+    margin-bottom: 1px;
+}
+
+.v-messages {
+    min-height: 2px;
+}
+
+.v-text-field__details {
+    min-height: 2px;
+  }

agent/dashboard/__init__.py

@@ -5,6 +5,15 @@ route_order = ["/","data","training","testing","inference"]
 @solara.component
 def Page():
     with solara.VBox() as main:
-        solara.Text("Home")
+        solara.Markdown(md_text="""
+## Welcome
+This web page is created to demonstrate the model-based auto-scaling
+approach developed in "AI-based Auto-Scaling and Tuning" project.
+
+* In [Data](/data) tab, you can investigate the raw data.
+* In [Training](/training), you can build a model on the raw data.
+* [Testing](/testing) tab is used to evaluate the performance of the trained model.
+* Finally, [Inference](/inference) tab provides a simulation environment to test the model.
+""")
 
     return main

agent/dashboard/data.py

@@ -40,11 +40,12 @@ def FilteredDataFrame(df):
 
 @solara.component
 def FilterPanel(df):
-    solara.CrossFilterReport(df, classes=["py-2"])
-    solara.CrossFilterSelect(df, configurable=False, column='replica')
-    solara.CrossFilterSelect(df, configurable=False, column='cpu')
-    solara.CrossFilterSelect(df, configurable=False, column='expected_tps')
-    solara.CrossFilterSelect(df, configurable=False, column='previous_tps')
+    with solara.Column(gap="0px"):
+        solara.CrossFilterReport(df)
+        solara.CrossFilterSelect(df, configurable=False, column='replica')
+        solara.CrossFilterSelect(df, configurable=False, column='cpu')
+        solara.CrossFilterSelect(df, configurable=False, column='expected_tps')
+        solara.CrossFilterSelect(df, configurable=False, column='previous_tps')
 
 
 
@@ -63,36 +64,67 @@ def DataViewer(df):
         dff = df[filter]
 
     with solara.Sidebar():
-        FilterPanel(df)
-        with solara.Card("Controls", margin=0, elevation=0):
-                with solara.Column():
+        with solara.Card("Cross Filters", margin=1, elevation=10,
+            subtitle="""You can filter the data by selecting different values of several attributes,
+            and investigate the characteristics of the data.
+            Once a filter is applied to an attribute, other filter boxes
+            are immediately updated as well as the number of records in the
+            filtered data."""):
+            FilterPanel(df)
+        with solara.Card("Plot Settings", margin=1, elevation=10,
+                subtitle="""You can adjust these parameters to control the 2D scatter plot on the right.
+                """):
+                with solara.Column(gap="0px"):
                     columns = list(df.columns)
-                    solara.SliderFloat(label="Size Max", value=state.value['size_max'], min=1, max=100, on_value=state.value['size_max'].set)
-                    solara.Checkbox(label="Log x", value=state.value['logx'], on_value=state.value['logx'].set)
-                    solara.Checkbox(label="Log y", value=state.value['logy'], on_value=state.value['logy'].set)
-                    solara.Select("Size", values=columns, value=state.value['size'].value, on_value=state.value['size'].set)
-                    solara.Select("Color", values=columns, value=state.value['color'].value, on_value=state.value['color'].set)
-                    solara.Select("Column x", values=columns, value=state.value['x'].value, on_value=state.value['x'].set)
-                    solara.Select("Column y", values=columns, value=state.value['y'].value, on_value=state.value['y'].set)
-
-       
-    solara.CrossFilterDataFrame(df, items_per_page=10)
-
-
-    if state.value['x'].value and state.value['y'].value:
-        solara_px.scatter(
-            dff,
-            state.value['x'].value,
-            state.value['y'].value,
-            size=state.value['size'].value,
-            color=state.value['color'].value,
-            size_max=state.value['size_max'].value,
-            log_x=state.value['logx'].value,
-            log_y=state.value['logy'].value,
-            width=800,
-        )
-    else:
-        solara.Warning("Select x and y columns")
+                    with solara.Row():
+                        with solara.Tooltip("Select to draw the x-axis in logarithmic scale"):
+                            solara.Checkbox(label="Log x", value=state.value['logx'], on_value=state.value['logx'].set)
+                        with solara.Tooltip("Select to draw the y-axis in logarithmic scale"):
+                            solara.Checkbox(label="Log y", value=state.value['logy'], on_value=state.value['logy'].set)
+                    with solara.Tooltip("Maximum size of the markers in the scatter plot"):
+                        solara.SliderFloat(label="Maximum Marker Size", value=state.value['size_max'], min=1, max=100, on_value=state.value['size_max'].set)
+                    with solara.Tooltip("Adjust the marker size based on the selected attribute"):
+                        solara.Select("Size", values=columns, value=state.value['size'].value, on_value=state.value['size'].set)
+                    with solara.Tooltip("Adjust the marker color based on the selected attribute"):
+                        solara.Select("Color", values=columns, value=state.value['color'].value, on_value=state.value['color'].set)
+                    with solara.Tooltip("Select the attribute to be used in x-axis"):
+                        solara.Select("X-Axis", values=columns, value=state.value['x'].value, on_value=state.value['x'].set)
+                    with solara.Tooltip("Select the attribute to be used in y-axis"):
+                        solara.Select("Y-Axis", values=columns, value=state.value['y'].value, on_value=state.value['y'].set)
+
+    with solara.Card("Raw Data", margin=1, elevation=2,
+        subtitle="""The raw data to be used in this study.
+        Cross-filters on the left are immediately applied to the data.
+        Data is visualized as a scatter plot below which can be controlled via
+        widgets in 'Plot Settings'. The filters and the visualization plot
+        are only used to understand the characteristics of the data. So, the filtered data
+        is not used in the next steps. In the training section, there will be other
+        filters specific to training.
+        """):
+        solara.CrossFilterDataFrame(df, items_per_page=10)
+
+    with solara.Card("Scatter Plot", margin=1, elevation=2,
+        subtitle="""Based on the plot controls on the left, the
+        data is visualized as a 2D scatter plot. You can select different
+        attributes for X and Y-axis. By manipulating the size and color
+        properties of the markers, you can investigate the data in detail.
+        """):
+
+        if state.value['x'].value and state.value['y'].value:
+
+            solara_px.scatter(
+                dff,
+                state.value['x'].value,
+                state.value['y'].value,
+                size=state.value['size'].value,
+                color=state.value['color'].value,
+                size_max=state.value['size_max'].value,
+                log_x=state.value['logx'].value,
+                log_y=state.value['logy'].value,
+                width=800,
+            )
+        else:
+            solara.Warning("Select x and y columns")
             
 @solara.component 
 def Page():

agent/dashboard/training.py

@@ -65,10 +65,11 @@ def force_render():
 
 @solara.component
 def FilterPanel(df):
-    solara.CrossFilterReport(df, classes=["py-2"])
-    for col in ['replica','cpu','expected_tps','previous_tps']:
-        if col in df.columns:
-            solara.CrossFilterSelect(df, configurable=False, column=col)
+    with solara.Column(gap="0px"):
+        solara.CrossFilterReport(df, classes=["py-2"])
+        for col in ['replica','cpu','expected_tps','previous_tps']:
+            if col in df.columns:
+                solara.CrossFilterSelect(df, configurable=False, column=col)
 
 @solara.component
 def ExecutePanel(df):