UTI: UX Styling

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

diff --git a/resources/tools/dash/app/pal/data/data.py b/resources/tools/dash/app/pal/data/data.py
index 9ce09e7..859c7d3 100644 (file)
--- a/resources/tools/dash/app/pal/data/data.py
+++ b/resources/tools/dash/app/pal/data/data.py
@@ -135,8 +135,6 @@ class Data:
                     u"\n"
                     f"Creation of dataframe {path} took: {time() - start}"
                     u"\n"
                     u"\n"
                     f"Creation of dataframe {path} took: {time() - start}"
                     u"\n"

-                    f"{df}"
-                    u"\n"

                 )
         except NoFilesFound as err:
             logging.error(f"No parquets found.\n{err}")
                 )
         except NoFilesFound as err:
             logging.error(f"No parquets found.\n{err}")

diff --git a/resources/tools/dash/app/pal/templates/index.jinja2 b/resources/tools/dash/app/pal/templates/index.jinja2
index bd53346..5d93663 100644 (file)
--- a/resources/tools/dash/app/pal/templates/index.jinja2
+++ b/resources/tools/dash/app/pal/templates/index.jinja2
@@ -10,10 +10,6 @@
       <span>Trending</span>
       <i class="fas fa-arrow-right"></i>
     </a>
       <span>Trending</span>
       <i class="fas fa-arrow-right"></i>
     </a>

-    <a href="/report/" class="dash-link">
-      <span>Report</span>
-      <i class="fas fa-arrow-right"></i>
-    </a>

   </div>
 </div>
 {% endblock %}
   </div>
 </div>
 {% endblock %}

diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index f996f5a..afa459b 100644 (file)
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -19,7 +19,7 @@ import pandas as pd
 from dash import dcc
 from dash import html
 from dash import callback_context, no_update
 from dash import dcc
 from dash import html
 from dash import callback_context, no_update

-from dash import Input, Output, State, callback
+from dash import Input, Output, State

 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError
 from datetime import datetime, timedelta
 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError
 from datetime import datetime, timedelta


@@ -37,8 +37,7 @@ class Layout:
     STYLE_BLOCK = {"display": "block", "vertical-align": "top"}
     STYLE_INLINE ={
         "display": "inline-block",
     STYLE_BLOCK = {"display": "block", "vertical-align": "top"}
     STYLE_INLINE ={
         "display": "inline-block",

-        "vertical-align": "top",
-        "width": "33%"
+        "vertical-align": "top"

     }
     NO_GRAPH = {"data": [], "layout": {}, "frames": []}
 
     }
     NO_GRAPH = {"data": [], "layout": {}, "frames": []}
 


@@ -163,8 +162,7 @@ class Layout:
             ],
             style={
                 "display": "inline-block",
             ],
             style={
                 "display": "inline-block",

-                "width": "18%",
-                "padding": "5px"
+                "width": "20%"

             }
         )
 
             }
         )
 


