improved sticky header to show resource layer (#663)

Author: kyasbal

web/src/app/timeline/components/calculator/vertical-scroll-calculator.spec.ts

@@ -219,61 +219,67 @@ describe('VerticalScrollCalculator', () => {
           TimelineLayer.Name, // 300-400 (Pod2)
           TimelineLayer.Namespace, // 400-500 (Namespace2)
           TimelineLayer.Name, // 500-600 (Pod3)
-          TimelineLayer.Kind, // 600-700 (Kind2)
-          TimelineLayer.Namespace, // 700-800 (Namespace3)
+          TimelineLayer.Subresource, // 600-650 (Subresource1)
+          TimelineLayer.Kind, // 650-750 (Kind2)
+          TimelineLayer.Namespace, // 750-850 (Namespace3)
+          TimelineLayer.Name, // 850-950 (Pod4)
+          TimelineLayer.Subresource, // 950-1050 (Subresource2)
         ]);
         calculator = new VerticalScrollCalculator(timelines, mockStyle, 0);
       });
 
       it('should return initial sticky header at scroll 0', () => {
         const result = calculator.stickyTimelines(0);
-        expect(result.length).toBe(2);
+        expect(result.length).toBe(3);
         expect(result[0]).toBe(timelines[0]);
         expect(result[1]).toBe(timelines[1]);
+        expect(result[2]).toBe(timelines[2]);
       });
 
