@abi-software/mapintegratedvuer 0.7.2-vue3.0-alpha.0 → 1.0.0

package/src/components/viewers/Plot.vue

@@ -1,23 +1,23 @@
-<template>
-  <PlotVuer
-    :data-source="entry.resource.dataSource"
-    :metadata="entry.resource.metadata"
-    :supplemental-data="entry.resource.supplementalData"
-    style="overflow: hidden"
-  />
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import { PlotVuer } from "@abi-software/plotvuer";
-import "@abi-software/plotvuer/dist/style.css";
-import ContentMixin from "../../mixins/ContentMixin";
-
-export default {
-  name: "Plot",
-  mixins: [ ContentMixin ],
-  components: {
-    PlotVuer,
-  }
-};
-</script>
+<template>
+  <PlotVuer
+    :data-source="entry.resource.dataSource"
+    :metadata="entry.resource.metadata"
+    :supplemental-data="entry.resource.supplementalData"
+    style="overflow: hidden"
+  />
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { PlotVuer } from "@abi-software/plotvuer";
+import "@abi-software/plotvuer/dist/style.css";
+import ContentMixin from "../../mixins/ContentMixin";
+
+export default {
+  name: "Plot",
+  mixins: [ ContentMixin ],
+  components: {
+    PlotVuer,
+  }
+};
+</script>

package/src/components/viewers/Scaffold.vue

