@abi-software/flatmapvuer 0.5.5-beta.0 → 0.5.5

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.5-beta.0",
+  "version": "0.5.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/flatmap-viewer": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.3.4.tgz",
-      "integrity": "sha512-p6xHf6sArnv5Cr0P9KwyPwI+rgTyL20KJVilbVAHiRCZ+zMCaNGpXctuwBHmOSpf7YfPku8U+OLHgMkAxTqdOA==",
+      "version": "2.4.1-b.5",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.4.1-b.5.tgz",
+      "integrity": "sha512-ScVaE0s7FB0dInpQ2FLC0eJ9tY1GGGu4aAY2oogQveC6+yfCmBPl5d6BXRuqtxfrlNSQyHRM14BRmE0B0OcjHg==",
       "requires": {
         "@babel/runtime": "^7.10.4",
         "@fortawesome/fontawesome-free": "^6.4.0",
@@ -18,7 +18,7 @@
         "bezier-js": "^6.1.0",
         "html-es6cape": "^2.0.2",
         "jspanel4": "^4.16.1",
-        "maplibre-gl": ">=2.4.0",
+        "maplibre-gl": ">=3.0.0",
         "minisearch": "^2.2.1",
         "polylabel": "^1.1.0"
       }
@@ -1357,14 +1357,12 @@
       "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
     },
     "@maplibre/maplibre-gl-style-spec": {
-      "version": "19.2.1",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.2.1.tgz",
-      "integrity": "sha512-ZVT5QlkVhlxlPav+ca0NO3Moc7EzbHDO2FXW4ic3Q0Vm+TDUw9I8A2EBws7xUUQZf7HQB3kQ+3Jsh5mFLRD4GQ==",
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.0.tgz",
+      "integrity": "sha512-ZbhX9CTV+Z7vHwkRIasDOwTSzr76e8Q6a55RMsAibjyX6+P0ZNL1qAKNzOjjBDP3+aEfNMl7hHo5knuY6pTAUQ==",
       "requires": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/point-geometry": "^0.1.0",
         "@mapbox/unitbezier": "^0.0.1",
-        "@types/mapbox__point-geometry": "^0.1.2",
         "json-stringify-pretty-compact": "^3.0.0",
         "minimist": "^1.2.8",
         "rw": "^1.3.3",
@@ -3128,9 +3126,9 @@
       }
     },
     "bezier-js": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.3.tgz",
-      "integrity": "sha512-VPFvkyO98oCJ1Tsi+bFBrKEWLdefAj4DJVaWp3xTEsdCbunC7Pt/nTeIgu/UdskBNcmHv8TOfsgdMZb1GsICmg=="
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.4.tgz",
+      "integrity": "sha512-PA0FW9ZpcHbojUCMu28z9Vg/fNkwTj5YhusSAjHHDfHDGLxJ6YUKrAN2vk1fP2MMOxVw4Oko16FMlRGVBGqLKg=="
     },
     "bfj": {
       "version": "6.1.2",
@@ -8270,9 +8268,9 @@
       }
     },
     "maplibre-gl": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.0.1.tgz",
-      "integrity": "sha512-OdFpejEkvaDwwVT9qAn6oA2h7093VlemaenF2/ssfD3TadNPz5oIVPzywn3cgso5i1D7IMKvEpba0A8A5qvXow==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.2.0.tgz",
+      "integrity": "sha512-TOo/cV9r8Xy3ngbJtY6JUC7rpjpObrsdO5pt14l5OIw4gY1v5XnxWP16VDSe0zRoncFfDCEBDmRwhfEFwtlbvw==",
       "requires": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.5-beta.0",
+  "version": "0.5.5",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
@@ -27,7 +27,7 @@
     "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.3.3-b.4",
+    "@abi-software/flatmap-viewer": "^2.4.1-b.5",
     "@abi-software/svg-sprite": "^0.3.0",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/App.vue

