UTI: Improvements in detailed hover metadata information

[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 3776214..f996f5a 100644 (file)
--- 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 json
 import pandas as pd
 
 from dash import dcc
@@ -27,7 +25,8 @@ from yaml import load, FullLoader, YAMLError
 from datetime import datetime, timedelta
 
 from ..data.data import Data
-from .graphs import trending_tput
+from .graphs import graph_trending, graph_hdrh_latency, \
+    select_trending_data
 
 
 class Layout:
@@ -35,8 +34,12 @@ class Layout:
     """
 
     STYLE_HIDEN = {"display": "none"}
-    STYLE_BLOCK = {"display": "block"}
-    STYLE_INLINE ={"display": "inline-block", "width": "50%"}
+    STYLE_BLOCK = {"display": "block", "vertical-align": "top"}
+    STYLE_INLINE ={
+        "display": "inline-block",
+        "vertical-align": "top",
+        "width": "33%"
+    }
     NO_GRAPH = {"data": [], "layout": {}, "frames": []}
 
     def __init__(self, app, html_layout_file, spec_file, graph_layout_file,
@@ -190,13 +193,26 @@ class Layout:
                         html.Div(
                             id="div-tput-metadata",
                             children=[
-                                dcc.Markdown("""
-                                **Metadata**
-
-                                Click on data points in the graph.
-                                """),
+                                html.Button(
+                                    id="btn-download-data",
+                                    children=["Download Data"],
+                                    style={"display": "block"}
+                                ),
+                                dcc.Download(id="download-data"),
+                                dcc.Clipboard(
+                                    target_id="tput-metadata",
+                                    title="Copy",
+                                    style={"display": "inline-block"}
+                                ),
+                                html.Nobr(" "),
+                                html.Nobr(" "),
+                                dcc.Markdown(
+                                    children="**Throughput**",
+                                    style={"display": "inline-block"}
+                                ),
                                 html.Pre(
-                                    id="tput-metadata"
+                                    id="tput-metadata",
+                                    children="Click on data points in the graph"
                                 )
                             ],
                             style=self.STYLE_HIDEN
@@ -204,13 +220,35 @@ class Layout:
                         html.Div(
                             id="div-latency-metadata",
                             children=[
-                                dcc.Markdown("""
-                                **Metadata**
-
-                                Click on data points in the graph.
-                                """),
+                                dcc.Clipboard(
+                                    target_id="latency-metadata",
+                                    title="Copy",
+                                    style={"display": "inline-block"}
+                                ),
+                                html.Nobr(" "),
+                                html.Nobr(" "),
+                                dcc.Markdown(
+                                    children="**Latency**",
+                                    style={"display": "inline-block"}
+                                ),
                                 html.Pre(
-                                    id="latency-metadata"
+                                    id="latency-metadata",
+                                    children="Click on data points in the graph"
+                                )
+                            ],
+                            style=self.STYLE_HIDEN
+                        ),
+                        html.Div(
+                            id="div-latency-hdrh",
+                            children=[
+                                dcc.Loading(
+                                    id="loading-hdrh-latency-graph",
+                                    children=[
+                                        dcc.Graph(
+                                            id="graph-latency-hdrh"
+                                        )
+                                    ],
+                                    type="circle"
                                 )
                             ],
                             style=self.STYLE_HIDEN
@@ -615,7 +653,7 @@ class Layout:
                 })
 
             elif trigger_id in ("btn-sel-display", "dpr-period"):
-                fig_tput, fig_lat = trending_tput(
+                fig_tput, fig_lat = graph_trending(
                     self.data, store_sel, self.layout, d_start, d_end
                 )
                 output.set_values({
@@ -641,7 +679,7 @@ class Layout:
                             new_store_sel.append(item)
                     store_sel = new_store_sel
                 if store_sel:
-                    fig_tput, fig_lat = trending_tput(
+                    fig_tput, fig_lat = graph_trending(
                         self.data, store_sel, self.layout, d_start, d_end
                     )
                     output.set_values({
@@ -679,15 +717,54 @@ class Layout:
             Input("graph-tput", "clickData")
         )
         def _show_tput_metadata(hover_data):
+            """
+            """
             if not hover_data:
                 raise PreventUpdate
-            return json.dumps(hover_data, indent=2)
+
+            return hover_data["points"][0]["text"].replace("<br>", "\n"),
 
         @app.callback(
             Output("latency-metadata", "children"),
+            Output("graph-latency-hdrh", "figure"),
+            Output("div-latency-hdrh", "style"),
             Input("graph-latency", "clickData")
         )
         def _show_latency_metadata(hover_data):
+            """
+            """
             if not hover_data:
                 raise PreventUpdate
-            return json.dumps(hover_data, indent=2)
+
+            graph = no_update
+            hdrh_data = hover_data["points"][0].get("customdata", None)
+            if hdrh_data:
+                graph = graph_hdrh_latency(hdrh_data, self.layout)
+
+            return (
+                hover_data["points"][0]["text"].replace("<br>", "\n"),
+                graph,
+                self.STYLE_INLINE if graph else self.STYLE_HIDEN
+            )
+
+        @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")