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

package/src/components/scripts/utilities.js

@@ -1,173 +1,173 @@
-const initialDefaultState = () => {
-  return {
-    entries: [
-      {
-        resource: "Rat",
-        type: "MultiFlatmap",
-        mode: "main",
-        id: 1,
-        state: undefined,
-        label: "",
-        discoverId: undefined
-      }
-    ],
-  };
-}
-
-const getNewMapEntry = async (type, sparcApi) => {
-  let entry = { };
-  if (type === "AC") {
-    entry = {
-      resource: "Rat",
-      type: "MultiFlatmap",
-      mode: "main",
-      state: undefined,
-      label: "",
-      discoverId: undefined
-    };
-  } else if (type === "FC") {
-    entry = {
-      resource: "FunctionalConnectivity",
-      type: "Flatmap",
-      mode: "main",
-      state: undefined,
-      label: "Functional",
-      discoverId: undefined
-    }
-  } else if (type === "3D") {
-    const data = await getBodyScaffoldInfo(sparcApi, "human");
-    entry = {
-      resource: data.url,
-      type: "Scaffold",
-      mode: "main",
-      state: undefined,
-      label: "Human",
-      discoverId: data.datasetInfo.discoverId,
-      contextCardUrl: data.datasetInfo.contextCardUrl,
-      s3uri: data.datasetInfo.s3uri,
-      version: data.datasetInfo.version,
-      isBodyScaffold: true,
-    };
-  }
-
-  return entry;
-}
-
-/*
- * Initial state for the split flow
- */
-const initialState = async (type, sparcApi) => {
-  const state = initialDefaultState();
-  if (type === "FC") {
-    state.entries[0].resource = "FunctionalConnectivity";
-    state.entries[0].type = "Flatmap";
-    state.entries[0].label = "Functional";
-  } else if (type === "WholeBody") {
-    const data = await getBodyScaffoldInfo(sparcApi, "human");
-    state.entries[0].resource = data.url;
-    state.entries[0].contextCardUrl = data.datasetInfo.contextCardUrl;
-    state.entries[0].discoverId = data.datasetInfo.discoverId,
-    state.entries[0].s3uri = data.datasetInfo.s3uri;
-    state.entries[0].version = data.datasetInfo.version;
-    state.entries[0].type = "Scaffold";
-    state.entries[0].label = "Human";
-    state.entries[0].isBodyScaffold = true;
-  }
-
-  return state;
-}
-
-const capitalise = term => {
-  if (term)
-    return term.charAt(0).toUpperCase() + term.slice(1);
-  return term;
-};
-
-/*
- * Provide a list of available species for the flatmap
- */
-const availableSpecies = () => {
-  return {
-    "Human Female": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: true },
-    "Human Male": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: true },
-    "Rat": { taxo: "NCBITaxon:10114", iconClass: "mapicon-icon_rat", displayLatestChanges: true, displayWarning: true },
-    "Mouse": { taxo: "NCBITaxon:10090", iconClass: "mapicon-icon_mouse", displayLatestChanges: true, displayWarning: true },
-    "Pig": { taxo: "NCBITaxon:9823", iconClass: "mapicon-icon_pig", displayLatestChanges: true, displayWarning: true },
-    "Cat": { taxo: "NCBITaxon:9685", iconClass: "mapicon-icon_cat", displayLatestChanges: true, displayWarning: true },
-  }
-}
-
-/*
- * Look for the key in availableSpecies with the provided condition
- */
-const findSpeciesKey = condition => {
-  if (condition) {
-    const list = availableSpecies();
-    for (let key in list) {
-      if (condition.taxo === list[key].taxo) {
-        if (condition.biologicalSex && list[key].biologicalSex) {
-          if (condition.biologicalSex === list[key].biologicalSex)
-            return key;
-        } else {
-          return key;
-        }
-      }
-    }
-  }
-  return "";
-}
-
-const extractS3BucketNameAndPrefix = uri => {
-  if (uri) {
-    const substring = uri.split("//")[1];
-    if (substring) {
-      const s3Bucket = substring.split("/")[0];
-      const n = substring.indexOf('/');
-      const s3Prefix = substring.substring(n + 1);
-      return {
-        s3Bucket,
-        s3Prefix
-      };
-    }
-  }
-  return undefined
-}
-
-const getBodyScaffoldInfo = async (sparcApi, species) => {
-  //Get body scaffold information
-  let url = "";
-  let datasetInfo = undefined;
-  const response = await fetch(`${sparcApi}get_body_scaffold_info/${species}`);
-  if (response.ok) {
-    const data = await response.json();
-    //Construct the url endpoint for downloading the scaffold
-    const bucketInfo = extractS3BucketNameAndPrefix(data.s3uri);
-    url = `${sparcApi}s3-resource/${bucketInfo.s3Prefix}files/${data.path}?s3BucketName=${bucketInfo.s3Bucket}`;
-    const contextCardUrl = `${sparcApi}s3-resource/${bucketInfo.s3Prefix}files/${data.contextinfo}?s3BucketName=${bucketInfo.s3Bucket}`;
-    datasetInfo = {
-      s3uri: data.s3uri,
-      contextCardUrl,
-      discoverId: data.id,
-      version: data.version,
-    };
-  } else {
-    //Use default url if data is not found for any reason
-    if (species === "rat") {
-      url = "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/WholeBody/31-May-2021/ratBody/ratBody_syncmap_metadata.json";
-    } else if (species === "human") {
-      url = "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/WholeBody/27-4-23-human/human_body_metadata.json";
-    }
-  }
-
-  return {url, datasetInfo};
-}
-
-export { 
-  availableSpecies,
-  capitalise,
-  findSpeciesKey,
-  initialState,
-  initialDefaultState,
-  getBodyScaffoldInfo,
-  getNewMapEntry
-}
+const initialDefaultState = () => {
+  return {
+    entries: [
+      {
+        resource: "Rat",
+        type: "MultiFlatmap",
+        mode: "main",
+        id: 1,
+        state: undefined,
+        label: "",
+        discoverId: undefined
+      }
+    ],
+  };
+}
+
+const getNewMapEntry = async (type, sparcApi) => {
+  let entry = { };
+  if (type === "AC") {
+    entry = {
+      resource: "Rat",
+      type: "MultiFlatmap",
+      mode: "main",
+      state: undefined,
+      label: "",
+      discoverId: undefined
+    };
+  } else if (type === "FC") {
+    entry = {
+      resource: "FunctionalConnectivity",
+      type: "Flatmap",
+      mode: "main",
+      state: undefined,
+      label: "Functional",
+      discoverId: undefined
+    }
+  } else if (type === "3D") {
+    const data = await getBodyScaffoldInfo(sparcApi, "human");
+    entry = {
+      resource: data.url,
+      type: "Scaffold",
+      mode: "main",
+      state: undefined,
+      label: "Human",
+      discoverId: data.datasetInfo.discoverId,
+      contextCardUrl: data.datasetInfo.contextCardUrl,
+      s3uri: data.datasetInfo.s3uri,
+      version: data.datasetInfo.version,
+      isBodyScaffold: true,
+    };
+  }
+
+  return entry;
+}
+
+/*
+ * Initial state for the split flow
+ */
+const initialState = async (type, sparcApi) => {
+  const state = initialDefaultState();
+  if (type === "FC") {
+    state.entries[0].resource = "FunctionalConnectivity";
+    state.entries[0].type = "Flatmap";
+    state.entries[0].label = "Functional";
+  } else if (type === "WholeBody") {
+    const data = await getBodyScaffoldInfo(sparcApi, "human");
+    state.entries[0].resource = data.url;
+    state.entries[0].contextCardUrl = data.datasetInfo.contextCardUrl;
+    state.entries[0].discoverId = data.datasetInfo.discoverId,
+    state.entries[0].s3uri = data.datasetInfo.s3uri;
+    state.entries[0].version = data.datasetInfo.version;
+    state.entries[0].type = "Scaffold";
+    state.entries[0].label = "Human";
+    state.entries[0].isBodyScaffold = true;
+  }
+
+  return state;
+}
+
+const capitalise = term => {
+  if (term)
+    return term.charAt(0).toUpperCase() + term.slice(1);
+  return term;
+};
+
+/*
+ * Provide a list of available species for the flatmap
+ */
+const availableSpecies = () => {
+  return {
+    "Human Female": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: true },
+    "Human Male": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: true },
+    "Rat": { taxo: "NCBITaxon:10114", iconClass: "mapicon-icon_rat", displayLatestChanges: true, displayWarning: true },
+    "Mouse": { taxo: "NCBITaxon:10090", iconClass: "mapicon-icon_mouse", displayLatestChanges: true, displayWarning: true },
+    "Pig": { taxo: "NCBITaxon:9823", iconClass: "mapicon-icon_pig", displayLatestChanges: true, displayWarning: true },
+    "Cat": { taxo: "NCBITaxon:9685", iconClass: "mapicon-icon_cat", displayLatestChanges: true, displayWarning: true },
+  }
+}
+
+/*
+ * Look for the key in availableSpecies with the provided condition
+ */
+const findSpeciesKey = condition => {
+  if (condition) {
+    const list = availableSpecies();
+    for (let key in list) {
+      if (condition.taxo === list[key].taxo) {
+        if (condition.biologicalSex && list[key].biologicalSex) {
+          if (condition.biologicalSex === list[key].biologicalSex)
+            return key;
+        } else {
+          return key;
+        }
+      }
+    }
+  }
+  return "";
+}
+
+const extractS3BucketNameAndPrefix = uri => {
+  if (uri) {
+    const substring = uri.split("//")[1];
+    if (substring) {
+      const s3Bucket = substring.split("/")[0];
+      const n = substring.indexOf('/');
+      const s3Prefix = substring.substring(n + 1);
+      return {
+        s3Bucket,
+        s3Prefix
+      };
+    }
+  }
+  return undefined
+}
+
+const getBodyScaffoldInfo = async (sparcApi, species) => {
+  //Get body scaffold information
+  let url = "";
+  let datasetInfo = undefined;
+  const response = await fetch(`${sparcApi}get_body_scaffold_info/${species}`);
+  if (response.ok) {
+    const data = await response.json();
+    //Construct the url endpoint for downloading the scaffold
+    const bucketInfo = extractS3BucketNameAndPrefix(data.s3uri);
+    url = `${sparcApi}s3-resource/${bucketInfo.s3Prefix}files/${data.path}?s3BucketName=${bucketInfo.s3Bucket}`;
+    const contextCardUrl = `${sparcApi}s3-resource/${bucketInfo.s3Prefix}files/${data.contextinfo}?s3BucketName=${bucketInfo.s3Bucket}`;
+    datasetInfo = {
+      s3uri: data.s3uri,
+      contextCardUrl,
+      discoverId: data.id,
+      version: data.version,
+    };
+  } else {
+    //Use default url if data is not found for any reason
+    if (species === "rat") {
+      url = "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/WholeBody/31-May-2021/ratBody/ratBody_syncmap_metadata.json";
+    } else if (species === "human") {
+      url = "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/WholeBody/27-4-23-human/human_body_metadata.json";
+    }
+  }
+
+  return {url, datasetInfo};
+}
+
+export { 
+  availableSpecies,
+  capitalise,
+  findSpeciesKey,
+  initialState,
+  initialDefaultState,
+  getBodyScaffoldInfo,
+  getNewMapEntry
+}

