@abi-software/mapintegratedvuer 1.21.1 → 1.21.2

package/src/components/scripts/utilities.js

@@ -5,92 +5,91 @@ const initialDefaultState = () => {
     entries: [
       {
         resource: defaultSpecies,
-        type: "MultiFlatmap",
-        mode: "main",
+        type: 'MultiFlatmap',
+        mode: 'main',
         id: 1,
         state: undefined,
-        label: "",
-        discoverId: undefined
-      }
+        label: '',
+        discoverId: undefined,
+      },
     ],
   };
-}
+};
 
 const getNewMapEntry = async (type, sparcApi) => {
-  let entry = { };
-  if (type === "AC") {
+  let entry = {};
+  if (type === 'AC') {
     entry = {
       resource: defaultSpecies,
-      type: "MultiFlatmap",
-      mode: "main",
+      type: 'MultiFlatmap',
+      mode: 'main',
       state: undefined,
-      label: "",
-      discoverId: undefined
+      label: '',
+      discoverId: undefined,
     };
-  } else if (type === "FC") {
+  } else if (type === 'FC') {
     entry = {
-      resource: "FunctionalConnectivity",
-      type: "Flatmap",
-      mode: "main",
+      resource: 'FunctionalConnectivity',
+      type: 'Flatmap',
+      mode: 'main',
       state: undefined,
-      label: "Functional",
-      discoverId: undefined
-    }
-  } else if (type === "3D") {
-    const data = await getBodyScaffoldInfo(sparcApi, "human");
+      label: 'Functional',
+      discoverId: undefined,
+    };
+  } else if (type === '3D') {
+    const data = await getBodyScaffoldInfo(sparcApi, 'human');
     entry = {
       resource: data.url,
-      type: "Scaffold",
-      mode: "main",
+      type: 'Scaffold',
+      mode: 'main',
       state: undefined,
-      label: "Human",
+      label: 'Human',
       discoverId: data.datasetInfo.discoverId,
       contextCardUrl: data.datasetInfo.contextCardUrl,
       s3uri: data.datasetInfo.s3uri,
       version: data.datasetInfo.version,
       isBodyScaffold: true,
     };
-  } else if (type === "CG") {
+  } else if (type === 'CG') {
     entry = {
-      resource: "ConnectivityGraph",
-      type: "ConnectivityGraph",
-      mode: "main",
+      resource: 'ConnectivityGraph',
+      type: 'ConnectivityGraph',
+      mode: 'main',
       state: undefined,
-      label: "Connectivity Graph",
-      discoverId: undefined
-    }
+      label: 'Connectivity Graph',
+      discoverId: undefined,
+    };
   }
 
   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");
+  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].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].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);
+const capitalise = (term) => {
+  if (term) return term.charAt(0).toUpperCase() + term.slice(1);
   return term;
 };
 
@@ -99,54 +98,85 @@ const capitalise = term => {
  */
 const availableSpecies = () => {
   return {
-    "Human Female": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: false },
-    "Human Male": { taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass: "mapicon-icon_human", displayLatestChanges: true, displayWarning: false },
-    "Rat": { taxo: "NCBITaxon:10114", iconClass: "mapicon-icon_rat", displayLatestChanges: true, displayWarning: false },
-    "Mouse": { taxo: "NCBITaxon:10090", iconClass: "mapicon-icon_mouse", displayLatestChanges: true, displayWarning: false },
-    "Pig": { taxo: "NCBITaxon:9823", iconClass: "mapicon-icon_pig", displayLatestChanges: true, displayWarning: false },
-    "Cat": { taxo: "NCBITaxon:9685", iconClass: "mapicon-icon_cat", displayLatestChanges: true, displayWarning: true },
-  }
-}
+    'Human Female': {
+      taxo: 'NCBITaxon:9606',
+      biologicalSex: 'PATO:0000383',
+      iconClass: 'mapicon-icon_human',
+      displayLatestChanges: true,
+      displayWarning: false,
+    },
+    'Human Male': {
+      taxo: 'NCBITaxon:9606',
+      biologicalSex: 'PATO:0000384',
+      iconClass: 'mapicon-icon_human',
+      displayLatestChanges: true,
+      displayWarning: false,
+    },
+    Rat: {
+      taxo: 'NCBITaxon:10114',
+      iconClass: 'mapicon-icon_rat',
+      displayLatestChanges: true,
+      displayWarning: false,
+    },
+    Mouse: {
+      taxo: 'NCBITaxon:10090',
+      iconClass: 'mapicon-icon_mouse',
+      displayLatestChanges: true,
+      displayWarning: false,
+    },
+    Pig: {
+      taxo: 'NCBITaxon:9823',
+      iconClass: 'mapicon-icon_pig',
+      displayLatestChanges: true,
+      displayWarning: false,
+    },
+    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 => {
+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;
+          if (condition.biologicalSex === list[key].biologicalSex) return key;
         } else {
           return key;
         }
       }
     }
   }
