From 9c10745ce84d74ff5752aa3a19508cc731bba8b9 Mon Sep 17 00:00:00 2001 From: Tibor Frank Date: Fri, 8 Apr 2022 14:09:08 +0200 Subject: UTI: UX Styling Change-Id: I54e3992f81db04c7c978b2157dafd067de917664 Signed-off-by: Tibor Frank --- resources/tools/dash/app/pal/data/data.py | 2 - .../tools/dash/app/pal/templates/index.jinja2 | 4 - resources/tools/dash/app/pal/trending/layout.py | 208 +++++++++++---------- resources/tools/dash/app/pal/trending/layout.yaml | 111 ++++++----- 4 files changed, 165 insertions(+), 160 deletions(-) (limited to 'resources/tools/dash') 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 @@ Trending - - Report - - {% 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("
", "\n"), + return hover_data["points"][0]["text"].replace("
", "\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("
", "\n"), graph, - self.STYLE_INLINE if graph else self.STYLE_HIDEN + self.STYLE_INLINE, + hover_data["points"][0]["text"].replace("
", "\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" -- cgit 1.2.3-korg