@abi-software/mapintegratedvuer 1.16.3-simulation.1 → 1.17.0

package/src/components/scripts/utilities.js

@@ -6,7 +6,7 @@ const initialDefaultState = () => {
       {
         resource: defaultSpecies,
         type: "MultiFlatmap",
-        // mode: "main",
+        mode: "main",
         id: 1,
         state: undefined,
         label: "",
@@ -50,6 +50,15 @@ const getNewMapEntry = async (type, sparcApi) => {
       version: data.datasetInfo.version,
       isBodyScaffold: true,
     };
+  } else if (type === "CG") {
+    entry = {
+      resource: "ConnectivityGraph",
+      type: "ConnectivityGraph",
+      mode: "main",
+      state: undefined,
+      label: "Connectivity Graph",
+      discoverId: undefined
+    }
   }
 
   return entry;
@@ -190,7 +199,13 @@ const transformStringToObj = (str) => {
   return obj;
 };
 
+const listsAreEqual = (a, b) => {
+  if (a.length !== b.length) return false;
+  return JSON.stringify([...a].sort()) === JSON.stringify([...b].sort());
+};
+
 export {
+  listsAreEqual,
   availableSpecies,
   capitalise,
   findSpeciesKey,

package/src/components/viewers/ConnectivityGraph.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="viewer-container">
+    <MapUtilitiesConnectivityGraph
+      :entry="graphEntry"
+      :mapServer="mapServer"
+      :sckanVersion="sckanVersion"
+      :connectivityFromMap="connectivityFromMap"
+      :connectivityError="connectivityError"
+      :origins="origins"
+      :components="components"
+      :destinations="destinations"
+      :originsWithDatasets="originsWithDatasets"
+      :componentsWithDatasets="componentsWithDatasets"
+      :destinationsWithDatasets="destinationsWithDatasets"
+      :hasSingleConnectivityList="hasSingleConnectivityList"
+      :originsCombinations="originsCombinations"
+      :componentsCombinations="componentsCombinations"
+      :destinationsCombinations="destinationsCombinations"
+      @tap-node="onTapNode"
+    />
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import {
+  ConnectivityGraph as MapUtilitiesConnectivityGraph,
+} from '@abi-software/map-utilities';
+import ContentMixin from "../../mixins/ContentMixin";
+import EventBus from '../EventBus';
+
+export default {
+  name: "ConnectivityGraph",
+  mixins: [ ContentMixin ],
+  components: {
+    MapUtilitiesConnectivityGraph,
+  },
+  computed: {
+    graphEntry() {
+      return this.entry.resource;
+    },
+    connectivityError() {
+      return {};
+    },
+    connectivityFromMap() {
+      return this.entry.graphPayload?.connectivityFromMap || null;
+    },
+    origins() {
+      return this.entry.graphPayload?.origins || [];
+    },
+    components() {
+      return this.entry.graphPayload?.components || [];
+    },
+    destinations() {
+      return this.entry.graphPayload?.destinations || [];
+    },
+    originsWithDatasets() {
+      return this.entry.graphPayload?.originsWithDatasets || [];
+    },
+    componentsWithDatasets() {
+      return this.entry.graphPayload?.componentsWithDatasets || [];
+    },
+    destinationsWithDatasets() {
+      return this.entry.graphPayload?.destinationsWithDatasets || [];
+    },
+    hasSingleConnectivityList() {
+      return this.entry.graphPayload?.hasSingleConnectivityList || false;
+    },
+    originsCombinations() {
+      return this.entry.graphPayload?.originsCombinations || [];
+    },
+    componentsCombinations() {
+      return this.entry.graphPayload?.componentsCombinations || [];
+    },
+    destinationsCombinations() {
+      return this.entry.graphPayload?.destinationsCombinations || [];
+    },
+    mapServer() {
+      return this.entry.mapServer || null;
+    },
+    sckanVersion() {
+      return this.entry.sckanVersion || null;
+    },
+  },
+  methods: {
+    onTapNode: function (data) {
+      const name = data.map(t => t.label).join(', ');
+      this.onConnectivityHovered(name);
+
+      // Hover outside of node area
+      if (!name) {
+        EventBus.emit('show-connectivity', {
+          featureIds: [this.entry.resource]
+        });
+      }
+
+    },
+    onConnectivityHovered: function (label) {
+      const payload = {
+        connectivityInfo: this.graphEntry,
+        label: label,
+        data: label ? this.getConnectivityDatasets(label) : [],
+      };
+      EventBus.emit('connectivity-hovered', payload);
+    },
+    getConnectivityDatasets: function (label) {
+      const allWithDatasets = this.entry.graphPayload?.allWithDatasets || [];
+      const names = label.split(',');
+      let data = [];
+      names.forEach((n) => {
+        const foundData = allWithDatasets.find((a) =>
+          a.name.toLowerCase().trim() === n.toLowerCase().trim()
+        );
+        if (foundData) {
+          data.push({
+            id: foundData.id,
+            label: foundData.name
+          });
+        }
+      });
+      return data
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  .connectivity-graph {
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+
+    :deep(.graph-canvas) {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

package/src/components/viewers/Flatmap.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="viewer-container" ref="container">
-    <resize-sensor @resize="calculateOffset()"> </resize-sensor>
+  <div class="viewer-container">
     <FlatmapVuer
       :state="entry.state"
       :entry="entry.resource"
@@ -43,7 +42,6 @@
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
       @trackEvent="trackEvent"
-      @open-simulation="onSimulationOpen"
     />
 
     <HelpModeDialog
@@ -54,118 +52,83 @@
       @show-next="onHelpModeShowNext"
       @finish-help-mode="onFinishHelpMode"
     />
-
-    <FloatingWindow
-      v-for="win in plotWindows"
-      :key="win.id"
-      :windowData="win"
-      :offsetX="left"
-      :offsetY="top"
-      @closeWindow="handleClosePlotWindow"
-      @mouseDown="bringToFront"
-    >
-      <PlotComponent :data="win.data" />
-    </FloatingWindow>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue'
-import { useMouseInElement } from '@vueuse/core'
-
 /* eslint-disable no-alert, no-console */
-import Tagging from '../../services/tagging.js'
-import EventBus from '../EventBus'
-import ContentMixin from '../../mixins/ContentMixin'
-import DynamicMarkerMixin from '../../mixins/DynamicMarkerMixin'
-import ResizeSensor from '../ResizeSensor.vue'
-import { FlatmapVuer } from '@abi-software/flatmapvuer'
-import '@abi-software/flatmapvuer/dist/style.css'
+import Tagging from '../../services/tagging.js';
+import EventBus from "../EventBus";
+import ContentMixin from "../../mixins/ContentMixin";
+import DynamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
+
+import { FlatmapVuer } from "@abi-software/flatmapvuer";
+import "@abi-software/flatmapvuer/dist/style.css";
 import { HelpModeDialog } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
-import { useSimulationPlotStore } from '../../stores/simulationPlotStore'
-
-import PlotComponent from '../PlotComponent.vue'
-import FloatingWindow from '../FloatingWindow.vue'
-import { useMappingStore } from '../../stores/mapping'
-
-const BASE_Z_INDEX = 100
 
 export default {
-  name: 'Flatmap',
-  mixins: [ContentMixin, DynamicMarkerMixin],
+  name: "Flatmap",
+  mixins: [ ContentMixin, DynamicMarkerMixin ],
   components: {
     FlatmapVuer,
     HelpModeDialog,
-    ResizeSensor,
-  },
-  setup() {
-    // const flatmap = ref(null)
-    const container = ref(null)
-    const simulationPlotStore = useSimulationPlotStore()
-    const mappingStore = useMappingStore()
-    mappingStore.initializeMapping()
-    const { elementX, elementY } = useMouseInElement(container)
-    return { container, elementX, elementY, mappingStore, simulationPlotStore }
   },
   data: function () {
     return {
       flatmapReady: false,
       displayMinimap: false,
-      zStack: [],
-      left: 0,
-      top: 0,
     }
   },
   methods: {
     getState: function () {
-      return this.$refs.flatmap.getState()
+      return this.$refs.flatmap.getState();
     },
     /**
      * Perform a local search on this contentvuer
      * This is similar to directly clicking onthe map
      */
     search: function (term) {
-      return this.$refs.flatmap.searchAndShowResult(term, true, true)
+      return this.$refs.flatmap.searchAndShowResult(term, true, true);
     },
     getFlatmapImp() {
-      return this.$refs.flatmap?.mapImp
+      return this.$refs.flatmap?.mapImp;
     },
     contextRestored(flatmap) {
-      this.flatmapReadyForMarkerUpdates(flatmap)
-      this.updateViewerSettings()
+      this.flatmapReadyForMarkerUpdates(flatmap);
+      this.updateViewerSettings();
     },
     flatmapReadyCall: function (flatmap) {
-      this.flatmapReady = true
-      const mapImp = this.getFlatmapImp()
+      this.flatmapReady = true;
+      const mapImp = this.getFlatmapImp();
       if (mapImp?.mapMetadata?.name) {
-        this.updateEntryLabel(mapImp?.mapMetadata?.name)
-        this.updateEntryTitle(mapImp?.mapMetadata?.name)
+        this.updateEntryLabel(mapImp?.mapMetadata?.name);
+        this.updateEntryTitle(mapImp?.mapMetadata?.name);
       }
-      let provClone = { id: this.entry.id, prov: mapImp.mapMetadata } //create clone of provenance and add id
-      EventBus.emit('mapImpProv', provClone) // send clone to context card
-      this.$emit('flatmap-provenance-ready', provClone)
-      this.flatmapReadyForMarkerUpdates(flatmap)
-      this.updateViewerSettings()
+      let provClone = {id: this.entry.id, prov: mapImp.mapMetadata}; //create clone of provenance and add id
+      EventBus.emit("mapImpProv", provClone); // send clone to context card
+      this.$emit("flatmap-provenance-ready", provClone);
+      this.flatmapReadyForMarkerUpdates(flatmap);
+      this.updateViewerSettings();
       // Wait for flatmap's connectivity to load before emitting mapLoaded
       this.loadConnectivityExplorerConfig(flatmap).then(() => {
-        EventBus.emit('mapLoaded', flatmap)
-      })
+        EventBus.emit("mapLoaded", flatmap);
+      });
     },
     onPathwaySelectionChanged: function (data) {
-      const { label, property, checked, selectionsTitle } = data
+      const { label, property, checked, selectionsTitle } = data;
       // GA Tagging
       // Event tracking for maps' pathway selection change
       Tagging.sendEvent({
-        event: 'interaction_event',
-        event_name: 'portal_maps_pathway_change',
-        category: label + ' [' + property + '] ' + checked,
-        location: selectionsTitle,
-      })
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_pathway_change',
+        'category': label + ' [' + property + '] ' + checked,
+        'location': selectionsTitle
+      });
     },
-    onSidebarAnnotationClose: function () {
+    onSidebarAnnotationClose: function() {
       if (this.flatmapReady) {
-        const currentFlatmap = this.$refs.flatmap
+        const currentFlatmap = this.$refs.flatmap;
         if (currentFlatmap) {
           this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
         }
@@ -176,132 +139,117 @@ export default {
      */
     searchSuggestions: function (term, suggestions) {
       if (term && this.$refs.flatmap.mapImp) {
-        const results = this.$refs.flatmap.mapImp.search(term)
-        const featureIds = results.__featureIds || results.featureIds
-        featureIds.forEach((id) => {
-          const annotation = this.$refs.flatmap.mapImp.annotation(id)
-          if (annotation && annotation.label) suggestions.push(annotation.label)
-        })
+        const results = this.$refs.flatmap.mapImp.search(term);
+        const featureIds = results.__featureIds || results.featureIds;
+        featureIds.forEach(id => {
+          const annotation = this.$refs.flatmap.mapImp.annotation(id);
+          if (annotation && annotation.label)
+            suggestions.push(annotation.label);
+        });
       }
     },
     showConnectivity: function (payload) {
       if (this?.alive) {
-        const { featureIds, offset } = payload
-        const currentFlatmap = this.$refs.flatmap
+        const { featureIds, offset } = payload;
+        const currentFlatmap = this.$refs.flatmap;
         if (currentFlatmap) {
           currentFlatmap.moveMap(featureIds, {
             offsetX: offset ? -150 : 0,
             zoom: 4,
-          })
+          });
         }
       }
     },
     showConnectivityTooltips: function (payload) {
       if (this?.alive && this.flatmapReady) {
-        const flatmap = this.$refs.multiflatmap.getCurrentFlatmap()
-        flatmap.showConnectivityTooltips(payload)
+        const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        flatmap.showConnectivityTooltips(payload);
       }
     },
     showConnectivitiesByReference: function (payload) {
       if (this?.alive) {
-        const currentFlatmap = this.$refs.flatmap
+        const currentFlatmap = this.$refs.flatmap;
         if (currentFlatmap) {
-          currentFlatmap.showConnectivitiesByReference(payload)
+          currentFlatmap.showConnectivitiesByReference(payload);
         }
       }
     },
     changeConnectivitySource: function (payload, ongoingSource) {
       if (this?.alive && this.flatmapReady) {
-        const flatmap = this.$refs.flatmap
-        const flatmapUUID = flatmap.mapImp.mapMetadata.uuid
+        const flatmap = this.$refs.flatmap;
+        const flatmapUUID = flatmap.mapImp.mapMetadata.uuid;
         if (!ongoingSource.includes(flatmapUUID)) {
-          ongoingSource.push(flatmapUUID)
-          flatmap.changeConnectivitySource(payload)
+          ongoingSource.push(flatmapUUID);
+          flatmap.changeConnectivitySource(payload);
         }
       }
     },
-    zoomToFeatures: function (info, forceSelect) {
-      let name = info.name
-      const flatmap = this.$refs.flatmap.mapImp
+    zoomToFeatures: function(info, forceSelect) {
+      let name = info.name;
+      const flatmap = this.$refs.flatmap.mapImp;
       if (name) {
-        const results = flatmap.search(name)
+        const results = flatmap.search(name);
         if (results.featureIds.length) {
-          let externalId = flatmap.modelForFeature(results.featureIds[0])
+          let externalId = flatmap.modelForFeature(results.featureIds[0]);
           if (externalId) {
             if (forceSelect) {
-              flatmap.selectFeatures(externalId)
+              flatmap.selectFeatures(externalId);
             }
-            flatmap.zoomToFeatures(externalId)
-          } else flatmap.clearSearchResults()
+            flatmap.zoomToFeatures(externalId);
+          } else flatmap.clearSearchResults();
         }
       } else {
-        flatmap.clearSearchResults()
+        flatmap.clearSearchResults();
       }
     },
     changeViewingMode: function (modeName) {
-      this.$refs.flatmap.changeViewingMode(modeName)
+      this.$refs.flatmap.changeViewingMode(modeName);
     },
     updateViewerSettings: function () {
-      const { backgroundDisplay, viewingMode, flightPathDisplay, organsDisplay, outlinesDisplay, connectionType } =
-        this.settingsStore.globalSettings
+      const {
+        backgroundDisplay,
+        viewingMode,
+        flightPathDisplay,
+        organsDisplay,
+        outlinesDisplay,
+        connectionType,
+      } = this.settingsStore.globalSettings;
 
-      const currentFlatmap = this.$refs.flatmap
+      const currentFlatmap = this.$refs.flatmap;
 
-      currentFlatmap.changeViewingMode(viewingMode)
-      currentFlatmap.setFlightPath3D(flightPathDisplay)
-      currentFlatmap.setColour(organsDisplay)
-      currentFlatmap.setOutlines(outlinesDisplay)
-      currentFlatmap.backgroundChangeCallback(backgroundDisplay)
-      currentFlatmap.setConnectionType(connectionType)
+      currentFlatmap.changeViewingMode(viewingMode);
+      currentFlatmap.setFlightPath3D(flightPathDisplay);
+      currentFlatmap.setColour(organsDisplay);
+      currentFlatmap.setOutlines(outlinesDisplay);
+      currentFlatmap.backgroundChangeCallback(backgroundDisplay);
+      currentFlatmap.setConnectionType(connectionType);
     },
     setVisibilityFilter: function (payload) {
       if (this?.alive) {
-        const currentFlatmap = this.$refs.flatmap
+        const currentFlatmap = this.$refs.flatmap;
         if (currentFlatmap) {
-          currentFlatmap.setVisibilityFilter(payload)
+          currentFlatmap.setVisibilityFilter(payload);
         }
       }
     },
     getKnowledgeTooltip: async function (payload) {
       if (this?.alive) {
-        const currentFlatmap = this.$refs.flatmap
+        const currentFlatmap = this.$refs.flatmap;
         if (currentFlatmap) {
           // This is for expanding connectivity card
           // The length of payload.data should always be 1
-          const data = payload.data[0]
-          currentFlatmap.searchAndShowResult(data.id, true, false)
+          const data = payload.data[0];
+          currentFlatmap.searchAndShowResult(data.id, true, false);
         }
       }
     },
-    onSimulationOpen: function (simulation) {
-      EventBus.emit('simulation-open-clicked', {...simulation, requesterEntryId: this.entry.id})
-    },
-    handleClosePlotWindow: function (windowId) {
-      this.simulationPlotStore.removeWindow(windowId)
-    },
-    bringToFront: function (windowId) {
-      this.simulationPlotStore.bringToFront(windowId, this.calculateOffset())
-    },
-    calculateOffset: function () {
-      const element = this.$refs.container
-      if (!element) return
-      const rect = element.getBoundingClientRect()
-      this.top = rect.top
-      this.left = rect.left
-    },
-    onResize: function () {
-      this.calculateOffset()
-    },
   },
   computed: {
     facetSpecies() {
-      return this.settingsStore.facets.species
-    },
-    plotWindows() {
-      return this.simulationPlotStore.windows.filter((win) => win.ownerId === this.entry.id)
+      return this.settingsStore.facets.species;
     },
   },
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

package/src/components/viewers/MultiFlatmap.vue

@@ -70,7 +70,7 @@ import DyncamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
 import YellowStar from "../../icons/yellowstar";
 
 import { MultiFlatmapVuer } from "@abi-software/flatmapvuer";
-// import "@abi-software/flatmapvuer/dist/style.css";
+import "@abi-software/flatmapvuer/dist/style.css";
 import { HelpModeDialog } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 
@@ -88,6 +88,10 @@ const getOpenMapOptions = (species) => {
       display: "Open 3D Human Map",
       key: "3D"
     },
+    {
+      display: "Open Connectivity Graph",
+      key: "CG"
+    },
   ]
   return options;
 }
@@ -228,9 +232,6 @@ export default {
           this.speciesHasChanged = true;
         }
       }
-
-
-
       // GA Tagging
       // Event tracking for maps' species change
       Tagging.sendEvent({
@@ -270,6 +271,9 @@ export default {
       };
       EventBus.emit("PopoverActionClick", returnedAction);
     },
+    flatmapIsReady() {
+      return this.flatmapReady;
+    },
     restoreFeaturedMarkers: function (flatmap) {
 
       this.settingsStore.resetFeaturedMarkerIdentifier();
@@ -464,4 +468,4 @@ export default {
 
 </style>
 
-<style src="../../assets/mapicon-species-style.css"></style>
+<style src="../../assets/mapicon-species-style.css"></style>

package/src/components/viewers/Simulation.vue

@@ -1,80 +1,29 @@
 <template>
-  <SimulationVuer :apiLocation="apiLocation" :id="id" ref="simulation" @data-notification="handleDataNotification" />
+  <SimulationVuer
+    :apiLocation="apiLocation"
+    :id="id"
+    ref="simulation"
+  />
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-import EventBus from '../EventBus'
-import ContentMixin from '../../mixins/ContentMixin'
-import { SimulationVuer } from '@abi-software/simulationvuer'
-import '@abi-software/simulationvuer/dist/style.css'
+import ContentMixin from "../../mixins/ContentMixin";
+import { SimulationVuer } from "@abi-software/simulationvuer";
+import "@abi-software/simulationvuer/dist/style.css";
 
 export default {
-  name: 'Simulation',
-  mixins: [ContentMixin],
+  name: "Simulation",
+  mixins: [ ContentMixin ],
   components: {
     SimulationVuer,
   },
   computed: {
-    id: function () {
+    id: function() {
       //resource field is only available for simulation omex file and it will run locally.
       //discoverId field is used for simulations running on O2SPARC.
-      return this.entry.resource ? this.entry.resource : this.entry.discoverId
-    },
-  },
-  methods: {
-    handleDataNotification: function (update) {
-      EventBus.emit('simulation-response', update)
-    },
-    handleDataRequest(payload) {
-      this.processRequest(payload);
-    },
-    handleWindowClosed(payload) {
-      this.$refs.simulation?.removeDataSubscription(payload.id);
-    },
-    processRequest: function (req) {
-      // strict check against the literal type
-      if (req.id !== 'nz.ac.auckland.simulation-data-request') return
-
-      const requestMajorVersion = parseInt(req.version.split('.')[0])
-      if (requestMajorVersion !== 0) {
-        console.warn('Unsupported simulation request version:', req.version)
-        return
-      }
-
-      if (req.payload.protocol?.resource !== this.id) {
-        return
-      }
-
-      this.$refs.simulation?.addDataSubscription({
-        id: req.id,
-        version: req.version,
-        payload: {
-          windowId: req.payload.windowId,
-          ownerId: req.payload.ownerId,
-          component: req.payload.component,
-          variable: req.payload.variable,
-          withVOI: true,
-        },
-      })
-    },
-  },
-  mounted: function () {
-    EventBus.on('simulation-data-request', this.handleDataRequest)
-    EventBus.on('plot-window-closed', this.handleWindowClosed)
-
-    EventBus.emit('simulation-ready', {
-      resourceId: this.id,
-      ready: true,
-    })
-  },
-  beforeUnmount: function () {
-    EventBus.emit('simulation-ready', {
-      resourceId: this.id,
-      ready: false,
-    })
-    EventBus.off('simulation-data-request', this.handleDataRequest)
-    EventBus.off('plot-window-closed', this.handleWindowClosed)
-  },
-}
+      return this.entry.resource ? this.entry.resource: this.entry.discoverId;
+    }
+  }
+};
 </script>