@abi-software/flatmapvuer 0.5.3 → 0.5.4-fccb-0

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.3",
+  "version": "0.5.4-fccb-0",
   "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.4",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.4.1-b.4.tgz",
+      "integrity": "sha512-v22Knqr0lSgp87/tnVTE813kKpfjwPyCfxuax8BwjSFV6r2qnWHgVYkB9P8vIA7Cxp6H6TwtPXcQ2TjTYhxQgQ==",
       "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"
       }
@@ -8270,9 +8270,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.1.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.1.0.tgz",
+      "integrity": "sha512-KFarVUUszCEucPwnGsFJtPMQBg/F6lg+SPDmTztKUD/n0YShETjIOdNmm5jpxacEX3+dq50MzlqDr6VH+RtDDA==",
       "requires": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -11887,7 +11887,7 @@
     "simple-html-tokenizer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
-      "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4="
+      "integrity": "sha512-Mc/gH3RvlKvB/gkp9XwgDKEWrSYyefIJPGG8Jk1suZms/rISdUuVEMx5O1WBnTWaScvxXDvGJrZQWblUmQHjkQ=="
     },
     "simple-swizzle": {
       "version": "0.2.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.3",
+  "version": "0.5.4-fccb-0",
   "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.4",
     "@abi-software/svg-sprite": "^0.1.14",
     "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);
@@ -135,6 +136,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"
@@ -302,7 +311,6 @@
         ref="tooltip"
         class="tooltip"
         :entry="tooltipEntry"
-        @resource-selected="resourceSelected"
       />
     </div>
   </div>
@@ -312,7 +320,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 {
@@ -325,7 +334,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(Col);
@@ -335,6 +344,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: [],
@@ -353,6 +421,7 @@ export default {
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
+    TreeControls,
     SelectionsGroup,
     SvgLegends
   },
@@ -467,11 +536,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);
@@ -482,6 +554,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);
@@ -510,12 +592,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);
         }
@@ -544,11 +631,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
@@ -809,7 +893,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();
@@ -966,6 +1051,7 @@ export default {
         }
       ],
       systems: [],
+      taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
       hoverVisibilities: [
         { value: false },
@@ -991,6 +1077,8 @@ export default {
       outlinesRadio: true,
       minimapResizeShow: false,
       minimapSmall: false,
+      currentActive: "",
+      currentHover: "",
     };
   },
   watch: {

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)
     },

