feat: Apply saved filters

packages/components/src/components/FilterMenu.vue

@@ -59,13 +59,6 @@
           </label>
           <div class="filters__block-row-content">Hide external code</div>
         </div>
-        <div class="filters__block-row">
-          <label class="filters__checkbox">
-            <input type="checkbox" v-model="hideUnlabeled" />
-            <CheckIcon class="filters__checkbox-icon" />
-          </label>
-          <div class="filters__block-row-content">Hide unlabeled</div>
-        </div>
         <div class="filters__block-row">
           <label class="filters__checkbox">
             <input type="checkbox" v-model="hideElapsedTimeUnder" />

packages/components/src/components/chat/Chat.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="chat">
     <div class="button-panel" v-if="isChatting">
+      <div id="header-logo">
+        <v-app-map-navie-logo />
+        <div id="header-navie-logo">Navie</div>
+      </div>
       <v-button class="clear" size="small" kind="ghost" @click.native="clear">New chat</v-button>
     </div>
     <div class="messages" data-cy="messages" ref="messages" @scroll="manageScroll">
@@ -58,6 +62,7 @@ import VChatInput from '@/components/chat/ChatInput.vue';
 import VSuggestionGrid from '@/components/chat/SuggestionGrid.vue';
 import VSpinner from '@/components/Spinner.vue';
 import VLoaderIcon from '@/assets/eva_loader-outline.svg';
+import VAppMapNavieLogo from '@/assets/appmap-full-logo.svg';
 import VButton from '@/components/Button.vue';
 import { AI } from '@appland/client';
 