@@ -174,31 +172,19 @@ class Layout:
         return html.Div(
             id="div-plotting-area",
             children=[
         return html.Div(
             id="div-plotting-area",
             children=[

-                dcc.Loading(
-                    id="loading-graph",
-                    children=[
-                        dcc.Graph(
-                            id="graph-tput",
-                            style=self.STYLE_HIDEN
-                        ),
-                        dcc.Graph(
-                            id="graph-latency",
-                            style=self.STYLE_HIDEN
-                        )
-                    ],
-                    type="circle"
-                ),
-                html.Div(
-                    children=[
-                        html.Div(
-                            id="div-tput-metadata",
-                            children=[
-                                html.Button(
-                                    id="btn-download-data",
-                                    children=["Download Data"],
-                                    style={"display": "block"}
-                                ),
-                                dcc.Download(id="download-data"),
+                html.Table(children=[
+                    html.Tr(
+                        id="div-tput",
+                        style=self.STYLE_HIDEN,
+                        children=[
+                            html.Td(children=[
+                                dcc.Loading(
+                                    dcc.Graph(
+                                        id="graph-tput"
+                                    ),
+                                )
+                            ], style={"width": "80%"}),
+                            html.Td(children=[

                                 dcc.Clipboard(
                                     target_id="tput-metadata",
                                     title="Copy",
                                 dcc.Clipboard(
                                     target_id="tput-metadata",
                                     title="Copy",


@@ -212,55 +198,81 @@ class Layout:
                                 ),
                                 html.Pre(
                                     id="tput-metadata",
                                 ),
                                 html.Pre(
                                     id="tput-metadata",

-                                    children="Click on data points in the graph"
-                                )
-                            ],
-                            style=self.STYLE_HIDEN
-                        ),
-                        html.Div(
-                            id="div-latency-metadata",
-                            children=[
-                                dcc.Clipboard(
-                                    target_id="latency-metadata",
-                                    title="Copy",
-                                    style={"display": "inline-block"}
-                                ),
-                                html.Nobr(" "),
-                                html.Nobr(" "),
-                                dcc.Markdown(
-                                    children="**Latency**",
-                                    style={"display": "inline-block"}
+                                    children="Click on data point in the graph"

                                 ),
                                 ),

-                                html.Pre(
-                                    id="latency-metadata",
-                                    children="Click on data points in the graph"
+                                html.Div(
+                                    id="div-lat-metadata",
+                                    style=self.STYLE_HIDEN,
+                                    children=[
+                                        dcc.Clipboard(
+                                            target_id="lat-metadata",
+                                            title="Copy",
+                                            style={"display": "inline-block"}
+                                        ),
+                                        html.Nobr(" "),
+                                        html.Nobr(" "),
+                                        dcc.Markdown(
+                                            children="**Latency**",
+                                            style={"display": "inline-block"}
+                                        ),
+                                        html.Pre(
+                                            id="lat-metadata",
+                                            children= \
+                                            "Click on data point in the graph"
+                                        )
+                                    ]

                                 )
                                 )

-                            ],
-                            style=self.STYLE_HIDEN
-                        ),
-                        html.Div(
-                            id="div-latency-hdrh",
-                            children=[
+                            ], style={"width": "20%"}),
+                        ]
+                    ),
+                    html.Tr(
+                        id="div-latency",
+                        style=self.STYLE_HIDEN,
+                        children=[
+                            html.Td(children=[
+                                dcc.Loading(
+                                    dcc.Graph(
+                                        id="graph-latency"
+                                    )
+                                )
+                            ], style={"width": "80%"}),
+                            html.Td(children=[
+                                dcc.Loading(
+                                    dcc.Graph(
+                                        id="graph-latency-hdrh",
+                                        style=self.STYLE_INLINE,
+                                        figure=self.NO_GRAPH
+                                    )
+                                )
+                            ], style={"width": "20%"}),
+                        ]
+                    ),
+                    html.Tr(
+                        id="div-download",
+                        style=self.STYLE_HIDEN,
+                        children=[
+                            html.Td(children=[

                                 dcc.Loading(
                                 dcc.Loading(

-                                    id="loading-hdrh-latency-graph",

                                     children=[
                                     children=[

-                                        dcc.Graph(
-                                            id="graph-latency-hdrh"
-                                        )
-                                    ],
-                                    type="circle"
+                                        html.Button(
+                                            id="btn-download-data",
+                                            children=["Download Data"]
+                                        ),
+                                        dcc.Download(id="download-data")
+                                    ]

                                 )
                                 )

-                            ],
-                            style=self.STYLE_HIDEN
-                        )
-                    ]
-                )
+                            ], style={"width": "80%"}),
+                            html.Td(children=[
+                                html.Nobr(" ")
+                            ], style={"width": "20%"}),
+                        ]
+                    ),
+                ]),

             ],
             style={
                 "vertical-align": "top",
                 "display": "inline-block",
             ],
             style={
                 "vertical-align": "top",
                 "display": "inline-block",

-                "width": "80%",
-                "padding": "5px"
+                "width": "80%"

             }
         )
 
             }
         )
 


