@abi-software/mapintegratedvuer 1.21.1 → 1.22.0

package/src/components/FlatmapContextCard.vue

@@ -1,14 +1,16 @@
 <template>
-  <div v-loading="loading" class="flatmap-context-card" >
+  <div v-loading="loading" class="flatmap-context-card">
     <div class="card-right scrollbar">
       <div class="title">Flatmap Provenance</div>
-        SCKAN version: <a :href="sckanReleaseLink" target="_blank"> {{sckanReleaseDisplay}} </a>
-        <br>
-        Published on:
-        {{flatmapPublishedDisplay}}
-        <br>
-        View publication <a :href="flatmapSource" class="publication-link" target="_blank">here</a>
-      <br/>
+      SCKAN version:
+      <a :href="sckanReleaseLink" target="_blank">{{ sckanReleaseDisplay }}</a>
+      <br />
+      Published on:
+      {{ flatmapPublishedDisplay }}
+      <br />
+      View publication
+      <a :href="flatmapSource" class="publication-link" target="_blank">here</a>
+      <br />
     </div>
 
     <!-- Copy to clipboard button container -->
@@ -18,20 +20,14 @@
   </div>
 </template>
 
-
 <script>
-/* eslint-disable no-alert, no-console */
-import {
-  ElLoading as Loading
-} from "element-plus";
-import { CopyToClipboard } from "@abi-software/map-utilities";
+import { CopyToClipboard } from '@abi-software/map-utilities';
 import tagging from '../services/tagging';
 import '@abi-software/map-utilities/dist/style.css';
 
 export default {
-  name: "FlatmapContextCard",
+  name: 'FlatmapContextCard',
   components: {
-    Loading,
     CopyToClipboard,
   },
   props: {
@@ -51,57 +47,59 @@ export default {
     };
   },
   computed: {
-    flatmapPublishedDisplay: function() {
-      let flatmapPublished = "Unknown"
-      if(this.mapImpProv){
+    flatmapPublishedDisplay: function () {
+      let flatmapPublished = 'Unknown';
+      if (this.mapImpProv) {
         flatmapPublished = new Date(this.mapImpProv.created).toLocaleDateString('en-US', {
-            day: '2-digit',
-            month: 'long',
-            year: 'numeric',
-        })
+          day: '2-digit',
+          month: 'long',
+          year: 'numeric',
+        });
       }
-      return flatmapPublished
+      return flatmapPublished;
     },
-    sckanReleaseDisplay: function() {
-      let sckanRelease = "Unknown"
-      if(this.mapImpProv){
-        sckanRelease = this.mapImpProv.connectivity?.npo?.date
+    sckanReleaseDisplay: function () {
+      let sckanRelease = 'Unknown';
+      if (this.mapImpProv) {
+        sckanRelease = this.mapImpProv.connectivity?.npo?.date;
         if (!sckanRelease) {
-          let sckanCreated = this.mapImpProv.sckan?.created ? this.mapImpProv.sckan.created : this.mapImpProv.sckan
+          let sckanCreated = this.mapImpProv.sckan?.created
+            ? this.mapImpProv.sckan.created
+            : this.mapImpProv.sckan;
           if (sckanCreated) {
-            let isoTime = sckanCreated.replace(',', '.') // Date time does not accept commas but Sckan uses them
+            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',
-            })
+              day: '2-digit',
+              month: 'long',
+              year: 'numeric',
+            });
           }
         }
         if (!sckanRelease) {
-          sckanRelease = "Unknown";
+          sckanRelease = 'Unknown';
         }
       }
-      return sckanRelease
+      return sckanRelease;
     },
