X-Git-Url: https://gerrit.fd.io/r/gitweb?p=csit.git;a=blobdiff_plain;f=resources%2Ftools%2Fdash%2Fapp%2Fpal%2Ftrending%2Flayout.py;h=ddc39dc4435f94a6838e4436d88aca2c7d9e9a4e;hp=6be71ace159ae3325b3a5aa4e91501e3a56b1d77;hb=65421a4ebc81c4e163b3cb38dd6d095b8e99f2d4;hpb=e972e67afac3ab3eb785668d01d3bdf1833eade9 diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py index 6be71ace15..ddc39dc443 100644 --- a/resources/tools/dash/app/pal/trending/layout.py +++ b/resources/tools/dash/app/pal/trending/layout.py @@ -14,26 +14,43 @@ """Plotly Dash HTML layout override. """ - -import json import pandas as pd +import dash_bootstrap_components as dbc 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 +from copy import deepcopy from ..data.data import Data -from .graphs import trending_tput +from .graphs import graph_trending, graph_hdrh_latency, \ + select_trending_data class Layout: """ """ + STYLE_DISABLED = {"display": "none"} + STYLE_ENABLED = {"display": "inherit"} + + CL_ALL_DISABLED = [{ + "label": "All", + "value": "all", + "disabled": True + }] + CL_ALL_ENABLED = [{ + "label": "All", + "value": "all", + "disabled": False + }] + + PLACEHOLDER = html.Nobr("") + def __init__(self, app, html_layout_file, spec_file, graph_layout_file, data_spec_file): """ @@ -50,12 +67,12 @@ class Layout: data_mrr = Data( data_spec_file=self._data_spec_file, debug=True - ).read_trending_mrr() + ).read_trending_mrr(days=5) data_ndrpdr = Data( data_spec_file=self._data_spec_file, debug=True - ).read_trending_ndrpdr() + ).read_trending_ndrpdr(days=14) self._data = pd.concat([data_mrr, data_ndrpdr], ignore_index=True) @@ -128,407 +145,713 @@ class Layout: return html.Div( id="div-main", children=[ - dcc.Store(id="selected-tests"), - self._add_ctrl_div(), - self._add_plotting_div() + dbc.Row( + id="row-navbar", + class_name="g-0", + children=[ + self._add_navbar(), + ] + ), + dcc.Loading( + dbc.Offcanvas( + id="offcanvas-metadata", + title="Throughput And Latency", + placement="end", + is_open=False, + children=[ + dbc.Row(id="metadata-tput-lat"), + dbc.Row(id="metadata-hdrh-graph"), + ] + ) + ), + dbc.Row( + id="row-main", + class_name="g-0", + children=[ + dcc.Store( + id="selected-tests" + ), + dcc.Store( + id="control-panel" + ), + self._add_ctrl_col(), + self._add_plotting_col(), + ] + ) ] ) else: return html.Div( - id="div-main-error", - children="An Error Occured." - ) + id="div-main-error", + children=[ + dbc.Alert( + [ + "An Error Occured", + ], + color="danger", + ), + ] + ) - def _add_ctrl_div(self): - """Add div with controls. It is placed on the left side. + def _add_navbar(self): + """Add nav element with navigation panel. It is placed on the top. """ - return html.Div( - id="div-controls", + return dbc.NavbarSimple( + id="navbarsimple-main", children=[ - html.Div( - id="div-controls-tabs", - children=[ - self._add_ctrl_select(), - self._add_ctrl_shown() - ] + dbc.NavItem( + dbc.NavLink( + "Continuous Performance Trending", + disabled=True, + external_link=True, + href="#" + ) ) ], - style={ - "display": "inline-block", - "width": "18%", - "padding": "5px" - } + brand="Dashboard", + brand_href="/", + brand_external_link=True, + class_name="p-2", + fluid=True, ) - def _add_plotting_div(self): - """Add div with plots and tables. It is placed on the right side. + def _add_ctrl_col(self) -> dbc.Col: + """Add column with controls. It is placed on the left side. """ - return html.Div( - id="div-plotting-area", + return dbc.Col( + id="col-controls", children=[ - dcc.Loading( - id="loading-graph", + self._add_ctrl_panel(), + ], + ) + + def _add_plotting_col(self) -> dbc.Col: + """Add column with plots and tables. It is placed on the right side. + """ + return dbc.Col( + id="col-plotting-area", + children=[ + dbc.Row( # Throughput + id="row-graph-tput", + class_name="g-0 p-2", children=[ - dcc.Graph( - id="graph" - ) - ], - type="circle" + self.PLACEHOLDER + ] ), - html.Div( + dbc.Row( # Latency + id="row-graph-lat", + class_name="g-0 p-2", children=[ - dcc.Markdown(""" - **Metadata** - - Click on data points in the graph. - """), - html.Pre( - id="hover-metadata" - ) + self.PLACEHOLDER + ] + ), + dbc.Row( # Download + id="row-btn-download", + class_name="g-0 p-2", + children=[ + self.PLACEHOLDER ] ) ], - style={ - "vertical-align": "top", - "display": "none", - "width": "80%", - "padding": "5px" - } + width=9, ) - def _add_ctrl_shown(self): + def _add_ctrl_panel(self) -> dbc.Row: """ """ - return html.Div( - id="div-ctrl-shown", + return dbc.Row( + id="row-ctrl-panel", + class_name="g-0 p-2", children=[ - html.H5("Selected tests"), - html.Div( - id="container-selected-tests", + dbc.Row( + class_name="gy-1", children=[ - dcc.Checklist( - id="cl-selected", - options=[], - labelStyle={"display": "block"} + dbc.Label( + "Physical Test Bed Topology, NIC and Driver", + class_name="p-0" ), - html.Button( - id="btn-sel-remove", - children="Remove Selected", - disabled=False + dbc.Select( + id="dd-ctrl-phy", + placeholder="Select a Physical Test Bed Topology...", + options=[ + {"label": k, "value": k} for k in self.spec_tbs.keys() + ], + size="sm", ), - html.Button( - id="btn-sel-display", - children="Display", - disabled=False - ) ] ), - ] - ) - - def _add_ctrl_select(self): - """ - """ - return html.Div( - id="div-ctrl-select", - children=[ - html.H5("Physical Test Bed Topology, NIC and Driver"), - dcc.Dropdown( - id="dd-ctrl-phy", - placeholder="Select a Physical Test Bed Topology...", - multi=False, - clearable=False, - options=[ - {"label": k, "value": k} for k in self.spec_tbs.keys() - ], + dbc.Row( + class_name="gy-1", + children=[ + dbc.Label( + "Area", + class_name="p-0" + ), + dbc.Select( + id="dd-ctrl-area", + placeholder="Select an Area...", + disabled=True, + size="sm", + ), + ] ), - html.H5("Area"), - dcc.Dropdown( - id="dd-ctrl-area", - placeholder="Select an Area...", - disabled=True, - multi=False, - clearable=False, + dbc.Row( + class_name="gy-1", + children=[ + dbc.Label( + "Test", + class_name="p-0" + ), + dbc.Select( + id="dd-ctrl-test", + placeholder="Select a Test...", + disabled=True, + size="sm", + ), + ] ), - html.H5("Test"), - dcc.Dropdown( - id="dd-ctrl-test", - placeholder="Select a Test...", - disabled=True, - multi=False, - clearable=False, + dbc.Row( + id="row-ctrl-core", + class_name="gy-1", + children=[ + dbc.Label( + "Number of Cores", + class_name="p-0" + ), + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-core-all", + options=self.CL_ALL_DISABLED, + inline=False, + switch=False + ) + ], + width=3 + ), + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-core", + inline=True, + switch=False + ) + ] + ) + ] ), - html.Div( - id="div-ctrl-core", + dbc.Row( + id="row-ctrl-framesize", + class_name="gy-1", children=[ - html.H5("Number of Cores"), - dcc.Checklist( - id="cl-ctrl-core-all", - options=[{"label": "All", "value": "all"}, ], - labelStyle={"display": "inline-block"} + dbc.Label( + "Frame Size", + class_name="p-0" ), - dcc.Checklist( - id="cl-ctrl-core", - labelStyle={"display": "inline-block"} + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-framesize-all", + options=self.CL_ALL_DISABLED, + inline=True, + switch=False + ), + ], + width=3 + ), + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-framesize", + inline=True, + switch=False + ) + ] ) - ], - style={"display": "none"} + ] ), - html.Div( - id="div-ctrl-framesize", + dbc.Row( + id="row-ctrl-testtype", + class_name="gy-1", children=[ - html.H5("Frame Size"), - dcc.Checklist( - id="cl-ctrl-framesize-all", - options=[{"label": "All", "value": "all"}, ], - labelStyle={"display": "inline-block"} + dbc.Label( + "Test Type", + class_name="p-0" + ), + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-testtype-all", + options=self.CL_ALL_DISABLED, + inline=True, + switch=False + ), + ], + width=3 ), - dcc.Checklist( - id="cl-ctrl-framesize", - labelStyle={"display": "inline-block"} + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-testtype", + inline=True, + switch=False + ) + ] ) - ], - style={"display": "none"} + ] ), - html.Div( - id="div-ctrl-testtype", + dbc.Row( + class_name="gy-1", children=[ - html.H5("Test Type"), - dcc.Checklist( - id="cl-ctrl-testtype-all", - options=[{"label": "All", "value": "all"}, ], - labelStyle={"display": "inline-block"} + dbc.ButtonGroup( + [ + dbc.Button( + id="btn-ctrl-add", + children="Add Selected", + color="secondary", + ) + ], + size="md", + ) + ] + ), + dbc.Row( + class_name="gy-1", + children=[ + dcc.DatePickerRange( + id="dpr-period", + min_date_allowed=\ + datetime.utcnow()-timedelta(days=180), + max_date_allowed=datetime.utcnow(), + initial_visible_month=datetime.utcnow(), + start_date=datetime.utcnow() - timedelta(days=180), + end_date=datetime.utcnow(), + display_format="D MMMM YY" + ) + ] + ), + dbc.Row( + id="row-card-sel-tests", + class_name="gy-1", + style=self.STYLE_DISABLED, + children=[ + dbc.Label( + "Selected tests", + class_name="p-0" ), - dcc.Checklist( - id="cl-ctrl-testtype", - labelStyle={"display": "inline-block"} + dbc.Checklist( + class_name="overflow-auto", + id="cl-selected", + options=[], + inline=False, + style={"max-height": "12em"}, ) ], - style={"display": "none"} ), - html.Button( - id="btn-ctrl-add", - children="Add", - disabled=True + dbc.Row( + id="row-btns-sel-tests", + style=self.STYLE_DISABLED, + children=[ + dbc.ButtonGroup( + children=[ + dbc.Button( + id="btn-sel-remove-all", + children="Remove All", + class_name="w-100", + color="secondary", + disabled=False + ), + dbc.Button( + id="btn-sel-remove", + children="Remove Selected", + class_name="w-100", + color="secondary", + disabled=False + ), + dbc.Button( + id="btn-sel-display", + children="Display", + class_name="w-100", + color="secondary", + disabled=False + ) + ], + size="md", + ) + ] ), - html.Br(), - dcc.DatePickerRange( - id="dpr-period", - min_date_allowed=datetime.utcnow() - timedelta(days=180), - max_date_allowed=datetime.utcnow(), - initial_visible_month=datetime.utcnow(), - start_date=datetime.utcnow() - timedelta(days=180), - end_date=datetime.utcnow(), - display_format="D MMMM YY" - ) ] ) - def callbacks(self, app): + class ControlPanel: + def __init__(self, panel: dict) -> None: + + CL_ALL_DISABLED = [{ + "label": "All", + "value": "all", + "disabled": True + }] + + # Defines also the order of keys + self._defaults = { + "dd-ctrl-phy-value": str(), + "dd-ctrl-area-options": list(), + "dd-ctrl-area-disabled": True, + "dd-ctrl-area-value": str(), + "dd-ctrl-test-options": list(), + "dd-ctrl-test-disabled": True, + "dd-ctrl-test-value": str(), + "cl-ctrl-core-options": list(), + "cl-ctrl-core-value": list(), + "cl-ctrl-core-all-value": list(), + "cl-ctrl-core-all-options": CL_ALL_DISABLED, + "cl-ctrl-framesize-options": list(), + "cl-ctrl-framesize-value": list(), + "cl-ctrl-framesize-all-value": list(), + "cl-ctrl-framesize-all-options": CL_ALL_DISABLED, + "cl-ctrl-testtype-options": list(), + "cl-ctrl-testtype-value": list(), + "cl-ctrl-testtype-all-value": list(), + "cl-ctrl-testtype-all-options": CL_ALL_DISABLED, + "btn-ctrl-add-disabled": True, + "cl-selected-options": list(), + } - @app.callback( - Output("dd-ctrl-area", "options"), - Output("dd-ctrl-area", "disabled"), - Input("dd-ctrl-phy", "value"), - ) - def _update_dd_area(phy): - """ - """ + self._panel = deepcopy(self._defaults) + if panel: + for key in self._defaults: + self._panel[key] = panel[key] - if phy is None: - raise PreventUpdate + @property + def defaults(self) -> dict: + return self._defaults - try: - options = [ - {"label": self.spec_tbs[phy][v]["label"], "value": v} - for v in [v for v in self.spec_tbs[phy].keys()] - ] - disable = False - except KeyError: - options = list() - disable = True + @property + def panel(self) -> dict: + return self._panel - return options, disable + def set(self, kwargs: dict) -> None: + for key, val in kwargs.items(): + if key in self._panel: + self._panel[key] = val + else: + raise KeyError(f"The key {key} is not defined.") - @app.callback( - Output("dd-ctrl-test", "options"), - Output("dd-ctrl-test", "disabled"), - State("dd-ctrl-phy", "value"), - Input("dd-ctrl-area", "value"), - ) - def _update_dd_test(phy, area): - """ - """ + def get(self, key: str) -> any: + return self._panel[key] - if not area: - raise PreventUpdate + def values(self) -> tuple: + return tuple(self._panel.values()) - try: - options = [ - {"label": v, "value": v} - for v in self.spec_tbs[phy][area]["test"] - ] - disable = False - except KeyError: - options = list() - disable = True + @staticmethod + def _sync_checklists(opt: list, sel: list, all: list, id: str) -> tuple: + """ + """ + options = {v["value"] for v in opt} + if id =="all": + sel = list(options) if all else list() + else: + all = ["all", ] if set(sel) == options else list() + return sel, all - return options, disable + @staticmethod + def _list_tests(selection: dict) -> list: + """Display selected tests with checkboxes + """ + if selection: + return [ + {"label": v["id"], "value": v["id"]} for v in selection + ] + else: + return list() - @app.callback( - Output("div-ctrl-core", "style"), - Output("cl-ctrl-core", "options"), - Output("div-ctrl-framesize", "style"), - Output("cl-ctrl-framesize", "options"), - Output("div-ctrl-testtype", "style"), - Output("cl-ctrl-testtype", "options"), - Output("btn-ctrl-add", "disabled"), - State("dd-ctrl-phy", "value"), - State("dd-ctrl-area", "value"), - Input("dd-ctrl-test", "value"), - ) - def _update_btn_add(phy, area, test): + def callbacks(self, app): + + def _generate_plotting_arrea(args: tuple) -> tuple: """ """ - if test is None: - raise PreventUpdate + (fig_tput, fig_lat) = args + + row_fig_tput = self.PLACEHOLDER + row_fig_lat = self.PLACEHOLDER + row_btn_dwnld = self.PLACEHOLDER - core_style = {"display": "none"} - core_opts = [] - framesize_style = {"display": "none"} - framesize_opts = [] - testtype_style = {"display": "none"} - testtype_opts = [] - add_disabled = True - if phy and area and test: - core_style = {"display": "block"} - core_opts = [ - {"label": v, "value": v} - for v in self.spec_tbs[phy][area]["core"] + if fig_tput: + row_fig_tput = [ + dcc.Loading( + dcc.Graph( + id="graph-tput", + figure=fig_tput + ) + ), ] - framesize_style = {"display": "block"} - framesize_opts = [ - {"label": v, "value": v} - for v in self.spec_tbs[phy][area]["frame-size"] + row_btn_dwnld = [ + dcc.Loading(children=[ + dbc.Button( + id="btn-download-data", + children=["Download Data"] + ), + dcc.Download(id="download-data") + ]), ] - testtype_style = {"display": "block"} - testtype_opts = [ - {"label": v, "value": v} - for v in self.spec_tbs[phy][area]["test-type"] + if fig_lat: + row_fig_lat = [ + dcc.Loading( + dcc.Graph( + id="graph-latency", + figure=fig_lat + ) + ) ] - add_disabled = False - return ( - core_style, core_opts, - framesize_style, framesize_opts, - testtype_style, testtype_opts, - add_disabled - ) - - def _sync_checklists(opt, sel, all, id): - """ - """ - options = {v["value"] for v in opt} - input_id = callback_context.triggered[0]["prop_id"].split(".")[0] - if input_id == id: - all = ["all"] if set(sel) == options else list() - else: - sel = list(options) if all else list() - return sel, all + return row_fig_tput, row_fig_lat, row_btn_dwnld @app.callback( + Output("control-panel", "data"), # Store + Output("selected-tests", "data"), # Store + Output("row-graph-tput", "children"), + Output("row-graph-lat", "children"), + Output("row-btn-download", "children"), + Output("row-card-sel-tests", "style"), + Output("row-btns-sel-tests", "style"), + Output("dd-ctrl-phy", "value"), + Output("dd-ctrl-area", "options"), + Output("dd-ctrl-area", "disabled"), + Output("dd-ctrl-area", "value"), + Output("dd-ctrl-test", "options"), + Output("dd-ctrl-test", "disabled"), + Output("dd-ctrl-test", "value"), + Output("cl-ctrl-core", "options"), Output("cl-ctrl-core", "value"), Output("cl-ctrl-core-all", "value"), - State("cl-ctrl-core", "options"), - Input("cl-ctrl-core", "value"), - Input("cl-ctrl-core-all", "value"), - prevent_initial_call=True - ) - def _sync_cl_core(opt, sel, all): - return _sync_checklists(opt, sel, all, "cl-ctrl-core") - - @app.callback( + Output("cl-ctrl-core-all", "options"), + Output("cl-ctrl-framesize", "options"), Output("cl-ctrl-framesize", "value"), Output("cl-ctrl-framesize-all", "value"), - State("cl-ctrl-framesize", "options"), - Input("cl-ctrl-framesize", "value"), - Input("cl-ctrl-framesize-all", "value"), - prevent_initial_call=True - ) - def _sync_cl_framesize(opt, sel, all): - return _sync_checklists(opt, sel, all, "cl-ctrl-framesize") - - @app.callback( + Output("cl-ctrl-framesize-all", "options"), + Output("cl-ctrl-testtype", "options"), Output("cl-ctrl-testtype", "value"), Output("cl-ctrl-testtype-all", "value"), - State("cl-ctrl-testtype", "options"), - Input("cl-ctrl-testtype", "value"), - Input("cl-ctrl-testtype-all", "value"), - prevent_initial_call=True - ) - def _sync_cl_testtype(opt, sel, all): - return _sync_checklists(opt, sel, all, "cl-ctrl-testtype") - - @app.callback( - Output("graph", "figure"), - Output("selected-tests", "data"), # Store + Output("cl-ctrl-testtype-all", "options"), + Output("btn-ctrl-add", "disabled"), Output("cl-selected", "options"), # User selection - Output("dd-ctrl-phy", "value"), - Output("dd-ctrl-area", "value"), - Output("dd-ctrl-test", "value"), - Output("div-plotting-area", "style"), + State("control-panel", "data"), # Store State("selected-tests", "data"), # Store - State("cl-selected", "value"), - State("dd-ctrl-phy", "value"), - State("dd-ctrl-area", "value"), - State("dd-ctrl-test", "value"), - State("cl-ctrl-core", "value"), - State("cl-ctrl-framesize", "value"), - State("cl-ctrl-testtype", "value"), + State("cl-selected", "value"), # User selection + Input("dd-ctrl-phy", "value"), + Input("dd-ctrl-area", "value"), + Input("dd-ctrl-test", "value"), + Input("cl-ctrl-core", "value"), + Input("cl-ctrl-core-all", "value"), + Input("cl-ctrl-framesize", "value"), + Input("cl-ctrl-framesize-all", "value"), + Input("cl-ctrl-testtype", "value"), + Input("cl-ctrl-testtype-all", "value"), Input("btn-ctrl-add", "n_clicks"), - Input("btn-sel-display", "n_clicks"), - Input("btn-sel-remove", "n_clicks"), Input("dpr-period", "start_date"), Input("dpr-period", "end_date"), - prevent_initial_call=True + Input("btn-sel-display", "n_clicks"), + Input("btn-sel-remove", "n_clicks"), + Input("btn-sel-remove-all", "n_clicks"), ) - def _process_list(store_sel, list_sel, phy, area, test, cores, - framesizes, testtypes, btn_add, btn_display, btn_remove, - d_start, d_end): + def _update_ctrl_panel(cp_data: dict, store_sel: list, list_sel: list, + dd_phy: str, dd_area: str, dd_test: str, cl_core: list, + cl_core_all: list, cl_framesize: list, cl_framesize_all: list, + cl_testtype: list, cl_testtype_all: list, btn_add: int, + d_start: str, d_end: str, btn_display: int, btn_remove: int, + btn_remove_all: int) -> tuple: """ """ - if not (btn_add or btn_display or btn_remove or d_start or d_end): - raise PreventUpdate + d_start = datetime(int(d_start[0:4]), int(d_start[5:7]), + int(d_start[8:10])) + d_end = datetime(int(d_end[0:4]), int(d_end[5:7]), int(d_end[8:10])) - def _list_tests(): - # Display selected tests with checkboxes: - if store_sel: - return [ - {"label": v["id"], "value": v["id"]} for v in store_sel - ] - else: - return list() + row_fig_tput = no_update + row_fig_lat = no_update + row_btn_dwnld = no_update + row_card_sel_tests = no_update + row_btns_sel_tests = no_update - trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] + ctrl_panel = self.ControlPanel(cp_data) - d_start = datetime( - int(d_start[0:4]), int(d_start[5:7]), int(d_start[8:10]) - ) - d_end = datetime( - int(d_end[0:4]), int(d_end[5:7]), int(d_end[8:10]) - ) + trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] - if trigger_id == "btn-ctrl-add": + if trigger_id == "dd-ctrl-phy": + try: + options = [ + {"label": self.spec_tbs[dd_phy][v]["label"], "value": v} + for v in [v for v in self.spec_tbs[dd_phy].keys()] + ] + disabled = False + except KeyError: + options = list() + disabled = no_update + ctrl_panel.set({ + "dd-ctrl-phy-value": dd_phy, + "dd-ctrl-area-value": str(), + "dd-ctrl-area-options": options, + "dd-ctrl-area-disabled": disabled, + "dd-ctrl-test-options": list(), + "dd-ctrl-test-disabled": True, + "cl-ctrl-core-options": list(), + "cl-ctrl-core-value": list(), + "cl-ctrl-core-all-value": list(), + "cl-ctrl-core-all-options": self.CL_ALL_DISABLED, + "cl-ctrl-framesize-options": list(), + "cl-ctrl-framesize-value": list(), + "cl-ctrl-framesize-all-value": list(), + "cl-ctrl-framesize-all-options": self.CL_ALL_DISABLED, + "cl-ctrl-testtype-options": list(), + "cl-ctrl-testtype-value": list(), + "cl-ctrl-testtype-all-value": list(), + "cl-ctrl-testtype-all-options": self.CL_ALL_DISABLED, + "btn-ctrl-add-disabled": True, + }) + elif trigger_id == "dd-ctrl-area": + try: + phy = ctrl_panel.get("dd-ctrl-phy-value") + options = [ + {"label": v, "value": v} + for v in self.spec_tbs[phy][dd_area]["test"] + ] + disabled = False + except KeyError: + options = list() + disabled = True + ctrl_panel.set({ + "dd-ctrl-area-value": dd_area, + "dd-ctrl-test-value": str(), + "dd-ctrl-test-options": options, + "dd-ctrl-test-disabled": disabled, + "cl-ctrl-core-options": list(), + "cl-ctrl-core-value": list(), + "cl-ctrl-core-all-value": list(), + "cl-ctrl-core-all-options": self.CL_ALL_DISABLED, + "cl-ctrl-framesize-options": list(), + "cl-ctrl-framesize-value": list(), + "cl-ctrl-framesize-all-value": list(), + "cl-ctrl-framesize-all-options": self.CL_ALL_DISABLED, + "cl-ctrl-testtype-options": list(), + "cl-ctrl-testtype-value": list(), + "cl-ctrl-testtype-all-value": list(), + "cl-ctrl-testtype-all-options": self.CL_ALL_DISABLED, + "btn-ctrl-add-disabled": True, + }) + elif trigger_id == "dd-ctrl-test": + core_opts = list() + framesize_opts = list() + testtype_opts = list() + phy = ctrl_panel.get("dd-ctrl-phy-value") + area = ctrl_panel.get("dd-ctrl-area-value") + if phy and area and dd_test: + core_opts = [ + {"label": v, "value": v} + for v in self.spec_tbs[phy][area]["core"] + ] + framesize_opts = [ + {"label": v, "value": v} + for v in self.spec_tbs[phy][area]["frame-size"] + ] + testtype_opts = [ + {"label": v, "value": v} + for v in self.spec_tbs[phy][area]["test-type"] + ] + ctrl_panel.set({ + "dd-ctrl-test-value": dd_test, + "cl-ctrl-core-options": core_opts, + "cl-ctrl-core-value": list(), + "cl-ctrl-core-all-value": list(), + "cl-ctrl-core-all-options": self.CL_ALL_ENABLED, + "cl-ctrl-framesize-options": framesize_opts, + "cl-ctrl-framesize-value": list(), + "cl-ctrl-framesize-all-value": list(), + "cl-ctrl-framesize-all-options": self.CL_ALL_ENABLED, + "cl-ctrl-testtype-options": testtype_opts, + "cl-ctrl-testtype-value": list(), + "cl-ctrl-testtype-all-value": list(), + "cl-ctrl-testtype-all-options": self.CL_ALL_ENABLED, + "btn-ctrl-add-disabled": False, + }) + elif trigger_id == "cl-ctrl-core": + val_sel, val_all = self._sync_checklists( + opt=ctrl_panel.get("cl-ctrl-core-options"), + sel=cl_core, + all=list(), + id="" + ) + ctrl_panel.set({ + "cl-ctrl-core-value": val_sel, + "cl-ctrl-core-all-value": val_all, + }) + elif trigger_id == "cl-ctrl-core-all": + val_sel, val_all = self._sync_checklists( + opt = ctrl_panel.get("cl-ctrl-core-options"), + sel=list(), + all=cl_core_all, + id="all" + ) + ctrl_panel.set({ + "cl-ctrl-core-value": val_sel, + "cl-ctrl-core-all-value": val_all, + }) + elif trigger_id == "cl-ctrl-framesize": + val_sel, val_all = self._sync_checklists( + opt = ctrl_panel.get("cl-ctrl-framesize-options"), + sel=cl_framesize, + all=list(), + id="" + ) + ctrl_panel.set({ + "cl-ctrl-framesize-value": val_sel, + "cl-ctrl-framesize-all-value": val_all, + }) + elif trigger_id == "cl-ctrl-framesize-all": + val_sel, val_all = self._sync_checklists( + opt = ctrl_panel.get("cl-ctrl-framesize-options"), + sel=list(), + all=cl_framesize_all, + id="all" + ) + ctrl_panel.set({ + "cl-ctrl-framesize-value": val_sel, + "cl-ctrl-framesize-all-value": val_all, + }) + elif trigger_id == "cl-ctrl-testtype": + val_sel, val_all = self._sync_checklists( + opt = ctrl_panel.get("cl-ctrl-testtype-options"), + sel=cl_testtype, + all=list(), + id="" + ) + ctrl_panel.set({ + "cl-ctrl-testtype-value": val_sel, + "cl-ctrl-testtype-all-value": val_all, + }) + elif trigger_id == "cl-ctrl-testtype-all": + val_sel, val_all = self._sync_checklists( + opt = ctrl_panel.get("cl-ctrl-testtype-options"), + sel=list(), + all=cl_testtype_all, + id="all" + ) + ctrl_panel.set({ + "cl-ctrl-testtype-value": val_sel, + "cl-ctrl-testtype-all-value": val_all, + }) + elif trigger_id == "btn-ctrl-add": + _ = btn_add + phy = ctrl_panel.get("dd-ctrl-phy-value") + area = ctrl_panel.get("dd-ctrl-area-value") + test = ctrl_panel.get("dd-ctrl-test-value") + cores = ctrl_panel.get("cl-ctrl-core-value") + framesizes = ctrl_panel.get("cl-ctrl-framesize-value") + testtypes = ctrl_panel.get("cl-ctrl-testtype-value") # Add selected test to the list of tests in store: if phy and area and test and cores and framesizes and testtypes: - - # TODO: Add validation - if store_sel is None: store_sel = list() - for core in cores: for framesize in framesizes: for ttype in testtypes: @@ -550,17 +873,33 @@ class Layout: "core": core.lower(), "testtype": ttype.lower() }) - return (no_update, store_sel, _list_tests(), None, - None, None, no_update) - + row_card_sel_tests = self.STYLE_ENABLED + row_btns_sel_tests = self.STYLE_ENABLED + ctrl_panel.set(ctrl_panel.defaults) + ctrl_panel.set({ + "cl-selected-options": self._list_tests(store_sel) + }) elif trigger_id in ("btn-sel-display", "dpr-period"): - fig, style = trending_tput( - self.data, store_sel, self.layout, d_start, d_end - ) - return (fig, no_update, no_update, - no_update, no_update, no_update, style) - + _ = btn_display + row_fig_tput, row_fig_lat, row_btn_dwnld = \ + _generate_plotting_arrea( + graph_trending( + self.data, store_sel, self.layout, d_start, d_end + ) + ) + elif trigger_id == "btn-sel-remove-all": + _ = btn_remove_all + row_fig_tput = self.PLACEHOLDER + row_fig_lat = self.PLACEHOLDER + row_btn_dwnld = self.PLACEHOLDER + row_card_sel_tests = self.STYLE_DISABLED + row_btns_sel_tests = self.STYLE_DISABLED + store_sel = list() + ctrl_panel.set({ + "cl-selected-options": list() + }) elif trigger_id == "btn-sel-remove": + _ = btn_remove if list_sel: new_store_sel = list() for item in store_sel: @@ -568,26 +907,117 @@ class Layout: new_store_sel.append(item) store_sel = new_store_sel if store_sel: - fig, style = trending_tput( - self.data, store_sel, self.layout, d_start, d_end + row_fig_tput, row_fig_lat, row_btn_dwnld = \ + _generate_plotting_arrea( + graph_trending( + self.data, store_sel, self.layout, d_start, d_end + ) ) - return (fig, store_sel, _list_tests(), - no_update, no_update, no_update, style) + ctrl_panel.set({ + "cl-selected-options": self._list_tests(store_sel) + }) else: - style={ - "vertical-align": "top", - "display": "none", - "width": "80%", - "padding": "5px" - } - return (no_update, store_sel, _list_tests(), - no_update, no_update, no_update, style) + row_fig_tput = self.PLACEHOLDER + row_fig_lat = self.PLACEHOLDER + row_btn_dwnld = self.PLACEHOLDER + row_card_sel_tests = self.STYLE_DISABLED + row_btns_sel_tests = self.STYLE_DISABLED + store_sel = list() + ctrl_panel.set({ + "cl-selected-options": list() + }) + + ret_val = [ + ctrl_panel.panel, store_sel, + row_fig_tput, row_fig_lat, row_btn_dwnld, + row_card_sel_tests, row_btns_sel_tests + ] + ret_val.extend(ctrl_panel.values()) + return ret_val + + @app.callback( + Output("metadata-tput-lat", "children"), + Output("metadata-hdrh-graph", "children"), + Output("offcanvas-metadata", "is_open"), + Input("graph-tput", "clickData"), + Input("graph-latency", "clickData") + ) + def _show_metadata_from_graphs( + tput_data: dict, lat_data: dict) -> tuple: + """ + """ + if not (tput_data or lat_data): + raise PreventUpdate + + metadata = no_update + graph = list() + + trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] + if trigger_id == "graph-tput": + title = "Throughput" + txt = tput_data["points"][0]["text"].replace("
", "\n") + elif trigger_id == "graph-latency": + title = "Latency" + txt = lat_data["points"][0]["text"].replace("
", "\n") + hdrh_data = lat_data["points"][0].get("customdata", None) + if hdrh_data: + graph = [dbc.Card( + class_name="g-0", + children=[ + dbc.CardHeader(hdrh_data.pop("name")), + dbc.CardBody(children=[ + dcc.Graph( + id="hdrh-latency-graph", + figure=graph_hdrh_latency( + hdrh_data, self.layout + ) + ) + ]) + ]) + ] + metadata = [ + dbc.Card( + class_name="g-0", + children=[ + dbc.CardHeader(children=[ + dcc.Clipboard( + target_id="tput-lat-metadata", + title="Copy", + style={"display": "inline-block"} + ), + title + ]), + dbc.CardBody( + id="tput-lat-metadata", + children=[txt] + ) + ] + ) + ] + + return metadata, graph, True @app.callback( - Output("hover-metadata", "children"), - Input("graph", "clickData") + Output("download-data", "data"), + State("selected-tests", "data"), + Input("btn-download-data", "n_clicks"), + prevent_initial_call=True ) - def _show_metadata(hover_data): - if not hover_data: + def _download_data(store_sel, n_clicks): + """ + """ + + if not n_clicks: raise PreventUpdate - return json.dumps(hover_data, indent=2) + + if not store_sel: + 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")