@@ -540,11 +552,11 @@ class Layout:
 
         @app.callback(
             Output("graph-tput", "figure"),
 
         @app.callback(
             Output("graph-tput", "figure"),

-            Output("graph-tput", "style"),
-            Output("div-tput-metadata", "style"),

             Output("graph-latency", "figure"),
             Output("graph-latency", "figure"),

-            Output("graph-latency", "style"),
-            Output("div-latency-metadata", "style"),
+            Output("div-tput", "style"),
+            Output("div-latency", "style"),
+            Output("div-lat-metadata", "style"),
+            Output("div-download", "style"),

             Output("selected-tests", "data"),  # Store
             Output("cl-selected", "options"),  # User selection
             Output("dd-ctrl-phy", "value"),
             Output("selected-tests", "data"),  # Store
             Output("cl-selected", "options"),  # User selection
             Output("dd-ctrl-phy", "value"),


@@ -587,11 +599,11 @@ class Layout:
                 def __init__(self) -> None:
                     self._output = {
                         "graph-tput-figure": no_update,
                 def __init__(self) -> None:
                     self._output = {
                         "graph-tput-figure": no_update,

-                        "graph-tput-style": no_update,
-                        "div-tput-metadata-style": no_update,

                         "graph-lat-figure": no_update,
                         "graph-lat-figure": no_update,

-                        "graph-lat-style": no_update,
+                        "div-tput-style": no_update,
+                        "div-latency-style": no_update,

                         "div-lat-metadata-style": no_update,
                         "div-lat-metadata-style": no_update,

+                        "div-download-style": no_update,

                         "selected-tests-data": no_update,
                         "cl-selected-options": no_update,
                         "dd-ctrl-phy-value": no_update,
                         "selected-tests-data": no_update,
                         "cl-selected-options": no_update,
                         "dd-ctrl-phy-value": no_update,


@@ -659,16 +671,16 @@ class Layout:
                 output.set_values({
                     "graph-tput-figure": \
                         fig_tput if fig_tput else self.NO_GRAPH,
                 output.set_values({
                     "graph-tput-figure": \
                         fig_tput if fig_tput else self.NO_GRAPH,

-                    "graph-tput-style": \
-                        self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
-                    "div-tput-metadata-style": \
-                        self.STYLE_INLINE if fig_tput else self.STYLE_HIDEN,

                     "graph-lat-figure": \
                         fig_lat if fig_lat else self.NO_GRAPH,
                     "graph-lat-figure": \
                         fig_lat if fig_lat else self.NO_GRAPH,

-                    "graph-lat-style": \
+                    "div-tput-style": \
+                        self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
+                    "div-latency-style": \

                         self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
                     "div-lat-metadata-style": \
                         self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
                     "div-lat-metadata-style": \

-                        self.STYLE_INLINE if fig_lat else self.STYLE_HIDEN
+                        self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
+                    "div-download-style": \
+                        self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,

                 })
 
             elif trigger_id == "btn-sel-remove":
                 })
 
             elif trigger_id == "btn-sel-remove":


@@ -685,27 +697,27 @@ class Layout:
                     output.set_values({
                         "graph-tput-figure": \
                             fig_tput if fig_tput else self.NO_GRAPH,
                     output.set_values({
                         "graph-tput-figure": \
                             fig_tput if fig_tput else self.NO_GRAPH,

-                        "graph-tput-style": \
-                            self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
-                        "div-tput-metadata-style": \
-                            self.STYLE_INLINE if fig_tput else self.STYLE_HIDEN,

                         "graph-lat-figure": \
                             fig_lat if fig_lat else self.NO_GRAPH,
                         "graph-lat-figure": \
                             fig_lat if fig_lat else self.NO_GRAPH,

-                        "graph-lat-style": \
+                        "div-tput-style": \
+                            self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,
+                        "div-latency-style": \

                             self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
                         "div-lat-metadata-style": \
                             self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
                         "div-lat-metadata-style": \

-                            self.STYLE_INLINE if fig_lat else self.STYLE_HIDEN,
+                            self.STYLE_BLOCK if fig_lat else self.STYLE_HIDEN,
+                        "div-download-style": \
+                            self.STYLE_BLOCK if fig_tput else self.STYLE_HIDEN,

                         "selected-tests-data": store_sel,
                         "cl-selected-options": _list_tests()
                     })
                 else:
                     output.set_values({
                         "graph-tput-figure": self.NO_GRAPH,
                         "selected-tests-data": store_sel,
                         "cl-selected-options": _list_tests()
                     })
                 else:
                     output.set_values({
                         "graph-tput-figure": self.NO_GRAPH,

-                        "graph-tput-style": self.STYLE_HIDEN,
-                        "div-tput-metadata-style": self.STYLE_HIDEN,

                         "graph-lat-figure": self.NO_GRAPH,
                         "graph-lat-figure": self.NO_GRAPH,

-                        "graph-lat-style": self.STYLE_HIDEN,
+                        "div-tput-style": self.STYLE_HIDEN,
+                        "div-latency-style": self.STYLE_HIDEN,

                         "div-lat-metadata-style": self.STYLE_HIDEN,
                         "div-lat-metadata-style": self.STYLE_HIDEN,

+                        "div-download-style": self.STYLE_HIDEN,

                         "selected-tests-data": store_sel,
                         "cl-selected-options": _list_tests()
                     })
                         "selected-tests-data": store_sel,
                         "cl-selected-options": _list_tests()
                     })


@@ -722,15 +734,15 @@ class Layout:
             if not hover_data:
                 raise PreventUpdate
 
             if not hover_data:
                 raise PreventUpdate
 

-            return hover_data["points"][0]["text"].replace("<br>", "\n"),
+            return hover_data["points"][0]["text"].replace("<br>", "\n")

 
         @app.callback(
 
         @app.callback(

-            Output("latency-metadata", "children"),

             Output("graph-latency-hdrh", "figure"),
             Output("graph-latency-hdrh", "figure"),

-            Output("div-latency-hdrh", "style"),
+            Output("graph-latency-hdrh", "style"),
+            Output("lat-metadata", "children"),

             Input("graph-latency", "clickData")
         )
             Input("graph-latency", "clickData")
         )

-        def _show_latency_metadata(hover_data):
+        def _show_latency_hdhr(hover_data):

             """
             """
             if not hover_data:
             """
             """
             if not hover_data:


@@ -742,9 +754,9 @@ class Layout:
                 graph = graph_hdrh_latency(hdrh_data, self.layout)
 
             return (
                 graph = graph_hdrh_latency(hdrh_data, self.layout)
 
             return (

-                hover_data["points"][0]["text"].replace("<br>", "\n"),

                 graph,
                 graph,

-                self.STYLE_INLINE if graph else self.STYLE_HIDEN
+                self.STYLE_INLINE,
+                hover_data["points"][0]["text"].replace("<br>", "\n")

             )
 
         @app.callback(
             )
 
         @app.callback(

diff --git a/resources/tools/dash/app/pal/trending/layout.yaml b/resources/tools/dash/app/pal/trending/layout.yaml
index 27294a3..9645b74 100644 (file)
--- a/resources/tools/dash/app/pal/trending/layout.yaml
+++ b/resources/tools/dash/app/pal/trending/layout.yaml
@@ -5,7 +5,7 @@ plot-trending-tput:
   autosize: True
   showlegend: True
   # width: 1100
   autosize: True
   showlegend: True
   # width: 1100

-  height: 400
+  #height: 400

   yaxis:
     showticklabels: True
     tickformat: ".3s"
   yaxis:
     showticklabels: True
     tickformat: ".3s"


@@ -83,7 +83,7 @@ plot-trending-lat:
   autosize: True
   showlegend: True
   # width: 1100
   autosize: True
   showlegend: True
   # width: 1100

-  height: 400
+  #height: 400

   yaxis:
     showticklabels: True
     tickformat: ".3s"
   yaxis:
     showticklabels: True
     tickformat: ".3s"


@@ -155,57 +155,56 @@ plot-trending-lat:
     namelength: -1
 
 plot-hdrh-latency:
     namelength: -1
 
 plot-hdrh-latency:

-    title:
-      text: "Latency by Percentile Distribution"
-      xanchor: "center"
-      x: 0.5
-      font:
-        size: 10
-    showlegend: True
-    legend:
-      traceorder: "normal"
-      orientation: "h"
-      # font:
-      #   size: 16
-      xanchor: "left"
-      yanchor: "top"
-      x: 0
-      y: -0.25
-      bgcolor: "rgba(255, 255, 255, 0)"
-      bordercolor: "rgba(255, 255, 255, 0)"
-    xaxis:
-      type: "log"
-      title: "Percentile [%]"
-      # titlefont:
-      #   size: 14
-      autorange: False
-      fixedrange: True
-      gridcolor: "rgb(230, 230, 230)"
-      linecolor: "rgb(220, 220, 220)"
-      linewidth: 1
-      showgrid: True
-      showline: True
-      showticklabels: True
-      tickcolor: "rgb(220, 220, 220)"
-      tickvals: [1, 2, 1e1, 20, 1e2, 1e3, 1e4, 1e5, 1e6]
-      ticktext: [0, 50, 90, 95, 99, 99.9, 99.99, 99.999, 99.9999]
-      # tickfont:
-      #   size: 14
-    yaxis:
-      title: "One-Way Latency per Direction [uSec]"
-      # titlefont:
-      #   size: 14
-      gridcolor: "rgb(230, 230, 230)"
-      linecolor: "rgb(220, 220, 220)"
-      linewidth: 1
-      showgrid: True
-      showline: True
-      showticklabels: True
-      tickcolor: "rgb(220, 220, 220)"
-      # tickfont:
-      #   size: 14
-    autosize: False
-    # width: 700
-    # height: 700
-    paper_bgcolor: "white"
-    plot_bgcolor: "white"
+  title:
+    text: "Latency by Percentile Distribution"
+    xanchor: "center"
+    x: 0.5
+    # font:
+    #   size: 10
+  showlegend: True
+  legend:
+    traceorder: "normal"
+    orientation: "h"
+    # font:
+    #   size: 16
+    xanchor: "left"
+    yanchor: "top"
+    x: 0
+    y: -0.25
+    bgcolor: "rgba(255, 255, 255, 0)"
+    bordercolor: "rgba(255, 255, 255, 0)"
+  xaxis:
+    type: "log"
+    title: "Percentile [%]"
+    # titlefont:
+    #   size: 14
+    autorange: False
+    fixedrange: True
+    gridcolor: "rgb(230, 230, 230)"
+    linecolor: "rgb(220, 220, 220)"
+    linewidth: 1
+    showgrid: True
+    showline: True
+    showticklabels: True
+    tickcolor: "rgb(220, 220, 220)"
+    tickvals: [1, 2, 1e1, 20, 1e2, 1e3, 1e4, 1e5, 1e6]
+    ticktext: [0, 50, 90, 95, 99, 99.9, 99.99, 99.999, 99.9999]
+    # tickfont:
+    #   size: 14
+  yaxis:
+    title: "One-Way Latency per Direction [uSec]"
+    # titlefont:
+    #   size: 14
+    gridcolor: "rgb(230, 230, 230)"
+    linecolor: "rgb(220, 220, 220)"
+    linewidth: 1
+    showgrid: True
+    showline: True
+    showticklabels: True
+    tickcolor: "rgb(220, 220, 220)"
+    # tickfont:
+    #   size: 14
+  autosize: True
+  #height: 400
+  paper_bgcolor: "white"
+  plot_bgcolor: "white"