From c5d1274ac41fa4a975b4acf4291a717090672b14 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Thu, 2 Mar 2023 11:45:22 -0700
Subject: [PATCH 1/3] Add ToolBar component

---
 components.d.ts              |  13 ++++
 package.json                 |   3 +-
 src/assets/multinet_logo.svg |  36 ++++++++++
 src/components/ToolBar.vue   | 136 +++++++++++++++++++++++++++++++++++
 src/main.ts                  |   2 +
 5 files changed, 189 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/multinet_logo.svg
 create mode 100644 src/components/ToolBar.vue

diff --git a/components.d.ts b/components.d.ts
index 6e5f75b..e6bb305 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,19 +9,32 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     LoginMenu: typeof import('./src/components/LoginMenu.vue')['default']
     NetworkSubsetter: typeof import('./src/components/NetworkSubsetter.vue')['default']
+    ToolBar: typeof import('./src/components/ToolBar.vue')['default']
+    VAppBar: typeof import('vuetify/lib')['VAppBar']
+    VAppBarNavIcon: typeof import('vuetify/lib')['VAppBarNavIcon']
+    VAppBarTitle: typeof import('vuetify/lib')['VAppBarTitle']
+    VAutocomplete: typeof import('vuetify/lib')['VAutocomplete']
     VAvatar: typeof import('vuetify/lib')['VAvatar']
     VBtn: typeof import('vuetify/lib')['VBtn']
     VCard: typeof import('vuetify/lib')['VCard']
     VCardText: typeof import('vuetify/lib')['VCardText']
     VCardTitle: typeof import('vuetify/lib')['VCardTitle']
+    VCol: typeof import('vuetify/lib')['VCol']
     VDivider: typeof import('vuetify/lib')['VDivider']
     VIcon: typeof import('vuetify/lib')['VIcon']
     VList: typeof import('vuetify/lib')['VList']
     VListItem: typeof import('vuetify/lib')['VListItem']
     VListItemAction: typeof import('vuetify/lib')['VListItemAction']
+    VListItemTitle: typeof import('vuetify/lib')['VListItemTitle']
     VMenu: typeof import('vuetify/lib')['VMenu']
     VOverlay: typeof import('vuetify/lib')['VOverlay']
     VRow: typeof import('vuetify/lib')['VRow']
     VSlider: typeof import('vuetify/lib')['VSlider']
+    VSpacer: typeof import('vuetify/lib')['VSpacer']
+    VToolbar: typeof import('vuetify/lib')['VToolbar']
+    VToolbarItems: typeof import('vuetify/lib')['VToolbarItems']
+    VToolbarNavIcon: typeof import('vuetify/lib')['VToolbarNavIcon']
+    VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
+    VTooltip: typeof import('vuetify/lib')['VTooltip']
   }
 }
diff --git a/package.json b/package.json
index f0bae18..a701255 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "vue-tsc": "^0.40.0"
   },
   "scripts": {
-    "build": "vite build && vue-tsc --emitDeclarationOnly"
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "watch": "vite build --watch"
   }
 }
