Merge pull request #782 from FishOfPrey/feat-call-tree-theme-coloring

feat(call-tree): apply theme colours to Name column

Author: lcottercertinia

CHANGELOG.md

@@ -74,6 +74,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - **Bottom-Up**: Starts from callees and expands to callers, with optional grouping by Namespace or Type.
   - **Go to Source**: Click method names to open source from **Time Order**, **Aggregated**, and **Bottom-Up** when symbols are available.
   - **Analysis Alignment**: Analysis now uses the same bottom-up table model for consistent caller attribution.
+  - **🎨 Category Coloring**: The Name column is colored by event category using the active timeline theme — a color chip by default, or a full background tint + colored text when enabled via **Settings → Apex Log Analyzer → colorize Call Tree category names**. ([#734])
 - 📄 **Raw Log Navigation**: Seamless navigation between raw log files and the log analysis. ([#204])
   - **Show in Raw Log**: Right-click timeline or call tree frames → "Show in Log File" to jump to the corresponding line.
   - **Show in Log Analysis**: Click the hover link on raw log lines to navigate back to the log analysis.
@@ -493,6 +494,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 [#98]: https://github.com/certinia/debug-log-analyzer/issues/98
 [#204]: https://github.com/certinia/debug-log-analyzer/issues/204
 [#714]: https://github.com/certinia/debug-log-analyzer/issues/714
+[#734]: https://github.com/certinia/debug-log-analyzer/issues/734
 [#245]: https://github.com/certinia/debug-log-analyzer/issues/245
 [#164]: https://github.com/certinia/debug-log-analyzer/issues/164
 [#535]: https://github.com/certinia/debug-log-analyzer/issues/535

lana-docs/docs/docs/features/calltree.md

@@ -60,3 +60,11 @@ Debug Only and Type filtering are available in **Time Order** and **Aggregated**
 ### Keyboard Navigation
 
 The Call Tree can be navigated with the keyboard. The up and down keys will move between rows, the left and right keys will expand and collapse a parent within the tree.
+
+### Category Coloring
+
+The Name column is colored by each event's category — Apex, Code Unit, System, Automation, DML, SOQL, Callout and Validation — using the colors of the active timeline theme, so the Call Tree and the [Timeline themes](./timeline.md#themes) stay visually consistent.
+
+By default a small color chip is shown against each row. To color the full cell instead (background tint and colored text), enable **Settings → Apex Log Analyzer → Colorize Call Tree category names**.
+
+Colors follow the active timeline theme and update instantly when you switch themes via **Log: Timeline Theme**.

lana-docs/docs/docs/settings.md

@@ -54,3 +54,7 @@ settings.json
   }
 }
 ```
+
+## Call Tree category coloring
+
+The Call Tree colors its Name column by event category using the active timeline theme. A color chip is shown by default; enable **Colorize Call Tree category names** under `preferences -> extensions -> Apex Log Analyzer` to tint the whole cell instead. See [Call Tree → Category Coloring](./features/calltree.md#category-coloring).

lana/package.json

@@ -254,6 +254,13 @@
           "markdownDescription": "Enable/ disable the legacy timeline. Default is `false`.",
           "order": 2
         },
+        "lana.callTree.categoryColorize": {
+          "title": "Colorize Call Tree category names",
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "When enabled, applies a background tint and text color to the Name column in the Call Tree based on the event category, matching the Timeline flame graph colors. When disabled (default), a small color chip is shown instead.",
+          "order": 2
+        },
         "lana.timeline.colors": {
           "type": "object",
           "title": "Timeline Event Colors",

lana/src/workspace/AppConfig.ts

@@ -33,6 +33,9 @@ interface Config {
     };
     legacy: boolean;
   };
+  callTree: {
+    categoryColorize: boolean;
+  };
 }
 
 export function getConfig(): Config {

log-viewer/src/features/call-tree/components/AggregatedTable.ts

@@ -58,6 +58,7 @@ export function createAggregatedTable(
     headerSortElement,
     columnCalcs: 'both',
     columnDefaults: commonColumnDefaults,
+    rowFormatter: callbacks.rowFormatter,
     columns: [
       {
         title: 'Name',

log-viewer/src/features/call-tree/components/BottomUpTable.ts

@@ -118,6 +118,7 @@ export function createBottomUpTable(
     groupStartOpen: false,
     groupToggleElement: 'header',
     columnDefaults: commonColumnDefaults,
+    rowFormatter: callbacks.rowFormatter,
   } as Options;
 
   const table = new Tabulator(container, {

log-viewer/src/features/call-tree/components/CalltreeView.ts

@@ -15,9 +15,15 @@ import type { RowComponent, Tabulator } from 'tabulator-tables';
 
 import type { ApexLog, LogEvent } from 'apex-log-parser';
 import { eventBus } from '../../../core/events/EventBus.js';
-import { vscodeMessenger } from '../../../core/messaging/VSCodeExtensionMessenger.js';
+import {
+  VSCodeExtensionMessenger,
+  vscodeMessenger,
+} from '../../../core/messaging/VSCodeExtensionMessenger.js';
 import { findEventByEventIndex } from '../../../core/utility/EventSearch.js';
 import { isVisible } from '../../../core/utility/Util.js';
+import { getSettings } from '../../settings/Settings.js';
+import { DEFAULT_THEME_NAME } from '../../timeline/themes/Themes.js';
+import { addCustomThemes, getTheme } from '../../timeline/themes/ThemeSelector.js';
 import type { AggregatedRow, BottomUpRow } from '../utils/Aggregation.js';
 import { deepFilter } from '../utils/DetailsFilter.js';
 import { expandCollapseAll } from '../utils/ExpandCollapse.js';
@@ -121,6 +127,49 @@ export class CalltreeView extends LitElement {
     document.addEventListener('lv-find-close', this._findEvt);
   }
 
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this._applyTheme(DEFAULT_THEME_NAME);
+
+    VSCodeExtensionMessenger.listen<{ activeTheme: string }>((event) => {
+      const { cmd, payload } = event.data;
+      if (cmd === 'switchTimelineTheme') {
+        this._applyTheme(payload.activeTheme ?? DEFAULT_THEME_NAME);
+      }
+    });
+
+    getSettings().then((settings) => {
+      const { timeline, callTree } = settings;
+      addCustomThemes(timeline.customThemes);
+      this._applyTheme(timeline.activeTheme ?? DEFAULT_THEME_NAME);
+      this._setCategoryColorize(callTree?.categoryColorize ?? false);
+    });
+  }
+
+  private _applyTheme(themeName: string): void {
+    const theme = getTheme(themeName);
+    this.style.setProperty('--ct-color-apex', theme.apex);
+    this.style.setProperty('--ct-color-code-unit', theme.codeUnit);
+    this.style.setProperty('--ct-color-system', theme.system);
+    this.style.setProperty('--ct-color-automation', theme.automation);
+    this.style.setProperty('--ct-color-dml', theme.dml);
+    this.style.setProperty('--ct-color-soql', theme.soql);
+    this.style.setProperty('--ct-color-callout', theme.callout);
+    this.style.setProperty('--ct-color-validation', theme.validation);
+  }
+
+  private _setCategoryColorize(enabled: boolean): void {
+    this.classList.toggle('category-colorize', enabled);
+  }
+
+  private _rowFormatter = (row: RowComponent): void => {
+    const data = row.getData() as { originalData?: { category?: string } };
+    const category = data.originalData?.category;
+    if (category) {
+      row.getElement().classList.add(`row-cat-${category.toLowerCase().replace(' ', '-')}`);
+    }
+  };
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
     document.removeEventListener('calltree-go-to-row', this._goToRowEvt);
@@ -259,6 +308,64 @@ export class CalltreeView extends LitElement {
         opacity: 0;
         pointer-events: none;
       }
+
+      .tabulator-row.row-cat-apex .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-apex);
+      }
+      .tabulator-row.row-cat-code-unit .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-code-unit);
+      }
+      .tabulator-row.row-cat-system .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-system);
+      }
+      .tabulator-row.row-cat-automation .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-automation);
+      }
+      .tabulator-row.row-cat-dml .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-dml);
+      }
+      .tabulator-row.row-cat-soql .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-soql);
+      }
+      .tabulator-row.row-cat-callout .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-callout);
+      }
+      .tabulator-row.row-cat-validation .datagrid-code-text {
+        border-left: 6px solid var(--ct-color-validation);
+      }
+
+      :host(.category-colorize) .tabulator-row.row-cat-apex .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-apex) 10%, transparent);
+        color: var(--ct-color-apex);
+      }
+      :host(.category-colorize) .tabulator-row.row-cat-code-unit .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-code-unit) 10%, transparent);
+        color: var(--ct-color-code-unit);
+      }
+      :host(.category-colorize) .tabulator-row.row-cat-system .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-system) 10%, transparent);
+        color: var(--ct-color-system);
+      }
+      :host(.category-colorize) .tabulator-row.row-cat-automation .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-automation) 10%, transparent);
+        color: var(--ct-color-automation);
+      }
+      :host(.category-colorize) .tabulator-row.row-cat-dml .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-dml) 10%, transparent);
+        color: var(--ct-color-dml);
+      }
+      :host(.category-colorize) .tabulator-row.row-cat-soql .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-soql) 10%, transparent);
+        color: var(--ct-color-soql);
+      }
+      :host(.category-colorize) .tabulator-row.row-cat-callout .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-callout) 10%, transparent);
+        color: var(--ct-color-callout);
+      }
+      :host(.category-colorize) .tabulator-row.row-cat-validation .datagrid-code-text {
+        background-color: color-mix(in srgb, var(--ct-color-validation) 10%, transparent);
+        color: var(--ct-color-validation);
+      }
     `,
   ];
 
@@ -715,6 +822,7 @@ export class CalltreeView extends LitElement {
         const mouseEvent = e as MouseEvent;
         this._showRowContextMenu(row, mouseEvent.clientX, mouseEvent.clientY);
       },
+      rowFormatter: this._rowFormatter,
     });
     this.calltreeTable = table;
     await tableBuilt;
@@ -742,6 +850,7 @@ export class CalltreeView extends LitElement {
           this._clearSearchHighlights();
         }
       },
+      rowFormatter: this._rowFormatter,
     });
     this.aggregatedTreeTable = table;
     await tableBuilt;
@@ -765,6 +874,7 @@ export class CalltreeView extends LitElement {
             this._clearSearchHighlights();
           }
         },
+        rowFormatter: this._rowFormatter,
       },
       {
         selectableRows: 'highlight',

log-viewer/src/features/call-tree/components/TableShared.ts

@@ -1,7 +1,7 @@
 /*
  * Copyright (c) 2025 Certinia Inc. All rights reserved.
  */
-import { Tabulator } from 'tabulator-tables';
+import { Tabulator, type RowComponent } from 'tabulator-tables';
 
 import * as CommonModules from '../../../tabulator/module/CommonModules.js';
 import { Find } from '../../../tabulator/module/Find.js';
@@ -20,6 +20,7 @@ export interface TableCallbacks {
   ) => boolean;
   onFilterCacheClear?: () => void;
   onRenderStarted: () => void;
+  rowFormatter?: (row: RowComponent) => void;
 }
 
 export function registerTableModules(): void {

log-viewer/src/features/call-tree/components/TimeOrderTable.ts

@@ -66,6 +66,7 @@ export function createTimeOrderTable(
     headerSortElement,
     columnCalcs: 'both',
     columnDefaults: commonColumnDefaults,
+    rowFormatter: callbacks.rowFormatter,
     columns: [
       {
         title: 'Name',