@@ -1,198 +1,198 @@
-<template>
-  <ScaffoldVuer
-    :state="entry.state"
-    :url="entry.resource"
-    :region="entry.region"
-    @scaffold-selected="resourceSelected(entry.type, $event, true)"
-    @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
-    @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
-    @on-ready="scaffoldIsReady"
-    @open-map="openMap"
-    ref="scaffold"
-    :background-toggle="true"
-    :traditional="true"
-    :help-mode="helpMode"
-    :render="visible"
-    :display-latest-message="true"
-    :warning-message="warningMessage"
-    :display-minimap="false"
-    :display-markers="false"
-    :enableOpenMapUI="true"
-    :view-u-r-l="entry.viewUrl"
-    :markerLabels="markerLabels"
-    :flatmapAPI="flatmapAPI"
-  />
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import EventBus from "../EventBus";
-import { ScaffoldVuer } from "@abi-software/scaffoldvuer";
-import ContentMixin from "../../mixins/ContentMixin";
-
-import "@abi-software/scaffoldvuer/dist/style.css";
-
-export default {
-  name: "Scaffold",
-  mixins: [ ContentMixin ],
-  components: {
-    ScaffoldVuer,
-  },
-  methods: {
-    onResize: function () {
-      this.scaffoldCamera.onResize();
-    },
-    getState: function () {
-      return this.$refs.scaffold.getState();
-    },
-    /**
-     * Perform a local search on this contentvuer
-     */
-    search: function (term) {
-      //Remove first and last letter if they are double quote
-      const parsed = term.replace(/(^"|"$)/g, '');
-      return this.$refs.scaffold.search(parsed, true);
-    },
-    searchSuggestions: function(term, suggestions){
-      if (term === "" || !this.$refs.scaffold) {
-        return suggestions;
-      }
-      const items = this.$refs.scaffold.fetchSuggestions(term);
-      items.forEach(item => {
-        if (item.suggestion) suggestions.push(item.suggestion);
-      });
-    },
-    /**
-     * Handle sync pan zoom event
-     */
-    handleSyncPanZoomEvent: function (data) {
-      //Prevent recursive callback
-      if (!this.mouseHovered) {
-        if (data.type !== this.entry.type) {
-          const origin = data.payload.origin;
-          const size = data.payload.size;
-          const center = [origin[0] + size[0] / 2, origin[1] + size[1] / 2];
-          const convertedCenter = [
-            (center[0] - 0.5) * 2,
-            (0.5 - center[1]) * 2,
-          ];
-          const zoom = 1 / Math.max(size[0], size[1]);
-          this.$refs.scaffold.$module.setSyncControlCenterZoom(
-            convertedCenter,
-            zoom
-          );
-        }
-      }
-    },
-    displayTooltip: function(info) {
-      let name = undefined;
-      if (info) {
-        name = info.name;
-      }
-      if (name) {
-        this.$refs.scaffold.search(name, true);
-      } else {
-        this.$refs.scaffold.hideRegionTooltip();
-      }
-    },
-    zoomToFeatures: function(info, forceSelect) {
-      let names = undefined;
-      if (Array.isArray(info)) names = info;
-      else names = [ info.name ];
-      if (forceSelect) {
-        this.$refs.scaffold.changeActiveByName(names, "", false);
-      }
-      this.$refs.scaffold.viewRegion(names);
-    },
-    highlightFeatures: function(info) {
-      let names = undefined;
-      if (Array.isArray(info)) names = info;
-      else names = [ info.name ];
-      this.$refs.scaffold.changeHighlightedByName(names, "", false);
-    },
-    scaffoldIsReady: function () {
-      this.scaffoldLoaded = true;
-      this.$refs.scaffold.$module.graphicsHighlight.highlightColour = [1, 0, 1];
-      if (this.isVisible()) {
-        let rotation = "free";
-        if (this.entry.rotation) rotation = this.entry.rotation;
-        this.$refs.scaffold.toggleSyncControl(this.splitFlowStore.globalCallback, rotation);
-        if (this.splitFlowStore.syncMode) this.$refs.scaffold.fitWindow();
-      }
-    },
-    requestSynchronisedEvent: function (flag) {
-      if (this.scaffoldLoaded) {
-        let rotation = "free";
-        if (this.entry.rotation) rotation = this.entry.rotation;
-        this.$refs.scaffold.toggleSyncControl(flag, rotation);
-      }
-    },
-    /**
-     * Callback when the vuers emit a selected event.
-     */
-    scaffoldHighlighted: function (type, resource) {
-      const result = {
-        paneIndex: this.entry.id,
-        type: type,
-        resource: resource,
-        internalName: undefined,
-      };
-      if (resource && resource[0]) {
-        result.internalName = resource[0].data.id;
-        result.eventType = "highlighted";
-      }
-      this.$emit("resource-selected", result);
-    },
-    /**
-     * Callback when the vuers emit a selected event.
-     */
-    scaffoldNavigated: function (type, resource) {
-      if (this.mouseHovered) {
-        const result = {
-          paneIndex: this.entry.id,
-          eventType: "panZoom",
-          payload: resource,
-          type: type,
-        };
-        this.$emit("resource-selected", result);
-      }
-    },
-    updateWithViewUrl: function(viewUrl) {
-      this.$refs.scaffold.updateViewURL(viewUrl);
-    },
-  },
-  computed: {
-    warningMessage: function() {
-      if (this.entry.isBodyScaffold) {
-        return "This map displays the anatomical location and connectivity of nerves, through which the neuron populations from the ApiNATOMY models available in SCKAN can be routed.";
-      } else {
-        return "Under active development";
-      }
-    },
-    markerLabels: function () {
-      return this.settingsStore.facetLabels;
-    },
-  },
-  data: function () {
-    return {
-      apiLocation: process.env.VUE_APP_API_LOCATION,
-      scaffoldCamera: undefined,
-      scaffoldLoaded: false,
-    };
-  },
-  mounted: function () {
-    this.scaffoldCamera =
-      this.$refs.scaffold.$module.scene.getZincCameraControls();
-    EventBus.on("startHelp", () => {
-      this.startHelp();
-    });
-  },
-};
-</script>
-
-<style scoped lang="scss">
-:deep(.message-popper) {
-  white-space: unset;
-  max-width: 200px;
-}
-</style>
+<template>
+  <ScaffoldVuer
+    :state="entry.state"
+    :url="entry.resource"
+    :region="entry.region"
+    @scaffold-selected="resourceSelected(entry.type, $event, true)"
+    @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
+    @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
+    @on-ready="scaffoldIsReady"
+    @open-map="openMap"
+    ref="scaffold"
+    :background-toggle="true"
+    :traditional="true"
+    :help-mode="helpMode"
+    :render="visible"
+    :display-latest-message="true"
+    :warning-message="warningMessage"
+    :display-minimap="false"
+    :display-markers="false"
+    :enableOpenMapUI="true"
+    :view-u-r-l="entry.viewUrl"
+    :markerLabels="markerLabels"
+    :flatmapAPI="flatmapAPI"
+  />
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import EventBus from "../EventBus";
+import { ScaffoldVuer } from "@abi-software/scaffoldvuer";
+import ContentMixin from "../../mixins/ContentMixin";
+
+import "@abi-software/scaffoldvuer/dist/style.css";
+
+export default {
+  name: "Scaffold",
+  mixins: [ ContentMixin ],
+  components: {
+    ScaffoldVuer,
+  },
+  methods: {
+    onResize: function () {
+      this.scaffoldCamera.onResize();
+    },
+    getState: function () {
+      return this.$refs.scaffold.getState();
+    },
+    /**
+     * Perform a local search on this contentvuer
+     */
+    search: function (term) {
+      //Remove first and last letter if they are double quote
+      const parsed = term.replace(/(^"|"$)/g, '');
+      return this.$refs.scaffold.search(parsed, true);
+    },
+    searchSuggestions: function(term, suggestions){
+      if (term === "" || !this.$refs.scaffold) {
+        return suggestions;
+      }
+      const items = this.$refs.scaffold.fetchSuggestions(term);
+      items.forEach(item => {
+        if (item.suggestion) suggestions.push(item.suggestion);
+      });
+    },
+    /**
+     * Handle sync pan zoom event
+     */
+    handleSyncPanZoomEvent: function (data) {
+      //Prevent recursive callback
+      if (!this.mouseHovered) {
+        if (data.type !== this.entry.type) {
+          const origin = data.payload.origin;
+          const size = data.payload.size;
+          const center = [origin[0] + size[0] / 2, origin[1] + size[1] / 2];
+          const convertedCenter = [
+            (center[0] - 0.5) * 2,
+            (0.5 - center[1]) * 2,
+          ];
+          const zoom = 1 / Math.max(size[0], size[1]);
+          this.$refs.scaffold.$module.setSyncControlCenterZoom(
+            convertedCenter,
+            zoom
+          );
+        }
+      }
+    },
+    displayTooltip: function(info) {
+      let name = undefined;
+      if (info) {
+        name = info.name;
+      }
+      if (name) {
+        this.$refs.scaffold.search(name, true);
+      } else {
+        this.$refs.scaffold.hideRegionTooltip();
+      }
+    },
+    zoomToFeatures: function(info, forceSelect) {
+      let names = undefined;
+      if (Array.isArray(info)) names = info;
+      else names = [ info.name ];
+      if (forceSelect) {
+        this.$refs.scaffold.changeActiveByName(names, "", false);
+      }
+      this.$refs.scaffold.viewRegion(names);
+    },
+    highlightFeatures: function(info) {
+      let names = undefined;
+      if (Array.isArray(info)) names = info;
+      else names = [ info.name ];
+      this.$refs.scaffold.changeHighlightedByName(names, "", false);
+    },
+    scaffoldIsReady: function () {
+      this.scaffoldLoaded = true;
+      this.$refs.scaffold.$module.graphicsHighlight.highlightColour = [1, 0, 1];
+      if (this.isVisible()) {
+        let rotation = "free";
+        if (this.entry.rotation) rotation = this.entry.rotation;
+        this.$refs.scaffold.toggleSyncControl(this.splitFlowStore.globalCallback, rotation);
+        if (this.splitFlowStore.syncMode) this.$refs.scaffold.fitWindow();
+      }
+    },
+    requestSynchronisedEvent: function (flag) {
+      if (this.scaffoldLoaded) {
+        let rotation = "free";
+        if (this.entry.rotation) rotation = this.entry.rotation;
+        this.$refs.scaffold.toggleSyncControl(flag, rotation);
+      }
+    },
+    /**
+     * Callback when the vuers emit a selected event.
+     */
+    scaffoldHighlighted: function (type, resource) {
+      const result = {
+        paneIndex: this.entry.id,
+        type: type,
+        resource: resource,
+        internalName: undefined,
+      };
+      if (resource && resource[0]) {
+        result.internalName = resource[0].data.id;
+        result.eventType = "highlighted";
+      }
+      this.$emit("resource-selected", result);
+    },
+    /**
+     * Callback when the vuers emit a selected event.
+     */
+    scaffoldNavigated: function (type, resource) {
+      if (this.mouseHovered) {
+        const result = {
+          paneIndex: this.entry.id,
+          eventType: "panZoom",
+          payload: resource,
+          type: type,
+        };
+        this.$emit("resource-selected", result);
+      }
+    },
+    updateWithViewUrl: function(viewUrl) {
+      this.$refs.scaffold.updateViewURL(viewUrl);
+    },
+  },
+  computed: {
+    warningMessage: function() {
+      if (this.entry.isBodyScaffold) {
+        return "This map displays the anatomical location and connectivity of nerves, through which the neuron populations from the ApiNATOMY models available in SCKAN can be routed.";
+      } else {
+        return "Under active development";
+      }
+    },
+    markerLabels: function () {
+      return this.settingsStore.facetLabels;
+    },
+  },
+  data: function () {
+    return {
+      apiLocation: process.env.VUE_APP_API_LOCATION,
+      scaffoldCamera: undefined,
+      scaffoldLoaded: false,
+    };
+  },
+  mounted: function () {
+    this.scaffoldCamera =
+      this.$refs.scaffold.$module.scene.getZincCameraControls();
+    EventBus.on("startHelp", () => {
+      this.startHelp();
+    });
+  },
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.message-popper) {
+  white-space: unset;
+  max-width: 200px;
+}
+</style>

