Toolbar settings

src/App.vue

@@ -23,8 +23,6 @@
                 <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
-                <el-button @click="toggleHighlightConnectedPaths()" size="small">Toggle Highlight Connected Paths</el-button>
-                <el-button @click="toggleHighlightDOIPaths()" size="small">Toggle Highlight DOI Paths</el-button>
               </div>
             </div>
             <template #reference>
@@ -43,7 +41,6 @@
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
-        :hoverHighlightOptions="hoverHighlightOptions"
         @updateShareLinkRequested="updateUUID"
         @isReady="viewerIsReady"
         @mapLoaded="mapIsLoaded"
@@ -82,10 +79,6 @@ export default {
       mapSettings: [],
       startingMap: "AC",
       ElIconSetting: shallowRef(ElIconSetting),
-      hoverHighlightOptions: {
-        highlightConnectedPaths: true,
-        highlightDOIPaths: false,
-      },
     }
   },
   computed: {
@@ -185,12 +178,6 @@ export default {
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },
-    toggleHighlightConnectedPaths: function () {
-      this.hoverHighlightOptions.highlightConnectedPaths = !this.hoverHighlightOptions.highlightConnectedPaths;
-    },
-    toggleHighlightDOIPaths: function () {
-      this.hoverHighlightOptions.highlightDOIPaths = !this.hoverHighlightOptions.highlightDOIPaths;
-    },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
       // map.changeViewingMode('Annotation')

src/assets/header-icon.scss

@@ -40,6 +40,13 @@
       background-color: #f3ecf6;
     }
   }
+
+  &.el-icon {
+    margin: 0;
+    color: white;
+    background-color: $app-primary-color;
+    border-radius: 50% 50%;
+  }
 }
 
 .header-icon.disabled,

src/components.d.ts

