feat(uti): Refactor plotting area

Change-Id: Ib3fce8f8f011b50919c1abebed21c7e962913650
Signed-off-by: Tibor Frank <tifrank@cisco.com>

1 files changed, 76 insertions, 34 deletions

diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index 4456b88f81..0cf1a9a942 100644
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -224,7 +224,37 @@ class Layout:
         return dbc.Col(
             id="col-plotting-area",
             children=[
-                # Empty for now
+                dbc.Row(  # Throughput
+                    id="row-graph-tput",
+                    className="g-0",
+                    children=[
+                        dcc.Loading(
+                            dcc.Graph(id="graph-tput")
+                        )
+                    ]
+                ),
+                dbc.Row(  # Latency
+                    id="row-graph-lat",
+                    className="g-0",
+                    children=[
+                        dcc.Loading(
+                            dcc.Graph(id="graph-latency")
+                        )
+                    ]
+                ),
+                dbc.Row(  # Download
+                    id="div-download",
+                    className="g-0",
+                    children=[
+                        dcc.Loading(children=[
+                            dbc.Button(
+                                id="btn-download-data",
+                                children=["Download Data"]
+                            ),
+                            dcc.Download(id="download-data")
+                        ])
+                    ]
+                )
             ],
             width=9,
         )
@@ -267,17 +297,21 @@ class Layout:
                     className="g-0",
                     children=[
                         dbc.Label("Number of Cores"),
-                        dbc.Checklist(
-                            id="cl-ctrl-core-all",
-                            options=[{"label": "All", "value": "all"}, ],
-                            inline=True,
-                            switch=False
-                        ),
-                        dbc.Checklist(
-                            id="cl-ctrl-core",
-                            inline=True,
-                            switch=False
-                        )
+                        dbc.Col([
+                            dbc.Checklist(
+                                id="cl-ctrl-core-all",
+                                options=[{"label": "All", "value": "all"}, ],
+                                inline=False,
+                                switch=False
+                            ),
+                        ], width=3),
+                        dbc.Col([
+                            dbc.Checklist(
+                                id="cl-ctrl-core",
+                                inline=True,
+                                switch=False
+                            )
+                        ])
                     ]
                 ),
                 dbc.Row(
@@ -285,17 +319,21 @@ class Layout:
                     className="g-0",
                     children=[
                         dbc.Label("Frame Size"),
-                        dbc.Checklist(
-                            id="cl-ctrl-framesize-all",
-                            options=[{"label": "All", "value": "all"}, ],
-                            inline=True,
-                            switch=False
-                        ),
-                        dbc.Checklist(
-                            id="cl-ctrl-framesize",
-                            inline=True,
-                            switch=False
-                        )
+                        dbc.Col([
+                            dbc.Checklist(
+                                id="cl-ctrl-framesize-all",
+                                options=[{"label": "All", "value": "all"}, ],
+                                inline=True,
+                                switch=False
+                            ),
+                        ], width=3),
+                        dbc.Col([
+                            dbc.Checklist(
+                                id="cl-ctrl-framesize",
+                                inline=True,
+                                switch=False
+                            )
+                        ])
                     ]
                 ),
                 dbc.Row(
@@ -303,17 +341,21 @@ class Layout:
                     className="g-0",
                     children=[
                         dbc.Label("Test Type"),
-                        dbc.Checklist(
-                            id="cl-ctrl-testtype-all",
-                            options=[{"label": "All", "value": "all"}, ],
-                            inline=True,
-                            switch=False
-                        ),
-                        dbc.Checklist(
-                            id="cl-ctrl-testtype",
-                            inline=True,
-                            switch=False
-                        )
+                        dbc.Col([
+                            dbc.Checklist(
+                                id="cl-ctrl-testtype-all",
+                                options=[{"label": "All", "value": "all"}, ],
+                                inline=True,
+                                switch=False
+                            ),
+                        ], width=3),
+                        dbc.Col([
+                            dbc.Checklist(
+                                id="cl-ctrl-testtype",
+                                inline=True,
+                                switch=False
+                            )
+                        ])
                     ]
                 ),
                 dbc.Row(