feat(uti): optimize offcanvas

[csit.git] / resources / tools / dash / app / pal / trending / layout.py

diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index ddc39dc..a3b3fa8 100644 (file)
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -19,12 +19,13 @@ import dash_bootstrap_components as dbc
 
 from dash import dcc
 from dash import html
-from dash import callback_context, no_update
+from dash import callback_context, no_update, ALL
 from dash import Input, Output, State
 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError
 from datetime import datetime, timedelta
 from copy import deepcopy
+from json import loads, JSONDecodeError
 
 from ..data.data import Data
 from .graphs import graph_trending, graph_hdrh_latency, \
@@ -154,6 +155,7 @@ class Layout:
                     ),
                     dcc.Loading(
                         dbc.Offcanvas(
+                            class_name="w-50",
                             id="offcanvas-metadata",
                             title="Throughput And Latency",
                             placement="end",
@@ -420,6 +422,7 @@ class Layout:
                     children=[
                         dcc.DatePickerRange(
                             id="dpr-period",
+                            className="d-flex justify-content-center",
                             min_date_allowed=\
                                 datetime.utcnow()-timedelta(days=180),
                             max_date_allowed=datetime.utcnow(),
@@ -468,13 +471,6 @@ class Layout:
                                     color="secondary",
                                     disabled=False
                                 ),
-                                dbc.Button(
-                                    id="btn-sel-display",
-                                    children="Display",
-                                    class_name="w-100",
-                                    color="secondary",
-                                    disabled=False
-                                )
                             ],
                             size="md",
                         )
@@ -581,7 +577,7 @@ class Layout:
                 row_fig_tput = [
                     dcc.Loading(
                         dcc.Graph(
-                            id="graph-tput",
+                            id={"type": "graph", "index": "tput"},
                             figure=fig_tput
                         )
                     ),
@@ -599,7 +595,7 @@ class Layout:
                 row_fig_lat = [
                     dcc.Loading(
                         dcc.Graph(
-                            id="graph-latency",
+                            id={"type": "graph", "index": "lat"},
                             figure=fig_lat
                         )
                     )
@@ -651,7 +647,6 @@ class Layout:
             Input("btn-ctrl-add", "n_clicks"),
             Input("dpr-period", "start_date"),
             Input("dpr-period", "end_date"),
-            Input("btn-sel-display", "n_clicks"),
             Input("btn-sel-remove", "n_clicks"),
             Input("btn-sel-remove-all", "n_clicks"),
         )
@@ -659,7 +654,7 @@ class Layout:
             dd_phy: str, dd_area: str, dd_test: str, cl_core: list,
             cl_core_all: list, cl_framesize: list, cl_framesize_all: list,
             cl_testtype: list, cl_testtype_all: list, btn_add: int,
-            d_start: str, d_end: str, btn_display: int, btn_remove: int,
+            d_start: str, d_end: str, btn_remove: int,
             btn_remove_all: int) -> tuple:
             """
             """
@@ -879,8 +874,13 @@ class Layout:
                     ctrl_panel.set({
                         "cl-selected-options": self._list_tests(store_sel)
                     })
-            elif trigger_id in ("btn-sel-display", "dpr-period"):
-                _ = btn_display
+                    row_fig_tput, row_fig_lat, row_btn_dwnld = \
+                    _generate_plotting_arrea(
+                        graph_trending(
+                            self.data, store_sel, self.layout, d_start, d_end
+                        )
+                    )
+            elif trigger_id == "dpr-period":
                 row_fig_tput, row_fig_lat, row_btn_dwnld = \
                     _generate_plotting_arrea(
                         graph_trending(
@@ -939,30 +939,38 @@ class Layout:
             Output("metadata-tput-lat", "children"),
             Output("metadata-hdrh-graph", "children"),
             Output("offcanvas-metadata", "is_open"),
-            Input("graph-tput", "clickData"),
-            Input("graph-latency", "clickData")
+            Input({"type": "graph", "index": ALL}, "clickData"),
+            prevent_initial_call=True
         )
-        def _show_metadata_from_graphs(
-            tput_data: dict, lat_data: dict) -> tuple:
+        def _show_metadata_from_graphs(graph_data: dict) -> tuple:
             """
             """
-            if not (tput_data or lat_data):
+            try:
+                trigger_id = loads(
+                    callback_context.triggered[0]["prop_id"].split(".")[0]
+                )["index"]
+                idx = 0 if trigger_id == "tput" else 1
+                graph_data = graph_data[idx]["points"][0]
+            except (JSONDecodeError, IndexError, KeyError, ValueError,
+                    TypeError):
                 raise PreventUpdate
 
             metadata = no_update
             graph = list()
 
-            trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0]
-            if trigger_id == "graph-tput":
+            children = [
+                dbc.ListGroupItem(
+                    [dbc.Badge(x.split(":")[0]), x.split(": ")[1]]
+                ) for x in graph_data.get("text", "").split("<br>")
+            ]
+            if trigger_id == "tput":
                 title = "Throughput"
-                txt = tput_data["points"][0]["text"].replace("<br>", "\n")
-            elif trigger_id == "graph-latency":
+            elif trigger_id == "lat":
                 title = "Latency"
-                txt = lat_data["points"][0]["text"].replace("<br>", "\n")
-                hdrh_data = lat_data["points"][0].get("customdata", None)
+                hdrh_data = graph_data.get("customdata", None)
                 if hdrh_data:
                     graph = [dbc.Card(
-                        class_name="g-0",
+                        class_name="gy-2 p-0",
                         children=[
                             dbc.CardHeader(hdrh_data.pop("name")),
                             dbc.CardBody(children=[
@@ -977,7 +985,7 @@ class Layout:
                     ]
             metadata = [
                 dbc.Card(
-                    class_name="g-0",
+                    class_name="gy-2 p-0",
                     children=[
                         dbc.CardHeader(children=[
                             dcc.Clipboard(
@@ -989,7 +997,8 @@ class Layout:
                         ]),
                         dbc.CardBody(
                             id="tput-lat-metadata",
-                            children=[txt]
+                            class_name="p-0",
+                            children=[dbc.ListGroup(children, flush=True), ]
                         )
                     ]
                 )