From 72167a697e6832d4be51e66c541eef17d8577b9c Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Fri, 25 Aug 2023 15:39:21 +0200
Subject: [PATCH] vmui: ui improvements (#4872)

* vmui: chart refactoring to enhance code structure

* vmui: improve ui
---
 app/vmui/packages/vmui/public/index.html      |  2 +-
 .../Chart/ChartTooltip/ChartTooltip.tsx       | 38 +++++-----
 .../components/Chart/ChartTooltip/style.scss  | 75 +++++++++++++------
 .../components/Chart/GraphTips/GraphTips.tsx  |  1 +
 .../Line/Legend/LegendItem/LegendItem.tsx     | 13 +++-
 .../Chart/Line/Legend/LegendItem/style.scss   | 22 +++++-
 .../AdditionalSettings/AdditionalSettings.tsx |  1 +
 .../GlobalSettings/GlobalSettings.tsx         |  1 +
 .../GraphSettings/GraphSettings.tsx           |  1 +
 .../StepConfigurator/StepConfigurator.tsx     |  1 +
 .../ExecutionControls/ExecutionControls.tsx   |  1 +
 .../TimeSelector/TimeSelector.tsx             |  1 +
 .../ExploreMetricItemHeader.tsx               |  6 ++
 .../ExploreMetricsHeader.tsx                  |  2 +
 .../src/components/Main/Button/Button.tsx     |  3 +
 .../Main/CodeExample/CodeExample.tsx          |  1 +
 .../DateTimeInput/DateTimeInput.tsx           |  1 +
 .../components/Main/MenuBurger/MenuBurger.tsx |  1 +
 .../vmui/src/components/Main/Modal/Modal.tsx  |  1 +
 .../src/components/Main/Popper/Popper.tsx     |  1 +
 .../Main/ShortcutKeys/ShortcutKeys.tsx        |  1 +
 .../Main/TextField/TextFieldMessage.tsx       |  1 -
 .../vmui/src/components/Table/Table.tsx       |  1 +
 .../Table/TableSettings/TableSettings.tsx     |  2 +
 .../TraceQuery/NestedNav/NestedNav.tsx        |  3 +-
 .../components/TraceQuery/TracingsView.tsx    |  2 +
 .../components/Views/TableView/TableView.tsx  |  1 +
 app/vmui/packages/vmui/src/constants/graph.ts |  4 +-
 .../packages/vmui/src/constants/palette.ts    |  2 +-
 .../Header/HeaderControls/HeaderControls.tsx  |  1 +
 .../src/layouts/Header/HeaderNav/style.scss   |  6 +-
 .../CardinalityConfigurator.tsx               |  1 +
 .../QueryConfigurator/QueryConfigurator.tsx   |  3 +
 .../PredefinedDashboard.tsx                   |  1 +
 .../TopQueryTable/TopQueryTable.tsx           |  2 +
 app/vmui/packages/vmui/src/styles/fonts.scss  |  2 +
 app/vmui/packages/vmui/src/styles/style.scss  |  2 +-
 .../packages/vmui/src/utils/uplot/helpers.ts  |  6 +-
 38 files changed, 157 insertions(+), 57 deletions(-)

diff --git a/app/vmui/packages/vmui/public/index.html b/app/vmui/packages/vmui/public/index.html
index ca8d5d575..92cd53f08 100644
--- a/app/vmui/packages/vmui/public/index.html
+++ b/app/vmui/packages/vmui/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
diff --git a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx b/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
index 8d21888e2..f62421ece 100644
--- a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
@@ -7,6 +7,7 @@ import uPlot from "uplot";
 import Button from "../../Main/Button/Button";
 import { CloseIcon, DragIcon } from "../../Main/Icons";
 import { SeriesItemStats } from "../../../types";
+import { STATS_ORDER } from "../../../constants/graph";
 
 export interface ChartTooltipProps {
   u?: uPlot;
@@ -134,6 +135,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
               size="small"
               startIcon={<DragIcon/>}
               onMouseDown={handleMouseDown}
+              ariaLabel="drag the tooltip"
             />
             <Button
               className="vm-chart-tooltip-header__close"
@@ -141,6 +143,7 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
               size="small"
               startIcon={<CloseIcon/>}
               onClick={handleClose}
+              ariaLabel="close the tooltip"
             />
           </>
         )}
