@abi-software/flatmapvuer 0.3.15 → 0.4.0-beta-0

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.14",
+  "version": "0.4.0-beta-0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/flatmap-viewer": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.9.tgz",
-      "integrity": "sha512-UN7R84Xn2TeK9Fo/IEFSEKuauRroO5KMYKDUu4wfZQw0qzSC79OdJmHBOeIH4pkS+J4FRZfq+prS7cxiCNCyRw==",
+      "version": "2.2.12-b.3",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.12-b.3.tgz",
+      "integrity": "sha512-gY/rq0ovzuYgOS4RY4l5GNTiy6yPsS0VbBb4rbsOPrklRKsWiqCr93d3i1hbK4Q0yiW9wDQCZnVztHlVxyV/Hg==",
       "requires": {
         "@babel/runtime": "^7.10.4",
         "@turf/area": "^6.0.1",
@@ -15,7 +15,7 @@
         "@turf/helpers": "^6.1.4",
         "@turf/projection": "^6.5.0",
         "bezier-js": "^6.1.0",
-        "maplibre-gl": ">=1.15.3",
+        "maplibre-gl": ">=2.4.0",
         "minisearch": "^2.2.1",
         "polylabel": "^1.1.0"
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.15",
+  "version": "0.4.0-beta-0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
@@ -21,7 +21,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "2.2.9",
+    "@abi-software/flatmap-viewer": "^2.2.12-b.3",
     "@abi-software/svg-sprite": "^0.1.14",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/App.vue

@@ -58,11 +58,11 @@ export default {
     },
     FlatmapReady: function(component) {
       let taxon = component.mapImp.describes;
-      let id = component.mapImp.addMarker("UBERON:0000948", "simulation");
+      let id = component.mapImp.addMarker("UBERON:0000948");
       component.enablePanZoomEvents(true);
-      component.showPathwaysDrawer(false);
+      //component.showPathwaysDrawer(false);
       console.log(taxon, id);
-      component.searchAndShowResult("heart");
+      //component.searchAndShowResult("heart");
     },
     panZoomcallback: function(payload) {
       this.payload = payload
@@ -82,7 +82,7 @@ export default {
         "Kember":{taxo: "ABI:1000001", displayWarning:true},
         "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true}, 
         "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning:true},
-        "Functional Connectivity": {id: "fc-cardio", displayWarning:true},
+        "Functional Connectivity": {taxo: "FunctionalConnectivity", displayWarning:true},
         "digestive tract":{taxo: "digestive tract", displayWarning:true}
       },
       tooltipContent: undefined,
@@ -92,12 +92,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/current/flatmap/v3/"
+      flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
     }
   },

package/src/components/FlatmapVuer.vue

@@ -131,10 +131,11 @@
       <div class="pathway-location" :class="{ open: drawerOpen, close: !drawerOpen }">
         <div
           class="pathway-container"
-          v-if="pathways.length > 0 && pathControls"
+          :style="{'max-height': pathwaysMaxHeight + 'px'}"
+          v-if="pathControls"
           v-popover:checkBoxPopover
         >
-          <svg-legends class= "svg-legends-container"/>
+          <svg-legends v-if="!isFC" class="svg-legends-container"/>
           <el-popover
             content="Find these markers for data"
             placement="right"
@@ -150,41 +151,56 @@
             v-html="flatmapMarker"
             v-popover:markerPopover
           ></div>
