C-Dash: Replace dcc.Loading by dbc.Spinner

[csit.git] / csit.infra.dash / app / cdash / trending / layout.py

diff --git a/csit.infra.dash/app/cdash/trending/layout.py b/csit.infra.dash/app/cdash/trending/layout.py
index a8f6b6a..48b4801 100644 (file)
--- a/csit.infra.dash/app/cdash/trending/layout.py
+++ b/csit.infra.dash/app/cdash/trending/layout.py
@@ -1,4 +1,4 @@
-# Copyright (c) 2022 Cisco and/or its affiliates.
+# Copyright (c) 2023 Cisco and/or its affiliates.
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at:
@@ -249,6 +249,9 @@ class Layout:
                 id="div-main",
                 className="small",
                 children=[
+                    dcc.Store(id="store-selected-tests"),
+                    dcc.Store(id="store-control-panel"),
+                    dcc.Location(id="url", refresh=False),
                     dbc.Row(
                         id="row-navbar",
                         class_name="g-0",
@@ -256,7 +259,15 @@ class Layout:
                             self._add_navbar()
                         ]
                     ),
-                    dcc.Loading(
+                    dbc.Row(
+                        id="row-main",
+                        class_name="g-0",
+                        children=[
+                            self._add_ctrl_col(),
+                            self._add_plotting_col()
+                        ]
+                    ),
+                    dbc.Spinner(
                         dbc.Offcanvas(
                             class_name="w-50",
                             id="offcanvas-metadata",
@@ -268,17 +279,6 @@ class Layout:
                                 dbc.Row(id="metadata-hdrh-graph")
                             ]
                         )
-                    ),
-                    dbc.Row(
-                        id="row-main",
-                        class_name="g-0",
-                        children=[
-                            dcc.Store(id="store-selected-tests"),
-                            dcc.Store(id="store-control-panel"),
-                            dcc.Location(id="url", refresh=False),
-                            self._add_ctrl_col(),
-                            self._add_plotting_col()
-                        ]
                     )
                 ]
             )
@@ -342,7 +342,7 @@ class Layout:
         return dbc.Col(
             id="col-plotting-area",
             children=[
-                dcc.Loading(
+                dbc.Spinner(
                     children=[
                         dbc.Row(
                             id="plotting-area",
@@ -459,134 +459,164 @@ class Layout:
             dbc.Row(
                 class_name="g-0 p-1",
                 children=[
-                    dbc.Label(
-                        children=show_tooltip(
-                            self._tooltips,
-                            "help-framesize",
-                            "Frame Size"
-                        )
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "frmsize-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-framesize",
+                                    "Frame Size"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "frmsize-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "frmsize"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "frmsize"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             dbc.Row(
                 class_name="g-0 p-1",
                 children=[
-                    dbc.Label(
-                        children=show_tooltip(
-                            self._tooltips,
-                            "help-cores",
-                            "Number of Cores"
-                        )
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "core-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=False,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-cores",
+                                    "Number of Cores"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "core-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "core"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "core"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             dbc.Row(
                 class_name="g-0 p-1",
                 children=[
-                    dbc.Label(
-                        children=show_tooltip(
-                            self._tooltips,
-                            "help-ttype",
-                            "Test Type"
-                        )
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "tsttype-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-ttype",
+                                    "Test Type"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "tsttype-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "tsttype"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "tsttype"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             dbc.Row(
                 class_name="g-0 p-1",
                 children=[
-                    dbc.Label(
-                        children=show_tooltip(
-                            self._tooltips,
-                            "help-normalize",
-                            "Normalize"
-                        )
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id="normalize",
-                                options=[
-                                    {
-                                        "value": "normalize",
-                                        "label": (
-                                            "Normalize results to CPU "
-                                            "frequency 2GHz"
-                                        )
-                                    }
-                                ],
-                                value=[],
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-normalize",
+                                    "Normalization"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id="normalize",
+                                        options=[{
+                                            "value": "normalize",
+                                            "label": (
+                                                "Normalize to CPU frequency "
+                                                "2GHz"
+                                            )
+                                        }],
+                                        value=[],
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ]
                             )
-                        ]
+                        ],
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
@@ -694,7 +724,7 @@ class Layout:
                         [
                             dbc.Button(
                                 id="plot-btn-url",
-                                children="URL",
+                                children="Show URL",
                                 class_name="me-1",
                                 color="info",
                                 style={