@@ -71,6 +71,7 @@ export default {
       console.log(component);
       let taxon = component.mapImp.describes;
       let id = component.mapImp.addMarker("UBERON:0000948");
+      window.flatmapImp =  component.mapImp;
       component.enablePanZoomEvents(true);
       //component.showPathwaysDrawer(false);
       console.log(taxon, id);
@@ -138,6 +139,7 @@ export default {
       //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/"
       flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/"
+      //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
       //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
     }

package/src/components/FlatmapVuer.vue

@@ -178,17 +178,15 @@
             v-html="flatmapMarker"
             v-popover:markerPopover
           ></div>
-          <selections-group
+          <tree-controls
             v-if="isFC && systems && systems.length > 0"
-            title="Systems"
-            labelKey="name"
-            identifierKey="id"
-            :selections="systems"
-            colourStyle="background"
+            :active="currentActive"
+            :hover="currentHover"
+            :tree-data="systems"
+            ref="treeControls"
             @changed="systemSelected"
             @checkAll="checkAllSystems"
-            ref="systemsSelection"
-            key="systemsSelection"
+            @change-active="ftuSelected"
           />
                     <!--
           <selections-group
@@ -224,6 +222,17 @@
             key="layersSelection"
           />
           -->
+          <selections-group
+            v-if="!isFC && taxonConnectivity && taxonConnectivity.length > 0"
+            title="Observed in"
+            labelKey="label"
+            identifierKey="taxon"
+            :selections="taxonConnectivity"
+            @changed="taxonsSelected"
+            @checkAll="checkAllTaxons"
+            ref="taxonSelection"
+            key="taxonSelection"
+          />
           <selections-group
             v-if="pathways && pathways.length > 0"
             title="Pathways"
@@ -253,31 +262,13 @@
         trigger="click"
         popper-class="open-map-popper non-selectable"
       >
-        <el-row>
-          <el-button
-            type="primary"
-            plain
-            @click="$emit('open-map', 'AC')"
-          >
-            Open AC Map
-          </el-button>
-        </el-row>
-        <el-row>
-          <el-button
-            type="primary"
-            plain
-            @click="$emit('open-map', 'FC')"
-          >
-            Open FC Map
-          </el-button>
-        </el-row>
-        <el-row>
+        <el-row v-for="item in openMapOptions" :key="item.key">
           <el-button
             type="primary"
             plain
-            @click="$emit('open-map', '3D')"
+            @click="$emit('open-map', item.key)"
           >
-            Open 3D Map
+            {{item.display}}
           </el-button>
         </el-row>
       </el-popover>
@@ -329,7 +320,7 @@
             popper-class="flatmap-popper right-popper"
           >
             <map-svg-icon
-              v-if="enableOpenMapUI"
+              v-if="enableOpenMapUI && openMapOptions.length > 0"
               slot="reference"
               v-popover:open-map-popover
               icon="openMap"
@@ -363,7 +354,6 @@
         ref="tooltip"
         class="tooltip"
         :entry="tooltipEntry"
-        @resource-selected="resourceSelected"
       />
     </div>
   </div>
@@ -373,7 +363,8 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import Tooltip from "./Tooltip";
-import SelectionsGroup from "./SelectionsGroup.vue";
+import SelectionsGroup from "./SelectionsGroup";
+import TreeControls from "./TreeControls";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 import SvgLegends from "./legends/SvgLegends";
 import {
@@ -387,7 +378,7 @@ import {
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import flatmapMarker from "../icons/flatmap-marker";
-import {FlatmapQueries} from "../services/flatmapQueries.js";
+import {FlatmapQueries, findTaxonomyLabel} from "../services/flatmapQueries.js";
 
 locale.use(lang);
 Vue.use(Button);
@@ -398,6 +389,65 @@ Vue.use(RadioGroup);
 Vue.use(Row);
 const ResizeSensor = require("css-element-queries/src/ResizeSensor");
 
+const processTaxon = (flatmapAPI, taxonIdentifiers) => {
+  let processed = [];
+  taxonIdentifiers.forEach(taxon => {
+    findTaxonomyLabel(flatmapAPI, taxon).then(value => {
+      const item = { taxon, label: value};
+      processed.push(item);
+    });
+  });
+
+  return processed;
+}
+
+const processFTUs = (parent, key) => {
+  const ftus = [];
+  let items = parent.organs ? parent.organs : parent.ftus;
+  const children = items ? items.filter(
+    (obj, index) =>
+      items.findIndex((item) => item.label === obj.label) === index
+    ) : undefined
+  if (children) {
+    children.forEach(child => {
+      const data = {
+        label: child.label,
+        models: child.models,
+        key: `${key}.${child.label}`,
+      };
+      const grandChildren = processFTUs(child, data.key);
+      if (grandChildren.length > 0) {
+        data.children = grandChildren;
+      }
+      ftus.push(data);
+    })
+  }
+  return ftus;
+}
+
+const processSystems = systems => {
+  const allSystems = [];
+  if (systems && systems.length > 0) {
+    const data = { label: "All", key: "All", children: [] };
+    systems.forEach(system => {
+      const child = {
+        colour: system.colour,
+        enabled: system.enabled,
+        label: system.id,
+        key: system.id,
+      };
+      const children = processFTUs(system, child.key);
+      if (children.length > 0)
+        child.children = children;
+      data.children.push(child);
+    });
+
+    allSystems.push(data);
+  }
+  
+  return allSystems;
+}
+
 const createUnfilledTooltipData = function (){
   return {
     destinations: [],
@@ -416,6 +466,7 @@ export default {
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
+    TreeControls,
     SelectionsGroup,
     SvgLegends
   },
@@ -530,11 +581,14 @@ export default {
         this.mapImp.enableSystem(payload.key, payload.value);
       }
     },
-    checkAllSystems: function(payload) {
+    checkAllSystems: function(flag) {
       if (this.mapImp) {
-        payload.keys.forEach(key => this.mapImp.enableSystem(key, payload.value));
+        this.systems[0].children.forEach(key => this.mapImp.enableSystem(key.label, flag));
       }
     },
+    ftuSelected: function(models) {
+      this.searchAndShowResult(models, true);
+    },
     layersSelected: function(payload) {
       if (this.mapImp) {
         this.mapImp.enableLayer(payload.key, payload.value);
@@ -545,6 +599,16 @@ export default {
         payload.keys.forEach(key => this.mapImp.enableLayer(key, payload.value));
       }
     },
+    taxonsSelected: function(payload) {
+      if (this.mapImp) {
+        this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value);
+      }
+    },
+    checkAllTaxons: function(payload) {
+      if (this.mapImp) {
+        payload.keys.forEach(key => this.mapImp.enableConnectivityByTaxonIds(key, payload.value));
+      }
+    },
     pathwaysSelected: function(payload) {
       if (this.mapImp) {
         this.mapImp.enablePath(payload.key, payload.value);
@@ -573,12 +637,17 @@ export default {
             label: label,
             feature: data,
             userData: args,
-            eventType: eventType
+            eventType: eventType,
+            provenanceTaxonomy: data.taxons ? JSON.parse(data.taxons) : undefined
           };
+          if (eventType === "click") {
+            this.currentActive = data.models ? data.models : "";
+          } else if (eventType === "mouseenter") {
+            this.currentHover = data.models ? data.models : "";
+          }
           if (data && data.type !== "marker" && eventType === "click"){
             this.checkAndCreatePopups(payload);
           }
-          this.$emit("resource-selected", payload);
         } else {
           this.$emit("pan-zoom-callback", data);
         }
@@ -607,11 +676,8 @@ export default {
           "block";
       };
     },
-    resourceSelected: function(action) {
-      this.$emit("resource-selected", action);
-    },
-    createTooltipFromNeuronCuration: function(data) {
-      this.tooltipEntry = this.flatmapQueries.createTooltipData(data);
+    createTooltipFromNeuronCuration: async function(data) {
+      this.tooltipEntry = await this.flatmapQueries.createTooltipData(data);
       this.displayTooltip();
     },
     // Keeping this as an API
@@ -872,7 +938,8 @@ export default {
       this.mapImp.enableCentrelines(false);
       //Disable layers for now
       //this.layers = this.mapImp.getLayers();
-      this.systems = this.mapImp.getSystems();
+      this.systems = processSystems(this.mapImp.getSystems());
+      this.taxonConnectivity = processTaxon(this.flatmapAPI, this.mapImp.taxonIdentifiers);
       this.addResizeButtonToMinimap();
       this.loading = false;
       this.computePathControlsMaximumHeight();
@@ -982,6 +1049,25 @@ export default {
       type: Boolean,
       default: false,
     },
+    openMapOptions: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            display: "Open AC Map",
+            key: "AC"
+          },
+          {
+            display: "Open FC Map",
+            key: "FC"
+          },
+          {
+            display: "Open 3D Human Map",
+            key: "3D"
+          },
+        ]
+      },
+    },
     isLegacy: {
       type: Boolean,
       default: false
@@ -992,7 +1078,7 @@ export default {
     },
     latestChangesMessage: {
       type: String,
-      default: "Search now provide suggested terms. Add new legends. New tilesets. New female map. Improve upstream downstream information.",
+      default: "'Observed In' controls and information are now included in AC maps. System control with FTU information has been added to the FC map.",
     },
     /**
      * State containing state of the flatmap.
@@ -1037,6 +1123,7 @@ export default {
         }
       ],
       systems: [],
+      taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
       hoverVisibilities: [
         { value: false },
@@ -1063,6 +1150,8 @@ export default {
       outlinesRadio: true,
       minimapResizeShow: false,
       minimapSmall: false,
+      currentActive: "",
+      currentHover: "",
     };
   },
   watch: {
@@ -1386,8 +1475,8 @@ export default {
   background-color: #ffffff;
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-  width: 128px;
-  min-width: 128px;
+  width: 178px;
+  min-width: 178px;
 
   .el-row ~ .el-row {
     margin-top: 8px;

package/src/components/MultiFlatmapVuer.vue

@@ -38,6 +38,7 @@
       :isLegacy="item.isLegacy"
       :ref="key"
       :enableOpenMapUI="enableOpenMapUI"
+      :openMapOptions="openMapOptions"
       @view-latest-map="viewLatestMap"
       @resource-selected="FlatmapSelected"
       @ready="FlatmapReady"
@@ -387,6 +388,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    openMapOptions: {
+      type: Array
+    },
     availableSpecies: {
       type: Object,
       default: function() {

package/src/components/SelectionsGroup.vue

@@ -33,7 +33,7 @@
                 <div class="path-visual" :style="getLineStyles(item)"></div>
                 </el-col>
                 <el-col :span="20">
-                  <div class="label-text" :style="getBackgroundStyles(item)">
+                  <div :style="getBackgroundStyles(item)">
                     {{item[labelKey]}}
                   </div>
                 </el-col>
@@ -188,6 +188,7 @@ export default {
   font-weight: normal;
   line-height: 20px;
   margin-left: 8px;
+  white-space: nowrap;
 }
 
 .all-checkbox {

package/src/components/Tooltip.vue

@@ -3,6 +3,9 @@
      <el-main v-if="entry" class="main" v-loading="loading">
       <div class="block" v-if="entry.title">
         <span class="title">{{capitalise(entry.title)}}</span>
+        <div v-if="entry.provenanceTaxonomyLabel && entry.provenanceTaxonomyLabel.length > 0" class="subtitle">
+          {{provSpeciesDescription}}
+        </div>
       </div>
       <div class="block" v-else>
         <span class="title">{{entry.featureId}}</span>
@@ -163,12 +166,18 @@ export default {
       } else {
         return this.originDescriptions.sensory
       }
+    },
+    provSpeciesDescription: function(){
+      let text = "Observed in"
+      this.entry.provenanceTaxonomyLabel.forEach(label => {
+        text += ` ${label},`
+      });
+      text = text.slice(0,-1) // remove last comma
+      text += " species"
+      return text
     }
   },
   methods: {
-    resourceSelected: function(action) {
-      this.$emit("resource-selected", action); 
-    },
     titleCase: function(title){
       return titleCase(title)
     },