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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.7.2",
+  "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.7.3",
-    "@abi-software/map-side-bar": "2.6.3",
-    "@abi-software/map-utilities": "1.3.2",
+    "@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.7.2",
-    "@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

@@ -11,18 +11,19 @@
           :teleported=false
           >
             <div class="options-container">
-              <el-row class="row" :gutter="20">
+              <div class="row">
                 <el-button @click="saveSettings()" size="small">Save Settings</el-button>
                 <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
                 <el-button @click="getShareableURL()" size="small">Get Link</el-button>
-              </el-row>
-              <el-row class="row" :gutter="20">
+              </div>
+              <div class="row">
                 <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
                 <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
                 <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
+                <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-row>
+              </div>
             </div>
             <template #reference>
 
@@ -77,13 +78,13 @@ export default {
       api: import.meta.env.VITE_API_LOCATION,
       mapSettings: [],
       startingMap: "AC",
-      ElIconSetting: shallowRef(ElIconSetting)
+      ElIconSetting: shallowRef(ElIconSetting),
     }
   },
   computed: {
     shareLink: function() {
       if (this.uuid)
-        return this.prefix +"?id=" + this.uuid;
+        return this.prefix +"#/?id=" + this.uuid;
       return this.prefix;
     },
     options: function() {
@@ -96,7 +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,
-        flatmapAPI2: import.meta.env.VITE_FLATMAPAPI_LOCATION2,
+        pmrHost: import.meta.env.VITE_PMR_HOST,
       }
     }
   },
@@ -166,11 +167,21 @@ export default {
         }
       );
     },
