feat(uti): Add offcanvas

Change-Id: Ibb83c43162db9c90f816faa2572187a69bb8a0b3
Signed-off-by: Tibor Frank <tifrank@cisco.com>

1 files changed, 108 insertions, 155 deletions

diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index 0cf1a9a942..9f246d8e73 100644
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -14,8 +14,6 @@
 """Plotly Dash HTML layout override.
 """
 
-import logging
-
 import pandas as pd
 
 from dash import dcc
@@ -36,12 +34,6 @@ class Layout:
     """
     """
 
-    STYLE_HIDEN = {"display": "none"}
-    STYLE_BLOCK = {"display": "block", "vertical-align": "top"}
-    STYLE_INLINE ={
-        "display": "inline-block",
-        "vertical-align": "top"
-    }
     NO_GRAPH = {"data": [], "layout": {}, "frames": []}
 
     def __init__(self, app, html_layout_file, spec_file, graph_layout_file,
@@ -140,14 +132,26 @@ class Layout:
                 children=[
                     dbc.Row(
                         id="row-navbar",
-                        className="g-0",
+                        class_name="g-0",
                         children=[
                             self._add_navbar(),
                         ]
                     ),
+                    dcc.Loading(
+                        dbc.Offcanvas(
+                            id="offcanvas-metadata",
+                            title="Throughput And Latency",
+                            placement="end",
+                            is_open=False,
+                            children=[
+                                dbc.Row(id="metadata-tput-lat"),
+                                dbc.Row(id="metadata-hdrh-graph"),
+                            ]
+                        )
+                    ),
                     dbc.Row(
                         id="row-main",
-                        className="g-0",
+                        class_name="g-0 p-2",
                         children=[
                             dcc.Store(
                                 id="selected-tests"
@@ -155,20 +159,6 @@ class Layout:
                             self._add_ctrl_col(),
                             self._add_plotting_col(),
                         ]
-                    ),
-                    dbc.Offcanvas(
-                        id="offcanvas-metadata",
-                        title="Throughput And Latency",
-                        placement="end",
-                        is_open=True,
-                        children=[
-                            html.P(
-                                id="metadata",
-                                children=[
-                                    "This is the placeholder for metadata."
-                                ],
-                            )
-                        ]
                     )
                 ]
             )
@@ -202,8 +192,7 @@ class Layout:
             brand="Dashboard",
             brand_href="/",
             brand_external_link=True,
-            #color="dark",
-            #dark=True,
+            class_name="p-2",
             fluid=True,
         )
 
