@abi-software/mapintegratedvuer 1.8.0-beta.1 → 1.8.0-isan.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.8.0-beta.1",
+  "version": "1.8.0-isan.1",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,12 +50,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.8.0-beta.0",
-    "@abi-software/map-side-bar": "^2.7.0-beta.0",
-    "@abi-software/map-utilities": "^1.4.0-beta.0",
+    "@abi-software/flatmapvuer": "^1.8.2-isan.6",
+    "@abi-software/map-side-bar": "^2.7.2-isan.7",
+    "@abi-software/map-utilities": "^1.4.3-isan.1",
     "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "^1.8.0-beta.3",
-    "@abi-software/simulationvuer": "1.0.1",
+    "@abi-software/scaffoldvuer": "^1.8.1-isan.0",
+    "@abi-software/simulationvuer": "2.0.9",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
@@ -128,7 +128,8 @@
     ]
   },
   "overrides": {
-    "@abi-software/flatmapvuer": "$@abi-software/flatmapvuer"
+    "@abi-software/flatmapvuer": "$@abi-software/flatmapvuer",
+    "@abi-software/map-utilities": "$@abi-software/map-utilities"
   },
   "browserslist": [
     "> 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,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: {
@@ -104,6 +97,7 @@ export default {
         flatmapAPI: import.meta.env.VITE_FLATMAPAPI_LOCATION,
         nlLinkPrefix: import.meta.env.VITE_NL_LINK_PREFIX,
         rootUrl: import.meta.env.VITE_ROOT_URL,
+        pmrHost: import.meta.env.VITE_PMR_HOST,
       }
     }
   },
@@ -185,14 +179,9 @@ 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)
+      //if (!this.uuid) this.setFlatmap();
+      console.log("map is loaded")
       // map.changeViewingMode('Annotation')
     },
     viewerIsReady: function() {

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

@@ -189,12 +189,17 @@ export default {
       EventBus.emit("RemoveEntryRequest", this.entry.id);
     },
     getEntryTitle: function(entry) {
+      console.log(entry)
       if (entry) {
         let title = entry.label ? entry.label + " ": '';
         let type = entry.type;
         if (type == "Scaffold")
           type = "3D Scaffold";
         title += type;
+        if (type == "Flatmap") {
+          title += " - " + entry.resource;
+        }
+        
         if (entry.datasetId)
           title += " - " + entry.datasetId + "";
         else if (entry.discoverId)
@@ -240,7 +245,6 @@ export default {
           target: value
         });
         this.$nextTick(() => {
-          EventBus.emit('connectivity-info-close');
           setTimeout(() => {
             this.$emit("chooser-changed");
           }, 1200);

package/src/components/DialogToolbarContent.vue

@@ -156,7 +156,60 @@
           <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>
@@ -174,6 +227,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,
@@ -181,6 +235,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";
@@ -196,6 +252,8 @@ export default {
     Icon,
     Input,
     Popover,
+    Radio,
+    RadioGroup,
     Row,
     Switch,
     MapSvgIcon,
@@ -254,7 +312,7 @@ export default {
       let flag = !(value === true);
       if (flag !== this.independent)
         this.independent = flag;
-    }
+    },
   },
   data: function() {
     return {
@@ -265,21 +323,28 @@ 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) {
@@ -328,8 +393,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 +512,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;
@@ -465,6 +534,9 @@ export default {
   top:2px;
   left: calc(50% - 60px);
   position: absolute;
+  display: flex;
+  align-items: center;
+
   .sync-help {
     left:5px;
     stroke: $app-primary-color;
@@ -478,6 +550,7 @@ export default {
   border: 1px solid rgb(220, 223, 230);
   vertical-align: super;
   height: 28px;
+  box-sizing: border-box;
 }
 
 .sync-help {
@@ -488,5 +561,4 @@ export default {
   top: 0px;
   scale: 0.7;
 }
-
-</style>
+</style>

package/src/components/FlatmapContextCard.vue

@@ -65,15 +65,17 @@ export default {
     sckanReleaseDisplay: function() {
       let sckanRelease = "Unknown"
       if(this.mapImpProv){
-        sckanRelease = this.mapImpProv.connectivity?.npo.date
+        sckanRelease = this.mapImpProv.connectivity?.npo?.date
         if (!sckanRelease) {
           let sckanCreated = this.mapImpProv.sckan?.created ? this.mapImpProv.sckan.created : this.mapImpProv.sckan
-          let isoTime = sckanCreated.replace(',', '.') // Date time does not accept commas but Sckan uses them
-          sckanRelease = new Date(isoTime).toLocaleDateString('en-US', {
-              day: '2-digit',
-              month: 'long',
-              year: 'numeric',
-          })
+          if (sckanCreated) {
+            let isoTime = sckanCreated.replace(',', '.') // Date time does not accept commas but Sckan uses them
+            sckanRelease = new Date(isoTime).toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: 'long',
+                year: 'numeric',
+            })
+          }
         }
         if (!sckanRelease) {
           sckanRelease = "Unknown";
@@ -84,7 +86,8 @@ export default {
     sckanReleaseLink: function() {
       let sckanLink = "Unknown"
       if(this.mapImpProv){
-        sckanLink = this.mapImpProv.connectivity?.npo.path
+        console.log(this.mapImpProv.connectivity)
+        sckanLink = this.mapImpProv.connectivity?.npo?.path
         if (!sckanLink) {
           sckanLink = this.mapImpProv.sckan?.release
         }

package/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);
@@ -291,6 +280,7 @@ export default {
           const newView = {
             type: state.type,
             resource: state.resource,
+            data: state.data,
             state: state.state,
             label: state.label
           };
@@ -345,14 +335,15 @@ 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.options.pmrHost ? this.settingsStore.updatePmrHost(this.options.pmrHost) : null;
     }
     this.splitFlowStore?.reset();
     this.splitFlowStore?.getAvailableTerms(this.settingsStore.sparcApi);
@@ -383,7 +374,6 @@ export default {
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
     this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
-    this.settingsStore.updateHoverHighlightOptions(this.hoverHighlightOptions);
   }
 }