@@ -112,6 +117,7 @@ export default {
     VSuggestionGrid,
     VSpinner,
     VLoaderIcon,
+    VAppMapNavieLogo,
     VButton,
   },
   props: {
@@ -287,6 +293,21 @@ export default {
 <style lang="scss" scoped>
 $border-color: darken($gray4, 10%);
 
+#header-logo {
+  margin-right: auto;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: bold;
+  font-size: 11px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+#header-navie-logo {
+  padding-top: 3px;
+}
 .chat {
   display: flex;
   flex-direction: column;

packages/components/src/components/chat/ChatInput.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 //@ts-nocheck
 
-import VSendIcon from '@/assets/send.svg';
+import VSendIcon from '@/assets/compass-icon.svg';
 import VPopper from '@/components/Popper.vue';
 
 export default {
@@ -140,7 +140,6 @@ $border-color: #7289c5;
       outline: none !important;
     }
   }
-
   .popper {
     position: absolute;
     top: 50%;
@@ -150,32 +149,32 @@ $border-color: #7289c5;
     &__text {
       border: none;
     }
-
     .send {
       height: 2rem;
       width: 2rem;
       padding: 0.25rem;
       border: none;
       border-radius: $border-radius;
-      background-color: lighten($border-color, 10%);
+      background-color: #6c81ba;
       transition: background-color 0.5s ease-in-out;
-
+      svg {
+        path {
+          fill: #fff;
+        }
+      }
       &:disabled {
         pointer-events: none;
         background-color: rgba($color: #7289c5, $alpha: 0.25);
-      }
 
+        svg {
+          path {
+            fill: #9aa9d3;
+          }
+        }
+      }
       &:hover {
         cursor: pointer;
-        background-color: white;
-      }
-
-      svg {
-        transform: rotate(90deg) translateY(-1px);
-        transform-origin: center center;
-        path {
-          fill: black;
-        }
+        background-color: $hotpink;
       }
     }
   }

packages/components/src/components/chat/UserMessage.vue

@@ -45,7 +45,7 @@
 
 <script lang="ts">
 //@ts-nocheck
-import VAppmapLogo from '@/assets/appmap-logomark.svg';
+import VNavieCompass from '@/assets/compass-icon.svg';
 import VUserAvatar from '@/assets/user-avatar.svg';
 import VThumbIcon from '@/assets/thumb.svg';
 import VButton from '@/components/Button.vue';
@@ -91,7 +91,7 @@ export default {
   name: 'v-user-message',
 
   components: {
-    VAppmapLogo,
+    VNavieCompass,
     VUserAvatar,
     VThumbIcon,
     VButton,
@@ -124,10 +124,10 @@ export default {
       return this.message.toString() || '...';
     },
     avatar() {
-      return this.isUser ? VUserAvatar : VAppmapLogo;
+      return this.isUser ? VUserAvatar : VNavieCompass;
     },
     name() {
-      return this.isUser ? 'You' : 'AppMap';
+      return this.isUser ? 'You' : 'Navie';
     },
     renderedMarkdown() {
       const markdown = marked.parse(this.dynamicMessage);
@@ -188,7 +188,7 @@ export default {
 
 .message {
   display: grid;
-  grid-template-columns: 32px 1fr;
+  grid-template-columns: 38px 1fr;
   grid-template-rows: 16px 1fr;
   gap: 0.5rem 1rem;
   padding: 0 1rem;
@@ -199,8 +199,8 @@ export default {
   }
 
   .avatar {
-    width: 32px;
-    height: 32px;
+    width: 38px;
+    height: 38px;
     overflow: hidden;
     grid-column: 1;
     border-radius: 50%;

packages/components/src/pages/ChatSearch.vue

@@ -50,7 +50,13 @@
           </div>
         </div>
       </div>
-      <v-app-map v-if="selectedSearchResult" :allow-fullscreen="true" ref="vappmap" class="appmap">
+      <v-app-map
+        v-if="selectedSearchResult"
+        :allow-fullscreen="true"
+        :saved-filters="savedFilters"
+        ref="vappmap"
+        class="appmap"
+      >
       </v-app-map>
       <div v-else class="appmap-empty"></div>
       <v-accordion class="diagnostics" :open="showDiagnostics" @toggle="toggleDiagonstics">
@@ -116,6 +122,10 @@ export default {
     appmapRpcFn: {
       type: Function,
     },
+    savedFilters: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -211,6 +221,15 @@ export default {
     },
   },
   methods: {
+    getAppMapState() {
+      return this.$refs.vappmap?.getState();
+    },
+    setAppMapState(state) {
+      this.$refs.vappmap?.setState(state);
+    },
+    updateFilters(updatedFilters) {
+      this.$store.commit(SET_SAVED_FILTERS, updatedFilters);
+    },
     async sendMessage(message: string) {
       const { vchat } = this;
       const search = this.rpcClient();

packages/components/src/pages/VsCodeExtension.vue

@@ -155,23 +155,6 @@
               </button>
             </div>
           </v-popper>
-
-          <v-popper
-            v-if="appMapUploadable && !isGiantAppMap"
-            class="hover-text-popper"
-            text="Create a link to this AppMap"
-            placement="left"
-            text-align="left"
-          >
-            <button
-              class="control-button"
-              data-cy="share-button"
-              @click="toggleShareModal"
-              title=""
-            >
-              <UploadIcon class="control-button__icon" />
-            </button>
-          </v-popper>
           <v-popper
             v-if="showDownload"
             class="hover-text-popper"
@@ -259,28 +242,6 @@
         </template>
       </v-tabs>
 
-      <div v-if="showShareModal" class="share-appmap">
-        <div class="heading">
-          <h1>Share this AppMap</h1>
-          <CloseIcon class="close-me" @click.stop="closeShareModal" />
-        </div>
-        <div class="content">
-          <p>
-            This link can be used to view this AppMap in a browser. You can share it with other
-            collaborators, or put it into a Pull Request.
-          </p>
-          <div class="share-url">
-            <div class="share-link">
-              <span class="url">{{ shareURLmessage }}</span>
-              <span class="icon copy" @click="copyToClipboard(shareURL)">
-                <CopyIcon />
-              </span>
-            </div>
-            <p>This link has been copied to your clipboard.</p>
-          </div>
-        </div>
-      </div>
-
       <div v-if="showStatsPanel" class="appmap-stats">
         <v-stats-panel
           :stats="stats"
@@ -468,9 +429,7 @@ export default {
       VIEW_FLAMEGRAPH,
       eventFilterText: '',
       eventFilterMatchIndex: 0,
-      showShareModal: false,
       showStatsPanel: false,
-      shareURL: undefined,
       seqDiagramTimeoutId: undefined,
       seqDiagramCollapseDepth: DEFAULT_SEQ_DIAGRAM_COLLAPSE_DEPTH,
       maxSeqDiagramCollapseDepth: 9,
@@ -832,10 +791,6 @@ export default {
         })
       );
     },
-    shareURLmessage() {
-      if (this.shareURL) return this.shareURL;
-      return 'Retrieving link...';
-    },
     hasStats() {
       return this.stats && this.stats.functions && this.stats.functions.length > 0;
     },
@@ -1106,14 +1061,8 @@ export default {
       this.eventFilterText = '';
       this.resetDetailsPanel();
     },
-    toggleShareModal() {
-      this.showShareModal = !this.showShareModal;
-      this.$root.$emit('uploadAppmap');
-      if (this.showShareModal && this.showStatsPanel) this.showStatsPanel = false;
-    },
     toggleStatsPanel() {
       this.showStatsPanel = !this.showStatsPanel;
-      if (this.showShareModal && this.showStatsPanel) this.showShareModal = false;
     },
     closeStatsPanel() {
       this.showStatsPanel = false;
@@ -1141,15 +1090,6 @@ export default {
         }, {})
       );
     },
-    closeShareModal() {
-      this.showShareModal = false;
-    },
-    setShareURL(url) {
-      this.shareURL = url;
-    },
-    copyToClipboard(input) {
-      this.$root.$emit('copyToClipboard', input);
-    },
     onFlamegraphSelect(event) {
       if (event) {
         this.onClickTraceEvent(event);

packages/components/src/stories/ChatSearch.stories.js

@@ -3,6 +3,7 @@ import './scss/vscode.scss';
 import orderData from './data/scenario.json';
 import petclinicData from './data/java_scenario.json';
 import longPackageData from './data/long-package.appmap.json';
+import savedFilters from './data/saved_filters.js';
 
 export default {
   title: 'Pages/ChatSearch',
@@ -23,6 +24,12 @@ export const ChatSearchMock = (args, { argTypes }) => ({
   template: `<v-chat-search v-bind="$props"></v-chat-search>`,
 });
 
+export const ChatSearchMockWithFilters = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { VChatSearch },
+  template: `<v-chat-search v-bind="$props"></v-chat-search>`,
+});
+
 export const ChatSearchMockSearchPrepopulated = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { VChatSearch },
@@ -144,6 +151,11 @@ ChatSearchMock.args = {
   appmapRpcFn: mockRpc,
 };
 
+ChatSearchMockWithFilters.args = {
+  appmapRpcFn: mockRpc,
+  savedFilters,
+};
+
 ChatSearchMockSearchPrepopulated.args = {
   appmapRpcFn: mockRpc,
   question: 'How does password reset work?',

packages/components/tests/e2e/specs/appmap/statsPanel.spec.js

@@ -29,14 +29,6 @@ context('AppMap stats panel', () => {
       cy.get('[data-cy="stats-panel"]').should('not.exist');
     });
 
-    it('only has one of the share panel and stats panel open', () => {
-      cy.get('[data-cy="stats-button"]').click();
-      cy.get('[data-cy="stats-panel"]').should('exist').should('be.visible');
-      cy.get('[data-cy="share-button"]').click();
-      cy.get('.share-appmap').should('exist');
-      cy.get('[data-cy="stats-panel"]').should('not.exist');
-    });
-
     it('opens the filter modal on top of the stats panel', () => {
       cy.get('[data-cy="stats-button"]').click();
       cy.get('[data-cy="filter-button"]').click();