@abi-software/mapintegratedvuer 1.9.0-beta.0 → 1.9.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.9.0-beta.0",
+  "version": "1.9.0-beta.2",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,11 +50,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.9.0-beta.0",
-    "@abi-software/map-side-bar": "^2.7.3-beta.0",
-    "@abi-software/map-utilities": "^1.5.0-beta.0",
+    "@abi-software/flatmapvuer": "^1.9.0-beta.2",
+    "@abi-software/map-side-bar": "^2.7.3-beta.3",
+    "@abi-software/map-utilities": "^1.5.0-beta.2",
     "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "^1.9.0-beta.0",
+    "@abi-software/scaffoldvuer": "^1.9.0-beta.1",
     "@abi-software/simulationvuer": "1.0.1",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",

package/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,7 @@
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
-        :hoverHighlightOptions="hoverHighlightOptions"
+        :allClosable="false"
         @updateShareLinkRequested="updateUUID"
         @isReady="viewerIsReady"
         @mapLoaded="mapIsLoaded"
@@ -67,10 +65,9 @@ import {
 
 const getAnnotationId = (api, withAnnotation) => {
   return new Promise((resolve) => {
-    let offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || undefined;
-    console.log(withAnnotation)
-    if (withAnnotation && offlineAnnotations) {
-      let maxRetry = 3
+    let anonymousAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || undefined;
+    if (withAnnotation && anonymousAnnotations) {
+      let maxRetry = 3;
       const annotationUrl = api + '/annotation/getshareid';
       const getId = (attempt) => {
         fetch(annotationUrl, {
@@ -78,7 +75,7 @@ const getAnnotationId = (api, withAnnotation) => {
           headers: {
             'Content-type': 'application/json',
           },
-          body: JSON.stringify({ state: offlineAnnotations }),
+          body: JSON.stringify({ state: anonymousAnnotations }),
         }).then((response) => {
           if (response.ok) {
             return response.json();
@@ -89,7 +86,6 @@ const getAnnotationId = (api, withAnnotation) => {
           resolve(data.uuid);
         })
         .catch((error) => {
-          console.log(`Unable to create permalink: attempt ${attempt} of ${maxRetry}`)
           if (maxRetry > attempt) {
             getId(attempt + 1);
           } else {
@@ -106,7 +102,7 @@ const getAnnotationId = (api, withAnnotation) => {
 
 const getAnnotationState = (api, annotationId) => {
   return new Promise((resolve) => {
-    let maxRetry = 3
+    let maxRetry = 3;
     const annotationUrl = api + '/annotation/getstate';
     const getState = (attempt) => {
       fetch(annotationUrl, {
@@ -117,16 +113,15 @@ const getAnnotationState = (api, annotationId) => {
         body: JSON.stringify({ uuid: annotationId }),
       }).then((response) => {
         if (response.ok) {
-          return response.json()
+          return response.json();
         }
-        throw new Error('Unsuccessful attempt to get annotations')
+        throw new Error('Unsuccessful attempt to get annotations');
       })
       .then((data) => {
         resolve(data);
       })
       .catch((error) => {
-        console.log(error)
-        console.log(`Unable to get annotation state: attempt ${attempt} of ${maxRetry}`)
+        console.log(`Unable to get annotation state: attempt ${attempt} of ${maxRetry}`);
         if (maxRetry > attempt) {
           getState(attempt + 1);
         } else {
@@ -156,10 +151,6 @@ export default {
       mapSettings: [],
       startingMap: "AC",
       ElIconSetting: shallowRef(ElIconSetting),
-      hoverHighlightOptions: {
-        highlightConnectedPaths: true,
-        highlightDOIPaths: false,
-      },
     }
   },
   computed: {
@@ -225,7 +216,6 @@ export default {
         if (annotationId) {
           state.annotationId = annotationId;
         }
-        console.log(state)
         getShareLink(1)
       });
 
@@ -281,12 +271,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')
@@ -313,7 +297,6 @@ export default {
                 if (state?.state?.annotationId) {
                   getAnnotationState(this.api, state.state.annotationId).
                   then((data) => {
-                    console.log(data)
                     if (data) {
                       sessionStorage.setItem('anonymous-annotation', JSON.stringify(data.state))
                     }
@@ -322,8 +305,6 @@ export default {
                 } else {
                   this.state = state.state;
                 }
-                
-                console.log(state)
               }
           }
           xmlhttp.send(JSON.stringify({"uuid": this.uuid}));

package/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,

package/src/components/ContentBar.vue

@@ -65,7 +65,7 @@
         :teleported=false trigger="hover" popper-class="header-popper" >
         <template #reference>
           <map-svg-icon icon="close" class="header-icon"
-            v-show="(activeView !== 'singlepanel') && (entry.mode !== 'main')"
+            v-show="(activeView !== 'singlepanel') && ((entry.mode !== 'main') || allClosable )"
             @click="closeAndRemove()"/>
           </template>
       </el-popover>
@@ -131,6 +131,9 @@ export default {
   },
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore),
+    allClosable() {
+      return this.settingsStore.allClosable;
+    },
     helpDelay() {
       return this.settingsStore.helpDelay;
     },
@@ -240,7 +243,6 @@ export default {
           target: value
         });
         this.$nextTick(() => {
-          EventBus.emit('connectivity-info-close');
           setTimeout(() => {
             this.$emit("chooser-changed");
           }, 1200);

package/src/components/DialogToolbarContent.vue

@@ -209,6 +209,62 @@
           <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.displayMarkers"
+              @change="updateGlobalSettings"
+            >
+              Display Map Markers
+            </el-checkbox>
+            <p>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>
+            <p>Interactive Mode</p>
+            <el-radio-group
+              v-model="globalSettings.interactiveMode"
+              @change="updateGlobalSettings"
+            >
+              <el-radio value="dataset">Dataset Exploration</el-radio>
+              <el-radio value="connectivity">Connectivity Exploration</el-radio>
+              <el-radio value="multiscale">Multiscale Model</el-radio>
+            </el-radio-group>
+          </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>
@@ -226,6 +282,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,
@@ -233,6 +290,8 @@ import {
   ElIcon as Icon,
   ElInput as Input,
   ElPopover as Popover,
+  ElRadio as Radio,
+  ElRadioGroup as RadioGroup,
   ElRow as Row,
   ElSwitch as Switch,
 } from "element-plus";
@@ -248,6 +307,8 @@ export default {
     Icon,
     Input,
     Popover,
+    Radio,
+    RadioGroup,
     Row,
     Switch,
     MapSvgIcon,
@@ -306,7 +367,7 @@ export default {
       let flag = !(value === true);
       if (flag !== this.independent)
         this.independent = flag;
-    }
+    },
   },
   data: function() {
     return {
@@ -317,23 +378,32 @@ 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('displayMarkers')) {
+        EventBus.emit('markerUpdate');
+      }
+      if (updatedSettings.includes('interactiveMode')) {
+        EventBus.emit('modeUpdate', this.globalSettings.interactiveMode);
       }
     },
+    */
     titleClicked: function(id) {
       this.$emit("titleClicked", id);
     },
@@ -387,8 +457,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);
@@ -515,7 +588,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;
@@ -563,5 +637,4 @@ export default {
   top: 0px;
   scale: 0.7;
 }
-
-</style>
+</style>

package/src/components/MapContent.vue

@@ -100,15 +100,12 @@ export default {
       default: true,
     },
     /**
-     * The options to highlight features and paths on maps and scaffolds
-     * when hover over the dataset cards on sidebar.
+     * All panes including primary default viewer will be closable
+     * when this is set to true.
      */
-    hoverHighlightOptions: {
-      type: Object,
-      default: () => ({
-        highlightConnectedPaths: false,
-        highlightDOIPaths: false,
-      }),
+     allClosable: {
+      type: Boolean,
+      default: true,
     },
   },
   data: function () {
@@ -210,12 +207,12 @@ export default {
      * @public
      * Get the current state of the map viewer, these states can be used to
      * restore settings and viewers using the setState method.
-     * Set offlineAnnotations to true if the user would like to perserve the
-     * state of offline annotations.
-     * @arg `offlineAnnotations` 
+     * Set anonymousAnnotations to true if the user would like to perserve the
+     * state of anonymous annotations.
+     * @arg `anonymousAnnotations` 
      */
-    getState: function(offlineAnnotations = false){
-      return this.$refs.flow.getState(offlineAnnotations);
+    getState: function(anonymousAnnotations = false){
+      return this.$refs.flow.getState(anonymousAnnotations);
     },
     /**
      * @public
@@ -270,7 +267,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);
@@ -360,15 +357,16 @@ export default {
   beforeMount: function() {
     if (this.options) {
       // Split options prop up to commit to the store
-      this.options.sparcApi ? this.settingsStore.updateSparcAPI(this.options.sparcApi) : null
-      this.options.algoliaIndex ? this.settingsStore.updateAlgoliaIndex(this.options.algoliaIndex) : null
-      this.options.algoliaKey ? this.settingsStore.updateAlgoliaKey(this.options.algoliaKey) : null
-      this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null
-      this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null
-      this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null,
-      this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null
-      this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null
+      this.options.sparcApi ? this.settingsStore.updateSparcAPI(this.options.sparcApi) : null;
+      this.options.algoliaIndex ? this.settingsStore.updateAlgoliaIndex(this.options.algoliaIndex) : null;
+      this.options.algoliaKey ? this.settingsStore.updateAlgoliaKey(this.options.algoliaKey) : null;
+      this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null;
+      this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null;
+      this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null;
+      this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null;
+      this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null;
     }
+    this.settingsStore.updateAllClosable(this.allClosable);
     this.splitFlowStore?.reset();
     this.splitFlowStore?.getAvailableTerms(this.settingsStore.sparcApi);
   },
@@ -398,7 +396,6 @@ export default {
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
     this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
-    this.settingsStore.updateHoverHighlightOptions(this.hoverHighlightOptions);
   }
 }