aboutsummaryrefslogtreecommitdiffstats
path: root/resources/tools/dash
diff options
context:
space:
mode:
authorTibor Frank <tifrank@cisco.com>2022-04-08 14:09:08 +0200
committerTibor Frank <tifrank@cisco.com>2022-04-12 08:18:08 +0000
commit9c10745ce84d74ff5752aa3a19508cc731bba8b9 (patch)
tree17dc35f3aca98f7f1b13caa02aa00b014f496986 /resources/tools/dash
parent0ac6c584b2ff05aa123080c20f7b8071d4a28b1b (diff)
UTI: UX Styling
Change-Id: I54e3992f81db04c7c978b2157dafd067de917664 Signed-off-by: Tibor Frank <tifrank@cisco.com>
Diffstat (limited to 'resources/tools/dash')
-rw-r--r--resources/tools/dash/app/pal/data/data.py2
-rw-r--r--resources/tools/dash/app/pal/templates/index.jinja24
-rw-r--r--resources/tools/dash/app/pal/trending/layout.py208
-rw-r--r--resources/tools/dash/app/pal/trending/layout.yaml111
4 files changed, 165 insertions, 160 deletions
diff --git a/resources/tools/dash/app/pal/data/data.py b/resources/tools/dash/app/pal/data/data.py
index 9ce09e7f8b..859c7d3458 100644
--- a/resources/tools/dash/app/pal/data/data.py
+++ b/resources/tools/dash/app/pal/data/data.py
@@ -135,8 +135,6 @@ class Data:
u"\n"
f"Creation of dataframe {path} took: {time() - start}"
u"\n"
- f"{df}"
- u"\n"
)
except NoFilesFound as err:
logging.error(f"No parquets found.\n{err}")
diff --git a/resources/tools/dash/app/pal/templates/index.jinja2 b/resources/tools/dash/app/pal/templates/index.jinja2
index bd53346065..5d936631c4 100644
--- a/resources/tools/dash/app/pal/templates/index.jinja2
+++ b/resources/tools/dash/app/pal/templates/index.jinja2
@@ -10,10 +10,6 @@
<span>Trending</span>
<i class="fas fa-arrow-right"></i>
</a>
- <a href="/report/" class="dash-link">
- <span>Report</span>
- <i class="fas fa-arrow-right"></i>
- </a>
</div>
</div>
{% endblock %}
diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index f996f5a005..afa459bf76 100644
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -19,7 +19,7 @@ import pandas as pd
from dash import dcc
from dash import html
from dash import callback_context, no_update
-from dash import Input, Output, State, callback
+from dash import Input, Output, State
from dash.exceptions import PreventUpdate
from yaml import load, FullLoader, YAMLError
from datetime import datetime, timedelta
@@ -37,8 +37,7 @@ class Layout:
STYLE_BLOCK = {"display": "block", "vertical-align": "top"}
STYLE_INLINE ={
"display": "inline-block",
- "vertical-align": "top",
- "width": "33%"
+ "vertical-align": "top"
}
NO_GRAPH = {"data": [], "layout": {}, "frames": []}
@@ -163,8 +162,7 @@ class Layout:
],
style={
"display": "inline-block",
- "width": "18%",
- "padding": "5px"
+ "width": "20%"
}
)
@@ -174,31 +172,19 @@ class Layout:
return html.Div(
id="div-plotting-area",
children=[
- dcc.Loading(
- id="loading-graph",
- children=[
- dcc.Graph(
- id="graph-tput",
- style=self.STYLE_HIDEN
- ),
- dcc.Graph(
- id="graph-latency",
- style=self.STYLE_HIDEN
- )
- ],
- type="circle"
- ),
- html.Div(
- children=[
- html.Div(
- id="div-tput-metadata",
- children=[
- html.Button(
- id="btn-download-data",
- children=["Download Data"],
- style={"display": "block"}
- ),
- dcc.Download(id="download-data"),
+ html.Table(children=[
+ html.Tr(
+ id="div-tput",
+ style=self.STYLE_HIDEN,
+ children=[
+ html.Td(children=[
+ dcc.Loading(
+ dcc.Graph(
+ id="graph-tput"
+ ),
+ )
+ ], style={"width": "80%"}),
+ html.Td(children=[
dcc.Clipboard(
target_id="tput-metadata",
title="Copy",
@@ -212,55 +198,81 @@ class Layout:
),
html.Pre(
id="tput-metadata",
- children="Click on data points in the graph"
- )
- ],
- style=self.STYLE_HIDEN
- ),
- html.Div(
- id="div-latency-metadata",
- children=[
- dcc.Clipboard(
- target_id="latency-metadata",
- title="Copy",
- style={"display": "inline-block"}
- ),
- html.Nobr(" "),
- html.Nobr(" "),
- dcc.Markdown(
- children="**Latency**",
- style={"display": "inline-block"}
+ children="Click on data point in the graph"
),
- html.Pre(
- id="latency-metadata",
- children="Click on data points in the graph"
+ html.Div(
+ id="div-lat-metadata",
+ style=self.STYLE_HIDEN,
+ children=[
+ dcc.Clipboard(
+ target_id="lat-metadata",
+ title="Copy",
+ style={"display": "inline-block"}
+ ),
+ html.Nobr(" "),
+ html.Nobr(" "),
+ dcc.Markdown(
+ children="**Latency**",
+ style={"display": "inline-block"}
+ ),
+ html.Pre(
+ id="lat-metadata",
+ children= \
+ "Click on data point in the graph"
+ )
+ ]
)
- ],
- style=self.STYLE_HIDEN
- ),
- html.Div(
- id="div-latency-hdrh",
- children=[
+ ], style={"width": "20%"}),
+ ]
+ ),
+ html.Tr(
+ id="div-latency",
+ style=self.STYLE_HIDEN,
+ children=[
+ html.Td(children=[
+ dcc.Loading(
+ dcc.Graph(
+ id="graph-latency"
+ )
+ )
+ ], style={"width": "80%"}),
+ html.Td(children=[
+ dcc.Loading(
+ dcc.Graph(
+ id="graph-latency-hdrh",
+ style=self.STYLE_INLINE,
+ figure=self.NO_GRAPH
+ )
+ )
+ ], style={"width": "20%"}),
+ ]
+ ),
+ html.Tr(
+ id="div-download",
+ style=self.STYLE_HIDEN,
+ children=[
+ html.Td(children=[
dcc.Loading(
- id="loading-hdrh-latency-graph",
children=[
- dcc.Graph(
- id="graph-latency-hdrh"
- )
- ],
- type="circle"
+ html.Button(
+ id="btn-download-data",
+ children=["Download Data"]
+ ),
+ dcc.Download(id="download-data")
+ ]
)
- ],
- style=self.STYLE_HIDEN
- )
- ]
- )
+ ], style={"width": "80%"}),
+ html.Td(children=[
+ html.Nobr(" ")
+ ], style={"width": "20%"}),
+ ]
+ ),
+ ]),
],
style={
"vertical-align": "top",
"display": "inline-block",
- "width": "80%",
- "padding": "5px"
+ "width": "80%"
}
)
@@ -540,11 +552,11 @@ class Layout:
@app.callback(
Output("graph-tput", "figure"),
- Output("graph-tput", "style"),
- Output("div-tput-metadata", "style"),
Output("graph-latency", "figure"),
- Output("graph-latency", "style"),
- Output("div-latency-metadata", "style"),
+ Output("div-tput", "style"),
+ Output("div-latency", "style"),
+ Output("div-lat-metadata", "style"),
+ Output("div-download", "style"),
Output("selected-tests", "data"), # Store
Output("cl-selected", "options"), # User selection
Output("dd-ctrl-phy", "value"),
@@ -587,11 +599,11 @@ class Layout:
def __init__(self) -> None:
self._output = {
"graph-tput-figure": no_update,
- "graph-tput-style": no_update,
- "div-tput-metadata-style": no_update,
"graph-lat-figure": no_update,
- "graph-lat-style": no_update,
+ "div-tput-style": no_update,
+ "div-latency-style": no_update,
"div-lat-metadata-style": no_update,
+ "div-download-style": no_update,
"selected-tests-data": no_update,
"cl-selected-options": no_update,
"dd-ctrl-phy-value": no_update,
@@ -659,16 +671,16 @@ class Layout:
output.set_values({
"graph-tput-figure": \
fig_tput if fig_tput else self.NO_GRAPH,
- "graph-tput-style": \
- self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
- "div-tput-metadata-style": \
- self.STYLE_INLINE if fig_tput else self.STYLE_HIDEN,
"graph-lat-figure": \
fig_lat if fig_lat else self.NO_GRAPH,
- "graph-lat-style": \
+ "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_INLINE if fig_lat else self.STYLE_HIDEN
+ self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
+ "div-download-style": \
+ self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
})
elif trigger_id == "btn-sel-remove":
@@ -685,27 +697,27 @@ class Layout:
output.set_values({
"graph-tput-figure": \
fig_tput if fig_tput else self.NO_GRAPH,
- "graph-tput-style": \
- self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
- "div-tput-metadata-style": \
- self.STYLE_INLINE if fig_tput else self.STYLE_HIDEN,
"graph-lat-figure": \
fig_lat if fig_lat else self.NO_GRAPH,
- "graph-lat-style": \
+ "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_INLINE if fig_lat else self.STYLE_HIDEN,
+ self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
+ "div-download-style": \
+ self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
"selected-tests-data": store_sel,
"cl-selected-options": _list_tests()
})
else:
output.set_values({
"graph-tput-figure": self.NO_GRAPH,
- "graph-tput-style": self.STYLE_HIDEN,
- "div-tput-metadata-style": self.STYLE_HIDEN,
"graph-lat-figure": self.NO_GRAPH,
- "graph-lat-style": self.STYLE_HIDEN,
+ "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,
"selected-tests-data": store_sel,
"cl-selected-options": _list_tests()
})
@@ -722,15 +734,15 @@ class Layout:
if not hover_data:
raise PreventUpdate
- return hover_data["points"][0]["text"].replace("<br>", "\n"),
+ 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"),
+ Output("graph-latency-hdrh", "style"),
+ Output("lat-metadata", "children"),
Input("graph-latency", "clickData")
)
- def _show_latency_metadata(hover_data):
+ def _show_latency_hdhr(hover_data):
"""
"""
if not hover_data:
@@ -742,9 +754,9 @@ class Layout:
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
+ self.STYLE_INLINE,
+ hover_data["points"][0]["text"].replace("<br>", "\n")
)
@app.callback(
diff --git a/resources/tools/dash/app/pal/trending/layout.yaml b/resources/tools/dash/app/pal/trending/layout.yaml
index 27294a3551..9645b744c0 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-tput:
autosize: True
showlegend: True
# width: 1100
- height: 400
+ #height: 400
yaxis:
showticklabels: True
tickformat: ".3s"
@@ -83,7 +83,7 @@ plot-trending-lat:
autosize: True
showlegend: True
# width: 1100
- height: 400
+ #height: 400
yaxis:
showticklabels: True
tickformat: ".3s"
@@ -155,57 +155,56 @@ plot-trending-lat:
namelength: -1
plot-hdrh-latency:
- title:
- text: "Latency by Percentile Distribution"
- xanchor: "center"
- x: 0.5
- font:
- size: 10
- showlegend: True
- legend:
- traceorder: "normal"
- orientation: "h"
- # font:
- # size: 16
- xanchor: "left"
- yanchor: "top"
- x: 0
- y: -0.25
- bgcolor: "rgba(255, 255, 255, 0)"
- bordercolor: "rgba(255, 255, 255, 0)"
- xaxis:
- type: "log"
- title: "Percentile [%]"
- # titlefont:
- # size: 14
- autorange: False
- fixedrange: True
- gridcolor: "rgb(230, 230, 230)"
- linecolor: "rgb(220, 220, 220)"
- linewidth: 1
- showgrid: True
- showline: True
- showticklabels: True
- tickcolor: "rgb(220, 220, 220)"
- tickvals: [1, 2, 1e1, 20, 1e2, 1e3, 1e4, 1e5, 1e6]
- ticktext: [0, 50, 90, 95, 99, 99.9, 99.99, 99.999, 99.9999]
- # tickfont:
- # size: 14
- yaxis:
- title: "One-Way Latency per Direction [uSec]"
- # titlefont:
- # size: 14
- gridcolor: "rgb(230, 230, 230)"
- linecolor: "rgb(220, 220, 220)"
- linewidth: 1
- showgrid: True
- showline: True
- showticklabels: True
- tickcolor: "rgb(220, 220, 220)"
- # tickfont:
- # size: 14
- autosize: False
- # width: 700
- # height: 700
- paper_bgcolor: "white"
- plot_bgcolor: "white"
+ title:
+ text: "Latency by Percentile Distribution"
+ xanchor: "center"
+ x: 0.5
+ # font:
+ # size: 10
+ showlegend: True
+ legend:
+ traceorder: "normal"
+ orientation: "h"
+ # font:
+ # size: 16
+ xanchor: "left"
+ yanchor: "top"
+ x: 0
+ y: -0.25
+ bgcolor: "rgba(255, 255, 255, 0)"
+ bordercolor: "rgba(255, 255, 255, 0)"
+ xaxis:
+ type: "log"
+ title: "Percentile [%]"
+ # titlefont:
+ # size: 14
+ autorange: False
+ fixedrange: True
+ gridcolor: "rgb(230, 230, 230)"
+ linecolor: "rgb(220, 220, 220)"
+ linewidth: 1
+ showgrid: True
+ showline: True
+ showticklabels: True
+ tickcolor: "rgb(220, 220, 220)"
+ tickvals: [1, 2, 1e1, 20, 1e2, 1e3, 1e4, 1e5, 1e6]
+ ticktext: [0, 50, 90, 95, 99, 99.9, 99.99, 99.999, 99.9999]
+ # tickfont:
+ # size: 14
+ yaxis:
+ title: "One-Way Latency per Direction [uSec]"
+ # titlefont:
+ # size: 14
+ gridcolor: "rgb(230, 230, 230)"
+ linecolor: "rgb(220, 220, 220)"
+ linewidth: 1
+ showgrid: True
+ showline: True
+ showticklabels: True
+ tickcolor: "rgb(220, 220, 220)"
+ # tickfont:
+ # size: 14
+ autosize: True
+ #height: 400
+ paper_bgcolor: "white"
+ plot_bgcolor: "white"