diff --git a/src/assets/multinet_logo.svg b/src/assets/multinet_logo.svg
new file mode 100644
index 0000000..0d62eba
--- /dev/null
+++ b/src/assets/multinet_logo.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#C2ADCD;}
+	.st1{fill:#BFD68D;}
+	.st2{fill:#606060;}
+	.st3{fill:#CCB576;}
+	.st4{fill:#B5CBC2;}
+</style>
+<circle class="st0" cx="207" cy="829.1" r="88.1"/>
+<circle class="st1" cx="766.1" cy="869.3" r="88.1"/>
+<path class="st2" d="M645.7,888.3c-42.1,15.1-87.5,23.3-134.7,23.3c-67.7,0-131.6-16.9-187.5-46.8c-8,26.1-24.6,48.4-46.5,63.8
+	c69.2,39,149.1,61.3,234,61.3c60.5,0,118.4-11.3,171.7-31.9C663.4,940,650,915.7,645.7,888.3z"/>
+<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -139.0386 182.8916)" class="st3" cx="151.3" cy="259.3" rx="88.1" ry="88.1"/>
+<path class="st2" d="M133.1,379.8c-27.4-4.1-51.8-17.4-70.1-36.5c-19.7,52.4-30.6,109.1-30.6,168.3c0,92.4,26.3,178.7,71.9,252
+	c14.5-22.5,36.1-40,61.8-49.2c-35.1-59.5-55.3-128.8-55.3-202.8C110.8,465.4,118.7,421.1,133.1,379.8z"/>
+<circle class="st4" cx="828.7" cy="207.4" r="88.1"/>
+<g>
+	<path class="st2" d="M762.9,104.9C689.7,59.3,603.4,33,511,33c-118.4,0-226.9,43.3-310.6,114.8c24.7,11,45.2,29.9,58,53.5
+		c68.9-56.2,156.9-90,252.6-90c74,0,143.3,20.2,202.8,55.3C722.9,141,740.4,119.4,762.9,104.9z"/>
+	<path class="st2" d="M928.2,277.5c-15.4,21.8-37.8,38.4-63.9,46.4c29.8,56,46.8,119.8,46.8,187.6c0,94.6-33,181.6-88.1,250.2
+		c23.8,12.6,42.9,32.9,54,57.6c70.1-83.3,112.4-190.6,112.4-307.7C989.5,426.6,967.2,346.7,928.2,277.5z"/>
+</g>
+<path class="st2" d="M784.6,321c-6.1-2.4-11.9-5.2-17.4-8.4c-0.9-0.5-1.8-1.1-2.8-1.7c-0.5-0.3-1-0.6-1.4-0.9c-1-0.6-2-1.3-3-2
+	c-0.4-0.3-0.7-0.5-1.1-0.7c-1.1-0.8-2.1-1.5-3.2-2.3c-0.3-0.2-0.5-0.4-0.8-0.6c-1.1-0.9-2.2-1.7-3.3-2.6c-0.2-0.2-0.4-0.3-0.6-0.5
+	c-1-0.9-2-1.7-3.1-2.6c-0.3-0.2-0.5-0.4-0.8-0.7c-0.9-0.8-1.8-1.7-2.7-2.6c-0.3-0.3-0.6-0.6-0.9-0.9c-0.8-0.8-1.6-1.6-2.4-2.5
+	c-0.4-0.4-0.7-0.7-1.1-1.1c-0.7-0.8-1.4-1.6-2.2-2.4c-0.4-0.5-0.8-0.9-1.2-1.4c-0.6-0.7-1.3-1.5-1.9-2.2c-0.5-0.5-0.9-1.1-1.4-1.6
+	c-0.6-0.7-1.1-1.4-1.6-2.1c-0.5-0.6-1-1.3-1.4-1.9c-0.5-0.6-0.9-1.3-1.4-2c-0.5-0.7-1-1.4-1.5-2.2c-0.4-0.6-0.8-1.2-1.2-1.8
+	c-0.5-0.8-1-1.6-1.5-2.4c-0.4-0.6-0.7-1.2-1-1.8c-0.5-0.9-1-1.7-1.5-2.6c-0.3-0.6-0.6-1.1-0.9-1.7c-0.5-0.9-1-1.8-1.4-2.7
+	c-1.4-2.8-2.7-5.6-3.9-8.5C605.5,332.4,489.6,357.7,370.3,329c-38.6-9.3-72.9-23.4-101.4-38c-7.1,26.4-22.9,49.3-44.1,65.4
+	c34.1,18.1,75.8,36,123.7,47.9c33.9,8.4,72.7,14.3,115.1,14.3c35.3,0,73.1-4,112.8-13.9l-315.9,315c24,11.8,43.6,31.2,55.6,55.2
+	l320.5-319.5c-21.1,83.5-16.5,159.1-3.6,219.5c9.5,44.6,24.1,84.1,39.4,117c17-20.5,40.5-35.3,67.4-41.3
+	c-12.1-27.3-23.4-59.4-30.7-95.1C684.6,538.1,710.1,426,784.6,321z"/>
+</svg>
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
new file mode 100644
index 0000000..bb80ccb
--- /dev/null
+++ b/src/components/ToolBar.vue
@@ -0,0 +1,136 @@
+<template>
+  <v-toolbar
+    color="grey lighten-2"
+    dense
+    flat
+  >
+    <v-app-bar-nav-icon @click="toggleSideBar"></v-app-bar-nav-icon>
+    <img
+      id="multinet-logo"
+      src="../assets/multinet_logo.svg"
+      alt="Multinet Logo"
+    >
+    <v-toolbar-title>{{ props.appName }}</v-toolbar-title>
+
+    <v-spacer />
+
+    <div>
+      <v-autocomplete
+        v-model="searchTerm"
+        :items="searchItems"
+        auto-select-first
+        dense
+        filled
+        hide-details
+        placeholder="Search For A Node"
+        @change="searchTerm !== undefined && search(searchTerm); searchTerm = undefined"
+      />
+    </div>
+
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          icon
+          v-bind="attrs"
+          v-on="on"
+          @click="provUndo"
+        >
+          <v-icon>mdi-undo</v-icon>
+        </v-btn>
+      </template>
+      <span>Undo</span>
+    </v-tooltip>
+
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          icon
+          v-bind="attrs"
+          v-on="on"
+          @click="provRedo"
+        >
+          <v-icon>mdi-redo</v-icon>
+        </v-btn>
+      </template>
+      <span>Redo</span>
+    </v-tooltip>
+
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          icon
+          v-bind="attrs"
+          v-on="on"
+          @click="clearSelection"
+        >
+          <v-icon>mdi-select-off</v-icon>
+        </v-btn>
+      </template>
+      <span>Clear Selection</span>
+    </v-tooltip>
+
+    <v-menu
+      bottom
+      offset-y
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          icon
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon>mdi-dots-vertical</v-icon>
+        </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-item link @click="exportNetwork"><v-list-item-title>Export Network</v-list-item-title></v-list-item>
+        <v-list-item link @click="showTrrackVis"><v-list-item-title>Show History</v-list-item-title></v-list-item>
+      </v-list>
+    </v-menu>
+    
+    <login-menu
+      :user-info="userInfo"
+      :oauth-client="oauthClient"
+      :logout="logout"
+      :fetch-user-info="fetchUserInfo"
+    />
+  </v-toolbar>
+</template>
+
+<script setup lang="ts">
+import OAuthClient from '@girder/oauth-client';
+import { UserSpec } from 'multinet';
+import { ref } from 'vue';
+import LoginMenu from './LoginMenu.vue';
+
+const props = defineProps<{
+  appName: string;
+  clearSelection: () => void;
+  provUndo: () => void;
+  provRedo: () => void;
+  search: (searchTerm: string) => void;
+  searchItems: string[];
+  exportNetwork: () => void;
+  showTrrackVis: () => void;
+  toggleSideBar: () => void;
+  userInfo: UserSpec | null;
+  oauthClient: OAuthClient;
+  logout: () => Promise<void>;
+  fetchUserInfo: () => Promise<void>;
+}>();
+
+const searchTerm = ref<string | undefined>(undefined);
+</script>
+
+<style>
+#multinet-logo {
+  height: 32px;
+  width: 32px;
+  margin-right: 5px;
+}
+
+.search-box {
+  width: 0px;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 3e06984..7c91f27 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,9 @@
 import LoginMenu from './components/LoginMenu.vue';
 import NetworkSubsetter from './components/NetworkSubsetter.vue';
+import ToolBar from './components/ToolBar.vue';
 
 export {
   LoginMenu,
   NetworkSubsetter,
+  ToolBar,
 };
\ No newline at end of file

From dd6a09ed22bb68548639db3604a1c2db0ab64647 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Thu, 2 Mar 2023 11:45:36 -0700
Subject: [PATCH 2/3] Make login menu compatible with the toolbar component

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

diff --git a/src/components/LoginMenu.vue b/src/components/LoginMenu.vue
index 5e6d792..12f5640 100644
--- a/src/components/LoginMenu.vue
+++ b/src/components/LoginMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <v-menu
     v-model="menu"
-    offset-x
+    offset-y
   >
     <template #activator="{ on }">
       <v-btn

From b5e84cdc8ff6e6fbbc9a46a5f52939b2cbf4b658 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Thu, 2 Mar 2023 12:49:22 -0700
Subject: [PATCH 3/3] Add a link to the documentation

---
 src/components/ToolBar.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index bb80ccb..3dc5482 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -86,6 +86,9 @@
       <v-list>
         <v-list-item link @click="exportNetwork"><v-list-item-title>Export Network</v-list-item-title></v-list-item>
         <v-list-item link @click="showTrrackVis"><v-list-item-title>Show History</v-list-item-title></v-list-item>
+        <v-list-item link @click="redirectToDocs"><v-list-item-title>Get Help</v-list-item-title></v-list-item>
+
+        
       </v-list>
     </v-menu>
     
@@ -121,6 +124,10 @@ const props = defineProps<{
 }>();
 
 const searchTerm = ref<string | undefined>(undefined);
+
+function redirectToDocs() {
+  window.location.href = 'https://multinet-app.readthedocs.io/en/latest/index.html';
+}
 </script>
 
 <style>