refactor: extract reusable functions

Author: lukecotter

log-viewer/src/features/timeline/optimised/FlameChart.ts

@@ -30,10 +30,7 @@ import { MeshMarkerRenderer } from './markers/MeshMarkerRenderer.js';
 import { MeshRectangleRenderer } from './MeshRectangleRenderer.js';
 import { MeshAxisRenderer } from './time-axis/MeshAxisRenderer.js';
 
-import { EventBatchRenderer } from './EventBatchRenderer.js';
-import { TimelineMarkerRenderer } from './markers/TimelineMarkerRenderer.js';
 import { TextLabelRenderer } from './TextLabelRenderer.js';
-import { AxisRenderer } from './time-axis/AxisRenderer.js';
 
 import { cssColorToPixi } from './BucketColorResolver.js';
 import { HitDetector } from './interaction/HitDetector.js';
@@ -129,9 +126,9 @@ export class FlameChart<E extends EventNode = EventNode> {
   private callbacks: FlameChartCallbacks = {};
 
   private rectangleManager: RectangleCache | null = null;
-  private batchRenderer: EventBatchRenderer | MeshRectangleRenderer | null = null;
-  private axisRenderer: AxisRenderer | MeshAxisRenderer | null = null;
-  private markerRenderer: TimelineMarkerRenderer | MeshMarkerRenderer | null = null;
+  private batchRenderer: MeshRectangleRenderer | null = null;
+  private axisRenderer: MeshAxisRenderer | null = null;
+  private markerRenderer: MeshMarkerRenderer | null = null;
   private resizeHandler: TimelineResizeHandler | null = null;
 
   // Search orchestrator (owns search state and rendering)
@@ -287,24 +284,13 @@ export class FlameChart<E extends EventNode = EventNode> {
     // Initialize viewport animator for smooth transitions
     this.viewportAnimator = new ViewportAnimator();
 
-    // Determine renderer type: mesh is default for testing
-    const useMeshRenderer = options.renderer !== 'sprite';
-
     // Create truncation renderer FIRST (renders behind axis and events)
     if (this.markerContainer && this.markers.length > 0) {
-      if (useMeshRenderer) {
-        this.markerRenderer = new MeshMarkerRenderer(
-          this.markerContainer,
-          this.viewport,
-          this.markers,
-        );
-      } else {
-        this.markerRenderer = new TimelineMarkerRenderer(
-          this.markerContainer,
-          this.viewport,
-          this.markers,
-        );
-      }
+      this.markerRenderer = new MeshMarkerRenderer(
+        this.markerContainer,
+        this.viewport,
+        this.markers,
+      );
     }
 
     // Create axis renderer SECOND
@@ -316,11 +302,7 @@ export class FlameChart<E extends EventNode = EventNode> {
         fontSize: 11,
         minLabelSpacing: 120,
       };
-      if (useMeshRenderer) {
-        this.axisRenderer = new MeshAxisRenderer(this.axisContainer, axisConfig);
-      } else {
-        this.axisRenderer = new AxisRenderer(this.axisContainer, axisConfig);
-      }
+      this.axisRenderer = new MeshAxisRenderer(this.axisContainer, axisConfig);
       this.axisRenderer.setScreenSpaceContainer(this.uiContainer);
       // No minimap offset needed - main timeline has its own canvas
     }
@@ -342,11 +324,7 @@ export class FlameChart<E extends EventNode = EventNode> {
 
     // Create batch renderer (pure rendering, receives rectangles from RectangleCache)
     if (this.worldContainer && this.state) {
-      if (useMeshRenderer) {
-        this.batchRenderer = new MeshRectangleRenderer(this.worldContainer, this.state.batches);
-      } else {
-        this.batchRenderer = new EventBatchRenderer(this.worldContainer, this.state.batches);
-      }
+      this.batchRenderer = new MeshRectangleRenderer(this.worldContainer, this.state.batches);
     }
 
     // Create text label renderer (renders method names on rectangles)
@@ -359,17 +337,17 @@ export class FlameChart<E extends EventNode = EventNode> {
       this.worldContainer.sortableChildren = true;
     }
 
-    // For mesh renderers, set stage container for clip-space rendering
-    if (useMeshRenderer && this.app) {
+    // Set stage container for clip-space rendering
+    if (this.app) {
       const stage = this.app.stage;
-      if (this.batchRenderer && 'setStageContainer' in this.batchRenderer) {
-        (this.batchRenderer as MeshRectangleRenderer).setStageContainer(stage);
+      if (this.batchRenderer) {
+        this.batchRenderer.setStageContainer(stage);
       }
-      if (this.markerRenderer && 'setStageContainer' in this.markerRenderer) {
-        (this.markerRenderer as MeshMarkerRenderer).setStageContainer(stage);
+      if (this.markerRenderer) {
+        this.markerRenderer.setStageContainer(stage);
       }
-      if (this.axisRenderer && 'setStageContainer' in this.axisRenderer) {
-        (this.axisRenderer as MeshAxisRenderer).setStageContainer(stage);
+      if (this.axisRenderer) {
+        this.axisRenderer.setStageContainer(stage);
       }
       // No minimap offset needed - main timeline has its own canvas
     }
@@ -414,7 +392,7 @@ export class FlameChart<E extends EventNode = EventNode> {
 
     // Initialize search if enabled via options
     if (options.enableSearch) {
-      this.setupSearch(useMeshRenderer);
+      this.setupSearch();
     }
 
     // Initial render
@@ -545,10 +523,8 @@ export class FlameChart<E extends EventNode = EventNode> {
 
   /**
    * Setup search orchestrator for find and navigation functionality.
-   *
-   * @param useMeshRenderer - Whether to use mesh-based renderers
    */
-  private setupSearch(useMeshRenderer: boolean): void {
+  private setupSearch(): void {
     if (
       !this.rectangleManager ||
       !this.treeNodes ||
@@ -583,13 +559,12 @@ export class FlameChart<E extends EventNode = EventNode> {
       this.rectangleManager,
       this.state.batches,
       this.textLabelRenderer,
-      useMeshRenderer,
       this.viewport,
       this.mainTimelineYOffset,
     );
 
-    // For mesh renderers, set stage container for clip-space rendering
-    if (useMeshRenderer && this.app) {
+    // Set stage container for clip-space rendering
+    if (this.app) {
       this.searchOrchestrator.setStageContainer(this.app.stage);
     }
   }
@@ -822,7 +797,7 @@ export class FlameChart<E extends EventNode = EventNode> {
     startTimeMs: number,
     firstTimestampNs: number,
   ): void {
-    if (this.axisRenderer instanceof MeshAxisRenderer) {
+    if (this.axisRenderer) {
       this.axisRenderer.setTimeDisplayMode(mode, startTimeMs, firstTimestampNs);
 
       if (!this.state) {

log-viewer/src/features/timeline/optimised/markers/MarkerProcessor.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2026 Certinia Inc. All rights reserved.
+ */
+
+/**
+ * MarkerProcessor
+ *
+ * Shared utilities for processing timeline markers (truncation regions).
+ * Consolidates pre-blended color computation and marker processing logic
+ * used by both MeshMarkerRenderer and TimelineMarkerRenderer.
+ */
+
+import type { MarkerType, TimelineMarker } from '../../types/flamechart.types.js';
+import { MARKER_ALPHA, MARKER_COLORS, SEVERITY_RANK } from '../../types/flamechart.types.js';
+import { blendWithBackground } from '../BucketColorResolver.js';
+
+/**
+ * Pre-blended opaque marker colors (MARKER_COLORS blended at MARKER_ALPHA opacity).
+ * Computed once at module load time for performance.
+ *
+ * Using pre-blended colors avoids runtime alpha compositing on the GPU,
+ * which is more efficient for static opacity values.
+ */
+export const MARKER_COLORS_BLENDED: Record<MarkerType, number> = {
+  error: blendWithBackground(MARKER_COLORS.error, MARKER_ALPHA),
+  skip: blendWithBackground(MARKER_COLORS.skip, MARKER_ALPHA),
+  unexpected: blendWithBackground(MARKER_COLORS.unexpected, MARKER_ALPHA),
+};
+
+/**
+ * Sort markers by startTime, then by severity (higher severity first for stacking).
+ *
+ * @param markers - Array of markers to sort
+ * @returns New sorted array (does not mutate input)
+ */
+export function sortMarkersByTimeAndSeverity(
+  markers: readonly TimelineMarker[],
+): readonly TimelineMarker[] {
+  return [...markers].sort((a, b) => {
+    if (a.startTime !== b.startTime) {
+      return a.startTime - b.startTime;
+    }
+    return SEVERITY_RANK[b.type] - SEVERITY_RANK[a.type];
+  });
+}

log-viewer/src/features/timeline/optimised/markers/MeshMarkerRenderer.ts

@@ -16,23 +16,12 @@
  */
 
 import { Container, Geometry, Mesh, Shader } from 'pixi.js';
-import type { MarkerType, TimelineMarker } from '../../types/flamechart.types.js';
-import { MARKER_ALPHA, MARKER_COLORS, SEVERITY_RANK } from '../../types/flamechart.types.js';
-import { blendWithBackground } from '../BucketColorResolver.js';
+import type { TimelineMarker } from '../../types/flamechart.types.js';
 import { RectangleGeometry, type ViewportTransform } from '../RectangleGeometry.js';
 import { createRectangleShader } from '../RectangleShader.js';
 import type { TimelineViewport } from '../TimelineViewport.js';
 import { hitTestMarkers, type MarkerIndicator } from './MarkerHitTest.js';
-
-/**
- * Pre-blended opaque marker colors (MARKER_COLORS blended at MARKER_ALPHA opacity).
- * Computed once at module load time for performance.
- */
-const MARKER_COLORS_BLENDED: Record<MarkerType, number> = {
-  error: blendWithBackground(MARKER_COLORS.error, MARKER_ALPHA),
-  skip: blendWithBackground(MARKER_COLORS.skip, MARKER_ALPHA),
-  unexpected: blendWithBackground(MARKER_COLORS.unexpected, MARKER_ALPHA),
-};
+import { MARKER_COLORS_BLENDED, sortMarkersByTimeAndSeverity } from './MarkerProcessor.js';
 
 /**
  * Renders marker indicators as semi-transparent vertical bands using Mesh.
@@ -64,12 +53,7 @@ export class MeshMarkerRenderer {
     this.viewport = viewport;
 
     // Sort markers by startTime for efficient end time resolution
-    this.markers = [...markers].sort((a, b) => {
-      if (a.startTime !== b.startTime) {
-        return a.startTime - b.startTime;
-      }
-      return SEVERITY_RANK[b.type] - SEVERITY_RANK[a.type];
-    });
+    this.markers = sortMarkersByTimeAndSeverity(markers);
 
     // Create geometry and shader
     this.geometry = new RectangleGeometry();
@@ -239,7 +223,7 @@ export class MeshMarkerRenderer {
    * @param markers - New array of markers
    */
   public updateMarkers(markers: readonly TimelineMarker[]): void {
-    (this.markers as TimelineMarker[]) = [...markers].sort((a, b) => a.startTime - b.startTime);
+    this.markers = sortMarkersByTimeAndSeverity(markers);
     this.visibleIndicators = [];
   }
 

log-viewer/src/features/timeline/optimised/measurement/AreaZoomRenderer.ts

@@ -43,16 +43,11 @@ export class AreaZoomRenderer {
   /** HTML container for the label */
   private labelElement: HTMLDivElement;
 
-  /** Parent HTML container for positioning */
-  private container: HTMLElement;
-
   /**
    * @param pixiContainer - PixiJS container for graphics (worldContainer)
    * @param htmlContainer - HTML container for label positioning
    */
   constructor(pixiContainer: PIXI.Container, htmlContainer: HTMLElement) {
-    this.container = htmlContainer;
-
     // Create graphics for overlay - render above frames but below tooltips
     this.graphics = new PIXI.Graphics();
     this.graphics.zIndex = 5; // Above measurement overlay (4)

log-viewer/src/features/timeline/optimised/minimap/MinimapDensityQuery.ts

@@ -431,69 +431,6 @@ export class MinimapDensityQuery {
     };
   }
 
-  /**
-   * Compute density data using per-bucket tree queries.
-   * O(B × log N) complexity - for each bucket, query the segment tree.
-   *
-   * Key insight: queryBucketStats() traverses tree branches, not leaves.
-   * For a bucket covering 1/1024 of the timeline, it visits O(log N) nodes.
-   *
-   * Note: Currently unused but retained for potential future optimizations.
-   *
-   * @param bucketCount - Number of output buckets
-   * @returns MinimapDensityData
-   */
-  private computeDensityFromTree(bucketCount: number): MinimapDensityData {
-    if (bucketCount <= 0 || this.totalDuration <= 0 || !this.segmentTree) {
-      return {
-        buckets: [],
-        globalMaxDepth: this.globalMaxDepth,
-        maxEventCount: 0,
-        totalDuration: this.totalDuration,
-      };
-    }
-
-    const bucketTimeWidth = this.totalDuration / bucketCount;
-    const buckets: MinimapDensityBucket[] = new Array(bucketCount);
-    let maxEventCount = 0;
-
-    // Query each bucket using the segment tree
-    for (let b = 0; b < bucketCount; b++) {
-      const bucketStart = b * bucketTimeWidth;
-      const bucketEnd = (b + 1) * bucketTimeWidth;
-
-      // Use tree query - O(log N) traversal per bucket
-      const stats = this.segmentTree.queryBucketStats(bucketStart, bucketEnd);
-
-      if (stats.eventCount > maxEventCount) {
-        maxEventCount = stats.eventCount;
-      }
-
-      // Resolve dominant category using skyline (on-top time) algorithm
-      const dominantCategory = this.resolveCategoryFromSkyline(
-        stats.frames,
-        bucketStart,
-        bucketEnd,
-      );
-
-      buckets[b] = {
-        timeStart: bucketStart,
-        timeEnd: bucketEnd,
-        maxDepth: stats.maxDepth,
-        eventCount: stats.eventCount,
-        dominantCategory,
-        selfDurationSum: stats.selfDurationSum,
-      };
-    }
-
-    return {
-      buckets,
-      globalMaxDepth: this.globalMaxDepth,
-      maxEventCount,
-      totalDuration: this.totalDuration,
-    };
-  }
-
   // ============================================================================
   // SKYLINE ALGORITHM: On-Top Time Category Resolution
   // ============================================================================