@abi-software/flatmapvuer 0.3.16 → 0.4.0-beta-1

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.15",
+  "version": "0.4.0-beta-1",
   "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.4",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.12-b.4.tgz",
+      "integrity": "sha512-qQov5PGIesfVeJR6ZQhPOyJvaSkYvcOoHcsXtFQcOkESRNHnIHIL7MgadhT7kHQNEwP7o/ZLY21bkPHnUJCfXQ==",
       "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"
       }
@@ -2001,6 +2001,7 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
+        "vue-loader-v16": "npm:vue-loader@^16.1.0",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -2015,6 +2016,44 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "file-loader": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz",
@@ -2025,6 +2064,20 @@
             "schema-utils": "^2.5.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+          "dev": true,
+          "optional": true
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -2033,6 +2086,42 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "loader-utils": {
+              "version": "2.0.4",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+              "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
         }
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.16",
+  "version": "0.4.0-beta-1",
   "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.4",
     "@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="Nerves"
+            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>
@@ -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.enableSckanPath(payload.key, payload.value);
+      }
+    },
+    checkAllSCKAN: function(payload) {
+      if (this.mapImp) {
+        payload.keys.forEach(key => this.mapImp.enableSckanPath(key, payload.value));
+      }
+    },
+    layersSelected: function(payload) {
       if (this.mapImp) {
-        this.mapImp.showPaths(this.checkedItems);
+        this.mapImp.enableLayer(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;
+    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);
+      }
     },
-    handleCheckAllChange(val) {
-      this.checkedItems = val ? this.pathways.map(a => a.type) : [];
-      this.isIndeterminate = false;
+    checkAllPathways: function(payload) {
       if (this.mapImp) {
-        this.mapImp.showPaths(this.checkedItems);
+        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,21 @@ export default {
   },
   data: function() {
     return {
-      checkedItems: [],
+      layers: [],
       pathways: [],
-      isIndeterminate: false,
-      checkAll: true,
+      sckanDisplay: [
+        {
+          label: "Display Path with SCKAN",
+          key: "VALID",
+        },
+      ],
+      centreLines: [
+        {
+          label: "Display Nerves",
+          key: "centrelines"
+        }
+      ],
+      pathwaysMaxHeight: 1000,
       hoverVisibilities: [
         { value: false },
         { value: false },
@@ -880,12 +950,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 +990,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 +1038,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 +1066,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 +1090,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 +1296,6 @@ export default {
   }
 }
 
-.togglePaths {
-  top: 201px;
-  right: 20px;
-  position: absolute;
-}
-
 .icon-button {
   height: 24px !important;
   width: 24px !important;