package/src/components/TreeControls.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="container">
+    <el-row>
+      <el-col :span="12">
+        <div class="title-text">
+          Systems
+        </div>
+      </el-col>
+    </el-row>
+    <div class="tree-container">
+      <el-tree
+        ref="tree"
+        node-key="key"
+        show-checkbox
+        :check-strictly="false"
+        :data="treeData"
+        :render-after-expand="false"
+        :default-expanded-keys="defaultExpandedKeys"
+        @check="checkChanged"
+      >
+        <span
+          slot-scope="{ node, data }"
+          class="region-tree-node"
+          :class="{
+            activeItem: nodeIsActive(data),
+            hoverItem: nodeIsHover(data),
+          }"
+          @click="changeActiveByNode(data)"
+          @mouseover="changeHoverByNode(data)"
+        >
+          <div :style="getBackgroundStyles(data)">
+            {{ node.label }}
+          </div>
+        </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Checkbox, CheckboxGroup, ColorPicker, Row, Tree } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+locale.use(lang);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(ColorPicker);
+Vue.use(Row);
+Vue.use(Tree);
+
+/**
+ * A vue component for toggling visibility of various regions.
+ */
+export default {
+  name: "TreeControls",
+  props: {
+    treeData: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+    active: {
+      type: String,
+      default: ""
+    },
+    hover: {
+      type: String,
+      default: ""
+    }
+  },
+  data: function () {
+    return {
+      defaultExpandedKeys: ["All"],
+    };
+  },
+  destroyed: function () {
+    this.sortedPrimitiveGroups = undefined;
+  },
+  methods: {
+    nodeIsActive: function(data) {
+      return this.active === data.models;
+    },
+    nodeIsHover: function(data) {
+      return this.hover === data.models;
+    },
+    changeActiveByNode: function(data) {
+      if (data.models) {
+        this.$emit("change-active", data.models);
+      }
+    },
+    changeHoverByNode: function() {
+      //if (data.models) {
+      //  this.$emit("change-active", data.models);
+      //}
+    },
+    checkChanged: function (node, data) {
+      const isChecked = data.checkedKeys.includes(node.key);
+      if (node.key === "All") {
+        this.$emit("checkAll", isChecked);
+      } else {
+        this.$emit("changed", {key: node.key, value: isChecked});
+      }
+    },
+    getBackgroundStyles: function(node) {
+      if ('colour' in node) {
+        return { background: node.colour };
+      }
+      return {};
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/checkbox";
+@import "~element-ui/packages/theme-chalk/src/row";
+@import "~element-ui/packages/theme-chalk/src/tree";
+
+.checkbox-container {
+  display: flex;
+  cursor: pointer;
+}
+
+.tree-controls {
+  position: absolute;
+  bottom: 0px;
+  transition: all 1s ease;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.container {
+  text-align: left;
+  overflow: none;
+  border: 1px solid rgb(220, 223, 230);
+  padding-top: 7px;
+  padding-bottom: 16px;
+  background: #ffffff;
+}
+
+.title-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.all-checkbox {
+  float: right;
+}
+
+.tree-container {
+  width: 260px;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+  margin-top: 6px;
+  scrollbar-width: thin;
+
+  ::v-deep .el-tree {
+    max-height: 240px;
+    min-height: 130px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px #c0c4cc;
+    }
+  }
+
+  ::v-deep .el-tree-node__content {
+    height: 22px;
+  }
+}
+
+::v-deep .el-checkbox__input {
+  &.is-indeterminate,
+  &.is-checked {
+    .el-checkbox__inner {
+      background-color: $app-primary-color;
+      border-color: $app-primary-color;
+    }
+  }
+}
+
+::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__content > label.el-checkbox {
+  display: none;
+}
+
+::v-deep .el-checkbox__label {
+  padding-left: 5px;
+  color: $app-primary-color !important;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+.activeItem {
+  background-color: #bbb !important;
+}
+
+.region-tree-node {
+  flex: 1;
+  color: $app-primary-color !important;
+  display: flex;
+  font-size: 12px;
+  line-height: 14px;
+  padding-left: 0px;
+  background-color: #fff;
+  width: 100%;
+
+}
+
+.hoverItem {
+  background-color: #eee !important;
+}
+
+</style>
+

package/src/services/flatmapQueries.js

@@ -4,6 +4,34 @@ const removeDuplicates = function(arrayOfAnything){
   return [...new Set(arrayOfAnything.map(e => JSON.stringify(e)))].map(e => JSON.parse(e)) 
 }
 
+const cachedLabels = {};
+
+const findTaxonomyLabel = async function(flatmapAPI, taxonomy){
+  if (cachedLabels && cachedLabels.hasOwnProperty(taxonomy)) {
+    return cachedLabels[taxonomy];
+  }
+
+  return new Promise(resolve=>{
+    fetch(`${flatmapAPI}knowledge/label/${taxonomy}`, {
+      method: 'GET',
+    })
+    .then(response => response.json())
+    .then(data => {
+      let label = data.label;
+      if (label === "Mammalia") {
+        label = "Mammalia not otherwise specified";
+      }
+      cachedLabels[taxonomy] = label;
+      resolve(label);
+    })
+    .catch((error) => {
+      console.error('Error:', error);
+      cachedLabels[taxonomy] = taxonomy;
+      resolve(taxonomy);
+    })
+  });
+}
+
 const inArray = function(ar1, ar2){
   let as1 = JSON.stringify(ar1)
   let as2 = JSON.stringify(ar2)
@@ -24,13 +52,21 @@ let FlatmapQueries = function(){
     this.lookUp = []
   }
 
-  this.createTooltipData = function (eventData) {
+  this.createTooltipData = async function (eventData) {
     let hyperlinks = []
     if (eventData.feature.hyperlinks && eventData.feature.hyperlinks.length > 0) {
       hyperlinks = eventData.feature.hyperlinks
     } else {
       hyperlinks = this.urls.map(url=>({url: url, id: "pubmed"}))
     }
+    let taxonomyLabel = undefined;
+    if (eventData.provenanceTaxonomy) {
+      taxonomyLabel = [];
+      for (let i = 0; eventData.provenanceTaxonomy.length > i; i++) {
+        taxonomyLabel.push(await findTaxonomyLabel(this.flatmapAPI, eventData.provenanceTaxonomy[i]))
+      }
+    }
+
     let tooltipData = {
       destinations: this.destinations, 
       origins: this.origins,
@@ -41,6 +77,8 @@ let FlatmapQueries = function(){
       title: eventData.label,
       featureId: eventData.resource,
       hyperlinks: hyperlinks,
+      provenanceTaxonomy: eventData.provenanceTaxonomy,
+      provenanceTaxonomyLabel: taxonomyLabel
     }
     return tooltipData
   }
@@ -371,4 +409,4 @@ let FlatmapQueries = function(){
   }
 }
 
-export {FlatmapQueries}
+export {FlatmapQueries, findTaxonomyLabel}