-    sckanReleaseLink: function() {
-      let sckanLink = "Unknown"
-      if(this.mapImpProv){
-        sckanLink = this.mapImpProv.connectivity?.npo?.path
+    sckanReleaseLink: function () {
+      let sckanLink = 'Unknown';
+      if (this.mapImpProv) {
+        sckanLink = this.mapImpProv.connectivity?.npo?.path;
         if (!sckanLink) {
-          sckanLink = this.mapImpProv.sckan?.release
+          sckanLink = this.mapImpProv.sckan?.release;
         }
         if (!sckanLink) {
-          sckanLink = "Unknown"
+          sckanLink = 'Unknown';
         }
       }
-      return sckanLink
+      return sckanLink;
     },
-    flatmapSource: function() {
-      let flatmapSource = "Unknown"
-      if(this.mapImpProv){
-        flatmapSource = this.mapImpProv.source
+    flatmapSource: function () {
+      let flatmapSource = 'Unknown';
+      if (this.mapImpProv) {
+        flatmapSource = this.mapImpProv.source;
       }
-      return flatmapSource
+      return flatmapSource;
     },
     updatedCopyContent: function () {
       const contentArray = [];
@@ -132,10 +130,10 @@ export default {
   methods: {
     onCopied: function () {
       tagging.sendEvent({
-        'event': 'interaction_event',
-        'event_name': `portal_maps_context_card_copy`,
-        'category': this.mapImpProv?.id || 'Flatmap Provenance',
-        'location': 'map_toolbar'
+        event: 'interaction_event',
+        event_name: `portal_maps_context_card_copy`,
+        category: this.mapImpProv?.id || 'Flatmap Provenance',
+        location: 'map_toolbar',
       });
     },
   },
@@ -144,9 +142,7 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
-
-.flatmap-context-card{
+.flatmap-context-card {
   background-color: white;
   font-size: 12px;
   position: relative;
@@ -164,11 +160,10 @@ export default {
   cursor: pointer;
 }
 
-.title{
+.title {
   font-weight: bold;
 }
 
-
 .scrollbar::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #f5f5f5;

package/src/components/MapContent.vue

@@ -1,25 +1,24 @@
 <template>
-    <div
-      ref="MapApp"
-      v-loading="!isReady"
-      class="mapcontent"
-      element-loading-text="Loading..."
-      element-loading-background="rgba(0, 0, 0, 0.3)"
-    >
-      <map-svg-sprite-color/>
-      <SplitFlow
-        v-if="isReady"
-        @onFullscreen="onFullscreen"
-        :state="stateToSet"
-        :showLongLabel="showLongLabel"
-        ref="flow"
-        @vue:mounted="flowMounted"
-      />
-    </div>
+  <div
+    ref="MapApp"
+    v-loading="!isReady"
+    class="mapcontent"
+    element-loading-text="Loading..."
+    element-loading-background="rgba(0, 0, 0, 0.3)"
+  >
+    <map-svg-sprite-color />
+    <SplitFlow
+      v-if="isReady"
+      @onFullscreen="onFullscreen"
+      :state="stateToSet"
+      :showLongLabel="showLongLabel"
+      ref="flow"
+      @vue:mounted="flowMounted"
+    />
+  </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
 import { computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import SplitFlow from './SplitFlow.vue';
@@ -28,21 +27,17 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { defaultSpecies, findSpeciesKey } from './scripts/utilities.js';
-import { MapSvgSpriteColor} from '@abi-software/svg-sprite';
-import { initialState, getBodyScaffoldInfo } from "./scripts/utilities.js";
-import RetrieveContextCardMixin from "../mixins/RetrieveContextCardMixin.js"
-import {
-  ElLoading as Loading
-} from "element-plus";
+import { MapSvgSpriteColor } from '@abi-software/svg-sprite';
+import { initialState, getBodyScaffoldInfo } from './scripts/utilities.js';
+import RetrieveContextCardMixin from '../mixins/RetrieveContextCardMixin.js';
 
 /**
  * Content of the app. More work flows will be added here.
  */
 export default {
-  name: "MapContent",
+  name: 'MapContent',
   components: {
     MapSvgSpriteColor,
-    Loading,
     SplitFlow,
   },
   mixins: [RetrieveContextCardMixin],
@@ -52,14 +47,14 @@ export default {
      */
     shareLink: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     /**
      * State containing state of the scaffold.
      */
     state: {
       type: Object,
-      default: undefined
+      default: undefined,
     },
     showLongLabel: {
       type: Boolean,
@@ -79,14 +74,14 @@ export default {
     options: {
       type: Object,
       default: () => ({}),
-      required: true
+      required: true,
     },
     /**
      * New option to start the map in AC, FC or WholeBody.
      */
     startingMap: {
       type: String,
-      default: "AC"
+      default: 'AC',
     },
     /**
      * To use help-mode-dialog when user clicks "Help".
@@ -109,7 +104,7 @@ export default {
      * The option to show annotation in sidebar.
      * Default is `true`. Set `false` to show as popup on map.
      */
-     annotationSidebar: {
+    annotationSidebar: {
       type: Boolean,
       default: true,
     },
@@ -117,7 +112,7 @@ export default {
      * All panes including primary default viewer will be closable
      * when this is set to true.
      */
-     allClosable: {
+    allClosable: {
       type: Boolean,
       default: true,
     },
@@ -137,6 +132,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * The option to open a species from the species dropdown's "open new view"
+     * in a split view. From a single view, it opens as a vertical split on the right.
+     * From a split view, it replaces the other pane's view.
+     * Default is `true`.
+     */
+    openNewSpeciesInSplitView: {
+      type: Boolean,
+      default: true,
+    },
   },
   provide: function () {
     return {
@@ -151,7 +156,7 @@ export default {
       isReady: false,
       initialState: undefined,
       displaySearchFromQuery: '',
-    }
+    };
   },
   methods: {
     /**
@@ -159,31 +164,35 @@ export default {
      * Function to check whether it is in fullscreen mode or not.
      *
      */
-    isFullscreen: function(){
-      return (document.fullscreenElement || document.webkitFullscreenElement ||
-        document.mozFullScreenElement || document.msFullscreenElement )
+    isFullscreen: function () {
+      return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.msFullscreenElement
+      );
     },
     /**
      * @public
      * Function to toggle fullscreen.
      * @arg `fullscreenReq`
      */
-    onFullscreen: function(fullscreenReq) {
+    onFullscreen: function (fullscreenReq) {
       //If a request is sent, try it
-      if (fullscreenReq !== undefined){
-        if (fullscreenReq && !this.isFullscreen()){
-          this.goFullscreen()
+      if (fullscreenReq !== undefined) {
+        if (fullscreenReq && !this.isFullscreen()) {
+          this.goFullscreen();
         }
-        if(!fullscreenReq && this.isFullscreen()){
-          this.leaveFullscreen()
+        if (!fullscreenReq && this.isFullscreen()) {
+          this.leaveFullscreen();
         }
       }
       // Else we toggle fullscreen
-      else{
-        if(this.isFullscreen()){
-          this.leaveFullscreen()
+      else {
+        if (this.isFullscreen()) {
+          this.leaveFullscreen();
         } else {
-          this.goFullscreen()
+          this.goFullscreen();
         }
       }
     },
@@ -191,15 +200,18 @@ export default {
      * @public
      * Function to leave fullscreen mode.
      */
-    leaveFullscreen: function(){
+    leaveFullscreen: function () {
       if (this.isFullscreen()) {
         if (document.exitFullscreen) {
           document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) { /* Firefox */
+        } else if (document.mozCancelFullScreen) {
+          /* Firefox */
           document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+        } else if (document.webkitExitFullscreen) {
+          /* Chrome, Safari and Opera */
           document.webkitExitFullscreen();
-        } else if (document.msExitFullscreen) { /* IE/Edge */
+        } else if (document.msExitFullscreen) {
+          /* IE/Edge */
           document.msExitFullscreen();
         }
 
@@ -211,15 +223,18 @@ export default {
      * @public
      * Function to go to fullscreen mode.
      */
-    goFullscreen: function(){
+    goFullscreen: function () {
       let mapApp = this.$refs.MapApp;
       if (mapApp.requestFullscreen) {
         mapApp.requestFullscreen();
-      } else if (mapApp.mozRequestFullScreen) { /* Firefox */
+      } else if (mapApp.mozRequestFullScreen) {
+        /* Firefox */
         mapApp.mozRequestFullScreen();
-      } else if (mapApp.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+      } else if (mapApp.webkitRequestFullscreen) {
+        /* Chrome, Safari and Opera */
         mapApp.webkitRequestFullscreen();
-      } else if (parent.msRequestFullscreen) { /* IE/Edge */
+      } else if (parent.msRequestFullscreen) {
+        /* IE/Edge */
         mapApp.msRequestFullscreen();
       }
 
@@ -239,7 +254,7 @@ export default {
      *
      * @arg `state`
      */
-    setState: function(state){
+    setState: function (state) {
       return this.$refs.flow.setState(state);
     },
     /**
@@ -250,7 +265,7 @@ export default {
      * state of anonymous annotations.
      * @arg `anonymousAnnotations`
      */
-    getState: function(anonymousAnnotations = false){
+    getState: function (anonymousAnnotations = false) {
       return this.$refs.flow.getState(anonymousAnnotations);
     },
     /**
@@ -261,9 +276,9 @@ export default {
      * instead change the current entry by setting the state.
      * @arg `state`
      */
-    setCurrentEntry: async function(state) {
+    setCurrentEntry: async function (state) {
       if (state && state.type) {
-        if (state.type === "Scaffold" && (state.url || state.isBodyScaffold)) {
+        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
@@ -289,7 +304,7 @@ export default {
             newView = { ...newView, ...contextCardInfo };
           }
           this.$refs.flow.createNewEntry(newView);
-        } else if (state.type === "MultiFlatmap") {
+        } else if (state.type === 'MultiFlatmap') {
           if (state.resource) {
             //State for new multiflatmap containing the following items:
             //  label - Setting the name of the dialog
@@ -303,7 +318,11 @@ export default {
               discoverId: state.dataset_id,
               version: state.dataset_version,
             };
-            this.$refs.flow.createNewEntry(newView);
+            // sourceId is only provided by "open new view" from the species dropdown
+            this.$refs.flow.createNewEntry(newView, {
+              openInSplitView: this.openNewSpeciesInSplitView && state.sourceId !== undefined,
+              sourceId: state.sourceId,
+            });
           } else {
             //State for multiflatmap containing the following items:
             //  taxo - taxo of species to set
@@ -330,7 +349,7 @@ export default {
               if (currentState && currentState.entries) {
                 for (let i = 0; i < currentState.entries.length; i++) {
                   const entry = currentState.entries[i];
-                  if (entry.type === "MultiFlatmap") {
+                  if (entry.type === 'MultiFlatmap') {
                     entry.resource = key;
                     entry.state = { species: key };
                     if (state.organ || state.uuid) {
@@ -352,7 +371,7 @@ export default {
               }
             }
           }
-        } else if (state.type === "Flatmap") {
+        } else if (state.type === 'Flatmap') {
           //State for flatmap containing the following items:
           //  label - Setting the name of the dialog
           //  resource - the url to metadata
@@ -375,7 +394,7 @@ export default {
      * @arg `facets`,
      * @arg `query`
      */
-    openSearch: function(facets, query) {
+    openSearch: function (facets, query) {
       return this.$refs.flow.openSearch(facets, query);
     },
     /**
@@ -387,15 +406,15 @@ export default {
       /**
        * This event emit when the component is mounted.
        */
-      this.$emit("isReady");
+      this.$emit('isReady');
 
       // GA Tagging
       // Page view tracking for maps' buttons click on portal
       // category: AC | FC | WholeBody
       Tagging.sendEvent({
-        'event': 'interaction_event',
-        'event_name': 'portal_maps_page_view',
-        'category': this.startingMap
+        event: 'interaction_event',
+        event_name: 'portal_maps_page_view',
+        category: this.startingMap,
       });
     },
   },
@@ -406,21 +425,25 @@ export default {
     },
   },
   watch: {
-    "shareLink" : {
+    shareLink: {
       handler: function (newLink) {
         this.settingsStore.updateShareLink(newLink);
       },
       immediate: true,
     },
   },
-  beforeMount: function() {
+  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.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.pennsieveApi
+        ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi)
+        : null;
       this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null;
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null;
     }
@@ -428,12 +451,12 @@ export default {
     this.splitFlowStore?.reset();
     this.splitFlowStore?.getAvailableTerms(this.settingsStore.sparcApi);
   },
-  mounted: async function() {
-    EventBus.on("updateShareLinkRequested", (data) => {
+  mounted: async function () {
+    EventBus.on('updateShareLinkRequested', (data) => {
       /**
        * This event emits when the share link is requested.
        */
-      this.$emit("updateShareLinkRequested", data);
+      this.$emit('updateShareLinkRequested', data);
     });
     EventBus.on('trackEvent', (taggingData) => {
       /**
@@ -444,30 +467,34 @@ export default {
     if (!this.state) {
       this.initialState = await initialState(this.startingMap, this.options.sparcApi);
     }
-    EventBus.on("mapLoaded", (map) => {
+    EventBus.on('mapLoaded', (map) => {
       // Check if there is a search term to display
       if (this.displaySearchFromQuery) {
         setTimeout(() => {
-          this.$refs.flow.onDisplaySearch({term: this.displaySearchFromQuery});
+          this.$refs.flow.onDisplaySearch({ term: this.displaySearchFromQuery });
           this.displaySearchFromQuery = ''; // Clear after using it from first load
         });
       }
       /**
        * This event emit when the map is loaded.
        */
-      this.$emit("mapLoaded", map);
+      this.$emit('mapLoaded', map);
+    });
+    // Allow other components to request opening a map via setCurrentEntry
+    EventBus.on('SetCurrentEntry', (entry) => {
+      if (entry) {
+        this.setCurrentEntry(entry);
+      }
     });
     this.isReady = true;
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
     this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
-  }
-}
-
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
 :deep(.el-loading-spinner) {
   .path {
     stroke: $app-primary-color;
@@ -486,19 +513,16 @@ export default {
 
 .mapcontent {
   height: 100%;
-  width:100%;
-  z-index:1;
+  width: 100%;
+  z-index: 1;
 }
-
 </style>
 
 <style lang="scss">
-
 .mapcontent {
-  --el-color-primary: #8300BF;
+  --el-color-primary: #8300bf;
   --el-color-primary-light-7: #dab3ec;
   --el-color-primary-light-8: #e6ccf2;
   --el-color-primary-light-9: #f3e6f9;
 }
-
 </style>

package/src/components/ResizeSensor.vue

@@ -1,24 +1,20 @@
 <template>
-  <div
-    style="height: 100%; width: 100%; position:absolute"
-    ref="display"
-  />
+  <div style="height: 100%; width: 100%; position: absolute" ref="display" />
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import ResizeSensor from "css-element-queries/src/ResizeSensor";
+import ResizeSensor from 'css-element-queries/src/ResizeSensor';
 
 export default {
-  name: "ResizeSensor",
+  name: 'ResizeSensor',
   methods: {
-    activate: function() {
+    activate: function () {
       if (!this._sensor) {
         this._sensor = new ResizeSensor(this.$refs.display, this.displayResize);
         this.displayResize();
       }
     },
-    deactivate: function() {
+    deactivate: function () {
       if (this._sensor) {
         this._sensor.detach(this.$refs.display, this.displayResize);
         delete this._sensor;
@@ -26,8 +22,8 @@ export default {
         this.displayResize();
       }
     },
-    displayResize: function() {
-      this.$emit("resize");
+    displayResize: function () {
+      this.$emit('resize');
     },
   },
   unmounted() {
@@ -41,7 +37,6 @@ export default {
   },
   mounted: function () {
     this.activate();
-  }
+  },
 };
 </script>
-