+    setWholebody: function() {
+      this.$refs.map.setCurrentEntry(
+        {
+          type: "Scaffold",
+          label: "Human",
+          isBodyScaffold: true
+        }
+      );
+    },
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },
     mapIsLoaded: function(map) {
-      console.log("map is loaded", map)
+      //if (!this.uuid) this.setFlatmap();
+      console.log("map is loaded")
       // map.changeViewingMode('Annotation')
     },
     viewerIsReady: function() {
@@ -206,11 +217,15 @@ export default {
 </script>
 
 <style lang="scss">
+$button-container-size: 50px;
+$gap: 24px;
+
 #app {
   height:100%;
   width: 100%;
   position:absolute;
   font-family: "Asap",sans-serif;
+  background-color: #f5f7fa;
   --el-color-primary: #8300BF;
   --el-color-primary-light-7: #dab3ec;
   --el-color-primary-light-8: #e6ccf2;
@@ -222,14 +237,13 @@ body {
 }
 
 .map-app {
-  position:absolute;
-  height: calc(100% - 104px);
-  width:calc(100% - 54px);
-  margin-top:20px;
-  margin-left:26px;
-  margin-right:26px;
+  margin: 0 auto;
+  width: calc(100% - #{$gap * 2});
+  height: calc(100% - #{$button-container-size + $gap});
   border: solid 1px #dcdfe6;
   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  position: relative;
 }
 
 .popover{
@@ -240,9 +254,16 @@ body {
 }
 
 .row {
-  margin-bottom: 5px;
-  &:last-child {
-    margin-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+
+  + .row {
+    margin-top: 12px;
+  }
+
+  .el-button + .el-button {
+    margin: 0;
   }
 }
 
@@ -250,7 +271,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  height:50px;
+  height: $button-container-size;
 }
 
 

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,10 +323,30 @@ export default {
       failedSearch: undefined,
       activeViewRef: undefined,
       permalinkRef: undefined,
-      ElIconCopyDocument: shallowRef(ElIconCopyDocument)
+      globalSettingRef: undefined,
+      ElIconCopyDocument: shallowRef(ElIconCopyDocument),
+      globalSettings: {},
     }
   },
   methods: {
+    loadGlobalSettings: function () {
+      this.globalSettings = {
+        ...this.globalSettings,
+        ...this.settingsStore.globalSettings
+      };
+    },
+    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);
     },
@@ -315,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);
@@ -431,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;
@@ -452,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;
@@ -465,6 +550,7 @@ export default {
   border: 1px solid rgb(220, 223, 230);
   vertical-align: super;
   height: 28px;
+  box-sizing: border-box;
 }
 
 .sync-help {
@@ -475,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

@@ -27,7 +27,7 @@ import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { findSpeciesKey } from './scripts/utilities.js';
 import { MapSvgSpriteColor} from '@abi-software/svg-sprite';
-import { initialState } from "./scripts/utilities.js";
+import { initialState, getBodyScaffoldInfo } from "./scripts/utilities.js";
 import RetrieveContextCardMixin from "../mixins/RetrieveContextCardMixin.js"
 import {
   ElLoading as Loading
@@ -201,7 +201,7 @@ export default {
      */
     setCurrentEntry: async function(state) {
       if (state && state.type) {
-        if (state.type === "Scaffold" && state.url) {
+        if (state.type === "Scaffold" && (state.url || state.isBodyScaffold)) {
           //State for scaffold containing the following items:
           //  label - Setting the name of the dialog
           //  region - Which region/group currently focusing on
@@ -216,55 +216,71 @@ export default {
             state: state.state,
             viewUrl: state.viewUrl
           };
-          // Add content from scicrunch for the context card
-          const contextCardInfo = await this.retrieveContextCardFromUrl(state.url);
-          newView = {...newView, ...contextCardInfo};
+          if (state.isBodyScaffold) {
+            const data = await getBodyScaffoldInfo(this.options.sparcApi, state.label);
+            newView = { ...newView, ...data.datasetInfo, resource: data.url };
+          } else {
+            // Add content from scicrunch for the context card
+            const contextCardInfo = await this.retrieveContextCardFromUrl(state.url);
+            newView = { ...newView, ...contextCardInfo };
+          }
           this.$refs.flow.createNewEntry(newView);
         } else if (state.type === "MultiFlatmap") {
-          //State for scaffold containing the following items:
-          //  label - Setting the name of the dialog
-          //  taxo - taxo of species to set
-          //  biologicalSex - biological sex to be displayed (PATO)
-          //  organ - Target organ, flatmap will conduct a local search
-          //          using this
+          if (state.resource) {
+            //State for new multiflatmap containing the following items:
+            //  label - Setting the name of the dialog
+            //  resource - the url to metadata
+            //  state - state to restore (viewport)
+            const newView = {
+              type: state.type,
+              resource: state.resource,
+              state: state.state,
+              label: state.label
+            };
+            this.$refs.flow.createNewEntry(newView);
+          } else {
+            //State for multiflatmap containing the following items:
+            //  taxo - taxo of species to set
+            //  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);
-          if (key) {
-            const currentState = this.getState();
-            if (currentState && currentState.entries) {
-              for (let i = 0; i < currentState.entries.length; i++) {
-                const entry =  currentState.entries[i];
-                if (entry.type === "MultiFlatmap") {
-                  entry.resource = key;
-                  entry.state = {species: key};
-                  if (state.organ || state.uuid) {
-                    entry.state.state = { searchTerm: state.organ, uuid: state.uuid };
-                    //if it contains an uuid, use the taxo to help identify if the uuid
-                    //is current
-                    if (state.uuid) entry.state.state.entry = state.taxo;
+            //Look for the key in the available species array,
+            //it will use the taxo and biologicalSex as hints.
+            const key = findSpeciesKey(state);
+            if (key) {
+              const currentState = this.getState();
+              if (currentState && currentState.entries) {
+                for (let i = 0; i < currentState.entries.length; i++) {
+                  const entry = currentState.entries[i];
+                  if (entry.type === "MultiFlatmap") {
+                    entry.resource = key;
+                    entry.state = { species: key };
+                    if (state.organ || state.uuid) {
+                      entry.state.state = { searchTerm: state.organ, uuid: state.uuid };
+                      //if it contains an uuid, use the taxo to help identify if the uuid
+                      //is current
+                      if (state.uuid) entry.state.state.entry = state.taxo;
+                    }
+                    this.$refs.flow.setState(currentState);
+                    //Do not create a new entry, instead set the multiflatmap viewer
+                    //to the primary slot
+                    this.$refs.flow.setIdToPrimaryPane(entry.id);
+                    break;
                   }
-                  this.$refs.flow.setState(currentState);
-                  //Do not create a new entry, instead set the multiflatmap viewer
-                  //to the primary slot
-                  this.$refs.flow.setIdToPrimaryPane(entry.id);
-                  break;
                 }
               }
             }
           }
-        }
-        else if (state.type === "Flatmap") {
-          //State for scaffold containing the following items:
+        } else if (state.type === "Flatmap") {
+          //State for flatmap containing the following items:
           //  label - Setting the name of the dialog
-          //  region - Which region/group currently focusing on
           //  resource - the url to metadata
           //  state - state to restore (viewport)
-          //  viewUrl - relative path of the view file to metadata
           const newView = {
             type: state.type,
             resource: state.resource,
+            data: state.data,
             state: state.state,
             label: state.label
           };
@@ -319,15 +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.flatmapAPI2 ? this.settingsStore.updateFlatmapAPI2(this.options.flatmapAPI2) : 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);