-          <el-row>
-            <el-col :span="12">
-              <div class="pathways-display-text">Pathways</div>
-            </el-col>
-            <el-col :span="12">
-              <el-checkbox
-                class="all-checkbox"
-                :indeterminate="isIndeterminate"
-                v-model="checkAll"
-                @change="handleCheckAllChange"
-              >Display all</el-checkbox>
-            </el-col>
-          </el-row>
-          <el-checkbox-group
-            v-model="checkedItems"
-            size="small"
-            class="checkbox-group"
-            @change="handleCheckedItemsChange"
-          >
-            <div class="checkbox-group-inner">
-              <el-row v-for="item in pathways" :key="item.type" :label="item.type">
-                <div class="checkbox-container">
-                  <el-checkbox
-                    class="my-checkbox"
-                    :label="item.type"
-                    @change="visibilityToggle()"
-                    :checked="true"
-                  >
-                    <div class="path-visual" :class="item.type"></div>
-                    {{item.label}}
-                  </el-checkbox>
-                </div>
-              </el-row>
-            </div>
-          </el-checkbox-group>
+          <dynamic-legends
+            v-if="isFC && systems && systems.length > 0"
+            title="Systems"
+            identifierKey="name"
+            :lists="systems"
+            key="systemslegends"
+          />
+          <selections-group
+            v-if="!isFC && centreLines && centreLines.length > 0"
+            title="Centrelines"
+            labelKey="label"
+            identifierKey="key"
+            :selections="centreLines"
+            @changed="centreLinesSelected"
+            ref="centrelinesSelection"
+            key="centrelinesSelection"
+          />
+          <selections-group
+            v-if="isFC && sckanDisplay && sckanDisplay.length > 0"
+            title="SCKAN"
+            labelKey="label"
+            identifierKey="key"
+            :selections="sckanDisplay"
+            @changed="sckanSelected"
+            @checkAll="checkAllSCKAN"
+            ref="skcanSelection"
+            key="skcanSelection"
+          />
+          <selections-group
+            v-if="layers && layers.length > 0"
+            title="Layers"
+            labelKey="description"
+            identifierKey="id"
+            :selections="layers"
+            @changed="layersSelected"
+            @checkAll="checkAllLayers"
+            ref="layersSelection"
+            key="layersSelection"
+          />
+          <selections-group
+            v-if="pathways && pathways.length > 0"
+            title="Pathways"
+            labelKey="label"
+            identifierKey="type"
+            :selections="pathways"
+            @changed="pathwaysSelected"
+            @checkAll="checkAllPathways"
+            ref="pathwaysSelection"
+            key="pathwaysSelection"
+          />
         </div>
         <div
           @click="toggleDrawer"
@@ -200,6 +216,7 @@
         width="175"
         :appendToBody="false"
         trigger="click"
+
         popper-class="background-popper"
       >
         <el-row class="backgroundText">Organs display</el-row>
@@ -229,7 +246,7 @@
         </el-row>
       </el-popover>
       <el-popover
-        content="Change background color"
+        content="Change settings"
         placement="right"
         v-model="hoverVisibilities[3].value"
         :appendToBody="false"
