C-Dash: Add detailed info to iterative graphs
[csit.git] / csit.infra.dash / app / cdash / report / layout.py
1 # Copyright (c) 2023 Cisco and/or its affiliates.
2 # Licensed under the Apache License, Version 2.0 (the "License");
3 # you may not use this file except in compliance with the License.
4 # You may obtain a copy of the License at:
5 #
6 #     http://www.apache.org/licenses/LICENSE-2.0
7 #
8 # Unless required by applicable law or agreed to in writing, software
9 # distributed under the License is distributed on an "AS IS" BASIS,
10 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 # See the License for the specific language governing permissions and
12 # limitations under the License.
13
14 """Plotly Dash HTML layout override.
15 """
16
17
18 import logging
19 import pandas as pd
20 import dash_bootstrap_components as dbc
21
22 from flask import Flask
23 from dash import dcc
24 from dash import html
25 from dash import callback_context, no_update, ALL
26 from dash import Input, Output, State
27 from dash.exceptions import PreventUpdate
28 from yaml import load, FullLoader, YAMLError
29 from ast import literal_eval
30
31 from ..utils.constants import Constants as C
32 from ..utils.control_panel import ControlPanel
33 from ..utils.trigger import Trigger
34 from ..utils.utils import show_tooltip, label, sync_checklists, gen_new_url, \
35     generate_options, get_list_group_items, graph_hdrh_latency
36 from ..utils.url_processing import url_decode
37 from .graphs import graph_iterative, select_iterative_data
38
39
40 # Control panel partameters and their default values.
41 CP_PARAMS = {
42     "dd-rls-val": str(),
43     "dd-dut-opt": list(),
44     "dd-dut-dis": True,
45     "dd-dut-val": str(),
46     "dd-dutver-opt": list(),
47     "dd-dutver-dis": True,
48     "dd-dutver-val": str(),
49     "dd-phy-opt": list(),
50     "dd-phy-dis": True,
51     "dd-phy-val": str(),
52     "dd-area-opt": list(),
53     "dd-area-dis": True,
54     "dd-area-val": str(),
55     "dd-test-opt": list(),
56     "dd-test-dis": True,
57     "dd-test-val": str(),
58     "cl-core-opt": list(),
59     "cl-core-val": list(),
60     "cl-core-all-val": list(),
61     "cl-core-all-opt": C.CL_ALL_DISABLED,
62     "cl-frmsize-opt": list(),
63     "cl-frmsize-val": list(),
64     "cl-frmsize-all-val": list(),
65     "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
66     "cl-tsttype-opt": list(),
67     "cl-tsttype-val": list(),
68     "cl-tsttype-all-val": list(),
69     "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
70     "btn-add-dis": True,
71     "cl-normalize-val": list()
72 }
73
74
75 class Layout:
76     """The layout of the dash app and the callbacks.
77     """
78
79     def __init__(
80             self,
81             app: Flask,
82             data_iterative: pd.DataFrame,
83             html_layout_file: str,
84             graph_layout_file: str,
85             tooltip_file: str
86         ) -> None:
87         """Initialization:
88         - save the input parameters,
89         - read and pre-process the data,
90         - prepare data for the control panel,
91         - read HTML layout file,
92         - read tooltips from the tooltip file.
93
94         :param app: Flask application running the dash application.
95         :param html_layout_file: Path and name of the file specifying the HTML
96             layout of the dash application.
97         :param graph_layout_file: Path and name of the file with layout of
98             plot.ly graphs.
99         :param tooltip_file: Path and name of the yaml file specifying the
100             tooltips.
101         :type app: Flask
102         :type html_layout_file: str
103         :type graph_layout_file: str
104         :type tooltip_file: str
105         """
106
107         # Inputs
108         self._app = app
109         self._html_layout_file = html_layout_file
110         self._graph_layout_file = graph_layout_file
111         self._tooltip_file = tooltip_file
112         self._data = data_iterative
113
114         # Get structure of tests:
115         tbs = dict()
116         cols = [
117             "job", "test_id", "test_type", "dut_version", "tg_type", "release"
118         ]
119         for _, row in self._data[cols].drop_duplicates().iterrows():
120             rls = row["release"]
121             lst_job = row["job"].split("-")
122             dut = lst_job[1]
123             d_ver = row["dut_version"]
124             tbed = "-".join(lst_job[-2:])
125             lst_test_id = row["test_id"].split(".")
126             if dut == "dpdk":
127                 area = "dpdk"
128             else:
129                 area = ".".join(lst_test_id[3:-2])
130             suite = lst_test_id[-2].replace("2n1l-", "").replace("1n1l-", "").\
131                 replace("2n-", "")
132             test = lst_test_id[-1]
133             nic = suite.split("-")[0]
134             for drv in C.DRIVERS:
135                 if drv in test:
136                     driver = drv.replace("-", "_")
137                     test = test.replace(f"{drv}-", "")
138                     break
139             else:
140                 driver = "dpdk"
141             infra = "-".join((tbed, nic, driver))
142             lst_test = test.split("-")
143             framesize = lst_test[0]
144             core = lst_test[1] if lst_test[1] else "8C"
145             test = "-".join(lst_test[2: -1])
146
147             if tbs.get(rls, None) is None:
148                 tbs[rls] = dict()
149             if tbs[rls].get(dut, None) is None:
150                 tbs[rls][dut] = dict()
151             if tbs[rls][dut].get(d_ver, None) is None:
152                 tbs[rls][dut][d_ver] = dict()
153             if tbs[rls][dut][d_ver].get(area, None) is None:
154                 tbs[rls][dut][d_ver][area] = dict()
155             if tbs[rls][dut][d_ver][area].get(test, None) is None:
156                 tbs[rls][dut][d_ver][area][test] = dict()
157             if tbs[rls][dut][d_ver][area][test].get(infra, None) is None:
158                 tbs[rls][dut][d_ver][area][test][infra] = {
159                     "core": list(),
160                     "frame-size": list(),
161                     "test-type": list()
162                 }
163             tst_params = tbs[rls][dut][d_ver][area][test][infra]
164             if core.upper() not in tst_params["core"]:
165                 tst_params["core"].append(core.upper())
166             if framesize.upper() not in tst_params["frame-size"]:
167                 tst_params["frame-size"].append(framesize.upper())
168             if row["test_type"] == "mrr":
169                 if "MRR" not in tst_params["test-type"]:
170                     tst_params["test-type"].append("MRR")
171             elif row["test_type"] == "ndrpdr":
172                 if "NDR" not in tst_params["test-type"]:
173                     tst_params["test-type"].extend(("NDR", "PDR", ))
174             elif row["test_type"] == "hoststack" and \
175                     row["tg_type"] in ("iperf", "vpp"):
176                 if "BPS" not in tst_params["test-type"]:
177                     tst_params["test-type"].append("BPS")
178             elif row["test_type"] == "hoststack" and row["tg_type"] == "ab":
179                 if "CPS" not in tst_params["test-type"]:
180                     tst_params["test-type"].extend(("CPS", "RPS"))
181         self._spec_tbs = tbs
182
183         # Read from files:
184         self._html_layout = str()
185         self._graph_layout = None
186         self._tooltips = dict()
187
188         try:
189             with open(self._html_layout_file, "r") as file_read:
190                 self._html_layout = file_read.read()
191         except IOError as err:
192             raise RuntimeError(
193                 f"Not possible to open the file {self._html_layout_file}\n{err}"
194             )
195
196         try:
197             with open(self._graph_layout_file, "r") as file_read:
198                 self._graph_layout = load(file_read, Loader=FullLoader)
199         except IOError as err:
200             raise RuntimeError(
201                 f"Not possible to open the file {self._graph_layout_file}\n"
202                 f"{err}"
203             )
204         except YAMLError as err:
205             raise RuntimeError(
206                 f"An error occurred while parsing the specification file "
207                 f"{self._graph_layout_file}\n{err}"
208             )
209
210         try:
211             with open(self._tooltip_file, "r") as file_read:
212                 self._tooltips = load(file_read, Loader=FullLoader)
213         except IOError as err:
214             logging.warning(
215                 f"Not possible to open the file {self._tooltip_file}\n{err}"
216             )
217         except YAMLError as err:
218             logging.warning(
219                 f"An error occurred while parsing the specification file "
220                 f"{self._tooltip_file}\n{err}"
221             )
222
223         # Callbacks:
224         if self._app is not None and hasattr(self, "callbacks"):
225             self.callbacks(self._app)
226
227     @property
228     def html_layout(self):
229         return self._html_layout
230
231     def add_content(self):
232         """Top level method which generated the web page.
233
234         It generates:
235         - Store for user input data,
236         - Navigation bar,
237         - Main area with control panel and ploting area.
238
239         If no HTML layout is provided, an error message is displayed instead.
240
241         :returns: The HTML div with the whole page.
242         :rtype: html.Div
243         """
244
245         if self.html_layout and self._spec_tbs:
246             return html.Div(
247                 id="div-main",
248                 className="small",
249                 children=[
250                     dbc.Row(
251                         id="row-navbar",
252                         class_name="g-0",
253                         children=[
254                             self._add_navbar()
255                         ]
256                     ),
257                     dbc.Row(
258                         id="row-main",
259                         class_name="g-0",
260                         children=[
261                             dcc.Store(id="store-selected-tests"),
262                             dcc.Store(id="store-control-panel"),
263                             dcc.Location(id="url", refresh=False),
264                             self._add_ctrl_col(),
265                             self._add_plotting_col()
266                         ]
267                     ),
268                     dbc.Spinner(
269                         dbc.Offcanvas(
270                             class_name="w-50",
271                             id="offcanvas-metadata",
272                             title="Throughput And Latency",
273                             placement="end",
274                             is_open=False,
275                             children=[
276                                 dbc.Row(id="metadata-tput-lat"),
277                                 dbc.Row(id="metadata-hdrh-graph")
278                             ]
279                         ),
280                         delay_show=C.SPINNER_DELAY
281                     ),
282                     dbc.Offcanvas(
283                         class_name="w-75",
284                         id="offcanvas-documentation",
285                         title="Documentation",
286                         placement="end",
287                         is_open=False,
288                         children=html.Iframe(
289                             src=C.URL_DOC_REL_NOTES,
290                             width="100%",
291                             height="100%"
292                         )
293                     )
294                 ]
295             )
296         else:
297             return html.Div(
298                 id="div-main-error",
299                 children=[
300                     dbc.Alert(
301                         [
302                             "An Error Occured"
303                         ],
304                         color="danger"
305                     )
306                 ]
307             )
308
309     def _add_navbar(self):
310         """Add nav element with navigation panel. It is placed on the top.
311
312         :returns: Navigation bar.
313         :rtype: dbc.NavbarSimple
314         """
315         return dbc.NavbarSimple(
316             id="navbarsimple-main",
317             children=[
318                 dbc.NavItem(dbc.NavLink(
319                     C.REPORT_TITLE,
320                     active=True,
321                     external_link=True,
322                     href="/report"
323                 )),
324                 dbc.NavItem(dbc.NavLink(
325                     "Comparisons",
326                     external_link=True,
327                     href="/comparisons"
328                 )),
329                 dbc.NavItem(dbc.NavLink(
330                     "Coverage Data",
331                     external_link=True,
332                     href="/coverage"
333                 )),
334                 dbc.NavItem(dbc.NavLink(
335                     "Documentation",
336                     id="btn-documentation",
337                 ))
338             ],
339             brand=C.BRAND,
340             brand_href="/",
341             brand_external_link=True,
342             class_name="p-2",
343             fluid=True
344         )
345
346     def _add_ctrl_col(self) -> dbc.Col:
347         """Add column with controls. It is placed on the left side.
348
349         :returns: Column with the control panel.
350         :rtype: dbc.Col
351         """
352         return dbc.Col([
353             html.Div(
354                 children=self._add_ctrl_panel(),
355                 className="sticky-top"
356             )
357         ])
358
359     def _add_plotting_col(self) -> dbc.Col:
360         """Add column with plots. It is placed on the right side.
361
362         :returns: Column with plots.
363         :rtype: dbc.Col
364         """
365         return dbc.Col(
366             id="col-plotting-area",
367             children=[
368                 dbc.Spinner(
369                     children=[
370                         dbc.Row(
371                             id="plotting-area",
372                             class_name="g-0 p-0",
373                             children=[
374                                 C.PLACEHOLDER
375                             ]
376                         )
377                     ]
378                 )
379             ],
380             width=9
381         )
382
383     def _add_ctrl_panel(self) -> list:
384         """Add control panel.
385
386         :returns: Control panel.
387         :rtype: list
388         """
389         return [
390             dbc.Row(
391                 class_name="g-0 p-1",
392                 children=[
393                     dbc.InputGroup(
394                         [
395                             dbc.InputGroupText(
396                                 children=show_tooltip(
397                                     self._tooltips,
398                                     "help-release",
399                                     "CSIT Release"
400                                 )
401                             ),
402                             dbc.Select(
403                                 id={"type": "ctrl-dd", "index": "rls"},
404                                 placeholder="Select a Release...",
405                                 options=sorted(
406                                     [
407                                         {"label": k, "value": k} \
408                                             for k in self._spec_tbs.keys()
409                                     ],
410                                     key=lambda d: d["label"]
411                                 )
412                             )
413                         ],
414                         size="sm"
415                     )
416                 ]
417             ),
418             dbc.Row(
419                 class_name="g-0 p-1",
420                 children=[
421                     dbc.InputGroup(
422                         [
423                             dbc.InputGroupText(
424                                 children=show_tooltip(
425                                     self._tooltips,
426                                     "help-dut",
427                                     "DUT"
428                                 )
429                             ),
430                             dbc.Select(
431                                 id={"type": "ctrl-dd", "index": "dut"},
432                                 placeholder="Select a Device under Test..."
433                             )
434                         ],
435                         size="sm"
436                     )
437                 ]
438             ),
439             dbc.Row(
440                 class_name="g-0 p-1",
441                 children=[
442                     dbc.InputGroup(
443                         [
444                             dbc.InputGroupText(
445                                 children=show_tooltip(
446                                     self._tooltips,
447                                     "help-dut-ver",
448                                     "DUT Version"
449                                 )
450                             ),
451                             dbc.Select(
452                                 id={"type": "ctrl-dd", "index": "dutver"},
453                                 placeholder=\
454                                     "Select a Version of Device under Test..."
455                             )
456                         ],
457                         size="sm"
458                     )
459                 ]
460             ),
461             dbc.Row(
462                 class_name="g-0 p-1",
463                 children=[
464                     dbc.InputGroup(
465                         [
466                             dbc.InputGroupText(
467                                 children=show_tooltip(
468                                     self._tooltips,
469                                     "help-area",
470                                     "Area"
471                                 )
472                             ),
473                             dbc.Select(
474                                 id={"type": "ctrl-dd", "index": "area"},
475                                 placeholder="Select an Area..."
476                             )
477                         ],
478                         size="sm"
479                     )
480                 ]
481             ),
482             dbc.Row(
483                 class_name="g-0 p-1",
484                 children=[
485                     dbc.InputGroup(
486                         [
487                             dbc.InputGroupText(
488                                 children=show_tooltip(
489                                     self._tooltips,
490                                     "help-test",
491                                     "Test"
492                                 )
493                             ),
494                             dbc.Select(
495                                 id={"type": "ctrl-dd", "index": "test"},
496                                 placeholder="Select a Test..."
497                             )
498                         ],
499                         size="sm"
500                     )
501                 ]
502             ),
503             dbc.Row(
504                 class_name="g-0 p-1",
505                 children=[
506                     dbc.InputGroup(
507                         [
508                             dbc.InputGroupText(
509                                 children=show_tooltip(
510                                     self._tooltips,
511                                     "help-infra",
512                                     "Infra"
513                                 )
514                             ),
515                             dbc.Select(
516                                 id={"type": "ctrl-dd", "index": "phy"},
517                                 placeholder=\
518                                     "Select a Physical Test Bed Topology..."
519                             )
520                         ],
521                         size="sm"
522                     )
523                 ]
524             ),
525             dbc.Row(
526                 class_name="g-0 p-1",
527                 children=[
528                     dbc.InputGroup(
529                         [
530                             dbc.InputGroupText(
531                                 children=show_tooltip(
532                                     self._tooltips,
533                                     "help-framesize",
534                                     "Frame Size"
535                                 )
536                             ),
537                             dbc.Col(
538                                 children=[
539                                     dbc.Checklist(
540                                         id={
541                                             "type": "ctrl-cl",
542                                             "index": "frmsize-all"
543                                         },
544                                         options=C.CL_ALL_DISABLED,
545                                         inline=True,
546                                         class_name="ms-2"
547                                     )
548                                 ],
549                                 width=2
550                             ),
551                             dbc.Col(
552                                 children=[
553                                     dbc.Checklist(
554                                         id={
555                                             "type": "ctrl-cl",
556                                             "index": "frmsize"
557                                         },
558                                         inline=True
559                                     )
560                                 ]
561                             )
562                         ],
563                         style={"align-items": "center"},
564                         size="sm"
565                     )
566                 ]
567             ),
568             dbc.Row(
569                 class_name="g-0 p-1",
570                 children=[
571                     dbc.InputGroup(
572                         [
573                             dbc.InputGroupText(
574                                 children=show_tooltip(
575                                     self._tooltips,
576                                     "help-cores",
577                                     "Number of Cores"
578                                 )
579                             ),
580                             dbc.Col(
581                                 children=[
582                                     dbc.Checklist(
583                                         id={
584                                             "type": "ctrl-cl",
585                                             "index": "core-all"
586                                         },
587                                         options=C.CL_ALL_DISABLED,
588                                         inline=True,
589                                         class_name="ms-2"
590                                     )
591                                 ],
592                                 width=2
593                             ),
594                             dbc.Col(
595                                 children=[
596                                     dbc.Checklist(
597                                         id={
598                                             "type": "ctrl-cl",
599                                             "index": "core"
600                                         },
601                                         inline=True
602                                     )
603                                 ]
604                             )
605                         ],
606                         style={"align-items": "center"},
607                         size="sm"
608                     )
609                 ]
610             ),
611             dbc.Row(
612                 class_name="g-0 p-1",
613                 children=[
614                     dbc.InputGroup(
615                         [
616                             dbc.InputGroupText(
617                                 children=show_tooltip(
618                                     self._tooltips,
619                                     "help-ttype",
620                                     "Test Type"
621                                 )
622                             ),
623                             dbc.Col(
624                                 children=[
625                                     dbc.Checklist(
626                                         id={
627                                             "type": "ctrl-cl",
628                                             "index": "tsttype-all"
629                                         },
630                                         options=C.CL_ALL_DISABLED,
631                                         inline=True,
632                                         class_name="ms-2"
633                                     )
634                                 ],
635                                 width=2
636                             ),
637                             dbc.Col(
638                                 children=[
639                                     dbc.Checklist(
640                                         id={
641                                             "type": "ctrl-cl",
642                                             "index": "tsttype"
643                                         },
644                                         inline=True
645                                     )
646                                 ]
647                             )
648                         ],
649                         style={"align-items": "center"},
650                         size="sm"
651                     )
652                 ]
653             ),
654             dbc.Row(
655                 class_name="g-0 p-1",
656                 children=[
657                     dbc.InputGroup(
658                         [
659                             dbc.InputGroupText(
660                                 children=show_tooltip(
661                                     self._tooltips,
662                                     "help-normalize",
663                                     "Normalization"
664                                 )
665                             ),
666                             dbc.Col(
667                                 children=[
668                                     dbc.Checklist(
669                                         id="normalize",
670                                         options=[{
671                                             "value": "normalize",
672                                             "label": (
673                                                 "Normalize to CPU frequency "
674                                                 "2GHz"
675                                             )
676                                         }],
677                                         value=[],
678                                         inline=True,
679                                         class_name="ms-2"
680                                     )
681                                 ]
682                             )
683                         ],
684                         style={"align-items": "center"},
685                         size="sm"
686                     )
687                 ]
688             ),
689             dbc.Row(
690                 class_name="g-0 p-1",
691                 children=[
692                     dbc.Button(
693                         id={"type": "ctrl-btn", "index": "add-test"},
694                         children="Add Selected",
695                         color="info"
696                     )
697                 ]
698             ),
699             dbc.Row(
700                 id="row-card-sel-tests",
701                 class_name="g-0 p-1",
702                 style=C.STYLE_DISABLED,
703                 children=[
704                     dbc.ListGroup(
705                         class_name="overflow-auto p-0",
706                         id="lg-selected",
707                         children=[],
708                         style={"max-height": "20em"},
709                         flush=True
710                     )
711                 ]
712             ),
713             dbc.Row(
714                 id="row-btns-sel-tests",
715                 class_name="g-0 p-1",
716                 style=C.STYLE_DISABLED,
717                 children=[
718                     dbc.ButtonGroup(
719                         children=[
720                             dbc.Button(
721                                 id={"type": "ctrl-btn", "index": "rm-test"},
722                                 children="Remove Selected",
723                                 class_name="w-100",
724                                 color="info",
725                                 disabled=False
726                             ),
727                             dbc.Button(
728                                 id={"type": "ctrl-btn", "index": "rm-test-all"},
729                                 children="Remove All",
730                                 class_name="w-100",
731                                 color="info",
732                                 disabled=False
733                             )
734                         ]
735                     )
736                 ]
737             )
738         ]
739
740     def _get_plotting_area(
741             self,
742             tests: list,
743             normalize: bool,
744             url: str
745         ) -> list:
746         """Generate the plotting area with all its content.
747
748         :param tests: List of tests to be displayed in the graphs.
749         :param normalize: If true, the values in graphs are normalized.
750         :param url: URL to be displayed in the modal window.
751         :type tests: list
752         :type normalize: bool
753         :type url: str
754         :returns: List of rows with elements to be displayed in the plotting
755             area.
756         :rtype: list
757         """
758         if not tests:
759             return C.PLACEHOLDER
760
761         figs = graph_iterative(self._data, tests, self._graph_layout, normalize)
762
763         if not figs[0]:
764             return C.PLACEHOLDER
765
766         row_items = [
767             dbc.Col(
768                 children=dcc.Graph(
769                     id={"type": "graph", "index": "tput"},
770                     figure=figs[0]
771                 ),
772                 class_name="g-0 p-1",
773                 width=6
774             )
775         ]
776
777         if figs[1]:
778             row_items.append(
779                 dbc.Col(
780                     children=dcc.Graph(
781                         id={"type": "graph", "index": "lat"},
782                         figure=figs[1]
783                     ),
784                     class_name="g-0 p-1",
785                     width=6
786                 )
787             )
788
789         return [
790             dbc.Row(
791                 children=row_items,
792                 class_name="g-0 p-0",
793             ),
794             dbc.Row(
795                 [
796                     dbc.Col([html.Div(
797                         [
798                             dbc.Button(
799                                 id="plot-btn-url",
800                                 children="Show URL",
801                                 class_name="me-1",
802                                 color="info",
803                                 style={
804                                     "text-transform": "none",
805                                     "padding": "0rem 1rem"
806                                 }
807                             ),
808                             dbc.Modal(
809                                 [
810                                     dbc.ModalHeader(dbc.ModalTitle("URL")),
811                                     dbc.ModalBody(url)
812                                 ],
813                                 id="plot-mod-url",
814                                 size="xl",
815                                 is_open=False,
816                                 scrollable=True
817                             ),
818                             dbc.Button(
819                                 id="plot-btn-download",
820                                 children="Download Data",
821                                 class_name="me-1",
822                                 color="info",
823                                 style={
824                                     "text-transform": "none",
825                                     "padding": "0rem 1rem"
826                                 }
827                             ),
828                             dcc.Download(id="download-iterative-data")
829                         ],
830                         className=\
831                             "d-grid gap-0 d-md-flex justify-content-md-end"
832                     )])
833                 ],
834                 class_name="g-0 p-0"
835             )
836         ]
837
838     def callbacks(self, app):
839         """Callbacks for the whole application.
840
841         :param app: The application.
842         :type app: Flask
843         """
844
845         @app.callback(
846             [
847                 Output("store-control-panel", "data"),
848                 Output("store-selected-tests", "data"),
849                 Output("plotting-area", "children"),
850                 Output("row-card-sel-tests", "style"),
851                 Output("row-btns-sel-tests", "style"),
852                 Output("lg-selected", "children"),
853
854                 Output({"type": "ctrl-dd", "index": "rls"}, "value"),
855                 Output({"type": "ctrl-dd", "index": "dut"}, "options"),
856                 Output({"type": "ctrl-dd", "index": "dut"}, "disabled"),
857                 Output({"type": "ctrl-dd", "index": "dut"}, "value"),
858                 Output({"type": "ctrl-dd", "index": "dutver"}, "options"),
859                 Output({"type": "ctrl-dd", "index": "dutver"}, "disabled"),
860                 Output({"type": "ctrl-dd", "index": "dutver"}, "value"),
861                 Output({"type": "ctrl-dd", "index": "phy"}, "options"),
862                 Output({"type": "ctrl-dd", "index": "phy"}, "disabled"),
863                 Output({"type": "ctrl-dd", "index": "phy"}, "value"),
864                 Output({"type": "ctrl-dd", "index": "area"}, "options"),
865                 Output({"type": "ctrl-dd", "index": "area"}, "disabled"),
866                 Output({"type": "ctrl-dd", "index": "area"}, "value"),
867                 Output({"type": "ctrl-dd", "index": "test"}, "options"),
868                 Output({"type": "ctrl-dd", "index": "test"}, "disabled"),
869                 Output({"type": "ctrl-dd", "index": "test"}, "value"),
870                 Output({"type": "ctrl-cl", "index": "core"}, "options"),
871                 Output({"type": "ctrl-cl", "index": "core"}, "value"),
872                 Output({"type": "ctrl-cl", "index": "core-all"}, "value"),
873                 Output({"type": "ctrl-cl", "index": "core-all"}, "options"),
874                 Output({"type": "ctrl-cl", "index": "frmsize"}, "options"),
875                 Output({"type": "ctrl-cl", "index": "frmsize"}, "value"),
876                 Output({"type": "ctrl-cl", "index": "frmsize-all"}, "value"),
877                 Output({"type": "ctrl-cl", "index": "frmsize-all"}, "options"),
878                 Output({"type": "ctrl-cl", "index": "tsttype"}, "options"),
879                 Output({"type": "ctrl-cl", "index": "tsttype"}, "value"),
880                 Output({"type": "ctrl-cl", "index": "tsttype-all"}, "value"),
881                 Output({"type": "ctrl-cl", "index": "tsttype-all"}, "options"),
882                 Output({"type": "ctrl-btn", "index": "add-test"}, "disabled"),
883                 Output("normalize", "value")
884             ],
885             [
886                 State("store-control-panel", "data"),
887                 State("store-selected-tests", "data"),
888                 State({"type": "sel-cl", "index": ALL}, "value")
889             ],
890             [
891                 Input("url", "href"),
892                 Input("normalize", "value"),
893
894                 Input({"type": "ctrl-dd", "index": ALL}, "value"),
895                 Input({"type": "ctrl-cl", "index": ALL}, "value"),
896                 Input({"type": "ctrl-btn", "index": ALL}, "n_clicks")
897             ]
898         )
899         def _update_application(
900                 control_panel: dict,
901                 store_sel: list,
902                 lst_sel: list,
903                 href: str,
904                 normalize: list,
905                 *_
906             ) -> tuple:
907             """Update the application when the event is detected.
908             """
909
910             ctrl_panel = ControlPanel(CP_PARAMS, control_panel)
911             on_draw = False
912
913             # Parse the url:
914             parsed_url = url_decode(href)
915             if parsed_url:
916                 url_params = parsed_url["params"]
917             else:
918                 url_params = None
919
920             plotting_area = no_update
921             row_card_sel_tests = no_update
922             row_btns_sel_tests = no_update
923             lg_selected = no_update
924
925             trigger = Trigger(callback_context.triggered)
926
927             if trigger.type == "url" and url_params:
928                 try:
929                     store_sel = literal_eval(url_params["store_sel"][0])
930                     normalize = literal_eval(url_params["norm"][0])
931                 except (KeyError, IndexError, AttributeError):
932                     pass
933                 if store_sel:
934                     row_card_sel_tests = C.STYLE_ENABLED
935                     row_btns_sel_tests = C.STYLE_ENABLED
936                     last_test = store_sel[-1]
937                     test = self._spec_tbs[last_test["rls"]][last_test["dut"]]\
938                         [last_test["dutver"]][last_test["area"]]\
939                             [last_test["test"]][last_test["phy"]]
940                     ctrl_panel.set({
941                         "dd-rls-val": last_test["rls"],
942                         "dd-dut-val": last_test["dut"],
943                         "dd-dut-opt": generate_options(
944                             self._spec_tbs[last_test["rls"]].keys()
945                         ),
946                         "dd-dut-dis": False,
947                         "dd-dutver-val": last_test["dutver"],
948                         "dd-dutver-opt": generate_options(
949                             self._spec_tbs[last_test["rls"]]\
950                                 [last_test["dut"]].keys()
951                         ),
952                         "dd-dutver-dis": False,
953                         "dd-area-val": last_test["area"],
954                         "dd-area-opt": [
955                             {"label": label(v), "value": v} for v in \
956                                 sorted(self._spec_tbs[last_test["rls"]]\
957                                     [last_test["dut"]]\
958                                         [last_test["dutver"]].keys())
959                         ],
960                         "dd-area-dis": False,
961                         "dd-test-val": last_test["test"],
962                         "dd-test-opt": generate_options(
963                             self._spec_tbs[last_test["rls"]][last_test["dut"]]\
964                                 [last_test["dutver"]][last_test["area"]].keys()
965                         ),
966                         "dd-test-dis": False,
967                         "dd-phy-val": last_test["phy"],
968                         "dd-phy-opt": generate_options(
969                             self._spec_tbs[last_test["rls"]][last_test["dut"]]\
970                                 [last_test["dutver"]][last_test["area"]]\
971                                     [last_test["test"]].keys()
972                         ),
973                         "dd-phy-dis": False,
974                         "cl-core-opt": generate_options(test["core"]),
975                         "cl-core-val": [last_test["core"].upper(), ],
976                         "cl-core-all-val": list(),
977                         "cl-core-all-opt": C.CL_ALL_ENABLED,
978                         "cl-frmsize-opt": generate_options(test["frame-size"]),
979                         "cl-frmsize-val": [last_test["framesize"].upper(), ],
980                         "cl-frmsize-all-val": list(),
981                         "cl-frmsize-all-opt": C.CL_ALL_ENABLED,
982                         "cl-tsttype-opt": generate_options(test["test-type"]),
983                         "cl-tsttype-val": [last_test["testtype"].upper(), ],
984                         "cl-tsttype-all-val": list(),
985                         "cl-tsttype-all-opt": C.CL_ALL_ENABLED,
986                         "cl-normalize-val": normalize,
987                         "btn-add-dis": False
988                     })
989                     on_draw = True
990             elif trigger.type == "normalize":
991                 ctrl_panel.set({"cl-normalize-val": normalize})
992                 on_draw = True
993             elif trigger.type == "ctrl-dd":
994                 if trigger.idx == "rls":
995                     try:
996                         options = generate_options(
997                             self._spec_tbs[trigger.value].keys()
998                         )
999                         disabled = False
1000                     except KeyError:
1001                         options = list()
1002                         disabled = True
1003                     ctrl_panel.set({
1004                         "dd-rls-val": trigger.value,
1005                         "dd-dut-val": str(),
1006                         "dd-dut-opt": options,
1007                         "dd-dut-dis": disabled,
1008                         "dd-dutver-val": str(),
1009                         "dd-dutver-opt": list(),
1010                         "dd-dutver-dis": True,
1011                         "dd-phy-val": str(),
1012                         "dd-phy-opt": list(),
1013                         "dd-phy-dis": True,
1014                         "dd-area-val": str(),
1015                         "dd-area-opt": list(),
1016                         "dd-area-dis": True,
1017                         "dd-test-val": str(),
1018                         "dd-test-opt": list(),
1019                         "dd-test-dis": True,
1020                         "cl-core-opt": list(),
1021                         "cl-core-val": list(),
1022                         "cl-core-all-val": list(),
1023                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1024                         "cl-frmsize-opt": list(),
1025                         "cl-frmsize-val": list(),
1026                         "cl-frmsize-all-val": list(),
1027                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1028                         "cl-tsttype-opt": list(),
1029                         "cl-tsttype-val": list(),
1030                         "cl-tsttype-all-val": list(),
1031                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1032                         "btn-add-dis": True
1033                     })
1034                 elif trigger.idx == "dut":
1035                     try:
1036                         rls = ctrl_panel.get("dd-rls-val")
1037                         dut = self._spec_tbs[rls][trigger.value]
1038                         options = generate_options(dut.keys())
1039                         disabled = False
1040                     except KeyError:
1041                         options = list()
1042                         disabled = True
1043                     ctrl_panel.set({
1044                         "dd-dut-val": trigger.value,
1045                         "dd-dutver-val": str(),
1046                         "dd-dutver-opt": options,
1047                         "dd-dutver-dis": disabled,
1048                         "dd-phy-val": str(),
1049                         "dd-phy-opt": list(),
1050                         "dd-phy-dis": True,
1051                         "dd-area-val": str(),
1052                         "dd-area-opt": list(),
1053                         "dd-area-dis": True,
1054                         "dd-test-val": str(),
1055                         "dd-test-opt": list(),
1056                         "dd-test-dis": True,
1057                         "cl-core-opt": list(),
1058                         "cl-core-val": list(),
1059                         "cl-core-all-val": list(),
1060                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1061                         "cl-frmsize-opt": list(),
1062                         "cl-frmsize-val": list(),
1063                         "cl-frmsize-all-val": list(),
1064                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1065                         "cl-tsttype-opt": list(),
1066                         "cl-tsttype-val": list(),
1067                         "cl-tsttype-all-val": list(),
1068                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1069                         "btn-add-dis": True
1070                     })
1071                 elif trigger.idx == "dutver":
1072                     try:
1073                         rls = ctrl_panel.get("dd-rls-val")
1074                         dut = ctrl_panel.get("dd-dut-val")
1075                         dutver = self._spec_tbs[rls][dut][trigger.value]
1076                         options = [{"label": label(v), "value": v} \
1077                             for v in sorted(dutver.keys())]
1078                         disabled = False
1079                     except KeyError:
1080                         options = list()
1081                         disabled = True
1082                     ctrl_panel.set({
1083                         "dd-dutver-val": trigger.value,
1084                         "dd-area-val": str(),
1085                         "dd-area-opt": options,
1086                         "dd-area-dis": disabled,
1087                         "dd-test-val": str(),
1088                         "dd-test-opt": list(),
1089                         "dd-test-dis": True,
1090                         "dd-phy-val": str(),
1091                         "dd-phy-opt": list(),
1092                         "dd-phy-dis": True,
1093                         "cl-core-opt": list(),
1094                         "cl-core-val": list(),
1095                         "cl-core-all-val": list(),
1096                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1097                         "cl-frmsize-opt": list(),
1098                         "cl-frmsize-val": list(),
1099                         "cl-frmsize-all-val": list(),
1100                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1101                         "cl-tsttype-opt": list(),
1102                         "cl-tsttype-val": list(),
1103                         "cl-tsttype-all-val": list(),
1104                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1105                         "btn-add-dis": True
1106                     })
1107                 elif trigger.idx == "area":
1108                     try:
1109                         rls = ctrl_panel.get("dd-rls-val")
1110                         dut = ctrl_panel.get("dd-dut-val")
1111                         dutver = ctrl_panel.get("dd-dutver-val")
1112                         area = self._spec_tbs[rls][dut][dutver][trigger.value]
1113                         options = generate_options(area.keys())
1114                         disabled = False
1115                     except KeyError:
1116                         options = list()
1117                         disabled = True
1118                     ctrl_panel.set({
1119                         "dd-area-val": trigger.value,
1120                         "dd-test-val": str(),
1121                         "dd-test-opt": options,
1122                         "dd-test-dis": disabled,
1123                         "dd-phy-val": str(),
1124                         "dd-phy-opt": list(),
1125                         "dd-phy-dis": True,
1126                         "cl-core-opt": list(),
1127                         "cl-core-val": list(),
1128                         "cl-core-all-val": list(),
1129                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1130                         "cl-frmsize-opt": list(),
1131                         "cl-frmsize-val": list(),
1132                         "cl-frmsize-all-val": list(),
1133                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1134                         "cl-tsttype-opt": list(),
1135                         "cl-tsttype-val": list(),
1136                         "cl-tsttype-all-val": list(),
1137                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1138                         "btn-add-dis": True
1139                     })
1140                 elif trigger.idx == "test":
1141                     try:
1142                         rls = ctrl_panel.get("dd-rls-val")
1143                         dut = ctrl_panel.get("dd-dut-val")
1144                         dutver = ctrl_panel.get("dd-dutver-val")
1145                         area = ctrl_panel.get("dd-area-val")
1146                         test = self._spec_tbs[rls][dut][dutver][area]\
1147                             [trigger.value]
1148                         options = generate_options(test.keys())
1149                         disabled = False
1150                     except KeyError:
1151                         options = list()
1152                         disabled = True
1153                     ctrl_panel.set({
1154                         "dd-test-val": trigger.value,
1155                         "dd-phy-val": str(),
1156                         "dd-phy-opt": options,
1157                         "dd-phy-dis": disabled,
1158                         "cl-core-opt": list(),
1159                         "cl-core-val": list(),
1160                         "cl-core-all-val": list(),
1161                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1162                         "cl-frmsize-opt": list(),
1163                         "cl-frmsize-val": list(),
1164                         "cl-frmsize-all-val": list(),
1165                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1166                         "cl-tsttype-opt": list(),
1167                         "cl-tsttype-val": list(),
1168                         "cl-tsttype-all-val": list(),
1169                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1170                         "btn-add-dis": True
1171                     })
1172                 elif trigger.idx == "phy":
1173                     rls = ctrl_panel.get("dd-rls-val")
1174                     dut = ctrl_panel.get("dd-dut-val")
1175                     dutver = ctrl_panel.get("dd-dutver-val")
1176                     area = ctrl_panel.get("dd-area-val")
1177                     test = ctrl_panel.get("dd-test-val")
1178                     if all((rls, dut, dutver, area, test, trigger.value, )):
1179                         phy = self._spec_tbs[rls][dut][dutver][area][test]\
1180                             [trigger.value]
1181                         ctrl_panel.set({
1182                             "dd-phy-val": trigger.value,
1183                             "cl-core-opt": generate_options(phy["core"]),
1184                             "cl-core-val": list(),
1185                             "cl-core-all-val": list(),
1186                             "cl-core-all-opt": C.CL_ALL_ENABLED,
1187                             "cl-frmsize-opt": \
1188                                 generate_options(phy["frame-size"]),
1189                             "cl-frmsize-val": list(),
1190                             "cl-frmsize-all-val": list(),
1191                             "cl-frmsize-all-opt": C.CL_ALL_ENABLED,
1192                             "cl-tsttype-opt": \
1193                                 generate_options(phy["test-type"]),
1194                             "cl-tsttype-val": list(),
1195                             "cl-tsttype-all-val": list(),
1196                             "cl-tsttype-all-opt": C.CL_ALL_ENABLED,
1197                             "btn-add-dis": True
1198                         })
1199             elif trigger.type == "ctrl-cl":
1200                 param = trigger.idx.split("-")[0]
1201                 if "-all" in trigger.idx:
1202                     c_sel, c_all, c_id = list(), trigger.value, "all"
1203                 else:
1204                     c_sel, c_all, c_id = trigger.value, list(), str()
1205                 val_sel, val_all = sync_checklists(
1206                     options=ctrl_panel.get(f"cl-{param}-opt"),
1207                     sel=c_sel,
1208                     all=c_all,
1209                     id=c_id
1210                 )
1211                 ctrl_panel.set({
1212                     f"cl-{param}-val": val_sel,
1213                     f"cl-{param}-all-val": val_all,
1214                 })
1215                 if all((ctrl_panel.get("cl-core-val"),
1216                         ctrl_panel.get("cl-frmsize-val"),
1217                         ctrl_panel.get("cl-tsttype-val"), )):
1218                     ctrl_panel.set({"btn-add-dis": False})
1219                 else:
1220                     ctrl_panel.set({"btn-add-dis": True})
1221             elif trigger.type == "ctrl-btn":
1222                 on_draw = True
1223                 if trigger.idx == "add-test":
1224                     rls = ctrl_panel.get("dd-rls-val")
1225                     dut = ctrl_panel.get("dd-dut-val")
1226                     dutver = ctrl_panel.get("dd-dutver-val")
1227                     phy = ctrl_panel.get("dd-phy-val")
1228                     area = ctrl_panel.get("dd-area-val")
1229                     test = ctrl_panel.get("dd-test-val")
1230                     # Add selected test to the list of tests in store:
1231                     if store_sel is None:
1232                         store_sel = list()
1233                     for core in ctrl_panel.get("cl-core-val"):
1234                         for framesize in ctrl_panel.get("cl-frmsize-val"):
1235                             for ttype in ctrl_panel.get("cl-tsttype-val"):
1236                                 if dut == "trex":
1237                                     core = str()
1238                                 tid = "-".join((
1239                                     rls,
1240                                     dut,
1241                                     dutver,
1242                                     phy.replace("af_xdp", "af-xdp"),
1243                                     area,
1244                                     framesize.lower(),
1245                                     core.lower(),
1246                                     test,
1247                                     ttype.lower()
1248                                 ))
1249                                 if tid not in [i["id"] for i in store_sel]:
1250                                     store_sel.append({
1251                                         "id": tid,
1252                                         "rls": rls,
1253                                         "dut": dut,
1254                                         "dutver": dutver,
1255                                         "phy": phy,
1256                                         "area": area,
1257                                         "test": test,
1258                                         "framesize": framesize.lower(),
1259                                         "core": core.lower(),
1260                                         "testtype": ttype.lower()
1261                                     })
1262                     store_sel = sorted(store_sel, key=lambda d: d["id"])
1263                     if C.CLEAR_ALL_INPUTS:
1264                         ctrl_panel.set(ctrl_panel.defaults)
1265                 elif trigger.idx == "rm-test" and lst_sel:
1266                     new_store_sel = list()
1267                     for idx, item in enumerate(store_sel):
1268                         if not lst_sel[idx]:
1269                             new_store_sel.append(item)
1270                     store_sel = new_store_sel
1271                 elif trigger.idx == "rm-test-all":
1272                     store_sel = list()
1273
1274             if on_draw:
1275                 if store_sel:
1276                     lg_selected = get_list_group_items(
1277                         store_sel, "sel-cl", add_index=True
1278                     )
1279                     plotting_area = self._get_plotting_area(
1280                         store_sel,
1281                         bool(normalize),
1282                         gen_new_url(
1283                             parsed_url,
1284                             {"store_sel": store_sel, "norm": normalize}
1285                         )
1286                     )
1287                     row_card_sel_tests = C.STYLE_ENABLED
1288                     row_btns_sel_tests = C.STYLE_ENABLED
1289                 else:
1290                     plotting_area = C.PLACEHOLDER
1291                     row_card_sel_tests = C.STYLE_DISABLED
1292                     row_btns_sel_tests = C.STYLE_DISABLED
1293                     store_sel = list()
1294
1295             ret_val = [
1296                 ctrl_panel.panel,
1297                 store_sel,
1298                 plotting_area,
1299                 row_card_sel_tests,
1300                 row_btns_sel_tests,
1301                 lg_selected
1302             ]
1303             ret_val.extend(ctrl_panel.values)
1304             return ret_val
1305
1306         @app.callback(
1307             Output("plot-mod-url", "is_open"),
1308             [Input("plot-btn-url", "n_clicks")],
1309             [State("plot-mod-url", "is_open")],
1310         )
1311         def toggle_plot_mod_url(n, is_open):
1312             """Toggle the modal window with url.
1313             """
1314             if n:
1315                 return not is_open
1316             return is_open
1317
1318         @app.callback(
1319             Output("download-iterative-data", "data"),
1320             State("store-selected-tests", "data"),
1321             Input("plot-btn-download", "n_clicks"),
1322             prevent_initial_call=True
1323         )
1324         def _download_iterative_data(store_sel, _):
1325             """Download the data
1326
1327             :param store_sel: List of tests selected by user stored in the
1328                 browser.
1329             :type store_sel: list
1330             :returns: dict of data frame content (base64 encoded) and meta data
1331                 used by the Download component.
1332             :rtype: dict
1333             """
1334
1335             if not store_sel:
1336                 raise PreventUpdate
1337
1338             df = pd.DataFrame()
1339             for itm in store_sel:
1340                 sel_data = select_iterative_data(self._data, itm)
1341                 if sel_data is None:
1342                     continue
1343                 df = pd.concat([df, sel_data], ignore_index=True)
1344
1345             return dcc.send_data_frame(df.to_csv, C.REPORT_DOWNLOAD_FILE_NAME)
1346
1347         @app.callback(
1348             Output("metadata-tput-lat", "children"),
1349             Output("metadata-hdrh-graph", "children"),
1350             Output("offcanvas-metadata", "is_open"),
1351             Input({"type": "graph", "index": ALL}, "clickData"),
1352             prevent_initial_call=True
1353         )
1354         def _show_metadata_from_graphs(graph_data: dict) -> tuple:
1355             """Generates the data for the offcanvas displayed when a particular
1356             point in a graph is clicked on.
1357
1358             :param graph_data: The data from the clicked point in the graph.
1359             :type graph_data: dict
1360             :returns: The data to be displayed on the offcanvas and the
1361                 information to show the offcanvas.
1362             :rtype: tuple(list, list, bool)
1363             """
1364
1365             trigger = Trigger(callback_context.triggered)
1366
1367             try:
1368                 idx = 0 if trigger.idx == "tput" else 1
1369                 graph_data = graph_data[idx]["points"]
1370             except (IndexError, KeyError, ValueError, TypeError):
1371                 raise PreventUpdate
1372
1373             def _process_stats(data: list, param: str) -> list:
1374                 """Process statistical data provided by plot.ly box graph.
1375
1376                 :param data: Statistical data provided by plot.ly box graph.
1377                 :param param: Parameter saying if the data come from "tput" or
1378                     "lat" graph.
1379                 :type data: list
1380                 :type param: str
1381                 :returns: Listo of tuples where the first value is the
1382                     statistic's name and the secont one it's value.
1383                 :rtype: list
1384                 """
1385                 if len(data) == 7:
1386                     stats = ("max", "upper fence", "q3", "median", "q1",
1387                             "lower fence", "min")
1388                 elif len(data) == 9:
1389                     stats = ("outlier", "max", "upper fence", "q3", "median",
1390                             "q1", "lower fence", "min", "outlier")
1391                 elif len(data) == 1:
1392                     if param == "lat":
1393                         stats = ("average latency at 50% PDR", )
1394                     else:
1395                         stats = ("throughput", )
1396                 else:
1397                     return list()
1398                 unit = " [us]" if param == "lat" else str()
1399                 return [(f"{stat}{unit}", f"{value['y']:,.0f}")
1400                         for stat, value in zip(stats, data)]
1401
1402             customdata = graph_data[0].get("customdata", dict())
1403             datapoint = customdata.get("metadata", dict())
1404             hdrh_data = customdata.get("hdrh", dict())
1405
1406             list_group_items = list()
1407             for k, v in datapoint.items():
1408                 if k == "csit-ref":
1409                     if len(graph_data) > 1:
1410                         continue
1411                     list_group_item = dbc.ListGroupItem([
1412                         dbc.Badge(k),
1413                         html.A(v, href=f"{C.URL_JENKINS}{v}", target="_blank")
1414                     ])
1415                 else:
1416                     list_group_item = dbc.ListGroupItem([dbc.Badge(k), v])
1417                 list_group_items.append(list_group_item)
1418
1419             graph = list()
1420             if trigger.idx == "tput":
1421                 title = "Throughput"
1422             elif trigger.idx == "lat":
1423                 title = "Latency"
1424                 if len(graph_data) == 1:
1425                     if hdrh_data:
1426                         graph = [dbc.Card(
1427                             class_name="gy-2 p-0",
1428                             children=[
1429                                 dbc.CardHeader(hdrh_data.pop("name")),
1430                                 dbc.CardBody(dcc.Graph(
1431                                     id="hdrh-latency-graph",
1432                                     figure=graph_hdrh_latency(
1433                                         hdrh_data, self._graph_layout
1434                                     )
1435                                 ))
1436                             ])
1437                         ]
1438             else:
1439                 raise PreventUpdate
1440
1441             for k, v in _process_stats(graph_data, trigger.idx):
1442                 list_group_items.append(dbc.ListGroupItem([dbc.Badge(k), v]))
1443
1444             metadata = [
1445                 dbc.Card(
1446                     class_name="gy-2 p-0",
1447                     children=[
1448                         dbc.CardHeader(children=[
1449                             dcc.Clipboard(
1450                                 target_id="tput-lat-metadata",
1451                                 title="Copy",
1452                                 style={"display": "inline-block"}
1453                             ),
1454                             title
1455                         ]),
1456                         dbc.CardBody(
1457                             dbc.ListGroup(list_group_items, flush=True),
1458                             id="tput-lat-metadata",
1459                             class_name="p-0"
1460                         )
1461                     ]
1462                 )
1463             ]
1464
1465             return metadata, graph, True
1466
1467         @app.callback(
1468             Output("offcanvas-documentation", "is_open"),
1469             Input("btn-documentation", "n_clicks"),
1470             State("offcanvas-documentation", "is_open")
1471         )
1472         def toggle_offcanvas_documentation(n_clicks, is_open):
1473             if n_clicks:
1474                 return not is_open
1475             return is_open