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=690a9b72e0a2d50747c2947bb5296a4112e9cc0c;hp=377621425ce7b2a7e233a6a74ae7f6b38af0df35;hb=dcdb82a6a1ae769c72546d642b1c3a38299d97b8;hpb=7c4fdfb43c5cb249c5258c31cde1370cedb5d7b2 diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py index 377621425c..690a9b72e0 100644 --- a/resources/tools/dash/app/pal/trending/layout.py +++ b/resources/tools/dash/app/pal/trending/layout.py @@ -14,30 +14,42 @@ """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_HIDEN = {"display": "none"} - STYLE_BLOCK = {"display": "block"} - STYLE_INLINE ={"display": "inline-block", "width": "50%"} - NO_GRAPH = {"data": [], "layout": {}, "frames": []} + 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): @@ -55,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) @@ -133,454 +145,711 @@ 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( + class_name="w-50", + 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_navbar(self): + """Add nav element with navigation panel. It is placed on the top. + """ + return dbc.NavbarSimple( + id="navbarsimple-main", + children=[ + dbc.NavItem( + dbc.NavLink( + "Continuous Performance Trending", + disabled=True, + external_link=True, + href="#" + ) + ) + ], + brand="Dashboard", + brand_href="/", + brand_external_link=True, + class_name="p-2", + fluid=True, + ) + + def _add_ctrl_col(self) -> dbc.Col: + """Add column with controls. It is placed on the left side. + """ + return dbc.Col( + id="col-controls", + children=[ + self._add_ctrl_panel(), + ], ) - def _add_ctrl_div(self): - """Add div with controls. It is placed on the left side. + def _add_plotting_col(self) -> dbc.Col: + """Add column with plots and tables. It is placed on the right side. """ - return html.Div( - id="div-controls", + return dbc.Col( + id="col-plotting-area", children=[ - html.Div( - id="div-controls-tabs", + dbc.Row( # Throughput + id="row-graph-tput", + class_name="g-0 p-2", + children=[ + self.PLACEHOLDER + ] + ), + dbc.Row( # Latency + id="row-graph-lat", + class_name="g-0 p-2", + children=[ + self.PLACEHOLDER + ] + ), + dbc.Row( # Download + id="row-btn-download", + class_name="g-0 p-2", children=[ - self._add_ctrl_select(), - self._add_ctrl_shown() + self.PLACEHOLDER ] ) ], - style={ - "display": "inline-block", - "width": "18%", - "padding": "5px" - } + width=9, ) - def _add_plotting_div(self): - """Add div with plots and tables. It is placed on the right side. + def _add_ctrl_panel(self) -> dbc.Row: + """ """ - return html.Div( - id="div-plotting-area", + return dbc.Row( + id="row-ctrl-panel", + class_name="g-0 p-2", children=[ - dcc.Loading( - id="loading-graph", + dbc.Row( + class_name="gy-1", children=[ - dcc.Graph( - id="graph-tput", - style=self.STYLE_HIDEN + dbc.Label( + "Physical Test Bed Topology, NIC and Driver", + class_name="p-0" ), - dcc.Graph( - id="graph-latency", - style=self.STYLE_HIDEN - ) - ], - type="circle" + 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.Div( + dbc.Row( + class_name="gy-1", children=[ - html.Div( - id="div-tput-metadata", + dbc.Label( + "Area", + class_name="p-0" + ), + dbc.Select( + id="dd-ctrl-area", + placeholder="Select an Area...", + disabled=True, + size="sm", + ), + ] + ), + 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", + ), + ] + ), + dbc.Row( + id="row-ctrl-core", + class_name="gy-1", + children=[ + dbc.Label( + "Number of Cores", + class_name="p-0" + ), + dbc.Col( children=[ - dcc.Markdown(""" - **Metadata** - - Click on data points in the graph. - """), - html.Pre( - id="tput-metadata" + dbc.Checklist( + id="cl-ctrl-core-all", + options=self.CL_ALL_DISABLED, + inline=False, + switch=False ) ], - style=self.STYLE_HIDEN + width=3 ), - html.Div( - id="div-latency-metadata", + dbc.Col( children=[ - dcc.Markdown(""" - **Metadata** - - Click on data points in the graph. - """), - html.Pre( - id="latency-metadata" + dbc.Checklist( + id="cl-ctrl-core", + inline=True, + switch=False ) - ], - style=self.STYLE_HIDEN + ] ) ] - ) - ], - style={ - "vertical-align": "top", - "display": "inline-block", - "width": "80%", - "padding": "5px" - } - ) - - def _add_ctrl_shown(self): - """ - """ - return html.Div( - id="div-ctrl-shown", - children=[ - html.H5("Selected tests"), - html.Div( - id="container-selected-tests", + ), + dbc.Row( + id="row-ctrl-framesize", + class_name="gy-1", children=[ - dcc.Checklist( - id="cl-selected", - options=[], - labelStyle={"display": "block"} + dbc.Label( + "Frame Size", + class_name="p-0" ), - html.Button( - id="btn-sel-remove", - children="Remove Selected", - disabled=False + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-framesize-all", + options=self.CL_ALL_DISABLED, + inline=True, + switch=False + ), + ], + width=3 ), - html.Button( - id="btn-sel-display", - children="Display", - disabled=False + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-framesize", + inline=True, + switch=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() - ], - ), - html.H5("Area"), - dcc.Dropdown( - id="dd-ctrl-area", - placeholder="Select an Area...", - disabled=True, - multi=False, - clearable=False, - ), - html.H5("Test"), - dcc.Dropdown( - id="dd-ctrl-test", - placeholder="Select a Test...", - disabled=True, - multi=False, - clearable=False, - ), - html.Div( - id="div-ctrl-core", + dbc.Row( + id="row-ctrl-testtype", + 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( + "Test Type", + class_name="p-0" ), - dcc.Checklist( - id="cl-ctrl-core", - labelStyle={"display": "inline-block"} + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-testtype-all", + options=self.CL_ALL_DISABLED, + inline=True, + switch=False + ), + ], + width=3 + ), + dbc.Col( + children=[ + dbc.Checklist( + id="cl-ctrl-testtype", + inline=True, + switch=False + ) + ] ) - ], - style={"display": "none"} + ] ), - html.Div( - id="div-ctrl-framesize", + dbc.Row( + 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"} - ), - dcc.Checklist( - id="cl-ctrl-framesize", - labelStyle={"display": "inline-block"} + dbc.ButtonGroup( + [ + dbc.Button( + id="btn-ctrl-add", + children="Add Selected", + color="secondary", + ) + ], + size="md", ) - ], - 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"} + dcc.DatePickerRange( + id="dpr-period", + className="d-flex justify-content-center", + 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: - @app.callback( - Output("dd-ctrl-area", "options"), - Output("dd-ctrl-area", "disabled"), - Input("dd-ctrl-phy", "value"), - ) - def _update_dd_area(phy): - """ - """ + CL_ALL_DISABLED = [{ + "label": "All", + "value": "all", + "disabled": True + }] - if phy is None: - raise PreventUpdate + # 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(), + } - 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 + self._panel = deepcopy(self._defaults) + if panel: + for key in self._defaults: + self._panel[key] = panel[key] - return options, disable + @property + def defaults(self) -> dict: + return self._defaults - @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): - """ - """ + @property + def panel(self) -> dict: + return self._panel - if not area: - raise PreventUpdate + 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.") - try: - options = [ - {"label": v, "value": v} - for v in self.spec_tbs[phy][area]["test"] - ] - disable = False - except KeyError: - options = list() - disable = True + def get(self, key: str) -> any: + return self._panel[key] - return options, disable + def values(self) -> tuple: + return tuple(self._panel.values()) - @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): + @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 + + @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() + + 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-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("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"), + 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 - - 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() - - class RetunValue: - 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-lat-metadata-style": no_update, - "selected-tests-data": no_update, - "cl-selected-options": no_update, - "dd-ctrl-phy-value": no_update, - "dd-ctrl-area-value": no_update, - "dd-ctrl-test-value": no_update, - } - - def value(self): - return tuple(self._output.values()) - - def set_values(self, kwargs: dict) -> None: - for key, val in kwargs.items(): - if key in self._output: - self._output[key] = val - else: - raise KeyError(f"The key {key} is not defined.") - - - trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] - 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])) - output = RetunValue() + 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 - if trigger_id == "btn-ctrl-add": + ctrl_panel = self.ControlPanel(cp_data) + + trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] + + 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: if store_sel is None: @@ -606,34 +875,33 @@ class Layout: "core": core.lower(), "testtype": ttype.lower() }) - output.set_values({ - "selected-tests-data": store_sel, - "cl-selected-options": _list_tests(), - "dd-ctrl-phy-value": None, - "dd-ctrl-area-value": None, - "dd-ctrl-test-value": None, - }) - + 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_tput, fig_lat = trending_tput( - 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": \ - self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN, - "div-lat-metadata-style": \ - self.STYLE_INLINE if fig_lat else self.STYLE_HIDEN + _ = 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: @@ -641,53 +909,130 @@ class Layout: new_store_sel.append(item) store_sel = new_store_sel if store_sel: - fig_tput, fig_lat = 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 + ) ) - 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": \ - self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN, - "div-lat-metadata-style": \ - self.STYLE_INLINE if fig_lat else self.STYLE_HIDEN, - "selected-tests-data": store_sel, - "cl-selected-options": _list_tests() + ctrl_panel.set({ + "cl-selected-options": self._list_tests(store_sel) }) 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-lat-metadata-style": self.STYLE_HIDEN, - "selected-tests-data": store_sel, - "cl-selected-options": _list_tests() + 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() }) - return output.value() + 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("tput-metadata", "children"), - Input("graph-tput", "clickData") + 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_tput_metadata(hover_data): - if not hover_data: + def _show_metadata_from_graphs( + tput_data: dict, lat_data: dict) -> tuple: + """ + """ + if not (tput_data or lat_data): raise PreventUpdate - return json.dumps(hover_data, indent=2) + + metadata = no_update + graph = list() + + trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] + if trigger_id == "graph-tput": + title = "Throughput" + array = tput_data["points"][0]["text"].split("
") + children = [ + dbc.ListGroupItem( + [dbc.Badge(x.split(":")[0]), x.split(": ")[1]] + ) for x in array + ] + elif trigger_id == "graph-latency": + title = "Latency" + array = lat_data["points"][0]["text"].split("
") + children = [ + dbc.ListGroupItem( + [dbc.Badge(x.split(":")[0]), x.split(": ")[1]] + ) for x in array + ] + hdrh_data = lat_data["points"][0].get("customdata", None) + if hdrh_data: + graph = [dbc.Card( + class_name="gy-2 p-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="gy-2 p-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", + class_name="p-0", + children=[ + dbc.ListGroup(children, flush=True) + ] + ) + ] + ) + ] + + return metadata, graph, True @app.callback( - Output("latency-metadata", "children"), - Input("graph-latency", "clickData") + Output("download-data", "data"), + State("selected-tests", "data"), + Input("btn-download-data", "n_clicks"), + prevent_initial_call=True ) - def _show_latency_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")