perf: extract and optimise call tree name column formatter

Extracts the inline name formatter into CalltreeNameFormatter.ts using a
factory/closure pattern. Key hot-path improvements: replaces
createElement('span') with document.createTextNode() (no element allocation
for plain text rows), eliminates private row._row.modules.dataTree access by
computing treeLevel once in _toCallTree and storing it in row data, and reads
dataTreeChildIndent via this.table on first render only.

Author: lukecotter

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2022 Certinia Inc. All rights reserved.
+ */
+import type { LogEvent, LogEventType } from 'apex-log-parser';
+import type { CellComponent, EmptyCallback } from 'tabulator-tables';
+
+export function createCalltreeNameFormatter(excludedTypes: Set<LogEventType>) {
+  let childIndent: number = 9;
+
+  return function calltreeNameFormatter(
+    cell: CellComponent,
+    _formatterParams: object,
+    _onRendered: EmptyCallback,
+  ): string | HTMLElement {
+    const data = cell.getData() as { originalData: LogEvent; treeLevel: number };
+    const { originalData: node, treeLevel } = data;
+    // @ts-expect-error this.table is added by tabulator when the formatter is called, but isn't in the types for some reason
+    childIndent ??= this.table.options.dataTreeChildIndent ?? 9;
+    const levelIndent = treeLevel * childIndent;
+
+    const cellElem = cell.getElement();
+    cellElem.style.paddingLeft = `${levelIndent + 4}px`;
+    cellElem.style.textIndent = `-${levelIndent}px`;
+
+    if (node.hasValidSymbols) {
+      const link = document.createElement('a');
+      link.setAttribute('href', '#!');
+      link.textContent = node.text;
+      return link;
+    }
+
+    let text = node.text;
+    if (node.type && node.type !== text && !excludedTypes.has(node.type)) {
+      text = node.type + ': ' + text;
+    }
+
+    return document.createTextNode(text) as unknown as HTMLElement;
+  };
+}

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

@@ -29,6 +29,7 @@ import { MiddleRowFocus } from '../../../tabulator/module/MiddleRowFocus.js';
 import { RowKeyboardNavigation } from '../../../tabulator/module/RowKeyboardNavigation.js';
 import { RowNavigation } from '../../../tabulator/module/RowNavigation.js';
 import dataGridStyles from '../../../tabulator/style/DataGrid.scss';
+import { createCalltreeNameFormatter } from './CalltreeNameFormatter.js';
 
 // styles
 import { globalStyles } from '../../../styles/global.styles.js';
@@ -570,7 +571,7 @@ export class CalltreeView extends LitElement {
       const excludedTypes = new Set<LogEventType>(['SOQL_EXECUTE_BEGIN', 'DML_BEGIN']);
       const governorLimits = rootMethod.governorLimits;
 
-      let childIndent;
+      const nameFormatter = createCalltreeNameFormatter(excludedTypes);
       this.calltreeTable = new Tabulator(callTreeTableContainer, {
         data: this._toCallTree(rootMethod.children),
         layout: 'fitColumns',
@@ -617,34 +618,7 @@ export class CalltreeView extends LitElement {
               return 'Total';
             },
             cssClass: 'datagrid-textarea datagrid-code-text',
-            formatter: (cell, _formatterParams, _onRendered) => {
-              const cellElem = cell.getElement();
-              const row = cell.getRow();
-              // @ts-expect-error: _row is private. This is temporary and I will patch the text wrap behaviour in the library.
-              const dataTree = row._row.modules.dataTree;
-              const treeLevel = dataTree?.index ?? 0;
-              childIndent ??= row.getTable().options.dataTreeChildIndent || 0;
-              const levelIndent = treeLevel * childIndent;
-              cellElem.style.paddingLeft = `${levelIndent + 4}px`;
-              cellElem.style.textIndent = `-${levelIndent}px`;
-
-              const node = (cell.getData() as CalltreeRow).originalData;
-              let text = node.text;
-              if (node.hasValidSymbols) {
-                const link = document.createElement('a');
-                link.setAttribute('href', '#!');
-                link.textContent = text;
-                return link;
-              }
-
-              if (node.type && !excludedTypes.has(node.type) && node.type !== text) {
-                text = node.type + ': ' + text;
-              }
-
-              const textSpan = document.createElement('span');
-              textSpan.textContent = text;
-              return textSpan;
-            },
+            formatter: nameFormatter,
             variableHeight: true,
             cellClick: (e, cell) => {
               const { type } = window.getSelection() ?? {};
@@ -977,7 +951,7 @@ export class CalltreeView extends LitElement {
     }
   }
 
-  private _toCallTree(nodes: LogEvent[]): CalltreeRow[] | undefined {
+  private _toCallTree(nodes: LogEvent[], treeLevel = 0): CalltreeRow[] | undefined {
     const len = nodes.length;
     if (!len) {
       return undefined;
@@ -989,12 +963,13 @@ export class CalltreeView extends LitElement {
       if (!node) {
         continue;
       }
-      const children = node.children.length ? this._toCallTree(node.children) : null;
+      const children = node.children.length ? this._toCallTree(node.children, treeLevel + 1) : null;
       results.push({
         id: node.timestamp + '-' + i,
         originalData: node,
         _children: children,
         text: node.text,
+        treeLevel,
         namespace: node.namespace,
         duration: node.duration,
         dmlCount: node.dmlCount,
@@ -1070,6 +1045,7 @@ interface CalltreeRow {
   originalData: LogEvent;
   _children: CalltreeRow[] | undefined | null;
   text: string;
+  treeLevel: number;
   duration: CountTotals;
   namespace: string;
   dmlCount: CountTotals;