@@ -152,25 +155,24 @@ const ChartTooltip: FC<ChartTooltipProps> = ({
             style={{ background: marker }}
           />
         )}
-        <div>
-          <p className="vm-chart-tooltip-data__value">
-            <b>{value}</b>{unit}
-          </p>
-          {stats && (
-            <p className="vm-chart-tooltip-data__stats">
-              {Object.keys(stats).filter(key => key !== "last").map((key, i) => (
-                <span key={i}>
-                  {key}:<b>{stats[key as keyof SeriesItemStats]}</b>
-                </span>
-              )
-              )}
-            </p>
-          )}
-        </div>
-      </div>
-      <div className="vm-chart-tooltip-info">
-        {info}
+        <p className="vm-chart-tooltip-data__value">
+          <b>{value}</b>{unit}
+        </p>
       </div>
+      {stats && (
+        <table className="vm-chart-tooltip-stats">
+          {STATS_ORDER.map((key, i) => (
+            <div
+              className="vm-chart-tooltip-stats-row"
+              key={i}
+            >
+              <span className="vm-chart-tooltip-stats-row__key">{key}:</span>
+              <span className="vm-chart-tooltip-stats-row__value">{stats[key]}</span>
+            </div>
+          ))}
+        </table>
+      )}
+      {info && <p className="vm-chart-tooltip__info">{info}</p>}
     </div>
   ), u.root);
 };
diff --git a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss b/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss
index a5c00593a..25554abcf 100644
--- a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss
+++ b/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss
@@ -1,18 +1,18 @@
 @use "src/styles/variables" as *;
 
-$chart-tooltip-width: 325px;
+$chart-tooltip-width: 370px;
 $chart-tooltip-icon-width: 25px;
-$chart-tooltip-half-icon: calc($chart-tooltip-icon-width/2);
-$chart-tooltip-date-width: $chart-tooltip-width - (2*$chart-tooltip-icon-width) - (2*$padding-global) - $padding-small;
+$chart-tooltip-half-icon: calc($chart-tooltip-icon-width / 2);
+$chart-tooltip-date-width: $chart-tooltip-width - (2*$chart-tooltip-icon-width) - (3*$padding-global);
 $chart-tooltip-x: -1 * ($padding-small + $padding-global + $chart-tooltip-date-width + $chart-tooltip-half-icon);
-$chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon);
+$chart-tooltip-y: -1 * ($padding-global + $chart-tooltip-half-icon);
 
 .vm-chart-tooltip {
   position: absolute;
   display: grid;
   gap: $padding-global;
   width: $chart-tooltip-width;
-  padding: $padding-small;
+  padding: $padding-global;
   border-radius: $border-radius-medium;
   background: $color-background-tooltip;
   color: $color-white;
@@ -44,45 +44,76 @@ $chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon);
     justify-content: center;
     min-height: 25px;
 
+    &__title {
+      grid-row: 1;
+    }
+
     &__close {
+      grid-row: 1;
+      grid-column: 3;
       color: $color-white;
     }
 
     &__drag {
+      grid-row: 1;
+      grid-column: 2;
       color: $color-white;
       cursor: move;
     }
 
     &__date {
+      grid-column: 1;
       display: grid;
       gap: 2px;
     }
   }
 
   &-data {
-    display: grid;
-    grid-template-columns: auto 1fr;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
     gap: $padding-small;
-    align-items: flex-start;
-    word-break: break-all;
-    line-height: $font-size;
-
-    &__stats {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: $padding-small;
-    }
 
     &__marker {
-      width: 12px;
-      height: 12px;
+      width: $font-size;
+      height: $font-size;
+      border: 1px solid rgba($color-white, 0.5);
+    }
+
+    &__value {
+      line-height: 1;
+      font-size: $font-size;
     }
   }
 