-  return "";
-}
+  return '';
+};
 
-const extractS3BucketNameAndPrefix = uri => {
+const extractS3BucketNameAndPrefix = (uri) => {
   if (uri) {
-    const substring = uri.split("//")[1];
+    const substring = uri.split('//')[1];
     if (substring) {
-      const s3Bucket = substring.split("/")[0];
+      const s3Bucket = substring.split('/')[0];
       const n = substring.indexOf('/');
       const s3Prefix = substring.substring(n + 1);
       return {
         s3Bucket,
-        s3Prefix
+        s3Prefix,
       };
     }
   }
-  return undefined
-}
+  return undefined;
+};
 
 const getBodyScaffoldInfo = async (sparcApi, species) => {
   //Get body scaffold information
-  let url = "";
+  let url = '';
   let datasetInfo = undefined;
   const response = await fetch(`${sparcApi}get_body_scaffold_info/${species}`);
   if (response.ok) {
@@ -163,23 +193,23 @@ const getBodyScaffoldInfo = async (sparcApi, species) => {
     };
   } 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";
+    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};
-}
+  return { url, datasetInfo };
+};
 
 // Array intersection
 const intersectArrays = (arr1, arr2) => {
-  const lowerArr2 = arr2.map(x => typeof x === 'string' ? x.toLowerCase() : x);
-  return arr1.filter(x =>
-    typeof x === 'string'
-      ? lowerArr2.includes(x.toLowerCase())
-      : lowerArr2.includes(x)
+  const lowerArr2 = arr2.map((x) => (typeof x === 'string' ? x.toLowerCase() : x));
+  return arr1.filter((x) =>
+    typeof x === 'string' ? lowerArr2.includes(x.toLowerCase()) : lowerArr2.includes(x),
   );
 };
 
@@ -217,4 +247,4 @@ export {
   intersectArrays,
   transformObjToString,
   transformStringToObj,
-}
+};

package/src/components/viewers/CellDLViewer.vue

@@ -11,27 +11,27 @@
 /* eslint-disable no-alert, no-console */
 import './cellDLViewer.css';
 import CellDLViewer from '@celldl/viewer';
-import ContentMixin from "../../mixins/ContentMixin";
+import ContentMixin from '../../mixins/ContentMixin';
 
 export default {
-  name: "CellDLView",
-  mixins: [ ContentMixin ],
+  name: 'CellDLView',
+  mixins: [ContentMixin],
   components: {
     CellDLViewer,
   },
-  data: function() {
+  data: function () {
     return {
       annotations: {},
       celldlData: '',
-    }
+    };
   },
   methods: {
-    onError: function() {
+    onError: function () {
       console.log(msg);
     },
-    onEvent: function() {
+    onEvent: function () {
       console.log(detail);
-    }
-  }
+    },
+  },
 };
 </script>

package/src/components/viewers/ConnectivityGraph.vue

