From 83ad8f26fe35b3a71e10884c058cab13512b8bb8 Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Wed, 4 Oct 2023 14:10:08 -0400
Subject: [PATCH 1/3] feat: Simplify action/actor key computation

Surprisingly, this improves sequence diagram load time by about 15%
---
 packages/components/src/components/DiagramSequence.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/DiagramSequence.vue b/packages/components/src/components/DiagramSequence.vue
index ab5c2917c7..16fa84aa35 100644
--- a/packages/components/src/components/DiagramSequence.vue
+++ b/packages/components/src/components/DiagramSequence.vue
@@ -9,7 +9,7 @@
         <template v-for="(actor, index) in visuallyReachableActors">
           <VActor
             :actor="actor"
-            :key="actorKey(actor)"
+            :key="actor.id"
             :row="1"
             :index="index"
             :height="diagramSpec.actions.length"
@@ -194,11 +194,8 @@ export default {
     },
   },
   methods: {
-    actorKey(actor: Actor): string {
-      return ['actor', this.diagramSpec.uniqueId, actor.id].join(':');
-    },
     actionKey(action: ActionSpec): string {
-      return ['action', this.diagramSpec.uniqueId, action.index].join(':');
+      return `action:${action.index}:${action.action.digest}`;
     },
     isSelected(action: ActionSpec): boolean {
       return !!this.selectedEvents?.find(({ id }) => action.eventIds.includes(id));

From 3f5d73790ab421f14c7f2861d711c68f7a08513f Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Wed, 4 Oct 2023 15:55:30 -0400
Subject: [PATCH 2/3] fix: Avoid calling buildDiagram on seq diagram load

This improves the load time of sequence diagrams by about 46%
---
 .../src/components/DiagramSequence.vue        |  6 +-
 packages/sequence-diagram/src/buildDiagram.ts | 62 ++++++++++++-------
 packages/sequence-diagram/src/types.ts        |  4 +-
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/packages/components/src/components/DiagramSequence.vue b/packages/components/src/components/DiagramSequence.vue
index 16fa84aa35..53b77a6773 100644
--- a/packages/components/src/components/DiagramSequence.vue
+++ b/packages/components/src/components/DiagramSequence.vue
@@ -61,6 +61,7 @@ import {
   Diagram,
   Specification,
   Action,
+  getActors,
 } from '@appland/sequence-diagram';
 import VLoopAction from '@/components/sequence/LoopAction.vue';
 import VCallAction from '@/components/sequence/CallAction.vue';
@@ -121,11 +122,8 @@ export default {
       let { appMap } = this.$store.state;
       if (!appMap) appMap = this.appMap;
 
-      // TODO: optimize for performance building actor priority separately
       const specification = Specification.build(appMap, { loops: true });
-      const diagram = buildDiagram('<an AppMap file>', appMap, specification);
-
-      return diagram.actors;
+      return getActors(appMap, specification);
     },
     priority() {
       const priority = {};
diff --git a/packages/sequence-diagram/src/buildDiagram.ts b/packages/sequence-diagram/src/buildDiagram.ts
index ba75f73238..a1eb24cb45 100644
--- a/packages/sequence-diagram/src/buildDiagram.ts
+++ b/packages/sequence-diagram/src/buildDiagram.ts
@@ -20,24 +20,20 @@ import {
 
 const MAX_WINDOW_SIZE = 5;
 
-export default function buildDiagram(
-  _appmapFile: string,
-  appmap: AppMap,
-  specification: Specification
-): Diagram {
-  const events = selectEvents(appmap, specification);
+class ActorManager {
+  private _actorsByCodeObjectId = new Map<string, Actor>();
+  private _actors: Actor[] = [];
 
-  const actors: Actor[] = [];
-  const actorsByCodeObjectId = new Map<string, Actor>();
+  constructor(private specification: Specification) {}
 
-  const findOrCreateActor = (event: Event): Actor | undefined => {
-    const actorCodeObject = specification.isIncludedCodeObject(event.codeObject);
+  findOrCreateActor(event: Event): Actor | undefined {
+    const actorCodeObject = this.specification.isIncludedCodeObject(event.codeObject);
     if (!actorCodeObject) throw Error('actor code object not found');
-    const order = specification.priorityOf(actorCodeObject);
+    const order = this.specification.priorityOf(actorCodeObject);
 
     const actorKey = actorCodeObject.fqid;
 
-    let actor = actorsByCodeObjectId.get(actorKey);
+    let actor = this._actorsByCodeObjectId.get(actorKey);
     if (actor) return actor;
 
     actor = {
@@ -45,10 +41,23 @@ export default function buildDiagram(
       name: actorCodeObject.name,
       order,
     } as Actor;
-    actors.push(actor);
-    actorsByCodeObjectId.set(actorKey, actor);
+    this._actors.push(actor);
+    this._actorsByCodeObjectId.set(actorKey, actor);
     return actor;
-  };
+  }
+
+  getSortedActors(): Actor[] {
+    return this._actors.sort((a, b) => a.order - b.order);
+  }
+}
+
+export default function buildDiagram(
+  _appmapFile: string,
+  appmap: AppMap,
+  specification: Specification
+): Diagram {
+  const events = selectEvents(appmap, specification);
+  const actorManager = new ActorManager(specification);
 
   function buildRequest(caller?: Event | undefined, callee?: Event): Action | undefined {
     if (callee?.httpServerRequest && callee?.httpServerResponse) {
@@ -56,7 +65,7 @@ export default function buildDiagram(
       const response = callee.httpServerResponse as any;
       return {
         nodeType: NodeType.ServerRPC,
-        callee: findOrCreateActor(callee),
+        callee: actorManager.findOrCreateActor(callee),
         route: callee.route,
         status: response.status || response.status_code,
         digest: callee.hash,
@@ -70,8 +79,8 @@ export default function buildDiagram(
       const response = callee.httpClientResponse as any;
       return {
         nodeType: NodeType.ClientRPC,
-        caller: caller ? findOrCreateActor(caller) : undefined,
-        callee: findOrCreateActor(callee),
+        caller: caller ? actorManager.findOrCreateActor(caller) : undefined,
+        callee: actorManager.findOrCreateActor(callee),
         route: callee.route,
         status: response.status || response.status_code,
         digest: callee.hash,
@@ -84,8 +93,8 @@ export default function buildDiagram(
       const truncatedQuery = callee.sqlQuery.endsWith('...');
       return {
         nodeType: NodeType.Query,
-        caller: caller ? findOrCreateActor(caller) : undefined,
-        callee: findOrCreateActor(callee),
+        caller: caller ? actorManager.findOrCreateActor(caller) : undefined,
+        callee: actorManager.findOrCreateActor(callee),
         query: callee.sqlQuery,
         digest: truncatedQuery ? 'truncatedQuery' : callee.hash,
         subtreeDigest: 'undefined',
@@ -96,8 +105,8 @@ export default function buildDiagram(
     } else if (callee) {
       return {
         nodeType: NodeType.Function,
-        caller: caller ? findOrCreateActor(caller) : undefined,
-        callee: findOrCreateActor(callee),
+        caller: caller ? actorManager.findOrCreateActor(caller) : undefined,
+        callee: actorManager.findOrCreateActor(callee),
         name: callee.codeObject.name,
         static: callee.codeObject.static,
         digest: callee.hash,
@@ -216,7 +225,14 @@ export default function buildDiagram(
   rootActions.forEach((root) => setParent(root));
 
   return {
-    actors: actors.sort((a, b) => a.order - b.order),
+    actors: actorManager.getSortedActors(),
     rootActions,
   };
 }
+
+export function getActors(appmap: AppMap, specification: Specification): Actor[] {
+  const actorManager = new ActorManager(specification);
+  const events = selectEvents(appmap, specification);
+  events.forEach((event) => actorManager.findOrCreateActor(event));
+  return actorManager.getSortedActors();
+}
diff --git a/packages/sequence-diagram/src/types.ts b/packages/sequence-diagram/src/types.ts
index 49ea6bcfd8..d14f025818 100644
--- a/packages/sequence-diagram/src/types.ts
+++ b/packages/sequence-diagram/src/types.ts
@@ -196,12 +196,12 @@ export enum ValidationResult {
   AppMap = 2,
 }
 
-import buildDiagram from './buildDiagram';
+import buildDiagram, { getActors } from './buildDiagram';
 import buildDiffDiagram from './buildDiffDiagram';
 import diff from './diff';
 import unparseDiagram from './unparseDiagram';
 import validateDiagram from './validateDiagram';
-export { buildDiagram, buildDiffDiagram, diff, unparseDiagram, validateDiagram };
+export { buildDiagram, buildDiffDiagram, diff, unparseDiagram, validateDiagram, getActors };
 
 export enum FormatType {
   JSON = 'json',

From fe14fd7e3a33e59a3324c3db855f5a127c7fdf81 Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Wed, 4 Oct 2023 19:24:11 -0400
Subject: [PATCH 3/3] feat: Cache parsed SQL in Event class

This reduces the number of times we need to parse the SQL, which is
expensive, and improves sequence diagram load times by ~24%
---
 packages/models/src/event.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/models/src/event.js b/packages/models/src/event.js
index fe5f02b949..eff4ae06a6 100644
--- a/packages/models/src/event.js
+++ b/packages/models/src/event.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { addHiddenProperty, hasProp, transformToJSON } from './util';
 import analyzeSQL, { abstractSqlAstJSON } from './sql/analyze';
 import normalizeSQL from './sql/normalize';
@@ -19,6 +20,8 @@ function alias(obj, prop, alias) {
 // This class supercedes `CallTree` and `CallNode`. Events are stored in a flat
 // array and can also be traversed like a tree via `parent` and `children`.
 export default class Event {
+  static parsedSqlCache = {};
+
   static contentType(...messages) {
     const msg = messages.find((message) => (message?.headers || {})['Content-Type']);
     if (!msg) {
@@ -526,10 +529,19 @@ export default class Event {
 
     let properties;
     if (sqlQuery) {
-      const sqlNormalized = abstractSqlAstJSON(sqlQuery, this.sql.database_type)
-        // Collapse repeated variable literals and parameter tokens (e.g. '?, ?' in an IN clause)
-        .split(/{"type":"variable"}(?:,{"type":"variable"})*/g)
-        .join(`{"type":"variable"}`);
+      let sqlNormalized;
+      const cacheKey = `${this.sql.database_type}:${sqlQuery}`;
+      if (!Event.parsedSqlCache[cacheKey]) {
+        sqlNormalized = abstractSqlAstJSON(sqlQuery, this.sql.database_type)
+          // Collapse repeated variable literals and parameter tokens (e.g. '?, ?' in an IN clause)
+          .split(/{"type":"variable"}(?:,{"type":"variable"})*/g)
+          .join(`{"type":"variable"}`);
+
+        Event.parsedSqlCache[cacheKey] = sqlNormalized;
+      } else {
+        sqlNormalized = Event.parsedSqlCache[cacheKey];
+      }
+
       properties = {
         event_type: 'sql',
         sql_normalized: sqlNormalized,