@abi-software/mapintegratedvuer 1.17.2 → 1.17.3-simulation.1

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: "",

package/src/components/viewers/Flatmap.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="viewer-container">
+  <div class="viewer-container" ref="container">
+    <resize-sensor @resize="calculateOffset()"> </resize-sensor>
     <FlatmapVuer
       :state="entry.state"
       :entry="entry.resource"
@@ -35,6 +36,7 @@
       :flatmapAPI="flatmapAPI"
       :render="visible"
       :sparcAPI="apiLocation"
+      :testDataLocation="testDataLocation"
       :showLocalSettings="showLocalSettings"
       :showOpenMapButton="showOpenMapButton"
       @open-map="openMap"
@@ -42,6 +44,7 @@
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
       @trackEvent="trackEvent"
+      @open-simulation="onSimulationOpen"
     />
 
     <HelpModeDialog
@@ -52,83 +55,120 @@
       @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>
-/* 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 { ref, markRaw } from 'vue'
+import { useMouseInElement } from '@vueuse/core'
 
-import { FlatmapVuer } from "@abi-software/flatmapvuer";
-import "@abi-software/flatmapvuer/dist/style.css";
+/* 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 { HelpModeDialog } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
+import { useSimulationPlotStore } from '../../stores/simulationPlotStore'
+import { retrieveProtocolData } from '../../services/testData.js';
+
+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,
+      protocolData: undefined,
+      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' })
         }
@@ -139,117 +179,160 @@ 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)
         }
       }
     },
+    populateProtocolMarkers: function(simulation) {
+      if (simulation?.path && this.protocolData) {
+        const ids = this.protocolData.reduce((results, item) => {
+          if (item.protocol.includes(simulation.path)) {
+            if (item.columns) {
+              item.columns.forEach((column) =>{
+                if (column.anatomic_location) {
+                  results.push(column.anatomic_location);
+                }
+              });
+            }
+          }
+          return results;
+        }, []);
+        this.updateProtocolMarkers(this.getFlatmapImp(), ids);
+      }
+    },
+    onSimulationOpen: async function (simulation) {
+      const uuid = this.$refs.flatmap?.mapImp?.mapMetadata?.uuid;
+      EventBus.emit('simulation-open-clicked', {...simulation, requesterEntryId: this.entry.id,
+        flatmapUUID: uuid})
+      if (!this.protocolData) {
+        this.protocolData = markRaw(await retrieveProtocolData(this.settingsStore.testDataLocation, uuid));
+      }
+      this.populateProtocolMarkers(simulation);
+    },
+    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() {
+      const entries = this.simulationPlotStore.windows.filter((win) => win.ownerId === this.entry.id);
+      console.log(entries)
+      return entries
+    },
+    testDataLocation() {
+      return this.settingsStore.testDataLocation;
+    }
   },
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

package/src/components/viewers/Simulation.vue

@@ -1,29 +1,136 @@
 <template>
   <SimulationVuer
     :apiLocation="apiLocation"
-    :id="id"
-    ref="simulation"
+    :id="id" ref="simulation"
+    @data-notification="handleDataNotification"
+    @externalData="handleExternalEvent"
+    @file="handleFileEvent"
+
   />
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-import ContentMixin from "../../mixins/ContentMixin";
-import { SimulationVuer } from "@abi-software/simulationvuer";
-import "@abi-software/simulationvuer/dist/style.css";
+import EventBus from '../EventBus'
+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;
+      return this.entry.resource ? this.entry.resource : this.entry.discoverId
+    },
+  },
+  data: function () {
+    return {
+      columns: undefined,
+      csv: undefined,
+      fileOpened: false,
     }
-  }
-};
+  },
+  methods: {
+    handleDataNotification: function (update) {
+      EventBus.emit('simulation-response', update)
+    },
+    handleDataRequest(payload) {
+      this.processRequest(payload);
+    },
+    handleExternalEvent(payload) {
+      console.log("handleExternalEvent", payload)
+    },
+    handleFileEvent(payload) {
+      if (payload?.type === "opened") {
+        this.$nextTick(() => {
+          this.fileOpened = true
+          if (this.entry.csv_file || this.csv_file) {
+            this.addExternalData(
+              {
+                targetEntryId: this.entry.id,
+                action: this.entry
+              }
+            )
+          }
+        })
+      }
+    },
+    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,
+        },
+      })
+    },
+    addExternalData: function(payload) {
+      if (this.entry.id === payload.targetEntryId) {
+        const data = payload.action
+        if (data.csv_file) {
+          this.csv_file = data.csv_file
+          this.columns = data.columns
+        }
+        if (this.csv_file && this.fileOpened) {
+          const parameters = []
+          if (this.columns) {
+            this.columns.forEach((col) => {
+              if (col.cellml_variable && col.cellml_variable !== "main/t") {
+                parameters.push(col.cellml_variable)
+              }
+            })
+          }
+          this.$refs.simulation.addExternalData(this.csv_file, undefined, parameters)
+        }
+      }
+    }
+  },
+  mounted: function () {
+    EventBus.on('simulation-external-data', this.addExternalData)
+    EventBus.on('simulation-data-request', this.handleDataRequest)
+    EventBus.on('plot-window-closed', this.handleWindowClosed)
+
+    EventBus.emit('simulation-ready', {
+      resourceId: this.id,
+      entryId: this.entry.id,
+      ready: true,
+    })
+    console.log(this.entry)
+  },
+  beforeUnmount: function () {
+    EventBus.emit('simulation-ready', {
+      resourceId: this.id,
+      entryId: this.entry.id,
+      ready: false,
+    })
+    EventBus.off('simulation-data-request', this.handleDataRequest)
+    EventBus.off('plot-window-closed', this.handleWindowClosed)
+  },
+}
 </script>

package/src/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     CustomSplitter: typeof import('./components/CustomSplitter.vue')['default']
     DatasetHeader: typeof import('./components/DatasetHeader.vue')['default']
     DialogToolbarContent: typeof import('./components/DialogToolbarContent.vue')['default']
+    DummyRouteComponent: typeof import('./components/DummyRouteComponent.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
@@ -44,10 +45,12 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     Flatmap: typeof import('./components/viewers/Flatmap.vue')['default']
     FlatmapContextCard: typeof import('./components/FlatmapContextCard.vue')['default']
+    FloatingWindow: typeof import('./components/FloatingWindow.vue')['default']
     Iframe: typeof import('./components/viewers/Iframe.vue')['default']
     MapContent: typeof import('./components/MapContent.vue')['default']
     MultiFlatmap: typeof import('./components/viewers/MultiFlatmap.vue')['default']
     Plot: typeof import('./components/viewers/Plot.vue')['default']
+    PlotComponent: typeof import('./components/PlotComponent.vue')['default']
     ResizeSensor: typeof import('./components/ResizeSensor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package/src/main.js

@@ -1,12 +1,16 @@
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import * as VueRouter from 'vue-router'
 import App from './App.vue'
+
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
 import { useMainStore } from './stores/index'
+import DummyRouteComponent from './components/DummyRouteComponent.vue'
 
 const routes = [
-  { path: '/' },
+  { path: '/', component: DummyRouteComponent },
 ]
 
 const router = VueRouter.createRouter({
@@ -21,6 +25,8 @@ const app = createApp(App)
 app.use(pinia)
 app.use(router)
 
+app.use(ElementPlus)
+
 const mainStore = useMainStore()
 const token = document.cookie
   .split("; ")
@@ -29,4 +35,4 @@ if (mainStore && token) {
   mainStore.setUserToken(token.split("=")[1])
 }
 
-app.mount('#app')
+app.mount('#app')