feat(uti): Add offcanvas to stats

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

2 files changed, 108 insertions, 27 deletions

diff --git a/resources/tools/dash/app/pal/stats/layout.py b/resources/tools/dash/app/pal/stats/layout.py
index 18f7b69612..0ae83cf3a4 100644
--- a/resources/tools/dash/app/pal/stats/layout.py
+++ b/resources/tools/dash/app/pal/stats/layout.py
@@ -19,6 +19,7 @@ import dash_bootstrap_components as dbc
 
 from dash import dcc
 from dash import html
+from dash import callback_context, no_update
 from dash import Input, Output
 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError
@@ -48,7 +49,7 @@ class Layout:
         data_stats, data_mrr, data_ndrpdr = Data(
             data_spec_file=self._data_spec_file,
             debug=True
-        ).read_stats(days=180)
+        ).read_stats()
 
         df_tst_info = pd.concat([data_mrr, data_ndrpdr], ignore_index=True)
 
@@ -157,16 +158,22 @@ class Layout:
                             self._add_navbar(),
                         ]
                     ),
+                    dcc.Loading(
+                        dbc.Offcanvas(
+                            class_name="w-50",
+                            id="offcanvas-metadata",
+                            title="Detailed Information",
+                            placement="end",
+                            is_open=False,
+                            children=[
+                                dbc.Row(id="row-metadata")
+                            ]
+                        )
+                    ),
                     dbc.Row(
                         id="row-main",
                         class_name="g-0",
                         children=[
-                            dcc.Store(
-                                id="selected-tests"
-                            ),
-                            dcc.Store(
-                                id="control-panel"
-                            ),
                             self._add_ctrl_col(),
                             self._add_plotting_col(),
                         ]
@@ -255,7 +262,9 @@ class Layout:
                         dcc.Loading(children=[
                             dbc.Button(
                                 id="btn-download-data",
-                                children=["Download Data"]
+                                children=["Download Data"],
+                                class_name="me-1",
+                                color="info"
                             ),
                             dcc.Download(id="download-data")
                         ])
@@ -270,25 +279,37 @@ class Layout:
         """
         return dbc.Row(
             id="row-ctrl-panel",
-            class_name="g-0 p-2",
+            class_name="g-0",
             children=[
-                dbc.Label("Choose the Trending Job"),
-                dbc.RadioItems(
-                    id="ri_job",
-                    value=self.jobs[0],
-                    options=[{"label": i, "value": i} for i in self.jobs]
+                dbc.Row(
+                    class_name="g-0 p-2",
+                    children=[
+                        dbc.Label("Choose the Trending Job"),
+                        dbc.RadioItems(
+                            id="ri_job",
+                            value=self.jobs[0],
+                            options=[
+                                {"label": i, "value": i} for i in self.jobs
+                            ]
+                        )
+                    ]
                 ),
-                dbc.Label("Choose the Time Period"),
-                dcc.DatePickerRange(
-                    id="dpr-period",
-                    className="d-flex justify-content-center",
-                    min_date_allowed=\
-                        datetime.utcnow()-timedelta(days=180),
-                    max_date_allowed=datetime.utcnow(),
-                    initial_visible_month=datetime.utcnow(),
-                    start_date=datetime.utcnow() - timedelta(days=180),
-                    end_date=datetime.utcnow(),
-                    display_format="D MMMM YY"
+                dbc.Row(
+                    class_name="g-0 p-2",
+                    children=[
+                        dbc.Label("Choose the Time Period"),
+                        dcc.DatePickerRange(
+                            id="dpr-period",
+                            className="d-flex justify-content-center",
+                            min_date_allowed=\
+                                datetime.utcnow()-timedelta(days=180),
+                            max_date_allowed=datetime.utcnow(),
+                            initial_visible_month=datetime.utcnow(),
+                            start_date=datetime.utcnow() - timedelta(days=180),
+                            end_date=datetime.utcnow(),
+                            display_format="D MMMM YY"
+                        )
+                    ]
                 )
             ]
         )
@@ -329,3 +350,63 @@ class Layout:
                 raise PreventUpdate
 
             return dcc.send_data_frame(self.data.to_csv, "statistics.csv")
+
+        @app.callback(
+            Output("row-metadata", "children"),
+            Output("offcanvas-metadata", "is_open"),
+            Input("graph-passed", "clickData"),
+            Input("graph-duration", "clickData"),
+            prevent_initial_call=True
+        )
+        def _show_metadata_from_graphs(
+                passed_data: dict, duration_data: dict) -> tuple:
+            """
+            """
+
+            if not (passed_data or duration_data):
+                raise PreventUpdate
+
+            metadata = no_update
+            open_canvas = False
+            title = "Job Statistics"
+            trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0]
+            if trigger_id == "graph-passed":
+                graph_data = passed_data["points"][0].get("hovertext", "")
+            elif trigger_id == "graph-duration":
+                graph_data = duration_data["points"][0].get("text", "")
+            if graph_data:
+                metadata = [
+                    dbc.Card(
+                        class_name="gy-2 p-0",
+                        children=[
+                            dbc.CardHeader(children=[
+                                dcc.Clipboard(
+                                    target_id="metadata",
+                                    title="Copy",
+                                    style={"display": "inline-block"}
+                                ),
+                                title
+                            ]),
+                            dbc.CardBody(
+                                id="metadata",
+                                class_name="p-0",
+                                children=[dbc.ListGroup(
+                                    children=[
+                                        dbc.ListGroupItem(
+                                            [
+                                                dbc.Badge(
+                                                    x.split(":")[0]
+                                                ),
+                                                x.split(": ")[1]
+                                            ]
+                                        ) for x in graph_data.split("<br>")
+                                    ],
+                                    flush=True),
+                                ]
+                            )
+                        ]
+                    )
+                ]
+                open_canvas = True
+
+            return metadata, open_canvas
diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index ac866cfe40..fa5f8218ad 100644
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -68,12 +68,12 @@ class Layout:
         data_mrr = Data(
             data_spec_file=self._data_spec_file,
             debug=True
-        ).read_trending_mrr(days=180)
+        ).read_trending_mrr()
 
         data_ndrpdr = Data(
             data_spec_file=self._data_spec_file,
             debug=True
-        ).read_trending_ndrpdr(days=180)
+        ).read_trending_ndrpdr()
 
         self._data = pd.concat([data_mrr, data_ndrpdr], ignore_index=True)