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]}",
 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                 class_name="g-0 p-1",
 996                 children=[
 997                     dbc.Textarea(
 998                         id="telemetry-list-metrics",
 999                         rows=20,
1000                         size="sm",
1001                         wrap="off",
1002                         readonly=True
1003                     )
1004                 ]
1005             )
1006         ]
1007
1008     def callbacks(self, app):
1009         """Callbacks for the whole application.
1010
1011         :param app: The application.
1012         :type app: Flask
1013         """
1014
1015         @app.callback(
1016             [
1017                 Output("store-control-panel", "data"),
1018                 Output("store-selected-tests", "data"),
1019                 Output("plotting-area-trending", "children"),
1020                 Output("plotting-area-buttons", "children"),
1021                 Output("row-card-sel-tests", "style"),
1022                 Output("row-btns-sel-tests", "style"),
1023                 Output("lg-selected", "children"),
1024                 Output({"type": "ctrl-dd", "index": "dut"}, "value"),
1025                 Output({"type": "ctrl-dd", "index": "phy"}, "options"),
1026                 Output({"type": "ctrl-dd", "index": "phy"}, "disabled"),
1027                 Output({"type": "ctrl-dd", "index": "phy"}, "value"),
1028                 Output({"type": "ctrl-dd", "index": "area"}, "options"),
1029                 Output({"type": "ctrl-dd", "index": "area"}, "disabled"),
1030                 Output({"type": "ctrl-dd", "index": "area"}, "value"),
1031                 Output({"type": "ctrl-dd", "index": "test"}, "options"),
1032                 Output({"type": "ctrl-dd", "index": "test"}, "disabled"),
1033                 Output({"type": "ctrl-dd", "index": "test"}, "value"),
1034                 Output({"type": "ctrl-cl", "index": "core"}, "options"),
1035                 Output({"type": "ctrl-cl", "index": "core"}, "value"),
1036                 Output({"type": "ctrl-cl", "index": "core-all"}, "value"),
1037                 Output({"type": "ctrl-cl", "index": "core-all"}, "options"),
1038                 Output({"type": "ctrl-cl", "index": "frmsize"}, "options"),
1039                 Output({"type": "ctrl-cl", "index": "frmsize"}, "value"),
1040                 Output({"type": "ctrl-cl", "index": "frmsize-all"}, "value"),
1041                 Output({"type": "ctrl-cl", "index": "frmsize-all"}, "options"),
1042                 Output({"type": "ctrl-cl", "index": "tsttype"}, "options"),
1043                 Output({"type": "ctrl-cl", "index": "tsttype"}, "value"),
1044                 Output({"type": "ctrl-cl", "index": "tsttype-all"}, "value"),
1045                 Output({"type": "ctrl-cl", "index": "tsttype-all"}, "options"),
1046                 Output({"type": "ctrl-btn", "index": "add-test"}, "disabled"),
1047                 Output("normalize", "value")
1048             ],
1049             [
1050                 State("store-control-panel", "data"),
1051                 State("store-selected-tests", "data"),
1052                 State({"type": "sel-cl", "index": ALL}, "value")
1053             ],
1054             [
1055                 Input("url", "href"),
1056                 Input("normalize", "value"),
1057                 Input({"type": "ctrl-dd", "index": ALL}, "value"),
1058                 Input({"type": "ctrl-cl", "index": ALL}, "value"),
1059                 Input({"type": "ctrl-btn", "index": ALL}, "n_clicks")
1060             ],
1061             prevent_initial_call=True
1062         )
1063         def _update_application(
1064                 control_panel: dict,
1065                 store_sel: list,
1066                 lst_sel: list,
1067                 href: str,
1068                 normalize: list,
1069                 *_
1070             ) -> tuple:
1071             """Update the application when the event is detected.
1072             """
1073
1074             ctrl_panel = ControlPanel(CP_PARAMS, control_panel)
1075             on_draw = False
1076
1077             # Parse the url:
1078             parsed_url = url_decode(href)
1079             if parsed_url:
1080                 url_params = parsed_url["params"]
1081             else:
1082                 url_params = None
1083
1084             trigger = Trigger(callback_context.triggered)
1085
1086             if trigger.type == "url" and url_params:
1087                 try:
1088                     store_sel = literal_eval(url_params["store_sel"][0])
1089                     normalize = literal_eval(url_params["norm"][0])
1090                 except (KeyError, IndexError, AttributeError):
1091                     pass
1092                 if store_sel:
1093                     last_test = store_sel[-1]
1094                     test = self._spec_tbs[last_test["dut"]][last_test["phy"]]\
1095                         [last_test["area"]][last_test["test"]]
1096                     ctrl_panel.set({
1097                         "dd-dut-val": last_test["dut"],
1098                         "dd-phy-val": last_test["phy"],
1099                         "dd-phy-opt": generate_options(
1100                             self._spec_tbs[last_test["dut"]].keys()
1101                         ),
1102                         "dd-phy-dis": False,
1103                         "dd-area-val": last_test["area"],
1104                         "dd-area-opt": [
1105                             {"label": label(v), "value": v} for v in sorted(
1106                                 self._spec_tbs[last_test["dut"]]\
1107                                     [last_test["phy"]].keys()
1108                             )
1109                         ],
1110                         "dd-area-dis": False,
1111                         "dd-test-val": last_test["test"],
1112                         "dd-test-opt": generate_options(
1113                             self._spec_tbs[last_test["dut"]][last_test["phy"]]\
1114                                 [last_test["area"]].keys()
1115                         ),
1116                         "dd-test-dis": False,
1117                         "cl-core-opt": generate_options(test["core"]),
1118                         "cl-core-val": [last_test["core"].upper(), ],
1119                         "cl-core-all-val": list(),
1120                         "cl-core-all-opt": C.CL_ALL_ENABLED,
1121                         "cl-frmsize-opt": generate_options(test["frame-size"]),
1122                         "cl-frmsize-val": [last_test["framesize"].upper(), ],
1123                         "cl-frmsize-all-val": list(),
1124                         "cl-frmsize-all-opt": C.CL_ALL_ENABLED,
1125                         "cl-tsttype-opt": generate_options(test["test-type"]),
1126                         "cl-tsttype-val": [last_test["testtype"].upper(), ],
1127                         "cl-tsttype-all-val": list(),
1128                         "cl-tsttype-all-opt": C.CL_ALL_ENABLED,
1129                         "cl-normalize-val": normalize,
1130                         "btn-add-dis": False
1131                     })
1132                     on_draw = True
1133             elif trigger.type == "normalize":
1134                 ctrl_panel.set({"cl-normalize-val": normalize})
1135                 on_draw = True
1136             elif trigger.type == "ctrl-dd":
1137                 if trigger.idx == "dut":
1138                     try:
1139                         options = generate_options(
1140                             self._spec_tbs[trigger.value].keys()
1141                         )
1142                         disabled = False
1143                     except KeyError:
1144                         options = list()
1145                         disabled = True
1146                     ctrl_panel.set({
1147                         "dd-dut-val": trigger.value,
1148                         "dd-phy-val": str(),
1149                         "dd-phy-opt": options,
1150                         "dd-phy-dis": disabled,
1151                         "dd-area-val": str(),
1152                         "dd-area-opt": list(),
1153                         "dd-area-dis": True,
1154                         "dd-test-val": str(),
1155                         "dd-test-opt": list(),
1156                         "dd-test-dis": True,
1157                         "cl-core-opt": list(),
1158                         "cl-core-val": list(),
1159                         "cl-core-all-val": list(),
1160                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1161                         "cl-frmsize-opt": list(),
1162                         "cl-frmsize-val": list(),
1163                         "cl-frmsize-all-val": list(),
1164                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1165                         "cl-tsttype-opt": list(),
1166                         "cl-tsttype-val": list(),
1167                         "cl-tsttype-all-val": list(),
1168                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1169                         "btn-add-dis": True
1170                     })
1171                 elif trigger.idx == "phy":
1172                     try:
1173                         dut = ctrl_panel.get("dd-dut-val")
1174                         phy = self._spec_tbs[dut][trigger.value]
1175                         options = [{"label": label(v), "value": v} \
1176                             for v in sorted(phy.keys())]
1177                         disabled = False
1178                     except KeyError:
1179                         options = list()
1180                         disabled = True
1181                     ctrl_panel.set({
1182                         "dd-phy-val": trigger.value,
1183                         "dd-area-val": str(),
1184                         "dd-area-opt": options,
1185                         "dd-area-dis": disabled,
1186                         "dd-test-val": str(),
1187                         "dd-test-opt": list(),
1188                         "dd-test-dis": True,
1189                         "cl-core-opt": list(),
1190                         "cl-core-val": list(),
1191                         "cl-core-all-val": list(),
1192                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1193                         "cl-frmsize-opt": list(),
1194                         "cl-frmsize-val": list(),
1195                         "cl-frmsize-all-val": list(),
1196                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1197                         "cl-tsttype-opt": list(),
1198                         "cl-tsttype-val": list(),
1199                         "cl-tsttype-all-val": list(),
1200                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1201                         "btn-add-dis": True
1202                     })
1203                 elif trigger.idx == "area":
1204                     try:
1205                         dut = ctrl_panel.get("dd-dut-val")
1206                         phy = ctrl_panel.get("dd-phy-val")
1207                         area = self._spec_tbs[dut][phy][trigger.value]
1208                         options = generate_options(area.keys())
1209                         disabled = False
1210                     except KeyError:
1211                         options = list()
1212                         disabled = True
1213                     ctrl_panel.set({
1214                         "dd-area-val": trigger.value,
1215                         "dd-test-val": str(),
1216                         "dd-test-opt": options,
1217                         "dd-test-dis": disabled,
1218                         "cl-core-opt": list(),
1219                         "cl-core-val": list(),
1220                         "cl-core-all-val": list(),
1221                         "cl-core-all-opt": C.CL_ALL_DISABLED,
1222                         "cl-frmsize-opt": list(),
1223                         "cl-frmsize-val": list(),
1224                         "cl-frmsize-all-val": list(),
1225                         "cl-frmsize-all-opt": C.CL_ALL_DISABLED,
1226                         "cl-tsttype-opt": list(),
1227                         "cl-tsttype-val": list(),
1228                         "cl-tsttype-all-val": list(),
1229                         "cl-tsttype-all-opt": C.CL_ALL_DISABLED,
1230                         "btn-add-dis": True
1231                     })
1232                 elif trigger.idx == "test":
1233                     dut = ctrl_panel.get("dd-dut-val")
1234                     phy = ctrl_panel.get("dd-phy-val")
1235                     area = ctrl_panel.get("dd-area-val")
1236                     if all((dut, phy, area, trigger.value, )):
1237                         test = self._spec_tbs[dut][phy][area][trigger.value]
1238                         ctrl_panel.set({
1239                             "dd-test-val": trigger.value,
1240                             "cl-core-opt": generate_options(test["core"]),
1241                             "cl-core-val": list(),
1242                             "cl-core-all-val": list(),
1243                             "cl-core-all-opt": C.CL_ALL_ENABLED,
1244                             "cl-frmsize-opt": \
1245                                 generate_options(test["frame-size"]),
1246                             "cl-frmsize-val": list(),
1247                             "cl-frmsize-all-val": list(),
1248                             "cl-frmsize-all-opt": C.CL_ALL_ENABLED,
1249                             "cl-tsttype-opt": \
1250                                 generate_options(test["test-type"]),
1251                             "cl-tsttype-val": list(),
1252                             "cl-tsttype-all-val": list(),
1253                             "cl-tsttype-all-opt": C.CL_ALL_ENABLED,
1254                             "btn-add-dis": True
1255                         })
1256             elif trigger.type == "ctrl-cl":
1257                 param = trigger.idx.split("-")[0]
1258                 if "-all" in trigger.idx:
1259                     c_sel, c_all, c_id = list(), trigger.value, "all"
1260                 else:
1261                     c_sel, c_all, c_id = trigger.value, list(), str()
1262                 val_sel, val_all = sync_checklists(
1263                     options=ctrl_panel.get(f"cl-{param}-opt"),
1264                     sel=c_sel,
1265                     all=c_all,
1266                     id=c_id
1267                 )
1268                 ctrl_panel.set({
1269                     f"cl-{param}-val": val_sel,
1270                     f"cl-{param}-all-val": val_all,
1271                 })
1272                 if all((ctrl_panel.get("cl-core-val"),
1273                         ctrl_panel.get("cl-frmsize-val"),
1274                         ctrl_panel.get("cl-tsttype-val"), )):
1275                     ctrl_panel.set({"btn-add-dis": False})
1276                 else:
1277                     ctrl_panel.set({"btn-add-dis": True})
1278             elif trigger.type == "ctrl-btn":
1279                 on_draw = True
1280                 if trigger.idx == "add-test":
1281                     dut = ctrl_panel.get("dd-dut-val")
1282                     phy = ctrl_panel.get("dd-phy-val")
1283                     area = ctrl_panel.get("dd-area-val")
1284                     test = ctrl_panel.get("dd-test-val")
1285                     # Add selected test(s) to the list of tests in store:
1286                     if store_sel is None:
1287                         store_sel = list()
1288                     for core in ctrl_panel.get("cl-core-val"):
1289                         for framesize in ctrl_panel.get("cl-frmsize-val"):
1290                             for ttype in ctrl_panel.get("cl-tsttype-val"):
1291                                 if dut == "trex":
1292                                     core = str()
1293                                 tid = "-".join((
1294                                     dut,
1295                                     phy.replace('af_xdp', 'af-xdp'),
1296                                     area,
1297                                     framesize.lower(),
1298                                     core.lower(),
1299                                     test,
1300                                     ttype.lower()
1301                                 ))
1302                                 if tid not in [i["id"] for i in store_sel]:
1303                                     store_sel.append({
1304                                         "id": tid,
1305                                         "dut": dut,
1306                                         "phy": phy,
1307                                         "area": area,
1308                                         "test": test,
1309                                         "framesize": framesize.lower(),
1310                                         "core": core.lower(),
1311                                         "testtype": ttype.lower()
1312                                     })
1313                     store_sel = sorted(store_sel, key=lambda d: d["id"])
1314                     if C.CLEAR_ALL_INPUTS:
1315                         ctrl_panel.set(ctrl_panel.defaults)
1316                 elif trigger.idx == "rm-test" and lst_sel:
1317                     new_store_sel = list()
1318                     for idx, item in enumerate(store_sel):
1319                         if not lst_sel[idx]:
1320                             new_store_sel.append(item)
1321                     store_sel = new_store_sel
1322                 elif trigger.idx == "rm-test-all":
1323                     store_sel = list()
1324
1325             if on_draw:
1326                 if store_sel:
1327                     lg_selected = get_list_group_items(store_sel, "sel-cl")
1328                     plotting_area_trending = self._get_plotting_area_trending(
1329                         store_sel,
1330                         bool(normalize),
1331                         gen_new_url(
1332                             parsed_url,
1333                             {"store_sel": store_sel, "norm": normalize}
1334                         )
1335                     )
1336                     plotting_area_buttons = self._get_plotting_area_buttons()
1337                     row_card_sel_tests = C.STYLE_ENABLED
1338                     row_btns_sel_tests = C.STYLE_ENABLED
1339                 else:
1340                     plotting_area_trending = C.PLACEHOLDER
1341                     plotting_area_buttons = C.PLACEHOLDER
1342                     row_card_sel_tests = C.STYLE_DISABLED
1343                     row_btns_sel_tests = C.STYLE_DISABLED
1344                     lg_selected = no_update
1345                     store_sel = list()
1346             else:
1347                 plotting_area_trending = no_update
1348                 plotting_area_buttons = no_update
1349                 row_card_sel_tests = no_update
1350                 row_btns_sel_tests = no_update
1351                 lg_selected = no_update
1352
1353             ret_val = [
1354                 ctrl_panel.panel,
1355                 store_sel,
1356                 plotting_area_trending,
1357                 plotting_area_buttons,
1358                 row_card_sel_tests,
1359                 row_btns_sel_tests,
1360                 lg_selected
1361             ]
1362             ret_val.extend(ctrl_panel.values)
1363             return ret_val
1364
1365         @app.callback(
1366             Output("plot-mod-url", "is_open"),
1367             Input("plot-btn-url", "n_clicks"),
1368             State("plot-mod-url", "is_open")
1369         )
1370         def toggle_plot_mod_url(n, is_open):
1371             """Toggle the modal window with url.
1372             """
1373             if n:
1374                 return not is_open
1375             return is_open
1376
1377         @app.callback(
1378             Output("store-telemetry-data", "data"),
1379             Output("store-telemetry-user", "data"),
1380             Output("telemetry-search-in", "value"),
1381             Output("telemetry-search-out", "children"),
1382             Output("telemetry-list-metrics", "value"),
1383             Output("telemetry-dd", "children"),
1384             Output("plotting-area-telemetry", "children"),
1385             Output("plot-mod-telemetry-1", "is_open"),
1386             Output("plot-mod-telemetry-2", "is_open"),
1387             Output({"type": "telemetry-btn", "index": "select"}, "disabled"),
1388             Output({"type": "telemetry-btn", "index": "add"}, "disabled"),
1389             State("store-telemetry-data", "data"),
1390             State("store-telemetry-user", "data"),
1391             State("store-selected-tests", "data"),
1392             Input({"type": "tele-cl", "index": ALL}, "value"),
1393             Input("telemetry-search-in", "value"),
1394             Input({"type": "telemetry-btn", "index": ALL}, "n_clicks"),
1395             Input({"type": "tm-dd", "index": ALL}, "value"),
1396             prevent_initial_call=True
1397         )
1398         def _update_plot_mod_telemetry(
1399                 tm_data: dict,
1400                 tm_user: dict,
1401                 store_sel: list,
1402                 cl_metrics: list,
1403                 search_in: str,
1404                 n_clicks: list,
1405                 tm_dd_in: list
1406             ) -> tuple:
1407             """Toggle the modal window with telemetry.
1408             """
1409
1410             if not any(n_clicks):
1411                 raise PreventUpdate
1412
1413             if tm_user is None:
1414                 # Telemetry user data
1415                 # The data provided by user or result of user action
1416                 tm_user = {
1417                     # List of unique metrics:
1418                     "unique_metrics": list(),
1419                     # List of metrics selected by user:
1420                     "selected_metrics": list(),
1421                     # Labels from metrics selected by user (key: label name,
1422                     # value: list of all possible values):
1423                     "unique_labels": dict(),
1424                     # Labels selected by the user (subset of 'unique_labels'):
1425                     "selected_labels": dict(),
1426                     # All unique metrics with labels (output from the step 1)
1427                     # converted from pandas dataframe to dictionary.
1428                     "unique_metrics_with_labels": dict(),
1429                     # Metrics with labels selected by the user using dropdowns.
1430                     "selected_metrics_with_labels": dict()
1431                 }
1432
1433             tm = TelemetryData(tests=store_sel)
1434             tm_json = no_update
1435             search_out = no_update
1436             list_metrics = no_update
1437             tm_dd = no_update
1438             plotting_area_telemetry = no_update
1439             is_open = (False, False)
1440             is_btn_disabled = (True, True)
1441
1442             trigger = Trigger(callback_context.triggered)
1443             if trigger.type == "telemetry-btn":
1444                 if trigger.idx in ("open", "back"):
1445                     tm.from_dataframe(self._data)
1446                     tm_json = tm.to_json()
1447                     tm_user["unique_metrics"] = tm.unique_metrics
1448                     tm_user["selected_metrics"] = list()
1449                     tm_user["unique_labels"] = dict()
1450                     tm_user["selected_labels"] = dict()
1451                     search_in = str()
1452                     search_out = get_list_group_items(
1453                         tm_user["unique_metrics"],
1454                         "tele-cl",
1455                         False
1456                     )
1457                     is_open = (True, False)
1458                 elif trigger.idx == "select":
1459                     tm.from_json(tm_data)
1460                     if any(cl_metrics):
1461                         if not tm_user["selected_metrics"]:
1462                             tm_user["selected_metrics"] = \
1463                                 tm_user["unique_metrics"]
1464                         metrics = [a for a, b in \
1465                             zip(tm_user["selected_metrics"], cl_metrics) if b]
1466                         tm_user["selected_metrics"] = metrics
1467                         tm_user["unique_labels"] = \
1468                             tm.get_selected_labels(metrics)
1469                         tm_user["unique_metrics_with_labels"] = \
1470                             tm.unique_metrics_with_labels
1471                         list_metrics = tm.str_metrics
1472                         tm_dd = _get_dd_container(tm_user["unique_labels"])
1473                         if list_metrics:
1474                             is_btn_disabled = (True, False)
1475                         is_open = (False, True)
1476                     else:
1477                         tm_user = None
1478                         is_open = (False, False)
1479                 elif trigger.idx == "add":
1480                     tm.from_json(tm_data)
1481                     plotting_area_telemetry = self._get_plotting_area_telemetry(
1482                         graph_tm_trending(
1483                             tm.select_tm_trending_data(
1484                                 tm_user["selected_metrics_with_labels"]
1485                             ),
1486                             self._graph_layout)
1487                     )
1488                     tm_user = None
1489                     is_open = (False, False)
1490                 elif trigger.idx == "cancel":
1491                     tm_user = None
1492                     is_open = (False, False)
1493             elif trigger.type == "telemetry-search-in":
1494                 tm.from_metrics(tm_user["unique_metrics"])
1495                 tm_user["selected_metrics"] = \
1496                     tm.search_unique_metrics(search_in)
1497                 search_out = get_list_group_items(
1498                     tm_user["selected_metrics"],
1499                     type="tele-cl",
1500                     colorize=False
1501                 )
1502                 is_open = (True, False)
1503             elif trigger.type == "tele-cl":
1504                 if any(cl_metrics):
1505                     is_btn_disabled = (False, True)
1506                 is_open = (True, False)
1507             elif trigger.type == "tm-dd":
1508                 tm.from_metrics_with_labels(
1509                     tm_user["unique_metrics_with_labels"]
1510                 )
1511                 selected = dict()
1512                 previous_itm = None
1513                 for itm in tm_dd_in:
1514                     if itm is None:
1515                         show_new = True
1516                     elif isinstance(itm, str):
1517                         show_new = False
1518                         selected[itm] = list()
1519                     elif isinstance(itm, list):
1520                         if previous_itm is not None:
1521                             selected[previous_itm] = itm
1522                         show_new = True
1523                     previous_itm = itm
1524
1525                 tm_dd = _get_dd_container(
1526                     tm_user["unique_labels"],
1527                     selected,
1528                     show_new
1529                 )
1530                 sel_metrics = tm.filter_selected_metrics_by_labels(selected)
1531                 tm_user["selected_metrics_with_labels"] = sel_metrics.to_dict()
1532                 if not sel_metrics.empty:
1533                     list_metrics = tm.metrics_to_str(sel_metrics)
1534                 else:
1535                     list_metrics = str()
1536                 if list_metrics:
1537                     is_btn_disabled = (True, False)
1538                 is_open = (False, True)
1539
1540             # Return values:
1541             ret_val = [
1542                 tm_json,
1543                 tm_user,
1544                 search_in,
1545                 search_out,
1546                 list_metrics,
1547                 tm_dd,
1548                 plotting_area_telemetry
1549             ]
1550             ret_val.extend(is_open)
1551             ret_val.extend(is_btn_disabled)
1552             return ret_val
1553
1554         def _get_dd_container(
1555                 all_labels: dict,
1556                 selected_labels: dict=dict(),
1557                 show_new=True
1558             ) -> list:
1559             """Generate a container with dropdown selection boxes depenting on
1560             the input data.
1561
1562             :param all_labels: A dictionary with unique labels and their
1563                 possible values.
1564             :param selected_labels: A dictionalry with user selected lables and
1565                 their values.
1566             :param show_new: If True, a dropdown selection box to add a new
1567                 label is displayed.
1568             :type all_labels: dict
1569             :type selected_labels: dict
1570             :type show_new: bool
1571             :returns: A list of dbc rows with dropdown selection boxes.
1572             :rtype: list
1573             """
1574
1575             def _row(
1576                     id: str,
1577                     lopts: list=list(),
1578                     lval: str=str(),
1579                     vopts: list=list(),
1580                     vvals: list=list()
1581                 ) -> dbc.Row:
1582                 """Generates a dbc row with dropdown boxes.
1583
1584                 :param id: A string added to the dropdown ID.
1585                 :param lopts: A list of options for 'label' dropdown.
1586                 :param lval: Value of 'label' dropdown.
1587                 :param vopts: A list of options for 'value' dropdown.
1588                 :param vvals: A list of values for 'value' dropdown.
1589                 :type id: str
1590                 :type lopts: list
1591                 :type lval: str
1592                 :type vopts: list
1593                 :type vvals: list
1594                 :returns: dbc row with dropdown boxes.
1595                 :rtype: dbc.Row
1596                 """
1597                 children = list()
1598                 if lopts:
1599                     children.append(
1600                         dbc.Col(
1601                             width=6,
1602                             children=[
1603                                 dcc.Dropdown(
1604                                     id={
1605                                         "type": "tm-dd",
1606                                         "index": f"label-{id}"
1607                                     },
1608                                     placeholder="Select a label...",
1609                                     optionHeight=20,
1610                                     multi=False,
1611                                     options=lopts,
1612                                     value=lval if lval else None
1613                                 )
1614                             ]
1615                         )
1616                     )
1617                     if vopts:
1618                         children.append(
1619                             dbc.Col(
1620                                 width=6,
1621                                 children=[
1622                                     dcc.Dropdown(
1623                                         id={
1624                                             "type": "tm-dd",
1625                                             "index": f"value-{id}"
1626                                         },
1627                                         placeholder="Select a value...",
1628                                         optionHeight=20,
1629                                         multi=True,
1630                                         options=vopts,
1631                                         value=vvals if vvals else None
1632                                     )
1633                                 ]
1634                             )
1635                         )
1636
1637                 return dbc.Row(class_name="g-0 p-1", children=children)
1638
1639             container = list()
1640
1641             # Display rows with items in 'selected_labels'; label on the left,
1642             # values on the right:
1643             keys_left = list(all_labels.keys())
1644             for idx, label in enumerate(selected_labels.keys()):
1645                 container.append(_row(
1646                     id=idx,
1647                     lopts=deepcopy(keys_left),
1648                     lval=label,
1649                     vopts=all_labels[label],
1650                     vvals=selected_labels[label]
1651                 ))
1652                 keys_left.remove(label)
1653
1654             # Display row with dd with labels on the left, right side is empty:
1655             if show_new and keys_left:
1656                 container.append(_row(id="new", lopts=keys_left))
1657
1658             return container
1659
1660         @app.callback(
1661             Output("metadata-tput-lat", "children"),
1662             Output("metadata-hdrh-graph", "children"),
1663             Output("offcanvas-metadata", "is_open"),
1664             Input({"type": "graph", "index": ALL}, "clickData"),
1665             prevent_initial_call=True
1666         )
1667         def _show_metadata_from_graphs(graph_data: dict) -> tuple:
1668             """Generates the data for the offcanvas displayed when a particular
1669             point in a graph is clicked on.
1670
1671             :param graph_data: The data from the clicked point in the graph.
1672             :type graph_data: dict
1673             :returns: The data to be displayed on the offcanvas and the
1674                 information to show the offcanvas.
1675             :rtype: tuple(list, list, bool)
1676             """
1677
1678             trigger = Trigger(callback_context.triggered)
1679
1680             try:
1681                 idx = 0 if trigger.idx == "tput" else 1
1682                 graph_data = graph_data[idx]["points"][0]
1683             except (IndexError, KeyError, ValueError, TypeError):
1684                 raise PreventUpdate
1685
1686             metadata = no_update
1687             graph = list()
1688
1689             children = [
1690                 dbc.ListGroupItem(
1691                     [dbc.Badge(x.split(":")[0]), x.split(": ")[1]]
1692                 ) for x in graph_data.get("text", "").split("<br>")
1693             ]
1694             if trigger.idx == "tput":
1695                 title = "Throughput"
1696             elif trigger.idx == "lat":
1697                 title = "Latency"
1698                 hdrh_data = graph_data.get("customdata", None)
1699                 if hdrh_data:
1700                     graph = [dbc.Card(
1701                         class_name="gy-2 p-0",
1702                         children=[
1703                             dbc.CardHeader(hdrh_data.pop("name")),
1704                             dbc.CardBody(children=[
1705                                 dcc.Graph(
1706                                     id="hdrh-latency-graph",
1707                                     figure=graph_hdrh_latency(
1708                                         hdrh_data, self._graph_layout
1709                                     )
1710                                 )
1711                             ])
1712                         ])
1713                     ]
1714             else:
1715                 raise PreventUpdate
1716
1717             metadata = [
1718                 dbc.Card(
1719                     class_name="gy-2 p-0",
1720                     children=[
1721                         dbc.CardHeader(children=[
1722                             dcc.Clipboard(
1723                                 target_id="tput-lat-metadata",
1724                                 title="Copy",
1725                                 style={"display": "inline-block"}
1726                             ),
1727                             title
1728                         ]),
1729                         dbc.CardBody(
1730                             id="tput-lat-metadata",
1731                             class_name="p-0",
1732                             children=[dbc.ListGroup(children, flush=True), ]
1733                         )
1734                     ]
1735                 )
1736             ]
1737
1738             return metadata, graph, True
1739
1740         @app.callback(
1741             Output("download-trending-data", "data"),
1742             State("store-selected-tests", "data"),
1743             Input("plot-btn-download", "n_clicks"),
1744             prevent_initial_call=True
1745         )
1746         def _download_trending_data(store_sel: list, _) -> dict:
1747             """Download the data
1748
1749             :param store_sel: List of tests selected by user stored in the
1750                 browser.
1751             :type store_sel: list
1752             :returns: dict of data frame content (base64 encoded) and meta data
1753                 used by the Download component.
1754             :rtype: dict
1755             """
1756
1757             if not store_sel:
1758                 raise PreventUpdate
1759
1760             df = pd.DataFrame()
1761             for itm in store_sel:
1762                 sel_data = select_trending_data(self._data, itm)
1763                 if sel_data is None:
1764                     continue
1765                 df = pd.concat([df, sel_data], ignore_index=True, copy=False)
1766
1767             return dcc.send_data_frame(df.to_csv, C.TREND_DOWNLOAD_FILE_NAME)