-      it('should maintain current sticky header before next header arrives (scroll 199)', () => {
-        // Namespace2 starts at 400.
-        // 400 - 199 = 201.
-        // Sticky header area is 200.
-        // So Namespace2 is NOT yet sticky.
-        const result = calculator.stickyTimelines(199);
+      it('should maintain current sticky header before next header arrives (scroll 99)', () => {
+        // 99 + 200 = 299 -> invades Pod1 (200-300).
+        const result = calculator.stickyTimelines(99);
+        expect(result.length).toBe(2);
         expect(result[0]).toBe(timelines[0]);
         expect(result[1]).toBe(timelines[1]);
+        // The next item is also the Name layer, so the sticky header is up to the namespace layer.
       });
 
-      it('should maintain current sticky header at exact boundary (scroll 200)', () => {
-        // Namespace2 is at 200 from viewport top (400 - 200 = 200).
-        // Sticky header area is 200.
-        const result = calculator.stickyTimelines(200);
+      it('should maintain current sticky header at exact boundary (scroll 100)', () => {
+        // 100 + 200 = 300 -> reaches Pod2 (300-400).
+        const result = calculator.stickyTimelines(100);
+        expect(result.length).toBe(2);
         expect(result[0]).toBe(timelines[0]); // Kind1
         expect(result[1]).toBe(timelines[1]); // Namespace1
       });
 
-      it('should switch to next sticky header after boundary (scroll 201)', () => {
-        // Namespace2 is at 199 relative to viewport top (invading sticky area).
-        // Should pick Namespace2.
-        const result = calculator.stickyTimelines(201);
+      it('should switch to next sticky header after boundary when the next item is name resource (scroll 101)', () => {
+        // 101 + 200 = 301 -> inside Pod2.
+        const result = calculator.stickyTimelines(101);
+        expect(result.length).toBe(2);
         expect(result[0]).toBe(timelines[0]); // Kind1
-        expect(result[1]).toBe(timelines[4]); // Namespace2
+        expect(result[1]).toBe(timelines[1]); // Namespace1
+        // The next item is also the Name layer, so the sticky header is up to the namespace layer.
       });
 
-      it('should update both Kind and Namespace when scrolling deep into next section (scroll 550)', () => {
-        // Scroll 550 (inside Pod3, Namespace2, Kind1)
-        // Kind2 starts at 600.
-        // Scroll 550 + 200 = 750.
-        // Returns [Kind2, Namespace3].
+      it('should return sticky timelines only when the sticky timeline is fully visible (scroll 550)', () => {
+        // Scroll 550 (inside Pod3, Namespace2, Kind1).
+        // Kind2 starts at 600. There is no enough space to show Kind1 & Namespace1 as stickyTimelines
+        // Scroll 550 + 300 = 850.
+        // Returns [Kind1].
         const result = calculator.stickyTimelines(550);
-        expect(result[0]).toBe(timelines[6]); // Kind2
-        expect(result[1]).toBe(timelines[7]); // Namespace3
+        expect(result.length).toBe(1);
+        expect(result[0]).toBe(timelines[0]); // Kind1
       });
 
       it('should maintain the last sticky header when scrolling past total height', () => {
-        // Total height is 800.
-        // Scroll 1000.
-        const result = calculator.stickyTimelines(1000);
-        expect(result[0]).toBe(timelines[6]); // Kind2
-        expect(result[1]).toBe(timelines[7]); // Namespace3
+        // Total height is 1050.
+        // Scroll 1200.
+        const result = calculator.stickyTimelines(1200);
+        expect(result.length).toBe(3);
+        expect(result[0]).toBe(timelines[7]); // Kind2
+        expect(result[1]).toBe(timelines[8]); // Namespace3
+        expect(result[2]).toBe(timelines[9]); // Pod4
       });
     });
   });

web/src/app/timeline/components/calculator/vertical-scroll-calculator.ts

@@ -133,7 +133,7 @@ export class VerticalScrollCalculator {
   }
 
   /**
-   * Returns the sticky timelines (e.g. Kind, Namespace) that should be pinned to the top of the view
+   * Returns the sticky timelines (e.g. Kind, Namespace, Name) that should be pinned to the top of the view
    * at the current scroll position.
    *
    * @param scrollY Current vertical scroll position (px)
@@ -143,33 +143,54 @@ export class VerticalScrollCalculator {
     if (this.accumulatedHeights.length === 0) {
       return [];
     }
-    const stickyHeaderSize =
-      this.style.heightsByLayer[TimelineLayer.Kind] +
-      this.style.heightsByLayer[TimelineLayer.Namespace];
-    let i = bisectLeft(
-      this.accumulatedHeights,
-      scrollY + stickyHeaderSize,
-      defaultNumberComparator,
-    ); // Starting from the timeline that is at least visible behind the sticky header
-    i = Math.min(Math.max(0, i - 1), this.timelines.length - 1);
-    let namespaceTimeline: ResourceTimeline | null = null;
-    for (; i >= 0; i--) {
-      if (this.timelines[i].layer === TimelineLayer.Namespace) {
-        namespaceTimeline = this.timelines[i];
-        break;
+    let maxStickyLayer = TimelineLayer.Name;
+    let currIndex = 0;
+    // At scroll position 0, simply returns the timelines up to the maximum sticky layer to ensure initial shadow consistency.
+    // While an empty array visually behaves almost the same, having actual items prevents the bottom shadow from disappearing initially.
+    if (scrollY === 0) {
+      const result = [];
+      for (let i = 0; i < this.timelines.length; i++) {
+        result.push(this.timelines[i]);
+        if (this.timelines[i].layer === maxStickyLayer) {
+          break;
+        }
       }
+      return result;
     }
-    let kindTimeline: ResourceTimeline | null = null;
-    for (; i >= 0; i--) {
-      if (this.timelines[i].layer === TimelineLayer.Kind) {
-        kindTimeline = this.timelines[i];
+    // Looks ahead by the total size of the candidate sticky header. If the resulting timeline layer matches the candidate layer, it would overlap (e.g. a Pod row sticking over another Pod row).
+    // In such cases, shrinks the maximum sticky layer candidate by one to fallback to an upper layer timeline as the base context.
+    for (; maxStickyLayer > TimelineLayer.APIVersion; maxStickyLayer--) {
+      let stickyHeaderSize = 0;
+      for (let l = TimelineLayer.APIVersion; l <= maxStickyLayer; l++) {
+        stickyHeaderSize += this.style.heightsByLayer[l];
+      }
+      let i = bisectLeft(
+        this.accumulatedHeights,
+        scrollY + stickyHeaderSize,
+        defaultNumberComparator,
+      );
+      i = Math.min(Math.max(0, i - 1), this.timelines.length - 1);
+      if (this.timelines[i].layer > maxStickyLayer) {
+        currIndex = i;
         break;
       }
     }
-    if (kindTimeline === null || namespaceTimeline === null) {
-      return [];
+
+    // Retrieves the ancestor timelines for each target sticky layer from the established base index.
+    const result: ResourceTimeline[] = [];
+    for (let l = maxStickyLayer; l >= TimelineLayer.Kind; l--) {
+      for (let j = currIndex; j >= 0; j--) {
+        if (this.timelines[j].layer === l) {
+          result.push(this.timelines[j]);
+          currIndex = j;
+          break;
+        }
+        if (this.timelines[j].layer < l) {
+          break;
+        }
+      }
     }
-    return [kindTimeline, namespaceTimeline];
+    return result.filter((timeline) => timeline !== null).reverse();
   }
 
   /**

web/src/app/timeline/components/timeline-frame.component.html

@@ -51,11 +51,25 @@
         (scrollOnRuler)="onWheelForScaling($event)"
       ></khi-timeline-ruler>
     </div>
-    <div class="chart-sticky-header">
-      @if (stickyChartViewModel().timelinesInDrawArea.length > 0) {
-        <div class="kind-placeholder"></div>
-        <div class="namespace-placeholder"></div>
-      }
+    <div class="chart-sticky-header" [style.height.px]="stickyHeaderHeight()">
+      <khi-timeline-chart
+        [style.height.px]="maxStickyHeaderHeight()"
+        [chartViewModel]="stickyChartViewModel()"
+        [rulerViewModel]="rulerViewModel()"
+        [pixelsPerMs]="pixelsPerMs()"
+        [leftEdgeTime]="contentLeftTime()"
+        [chartStyle]="chartStyle()"
+        [rulerStyle]="rulerStyle()"
+        [timelineHighlights]="timelineHighlights()"
+        [timelineChartItemHighlights]="timelineChartItemHighlights()"
+        [activeLogsIndices]="activeLogsIndices()"
+        (mouseMoveOnTimelineItem)="
+          handleTimelineChartItemEvent($event, hoverOnTimelineItem)
+        "
+        (clickOnTimelineItem)="
+          handleTimelineChartItemEvent($event, clickOnTimelineItem)
+        "
+      ></khi-timeline-chart>
     </div>
     <!--Elements stick to left edge-->
     <div class="index">

web/src/app/timeline/components/timeline-frame.component.scss

@@ -28,6 +28,7 @@ $z-index-hover-overlay: 1500;
 $z-index-sticky-chart: 501;
 $z-index-chart: 6;
 $z-index-resizer: 1000;
+$sticky-header-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.6);
 
 // stick-to-header mixin is for the container element sticky to the header area.
 // margin-left is applied to align with the right grid area (header or chart) without considering the size of the gutter.
@@ -181,24 +182,15 @@ $z-index-resizer: 1000;
 }
 
 .chart-sticky-header {
-  height: 50px;
   @include stick-to-header(60px);
   z-index: $z-index-sticky-chart;
+  box-shadow: $sticky-header-shadow;
+  overflow: hidden;
 
-  .kind-placeholder {
-    height: 25px;
-    background-color: rgba(63, 81, 181, 0.9);
-    position: relative;
-    z-index: 2;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
-  }
-
-  .namespace-placeholder {
-    height: 25px;
-    background-color: rgba(100, 100, 100, 0.9);
-    position: relative;
-    z-index: 1;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
+  khi-timeline-chart {
+    width: var(--content-render-width);
+    transform: translateX(var(--content-horizontal-offset));
+    will-change: transform;
   }
 }
 
@@ -332,6 +324,8 @@ $z-index-resizer: 1000;
 
   .sticky-index {
     grid-area: index;
+    align-self: start;
+    box-shadow: $sticky-header-shadow;
 
     .sticky-index-inner {
       pointer-events: all;

web/src/app/timeline/components/timeline-frame.component.ts

@@ -43,7 +43,7 @@ import {
 } from './timeline-chart.component';
 import { CaptureShiftKeyDirective } from 'src/app/common/capture-shiftkey.directive';
 import { TimelineCornerIndicatorComponent } from './timeline-corner-indicator.component';
-import { ResourceTimeline } from 'src/app/store/timeline';
+import { ResourceTimeline, TimelineLayer } from 'src/app/store/timeline';
 import { MatIconModule } from '@angular/material/icon';
 import { KHIIconRegistrationModule } from 'src/app/shared/module/icon-registration.module';
 import { CommonModule } from '@angular/common';
@@ -536,6 +536,31 @@ export class TimelineFrameComponent implements AfterViewInit {
     );
   });
 
+  /**
+   * The total height of the sticky timelines in pixels.
+   */
+  protected readonly stickyHeaderHeight = computed(() => {
+    const stickyTimelines = this.stickyTimelines();
+    const style = this.chartStyle();
+    let height = 0;
+    for (const t of stickyTimelines) {
+      height += style.heightsByLayer[t.layer] ?? 0;
+    }
+    return height;
+  });
+
+  /**
+   * The maximum possible height of the sticky header in pixels.
+   */
+  protected readonly maxStickyHeaderHeight = computed(() => {
+    const style = this.chartStyle();
+    let height = 0;
+    for (let l = TimelineLayer.Kind; l <= TimelineLayer.Name; l++) {
+      height += style.heightsByLayer[l] ?? 0;
+    }
+    return height;
+  });
+
   /**
    * The total height of all timelines content in pixels.
    */