package/src/components/viewers/Simulation.vue

@@ -1,21 +1,21 @@
-<template>
-  <SimulationVuer
-    :apiLocation="apiLocation"
-    :id="entry.discoverId"
-  />
-</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";
-
-export default {
-  name: "Simulation",
-  mixins: [ ContentMixin ],
-  components: {
-    SimulationVuer,
-  },
-};
-</script>
+<template>
+  <SimulationVuer
+    :apiLocation="apiLocation"
+    :id="entry.discoverId"
+  />
+</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";
+
+export default {
+  name: "Simulation",
+  mixins: [ ContentMixin ],
+  components: {
+    SimulationVuer,
+  },
+};
+</script>

package/src/icons/yellowstar.js

@@ -1 +1 @@
-export default '<svg width="72px" height="72px" viewBox="0 0 24 24" fill="yellow"><path d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z" stroke="#000000" stroke-width="2"/></svg>';
+export default '<svg width="72px" height="72px" viewBox="0 0 24 24" fill="yellow"><path d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z" stroke="#000000" stroke-width="2"/></svg>';

package/src/main.js

@@ -1,32 +1,32 @@
-
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import * as VueRouter from 'vue-router'
-import App from './App.vue'
-import { useMainStore } from './stores/index'
-
-const routes = [
-  { path: '/' },
-]
-
-const router = VueRouter.createRouter({
-  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
-  history: VueRouter.createWebHashHistory(),
-  routes,
-})
-
-const pinia = createPinia()
-const app = createApp(App)
-
-app.use(pinia)
-app.use(router)
-
-const mainStore = useMainStore()
-const token = document.cookie
-  .split("; ")
-  .find((row) => row.startsWith("user-token"))
-if (mainStore && token) {
-  mainStore.setUserToken(token.split("=")[1])
-}
-
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import * as VueRouter from 'vue-router'
+import App from './App.vue'
+import { useMainStore } from './stores/index'
+
+const routes = [
+  { path: '/' },
+]
+
+const router = VueRouter.createRouter({
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: VueRouter.createWebHashHistory(),
+  routes,
+})
+
+const pinia = createPinia()
+const app = createApp(App)
+
+app.use(pinia)
+app.use(router)
+
+const mainStore = useMainStore()
+const token = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("user-token"))
+if (mainStore && token) {
+  mainStore.setUserToken(token.split("=")[1])
+}
+
 app.mount('#app')