Merge pull request #687 from lukecotter/perf-call-stack-web-component

Author: lcottercertinia

log-viewer/src/components/CallStack.ts

@@ -62,34 +62,33 @@ export class CallStack extends LitElement {
   ];
 
   render() {
-    const stack = DatabaseAccess.instance()?.getStack(this.timestamp).reverse() || [];
-    if (stack.length) {
-      const details = stack.slice(this.startDepth, this.endDepth).map((entry) => {
-        return this.lineLink(entry);
-      });
-
-      if (details.length === 1) {
-        return details;
-      }
+    const stack = DatabaseAccess.instance()?.getStack(this.timestamp).reverse() ?? [];
+    if (!stack.length) {
+      return html`<div class="callstack__item">No call stack available</div>`;
+    }
 
-      return html` <details>
-        <summary>${details[0]}</summary>
-        <div class="callstack">${details.slice(1, -1)}</div>
-      </details>`;
-    } else {
-      return html` <div class="callstack__item">No call stack available</div>`;
+    const details = stack.slice(this.startDepth, this.endDepth).map((entry) => {
+      return this.lineLink(entry);
+    });
+
+    if (details.length === 1) {
+      return details;
     }
+
+    const [first, ...rest] = details;
+    return html`<details>
+      <summary>${first}</summary>
+      <div class="callstack">${rest}</div>
+    </details>`;
   }
 
   private lineLink(line: LogEvent) {
-    return html`
-      <a
-        @click=${this.onCallerClick}
-        class="callstack__item code_text"
-        data-timestamp="${line.timestamp}"
-        >${line.text}</a
-      >
-    `;
+    return html`<a
+      @click=${this.onCallerClick}
+      class="callstack__item code_text"
+      data-timestamp="${line.timestamp}"
+      >${line.text}</a
+    >`;
   }
 
   private onCallerClick(evt: Event) {

log-viewer/src/features/database/components/DMLView.ts

@@ -170,7 +170,7 @@ export class DMLView extends LitElement {
   }
 
   get _dmlTableWrapper(): HTMLDivElement | null {
-    return this.renderRoot?.querySelector('#db-dml-table') ?? null;
+    return this.renderRoot?.querySelector('#db-dml-table');
   }
 
   _appendTableWhenVisible() {
@@ -183,7 +183,7 @@ export class DMLView extends LitElement {
       const tableWrapper = this._dmlTableWrapper;
       if (tableWrapper && treeRoot && isVisible) {
         const dbAccess = await DatabaseAccess.create(treeRoot);
-        this.dmlLines = dbAccess.getDMLLines() || [];
+        this.dmlLines = dbAccess.getDMLLines();
 
         Tabulator.registerModule(Object.values(CommonModules));
         Tabulator.registerModule([

log-viewer/src/features/database/components/SOQLView.ts

@@ -72,7 +72,7 @@ export class SOQLView extends LitElement {
   blockClearHighlights = true;
 
   get _soqlTableWrapper(): HTMLDivElement | null {
-    return this.renderRoot?.querySelector('#db-soql-table') ?? null;
+    return this.renderRoot?.querySelector('#db-soql-table');
   }
 
   constructor() {
@@ -211,7 +211,7 @@ export class SOQLView extends LitElement {
       const treeRoot = this.timelineRoot;
       const tableWrapper = this._soqlTableWrapper;
       if (tableWrapper && treeRoot && isVisible) {
-        this.soqlLines = (await DatabaseAccess.create(treeRoot)).getSOQLLines() || [];
+        this.soqlLines = (await DatabaseAccess.create(treeRoot)).getSOQLLines();
 
         Tabulator.registerModule(Object.values(CommonModules));
         Tabulator.registerModule([