csit.infra.dash/app/cdash/trending/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
  15 """Plotly Dash HTML layout override.
  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 from copy import deepcopy
  31
  32 from ..utils.constants import Constants as C
  33 from ..utils.control_panel import ControlPanel
  34 from ..utils.trigger import Trigger
  35 from ..utils.telemetry_data import TelemetryData
  36 from ..utils.utils import show_tooltip, label, sync_checklists, gen_new_url, \
  37     generate_options, get_list_group_items, graph_hdrh_latency
  38 from ..utils.url_processing import url_decode
  39 from .graphs import graph_trending, select_trending_data, graph_tm_trending
  40
  41
  42 # Control panel partameters and their default values.
  43 CP_PARAMS = {
  44     "dd-dut-val": str(),
  45     "dd-phy-opt": list(),
  46     "dd-phy-dis": True,
  47     "dd-phy-val": str(),
  48     "dd-area-opt": list(),
  49     "dd-area-dis": True,
  50     "dd-area-val": str(),
  51     "dd-test-opt": list(),
  52     "dd-test-dis": True,
  53     "dd-test-val": str(),
  54     "cl-core-opt": list(),
  55     "cl-core-val": list(),
  56     "cl-core-all-val": list(),
  57     "cl-core-all-opt": C.CL_ALL_DISABLED,
  58     "cl-frmsize-opt": list(),
  59     "cl-frmsize-val": list(),
  60     "cl-frmsize-all-val": list(),
  61     "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
  62     "cl-tsttype-opt": list(),
  63     "cl-tsttype-val": list(),
  64     "cl-tsttype-all-val": list(),
  65     "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
  66     "btn-add-dis": True,
  67     "cl-normalize-val": list()
  68 }
  69
  70
  71 class Layout:
  72     """The layout of the dash app and the callbacks.
  73     """
  74
  75     def __init__(self,
  76             app: Flask,
  77             data_trending: pd.DataFrame,
  78             html_layout_file: str,
  79             graph_layout_file: str,
  80             tooltip_file: str
  81         ) -> None:
  82         """Initialization:
  83         - save the input parameters,
  84         - read and pre-process the data,
  85         - prepare data for the control panel,
  86         - read HTML layout file,
  87         - read tooltips from the tooltip file.
  88
  89         :param app: Flask application running the dash application.
  90         :param data_trending: Pandas dataframe with trending data.
  91         :param html_layout_file: Path and name of the file specifying the HTML
  92             layout of the dash application.
  93         :param graph_layout_file: Path and name of the file with layout of
  94             plot.ly graphs.
  95         :param tooltip_file: Path and name of the yaml file specifying the
  96             tooltips.
  97         :type app: Flask
  98         :type data_trending: pandas.DataFrame
  99         :type html_layout_file: str
 100         :type graph_layout_file: str
 101         :type tooltip_file: str
 102         """
 103
 104         # Inputs
 105         self._app = app
 106         self._data = data_trending
 107         self._html_layout_file = html_layout_file
 108         self._graph_layout_file = graph_layout_file
 109         self._tooltip_file = tooltip_file
 110
 111         # Get structure of tests:
 112         tbs = dict()
 113         cols = ["job", "test_id", "test_type", "tg_type"]
 114         for _, row in self._data[cols].drop_duplicates().iterrows():
 115             lst_job = row["job"].split("-")
 116             dut = lst_job[1]
 117             tbed = "-".join(lst_job[-2:])
 118             lst_test = row["test_id"].split(".")
 119             if dut == "dpdk":
 120                 area = "dpdk"
 121             else:
 122                 area = ".".join(lst_test[3:-2])
 123             suite = lst_test[-2].replace("2n1l-", "").replace("1n1l-", "").\
 124                 replace("2n-", "")
 125             test = lst_test[-1]
 126             nic = suite.split("-")[0]
 127             for drv in C.DRIVERS:
 128                 if drv in test:
 129                     if drv == "af-xdp":
 130                         driver = "af_xdp"
 131                     else:
 132                         driver = drv
 133                     test = test.replace(f"{drv}-", "")
 134                     break
 135             else:
 136                 driver = "dpdk"
 137             infra = "-".join((tbed, nic, driver))
 138             lst_test = test.split("-")
 139             framesize = lst_test[0]
 140             core = lst_test[1] if lst_test[1] else "8C"
 141             test = "-".join(lst_test[2: -1])
 142
 143             if tbs.get(dut, None) is None:
 144                 tbs[dut] = dict()
 145             if tbs[dut].get(infra, None) is None:
 146                 tbs[dut][infra] = dict()
 147             if tbs[dut][infra].get(area, None) is None:
 148                 tbs[dut][infra][area] = dict()
 149             if tbs[dut][infra][area].get(test, None) is None:
 150                 tbs[dut][infra][area][test] = dict()
 151                 tbs[dut][infra][area][test]["core"] = list()
 152                 tbs[dut][infra][area][test]["frame-size"] = list()
 153                 tbs[dut][infra][area][test]["test-type"] = list()
 154             if core.upper() not in tbs[dut][infra][area][test]["core"]:
 155                 tbs[dut][infra][area][test]["core"].append(core.upper())
 156             if framesize.upper() not in \
 157                     tbs[dut][infra][area][test]["frame-size"]:
 158                 tbs[dut][infra][area][test]["frame-size"].append(
 159                     framesize.upper()
 160                 )
 161             if row["test_type"] == "mrr":
 162                 if "MRR" not in tbs[dut][infra][area][test]["test-type"]:
 163                     tbs[dut][infra][area][test]["test-type"].append("MRR")
 164             elif row["test_type"] == "ndrpdr":
 165                 if "NDR" not in tbs[dut][infra][area][test]["test-type"]:
 166                     tbs[dut][infra][area][test]["test-type"].extend(
 167                         ("NDR", "PDR")
 168                     )
 169             elif row["test_type"] == "hoststack":
 170                 if row["tg_type"] in ("iperf", "vpp"):
 171                     if "BPS" not in tbs[dut][infra][area][test]["test-type"]:
 172                         tbs[dut][infra][area][test]["test-type"].append("BPS")
 173                 elif row["tg_type"] == "ab":
 174                     if "CPS" not in tbs[dut][infra][area][test]["test-type"]:
 175                         tbs[dut][infra][area][test]["test-type"].extend(
 176                             ("CPS", "RPS")
 177                         )
 178         self._spec_tbs = tbs
 179
 180         # Read from files:
 181         self._html_layout = str()
 182         self._graph_layout = None
 183         self._tooltips = dict()
 184
 185         try:
 186             with open(self._html_layout_file, "r") as file_read:
 187                 self._html_layout = file_read.read()
 188         except IOError as err:
 189             raise RuntimeError(
 190                 f"Not possible to open the file {self._html_layout_file}\n{err}"
 191             )
 192
 193         try:
 194             with open(self._graph_layout_file, "r") as file_read:
 195                 self._graph_layout = load(file_read, Loader=FullLoader)
 196         except IOError as err:
 197             raise RuntimeError(
 198                 f"Not possible to open the file {self._graph_layout_file}\n"
 199                 f"{err}"
 200             )
 201         except YAMLError as err:
 202             raise RuntimeError(
 203                 f"An error occurred while parsing the specification file "
 204                 f"{self._graph_layout_file}\n{err}"
 205             )
 206
 207         try:
 208             with open(self._tooltip_file, "r") as file_read:
 209                 self._tooltips = load(file_read, Loader=FullLoader)
 210         except IOError as err:
 211             logging.warning(
 212                 f"Not possible to open the file {self._tooltip_file}\n{err}"
 213             )
 214         except YAMLError as err:
 215             logging.warning(
 216                 f"An error occurred while parsing the specification file "
 217                 f"{self._tooltip_file}\n{err}"
 218             )
 219
 220         # Callbacks:
 221         if self._app is not None and hasattr(self, "callbacks"):
 222             self.callbacks(self._app)
 223
 224     @property
 225     def html_layout(self):
 226         return self._html_layout
 227
 228     def add_content(self):
 229         """Top level method which generated the web page.
 230
 231         It generates:
 232         - Store for user input data,
 233         - Navigation bar,
 234         - Main area with control panel and ploting area.
 235
 236         If no HTML layout is provided, an error message is displayed instead.
 237
 238         :returns: The HTML div with the whole page.
 239         :rtype: html.Div
 240         """
 241
 242         if self.html_layout and self._spec_tbs:
 243             return html.Div(
 244                 id="div-main",
 245                 className="small",
 246                 children=[
 247                     dcc.Store(id="store-selected-tests"),
 248                     dcc.Store(id="store-control-panel"),
 249                     dcc.Store(id="store-telemetry-data"),
 250                     dcc.Store(id="store-telemetry-user"),
 251                     dcc.Location(id="url", refresh=False),
 252                     dbc.Row(
 253                         id="row-navbar",
 254                         class_name="g-0",
 255                         children=[
 256                             self._add_navbar()
 257                         ]
 258                     ),
 259                     dbc.Row(
 260                         id="row-main",
 261                         class_name="g-0",
 262                         children=[
 263                             self._add_ctrl_col(),
 264                             self._add_plotting_col()
 265                         ]
 266                     ),
 267                     dbc.Spinner(
 268                         dbc.Offcanvas(
 269                             class_name="w-50",
 270                             id="offcanvas-metadata",
 271                             title="Throughput And Latency",
 272                             placement="end",
 273                             is_open=False,
 274                             children=[
 275                                 dbc.Row(id="metadata-tput-lat"),
 276                                 dbc.Row(id="metadata-hdrh-graph")
 277                             ]
 278                         ),
 279                         delay_show=C.SPINNER_DELAY
 280                     )
 281                 ]
 282             )
 283         else:
 284             return html.Div(
 285                 id="div-main-error",
 286                 children=[
 287                     dbc.Alert(
 288                         [
 289                             "An Error Occured"
 290                         ],
 291                         color="danger"
 292                     )
 293                 ]
 294             )
 295
 296     def _add_navbar(self):
 297         """Add nav element with navigation panel. It is placed on the top.
 298
 299         :returns: Navigation bar.
 300         :rtype: dbc.NavbarSimple
 301         """
 302         return dbc.NavbarSimple(
 303             id="navbarsimple-main",
 304             children=[
 305                 dbc.NavItem(
 306                     dbc.NavLink(
 307                         C.TREND_TITLE,
 308                         disabled=True,
 309                         external_link=True,
 310                         href="#"
 311                     )
 312                 )
 313             ],
 314             brand=C.BRAND,
 315             brand_href="/",
 316             brand_external_link=True,
 317             class_name="p-2",
 318             fluid=True
 319         )
 320
 321     def _add_ctrl_col(self) -> dbc.Col:
 322         """Add column with controls. It is placed on the left side.
 323
 324         :returns: Column with the control panel.
 325         :rtype: dbc.Col
 326         """
 327         return dbc.Col([
 328             html.Div(
 329                 children=self._add_ctrl_panel(),
 330                 className="sticky-top"
 331             )
 332         ])
 333
 334     def _add_ctrl_panel(self) -> list:
 335         """Add control panel.
 336
 337         :returns: Control panel.
 338         :rtype: list
 339         """
 340         return [
 341             dbc.Row(
 342                 class_name="g-0 p-1",
 343                 children=[
 344                     dbc.InputGroup(
 345                         [
 346                             dbc.InputGroupText(
 347                                 children=show_tooltip(
 348                                     self._tooltips,
 349                                     "help-dut",
 350                                     "DUT"
 351                                 )
 352                             ),
 353                             dbc.Select(
 354                                 id={"type": "ctrl-dd", "index": "dut"},
 355                                 placeholder="Select a Device under Test...",
 356                                 options=sorted(
 357                                     [
 358                                         {"label": k, "value": k} \
 359                                             for k in self._spec_tbs.keys()
 360                                     ],
 361                                     key=lambda d: d["label"]
 362                                 )
 363                             )
 364                         ],
 365                         size="sm"
 366                     )
 367                 ]
 368             ),
 369             dbc.Row(
 370                 class_name="g-0 p-1",
 371                 children=[
 372                     dbc.InputGroup(
 373                         [
 374                             dbc.InputGroupText(
 375                                 children=show_tooltip(
 376                                     self._tooltips,
 377                                     "help-infra",
 378                                     "Infra"
 379                                 )
 380                             ),
 381                             dbc.Select(
 382                                 id={"type": "ctrl-dd", "index": "phy"},
 383                                 placeholder=\
 384                                     "Select a Physical Test Bed Topology..."
 385                             )
 386                         ],
 387                         size="sm"
 388                     )
 389                 ]
 390             ),
 391             dbc.Row(
 392                 class_name="g-0 p-1",
 393                 children=[
 394                     dbc.InputGroup(
 395                         [
 396                             dbc.InputGroupText(
 397                                 children=show_tooltip(
 398                                     self._tooltips,
 399                                     "help-area",
 400                                     "Area"
 401                                 )
 402                             ),
 403                             dbc.Select(
 404                                 id={"type": "ctrl-dd", "index": "area"},
 405                                 placeholder="Select an Area..."
 406                             )
 407                         ],
 408                         size="sm"
 409                     )
 410                 ]
 411             ),
 412             dbc.Row(
 413                 class_name="g-0 p-1",
 414                 children=[
 415                     dbc.InputGroup(
 416                         [
 417                             dbc.InputGroupText(
 418                                 children=show_tooltip(
 419                                     self._tooltips,
 420                                     "help-test",
 421                                     "Test"
 422                                 )
 423                             ),
 424                             dbc.Select(
 425                                 id={"type": "ctrl-dd", "index": "test"},
 426                                 placeholder="Select a Test..."
 427                             )
 428                         ],
 429                         size="sm"
 430                     )
 431                 ]
 432             ),
 433             dbc.Row(
 434                 class_name="g-0 p-1",
 435                 children=[
 436                     dbc.InputGroup(
 437                         [
 438                             dbc.InputGroupText(
 439                                 children=show_tooltip(
 440                                     self._tooltips,
 441                                     "help-framesize",
 442                                     "Frame Size"
 443                                 )
 444                             ),
 445                             dbc.Col(
 446                                 children=[
 447                                     dbc.Checklist(
 448                                         id={
 449                                             "type": "ctrl-cl",
 450                                             "index": "frmsize-all"
 451                                         },
 452                                         options=C.CL_ALL_DISABLED,
 453                                         inline=True,
 454                                         class_name="ms-2"
 455                                     )
 456                                 ],
 457                                 width=2
 458                             ),
 459                             dbc.Col(
 460                                 children=[
 461                                     dbc.Checklist(
 462                                         id={
 463                                             "type": "ctrl-cl",
 464                                             "index": "frmsize"
 465                                         },
 466                                         inline=True
 467                                     )
 468                                 ]
 469                             )
 470                         ],
 471                         style={"align-items": "center"},
 472                         size="sm"
 473                     )
 474                 ]
 475             ),
 476             dbc.Row(
 477                 class_name="g-0 p-1",
 478                 children=[
 479                     dbc.InputGroup(
 480                         [
 481                             dbc.InputGroupText(
 482                                 children=show_tooltip(
 483                                     self._tooltips,
 484                                     "help-cores",
 485                                     "Number of Cores"
 486                                 )
 487                             ),
 488                             dbc.Col(
 489                                 children=[
 490                                     dbc.Checklist(
 491                                         id={
 492                                             "type": "ctrl-cl",
 493                                             "index": "core-all"
 494                                         },
 495                                         options=C.CL_ALL_DISABLED,
 496                                         inline=True,
 497                                         class_name="ms-2"
 498                                     )
 499                                 ],
 500                                 width=2
 501                             ),
 502                             dbc.Col(
 503                                 children=[
 504                                     dbc.Checklist(
 505                                         id={
 506                                             "type": "ctrl-cl",
 507                                             "index": "core"
 508                                         },
 509                                         inline=True
 510                                     )
 511                                 ]
 512                             )
 513                         ],
 514                         style={"align-items": "center"},
 515                         size="sm"
 516                     )
 517                 ]
 518             ),
 519             dbc.Row(
 520                 class_name="g-0 p-1",
 521                 children=[
 522                     dbc.InputGroup(
 523                         [
 524                             dbc.InputGroupText(
 525                                 children=show_tooltip(
 526                                     self._tooltips,
 527                                     "help-ttype",
 528                                     "Test Type"
 529                                 )
 530                             ),
 531                             dbc.Col(
 532                                 children=[
 533                                     dbc.Checklist(
 534                                         id={
 535                                             "type": "ctrl-cl",
 536                                             "index": "tsttype-all"
 537                                         },
 538                                         options=C.CL_ALL_DISABLED,
 539                                         inline=True,
 540                                         class_name="ms-2"
 541                                     )
 542                                 ],
 543                                 width=2
 544                             ),
 545                             dbc.Col(
 546                                 children=[
 547                                     dbc.Checklist(
 548                                         id={
 549                                             "type": "ctrl-cl",
 550                                             "index": "tsttype"
 551                                         },
 552                                         inline=True
 553                                     )
 554                                 ]
 555                             )
 556                         ],
 557                         style={"align-items": "center"},
 558                         size="sm"
 559                     )
 560                 ]
 561             ),
 562             dbc.Row(
 563                 class_name="g-0 p-1",
 564                 children=[
 565                     dbc.InputGroup(
 566                         [
 567                             dbc.InputGroupText(
 568                                 children=show_tooltip(
 569                                     self._tooltips,
 570                                     "help-normalize",
 571                                     "Normalization"
 572                                 )
 573                             ),
 574                             dbc.Col(
 575                                 children=[
 576                                     dbc.Checklist(
 577                                         id="normalize",
 578                                         options=[{
 579                                             "value": "normalize",
 580                                             "label": (
 581                                                 "Normalize to CPU frequency "
 582                                                 "2GHz"
 583                                             )
 584                                         }],
 585                                         value=[],
 586                                         inline=True,
 587                                         class_name="ms-2"
 588                                     )
 589                                 ]
 590                             )
 591                         ],
 592                         style={"align-items": "center"},
 593                         size="sm"
 594                     )
 595                 ]
 596             ),
 597             dbc.Row(
 598                 class_name="g-0 p-1",
 599                 children=[
 600                     dbc.Button(
 601                         id={"type": "ctrl-btn", "index": "add-test"},
 602                         children="Add Selected",
 603                         color="info"
 604                     )
 605                 ]
 606             ),
 607             dbc.Row(
 608                 id="row-card-sel-tests",
 609                 class_name="g-0 p-1",
 610                 style=C.STYLE_DISABLED,
 611                 children=[
 612                     dbc.ListGroup(
 613                         class_name="overflow-auto p-0",
 614                         id="lg-selected",
 615                         children=[],
 616                         style={"max-height": "20em"},
 617                         flush=True
 618                     )
 619                 ]
 620             ),
 621             dbc.Row(
 622                 id="row-btns-sel-tests",
 623                 class_name="g-0 p-1",
 624                 style=C.STYLE_DISABLED,
 625                 children=[
 626                     dbc.ButtonGroup(
 627                         children=[
 628                             dbc.Button(
 629                                 id={"type": "ctrl-btn", "index": "rm-test"},
 630                                 children="Remove Selected",
 631                                 class_name="w-100",
 632                                 color="info",
 633                                 disabled=False
 634                             ),
 635                             dbc.Button(
 636                                 id={"type": "ctrl-btn", "index": "rm-test-all"},
 637                                 children="Remove All",
 638                                 class_name="w-100",
 639                                 color="info",
 640                                 disabled=False
 641                             )
 642                         ]
 643                     )
 644                 ]
 645             )
 646         ]
 647
 648     def _add_plotting_col(self) -> dbc.Col:
 649         """Add column with plots. It is placed on the right side.
 650
 651         :returns: Column with plots.
 652         :rtype: dbc.Col
 653         """
 654         return dbc.Col(
 655             id="col-plotting-area",
 656             children=[
 657                 dbc.Spinner(
 658                     dbc.Row(
 659                         id="plotting-area-trending",
 660                         class_name="g-0 p-0",
 661                         children=C.PLACEHOLDER
 662                     ),
 663                     delay_show=C.SPINNER_DELAY
 664                 ),
 665                 dbc.Row(
 666                     id="plotting-area-telemetry",
 667                     class_name="g-0 p-0",
 668                     children=C.PLACEHOLDER
 669                 ),
 670                 dbc.Row(
 671                     id="plotting-area-buttons",
 672                     class_name="g-0 p-0",
 673                     children=C.PLACEHOLDER
 674                 )
 675             ],
 676             width=9
 677         )
 678
 679     def _get_plotting_area_buttons(self) -> dbc.Col:
 680         """Add buttons and modals to the plotting area.
 681
 682         :returns: A column with buttons and modals for telemetry.
 683         :rtype: dbc.Col
 684         """
 685         return dbc.Col([
 686             html.Div(
 687                 [
 688                     dbc.Button(
 689                         id={"type": "telemetry-btn", "index": "open"},
 690                         children="Add Panel with Telemetry",
 691                         class_name="me-1",
 692                         color="info",
 693                         style={
 694                             "text-transform": "none",
 695                             "padding": "0rem 1rem"
 696                         }
 697                     ),
 698                     dbc.Modal(
 699                         [
 700                             dbc.ModalHeader(
 701                                 dbc.ModalTitle(
 702                                     "Select a Metric"
 703                                 ),
 704                                 close_button=False
 705                             ),
 706                             dbc.Spinner(
 707                                 dbc.ModalBody(
 708                                     id="plot-mod-telemetry-body-1",
 709                                     children=self._get_telemetry_step_1()
 710                                 ),
 711                                 delay_show=2*C.SPINNER_DELAY
 712                             ),
 713                             dbc.ModalFooter([
 714                                 dbc.Button(
 715                                     "Select",
 716                                     id={
 717                                         "type": "telemetry-btn",
 718                                         "index": "select"
 719                                     },
 720                                     disabled=True
 721                                 ),
 722                                 dbc.Button(
 723                                     "Cancel",
 724                                     id={
 725                                         "type": "telemetry-btn",
 726                                         "index": "cancel"
 727                                     },
 728                                     disabled=False
 729                                 )
 730                             ])
 731                         ],
 732                         id="plot-mod-telemetry-1",
 733                         size="lg",
 734                         is_open=False,
 735                         scrollable=False,
 736                         backdrop="static",
 737                         keyboard=False
 738                     ),
 739                     dbc.Modal(
 740                         [
 741                             dbc.ModalHeader(
 742                                 dbc.ModalTitle(
 743                                     "Select Labels"
 744                                 ),
 745                                 close_button=False
 746                             ),
 747                             dbc.Spinner(
 748                                 dbc.ModalBody(
 749                                     id="plot-mod-telemetry-body-2",
 750                                     children=self._get_telemetry_step_2()
 751                                 ),
 752                                 delay_show=2*C.SPINNER_DELAY
 753                             ),
 754                             dbc.ModalFooter([
 755                                 dbc.Button(
 756                                     "Back",
 757                                     id={
 758                                         "type": "telemetry-btn",
 759                                         "index": "back"
 760                                     },
 761                                     disabled=False
 762                                 ),
 763                                 dbc.Button(
 764                                     "Add Telemetry",
 765                                     id={
 766                                         "type": "telemetry-btn",
 767                                         "index": "add"
 768                                     },
 769                                     disabled=True
 770                                 ),
 771                                 dbc.Button(
 772                                     "Cancel",
 773                                     id={
 774                                         "type": "telemetry-btn",
 775                                         "index": "cancel"
 776                                     },
 777                                     disabled=False
 778                                 )
 779                             ])
 780                         ],
 781                         id="plot-mod-telemetry-2",
 782                         size="xl",
 783                         is_open=False,
 784                         scrollable=False,
 785                         backdrop="static",
 786                         keyboard=False
 787                     )
 788                 ],
 789                 className="d-grid gap-0 d-md-flex justify-content-md-end"
 790             )
 791         ])
 792
 793     def _get_plotting_area_trending(
 794             self,
 795             tests: list,
 796             normalize: bool,
 797             url: str
 798         ) -> dbc.Col:
 799         """Generate the plotting area with all its content.
 800
 801         :param tests: A list of tests to be displayed in the trending graphs.
 802         :param normalize: If True, the data in graphs is normalized.
 803         :param url: An URL to be displayed in the modal window.
 804         :type tests: list
 805         :type normalize: bool
 806         :type url: str
 807         :returns: A collumn with trending graphs (tput and latency) in tabs.
 808         :rtype: dbc.Col
 809         """
 810         if not tests:
 811             return C.PLACEHOLDER
 812
 813         figs = graph_trending(self._data, tests, self._graph_layout, normalize)
 814
 815         if not figs[0]:
 816             return C.PLACEHOLDER
 817
 818         tab_items = [
 819             dbc.Tab(
 820                 children=dcc.Graph(
 821                     id={"type": "graph", "index": "tput"},
 822                     figure=figs[0]
 823                 ),
 824                 label="Throughput",
 825                 tab_id="tab-tput"
 826             )
 827         ]
 828
 829         if figs[1]:
 830             tab_items.append(
 831                 dbc.Tab(
 832                     children=dcc.Graph(
 833                         id={"type": "graph", "index": "lat"},
 834                         figure=figs[1]
 835                     ),
 836                     label="Latency",
 837                     tab_id="tab-lat"
 838                 )
 839             )
 840
 841         trending = [
 842             dbc.Row(children=[
 843                 dbc.Tabs(
 844                     children=tab_items,
 845                     id="tabs",
 846                     active_tab="tab-tput",
 847                 )
 848             ]),
 849             dbc.Row(
 850                 [
 851                     dbc.Col([html.Div(
 852                         [
 853                             dbc.Button(
 854                                 id="plot-btn-url",
 855                                 children="Show URL",
 856                                 class_name="me-1",
 857                                 color="info",
 858                                 style={
 859                                     "text-transform": "none",
 860                                     "padding": "0rem 1rem"
 861                                 }
 862                             ),
 863                             dbc.Modal(
 864                                 [
 865                                     dbc.ModalHeader(dbc.ModalTitle("URL")),
 866                                     dbc.ModalBody(url)
 867                                 ],
 868                                 id="plot-mod-url",
 869                                 size="xl",
 870                                 is_open=False,
 871                                 scrollable=True
 872                             ),
 873                             dbc.Button(
 874                                 id="plot-btn-download",
 875                                 children="Download Data",
 876                                 class_name="me-1",
 877                                 color="info",
 878                                 style={
 879                                     "text-transform": "none",
 880                                     "padding": "0rem 1rem"
 881                                 }
 882                             ),
 883                             dcc.Download(id="download-trending-data")
 884                         ],
 885                         className=\
 886                             "d-grid gap-0 d-md-flex justify-content-md-end"
 887                     )])
 888                 ],
 889                 class_name="g-0 p-0"
 890             )
 891         ]
 892
 893         return dbc.Col(
 894             children=[
 895                 dbc.Row(
 896                     dbc.Accordion(
 897                         children=[
 898                             dbc.AccordionItem(
 899                                 title="Trending",
 900                                 children=trending
 901                             )
 902                         ],
 903                         class_name="g-0 p-1",
 904                         start_collapsed=False,
 905                         always_open=True,
 906                         active_item=["item-0", ]
 907                     ),
 908                     class_name="g-0 p-0",
 909                 )
 910             ]
 911         )
 912
 913     def _get_plotting_area_telemetry(self, graphs: list) -> dbc.Col:
 914         """Generate the plotting area with telemetry.
 915         """
 916         if not graphs:
 917             return C.PLACEHOLDER
 918
 919         acc_items = list()
 920         for graph in graphs:
 921             acc_items.append(
 922                 dbc.AccordionItem(
 923                     title=f"Telemetry: {graph[1]}" if graph[1] else "Telemetry",
 924                     children=dcc.Graph(
 925                         id={"type": "graph-telemetry", "index": graph[1]},
 926                         figure=graph[0]
 927                     )
 928                 )
 929             )
 930
 931         return dbc.Col(
 932             children=[
 933                 dbc.Row(
 934                     dbc.Accordion(
 935                         children=acc_items,
 936                         class_name="g-0 p-1",
 937                         start_collapsed=False,
 938                         always_open=True,
 939                         active_item=[f"item-{i}" for i in range(len(acc_items))]
 940                     ),
 941                     class_name="g-0 p-0",
 942                 )
 943             ]
 944         )
 945
 946     @staticmethod
 947     def _get_telemetry_step_1() -> list:
 948         """Return the content of the modal window used in the step 1 of metrics
 949         selection.
 950
 951         :returns: A list of dbc rows with 'input' and 'search output'.
 952         :rtype: list
 953         """
 954         return [
 955             dbc.Row(
 956                 class_name="g-0 p-1",
 957                 children=[
 958                     dbc.Input(
 959                         id="telemetry-search-in",
 960                         placeholder="Start typing a metric name...",
 961                         type="text"
 962                     )
 963                 ]
 964             ),
 965             dbc.Row(
 966                 class_name="g-0 p-1",
 967                 children=[
 968                     dbc.ListGroup(
 969                         class_name="overflow-auto p-0",
 970                         id="telemetry-search-out",
 971                         children=[],
 972                         style={"max-height": "14em"},
 973                         flush=True
 974                     )
 975                 ]
 976             )
 977         ]
 978
 979     @staticmethod
 980     def _get_telemetry_step_2() -> list:
 981         """Return the content of the modal window used in the step 2 of metrics
 982         selection.
 983
 984         :returns: A list of dbc rows with 'container with dynamic dropdowns' and
 985             'search output'.
 986         :rtype: list
 987         """
 988         return [
 989             dbc.Row(
 990                 id="telemetry-dd",
 991                 class_name="g-0 p-1",
 992                 children=["Add content here."]
 993             ),
 994             dbc.Row(
 995                 id="telemetry-all-in-one",
 996                 class_name="g-0 p-2",
 997                 children=[
 998                     dbc.Checkbox(
 999                         id="cb-all-in-one",
1000                         label="All Metrics in one Graph"
1001                     ),
1002                 ]
1003             ),
1004             dbc.Row(
1005                 class_name="g-0 p-1",
1006                 children=[
1007                     dbc.Textarea(
1008                         id="telemetry-list-metrics",
1009                         rows=20,
1010                         size="sm",
1011                         wrap="off",
1012                         readonly=True
1013                     )
1014                 ]
1015             )
1016         ]
1017
1018     def callbacks(self, app):
1019         """Callbacks for the whole application.
1020
1021         :param app: The application.
1022         :type app: Flask
1023         """
1024
1025         @app.callback(
1026             [
1027                 Output("store-control-panel", "data"),
1028                 Output("store-selected-tests", "data"),
1029                 Output("plotting-area-trending", "children"),
1030                 Output("plotting-area-buttons", "children"),
1031                 Output("row-card-sel-tests", "style"),
1032                 Output("row-btns-sel-tests", "style"),
1033                 Output("lg-selected", "children"),
1034                 Output({"type": "ctrl-dd", "index": "dut"}, "value"),
1035                 Output({"type": "ctrl-dd", "index": "phy"}, "options"),
1036                 Output({"type": "ctrl-dd", "index": "phy"}, "disabled"),
1037                 Output({"type": "ctrl-dd", "index": "phy"}, "value"),
1038                 Output({"type": "ctrl-dd", "index": "area"}, "options"),
1039                 Output({"type": "ctrl-dd", "index": "area"}, "disabled"),
1040                 Output({"type": "ctrl-dd", "index": "area"}, "value"),
1041                 Output({"type": "ctrl-dd", "index": "test"}, "options"),
1042                 Output({"type": "ctrl-dd", "index": "test"}, "disabled"),
1043                 Output({"type": "ctrl-dd", "index": "test"}, "value"),
1044                 Output({"type": "ctrl-cl", "index": "core"}, "options"),
1045                 Output({"type": "ctrl-cl", "index": "core"}, "value"),
1046                 Output({"type": "ctrl-cl", "index": "core-all"}, "value"),
1047                 Output({"type": "ctrl-cl", "index": "core-all"}, "options"),
1048                 Output({"type": "ctrl-cl", "index": "frmsize"}, "options"),
1049                 Output({"type": "ctrl-cl", "index": "frmsize"}, "value"),
1050                 Output({"type": "ctrl-cl", "index": "frmsize-all"}, "value"),
1051                 Output({"type": "ctrl-cl", "index": "frmsize-all"}, "options"),
1052                 Output({"type": "ctrl-cl", "index": "tsttype"}, "options"),
1053                 Output({"type": "ctrl-cl", "index": "tsttype"}, "value"),
1054                 Output({"type": "ctrl-cl", "index": "tsttype-all"}, "value"),
1055                 Output({"type": "ctrl-cl", "index": "tsttype-all"}, "options"),
1056                 Output({"type": "ctrl-btn", "index": "add-test"}, "disabled"),
1057                 Output("normalize", "value")
1058             ],
1059             [
1060                 State("store-control-panel", "data"),
1061                 State("store-selected-tests", "data"),
1062                 State({"type": "sel-cl", "index": ALL}, "value")
1063             ],
1064             [
1065                 Input("url", "href"),
1066                 Input("normalize", "value"),
1067                 Input({"type": "ctrl-dd", "index": ALL}, "value"),
1068                 Input({"type": "ctrl-cl", "index": ALL}, "value"),
1069                 Input({"type": "ctrl-btn", "index": ALL}, "n_clicks")
1070             ],
1071             prevent_initial_call=True
1072         )
1073         def _update_application(
1074                 control_panel: dict,
1075                 store_sel: list,
1076                 lst_sel: list,
1077                 href: str,
1078                 normalize: list,
1079                 *_
1080             ) -> tuple:
1081             """Update the application when the event is detected.
1082             """
1083
1084             ctrl_panel = ControlPanel(CP_PARAMS, control_panel)
1085             on_draw = False
1086
1087             # Parse the url:
1088             parsed_url = url_decode(href)
1089             if parsed_url:
1090                 url_params = parsed_url["params"]
1091             else:
1092                 url_params = None
1093
1094             trigger = Trigger(callback_context.triggered)
1095
1096             if trigger.type == "url" and url_params:
1097                 try:
1098                     store_sel = literal_eval(url_params["store_sel"][0])
1099                     normalize = literal_eval(url_params["norm"][0])
1100                 except (KeyError, IndexError, AttributeError):
1101                     pass
1102                 if store_sel:
1103                     last_test = store_sel[-1]
1104                     test = self._spec_tbs[last_test["dut"]][last_test["phy"]]\
1105                         [last_test["area"]][last_test["test"]]
1106                     ctrl_panel.set({
1107                         "dd-dut-val": last_test["dut"],
1108                         "dd-phy-val": last_test["phy"],
1109                         "dd-phy-opt": generate_options(
1110                             self._spec_tbs[last_test["dut"]].keys()
1111                         ),
1112                         "dd-phy-dis": False,
1113                         "dd-area-val": last_test["area"],
1114                         "dd-area-opt": [
1115                             {"label": label(v), "value": v} for v in sorted(
1116                                 self._spec_tbs[last_test["dut"]]\
1117                                     [last_test["phy"]].keys()
1118                             )
1119                         ],
1120                         "dd-area-dis": False,
1121                         "dd-test-val": last_test["test"],
1122                         "dd-test-opt": generate_options(
1123                             self._spec_tbs[last_test["dut"]][last_test["phy"]]\
1124                                 [last_test["area"]].keys()
1125                         ),
1126                         "dd-test-dis": False,
1127                         "cl-core-opt": generate_options(test["core"]),
1128                         "cl-core-val": [last_test["core"].upper(), ],
1129                         "cl-core-all-val": list(),
1130                         "cl-core-all-opt": C.CL_ALL_ENABLED,
1131                         "cl-frmsize-opt": generate_options(test["frame-size"]),
1132                         "cl-frmsize-val": [last_test["framesize"].upper(), ],
1133                         "cl-frmsize-all-val": list(),
1134                         "cl-frmsize-all-opt": C.CL_ALL_ENABLED,
1135                         "cl-tsttype-opt": generate_options(test["test-type"]),
1136                         "cl-tsttype-val": [last_test["testtype"].upper(), ],
1137                         "cl-tsttype-all-val": list(),
1138                         "cl-tsttype-all-opt": C.CL_ALL_ENABLED,
1139                         "cl-normalize-val": normalize,
1140                         "btn-add-dis": False
1141                     })
1142                     on_draw = True
1143             elif trigger.type == "normalize":
1144                 ctrl_panel.set({"cl-normalize-val": normalize})
1145                 on_draw = True
1146             elif trigger.type == "ctrl-dd":
1147                 if trigger.idx == "dut":
1148                     try:
1149                         options = generate_options(
1150                             self._spec_tbs[trigger.value].keys()
1151                         )
1152                         disabled = False
1153                     except KeyError:
1154                         options = list()
1155                         disabled = True
1156                     ctrl_panel.set({
1157                         "dd-dut-val": trigger.value,
1158                         "dd-phy-val": str(),
1159                         "dd-phy-opt": options,
1160                         "dd-phy-dis": disabled,
1161                         "dd-area-val": str(),
1162                         "dd-area-opt": list(),
1163                         "dd-area-dis": True,
1164                         "dd-test-val": str(),
1165                         "dd-test-opt": list(),
1166                         "dd-test-dis": True,
1167                         "cl-core-opt": list(),
1168                         "cl-core-val": list(),
1169                         "cl-core-all-val": list(),
1170                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1171                         "cl-frmsize-opt": list(),
1172                         "cl-frmsize-val": list(),
1173                         "cl-frmsize-all-val": list(),
1174                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1175                         "cl-tsttype-opt": list(),
1176                         "cl-tsttype-val": list(),
1177                         "cl-tsttype-all-val": list(),
1178                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1179                         "btn-add-dis": True
1180                     })
1181                 elif trigger.idx == "phy":
1182                     try:
1183                         dut = ctrl_panel.get("dd-dut-val")
1184                         phy = self._spec_tbs[dut][trigger.value]
1185                         options = [{"label": label(v), "value": v} \
1186                             for v in sorted(phy.keys())]
1187                         disabled = False
1188                     except KeyError:
1189                         options = list()
1190                         disabled = True
1191                     ctrl_panel.set({
1192                         "dd-phy-val": trigger.value,
1193                         "dd-area-val": str(),
1194                         "dd-area-opt": options,
1195                         "dd-area-dis": disabled,
1196                         "dd-test-val": str(),
1197                         "dd-test-opt": list(),
1198                         "dd-test-dis": True,
1199                         "cl-core-opt": list(),
1200                         "cl-core-val": list(),
1201                         "cl-core-all-val": list(),
1202                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1203                         "cl-frmsize-opt": list(),
1204                         "cl-frmsize-val": list(),
1205                         "cl-frmsize-all-val": list(),
1206                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1207                         "cl-tsttype-opt": list(),
1208                         "cl-tsttype-val": list(),
1209                         "cl-tsttype-all-val": list(),
1210                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1211                         "btn-add-dis": True
1212                     })
1213                 elif trigger.idx == "area":
1214                     try:
1215                         dut = ctrl_panel.get("dd-dut-val")
1216                         phy = ctrl_panel.get("dd-phy-val")
1217                         area = self._spec_tbs[dut][phy][trigger.value]
1218                         options = generate_options(area.keys())
1219                         disabled = False
1220                     except KeyError:
1221                         options = list()
1222                         disabled = True
1223                     ctrl_panel.set({
1224                         "dd-area-val": trigger.value,
1225                         "dd-test-val": str(),
1226                         "dd-test-opt": options,
1227                         "dd-test-dis": disabled,
1228                         "cl-core-opt": list(),
1229                         "cl-core-val": list(),
1230                         "cl-core-all-val": list(),
1231                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1232                         "cl-frmsize-opt": list(),
1233                         "cl-frmsize-val": list(),
1234                         "cl-frmsize-all-val": list(),
1235                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1236                         "cl-tsttype-opt": list(),
1237                         "cl-tsttype-val": list(),
1238                         "cl-tsttype-all-val": list(),
1239                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1240                         "btn-add-dis": True
1241                     })
1242                 elif trigger.idx == "test":
1243                     dut = ctrl_panel.get("dd-dut-val")
1244                     phy = ctrl_panel.get("dd-phy-val")
1245                     area = ctrl_panel.get("dd-area-val")
1246                     if all((dut, phy, area, trigger.value, )):
1247                         test = self._spec_tbs[dut][phy][area][trigger.value]
1248                         ctrl_panel.set({
1249                             "dd-test-val": trigger.value,
1250                             "cl-core-opt": generate_options(test["core"]),
1251                             "cl-core-val": list(),
1252                             "cl-core-all-val": list(),
1253                             "cl-core-all-opt": C.CL_ALL_ENABLED,
1254                             "cl-frmsize-opt": \
1255                                 generate_options(test["frame-size"]),
1256                             "cl-frmsize-val": list(),
1257                             "cl-frmsize-all-val": list(),
1258                             "cl-frmsize-all-opt": C.CL_ALL_ENABLED,
1259                             "cl-tsttype-opt": \
1260                                 generate_options(test["test-type"]),
1261                             "cl-tsttype-val": list(),
1262                             "cl-tsttype-all-val": list(),
1263                             "cl-tsttype-all-opt": C.CL_ALL_ENABLED,
1264                             "btn-add-dis": True
1265                         })
1266             elif trigger.type == "ctrl-cl":
1267                 param = trigger.idx.split("-")[0]
1268                 if "-all" in trigger.idx:
1269                     c_sel, c_all, c_id = list(), trigger.value, "all"
1270                 else:
1271                     c_sel, c_all, c_id = trigger.value, list(), str()
1272                 val_sel, val_all = sync_checklists(
1273                     options=ctrl_panel.get(f"cl-{param}-opt"),
1274                     sel=c_sel,
1275                     all=c_all,
1276                     id=c_id
1277                 )
1278                 ctrl_panel.set({
1279                     f"cl-{param}-val": val_sel,
1280                     f"cl-{param}-all-val": val_all,
1281                 })
1282                 if all((ctrl_panel.get("cl-core-val"),
1283                         ctrl_panel.get("cl-frmsize-val"),
1284                         ctrl_panel.get("cl-tsttype-val"), )):
1285                     ctrl_panel.set({"btn-add-dis": False})
1286                 else:
1287                     ctrl_panel.set({"btn-add-dis": True})
1288             elif trigger.type == "ctrl-btn":
1289                 on_draw = True
1290                 if trigger.idx == "add-test":
1291                     dut = ctrl_panel.get("dd-dut-val")
1292                     phy = ctrl_panel.get("dd-phy-val")
1293                     area = ctrl_panel.get("dd-area-val")
1294                     test = ctrl_panel.get("dd-test-val")
1295                     # Add selected test(s) to the list of tests in store:
1296                     if store_sel is None:
1297                         store_sel = list()
1298                     for core in ctrl_panel.get("cl-core-val"):
1299                         for framesize in ctrl_panel.get("cl-frmsize-val"):
1300                             for ttype in ctrl_panel.get("cl-tsttype-val"):
1301                                 if dut == "trex":
1302                                     core = str()
1303                                 tid = "-".join((
1304                                     dut,
1305                                     phy.replace('af_xdp', 'af-xdp'),
1306                                     area,
1307                                     framesize.lower(),
1308                                     core.lower(),
1309                                     test,
1310                                     ttype.lower()
1311                                 ))
1312                                 if tid not in [i["id"] for i in store_sel]:
1313                                     store_sel.append({
1314                                         "id": tid,
1315                                         "dut": dut,
1316                                         "phy": phy,
1317                                         "area": area,
1318                                         "test": test,
1319                                         "framesize": framesize.lower(),
1320                                         "core": core.lower(),
1321                                         "testtype": ttype.lower()
1322                                     })
1323                     store_sel = sorted(store_sel, key=lambda d: d["id"])
1324                     if C.CLEAR_ALL_INPUTS:
1325                         ctrl_panel.set(ctrl_panel.defaults)
1326                 elif trigger.idx == "rm-test" and lst_sel:
1327                     new_store_sel = list()
1328                     for idx, item in enumerate(store_sel):
1329                         if not lst_sel[idx]:
1330                             new_store_sel.append(item)
1331                     store_sel = new_store_sel
1332                 elif trigger.idx == "rm-test-all":
1333                     store_sel = list()
1334
1335             if on_draw:
1336                 if store_sel:
1337                     lg_selected = get_list_group_items(store_sel, "sel-cl")
1338                     plotting_area_trending = self._get_plotting_area_trending(
1339                         store_sel,
1340                         bool(normalize),
1341                         gen_new_url(
1342                             parsed_url,
1343                             {"store_sel": store_sel, "norm": normalize}
1344                         )
1345                     )
1346                     plotting_area_buttons = self._get_plotting_area_buttons()
1347                     row_card_sel_tests = C.STYLE_ENABLED
1348                     row_btns_sel_tests = C.STYLE_ENABLED
1349                 else:
1350                     plotting_area_trending = C.PLACEHOLDER
1351                     plotting_area_buttons = C.PLACEHOLDER
1352                     row_card_sel_tests = C.STYLE_DISABLED
1353                     row_btns_sel_tests = C.STYLE_DISABLED
1354                     lg_selected = no_update
1355                     store_sel = list()
1356             else:
1357                 plotting_area_trending = no_update
1358                 plotting_area_buttons = no_update
1359                 row_card_sel_tests = no_update
1360                 row_btns_sel_tests = no_update
1361                 lg_selected = no_update
1362
1363             ret_val = [
1364                 ctrl_panel.panel,
1365                 store_sel,
1366                 plotting_area_trending,
1367                 plotting_area_buttons,
1368                 row_card_sel_tests,
1369                 row_btns_sel_tests,
1370                 lg_selected
1371             ]
1372             ret_val.extend(ctrl_panel.values)
1373             return ret_val
1374
1375         @app.callback(
1376             Output("plot-mod-url", "is_open"),
1377             Input("plot-btn-url", "n_clicks"),
1378             State("plot-mod-url", "is_open")
1379         )
1380         def toggle_plot_mod_url(n, is_open):
1381             """Toggle the modal window with url.
1382             """
1383             if n:
1384                 return not is_open
1385             return is_open
1386
1387         @app.callback(
1388             Output("store-telemetry-data", "data"),
1389             Output("store-telemetry-user", "data"),
1390             Output("telemetry-search-in", "value"),
1391             Output("telemetry-search-out", "children"),
1392             Output("telemetry-list-metrics", "value"),
1393             Output("telemetry-dd", "children"),
1394             Output("plotting-area-telemetry", "children"),
1395             Output("plot-mod-telemetry-1", "is_open"),
1396             Output("plot-mod-telemetry-2", "is_open"),
1397             Output({"type": "telemetry-btn", "index": "select"}, "disabled"),
1398             Output({"type": "telemetry-btn", "index": "add"}, "disabled"),
1399             State("store-telemetry-data", "data"),
1400             State("store-telemetry-user", "data"),
1401             State("store-selected-tests", "data"),
1402             State("cb-all-in-one", "value"),
1403             Input({"type": "tele-cl", "index": ALL}, "value"),
1404             Input("telemetry-search-in", "value"),
1405             Input({"type": "telemetry-btn", "index": ALL}, "n_clicks"),
1406             Input({"type": "tm-dd", "index": ALL}, "value"),
1407             prevent_initial_call=True
1408         )
1409         def _update_plot_mod_telemetry(
1410                 tm_data: dict,
1411                 tm_user: dict,
1412                 store_sel: list,
1413                 all_in_one: bool,
1414                 cl_metrics: list,
1415                 search_in: str,
1416                 n_clicks: list,
1417                 tm_dd_in: list
1418             ) -> tuple:
1419             """Toggle the modal window with telemetry.
1420             """
1421
1422             if not any(n_clicks):
1423                 raise PreventUpdate
1424
1425             if tm_user is None:
1426                 # Telemetry user data
1427                 # The data provided by user or result of user action
1428                 tm_user = {
1429                     # List of unique metrics:
1430                     "unique_metrics": list(),
1431                     # List of metrics selected by user:
1432                     "selected_metrics": list(),
1433                     # Labels from metrics selected by user (key: label name,
1434                     # value: list of all possible values):
1435                     "unique_labels": dict(),
1436                     # Labels selected by the user (subset of 'unique_labels'):
1437                     "selected_labels": dict(),
1438                     # All unique metrics with labels (output from the step 1)
1439                     # converted from pandas dataframe to dictionary.
1440                     "unique_metrics_with_labels": dict(),
1441                     # Metrics with labels selected by the user using dropdowns.
1442                     "selected_metrics_with_labels": dict()
1443                 }
1444
1445             tm = TelemetryData(tests=store_sel)
1446             tm_json = no_update
1447             search_out = no_update
1448             list_metrics = no_update
1449             tm_dd = no_update
1450             plotting_area_telemetry = no_update
1451             is_open = (False, False)
1452             is_btn_disabled = (True, True)
1453
1454             trigger = Trigger(callback_context.triggered)
1455             if trigger.type == "telemetry-btn":
1456                 if trigger.idx in ("open", "back"):
1457                     tm.from_dataframe(self._data)
1458                     tm_json = tm.to_json()
1459                     tm_user["unique_metrics"] = tm.unique_metrics
1460                     tm_user["selected_metrics"] = list()
1461                     tm_user["unique_labels"] = dict()
1462                     tm_user["selected_labels"] = dict()
1463                     search_in = str()
1464                     search_out = get_list_group_items(
1465                         tm_user["unique_metrics"],
1466                         "tele-cl",
1467                         False
1468                     )
1469                     is_open = (True, False)
1470                 elif trigger.idx == "select":
1471                     tm.from_json(tm_data)
1472                     if any(cl_metrics):
1473                         if not tm_user["selected_metrics"]:
1474                             tm_user["selected_metrics"] = \
1475                                 tm_user["unique_metrics"]
1476                         metrics = [a for a, b in \
1477                             zip(tm_user["selected_metrics"], cl_metrics) if b]
1478                         tm_user["selected_metrics"] = metrics
1479                         tm_user["unique_labels"] = \
1480                             tm.get_selected_labels(metrics)
1481                         tm_user["unique_metrics_with_labels"] = \
1482                             tm.unique_metrics_with_labels
1483                         list_metrics = tm.str_metrics
1484                         tm_dd = _get_dd_container(tm_user["unique_labels"])
1485                         if list_metrics:
1486                             is_btn_disabled = (True, False)
1487                         is_open = (False, True)
1488                     else:
1489                         tm_user = None
1490                         is_open = (False, False)
1491                 elif trigger.idx == "add":
1492                     tm.from_json(tm_data)
1493                     plotting_area_telemetry = self._get_plotting_area_telemetry(
1494                         graph_tm_trending(
1495                             tm.select_tm_trending_data(
1496                                 tm_user["selected_metrics_with_labels"]
1497                             ),
1498                             self._graph_layout,
1499                             all_in_one
1500                         )
1501                     )
1502                     tm_user = None
1503                     is_open = (False, False)
1504                 elif trigger.idx == "cancel":
1505                     tm_user = None
1506                     is_open = (False, False)
1507             elif trigger.type == "telemetry-search-in":
1508                 tm.from_metrics(tm_user["unique_metrics"])
1509                 tm_user["selected_metrics"] = \
1510                     tm.search_unique_metrics(search_in)
1511                 search_out = get_list_group_items(
1512                     tm_user["selected_metrics"],
1513                     type="tele-cl",
1514                     colorize=False
1515                 )
1516                 is_open = (True, False)
1517             elif trigger.type == "tele-cl":
1518                 if any(cl_metrics):
1519                     is_btn_disabled = (False, True)
1520                 is_open = (True, False)
1521             elif trigger.type == "tm-dd":
1522                 tm.from_metrics_with_labels(
1523                     tm_user["unique_metrics_with_labels"]
1524                 )
1525                 selected = dict()
1526                 previous_itm = None
1527                 for itm in tm_dd_in:
1528                     if itm is None:
1529                         show_new = True
1530                     elif isinstance(itm, str):
1531                         show_new = False
1532                         selected[itm] = list()
1533                     elif isinstance(itm, list):
1534                         if previous_itm is not None:
1535                             selected[previous_itm] = itm
1536                         show_new = True
1537                     previous_itm = itm
1538
1539                 tm_dd = _get_dd_container(
1540                     tm_user["unique_labels"],
1541                     selected,
1542                     show_new
1543                 )
1544                 sel_metrics = tm.filter_selected_metrics_by_labels(selected)
1545                 tm_user["selected_metrics_with_labels"] = sel_metrics.to_dict()
1546                 if not sel_metrics.empty:
1547                     list_metrics = tm.metrics_to_str(sel_metrics)
1548                 else:
1549                     list_metrics = str()
1550                 if list_metrics:
1551                     is_btn_disabled = (True, False)
1552                 is_open = (False, True)
1553
1554             # Return values:
1555             ret_val = [
1556                 tm_json,
1557                 tm_user,
1558                 search_in,
1559                 search_out,
1560                 list_metrics,
1561                 tm_dd,
1562                 plotting_area_telemetry
1563             ]
1564             ret_val.extend(is_open)
1565             ret_val.extend(is_btn_disabled)
1566             return ret_val
1567
1568         def _get_dd_container(
1569                 all_labels: dict,
1570                 selected_labels: dict=dict(),
1571                 show_new=True
1572             ) -> list:
1573             """Generate a container with dropdown selection boxes depenting on
1574             the input data.
1575
1576             :param all_labels: A dictionary with unique labels and their
1577                 possible values.
1578             :param selected_labels: A dictionalry with user selected lables and
1579                 their values.
1580             :param show_new: If True, a dropdown selection box to add a new
1581                 label is displayed.
1582             :type all_labels: dict
1583             :type selected_labels: dict
1584             :type show_new: bool
1585             :returns: A list of dbc rows with dropdown selection boxes.
1586             :rtype: list
1587             """
1588
1589             def _row(
1590                     id: str,
1591                     lopts: list=list(),
1592                     lval: str=str(),
1593                     vopts: list=list(),
1594                     vvals: list=list()
1595                 ) -> dbc.Row:
1596                 """Generates a dbc row with dropdown boxes.
1597
1598                 :param id: A string added to the dropdown ID.
1599                 :param lopts: A list of options for 'label' dropdown.
1600                 :param lval: Value of 'label' dropdown.
1601                 :param vopts: A list of options for 'value' dropdown.
1602                 :param vvals: A list of values for 'value' dropdown.
1603                 :type id: str
1604                 :type lopts: list
1605                 :type lval: str
1606                 :type vopts: list
1607                 :type vvals: list
1608                 :returns: dbc row with dropdown boxes.
1609                 :rtype: dbc.Row
1610                 """
1611                 children = list()
1612                 if lopts:
1613                     children.append(
1614                         dbc.Col(
1615                             width=6,
1616                             children=[
1617                                 dcc.Dropdown(
1618                                     id={
1619                                         "type": "tm-dd",
1620                                         "index": f"label-{id}"
1621                                     },
1622                                     placeholder="Select a label...",
1623                                     optionHeight=20,
1624                                     multi=False,
1625                                     options=lopts,
1626                                     value=lval if lval else None
1627                                 )
1628                             ]
1629                         )
1630                     )
1631                     if vopts:
1632                         children.append(
1633                             dbc.Col(
1634                                 width=6,
1635                                 children=[
1636                                     dcc.Dropdown(
1637                                         id={
1638                                             "type": "tm-dd",
1639                                             "index": f"value-{id}"
1640                                         },
1641                                         placeholder="Select a value...",
1642                                         optionHeight=20,
1643                                         multi=True,
1644                                         options=vopts,
1645                                         value=vvals if vvals else None
1646                                     )
1647                                 ]
1648                             )
1649                         )
1650
1651                 return dbc.Row(class_name="g-0 p-1", children=children)
1652
1653             container = list()
1654
1655             # Display rows with items in 'selected_labels'; label on the left,
1656             # values on the right:
1657             keys_left = list(all_labels.keys())
1658             for idx, label in enumerate(selected_labels.keys()):
1659                 container.append(_row(
1660                     id=idx,
1661                     lopts=deepcopy(keys_left),
1662                     lval=label,
1663                     vopts=all_labels[label],
1664                     vvals=selected_labels[label]
1665                 ))
1666                 keys_left.remove(label)
1667
1668             # Display row with dd with labels on the left, right side is empty:
1669             if show_new and keys_left:
1670                 container.append(_row(id="new", lopts=keys_left))
1671
1672             return container
1673
1674         @app.callback(
1675             Output("metadata-tput-lat", "children"),
1676             Output("metadata-hdrh-graph", "children"),
1677             Output("offcanvas-metadata", "is_open"),
1678             Input({"type": "graph", "index": ALL}, "clickData"),
1679             prevent_initial_call=True
1680         )
1681         def _show_metadata_from_graphs(graph_data: dict) -> tuple:
1682             """Generates the data for the offcanvas displayed when a particular
1683             point in a graph is clicked on.
1684
1685             :param graph_data: The data from the clicked point in the graph.
1686             :type graph_data: dict
1687             :returns: The data to be displayed on the offcanvas and the
1688                 information to show the offcanvas.
1689             :rtype: tuple(list, list, bool)
1690             """
1691
1692             trigger = Trigger(callback_context.triggered)
1693
1694             try:
1695                 idx = 0 if trigger.idx == "tput" else 1
1696                 graph_data = graph_data[idx]["points"][0]
1697             except (IndexError, KeyError, ValueError, TypeError):
1698                 raise PreventUpdate
1699
1700             metadata = no_update
1701             graph = list()
1702
1703             children = [
1704                 dbc.ListGroupItem(
1705                     [dbc.Badge(x.split(":")[0]), x.split(": ")[1]]
1706                 ) for x in graph_data.get("text", "").split("<br>")
1707             ]
1708             if trigger.idx == "tput":
1709                 title = "Throughput"
1710             elif trigger.idx == "lat":
1711                 title = "Latency"
1712                 hdrh_data = graph_data.get("customdata", None)
1713                 if hdrh_data:
1714                     graph = [dbc.Card(
1715                         class_name="gy-2 p-0",
1716                         children=[
1717                             dbc.CardHeader(hdrh_data.pop("name")),
1718                             dbc.CardBody(children=[
1719                                 dcc.Graph(
1720                                     id="hdrh-latency-graph",
1721                                     figure=graph_hdrh_latency(
1722                                         hdrh_data, self._graph_layout
1723                                     )
1724                                 )
1725                             ])
1726                         ])
1727                     ]
1728             else:
1729                 raise PreventUpdate
1730
1731             metadata = [
1732                 dbc.Card(
1733                     class_name="gy-2 p-0",
1734                     children=[
1735                         dbc.CardHeader(children=[
1736                             dcc.Clipboard(
1737                                 target_id="tput-lat-metadata",
1738                                 title="Copy",
1739                                 style={"display": "inline-block"}
1740                             ),
1741                             title
1742                         ]),
1743                         dbc.CardBody(
1744                             id="tput-lat-metadata",
1745                             class_name="p-0",
1746                             children=[dbc.ListGroup(children, flush=True), ]
1747                         )
1748                     ]
1749                 )
1750             ]
1751
1752             return metadata, graph, True
1753
1754         @app.callback(
1755             Output("download-trending-data", "data"),
1756             State("store-selected-tests", "data"),
1757             Input("plot-btn-download", "n_clicks"),
1758             prevent_initial_call=True
1759         )
1760         def _download_trending_data(store_sel: list, _) -> dict:
1761             """Download the data
1762
1763             :param store_sel: List of tests selected by user stored in the
1764                 browser.
1765             :type store_sel: list
1766             :returns: dict of data frame content (base64 encoded) and meta data
1767                 used by the Download component.
1768             :rtype: dict
1769             """
1770
1771             if not store_sel:
1772                 raise PreventUpdate
1773
1774             df = pd.DataFrame()
1775             for itm in store_sel:
1776                 sel_data = select_trending_data(self._data, itm)
1777                 if sel_data is None:
1778                     continue
1779                 df = pd.concat([df, sel_data], ignore_index=True, copy=False)
1780
1781             return dcc.send_data_frame(df.to_csv, C.TREND_DOWNLOAD_FILE_NAME)