package/src/components/viewers/Flatmap.vue

@@ -1,145 +1,145 @@
-<template>
-  <FlatmapVuer
-    :state="entry.state"
-    :entry="entry.resource"
-    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
-    @pan-zoom-callback="flatmapPanZoomCallback"
-    :name="entry.resource"
-    style="height: 100%; width: 100%"
-    :minZoom="entry.minZoom"
-    :helpMode="helpMode"
-    :pathControls="true"
-    ref="flatmap"
-    @ready="flatmapReadyCall"
-    :displayMinimap="false"
-    :displayWarning="true"
-    :enableOpenMapUI="true"
-    :flatmapAPI="flatmapAPI"
-    :sparcAPI="apiLocation"
-    @open-map="openMap"
-  />
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import { FlatmapVuer } from "@abi-software/flatmapvuer";
-import EventBus from "../EventBus";
-import ContentMixin from "../../mixins/ContentMixin";
-import DynamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
-import "@abi-software/flatmapvuer/dist/style.css";
-
-export default {
-  name: "Flatmap",
-  mixins: [ ContentMixin, DynamicMarkerMixin ],
-  components: {
-    FlatmapVuer,
-  },
-  methods: {
-    getState: function () {
-      return this.$refs.flatmap.getState();
-    },
-    /**
-     * Perform a local search on this contentvuer
-     */
-    search: function (term) {
-      return this.$refs.flatmap.searchAndShowResult(term);
-    },
-    getFlatmapImp() {
-      return this.$refs.flatmap.mapImp;
-    },
-    flatmaprResourceSelected: function (type, resource) {
-      this.$refs.flatmap.resourceSelected(
-        type, resource, (this.$refs.map.viewingMode === "Exploration"));
-    },
-    flatmapReadyCall: function (flatmap) {
-      let provClone = {id: this.entry.id, prov: this.getFlatmapImp().provenance}; //create clone of provenance and add id
-      EventBus.emit("mapImpProv", provClone); // send clone to context card
-      this.$emit("flatmap-provenance-ready", provClone);
-      this.getAvailableTerms();
-      if (this.entry.resource === "FunctionalConnectivity"){
-        this.flatmapReadyForMarkerUpdates(flatmap);
-      }
-    },
-    highlightFeatures: function(info) {
-      let name = info.name;
-      const flatmap = this.$refs.flatmap.mapImp;
-      if (name) {
-        const results = flatmap.search(name);
-        if (results.featureIds[0]) {
-          flatmap.highlightFeatures([
-            flatmap.modelForFeature(results.featureIds[0]),
-          ]);
-        }
-      }
-    },
-    /**
-     * Append the list of suggested terms to suggestions
-     */
-    searchSuggestions: function (term, suggestions) {
-      if (term && this.$refs.flatmap.mapImp) {
-        const results = this.$refs.flatmap.mapImp.search(term);
-        results.__featureIds.forEach(id => {
-          const annotation = this.$refs.flatmap.mapImp.annotation(id);
-          if (annotation && annotation.label)
-            suggestions.push(annotation.label);
-        });
-      }
-    },
-    zoomToFeatures: function(info, forceSelect) {
-      let name = info.name;
-      const flatmap = this.$refs.flatmap.mapImp;
-      if (name) {
-        const results = flatmap.search(name);
-        if (results.featureIds.length) {
-          let externalId = flatmap.modelForFeature(results.featureIds[0]);
-          if (externalId) {
-            if (forceSelect) {
-              flatmap.selectFeatures(externalId);
-            }
-            flatmap.zoomToFeatures(externalId);
-          } else flatmap.clearSearchResults();
-        }
-      } else {
-        flatmap.clearSearchResults();
-      }
-    },
-  },
-  computed: {
-    facetSpecies() {
-      return this.settingsStore.facets.species;
-    },
-  },
-  mounted: function() {
-    this.getAvailableTerms();
-    EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerZoomUpdate(true, undefined);
-    });
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-:deep(.maplibregl-popup) {
-  z-index: 3;
-}
-
-:deep(.flatmapvuer-popover) {
-  .maplibregl-popup-content {
-    border-radius: 4px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    pointer-events: auto;
-    width: 25em;
-    background: #fff;
-  }
-}
-
-:deep(.maplibregl-marker) {
-  &.standard-marker {
-    z-index: 2;
-  }
-  &.highlight-marker {
-    z-index: 1;
-  }
-}
-</style>
+<template>
+  <FlatmapVuer
+    :state="entry.state"
+    :entry="entry.resource"
+    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
+    @pan-zoom-callback="flatmapPanZoomCallback"
+    :name="entry.resource"
+    style="height: 100%; width: 100%"
+    :minZoom="entry.minZoom"
+    :helpMode="helpMode"
+    :pathControls="true"
+    ref="flatmap"
+    @ready="flatmapReadyCall"
+    :displayMinimap="false"
+    :displayWarning="true"
+    :enableOpenMapUI="true"
+    :flatmapAPI="flatmapAPI"
+    :sparcAPI="apiLocation"
+    @open-map="openMap"
+  />
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { FlatmapVuer } from "@abi-software/flatmapvuer";
+import EventBus from "../EventBus";
+import ContentMixin from "../../mixins/ContentMixin";
+import DynamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
+import "@abi-software/flatmapvuer/dist/style.css";
+
+export default {
+  name: "Flatmap",
+  mixins: [ ContentMixin, DynamicMarkerMixin ],
+  components: {
+    FlatmapVuer,
+  },
+  methods: {
+    getState: function () {
+      return this.$refs.flatmap.getState();
+    },
+    /**
+     * Perform a local search on this contentvuer
+     */
+    search: function (term) {
+      return this.$refs.flatmap.searchAndShowResult(term);
+    },
+    getFlatmapImp() {
+      return this.$refs.flatmap.mapImp;
+    },
+    flatmaprResourceSelected: function (type, resource) {
+      this.$refs.flatmap.resourceSelected(
+        type, resource, (this.$refs.map.viewingMode === "Exploration"));
+    },
+    flatmapReadyCall: function (flatmap) {
+      let provClone = {id: this.entry.id, prov: this.getFlatmapImp().provenance}; //create clone of provenance and add id
+      EventBus.emit("mapImpProv", provClone); // send clone to context card
+      this.$emit("flatmap-provenance-ready", provClone);
+      this.getAvailableTerms();
+      if (this.entry.resource === "FunctionalConnectivity"){
+        this.flatmapReadyForMarkerUpdates(flatmap);
+      }
+    },
+    highlightFeatures: function(info) {
+      let name = info.name;
+      const flatmap = this.$refs.flatmap.mapImp;
+      if (name) {
+        const results = flatmap.search(name);
+        if (results.featureIds[0]) {
+          flatmap.highlightFeatures([
+            flatmap.modelForFeature(results.featureIds[0]),
+          ]);
+        }
+      }
+    },
+    /**
+     * Append the list of suggested terms to suggestions
+     */
+    searchSuggestions: function (term, suggestions) {
+      if (term && this.$refs.flatmap.mapImp) {
+        const results = this.$refs.flatmap.mapImp.search(term);
+        results.__featureIds.forEach(id => {
+          const annotation = this.$refs.flatmap.mapImp.annotation(id);
+          if (annotation && annotation.label)
+            suggestions.push(annotation.label);
+        });
+      }
+    },
+    zoomToFeatures: function(info, forceSelect) {
+      let name = info.name;
+      const flatmap = this.$refs.flatmap.mapImp;
+      if (name) {
+        const results = flatmap.search(name);
+        if (results.featureIds.length) {
+          let externalId = flatmap.modelForFeature(results.featureIds[0]);
+          if (externalId) {
+            if (forceSelect) {
+              flatmap.selectFeatures(externalId);
+            }
+            flatmap.zoomToFeatures(externalId);
+          } else flatmap.clearSearchResults();
+        }
+      } else {
+        flatmap.clearSearchResults();
+      }
+    },
+  },
+  computed: {
+    facetSpecies() {
+      return this.settingsStore.facets.species;
+    },
+  },
+  mounted: function() {
+    this.getAvailableTerms();
+    EventBus.on("markerUpdate", () => {
+      this.flatmapMarkerZoomUpdate(true, undefined);
+    });
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+:deep(.maplibregl-popup) {
+  z-index: 3;
+}
+
+:deep(.flatmapvuer-popover) {
+  .maplibregl-popup-content {
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    pointer-events: auto;
+    width: 25em;
+    background: #fff;
+  }
+}
+
+:deep(.maplibregl-marker) {
+  &.standard-marker {
+    z-index: 2;
+  }
+  &.highlight-marker {
+    z-index: 1;
+  }
+}
+</style>