@abi-software/flatmapvuer 0.4.0 → 0.4.1-beta.0

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.4.0",
+  "version": "0.4.1-beta.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/flatmap-viewer": {
-      "version": "2.2.13",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.13.tgz",
-      "integrity": "sha512-5t6jlHPHFQyvx53tHY8OM8j8Abs0oii4jXCSCNPOZAh7mRvrN1sWafXt4kVlgFeUV4IcDBan6Ihh7mx+ejHyNw==",
+      "version": "2.2.14-b.1",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.14-b.1.tgz",
+      "integrity": "sha512-OZ1VAf8K7DU/EO4UYlzQHAOA0NLnGXHtSl3KZTesAbWW7JiwDf+iVpKFx0yXOrKGwkeHkgLFf8V3QdwLWiY/1Q==",
       "requires": {
         "@babel/runtime": "^7.10.4",
         "@turf/area": "^6.0.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.4.0",
+  "version": "0.4.1-beta.0",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
@@ -22,7 +22,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.2.13",
+    "@abi-software/flatmap-viewer": "^2.2.14-b.1",
     "@abi-software/svg-sprite": "^0.1.14",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/App.vue

@@ -20,9 +20,10 @@
     <MultiFlatmapVuer ref="multi" :availableSpecies="availableSpecies" 
       @resource-selected="FlatmapSelected" :minZoom="minZoom"
       @pan-zoom-callback="panZoomcallback"
-      @ready="FlatmapReady" :featureInfo="featureInfo" :searchable="searchable" 
+      @ready="FlatmapReady" :featureInfo="featureInfo" :searchable="searchable"
+      :layerControl="layerControl"
       :initial="initial" :pathControls="pathControls" :helpMode="helpMode"
-      :displayMinimap=true :flatmapAPI="flatmapAPI"/>
+      :displayMinimap="true" :flatmapAPI="flatmapAPI"/>
   </div>
 </template>
 
@@ -53,10 +54,12 @@ export default {
         this.$refs.multi.setState(this.mapSettings.pop());
     },
     FlatmapSelected: function(resource) {
-      if (resource.eventType === "click")
+      if (resource.eventType === "click") {
         console.log('resource', resource);
+      }
     },
     FlatmapReady: function(component) {
+      console.log(component);
       let taxon = component.mapImp.describes;
       let id = component.mapImp.addMarker("UBERON:0000948");
       component.enablePanZoomEvents(true);
@@ -73,6 +76,7 @@ export default {
       featureInfo: true,
       searchable: true,
       pathControls: true,
+      layerControl: true,
       minZoom: 4,
       availableSpecies : {
         "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
@@ -92,13 +96,13 @@ export default {
         position: "absolute"
       },
       displayCloseButton: false,
-      initial: "Rat",
+      initial: "Functional Connectivity",
       helpMode: false,
       mapSettings: [],
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
       //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/current/flatmap/v3/"
+      flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/"
       //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
     }

package/src/components/ExternalResourceCard.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="resource-container">
+    <template v-for="resource in resources">
+      <div class="resource" :key="resource.id">
+        <el-button  v-if="resource.id === 'pubmed'" class="button" icon="el-icon-notebook-2" @click="openUrl(resource.url)">
+          Open publications in pubmed
+        </el-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Button } from "element-ui";
+Vue.use(Button);
+
+export default {
+  name: "ExternalResourceCard",
+  props: {
+    resources: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data: function() {
+    return {
+      pubmeds: [],
+      pubmedIds: [],
+    };
+  },
+  methods: {
+    capitalise: function(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+    openUrl: function(url){
+      window.open(url, '_blank')
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/button";
+
+.attribute-title{
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.attribute-content{
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.el-link {
+  color: $app-primary-color;
+  text-decoration: none;
+  word-wrap: break-word;
+  &:hover, &:focus{
+    color: $app-primary-color;
+  }
+}
+
+::v-deep .el-carousel__button {
+  background-color: $app-primary-color;  
+}
+
+.attribute-title{
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  background-color: $app-primary-color;
+  color: #fff;
+  &:hover{
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+  &+.button {
+    margin-top: 10px !important;
+    background-color: $app-primary-color;
+    color: #fff; 
+  }
+}
+
+</style>

package/src/components/FlatmapVuer.vue

@@ -151,14 +151,18 @@
             v-html="flatmapMarker"
             v-popover:markerPopover
           ></div>
-          <dynamic-legends
+          <selections-group
             v-if="isFC && systems && systems.length > 0"
             title="Systems"
+            labelKey="name"
             identifierKey="name"
-            :lists="systems"
-            key="systemslegends"
+            :selections="systems"
+            colourStyle="background"
+            @changed="systemSelected"
+            @checkAll="checkAllSystems"
+            ref="systemsSelection"
+            key="systemsSelection"
           />
-          <!--
           <selections-group
             v-if="!isFC && centreLines && centreLines.length > 0"
             title="Nerves"
@@ -169,7 +173,6 @@
             ref="centrelinesSelection"
             key="centrelinesSelection"
           />
-          -->
           <selections-group
             v-if="isFC && sckanDisplay && sckanDisplay.length > 0"
             title="SCKAN"
@@ -197,6 +200,7 @@
             title="Pathways"
             labelKey="label"
             identifierKey="type"
+            colourStyle="line"
             :selections="pathways"
             @changed="pathwaysSelected"
             @checkAll="checkAllPathways"
@@ -268,7 +272,7 @@
       <Tooltip
         ref="tooltip"
         class="tooltip"
-        :content="tooltipContent"
+        :entry="tooltipEntry"
         @resource-selected="resourceSelected"
       />
     </div>
@@ -281,7 +285,6 @@ import Vue from "vue";
 import Tooltip from "./Tooltip";
 import SelectionsGroup from "./SelectionsGroup.vue";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
-import DynamicLegends from "./legends/DynamicLegends.vue";
 import SvgLegends from "./legends/SvgLegends";
 import {
   Col,
@@ -293,6 +296,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";
 
 locale.use(lang);
 Vue.use(Col);
@@ -302,10 +306,21 @@ Vue.use(RadioGroup);
 Vue.use(Row);
 const ResizeSensor = require("css-element-queries/src/ResizeSensor");
 
+const createUnfilledTooltipData = function (){
+  return {
+    destinations: [],
+    origins: [],
+    components: [],
+    destinationsWithDatasets: [],
+    originsWithDatasets: [],
+    componentsWithDatasets: [],
+    resource: undefined
+  }
+}
+
 export default {
   name: "FlatmapVuer",
   components: {
-    DynamicLegends,
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
@@ -373,6 +388,9 @@ export default {
         if (this.$refs.layersSelection) {
           this.$refs.layersSelection.reset();
         }
+        if (this.$refs.systemsSelection) {
+          this.$refs.pathwaysSelection.reset();
+        }
         if (this.$refs.pathwaysSelection) {
           this.$refs.pathwaysSelection.reset();
         }
@@ -398,7 +416,6 @@ export default {
     },
     centreLinesSelected: function(payload) {
       if (this.mapImp) {
-        console.log(payload.value)
         this.mapImp.enableCentrelines(payload.value);
       }
     },
@@ -412,6 +429,16 @@ export default {
         payload.keys.forEach(key => this.mapImp.enableSckanPath(key, payload.value));
       }
     },
+    systemSelected: function(payload) {
+      if (this.mapImp) {
+        this.mapImp.enableSystem(payload.key, payload.value);
+      }
+    },
+    checkAllSystems: function(payload) {
+      if (this.mapImp) {
+        payload.keys.forEach(key => this.mapImp.enableSystem(key, payload.value));
+      }
+    },
     layersSelected: function(payload) {
       if (this.mapImp) {
         this.mapImp.enableLayer(payload.key, payload.value);
@@ -452,9 +479,9 @@ export default {
             userData: args,
             eventType: eventType
           };
-          // Disable the nueron pop up for now.
-          if (data && data.type !== "marker")
+          if (data && data.type !== "marker" && eventType === "click"){
             this.checkAndCreatePopups(payload);
+          }
           this.$emit("resource-selected", payload);
         } else {
           this.$emit("pan-zoom-callback", data);
@@ -462,18 +489,17 @@ export default {
       };
     },
     // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
-    checkAndCreatePopups: function(data) {
-      if (
-        data.eventType == "click" &&
-        this.hasNeuronTooltip(data)
-      ) {
+    checkAndCreatePopups:  async function(data) {
+      // Call flatmap database to get the connection data
+      let connections = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(data)
+      if(!connections){
+        if(data.feature.hyperlinks){
+          this.resourceForTooltip =  data.resource[0];
+          this.createTooltipFromNeuronCuration(data);
+        }
+      } else {
+        this.resourceForTooltip =  data.resource[0];
         this.createTooltipFromNeuronCuration(data);
-        this.mapImp.showPopup(
-          this.mapImp.modelFeatureIds(data.resource[0])[0],
-          this.$refs.tooltip.$el,
-          { className: "flatmapvuer-popover", positionAtLastClick: true }
-        );
-        this.popUpCssHacks();
       }
     },
     popUpCssHacks: function() {
@@ -491,69 +517,9 @@ export default {
     resourceSelected: function(action) {
       this.$emit("resource-selected", action);
     },
-    hasNeuronTooltip: function(data) {
-
-      // neural data check
-      if (data.resource[0]){
-        if (data.resource[0].includes('ilxtr:neuron')){
-          return true
-        }
-      }
-      // annotated with datset check
-      if (data.dataset) {
-        return true
-      }
-
-      // if there is no cuff, neural data, or dataset we do not display neuron tooltip
-      return false
-
-    },
     createTooltipFromNeuronCuration: function(data) {
-      const feature = data.resource[0];
-      let content = {
-        title: undefined,
-        components: undefined,
-        start: undefined,
-        distribution: undefined,
-        actions: []
-      };
-
-      this.tooltipVisible = false;
-
-      // neural data check
-      if (feature){
-        if (feature.includes('ilxtr:neuron')){
-          this.tooltipVisible = true;
-          this.tooltipContent = content;
-          this.tooltipContent.uberon = feature;
-          this.tooltipContent.source = data.feature.source;
-          this.tooltipContent.title = data.label;
-          this.tooltipContent.featureIds = [feature];
-          this.tooltipContent.actions.push({
-            title: "Search for datasets",
-            label: "Neuron Datasets",
-            resource: feature.split(":")[1],
-            type: "Neuron Search",
-            feature: feature,
-            nervePath: true
-          });
-        }
-      }
-      // annotated with datset check
-      if (data.dataset) {
-        this.tooltipVisible = true;
-        this.tooltipContent = content;
-        this.tooltipContent.uberon = feature;
-        this.tooltipContent.source = data.feature.source;
-        this.tooltipContent.title = data.label;
-        this.tooltipContent.actions.push({
-          title: "View dataset",
-          resource: data.dataset,
-          type: "URL",
-          feature: feature,
-          nervePath: false
-        });
-      }
+      this.tooltipEntry = this.flatmapQueries.createTooltipData(data);
+      this.displayTooltip();
     },
     // Keeping this as an API
     showPopup: function(featureId, node, options) {
@@ -585,9 +551,11 @@ export default {
     },
     addResizeButtonToMinimap: function(){
       let minimapEl = this.$refs.flatmapContainer.querySelector('.maplibregl-ctrl-minimap');
-      this.$refs.minimapResize.parentNode.removeChild(this.$refs.minimapResize);
-      minimapEl.appendChild(this.$refs.minimapResize);
-      this.minimapResizeShow = true;
+      if (minimapEl){
+        this.$refs.minimapResize.parentNode.removeChild(this.$refs.minimapResize);
+        minimapEl.appendChild(this.$refs.minimapResize);
+        this.minimapResizeShow = true;
+      }
     },
     setHelpMode: function(helpMode) {
       if (helpMode) {
@@ -617,6 +585,14 @@ export default {
         clearTimeout(this.tooltipWait);
       }
     },
+    displayTooltip: function() {
+      this.mapImp.showPopup(
+        this.mapImp.modelFeatureIds(this.resourceForTooltip)[0],
+        this.$refs.tooltip.$el,
+        { className: "flatmapvuer-popover", positionAtLastClick: true }
+      );
+      this.popUpCssHacks();
+    },
     openFlatmapHelpPopup: function() {
       if (this.mapImp) {
         let heartId = this.mapImp.featureIdsForModel("UBERON:0000948")[0];
@@ -789,8 +765,8 @@ export default {
       this.backgroundChangeCallback(this.currentBackground);
       this.pathways = this.mapImp.pathTypes();
       this.mapImp.enableCentrelines(false);
-      //this.layers = this.mapImp.getLayers();
-      //this.systems = this.mapImp.getSystems();
+      this.layers = this.mapImp.getLayers();
+      this.systems = this.mapImp.getSystems();
       this.addResizeButtonToMinimap();
       this.loading = false;
       this.computePathControlsMaximumHeight();
@@ -860,12 +836,16 @@ export default {
     },
     pathControls: {
       type: Boolean,
-      default: true
+      default: false
     },
     searchable: {
       type: Boolean,
       default: false
     },
+    layerControl: {
+        type: Boolean,
+        default: false
+    },
     tooltips: {
       type: Boolean,
       default: true
@@ -943,6 +923,7 @@ export default {
           key: "centrelines"
         }
       ],
+      systems: [],
       pathwaysMaxHeight: 1000,
       hoverVisibilities: [
         { value: false },
@@ -960,12 +941,14 @@ export default {
       availableBackground: ["white", "lightskyblue", "black"],
       loading: false,
       flatmapMarker: flatmapMarker,
+      tooltipEntry: createUnfilledTooltipData(),
+      connectivityTooltipVisible: false,
+      resourceForTooltip: undefined,
       drawerOpen: false,
-      tooltipContent: { featureIds: []},
       colourRadio: true,
       outlinesRadio: true,
       minimapResizeShow: false,
-      minimapSmall: false
+      minimapSmall: false,
     };
   },
   watch: {
@@ -987,6 +970,7 @@ export default {
     const flatmap = require("@abi-software/flatmap-viewer");
     this.mapManager = new flatmap.MapManager(this.flatmapAPI);
     if (this.renderAtMounted) this.createFlatmap();
+    this.flatmapQueries = new FlatmapQueries(this.sparcAPI, this.flatmapAPI);
   }
 };
 </script>

package/src/components/MultiFlatmapVuer.vue

@@ -46,6 +46,7 @@
       :minZoom="minZoom"
       :pathControls="pathControls"
       :searchable="searchable"
+      :layerControl="layerControl"
       :helpMode="helpMode"
       :renderAtMounted="renderAtMounted"
       :displayMinimap="displayMinimap"
@@ -349,6 +350,10 @@ export default {
       type: Boolean,
       default: false
     },
+    layerControl: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Initial species for the flatmap.
      * This value will be ignored if a valid state object is provided.

package/src/components/SelectionsGroup.vue

@@ -28,8 +28,16 @@
               :label="item[identifierKey]"
               @change="visibilityToggle(item[identifierKey], $event)"
               :checked="!(('enable' in item) && item.enable === false)">
-              <div class="path-visual" :style="getVisualStyles(item)"></div>
-              {{item[labelKey]}}
+              <el-row class="checkbox-row">
+                <el-col :span="4">
+                <div class="path-visual" :style="getLineStyles(item)"></div>
+                </el-col>
+                <el-col :span="20">
+                  <div class="label-text" :style="getBackgroundStyles(item)">
+                    {{item[labelKey]}}
+                  </div>
+                </el-col>
+              </el-row>
             </el-checkbox>
           </div>
         </el-row>
@@ -82,7 +90,7 @@ export default {
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.selections.length;
     },
-    handleCheckAllChange(val) {
+    handleCheckAllChange: function(val) {
       this.checkedItems = val ? this.selections.map(a => a[this.identifierKey]) : [];
       this.$emit("checkAll",
       {
@@ -90,21 +98,30 @@ export default {
         value: val
       });
     },
-    getVisualStyles(item) {
-      if ('colour' in item) {
+    getBackgroundStyles: function(item) {
+      if ('colour' in item && this.colourStyle === "background") {
+        return { background: item.colour };
+      }
+      return {};
+    },
+    getLineStyles: function(item) {
+      if ('colour' in item && this.colourStyle === "line") {
         if (('dashed' in item) && (item.dashed === true)) {
           const background = `repeating-linear-gradient(90deg,${item.colour},${item.colour} 6px,transparent 0,transparent 9px)`;
-          return {'background':background};
+          return { background };
         }
         else {
-          const background = item.colour;
-          return {background};
+          return { background: item.colour };
         }
       }
-      return {};
+      return { display: "None"};
     }
   },
   props: {
+    colourStyle: {
+      type: String,
+      default: "line"   
+    },
     identifierKey: {
       type: String,
       default: "id"
@@ -151,10 +168,6 @@ export default {
 @import "~element-ui/packages/theme-chalk/src/checkbox-group";
 @import "~element-ui/packages/theme-chalk/src/row";
 
-.selection-container {
-  margin-top:5px;
-}
-
 .path-visual {
   margin: 3px 0;
   height: 3px;
@@ -163,6 +176,10 @@ export default {
   display: inline-block;
 }
 
+.selections-container {
+  padding-top: 5px;
+}
+
 .checkall-display-text {
   width: 59px;
   height: 20px;
@@ -205,6 +222,7 @@ export default {
   font-weight: 500;
   letter-spacing: 0px;
   line-height: 14px;
+  width: 100%;
 }
 
 ::v-deep .el-checkbox__input {
@@ -221,5 +239,10 @@ export default {
   color: $app-primary-color !important;
 }
 
+.checkbox-row {
+  width: 100%;
+  top: 2px;
+}
+
 </style>