@abi-software/flatmapvuer 1.5.6-beta.3 → 1.5.6-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.5.6-beta.3",
+  "version": "1.5.6-beta.5",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,7 +43,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^3.2.2",
+    "@abi-software/flatmap-viewer": "^3.2.5",
     "@abi-software/map-utilities": "^1.1.2",
     "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "^1.0.1",

package/src/components/FlatmapVuer.vue

@@ -257,7 +257,7 @@ Please use `const` to assign meaningful names to them...
           <div
             class="pathway-location"
             :class="{ open: drawerOpen, close: !drawerOpen }"
-            v-show="!(disableUI || isCentreLine)"
+            v-show="!disableUI"
           >
             <div
               class="pathway-container"
@@ -388,17 +388,6 @@ Please use `const` to assign meaningful names to them...
                 ref="taxonSelection"
                 key="taxonSelection"
               />
-              <selections-group
-                v-if="!(isCentreLine || isFC)  && centreLines && centreLines.length > 0"
-                title="Nerves"
-                labelKey="label"
-                identifierKey="key"
-                :selections="centreLines"
-                @changed="centreLinesSelected"
-                @selections-data-changed="onSelectionsDataChanged"
-                ref="centrelinesSelection"
-                key="centrelinesSelection"
-              />
             </div>
             <div
               @click="toggleDrawer"
@@ -519,8 +508,8 @@ Please use `const` to assign meaningful names to them...
               class="flatmap-radio"
               @change="setFlightPath3D"
             >
-            <el-radio :label="false">2D</el-radio>
-            <el-radio :label="true">3D</el-radio>
+            <el-radio :value="false">2D</el-radio>
+            <el-radio :value="true">3D</el-radio>
             </el-radio-group>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -531,8 +520,8 @@ Please use `const` to assign meaningful names to them...
               class="flatmap-radio"
               @change="setColour"
             >
-              <el-radio :label="true">Colour</el-radio>
-              <el-radio :label="false">Greyscale</el-radio>
+              <el-radio :value="true">Colour</el-radio>
+              <el-radio :value="false">Greyscale</el-radio>
             </el-radio-group>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -543,8 +532,8 @@ Please use `const` to assign meaningful names to them...
               class="flatmap-radio"
               @change="setOutlines"
             >
