From e972e67afac3ab3eb785668d01d3bdf1833eade9 Mon Sep 17 00:00:00 2001
From: Tibor Frank <tifrank@cisco.com>
Date: Thu, 31 Mar 2022 08:43:15 +0200
Subject: [PATCH] UTI: PoC - Make detailed hover information copyable

Change-Id: Ib313d6289412b921caa528c3984a640c3e4862eb
Signed-off-by: Tibor Frank <tifrank@cisco.com>
---
 resources/tools/dash/app/pal/trending/graphs.py   |  2 +-
 resources/tools/dash/app/pal/trending/layout.py   | 22 ++++++++++++++++++++++
 resources/tools/dash/app/pal/trending/layout.yaml |  4 ++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/resources/tools/dash/app/pal/trending/graphs.py b/resources/tools/dash/app/pal/trending/graphs.py
index da528a9a08..8cb96ea3b5 100644
--- a/resources/tools/dash/app/pal/trending/graphs.py
+++ b/resources/tools/dash/app/pal/trending/graphs.py
@@ -218,7 +218,7 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
                     anomaly_x.append(x_axis[idx])
                     anomaly_y.append(trend_avg[idx])
                     anomaly_color.append(_ANOMALY_COLOR[anomaly])
-            anomaly_color.append([0.0, 1.0])
+            anomaly_color.append([0.0, 0.5, 1.0])
             traces.append(
                 go.Scatter(
                     x=anomaly_x,
diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index 6369a027cf..6be71ace15 100644
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -15,6 +15,7 @@
 """
 
 
+import json
 import pandas as pd
 
 from dash import dcc
@@ -173,6 +174,18 @@ class Layout:
                         )
                     ],
                     type="circle"
+                ),
+                html.Div(
+                    children=[
+                        dcc.Markdown("""
+                        **Metadata**
+
+                        Click on data points in the graph.
+                        """),
+                        html.Pre(
+                            id="hover-metadata"
+                        )
+                    ]
                 )
             ],
             style={
@@ -569,3 +582,12 @@ class Layout:
                     }
                     return (no_update, store_sel, _list_tests(),
                         no_update, no_update, no_update, style)
+
+        @app.callback(
+            Output("hover-metadata", "children"),
+            Input("graph", "clickData")
+        )
+        def _show_metadata(hover_data):
+            if not hover_data:
+                raise PreventUpdate
+            return json.dumps(hover_data, indent=2)
diff --git a/resources/tools/dash/app/pal/trending/layout.yaml b/resources/tools/dash/app/pal/trending/layout.yaml
index be69d83aa1..143ade1978 100644
--- a/resources/tools/dash/app/pal/trending/layout.yaml
+++ b/resources/tools/dash/app/pal/trending/layout.yaml
@@ -5,7 +5,7 @@ plot-trending:
   autosize: True
   showlegend: True
   # width: 1100
-  height: 800
+  height: 600
   yaxis:
     showticklabels: True
     tickformat: ".3s"
@@ -67,7 +67,7 @@ plot-trending:
     l: 70
   legend:
     orientation: "h"
-    y: -0.2
+    y: -0.18
     xanchor: "auto"
     traceorder: "normal"
     bordercolor: "rgb(238, 238, 238)"
-- 
2.16.6