From 56e61bb54b553af7611f76596de8fd5d10e09d87 Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Wed, 6 Mar 2024 10:36:13 +0100
Subject: [PATCH] vmui: improve tracing styles (#5926)

Improved trace display for better visual separation of branches:
* Increased left padding for each element
* Added padding for the last element in the branch
---
 .../components/TraceQuery/NestedNav/style.scss    | 15 +++++++++++----
 docs/CHANGELOG.md                                 |  1 +
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/style.scss b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/style.scss
index 72bee00d9..33c58c205 100644
--- a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/style.scss
+++ b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/style.scss
@@ -3,11 +3,14 @@
 $color-base-nested-nav: $color-tropical-blue;
 $color-base-nested-nav-dark: $color-background-body;
 $width-line: 2px;
-$left-position: calc(-1 * $padding-small);
+$left-block-offset: $padding-large;
+$left-line-offset: calc($width-line * 2);
+$left-position: calc(-1 * ($left-block-offset - $left-line-offset));
+$gap-section: calc($padding-large * 2);
 
 .vm-nested-nav {
   position: relative;
-  margin-left: $padding-small;
+  margin-left: $left-block-offset;
   border-radius: $border-radius-small;
 
   &_dark &-header {
@@ -51,7 +54,7 @@ $left-position: calc(-1 * $padding-small);
       position: absolute;
       top: calc(50% - 1px);
       height: $width-line;
-      width: $padding-small;
+      width: calc($left-block-offset - $left-line-offset);
       background-color: $color-base-nested-nav;
       left: $left-position;
     }
@@ -125,7 +128,7 @@ $left-position: calc(-1 * $padding-small);
       position: absolute;
       top: 0;
       left: $left-position;
-      height: 100%;
+      height: calc(100% + $gap-section);
       width: $width-line;
       background-color: $color-base-nested-nav;
     }
@@ -136,4 +139,8 @@ $left-position: calc(-1 * $padding-small);
       background-color: $color-base-nested-nav-dark;
     }
   }
+
+  &__childrens > .vm-nested-nav:last-child {
+    margin-bottom: $gap-section;
+  }
 }
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 9e6eb8e99..3b0d45570 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -39,6 +39,7 @@ See also [LTS releases](https://docs.victoriametrics.com/lts-releases/).
 * FEATURE: [stream aggregation](https://docs.victoriametrics.com/stream-aggregation/): add [unique_samples](https://docs.victoriametrics.com/stream-aggregation/#unique_samples) output, which can be used for calculating the number of unique sample values over the given `interval`.
 * FEATURE: [stream aggregation](https://docs.victoriametrics.com/stream-aggregation/): add [increase_prometheus](https://docs.victoriametrics.com/stream-aggregation/#increase_prometheus) and [total_prometheus](https://docs.victoriametrics.com/stream-aggregation/#total_prometheus) outputs, which can be used for `increase` and `total` aggregations when the first sample of every new [time series](https://docs.victoriametrics.com/keyconcepts/#time-series) must be ignored.
 * FEATURE: [stream aggregation](https://docs.victoriametrics.com/stream-aggregation/): expose `vm_streamaggr_flush_timeouts_total` and `vm_streamaggr_dedup_flush_timeouts_total` [counters](https://docs.victoriametrics.com/keyconcepts/#counter) at [`/metrics` page](https://docs.victoriametrics.com/#monitoring), which can be used for detecting flush timeouts for stream aggregation states. Expose also `vm_streamaggr_flush_duration_seconds` and `vm_streamaggr_dedup_flush_duration_seconds` [histograms](https://docs.victoriametrics.com/keyconcepts/#histogram) for monitoring the real flush durations of stream aggregation states.
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): improve trace display for better visual separation of branches. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/5926).
 
 ## [v1.99.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.99.0)