"""Plotly Dash HTML layout override.
"""
-
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
+import dash_bootstrap_components as dbc
from yaml import load, FullLoader, YAMLError
from datetime import datetime, timedelta
from ..data.data import Data
-from .graphs import graph_trending_tput, graph_hdrh_latency
+from .graphs import graph_trending, graph_hdrh_latency, \
+ select_trending_data
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": []}
id="div-main",
children=[
dcc.Store(id="selected-tests"),
+ self._add_navbar(),
self._add_ctrl_div(),
self._add_plotting_div()
]
children="An Error Occured."
)
+ def _add_navbar(self):
+ """Add nav element with navigation panel. It is placed on the top.
+ """
+ return dbc.NavbarSimple(
+ children=[
+ dbc.NavItem(
+ dbc.NavLink("Continuous Performance Trending", href="#")
+ )
+ ],
+ brand="Dashboard",
+ brand_href="/",
+ color="dark",
+ dark=True,
+ fluid=True,
+ )
+
def _add_ctrl_div(self):
"""Add div with controls. It is placed on the left side.
"""
],
style={
"display": "inline-block",
- "width": "18%",
- "padding": "5px"
+ "width": "20%"
}
)
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=[
- dcc.Markdown("**Throughput**"),
+ 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",
+ style={"display": "inline-block"}
+ ),
+ html.Nobr(" "),
+ html.Nobr(" "),
+ dcc.Markdown(
+ children="**Throughput**",
+ style={"display": "inline-block"}
+ ),
html.Pre(
id="tput-metadata",
- children="Click on data points in the graph"
+ children="Click on data point 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-metadata",
- children=[
- dcc.Markdown("**Latency**"),
- html.Pre(
- id="latency-metadata",
- children="Click on data points in the graph"
+ ], style={"width": "20%"}),
+ ]
+ ),
+ html.Tr(
+ id="div-latency",
+ style=self.STYLE_HIDEN,
+ children=[
+ html.Td(children=[
+ dcc.Loading(
+ dcc.Graph(
+ id="graph-latency"
+ )
)
- ],
- style=self.STYLE_HIDEN
- ),
- html.Div(
- id="div-latency-hdrh",
- children=[
+ ], 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%"
}
)
@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"),
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,
})
elif trigger_id in ("btn-sel-display", "dpr-period"):
- fig_tput, fig_lat = graph_trending_tput(
+ fig_tput, fig_lat = graph_trending(
self.data, store_sel, self.layout, d_start, d_end
)
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":
new_store_sel.append(item)
store_sel = new_store_sel
if store_sel:
- fig_tput, fig_lat = graph_trending_tput(
+ fig_tput, fig_lat = graph_trending(
self.data, store_sel, self.layout, d_start, d_end
)
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()
})
Input("graph-tput", "clickData")
)
def _show_tput_metadata(hover_data):
+ """
+ """
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:
raise PreventUpdate
- graph = graph_hdrh_latency(
- hover_data["points"][0]["customdata"], self.layout
- )
- if not graph:
- graph = no_update
+
+ 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
+ self.STYLE_INLINE,
+ hover_data["points"][0]["text"].replace("<br>", "\n")
)
+
+ @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")