@abi-software/mapintegratedvuer 1.6.0-sim2-1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.6.0-sim2-1",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,12 +50,13 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.5.5",
-    "@abi-software/map-side-bar": "^2.4.2",
-    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/flatmapvuer": "^1.6.0",
+    "@abi-software/map-side-bar": "^2.5.0",
+    "@abi-software/map-utilities": "^1.2.0",
     "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "^1.4.2",
-    "@abi-software/simulationvuer": "^2.0.7",
+    "@abi-software/scaffoldvuer": "^1.6.1",
+    "@abi-software/simulationvuer": "^1.0.1",
+    "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -96,6 +96,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,
       }
     }
   },

package/src/components/ContentBar.vue

@@ -149,10 +149,22 @@ export default {
     },
     popperOptions: function() {
       return {
-        preventOverflow: {
-          enabled: true,
-          boundary: this.boundariesElement,
-        }
+        modifiers: [
+          {
+            name: 'preventOverflow',
+            options: {
+              boundary: this.boundariesElement,
+            }
+          },
+          {
+            name: 'flip',
+            options: {
+              boundary: this.boundariesElement,
+              flipVariations: false,
+              allowedAutoPlacements: ['bottom'],
+            }
+          },
+        ]
       }
     },
     entries: function() {

package/src/components/ContentVuer.vue

@@ -117,10 +117,11 @@ export default {
       this.$refs.viewer?.searchSuggestions(term, suggestions);
     },
     setPanesBoundary: function() {
-      this.$refs.contentBar?.setBoundary(this.$refs["container"][0]);
+      this.$refs.contentBar?.setBoundary(this.$refs["container"]);
     },
     speciesChanged: function (species) {
       this.activeSpecies = species;
+      this.$emit("species-changed", species);
     },
     receiveSynchronisedEvent: async function (data) {
       this.$refs.viewer?.receiveSynchronisedEvent(data);

package/src/components/DialogToolbarContent.vue

@@ -26,7 +26,7 @@
           <map-svg-icon icon="help" class="sync-help header-icon"/>
         </template>
         <template #default>
-            When in Linked mode the two maps will interact 
+            When in Linked mode the two maps will interact
             <br>
             together. Select an organ in one and it will
             <br>
@@ -279,6 +279,11 @@ export default {
       this.$emit("onFullscreen");
       this.isFullscreen = !this.isFullscreen;
     },
+    onFullscreenEsc: function () {
+      if (!document.fullscreenElement) {
+        this.isFullscreen = false;
+      }
+    },
     close: function() {
       this.$emit("close");
     },
@@ -306,6 +311,11 @@ export default {
   mounted: function () {
     this.activeViewRef = shallowRef(this.$refs.activeViewRef);
     this.permalinkRef = shallowRef(this.$refs.permalinkRef);
+
+    document.addEventListener('fullscreenchange', this.onFullscreenEsc);
+  },
+  unmounted: function () {
+    document.removeEventListener('fullscreenchange', this.onFullscreenEsc);
   },
 };
 </script>
@@ -372,7 +382,7 @@ export default {
   &:hover, &:focus {
     color:#FFFFFF;
     background-color:$app-primary-color;
-    box-shadow: -3px 2px 4px #000000; 
+    box-shadow: -3px 2px 4px #000000;
   }
 }
 

package/src/components/MapContent.vue

@@ -91,6 +91,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * The option to show annotation in sidebar.
+     * Default is `true`. Set `false` to show as popup on map.
+     */
+     annotationSidebar: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {
@@ -305,6 +313,7 @@ export default {
       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
     }
@@ -336,6 +345,7 @@ export default {
     this.isReady = true;
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
+    this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
   }
 }
 

package/src/components/SplitDialog.vue

@@ -15,6 +15,7 @@
         :entry="entry"
         ref="content"
         @resource-selected="resourceSelected"
+        @species-changed="speciesChanged"
         :visible="isIdVisible(entry.id)"
       />
     </div>
@@ -56,6 +57,9 @@ export default {
     resourceSelected: function(result) {
       this.$emit("resource-selected", result);
     },
+    speciesChanged: function (species) {
+      this.$emit("species-changed", species);
+    },
     getClass: function(id) {
       if (this.isIdVisible(id)) {
         return this.getRefsName(id);

package/src/components/SplitFlow.vue

@@ -25,22 +25,30 @@
           :class="['side-bar', { 'start-up': startUp }]"
           :activeTabId="activeDockedId"
           :open-at-start="startUp"
+          :annotationEntry="annotationEntry"
+          :createData="createData"
           :connectivityInfo="connectivityInfo"
-          @connectivity-info-close="onConnectivityInfoClose"
+          @tab-close="onSidebarTabClose"
           @actionClick="actionClick"
           @tabClicked="tabClicked"
           @search-changed="searchChanged($event)"
           @anatomy-in-datasets="updateMarkers($event)"
+          @annotation-submitted="onAnnotationSubmitted"
+          @confirm-create="onConfirmCreate"
+          @cancel-create="onCancelCreate"
+          @confirm-delete="onConfirmDelete"
           @number-of-datasets-for-anatomies="updateScaffoldMarkers($event)"
           @hover-changed="hoverChanged($event)"
           @contextUpdate="contextUpdate($event)"
           @datalink-clicked="datalinkClicked($event)"
           @show-connectivity="onShowConnectivity"
+          @connectivity-component-click="onConnectivityComponentClick"
         />
         <SplitDialog
           :entries="entries"
           ref="splitdialog"
           @resource-selected="resourceSelected"
+          @species-changed="speciesChanged"
         />
       </div>
     </el-main>
@@ -49,6 +57,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { provide, markRaw } from 'vue'
 import Tagging from '../services/tagging.js';
 import DialogToolbarContent from "./DialogToolbarContent.vue";
 import EventBus from "./EventBus";
@@ -61,8 +70,10 @@ import {
   initialDefaultState,
   intersectArrays,
 } from "./scripts/utilities.js";
+import { AnnotationService } from '@abi-software/sparc-annotation'
 import { mapStores } from 'pinia';
 import { useEntriesStore } from '../stores/entries';
+import { useMainStore } from '../stores/index'
 import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import {
@@ -86,6 +97,14 @@ export default {
     SplitDialog,
     SideBar,
   },
+  setup() {
+    const mainStore = useMainStore();
+    provide('userApiKey', mainStore.userToken);
+    const settings = useSettingsStore();
+    let annotator = markRaw(new AnnotationService(`${settings.flatmapAPI}annotator`));
+    provide('$annotator', annotator)
+    return { annotator }
+  },
   props: {
     state: {
       type: Object,
@@ -101,6 +120,12 @@ export default {
       filterTriggered: false,
       availableFacets: [],
       connectivityInfo: null,
+      annotationEntry: {},
+      annotationCallback: undefined,
+      confirmCreateCallback: undefined,
+      cancelCreateCallback: undefined,
+      confirmDeleteCallback: undefined,
+      createData: {},
     }
   },
   watch: {
@@ -276,6 +301,12 @@ export default {
         offset: activeView === 'singlepanel' || activeView === '2horpanel'
       });
     },
+    onConnectivityComponentClick: function (data) {
+      EventBus.emit('connectivity-component-click', {
+        connectivityInfo: this.connectivityInfo,
+        data
+      });
+    },
     hoverChanged: function (data) {
       const hoverAnatomies = data && data.anatomy ? data.anatomy : [];
       const hoverOrgans = data && data.organs ? data.organs : [];
@@ -451,6 +482,11 @@ export default {
         this.$refs.splitdialog.sendSynchronisedEvent(result);
       }
     },
+    speciesChanged: function (species) {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.close();
+      }
+    },
     tabClicked: function ({id, type}) {
       this.activeDockedId = id;
     },
@@ -492,8 +528,29 @@ export default {
         'dataset_id': datasetId || ''
       });
     },
-    onConnectivityInfoClose: function () {
-      EventBus.emit('connectivity-info-close');
+    onAnnotationSubmitted: function(annotation) {
+      if (this.annotationCallback) {
+        this.annotationCallback(annotation);
+      }
+    },
+    onConfirmCreate: function(payload) {
+      if (this.confirmCreateCallback) {
+        this.confirmCreateCallback(payload);
+      }
+    },
+    onCancelCreate: function() {
+      if (this.cancelCreateCallback) {
+        this.cancelCreateCallback();
+      }
+    },
+    onConfirmDelete: function(payload) {
+      if (this.confirmDeleteCallback) {
+        this.confirmDeleteCallback(payload);
+      }
+    },
+    onSidebarTabClose: function (id) {
+      if (id === 2) EventBus.emit('connectivity-info-close');
+      if (id === 3) EventBus.emit('annotation-close', { tabClose: true });
     },
     resetActivePathways: function () {
       const containerEl = this.$el;
@@ -517,6 +574,30 @@ export default {
     EventBus.on("PopoverActionClick", payload => {
       this.actionClick(payload);
     });
+    EventBus.on('annotation-open', payload => {
+      this.annotationEntry = payload.annotationEntry;
+      this.annotationCallback = markRaw(payload.commitCallback);
+      if (!payload.createData) {
+        this.createData = markRaw({});
+      } else {
+        this.createData = markRaw(payload.createData);
+      }
+      this.confirmCreateCallback = markRaw(payload.confirmCreate);
+      this.cancelCreateCallback = markRaw(payload.cancelCreate);
+      this.confirmDeleteCallback = markRaw(payload.confirmDelete);
+      if (this.$refs.sideBar) {
+        this.tabClicked({id: 3, type: 'annotation'});
+        this.$refs.sideBar.setDrawerOpen(true);
+      }
+    });
+    EventBus.on('annotation-close', payload => {
+      this.tabClicked({id:  1, type: 'search'});
+      this.annotationEntry = {};
+      this.createData = {};
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.setDrawerOpen(false);
+      }
+    });
     EventBus.on('connectivity-info-open', payload => {
       this.connectivityInfo = payload;
       if (this.$refs.sideBar) {
@@ -529,6 +610,11 @@ export default {
       this.connectivityInfo = null;
       this.resetActivePathways();
     });
+    EventBus.on('connectivity-graph-error', payload => {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.updateConnectivityGraphError(payload.data);
+      }
+    });
     EventBus.on("OpenNewMap", type => {
       this.openNewMap(type);
     });
@@ -559,6 +645,7 @@ export default {
         PENNSIEVE_API_LOCATION: this.settingsStore.pennsieveApi,
         NL_LINK_PREFIX: this.settingsStore.nlLinkPrefix,
         ROOT_URL: this.settingsStore.rootUrl,
+        FLATMAPAPI_LOCATION: this.settingsStore.flatmapAPI2, // temporary
       };
     },
     entries: function() {

package/src/components/viewers/MultiFlatmap.vue

@@ -14,6 +14,9 @@
       @help-mode-last-item="onHelpModeLastItem"
       @shown-tooltip="onTooltipShown"
       @shown-map-tooltip="onMapTooltipShown"
+      @annotation-open="onAnnotationOpen"
+      @annotation-close="onAnnotationClose"
+      :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-info-close="onConnectivityInfoClose"
       :connectivityInfoSidebar="connectivityInfoSidebar"
@@ -48,6 +51,7 @@ import Tagging from '../../services/tagging.js';
 import ContentMixin from "../../mixins/ContentMixin";
 import EventBus from "../EventBus";
 import {
+  capitalise,
   availableSpecies,
   getBodyScaffoldInfo,
   transformObjToString
@@ -179,7 +183,8 @@ export default {
       const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
       if (term && flatmap.mapImp) {
         const results = flatmap.mapImp.search(term);
-        results.__featureIds.forEach(id => {
+        const featureIds = results.__featureIds || results.featureIds;
+        featureIds.forEach(id => {
           const annotation = flatmap.mapImp.annotation(id);
           if (annotation && annotation.label)
             suggestions.push(annotation.label);
@@ -412,6 +417,138 @@ export default {
       const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
       flatmap.changeViewingMode(modeName);
     },
+    removeConnectivityTooltips: function () {
+      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+      if (flatmap?.$el) {
+        // close all tooltips on the current flatmap element
+        const tooltips = flatmap.$el.querySelectorAll('.flatmap-tooltip-popup');
+        tooltips.forEach(tooltip => tooltip.remove());
+      }
+    },
+    createTooltipForConnectivity: function (filteredConnectivityData, mapImp) {
+      // combine all labels to show together
+      // content type must be DOM object to use HTML
+      const labelsContainer = document.createElement('div');
+      labelsContainer.classList.add('flatmap-feature-label');
+
+      filteredConnectivityData.forEach((connectivity, i) => {
+        const { label } = connectivity;
+        labelsContainer.append(capitalise(label));
+
+        if ((i + 1) < filteredConnectivityData.length) {
+          const hr = document.createElement('hr');
+          labelsContainer.appendChild(hr);
+        }
+      });
+
+      mapImp.showPopup(
+        filteredConnectivityData[0].featureId,
+        labelsContainer,
+        {
+          className: 'custom-popup flatmap-tooltip-popup',
+          positionAtLastClick: false,
+          preserveSelection: true,
+        }
+      );
+    },
+    emitConnectivityGraphError: function (errorData) {
+      if (errorData.length) {
+        const errorDataToEmit = [...new Set(errorData)];
+        let errorMessage = '';
+
+        errorDataToEmit.forEach((connectivity, i) => {
+          const { label } = connectivity;
+          errorMessage += (i === 0) ? capitalise(label) : label;
+
+          if (errorDataToEmit.length > 1) {
+            if ((i + 2) === errorDataToEmit.length) {
+              errorMessage += ' and ';
+            } else if ((i + 1) < errorDataToEmit.length) {
+              errorMessage += ', ';
+            }
+          }
+        });
+        errorMessage += ' cannot be found on the map!';
+        EventBus.emit('connectivity-graph-error', {
+          data: errorMessage
+        });
+      }
+    },
+    showConnectivityTooltips: function (payload) {
+      const { connectivityInfo, data } = payload;
+      const featuresToHighlight = [];
+      const connectivityData = [];
+      const filteredConnectivityData = [];
+      const errorData = [];
+
+      if (!data.length) {
+        this.removeConnectivityTooltips();
+      } else {
+        if (typeof data[0] === 'object') {
+          // Connectivity list hover emits array of objects
+          data.forEach((item) => {
+            connectivityData.push({
+              id: item.id,
+              label: item.name,
+            });
+          })
+        } else {
+          // Connectivity graph node click emits an array of data,
+          // a combination of ids and labels.
+          // The first half is ids and the second half is labels.
+          for (let i = 0; i < data.length / 2; i++) {
+            connectivityData.push({
+              id: data[i],
+              label: data[i + data.length / 2]
+            });
+          }
+        }
+      }
+
+      // to keep the highlighted path on map
+      if (connectivityInfo && connectivityInfo.featureId) {
+        featuresToHighlight.push(...connectivityInfo.featureId);
+      }
+
+      // search the features on the map first
+      if (this.flatmapReady) {
+        const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        if (flatmap.mapImp) {
+          connectivityData.forEach((connectivity, i) => {
+            const {id, label} = connectivity;
+            const response = flatmap.mapImp.search(id);
+
+            if (response?.results.length) {
+              const featureId = response?.results[0].featureId;
+
+              filteredConnectivityData.push({
+                featureId,
+                id,
+                label,
+              });
+              featuresToHighlight.push(id);
+            } else {
+              errorData.push(connectivity);
+            }
+          });
+
+          if (filteredConnectivityData.length) {
+            // show tooltip of the first item
+            // with all labels
+            this.createTooltipForConnectivity(filteredConnectivityData, flatmap.mapImp);
+          } else {
+            errorData.push(...connectivityData);
+            this.removeConnectivityTooltips();
+          }
+
+          // Emit error message for connectivity graph
+          this.emitConnectivityGraphError(errorData);
+
+          // highlight all available features
+          flatmap.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
+        }
+      }
+    },
   },
   computed: {
     facetSpecies() {
@@ -436,6 +573,13 @@ export default {
   },
   mounted: function () {
     this.getFeaturedDatasets();
+
+    EventBus.on('annotation-close', (payload) => {
+      if (payload?.tabClose && this.$refs.multiflatmap.getCurrentFlatmap()) {
+        this.$refs.multiflatmap.getCurrentFlatmap().annotationEventCallback({}, { type: 'aborted' })
+      }
+    });
+
     EventBus.on('show-connectivity', (payload) => {
       const { featureIds, offset } = payload;
       if (this.flatmapReady && this.$refs.multiflatmap) {
@@ -449,6 +593,10 @@ export default {
       }
     });
 
+    EventBus.on('connectivity-component-click', (payload) => {
+      this.showConnectivityTooltips(payload);
+    });
+
     EventBus.on("markerUpdate", () => {
       if (this.flatmapReady) {
         this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);

package/src/components/viewers/Scaffold.vue

@@ -15,6 +15,9 @@
       :helpMode="helpMode"
       :helpModeActiveItem="helpModeActiveItem"
       :helpModeDialog="useHelpModeDialog"
+      @annotation-open="onAnnotationOpen"
+      @annotation-close="onAnnotationClose"
+      :annotationSidebar="annotationSidebar"
       @help-mode-last-item="onHelpModeLastItem"
       @shown-tooltip="onTooltipShown"
       @shown-map-tooltip="onMapTooltipShown"

package/src/mixins/ContentMixin.js

@@ -1,3 +1,4 @@
+import { markRaw } from "vue";
 import {
   getNerveNames,
   getParentsRegion,
@@ -45,6 +46,9 @@ export default {
     connectivityInfoSidebar() {
       return this.settingsStore.connectivityInfoSidebar;
     },
+    annotationSidebar() {
+      return this.settingsStore.annotationSidebar;
+    },
   },
   mounted: function () {
     EventBus.on("startHelp", () => {
@@ -486,6 +490,12 @@ export default {
         }
       }
     },
+    onAnnotationOpen: function (payload) {
+      EventBus.emit('annotation-open', payload);
+    },
+    onAnnotationClose: function () {
+      EventBus.emit('annotation-close');
+    },
     onConnectivityInfoOpen: function (connectivityInfoData) {
       EventBus.emit('connectivity-info-open', connectivityInfoData);
     },
@@ -511,7 +521,7 @@ export default {
       scaffoldRef: null,
       scaffoldLoaded: false,
       isInHelp: false,
-      hoverDelay: undefined
+      hoverDelay: undefined,
     };
   },
   created: function () {

package/src/stores/settings.js

@@ -13,6 +13,7 @@ export const useSettingsStore = defineStore('settings', {
       pennsieveApi: undefined,
       flatmapAPI: undefined,
       nlLinkPrefix: undefined,
+      flatmapAPI2: "https://mapcore-demo.org/curation/flatmap/",
       rootUrl: undefined,
       facets: { species: [], gender: [], organ: [] },
       numberOfDatasetsForFacets: [],
@@ -27,6 +28,7 @@ export const useSettingsStore = defineStore('settings', {
       helpDelay: 0,
       useHelpModeDialog: false,
       connectivityInfoSidebar: true,
+      annotationSidebar: true,
     }
   },
   getters: {
@@ -62,6 +64,9 @@ export const useSettingsStore = defineStore('settings', {
     updateFlatmapAPI(flatmapAPI) {
       this.flatmapAPI = flatmapAPI;
     },
+    updateFlatmapAPI2(flatmapAPI2) {
+      this.flatmapAPI2 = flatmapAPI2;
+    },
     updateNLLinkPrefix(nlLinkPrefix) {
       this.nlLinkPrefix = nlLinkPrefix;
     },
@@ -154,5 +159,8 @@ export const useSettingsStore = defineStore('settings', {
     updateConnectivityInfoSidebar(connectivityInfoSidebar) {
       this.connectivityInfoSidebar = connectivityInfoSidebar;
     },
+    updateAnnotationSidebar(annotationSidebar) {
+      this.annotationSidebar = annotationSidebar;
+    },
   }
 });

package/src/stores/splitFlow.js

@@ -261,7 +261,6 @@ export const useSplitFlowStore = defineStore('splitFlow', {
           customLayout = newState.customLayout;
         } else {
           customLayout = presetLayouts(this.activeView);
-          console.log(newState, customLayout)
           if (newState.slotInfo) {
             for (let i = 0; i < newState.slotInfo.length; i++) {
               switch (newState.slotInfo[i].name) {

package/vite.bundle-build.js

@@ -12,12 +12,11 @@ export default defineConfig((configEnv) => {
       fileName: "mapintegratedvuer",
     },
     rollupOptions: {
-      external: ["vue", "pinia", "@abi-software/simulationvuer"],
+      external: ["vue", "pinia"],
       output: {
         globals: {
           vue: "Vue",
           pinia: "pinia",
-          "@abi-software/simulationvuer": "simulationvuer",
         },
       },
     },

package/dist/Simulation-DpqWobV9.js

@@ -1,22 +0,0 @@
-import { C as i } from "./ContentMixin-BPFt-RUj.js";
-import { SimulationVuer as t } from "@abi-software/simulationvuer";
-import { resolveComponent as e, openBlock as r, createBlock as a } from "vue";
-import { _ as m } from "./index-Fw8GJEyq.js";
-const c = {
-  name: "Simulation",
-  mixins: [i],
-  components: {
-    SimulationVuer: t
-  }
-};
-function p(o, s, u, l, f, _) {
-  const n = e("SimulationVuer");
-  return r(), a(n, {
-    apiLocation: o.apiLocation,
-    id: o.entry.discoverId
-  }, null, 8, ["apiLocation", "id"]);
-}
-const C = /* @__PURE__ */ m(c, [["render", p]]);
-export {
-  C as default
-};