-  &-info {
-    display: grid;
-    grid-gap: 4px;
+  &-stats {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: $padding-small $padding-global;
+
+    &-row {
+      display: grid;
+      align-items: center;
+      justify-content: flex-start;
+
+      &:not(:last-child) {
+        padding-right: $padding-small;
+      }
+
+      &__key {
+        line-height: 1;
+        margin-right: calc($padding-small/2);
+      }
+
+      &__value {
+        font-weight: bold;
+      }
+    }
+  }
+
+  &__info {
     word-break: break-all;
     white-space: pre-wrap;
   }
diff --git a/app/vmui/packages/vmui/src/components/Chart/GraphTips/GraphTips.tsx b/app/vmui/packages/vmui/src/components/Chart/GraphTips/GraphTips.tsx
index 6cbb459f2..da477a107 100644
--- a/app/vmui/packages/vmui/src/components/Chart/GraphTips/GraphTips.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/GraphTips/GraphTips.tsx
@@ -22,6 +22,7 @@ const GraphTips: FC = () => {
           color={"gray"}
           startIcon={<TipIcon/>}
           onClick={handleOpenTips}
+          ariaLabel="open the tips"
         />
       </Tooltip>
       {showTips && (
diff --git a/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/LegendItem.tsx b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/LegendItem.tsx
index 2130bbfc2..9e530812e 100644
--- a/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/LegendItem.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/LegendItem.tsx
@@ -5,6 +5,7 @@ import "./style.scss";
 import classNames from "classnames";
 import { getFreeFields } from "./helpers";
 import useCopyToClipboard from "../../../../../hooks/useCopyToClipboard";
+import { STATS_ORDER } from "../../../../../constants/graph";
 
 interface LegendItemProps {
   legend: LegendItemType;
@@ -70,8 +71,16 @@ const LegendItem: FC<LegendItemProps> = ({ legend, onChange, isHeatmap }) => {
         </span>
       </div>
       {!isHeatmap && showCalculations && (
-        <div className="vm-legend-item-values">
-          median:{calculations.median}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last}
+        <div className="vm-legend-item-stats">
+          {STATS_ORDER.map((key, i) => (
+            <div
+              className="vm-legend-item-stats-row"
+              key={i}
+            >
+              <span className="vm-legend-item-stats-row__key">{key}:</span>
+              <span className="vm-legend-item-stats-row__value">{calculations[key]}</span>
+            </div>
+          ))}
         </div>
       )}
     </div>
diff --git a/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss
index 337626848..f2762c552 100644
--- a/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss
@@ -34,6 +34,7 @@
   }
 
   &__marker {
+    position: relative;
     width: 14px;
     height: 14px;
     box-sizing: border-box;
@@ -59,10 +60,29 @@
     }
   }
 
-  &-values {
+  &-stats {
     grid-column: 2;
     display: flex;
     align-items: center;
     gap: $padding-small;
+
+    &-row {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      &:not(:last-child) {
+        padding-right: $padding-global;
+      }
+
+      &__key {
+        line-height: 1;
+        color: $color-text-secondary;
+        margin-right: calc($padding-small / 2);
+      }
+
+      &__value {
+      }
+    }
   }
 }
diff --git a/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/AdditionalSettings.tsx b/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/AdditionalSettings.tsx
index f4b7b6694..7a4016102 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/AdditionalSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/AdditionalSettings.tsx
@@ -76,6 +76,7 @@ const AdditionalSettings: FC = () => {
             variant="outlined"
             startIcon={<TuneIcon/>}
             onClick={handleToggleList}
+            ariaLabel="additional the query settings"
           />
         </div>
         <Popper
diff --git a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx
index ac425e4a9..fce3dac62 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx
@@ -131,6 +131,7 @@ const GlobalSettings: FC = () => {
           color="primary"
           startIcon={<SettingsIcon/>}
           onClick={handleOpen}
+          ariaLabel="settings"
         />
       </Tooltip>
     )}
diff --git a/app/vmui/packages/vmui/src/components/Configurators/GraphSettings/GraphSettings.tsx b/app/vmui/packages/vmui/src/components/Configurators/GraphSettings/GraphSettings.tsx
index 129d28bff..6fbffe6b3 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/GraphSettings/GraphSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/GraphSettings/GraphSettings.tsx
@@ -34,6 +34,7 @@ const GraphSettings: FC<GraphSettingsProps> = ({ yaxis, setYaxisLimits, toggleEn
             variant="text"
             startIcon={<SettingsIcon/>}
             onClick={toggleOpen}
+            ariaLabel="settings"
           />
         </div>
       </Tooltip>
diff --git a/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/StepConfigurator.tsx b/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/StepConfigurator.tsx
index 42b1a1640..f05d78fbd 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/StepConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/StepConfigurator.tsx
@@ -171,6 +171,7 @@ const StepConfigurator: FC = () => {
                   color="primary"
                   startIcon={<RestartIcon/>}
                   onClick={handleReset}
+                  ariaLabel="reset step"
                 />
               </Tooltip>
             )}
diff --git a/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls.tsx b/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls.tsx
index 87b574300..e5c09c034 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls.tsx
@@ -93,6 +93,7 @@ export const ExecutionControls: FC = () => {
               color="primary"
               onClick={handleUpdate}
               startIcon={<RefreshIcon/>}
+              ariaLabel="refresh dashboard"
             />
           </Tooltip>
         )}
diff --git a/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector.tsx b/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector.tsx
index 26a39a699..30138e779 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector.tsx
@@ -133,6 +133,7 @@ export const TimeSelector: FC = () => {
             color="primary"
             startIcon={<ClockIcon/>}
             onClick={toggleOpenOptions}
+            ariaLabel="time range controls"
           >
             {displayFullDate && <span>{dateTitle}</span>}
           </Button>
diff --git a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx
index 1dc00078d..d39a74fde 100644
--- a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx
+++ b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx
@@ -59,6 +59,7 @@ const ExploreMetricItemHeader: FC<ExploreMetricItemControlsProps> = ({
           size="small"
           startIcon={<MoreIcon/>}
           onClick={handleOpenOptions}
+          ariaLabel="open panel settings"
         />
         {openOptions && (
           <Modal
@@ -72,6 +73,7 @@ const ExploreMetricItemHeader: FC<ExploreMetricItemControlsProps> = ({
                   variant="outlined"
                   onClick={handleOrderUp}
                   disabled={index === 0}
+                  ariaLabel="move graph up"
                 />
                 <p>position:
                   <span className="vm-explore-metrics-item-header-modal-order__index">#{index + 1}</span>
@@ -81,6 +83,7 @@ const ExploreMetricItemHeader: FC<ExploreMetricItemControlsProps> = ({
                   variant="outlined"
                   onClick={handleOrderDown}
                   disabled={index === length - 1}
+                  ariaLabel="move graph down"
                 />
               </div>
               {!isBucket && (
@@ -123,6 +126,7 @@ const ExploreMetricItemHeader: FC<ExploreMetricItemControlsProps> = ({
             color="gray"
             size="small"
             onClick={handleOrderUp}
+            ariaLabel="move graph up"
           />
         </Tooltip>
         <div className="vm-explore-metrics-item-header__index">#{index+1}</div>
@@ -134,6 +138,7 @@ const ExploreMetricItemHeader: FC<ExploreMetricItemControlsProps> = ({
             color="gray"
             size="small"
             onClick={handleOrderDown}
+            ariaLabel="move graph down"
           />
         </Tooltip>
       </div>
@@ -157,6 +162,7 @@ const ExploreMetricItemHeader: FC<ExploreMetricItemControlsProps> = ({
             color="gray"
             size="small"
             onClick={handleClickRemove}
+            ariaLabel="close graph"
           />
         </Tooltip>
       </div>
diff --git a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx
index 9d2558104..0d4151cb1 100644
--- a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx
+++ b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx
@@ -100,6 +100,7 @@ const ExploreMetricsHeader: FC<ExploreMetricsHeaderProps> = ({
               color={showTips ? "warning" : "gray"}
               startIcon={<TipIcon/>}
               onClick={toggleShowTips}
+              ariaLabel="visibility tips"
             />
           </Tooltip>
         </div>
@@ -134,6 +135,7 @@ const ExploreMetricsHeader: FC<ExploreMetricsHeaderProps> = ({
               size="small"
               startIcon={<CloseIcon/>}
               onClick={setHideTips}
+              ariaLabel="close tips"
             />
           </div>
         </Alert>
diff --git a/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx b/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx
index 5d939e609..f7507a77b 100644
--- a/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx
@@ -7,6 +7,7 @@ interface ButtonProps {
   variant?: "contained" | "outlined" | "text"
   color?: "primary" | "secondary" | "success" | "error" | "gray"  | "warning"
   size?: "small" | "medium" | "large"
+  ariaLabel?: string // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
   endIcon?: ReactNode
   startIcon?: ReactNode
   fullWidth?: boolean
@@ -21,6 +22,7 @@ const Button: FC<ButtonProps> = ({
   variant = "contained",
   color = "primary",
   size = "medium",
+  ariaLabel,
   children,
   endIcon,
   startIcon,
@@ -46,6 +48,7 @@ const Button: FC<ButtonProps> = ({
     <button
       className={classesButton}
       disabled={disabled}
+      aria-label={ariaLabel}
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
diff --git a/app/vmui/packages/vmui/src/components/Main/CodeExample/CodeExample.tsx b/app/vmui/packages/vmui/src/components/Main/CodeExample/CodeExample.tsx
index 6e0257641..38da105d9 100644
--- a/app/vmui/packages/vmui/src/components/Main/CodeExample/CodeExample.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/CodeExample/CodeExample.tsx
@@ -35,6 +35,7 @@ const CodeExample: FC<{code: string}> = ({ code }) => {
             variant="text"
             onClick={handlerCopy}
             startIcon={<CopyIcon/>}
+            ariaLabel="close"
           />
         </Tooltip>
       </div>
diff --git a/app/vmui/packages/vmui/src/components/Main/DatePicker/DateTimeInput/DateTimeInput.tsx b/app/vmui/packages/vmui/src/components/Main/DatePicker/DateTimeInput/DateTimeInput.tsx
index 7986e582f..e1241a967 100644
--- a/app/vmui/packages/vmui/src/components/Main/DatePicker/DateTimeInput/DateTimeInput.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/DatePicker/DateTimeInput/DateTimeInput.tsx
@@ -111,6 +111,7 @@ const DateTimeInput: FC<DateTimeInputProps> = ({
           color="gray"
           size="small"
           startIcon={<CalendarIcon/>}
+          ariaLabel="calendar"
         />
       </div>
       <DatePicker
diff --git a/app/vmui/packages/vmui/src/components/Main/MenuBurger/MenuBurger.tsx b/app/vmui/packages/vmui/src/components/Main/MenuBurger/MenuBurger.tsx
index a336607fe..d87b71801 100644
--- a/app/vmui/packages/vmui/src/components/Main/MenuBurger/MenuBurger.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/MenuBurger/MenuBurger.tsx
@@ -8,6 +8,7 @@ const MenuBurger = ({ open }: {open: boolean}) => (
       "vm-menu-burger": true,
       "vm-menu-burger_opened": open
     })}
+    aria-label="menu"
   >
     <span></span>
   </button>
diff --git a/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx b/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx
index 1cbeb524b..713996484 100644
--- a/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx
@@ -82,6 +82,7 @@ const Modal: FC<ModalProps> = ({
               variant="text"
               size="small"
               onClick={onClose}
+              ariaLabel="close"
             >
               <CloseIcon/>
             </Button>
diff --git a/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx b/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx
index 9caee30e3..d76f454a5 100644
--- a/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx
@@ -162,6 +162,7 @@ const Popper: FC<PopperProps> = ({
                 variant="text"
                 size="small"
                 onClick={handleClickClose}
+                ariaLabel="close"
               >
                 <CloseIcon/>
               </Button>
diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx
index 171d73083..c05b4249e 100644
--- a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx
@@ -45,6 +45,7 @@ const ShortcutKeys: FC<{ showTitle?: boolean }> = ({ showTitle }) => {
         color="primary"
         startIcon={<KeyboardIcon/>}
         onClick={handleOpen}
+        ariaLabel={title}
       >
         {showTitle && title}
       </Button>
diff --git a/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx b/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx
index db1c2f1c7..2ac8357d7 100644
--- a/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx
@@ -11,7 +11,6 @@ interface TextFieldErrorProps {
 }
 
 const TextFieldMessage: FC<TextFieldErrorProps> = ({ error, warning, info }) => {
-  console.log(warning);
   const messageRef = useRef<HTMLSpanElement>(null);
   const [isMessageTruncated, setIsMessageTruncated] = useState(false);
   const [showFull, setShowFull] = useState(false);
diff --git a/app/vmui/packages/vmui/src/components/Table/Table.tsx b/app/vmui/packages/vmui/src/components/Table/Table.tsx
index 3f9c56b0c..1a53542b7 100644
--- a/app/vmui/packages/vmui/src/components/Table/Table.tsx
+++ b/app/vmui/packages/vmui/src/components/Table/Table.tsx
@@ -110,6 +110,7 @@ const Table = <T extends object>({ rows, columns, defaultOrderBy, copyToClipboar
                         size="small"
                         startIcon={copied === rowIndex ? <DoneIcon/> : <CopyIcon/>}
                         onClick={createCopyHandler(row[copyToClipboard], rowIndex)}
+                        ariaLabel="copy row"
                       />
                     </Tooltip>
                   </div>
diff --git a/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx b/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx
index 1665a1156..f9c2c65bc 100644
--- a/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx
@@ -67,6 +67,7 @@ const TableSettings: FC<TableSettingsProps> = ({
             startIcon={<SettingsIcon/>}
             onClick={toggleOpenSettings}
             disabled={disabledButton}
+            ariaLabel="table settings"
           />
         </div>
       </Tooltip>
@@ -100,6 +101,7 @@ const TableSettings: FC<TableSettingsProps> = ({
                   size="small"
                   onClick={handleResetColumns}
                   startIcon={<RestartIcon/>}
+                  ariaLabel="reset columns"
                 />
               </Tooltip>
             </div>
diff --git a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx
index 02699336e..f32e13b54 100644
--- a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx
+++ b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx
@@ -88,9 +88,8 @@ const NestedNav: FC<RecursiveProps> = ({ trace, totalMsec })  => {
           </div>
           {(isExpanded || showFullMessage) && (
             <Button
-              variant="outlined"
+              variant="text"
               size="small"
-              color="secondary"
               onClick={handleClickShowMore}
             >
               {showFullMessage ? "Hide" : "Show full query"}
diff --git a/app/vmui/packages/vmui/src/components/TraceQuery/TracingsView.tsx b/app/vmui/packages/vmui/src/components/TraceQuery/TracingsView.tsx
index 8db157e2c..b89b469c0 100644
--- a/app/vmui/packages/vmui/src/components/TraceQuery/TracingsView.tsx
+++ b/app/vmui/packages/vmui/src/components/TraceQuery/TracingsView.tsx
@@ -69,6 +69,7 @@ const TracingsView: FC<TraceViewProps> = ({ traces, jsonEditor = false, onDelete
                   variant="text"
                   startIcon={<CodeIcon/>}
                   onClick={handleJsonClick(trace)}
+                  ariaLabel="open JSON"
                 />
               </Tooltip>
               <Tooltip title={"Remove trace"}>
@@ -77,6 +78,7 @@ const TracingsView: FC<TraceViewProps> = ({ traces, jsonEditor = false, onDelete
                   color="error"
                   startIcon={<DeleteIcon/>}
                   onClick={handleDeleteClick(trace)}
+                  ariaLabel="remove trace"
                 />
               </Tooltip>
             </div>
diff --git a/app/vmui/packages/vmui/src/components/Views/TableView/TableView.tsx b/app/vmui/packages/vmui/src/components/Views/TableView/TableView.tsx
index 6bb8b18fd..7b66129be 100644
--- a/app/vmui/packages/vmui/src/components/Views/TableView/TableView.tsx
+++ b/app/vmui/packages/vmui/src/components/Views/TableView/TableView.tsx
@@ -164,6 +164,7 @@ const TableView: FC<GraphViewProps> = ({ data, displayColumns }) => {
                           size="small"
                           startIcon={<CopyIcon/>}
                           onClick={createCopyHandler(row.copyValue)}
+                          ariaLabel="copy row"
                         />
                       </Tooltip>
                     </div>
diff --git a/app/vmui/packages/vmui/src/constants/graph.ts b/app/vmui/packages/vmui/src/constants/graph.ts
index 1ce971626..48147c639 100644
--- a/app/vmui/packages/vmui/src/constants/graph.ts
+++ b/app/vmui/packages/vmui/src/constants/graph.ts
@@ -1,4 +1,4 @@
-import { GraphSize } from "../types";
+import { GraphSize, SeriesItemStats } from "../types";
 
 export const MAX_QUERY_FIELDS = 4;
 export const DEFAULT_MAX_SERIES = {
@@ -22,3 +22,5 @@ export const GRAPH_SIZES: GraphSize[] = [
     height: () => window.innerHeight * 0.8
   },
 ];
+
+export const STATS_ORDER: (keyof SeriesItemStats)[] = ["min", "median", "max"];
diff --git a/app/vmui/packages/vmui/src/constants/palette.ts b/app/vmui/packages/vmui/src/constants/palette.ts
index 8daea2721..abb11bfed 100644
--- a/app/vmui/packages/vmui/src/constants/palette.ts
+++ b/app/vmui/packages/vmui/src/constants/palette.ts
@@ -26,7 +26,7 @@ export const lightPalette = {
   "color-success": "#4CAF50",
   "color-background-body": "#FEFEFF",
   "color-background-block": "#FFFFFF",
-  "color-background-tooltip": "rgba(97,97,97, 0.92)",
+  "color-background-tooltip": "rgba(80,80,80,0.9)",
   "color-text": "#110f0f",
   "color-text-secondary": "#706F6F",
   "color-text-disabled": "#A09F9F",
diff --git a/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/HeaderControls.tsx b/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/HeaderControls.tsx
index 8fb76e0cd..2dbc6fac0 100644
--- a/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/HeaderControls.tsx
+++ b/app/vmui/packages/vmui/src/layouts/Header/HeaderControls/HeaderControls.tsx
@@ -58,6 +58,7 @@ const HeaderControls: FC<ControlsProps & HeaderProps> = ({
             })}
             startIcon={<MoreIcon/>}
             onClick={handleToggleList}
+            ariaLabel={"controls"}
           />
         </div>
         <Modal
diff --git a/app/vmui/packages/vmui/src/layouts/Header/HeaderNav/style.scss b/app/vmui/packages/vmui/src/layouts/Header/HeaderNav/style.scss
index ee338f081..a548799b8 100644
--- a/app/vmui/packages/vmui/src/layouts/Header/HeaderNav/style.scss
+++ b/app/vmui/packages/vmui/src/layouts/Header/HeaderNav/style.scss
@@ -23,7 +23,7 @@
   &-item {
     position: relative;
     padding: $padding-global $padding-small;
-    opacity: 0.7;
+    opacity: 1;
     cursor: pointer;
     transition: opacity 200ms ease-in;
     text-transform: capitalize;
@@ -40,11 +40,11 @@
     }
 
     &:hover {
-      opacity: 1;
+      opacity: 0.7;
     }
 
     &_active {
-      opacity: 1;
+      border-bottom: 2px solid rgba($color-black, 0.2);
     }
 
     svg {
diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx
index d420033bc..dcd021031 100644
--- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx
@@ -122,6 +122,7 @@ const CardinalityConfigurator: FC<CardinalityTotalsProps> = (props) => {
             color={showTips ? "warning" : "gray"}
             startIcon={<TipIcon/>}
             onClick={handleToggleTips}
+            ariaLabel="visibility tips"
           />
         </Tooltip>
         <Button
diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx
index b35cbc5e4..169a2360d 100644
--- a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx
@@ -186,6 +186,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({
                 color={"gray"}
                 startIcon={hideQuery.includes(i) ? <VisibilityOffIcon/> : <VisibilityIcon/>}
                 onClick={createHandlerHideQuery(i)}
+                ariaLabel="visibility query"
               />
             </div>
           </Tooltip>
@@ -198,6 +199,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({
                 startIcon={<Prettify/>}
                 onClick={async () => await handlePrettifyQuery(i)}
                 className="prettify"
+                ariaLabel="prettify the query"
               />
             </div>
           </Tooltip>
@@ -210,6 +212,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({
                   color={"error"}
                   startIcon={<DeleteIcon/>}
                   onClick={createHandlerRemoveQuery(i)}
+                  ariaLabel="remove query"
                 />
               </div>
             </Tooltip>
diff --git a/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/PredefinedDashboard.tsx b/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/PredefinedDashboard.tsx
index d9e729121..303cc4f58 100644
--- a/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/PredefinedDashboard.tsx
+++ b/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/PredefinedDashboard.tsx
@@ -108,6 +108,7 @@ const PredefinedDashboard: FC<PredefinedDashboardProps> = ({
               <button
                 className="vm-predefined-dashboard-panels-panel__resizer"
                 onMouseDown={createHandlerResize(i)}
+                aria-label="resize the panel"
               />
             </div>
           )
diff --git a/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx b/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx
index 2277113fb..4f1471de2 100644
--- a/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx
+++ b/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx
@@ -85,6 +85,7 @@ const TopQueryTable:FC<TopQueryPanelProps> = ({ rows, columns, defaultOrderBy })
                       variant="text"
                       size="small"
                       startIcon={<PlayCircleOutlineIcon/>}
+                      ariaLabel="execute query"
                     />
                   </Link>
                 </Tooltip>
@@ -94,6 +95,7 @@ const TopQueryTable:FC<TopQueryPanelProps> = ({ rows, columns, defaultOrderBy })
                     size="small"
                     startIcon={<CopyIcon/>}
                     onClick={createCopyHandler(row)}
+                    ariaLabel="copy query"
                   />
                 </Tooltip>
               </div>
diff --git a/app/vmui/packages/vmui/src/styles/fonts.scss b/app/vmui/packages/vmui/src/styles/fonts.scss
index 8bc91c85a..96579372b 100644
--- a/app/vmui/packages/vmui/src/styles/fonts.scss
+++ b/app/vmui/packages/vmui/src/styles/fonts.scss
@@ -3,6 +3,7 @@
   src: url('../assets/fonts/Lato/Lato-Regular.ttf');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -10,4 +11,5 @@
   src: url('../assets/fonts/Lato/Lato-Bold.ttf');
   font-weight: bold;
   font-style: normal;
+  font-display: swap;
 }
diff --git a/app/vmui/packages/vmui/src/styles/style.scss b/app/vmui/packages/vmui/src/styles/style.scss
index 52044679a..7edd952f9 100644
--- a/app/vmui/packages/vmui/src/styles/style.scss
+++ b/app/vmui/packages/vmui/src/styles/style.scss
@@ -32,7 +32,7 @@
   /* backgrounds */
   --color-background-body: #FEFEFF;
   --color-background-block: #FFFFFF;
-  --color-background-tooltip: rgba(97,97,97, 0.92);
+  --color-background-tooltip: rgba(80,80,80,0.9);
 
   /* text */
   --color-text: #110f0f;
diff --git a/app/vmui/packages/vmui/src/utils/uplot/helpers.ts b/app/vmui/packages/vmui/src/utils/uplot/helpers.ts
index acd0d1dc1..a849ecf6e 100644
--- a/app/vmui/packages/vmui/src/utils/uplot/helpers.ts
+++ b/app/vmui/packages/vmui/src/utils/uplot/helpers.ts
@@ -32,11 +32,9 @@ export const formatPrettyNumber = (
   // This precision should be enough for most UX cases,
   // since the remaining digits are usually a white noise.
   let digits = 3 + Math.floor(1 + Math.log10(Math.max(Math.abs(min), Math.abs(max))) - Math.log10(range));
-  if (isNaN(digits) || digits > 20) {
-    digits = 20;
-  }
+  if (isNaN(digits) || digits > 20) digits = 20;
   return n.toLocaleString("en-US", {
-    minimumSignificantDigits: digits,
+    minimumSignificantDigits: 1,
     maximumSignificantDigits: digits,
   });
 };