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

package/src/components/TreeControls.vue

@@ -0,0 +1,231 @@
+<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;
+  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/components/legends/SvgLegends.vue

@@ -15,7 +15,7 @@
       <text transform="matrix(0.9908 0 0 1 117.5474 171.7975)" class="st3 st4 st5" style="white-space: pre;">Specific anatomical structure</text>
       -->
       <text transform="matrix(0.9908 0 0 1 118.0903 345.5266)" class="st3 st4 st5" style="white-space: pre;">Ganglia</text>
-      <text transform="matrix(0.9908 0 0 1 118.0903 433.1613)" class="st3 st4 st5" style="white-space: pre;">Nerve plexus</text>
+      <text transform="matrix(0.9908 0 0 1 118.0903 433.1613)" class="st3 st4 st5" style="white-space: pre;">Ganglionated nerve plexus</text>
     </svg>
   </div>
 </template>

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}