@@ -22,16 +22,13 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import {
-  ConnectivityGraph as MapUtilitiesConnectivityGraph,
-} from '@abi-software/map-utilities';
-import ContentMixin from "../../mixins/ContentMixin";
+import { ConnectivityGraph as MapUtilitiesConnectivityGraph } from '@abi-software/map-utilities';
+import ContentMixin from '../../mixins/ContentMixin';
 import EventBus from '../EventBus';
 
 export default {
-  name: "ConnectivityGraph",
-  mixins: [ ContentMixin ],
+  name: 'ConnectivityGraph',
+  mixins: [ContentMixin],
   components: {
     MapUtilitiesConnectivityGraph,
   },
@@ -84,7 +81,7 @@ export default {
   },
   methods: {
     onTapNode: function (data) {
-      const name = data.map(t => t.label).join(', ');
+      const name = data.map((t) => t.label).join(', ');
       this.onConnectivityHovered(name);
     },
     onConnectivityHovered: function (label) {
@@ -100,17 +97,17 @@ export default {
       const names = label.split(',');
       let data = [];
       names.forEach((n) => {
-        const foundData = allWithDatasets.find((a) =>
-          a.name.toLowerCase().trim() === n.toLowerCase().trim()
+        const foundData = allWithDatasets.find(
+          (a) => a.name.toLowerCase().trim() === n.toLowerCase().trim(),
         );
         if (foundData) {
           data.push({
             id: foundData.id,
-            label: foundData.name
+            label: foundData.name,
           });
         }
       });
-      return data
+      return data;
     },
   },
 };

package/src/components/viewers/Flatmap.vue

@@ -57,20 +57,19 @@
 </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 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 { 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';
 
 export default {
-  name: "Flatmap",
-  mixins: [ ContentMixin, DynamicMarkerMixin ],
+  name: 'Flatmap',
+  mixins: [ContentMixin, DynamicMarkerMixin],
   components: {
     FlatmapVuer,
     HelpModeDialog,
@@ -79,7 +78,7 @@ export default {
     return {
       flatmapReady: false,
       displayMinimap: false,
-    }
+    };
   },
   methods: {
     getState: function () {
@@ -106,14 +105,14 @@ export default {
         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);
+      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) {
@@ -121,17 +120,17 @@ export default {
       // 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;
         if (currentFlatmap) {
-          this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
+          this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' });
         }
       }
     },
@@ -142,10 +141,9 @@ export default {
       if (term && this.$refs.flatmap.mapImp) {
         const results = this.$refs.flatmap.mapImp.search(term);
         const featureIds = results.__featureIds || results.featureIds;
-        featureIds.forEach(id => {
+        featureIds.forEach((id) => {
           const annotation = this.$refs.flatmap.mapImp.annotation(id);
-          if (annotation && annotation.label)
-            suggestions.push(annotation.label);
+          if (annotation && annotation.label) suggestions.push(annotation.label);
         });
       }
     },
@@ -185,7 +183,7 @@ export default {
         }
       }
     },
-    zoomToFeatures: function(info, forceSelect) {
+    zoomToFeatures: function (info, forceSelect) {
       let name = info.name;
       const flatmap = this.$refs.flatmap.mapImp;
       if (name) {

package/src/components/viewers/Iframe.vue

@@ -1,31 +1,29 @@
 <template>
   <div class="map-iframe-container">
-      <iframe class="my-iframe"  :src="entry.resource.share_link" ref="iframe"></iframe>
+    <iframe class="my-iframe" :src="entry.resource.share_link" ref="iframe"></iframe>
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import ContentMixin from "../../mixins/ContentMixin";
+import ContentMixin from '../../mixins/ContentMixin';
 
 export default {
-  name: "Iframe",
-  mixins: [ ContentMixin ],
+  name: 'MapIframe',
+  mixins: [ContentMixin],
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 .map-iframe-container {
   height: 100%;
   width: 100%;
 }
 
 .my-iframe {
-  height:100%;
-  width:100%;
-  position:relative;
-  border-width:0px;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  border-width: 0px;
 }
 </style>