From d50d24a9591462bb1cc56f0d40a95ff57659e9f1 Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Mon, 25 Mar 2024 14:08:33 -0400
Subject: [PATCH 1/6] refactor: Convert filteredAppMap from computed to data
 property

---
 .../components/src/pages/VsCodeExtension.vue  | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/pages/VsCodeExtension.vue b/packages/components/src/pages/VsCodeExtension.vue
index 442257ed48..b40ce82cc1 100644
--- a/packages/components/src/pages/VsCodeExtension.vue
+++ b/packages/components/src/pages/VsCodeExtension.vue
@@ -372,6 +372,7 @@ import {
   filterStringToFilterState,
   base64UrlEncode,
   AppMapFilter,
+  AppMap,
 } from '@appland/models';
 import { unparseDiagram } from '@appland/sequence-diagram';
 
@@ -504,6 +505,7 @@ export default {
       isFullscreen: false,
       showDetailsPanel: false,
       rightColumnWidth: 0,
+      filteredAppMap: this.emptyFilteredAppMap(),
     };
   },
   mixins: [EmitLinkMixin],
@@ -554,6 +556,17 @@ export default {
     },
   },
   watch: {
+    '$store.state.filters': {
+      handler(filters) {
+        this.applyFilters(filters, this.$store.state.appMap);
+      },
+      deep: true,
+    },
+    '$store.state.appMap': {
+      handler(appMap) {
+        this.applyFilters(this.filters, appMap);
+      },
+    },
     '$store.state.currentView': {
       handler(view) {
         this.$refs.tabs.activateTab(this.$refs[view]);
@@ -675,10 +688,6 @@ export default {
     filters() {
       return this.$store.state.filters;
     },
-    filteredAppMap() {
-      const { appMap } = this.$store.state;
-      return this.filters.filter(appMap, this.findings);
-    },
     viewState() {
       return this.getStateObject();
     },
@@ -884,6 +893,12 @@ export default {
     },
   },
   methods: {
+    applyFilters(filter, appMap) {
+      this.filteredAppMap = filter.filter(appMap, this.findings);
+    },
+    emptyFilteredAppMap() {
+      return new AppMapFilter().filter(new AppMap());
+    },
     detailsPanelTransitionEnd() {
       this.rightColumnWidth = this.$refs.mainColumnRight.offsetWidth;
     },

From c6ee367ba887de7aee2859eab666d2c24d58a0d2 Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Tue, 26 Mar 2024 14:07:07 -0400
Subject: [PATCH 2/6] feat: Lazy load diagrams

---
 .../components/src/components/LazyLoader.vue  | 40 +++++++++++
 .../src/components/LoadingSpinner.vue         | 40 +++++++++++
 .../components/src/pages/VsCodeExtension.vue  | 72 +++++++++++--------
 packages/components/tsconfig.json             |  2 +-
 4 files changed, 123 insertions(+), 31 deletions(-)
 create mode 100644 packages/components/src/components/LazyLoader.vue
 create mode 100644 packages/components/src/components/LoadingSpinner.vue

diff --git a/packages/components/src/components/LazyLoader.vue b/packages/components/src/components/LazyLoader.vue
new file mode 100644
index 0000000000..55740fdd76
--- /dev/null
+++ b/packages/components/src/components/LazyLoader.vue
@@ -0,0 +1,40 @@
+<template>
+  <div v-if="shouldRender" class="lazy-loader-container">
+    <slot />
+  </div>
+  <v-loading-spinner v-else />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import VLoadingSpinner from '@/components/LoadingSpinner.vue';
+
+export default Vue.extend({
+  name: 'v-lazy-loader',
+
+  components: {
+    VLoadingSpinner,
+  },
+
+  data() {
+    return {
+      shouldRender: false,
+    };
+  },
+
+  mounted() {
+    Vue.nextTick(() => {
+      setTimeout(() => {
+        this.shouldRender = true;
+      }, 0);
+    });
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.lazy-loader-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/packages/components/src/components/LoadingSpinner.vue b/packages/components/src/components/LoadingSpinner.vue
new file mode 100644
index 0000000000..064fff4275
--- /dev/null
+++ b/packages/components/src/components/LoadingSpinner.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="loading-background">
+    <div class="loading-spinner"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'v-loading-spinner',
+};
+</script>
+
+<style scoped lang="scss">
+.loading-background {
+  width: 100%;
+  height: 100%;
+  background-color: $gray1;
+
+  .loading-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 64px;
+      height: 64px;
+      margin: 8px;
+      border-radius: 50%;
+      border: 6px solid transparent;
+      border-color: $hotpink transparent $hotpink transparent;
+      animation: loader-animation 1.2s linear infinite;
+    }
+  }
+}
+</style>
diff --git a/packages/components/src/pages/VsCodeExtension.vue b/packages/components/src/pages/VsCodeExtension.vue
index b40ce82cc1..e779944ed5 100644
--- a/packages/components/src/pages/VsCodeExtension.vue
+++ b/packages/components/src/pages/VsCodeExtension.vue
@@ -80,10 +80,12 @@
           :tabName="VIEW_COMPONENT"
           :ref="VIEW_COMPONENT"
         >
-          <v-diagram-component
-            :class-map="filteredAppMap.classMap"
-            :highlighted-event-index="eventFilterMatchIndex"
-          />
+          <v-lazy-loader>
+            <v-diagram-component
+              :class-map="filteredAppMap.classMap"
+              :highlighted-event-index="eventFilterMatchIndex"
+            />
+          </v-lazy-loader>
         </v-tab>
 
         <v-tab
@@ -93,28 +95,32 @@
           :tabName="VIEW_SEQUENCE"
           :allow-scroll="true"
         >
-          <v-diagram-sequence
-            ref="viewSequence_diagram"
-            :app-map="filteredAppMap"
-            :collapse-depth="seqDiagramCollapseDepth"
-            :highlighted-event-index="eventFilterMatchIndex"
-            @setMaxSeqDiagramCollapseDepth="setMaxSeqDiagramCollapseDepth"
-            @updateCollapseDepth="handleNewCollapseDepth"
-          />
+          <v-lazy-loader>
+            <v-diagram-sequence
+              ref="viewSequence_diagram"
+              :app-map="filteredAppMap"
+              :collapse-depth="seqDiagramCollapseDepth"
+              :highlighted-event-index="eventFilterMatchIndex"
+              @setMaxSeqDiagramCollapseDepth="setMaxSeqDiagramCollapseDepth"
+              @updateCollapseDepth="handleNewCollapseDepth"
+            />
+          </v-lazy-loader>
         </v-tab>
 
         <v-tab name="Trace View" :is-active="isViewingFlow" :tabName="VIEW_FLOW" :ref="VIEW_FLOW">
           <div class="trace-view">
-            <v-diagram-trace
-              ref="viewFlow_diagram"
-              :events="filteredAppMap.rootEvents()"
-              :event-filter-matches="new Set(eventFilterMatches)"
-              :event-filter-match="eventFilterMatch"
-              :event-filter-match-index="eventFilterMatchIndex + 1"
-              :name="VIEW_FLOW"
-              :zoom-controls="true"
-              @clickEvent="onClickTraceEvent"
-            />
+            <v-lazy-loader>
+              <v-diagram-trace
+                ref="viewFlow_diagram"
+                :events="filteredAppMap.rootEvents()"
+                :event-filter-matches="new Set(eventFilterMatches)"
+                :event-filter-match="eventFilterMatch"
+                :event-filter-match-index="eventFilterMatchIndex + 1"
+                :name="VIEW_FLOW"
+                :zoom-controls="true"
+                @clickEvent="onClickTraceEvent"
+              />
+            </v-lazy-loader>
           </div>
         </v-tab>
 
@@ -125,13 +131,15 @@
           :tabName="VIEW_FLAMEGRAPH"
           :allow-scroll="false"
         >
-          <v-diagram-flamegraph
-            ref="viewFlamegraph_diagram"
-            :events="filteredAppMap.rootEvents()"
-            :title="filteredAppMap.name"
-            :highlighted-event-index="eventFilterMatchIndex"
-            @select="onFlamegraphSelect"
-          />
+          <v-lazy-loader>
+            <v-diagram-flamegraph
+              ref="viewFlamegraph_diagram"
+              :events="filteredAppMap.rootEvents()"
+              :title="filteredAppMap.name"
+              :highlighted-event-index="eventFilterMatchIndex"
+              @select="onFlamegraphSelect"
+            />
+          </v-lazy-loader>
         </v-tab>
 
         <template v-slot:notification>
@@ -439,6 +447,7 @@ import isPrecomputedSequenceDiagram from '@/lib/isPrecomputedSequenceDiagram';
 import { SAVED_FILTERS_STORAGE_ID } from '../components/FilterMenu.vue';
 import { DEFAULT_SEQ_DIAGRAM_COLLAPSE_DEPTH } from '../components/DiagramSequence.vue';
 import VCompassIcon from '@/assets/compass-simpler.svg';
+import VLazyLoader from '@/components/LazyLoader.vue';
 
 const browserPrefixes = ['', 'webkit', 'moz'];
 
@@ -479,6 +488,7 @@ export default {
     VUnlicensedNotice,
     VConfigurationRequired,
     VCompassIcon,
+    VLazyLoader,
   },
   store,
   data() {
@@ -1467,9 +1477,11 @@ export default {
     if (this.isGiantAppMap) {
       this.showStatsPanel = true;
       this.setView(null);
+    } else if (this.showStatsPanel && this.currentView === null) {
+      this.showStatsPanel = false;
+      this.setView(this.defaultView);
     }
   },
-
   beforeDestroy() {
     browserPrefixes.forEach((prefix) => {
       document.removeEventListener(prefix + 'fullscreenchange', this.checkFullscreen);
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 83d3278c7d..7a1b1cc736 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -13,7 +13,7 @@
     "useDefineForClassFields": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env", "jest"],
+    "types": ["webpack-env", "jest", "vue/types/vue"],
     "paths": {
       "@/*": ["src/*"]
     },

From 4ac2fdedd409ed1e6f63a0c5ffb392bcbceddc41 Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Tue, 26 Mar 2024 16:19:10 -0400
Subject: [PATCH 3/6] feat: Show spinner when using filter settings

---
 .../components/src/pages/VsCodeExtension.vue  | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/pages/VsCodeExtension.vue b/packages/components/src/pages/VsCodeExtension.vue
index e779944ed5..2f8a887b72 100644
--- a/packages/components/src/pages/VsCodeExtension.vue
+++ b/packages/components/src/pages/VsCodeExtension.vue
@@ -80,6 +80,7 @@
           :tabName="VIEW_COMPONENT"
           :ref="VIEW_COMPONENT"
         >
+          <v-loading-spinner v-if="isDiagramLoading" />
           <v-lazy-loader>
             <v-diagram-component
               :class-map="filteredAppMap.classMap"
@@ -95,6 +96,7 @@
           :tabName="VIEW_SEQUENCE"
           :allow-scroll="true"
         >
+          <v-loading-spinner v-if="isDiagramLoading" />
           <v-lazy-loader>
             <v-diagram-sequence
               ref="viewSequence_diagram"
@@ -109,6 +111,7 @@
 
         <v-tab name="Trace View" :is-active="isViewingFlow" :tabName="VIEW_FLOW" :ref="VIEW_FLOW">
           <div class="trace-view">
+            <v-loading-spinner v-if="isDiagramLoading" />
             <v-lazy-loader>
               <v-diagram-trace
                 ref="viewFlow_diagram"
@@ -131,6 +134,7 @@
           :tabName="VIEW_FLAMEGRAPH"
           :allow-scroll="false"
         >
+          <v-loading-spinner v-if="isDiagramLoading" />
           <v-lazy-loader>
             <v-diagram-flamegraph
               ref="viewFlamegraph_diagram"
@@ -448,6 +452,7 @@ import { SAVED_FILTERS_STORAGE_ID } from '../components/FilterMenu.vue';
 import { DEFAULT_SEQ_DIAGRAM_COLLAPSE_DEPTH } from '../components/DiagramSequence.vue';
 import VCompassIcon from '@/assets/compass-simpler.svg';
 import VLazyLoader from '@/components/LazyLoader.vue';
+import VLoadingSpinner from '@/components/LoadingSpinner.vue';
 
 const browserPrefixes = ['', 'webkit', 'moz'];
 
@@ -489,6 +494,7 @@ export default {
     VConfigurationRequired,
     VCompassIcon,
     VLazyLoader,
+    VLoadingSpinner,
   },
   store,
   data() {
@@ -516,6 +522,7 @@ export default {
       showDetailsPanel: false,
       rightColumnWidth: 0,
       filteredAppMap: this.emptyFilteredAppMap(),
+      isDiagramLoading: false,
     };
   },
   mixins: [EmitLinkMixin],
@@ -567,8 +574,8 @@ export default {
   },
   watch: {
     '$store.state.filters': {
-      handler(filters) {
-        this.applyFilters(filters, this.$store.state.appMap);
+      async handler(filters) {
+        await this.applyFilters(filters, this.$store.state.appMap, true);
       },
       deep: true,
     },
@@ -903,8 +910,19 @@ export default {
     },
   },
   methods: {
-    applyFilters(filter, appMap) {
-      this.filteredAppMap = filter.filter(appMap, this.findings);
+    async applyFilters(filter, appMap, isAsync = false) {
+      if (isAsync) {
+        this.isDiagramLoading = true;
+        await new Promise((resolve) => {
+          setTimeout(() => {
+            this.filteredAppMap = filter.filter(appMap, this.findings);
+            this.isDiagramLoading = false;
+            resolve();
+          }, 0);
+        });
+      } else {
+        this.filteredAppMap = filter.filter(appMap, this.findings);
+      }
     },
     emptyFilteredAppMap() {
       return new AppMapFilter().filter(new AppMap());

From fafc8d286a32eeb87ab092632ddf333b78abd87f Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Wed, 27 Mar 2024 11:35:54 -0400
Subject: [PATCH 4/6] fix: Only update search bar when it has text

---
 packages/components/src/components/SearchBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/SearchBar.vue b/packages/components/src/components/SearchBar.vue
index 99838d3e5c..1492b47ecf 100644
--- a/packages/components/src/components/SearchBar.vue
+++ b/packages/components/src/components/SearchBar.vue
@@ -222,7 +222,7 @@ export default {
       return this.$refs.input === window?.document?.activeElement;
     },
     onWindowClick(event) {
-      if (!getEventTarget(event.target, this.$refs.form)) {
+      if (!getEventTarget(event.target, this.$refs.form) && this.searchValue) {
         if (this.$refs.input !== window.document.activeElement) this.showSuggestions = false;
 
         if (

From c0f9d308a7143600f6c779f6344879c4314c6982 Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Wed, 27 Mar 2024 11:59:32 -0400
Subject: [PATCH 5/6] fixup! feat: Show spinner when using filter settings

---
 packages/components/tests/unit/VsCodeExtension.spec.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/components/tests/unit/VsCodeExtension.spec.js b/packages/components/tests/unit/VsCodeExtension.spec.js
index debb72c376..24887d1a4a 100644
--- a/packages/components/tests/unit/VsCodeExtension.spec.js
+++ b/packages/components/tests/unit/VsCodeExtension.spec.js
@@ -305,6 +305,11 @@ describe('VsCodeExtension.vue', () => {
     await wrapper.find('[data-cy="export-button"]').trigger('click');
     const exportJSON = wrapper.find('[data-cy="exportJSON"]');
     expect(exportJSON.exists()).toBe(true);
+
+    // TODO: This is a hack to wait for the filters to be applied
+    // We should really fix this at some point
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
     await exportJSON.trigger('click');
 
     const exportJSONEventParameters = rootWrapper.emitted()['exportJSON'];

From 1e9cae6e800a8a7641d56e05046adc64a5944174 Mon Sep 17 00:00:00 2001
From: Adam Trotta <ahtrotta@gmail.com>
Date: Wed, 27 Mar 2024 13:50:35 -0400
Subject: [PATCH 6/6] fixup! feat: Lazy load diagrams

---
 .../components/src/components/LazyLoader.vue  | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/LazyLoader.vue b/packages/components/src/components/LazyLoader.vue
index 55740fdd76..23e11a1056 100644
--- a/packages/components/src/components/LazyLoader.vue
+++ b/packages/components/src/components/LazyLoader.vue
@@ -22,12 +22,24 @@ export default Vue.extend({
     };
   },
 
-  mounted() {
-    Vue.nextTick(() => {
-      setTimeout(() => {
+  methods: {
+    render() {
+      Vue.nextTick(() => {
         this.shouldRender = true;
-      }, 0);
-    });
+      });
+    },
+  },
+
+  activated() {
+    this.render();
+  },
+
+  mounted() {
+    this.render();
+  },
+
+  deactivated() {
+    this.shouldRender = false;
   },
 });
 </script>