@@ -16,12 +16,17 @@ declare module 'vue' {
     DialogToolbarContent: typeof import('./components/DialogToolbarContent.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
+    ElIconMoreFilled: typeof import('@element-plus/icons-vue')['MoreFilled']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']

src/components/DialogToolbarContent.vue

@@ -156,7 +156,51 @@
           <map-svg-icon icon="close" class="header-icon" @click="close" v-show="showIcons"/>
         </template>
       </el-popover>
-
+      <el-popover
+        v-if="globalSettingRef"
+        :virtual-ref="globalSettingRef"
+        ref="settingPopover"
+        placement="bottom"
+        width="133"
+        :teleported=false
+        trigger="click"
+        popper-class="setting-popover"
+        virtual-triggering
+        >
+        <el-row :gutter="20">
+          <el-col :span="20">
+            <el-checkbox
+              v-model="globalSettings.displayMarker"
+              @change="updateGlobalSettings"
+            >
+              Display Map Markers
+            </el-checkbox>
+            <p>Dataset Card Hover</p>
+            <el-checkbox
+              v-model="globalSettings.highlightConnectedPaths"
+              @change="updateGlobalSettings"
+            >
+              Highlight Connected Paths
+            </el-checkbox>
+            <el-checkbox
+              v-model="globalSettings.highlightDOIPaths"
+              @change="updateGlobalSettings"
+            >
+              Highlight DOI Paths
+            </el-checkbox>
+          </el-col>
+        </el-row>
+      </el-popover>
+      <el-popover class="tooltip" content="Global Settings" placement="bottom-end"
+        :show-after="helpDelay" :teleported=false trigger="hover"
+        popper-class="header-popper"
+      >
+        <template #reference>
+          <el-icon class="header-icon" ref="globalSettingRef">
+            <el-icon-more-filled />
+          </el-icon>
+        </template>
+      </el-popover>
     </el-row>
   </div>
 </template>
@@ -174,6 +218,7 @@ import { MapSvgIcon, MapSvgSpriteColor } from '@abi-software/svg-sprite';
 import SearchControls from './SearchControls.vue';
 import {
   CopyDocument as ElIconCopyDocument,
+  MoreFilled as ElIconMoreFilled,
 } from '@element-plus/icons-vue';
 import {
   ElButton as Button,
@@ -254,7 +299,7 @@ export default {
       let flag = !(value === true);
       if (flag !== this.independent)
         this.independent = flag;
-    }
+    },
   },
   data: function() {
     return {
@@ -265,21 +310,25 @@ export default {
       failedSearch: undefined,
       activeViewRef: undefined,
       permalinkRef: undefined,
+      globalSettingRef: undefined,
       ElIconCopyDocument: shallowRef(ElIconCopyDocument),
+      globalSettings: {},
     }
   },
   methods: {
-    updateGlobalSettings: function(globalSettings) {
-      this.settingsStore.updateGlobalSettings(globalSettings)
+    loadGlobalSettings: function () {
+      this.globalSettings = {
+        ...this.globalSettings,
+        ...this.settingsStore.globalSettings
+      };
     },
-    setDisplayMarkerFlag: function(displayMarker) {
-      if (displayMarker !== undefined) {
-        let incomingSettings = { displayMarker };
-        const updatedSettings = this.settingsStore.getUpdatedGlobalSettingsKey(incomingSettings);
-        if (updatedSettings.includes('displayMarker')) {
-          this.settingsStore.updateGlobalSettings(incomingSettings);
-          EventBus.emit("markerUpdate");
-        }
+    updateGlobalSettings: function() {
+      const updatedSettings = this.settingsStore.getUpdatedGlobalSettingsKey(this.globalSettings);
+      this.settingsStore.updateGlobalSettings(this.globalSettings);
+
+      // display marker update
+      if (updatedSettings.includes('displayMarker')) {
+        EventBus.emit('markerUpdate');
       }
     },
     titleClicked: function(id) {
@@ -328,8 +377,11 @@ export default {
   mounted: function () {
     this.activeViewRef = shallowRef(this.$refs.activeViewRef);
     this.permalinkRef = shallowRef(this.$refs.permalinkRef);
+    this.globalSettingRef = shallowRef(this.$refs.globalSettingRef);
 
     document.addEventListener('fullscreenchange', this.onFullscreenEsc);
+
+    this.loadGlobalSettings();
   },
   unmounted: function () {
     document.removeEventListener('fullscreenchange', this.onFullscreenEsc);
@@ -444,7 +496,8 @@ export default {
   padding-top:7px;
 }
 
-:deep(.view-icon-popover.el-popper) {
+:deep(.view-icon-popover.el-popper),
+:deep(.setting-popover.el-popper ) {
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   padding: 4px 8px 12px 8px;
@@ -492,5 +545,4 @@ export default {
   top: 0px;
   scale: 0.7;
 }
-
 </style>

src/components/MapContent.vue

@@ -99,17 +99,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    /**
-     * The options to highlight features and paths on maps and scaffolds
-     * when hover over the dataset cards on sidebar.
-     */
-    hoverHighlightOptions: {
-      type: Object,
-      default: () => ({
-        highlightConnectedPaths: false,
-        highlightDOIPaths: false,
-      }),
-    },
   },
   data: function () {
     return {
@@ -255,7 +244,7 @@ export default {
             //  biologicalSex - biological sex to be displayed (PATO)
             //  organ - Target organ, flatmap will conduct a local search
             //          using this
-  
+
             //Look for the key in the available species array,
             //it will use the taxo and biologicalSex as hints.
             const key = findSpeciesKey(state);
@@ -383,7 +372,6 @@ export default {
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
     this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
-    this.settingsStore.updateHoverHighlightOptions(this.hoverHighlightOptions);
   }
 }
 

src/mixins/ContentMixin.js

@@ -465,7 +465,7 @@ export default {
     },
     highlightAnatomies: async function (mapImp, hoverAnatomies, hoverDOI) {
       const itemsToHighlight = [...hoverAnatomies];
-      const hoverHighlightOptions = this.settingsStore.hoverHighlightOptions;
+      const hoverHighlightOptions = this.settingsStore.globalSettings;
 
       // to highlight connected paths
       if (hoverHighlightOptions.highlightConnectedPaths) {

src/stores/settings.js

@@ -30,12 +30,10 @@ export const useSettingsStore = defineStore('settings', {
       useHelpModeDialog: false,
       connectivityInfoSidebar: true,
       annotationSidebar: true,
-      hoverHighlightOptions: {
-        highlightConnectedPaths: false,
-        highlightDOIPaths: false,
-      },
       globalSettings: {
         displayMarker: true,
+        highlightConnectedPaths: false,
+        highlightDOIPaths: false, // comment out to hide in settings
       },
     }
   },
@@ -53,7 +51,7 @@ export const useSettingsStore = defineStore('settings', {
       let updatedSettings = [];
       for (const [key, value] of Object.entries(settings)) {
         const attribute = state.globalSettings[key];
-        if (!attribute || (attribute !== value)) {
+        if (attribute === undefined || (attribute !== value)) {
           updatedSettings.push(key);
         }
       }
@@ -181,9 +179,6 @@ export const useSettingsStore = defineStore('settings', {
     updateAnnotationSidebar(annotationSidebar) {
       this.annotationSidebar = annotationSidebar;
     },
-    updateHoverHighlightOptions(hoverHighlightOptions) {
-      this.hoverHighlightOptions = hoverHighlightOptions;
-    },
     updateGlobalSettings(globalSettings) {
       for (const [key, value] of Object.entries(globalSettings)) {
         this.globalSettings[key] = value;