@@ -260,11 +277,11 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import Tooltip from "./Tooltip";
+import SelectionsGroup from "./SelectionsGroup.vue";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
-import SvgLegends from "./legends/Legends";
+import DynamicLegends from "./legends/DynamicLegends.vue";
+import SvgLegends from "./legends/SvgLegends";
 import {
-  Checkbox,
-  CheckboxGroup,
   Col,
   Loading,
   Radio,
@@ -276,8 +293,6 @@ import locale from "element-ui/lib/locale";
 import flatmapMarker from "../icons/flatmap-marker";
 
 locale.use(lang);
-Vue.use(Checkbox);
-Vue.use(CheckboxGroup);
 Vue.use(Col);
 Vue.use(Loading.directive);
 Vue.use(Radio);
@@ -285,18 +300,14 @@ Vue.use(RadioGroup);
 Vue.use(Row);
 const ResizeSensor = require("css-element-queries/src/ResizeSensor");
 
-const mapResize = map => {
-  return () => {
-    if (map) map.resize();
-  };
-};
-
 export default {
   name: "FlatmapVuer",
   components: {
+    DynamicLegends,
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
+    SelectionsGroup,
     SvgLegends
   },
   beforeCreate: function() {
@@ -351,9 +362,18 @@ export default {
     resetView: function() {
       if (this.mapImp) {
         this.mapImp.resetMap();
-        this.checkedItems = this.mapImp.pathTypes().map(item => item.type);
-        this.isIndeterminate = false;
-        this.checkAll = true;
+        if (this.$refs.centrelinesSelection) {
+          this.$refs.centrelinesSelection.reset();
+        }
+        if (this.$refs.skcanSelection) {
+          this.$refs.skcanSelection.reset();
+        }
+        if (this.$refs.layersSelection) {
+          this.$refs.layersSelection.reset();
+        }
+        if (this.$refs.pathwaysSelection) {
+          this.$refs.pathwaysSelection.reset();
+        }
       }
     },
     /**
@@ -374,22 +394,39 @@ export default {
         this.mapImp.zoomOut();
       }
     },
-    visibilityToggle: function() {
+    centreLinesSelected: function(payload) {
+      if (this.mapImp) {
+        this.mapImp.enableCentrelines(payload.value);
+      }
+    },
+    sckanSelected: function(payload) {
       if (this.mapImp) {
-        this.mapImp.showPaths(this.checkedItems);
+        this.mapImp.enableSckanPath(payload.key, payload.value);
       }
     },
-    handleCheckedItemsChange: function(value) {
-      let checkedCount = value.length;
-      this.checkAll = checkedCount === this.pathways.length;
-      this.isIndeterminate =
-        checkedCount > 0 && checkedCount < this.pathways.length;
+    checkAllSCKAN: function(payload) {
+      if (this.mapImp) {
+        payload.keys.forEach(key => this.mapImp.enableSckanPath(key, payload.value));
+      }
     },
-    handleCheckAllChange(val) {
-      this.checkedItems = val ? this.pathways.map(a => a.type) : [];
-      this.isIndeterminate = false;
+    layersSelected: function(payload) {
       if (this.mapImp) {
-        this.mapImp.showPaths(this.checkedItems);
+        this.mapImp.enableLayer(payload.key, payload.value);
+      }
+    },
+    checkAllLayers: function(payload) {
+      if (this.mapImp) {
+        payload.keys.forEach(key => this.mapImp.enableLayer(key, payload.value));
+      }
+    },
+    pathwaysSelected: function(payload) {
+      if (this.mapImp) {
+        this.mapImp.enablePath(payload.key, payload.value);
+      }
+    },
+    checkAllPathways: function(payload) {
+      if (this.mapImp) {
+        payload.keys.forEach(key => this.mapImp.enablePath(key, payload.value));
       }
     },
     enablePanZoomEvents: function(flag) {
@@ -699,7 +736,8 @@ export default {
             //debug: true,
             featureInfo: this.featureInfo,
             "min-zoom": this.minZoom,
-            pathControls: false,
+            layerControl: true,
+            pathControls: true,
             searchable: this.searchable,
             tooltips: this.tooltips,
             minimap: minimap
@@ -720,19 +758,40 @@ export default {
           this.restoreMapState(this._stateToBeSet);
       }
     },
+    computePathControlsMaximumHeight() {
+      const elem = this.$refs.display;
+      if (elem) {
+        const computed = getComputedStyle(elem);
+        const padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
+        const height = elem.clientHeight - padding;
+        this.pathwaysMaxHeight = height - 150;
+      }
+    },
+    mapResize: function() {
+      if (this.mapImp) {
+        this.mapImp.resize();
+      }
+      this.computePathControlsMaximumHeight();
+    },
     onFlatmapReady: function(){
       // onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
-
       this.sensor = new ResizeSensor(
         this.$refs.display,
-        mapResize(this.mapImp)
+        this.mapResize
       );
+      if (this.mapImp.options && this.mapImp.options.style === "functional") {
+        this.isFC = true;
+      }
       this.mapImp.setBackgroundOpacity(1);
       this.backgroundChangeCallback(this.currentBackground);
       this.pathways = this.mapImp.pathTypes();
-      this.$emit("ready", this);
+      this.layers = this.mapImp.getLayers();
+      this.systems = this.mapImp.getSystems();
       this.addResizeButtonToMinimap();
       this.loading = false;
+      this.computePathControlsMaximumHeight();
+      this.drawerOpen = true;
+      this.$emit("ready", this);
     },
     showMinimap: function(flag) {
       if (this.mapImp)
@@ -866,10 +925,26 @@ export default {
   },
   data: function() {
     return {
-      checkedItems: [],
+      layers: [],
       pathways: [],
-      isIndeterminate: false,
-      checkAll: true,
+      sckanDisplay: [
+        {
+          label: "Path consistent with SCKAN",
+          key: "VALID",
+        },
+        {
+          label: "Path inconsistent with SCKAN",
+          key: "INVALID",
+          enable: false,
+        }
+      ],
+      centreLines: [
+        {
+          label: "Centrelines",
+          key: "centrelines"
+        }
+      ],
+      pathwaysMaxHeight: 1000,
       hoverVisibilities: [
         { value: false },
         { value: false },
@@ -880,12 +955,13 @@ export default {
         { value: false },
         { value: false }
       ],
+      isFC: false,
       inHelp: false,
       currentBackground: "white",
       availableBackground: ["white", "lightskyblue", "black"],
       loading: false,
       flatmapMarker: flatmapMarker,
-      drawerOpen: true,
+      drawerOpen: false,
       tooltipContent: { featureIds: []},
       colourRadio: true,
       outlinesRadio: true,
@@ -919,8 +995,6 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 @import "~element-ui/packages/theme-chalk/src/button";
-@import "~element-ui/packages/theme-chalk/src/checkbox";
-@import "~element-ui/packages/theme-chalk/src/checkbox-group";
 @import "~element-ui/packages/theme-chalk/src/loading";
 @import "~element-ui/packages/theme-chalk/src/row";
 
@@ -969,53 +1043,6 @@ export default {
   vertical-align: 5px;
 }
 
-.path-visual {
-  margin: 3px 0;
-  height: 3px;
-  width: 25px;
-  margin-right: 5px;
-  display: inline-block;
-  &.cns {
-    background: #9b1fc1;
-  }
-  &.lcn {
-    background: #f19e38;
-  }
-  &.para-pre {
-    background: #3f8f4a;
-  }
-  &.para-post {
-    background: repeating-linear-gradient(
-      90deg,
-      #3f8f4a,
-      #3f8f4a 6px,
-      transparent 0,
-      transparent 9px
-    );
-  }
-  &.sensory {
-    background: #2a62f6;
-  }
-  &.somatic {
-    background: #98561d;
-  }
-  &.symp-pre {
-    background: #ea3423;
-  }
-  &.symp-post {
-    background: repeating-linear-gradient(
-      90deg,
-      #ea3423,
-      #ea3423 6px,
-      transparent 0,
-      transparent 9px
-    );
-  }
-  &.other {
-    background: #888;
-  }
-}
-
 .flatmap-container {
   height: 100%;
   width: 100%;
@@ -1044,47 +1071,20 @@ export default {
   float: left;
   padding-left: 16px;
   padding-right: 18px;
-  max-height: calc(100% - 140px);
   text-align: left;
   overflow: auto;
   border: 1px solid rgb(220, 223, 230);
   padding-bottom: 16px;
   background: #ffffff;
-}
 
-.pathways-display-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;
-}
-
-.checkbox-container {
-  display: flex;
-  cursor: pointer;
-}
-
-.checkbox-group {
-  width: 260px;
-  border: 1px solid rgb(144, 147, 153);
-  border-radius: 4px;
-  background: #ffffff;
-}
-
-.my-checkbox {
-  background-color: #fff;
-  width: 100%;
-}
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
 
-.checkbox-group-inner {
-  padding: 18px;
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px #c0c4cc;
+  }
 }
 
 .flatmap-marker-help {
@@ -1095,29 +1095,6 @@ export default {
   left: 30px;
 }
 
-::v-deep .el-checkbox__label {
-  padding-left: 5px;
-  color: $app-primary-color;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0px;
-  line-height: 14px;
-}
-
-::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-checkbox__label {
-  color: $app-primary-color !important;
-}
-
 .el-dropdown-link {
   cursor: pointer;
   color: #409eff;
@@ -1324,12 +1301,6 @@ export default {
   }
 }
 
-.togglePaths {
-  top: 201px;
-  right: 20px;
-  position: absolute;
-}
-
 .icon-button {
   height: 24px !important;
   width: 24px !important;