-              <el-radio :label="true">Show</el-radio>
-              <el-radio :label="false">Hide</el-radio>
+              <el-radio :value="true">Show</el-radio>
+              <el-radio :value="false">Hide</el-radio>
             </el-radio-group>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -1203,7 +1192,7 @@ export default {
     setColour: function (flag) {
       this.colourRadio = flag
       if (this.mapImp) {
-        this.mapImp.setColour({ colour: flag, outline: this.outlinesRadio })
+        this.mapImp.setPaint({ colour: flag, outline: this.outlinesRadio })
       }
     },
     /**
@@ -1215,7 +1204,7 @@ export default {
     setOutlines: function (flag) {
       this.outlineRadio = flag
       if (this.mapImp) {
-        this.mapImp.setColour({ colour: this.colourRadio, outline: flag })
+        this.mapImp.setPaint({ colour: this.colourRadio, outline: flag })
       }
     },
     /**
@@ -1226,9 +1215,6 @@ export default {
     resetView: function () {
       if (this.mapImp) {
         this.mapImp.resetMap()
-        if (this.$refs.centrelinesSelection) {
-          this.$refs.centrelinesSelection.reset()
-        }
         if (this.$refs.skcanSelection) {
           this.$refs.skcanSelection.reset()
         }
@@ -1263,18 +1249,6 @@ export default {
         this.mapImp.zoomOut()
       }
     },
-    /**
-     * @public
-     * Function to show or hide centrelines and nodes.
-     * The parameter ``payload`` is an object with a boolean property, ``value``,
-     * ``payload.value = true/false``.
-     * @arg {Object} `payload`
-     */
-    centreLinesSelected: function (payload) {
-      if (this.mapImp && this.mapImp.enableCentrelines) {
-        this.mapImp.enableCentrelines(payload.value)
-      }
-    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -2347,15 +2321,10 @@ export default {
       console.log(this.mapImp.options)
       if (this.mapImp.options?.style === 'functional') {
         this.isFC = true
-      } else if (this.mapImp.options?.style === 'centreline') {
-        this.isCentreLine = true
       }
       this.mapImp.setBackgroundOpacity(1)
       this.backgroundChangeCallback(this.currentBackground)
       this.pathways = this.mapImp.pathTypes()
-      if (!this.isCentreLine && this.mapImp.enableCentrelines) {
-        this.mapImp.enableCentrelines(false)
-      }
       //Disable layers for now
       //this.layers = this.mapImp.getLayers();
       this.processSystems(this.mapImp.getSystems())
@@ -2364,7 +2333,7 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = !this.isCentreLine
+      this.drawerOpen = true;
       this.mapResize()
       this.handleMapClick();
       /**
@@ -2675,13 +2644,6 @@ export default {
           key: 'VALID',
         },
       ],
-      centreLines: [
-        {
-          label: 'Display Nerves',
-          key: 'centrelines',
-          enabled: false,
-        },
-      ],
       systems: [],
       taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
@@ -2707,7 +2669,6 @@ export default {
       helpModeActiveIndex: this.helpModeInitialIndex,
       yellowstar: yellowstar,
       isFC: false,
-      isCentreLine: false,
       inHelp: false,
       currentBackground: 'white',
       availableBackground: ['white', 'lightskyblue', 'black'],
@@ -2921,6 +2882,11 @@ export default {
   left: 0px;
   transform: translateX(0);
   transition: all var(--el-transition-duration);
+  z-index: 99;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
   &.open {
     transform: translateX(0);
   }
@@ -3466,7 +3432,6 @@ export default {
   }
 }
 
-.open-drawer,
 .drawer-button {
   z-index: 8;
   width: 20px;
@@ -3476,18 +3441,6 @@ export default {
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
-}
-
-.open-drawer {
-  position: absolute;
-  left: 0px;
-  background-color: #f7faff;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-}
-
-.drawer-button {
-  float: left;
-  margin-top: calc(50% - 36px);
   background-color: #f9f2fc;
 
   i {

package/src/components/MultiFlatmapVuer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="multi-container" ref="multiContainer">
-    <div style="position: absolute; z-index: 10" v-if="!disableUI">
+    <div style="position: absolute; z-index: 100" v-if="!disableUI">
       <div class="species-display-text">Species</div>
       <el-popover
         content="Select a species"
@@ -752,9 +752,6 @@ export default {
 }
 
 .select-box {
-  width: 120px;
-  border-radius: 4px;
-  border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
@@ -766,6 +763,27 @@ export default {
     padding-top: 0.25em;
   }
   :deep() {
+    .el-select__wrapper {
+      position: relative;
+      width: fit-content;
+      box-shadow: none;
+      border-radius: 4px;
+      border: 1px solid var(--el-border-color);
+      &.is-focused {
+        border-color: $app-primary-color;
+      }
+    }
+    .el-select__selection {
+      width: fit-content;
+      position: relative;
+    }
+    .el-select__placeholder {
+      position: relative;
+      top: auto;
+      transform: none;
+      min-width: 80px;
+      width: fit-content;
+    }
     .el-input {
       .el-input__wrapper{
         &is-focus,

package/src/components/SelectionsGroup.vue

@@ -49,6 +49,7 @@
             <el-checkbox
               class="my-checkbox"
               :label="item[identifierKey]"
+              :value="item[identifierKey]"
               @change="visibilityToggle(item[identifierKey], $event)"
               @click="onCheckboxNativeChange"
               :checked="!('enabled' in item) || item.enabled === true"