@@ -226,7 +215,7 @@ class Layout:
             children=[
                 dbc.Row(  # Throughput
                     id="row-graph-tput",
-                    className="g-0",
+                    class_name="g-0 p-2",
                     children=[
                         dcc.Loading(
                             dcc.Graph(id="graph-tput")
@@ -235,7 +224,7 @@ class Layout:
                 ),
                 dbc.Row(  # Latency
                     id="row-graph-lat",
-                    className="g-0",
+                    class_name="g-0 p-2",
                     children=[
                         dcc.Loading(
                             dcc.Graph(id="graph-latency")
@@ -244,7 +233,7 @@ class Layout:
                 ),
                 dbc.Row(  # Download
                     id="div-download",
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dcc.Loading(children=[
                             dbc.Button(
@@ -264,7 +253,7 @@ class Layout:
         """
         return dbc.Row(
             id="row-ctrl-panel",
-            className="g-0",
+            class_name="g-0",
             children=[
                 dbc.Label("Physical Test Bed Topology, NIC and Driver"),
                 dcc.Dropdown(
@@ -294,7 +283,7 @@ class Layout:
                 ),
                 dbc.Row(
                     id="row-ctrl-core",
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dbc.Label("Number of Cores"),
                         dbc.Col([
@@ -316,7 +305,7 @@ class Layout:
                 ),
                 dbc.Row(
                     id="row-ctrl-framesize",
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dbc.Label("Frame Size"),
                         dbc.Col([
@@ -338,7 +327,7 @@ class Layout:
                 ),
                 dbc.Row(
                     id="row-ctrl-testtype",
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dbc.Label("Test Type"),
                         dbc.Col([
@@ -359,7 +348,7 @@ class Layout:
                     ]
                 ),
                 dbc.Row(
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dbc.Button(
                             id="btn-ctrl-add",
@@ -368,7 +357,7 @@ class Layout:
                     ]
                 ),
                 dbc.Row(
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dcc.DatePickerRange(
                             id="dpr-period",
@@ -390,10 +379,10 @@ class Layout:
         """
         return dbc.Row(
             id="div-ctrl-shown",
-            className="g-0",
+            class_name="g-0",
             children=[
                 dbc.Row(
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dbc.Label("Selected tests"),
                         dbc.Checklist(
@@ -404,7 +393,7 @@ class Layout:
                     ]
                 ),
                 dbc.Row(
-                    className="g-0",
+                    class_name="g-0",
                     children=[
                         dbc.ButtonGroup(
                             [
@@ -428,7 +417,7 @@ class Layout:
                                 )
                             ],
                             size="md",
-                            className="me-1",
+                            class_name="me-1",
                         ),
                     ]
                 )
@@ -487,13 +476,9 @@ class Layout:
             return options, disable
 
         @app.callback(
-            # Output("row-ctrl-core", "style"),
             Output("cl-ctrl-core", "options"),
-            # Output("row-ctrl-framesize", "style"),
             Output("cl-ctrl-framesize", "options"),
-            # Output("row-ctrl-testtype", "style"),
             Output("cl-ctrl-testtype", "options"),
-            # Output("btn-ctrl-add", "disabled"),
             State("dd-ctrl-phy", "value"),
             State("dd-ctrl-area", "value"),
             Input("dd-ctrl-test", "value"),
@@ -505,39 +490,27 @@ class Layout:
             if test is None:
                 raise PreventUpdate
 
-            # core_style = {"display": "none"}
             core_opts = []
-            # framesize_style = {"display": "none"}
             framesize_opts = []
-            # testtype_style = {"display": "none"}
             testtype_opts = []
-            # add_disabled = True
             if phy and area and test:
-                # core_style = {"display": "block"}
                 core_opts = [
                     {"label": v, "value": v}
                         for v in self.spec_tbs[phy][area]["core"]
                 ]
-                # framesize_style = {"display": "block"}
                 framesize_opts = [
                     {"label": v, "value": v}
                         for v in self.spec_tbs[phy][area]["frame-size"]
                 ]
-                # testtype_style = {"display": "block"}
                 testtype_opts = [
                     {"label": v, "value": v}
                         for v in self.spec_tbs[phy][area]["test-type"]
                 ]
-                # add_disabled = False
 
             return (
-                # core_style,
                 core_opts,
-                # framesize_style,
                 framesize_opts,
-                # testtype_style,
                 testtype_opts,
-                # add_disabled
             )
 
         def _sync_checklists(opt, sel, all, id):
@@ -585,12 +558,8 @@ class Layout:
             return _sync_checklists(opt, sel, all, "cl-ctrl-testtype")
 
         @app.callback(
-            # Output("graph-tput", "figure"),
-            # Output("graph-latency", "figure"),
-            # Output("div-tput", "style"),
-            # Output("div-latency", "style"),
-            # Output("div-lat-metadata", "style"),
-            # Output("div-download", "style"),
+            Output("graph-tput", "figure"),
+            Output("graph-latency", "figure"),
             Output("selected-tests", "data"),  # Store
             Output("cl-selected", "options"),  # User selection
             Output("dd-ctrl-phy", "value"),
@@ -634,12 +603,8 @@ class Layout:
             class RetunValue:
                 def __init__(self) -> None:
                     self._output = {
-                        # "graph-tput-figure": no_update,
-                        # "graph-lat-figure": no_update,
-                        # "div-tput-style": no_update,
-                        # "div-latency-style": no_update,
-                        # "div-lat-metadata-style": no_update,
-                        # "div-download-style": no_update,
+                        "graph-tput-figure": no_update,
+                        "graph-lat-figure": no_update,
                         "selected-tests-data": no_update,
                         "cl-selected-options": no_update,
                         "dd-ctrl-phy-value": no_update,
@@ -704,22 +669,16 @@ class Layout:
                 fig_tput, fig_lat = graph_trending(
                     self.data, store_sel, self.layout, d_start, d_end
                 )
-                # output.set_values({
-                #     "graph-tput-figure": \
-                #         fig_tput if fig_tput else self.NO_GRAPH,
-                #     "graph-lat-figure": \
-                #         fig_lat if fig_lat else self.NO_GRAPH,
-                #     "div-tput-style": \
-                #         self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
-                #     "div-latency-style": \
-                #         self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
-                #     "div-lat-metadata-style": \
-                #         self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
-                #     "div-download-style": \
-                #         self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
-                # })
+                output.set_values({
+                    "graph-tput-figure": \
+                        fig_tput if fig_tput else self.NO_GRAPH,
+                    "graph-lat-figure": \
+                        fig_lat if fig_lat else self.NO_GRAPH,
+                })
             elif trigger_id == "btn-sel-remove-all":
                 output.set_values({
+                    "graph-tput-figure": self.NO_GRAPH,
+                    "graph-lat-figure": self.NO_GRAPH,
                     "selected-tests-data": list(),
                     "cl-selected-options": list()
                 })
@@ -735,88 +694,82 @@ class Layout:
                         self.data, store_sel, self.layout, d_start, d_end
                     )
                     output.set_values({
-                        # "graph-tput-figure": \
-                        #     fig_tput if fig_tput else self.NO_GRAPH,
-                        # "graph-lat-figure": \
-                        #     fig_lat if fig_lat else self.NO_GRAPH,
-                        # "div-tput-style": \
-                        #     self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
-                        # "div-latency-style": \
-                        #     self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
-                        # "div-lat-metadata-style": \
-                        #     self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
-                        # "div-download-style": \
-                        #     self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
+                        "graph-tput-figure": \
+                            fig_tput if fig_tput else self.NO_GRAPH,
+                        "graph-lat-figure": \
+                            fig_lat if fig_lat else self.NO_GRAPH,
                         "selected-tests-data": store_sel,
                         "cl-selected-options": _list_tests()
                     })
                 else:
                     output.set_values({
-                        # "graph-tput-figure": self.NO_GRAPH,
-                        # "graph-lat-figure": self.NO_GRAPH,
-                        # "div-tput-style": self.STYLE_HIDEN,
-                        # "div-latency-style": self.STYLE_HIDEN,
-                        # "div-lat-metadata-style": self.STYLE_HIDEN,
-                        # "div-download-style": self.STYLE_HIDEN,
+                        "graph-tput-figure": self.NO_GRAPH,
+                        "graph-lat-figure": self.NO_GRAPH,
                         "selected-tests-data": store_sel,
                         "cl-selected-options": _list_tests()
                     })
 
             return output.value()
 
-        # @app.callback(
-        #     Output("tput-metadata", "children"),
-        #     Input("graph-tput", "clickData")
-        # )
-        # def _show_tput_metadata(hover_data):
-        #     """
-        #     """
-        #     if not hover_data:
-        #         raise PreventUpdate
-
-        #     return hover_data["points"][0]["text"].replace("<br>", "\n")
-
-        # @app.callback(
-        #     Output("graph-latency-hdrh", "figure"),
-        #     Output("graph-latency-hdrh", "style"),
-        #     Output("lat-metadata", "children"),
-        #     Input("graph-latency", "clickData")
-        # )
-        # def _show_latency_hdhr(hover_data):
-        #     """
-        #     """
-        #     if not hover_data:
-        #         raise PreventUpdate
-
-        #     graph = no_update
-        #     hdrh_data = hover_data["points"][0].get("customdata", None)
-        #     if hdrh_data:
-        #         graph = graph_hdrh_latency(hdrh_data, self.layout)
-
-        #     return (
-        #         graph,
-        #         self.STYLE_INLINE,
-        #         hover_data["points"][0]["text"].replace("<br>", "\n")
-        #     )
-
-        # @app.callback(
-        #     Output("download-data", "data"),
-        #     State("selected-tests", "data"),
-        #     Input("btn-download-data", "n_clicks"),
-        #     prevent_initial_call=True
-        # )
-        # def _download_data(store_sel, n_clicks):
-        #     """
-        #     """
-
-        #     if not n_clicks:
-        #         raise PreventUpdate
-
-        #     df = pd.DataFrame()
-        #     for itm in store_sel:
-        #         sel_data = select_trending_data(self.data, itm)
-        #         if sel_data is None:
-        #             continue
-        #         df = pd.concat([df, sel_data], ignore_index=True)
-
-        #     return dcc.send_data_frame(df.to_csv, "trending_data.csv")
+        @app.callback(
+            Output("metadata-tput-lat", "children"),
+            Output("metadata-hdrh-graph", "children"),
+            Output("offcanvas-metadata", "is_open"),
+            Input("graph-tput", "clickData"),
+            Input("graph-latency", "clickData")
+        )
+        def _show_tput_metadata(tput_data, lat_data) -> dbc.Card:
+            """
+            """
+            if not (tput_data or lat_data):
+                raise PreventUpdate
+
+            metadata = no_update
+            graph = list()
+
+            trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0]
+            if trigger_id == "graph-tput":
+                title = "Throughput"
+                txt = tput_data["points"][0]["text"].replace("<br>", "\n")
+            elif trigger_id == "graph-latency":
+                title = "Latency"
+                txt = lat_data["points"][0]["text"].replace("<br>", "\n")
+                hdrh_data = lat_data["points"][0].get("customdata", None)
+                if hdrh_data:
+                    graph = [dcc.Graph(
+                        id="hdrh-latency-graph",
+                        figure=graph_hdrh_latency(hdrh_data, self.layout)
+                    ), ]
+
+            metadata = [
+                dbc.Card(
+                    children=[
+                        dbc.CardHeader(title),
+                        dbc.CardBody(children=[txt])
+                    ]
+                )
+            ]
+
+            return metadata, graph, True
+
+        @app.callback(
+            Output("download-data", "data"),
+            State("selected-tests", "data"),
+            Input("btn-download-data", "n_clicks"),
+            prevent_initial_call=True
+        )
+        def _download_data(store_sel, n_clicks):
+            """
+            """
+
+            if not n_clicks:
+                raise PreventUpdate
+
+            df = pd.DataFrame()
+            for itm in store_sel:
+                sel_data = select_trending_data(self.data, itm)
+                if sel_data is None:
+                    continue
+                df = pd.concat([df, sel_data], ignore_index=True)
+
+            return dcc.send_data_frame(df.to_csv, "trending_data.csv")