@abi-software/flatmapvuer 0.5.7-alpha.2 → 0.5.8

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/flatmap-viewer": {
-      "version": "2.4.1-b.5",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.4.1-b.5.tgz",
-      "integrity": "sha512-ScVaE0s7FB0dInpQ2FLC0eJ9tY1GGGu4aAY2oogQveC6+yfCmBPl5d6BXRuqtxfrlNSQyHRM14BRmE0B0OcjHg==",
+      "version": "2.4.2-b.3",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.4.2-b.3.tgz",
+      "integrity": "sha512-M+4XYVawrPphrOCb98eJpx+gV9uZO6Jl0fX/REtbESxl6+OnOtbhWX8ecYS0x/J0vwpqv5iAHx8uOylBUlA7WA==",
       "requires": {
         "@babel/runtime": "^7.10.4",
         "@fortawesome/fontawesome-free": "^6.4.0",
@@ -1204,9 +1204,9 @@
       }
     },
     "@fortawesome/fontawesome-free": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
-      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ=="
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
+      "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg=="
     },
     "@hapi/address": {
       "version": "2.1.4",
@@ -1357,9 +1357,9 @@
       "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
     },
     "@maplibre/maplibre-gl-style-spec": {
-      "version": "19.3.0",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.0.tgz",
-      "integrity": "sha512-ZbhX9CTV+Z7vHwkRIasDOwTSzr76e8Q6a55RMsAibjyX6+P0ZNL1qAKNzOjjBDP3+aEfNMl7hHo5knuY6pTAUQ==",
+      "version": "19.3.1",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.1.tgz",
+      "integrity": "sha512-ss5+b3/a8I1wD5PYmAYPYxg0Nag0cxvw4GGOnQroTP59sobTPI3KeHP9OjUr/es7uNtYEodr54fgoEnCBF6gaQ==",
       "requires": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
         "@mapbox/unitbezier": "^0.0.1",
@@ -1684,6 +1684,14 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
+    "@types/supercluster": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.0.tgz",
+      "integrity": "sha512-6JapQ2GmEkH66r23BK49I+u6zczVDGTtiJEVvKDYZVSm/vepWaJuTq6BXzJ6I4agG5s8vA1KM7m/gXWDg03O4Q==",
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -8268,9 +8276,9 @@
       }
     },
     "maplibre-gl": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.2.0.tgz",
-      "integrity": "sha512-TOo/cV9r8Xy3ngbJtY6JUC7rpjpObrsdO5pt14l5OIw4gY1v5XnxWP16VDSe0zRoncFfDCEBDmRwhfEFwtlbvw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.3.1.tgz",
+      "integrity": "sha512-SfRq9bT68GytDzCOG0IoTGg2rASbgdYunW/6xhnp55QuLmwG1M/YOlXxqHaphwia7kZbMvBOocvY0fp5yfTjZA==",
       "requires": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -8279,11 +8287,12 @@
         "@mapbox/unitbezier": "^0.0.1",
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
-        "@maplibre/maplibre-gl-style-spec": "^19.2.1",
+        "@maplibre/maplibre-gl-style-spec": "^19.3.0",
         "@types/geojson": "^7946.0.10",
         "@types/mapbox__point-geometry": "^0.1.2",
         "@types/mapbox__vector-tile": "^1.3.0",
         "@types/pbf": "^3.0.2",
+        "@types/supercluster": "^7.1.0",
         "earcut": "^2.2.4",
         "geojson-vt": "^3.2.1",
         "gl-matrix": "^3.4.3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.7-alpha.2",
+  "version": "0.5.8",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
@@ -27,7 +27,7 @@
     "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.4.1-b.5",
+    "@abi-software/flatmap-viewer": "^2.4.2-b.3",
     "@abi-software/svg-sprite": "^0.3.0",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/components/FlatmapVuer.vue

@@ -188,7 +188,6 @@
             @checkAll="checkAllSystems"
             @change-active="ftuSelected"
           />
-                    <!--
           <selections-group
             v-if="!isFC && centreLines && centreLines.length > 0"
             title="Nerves"
@@ -199,6 +198,7 @@
             ref="centrelinesSelection"
             key="centrelinesSelection"
           />
+          <!--
           <selections-group
             v-if="isFC && sckanDisplay && sckanDisplay.length > 0"
             title="SCKAN"
@@ -848,6 +848,9 @@ export default {
         //  be loaded, overriding ``taxon`` and ``biologicalSex``.
 
         let identifier = { taxon: this.entry };
+        if (this.uuid) {
+          identifier.uuid = this.uuid;
+        }
         //This now handle the uses of uuid when resuming states
         if (state) {
           if (state.uuid) {
@@ -998,6 +1001,7 @@ export default {
   },
   props: {
     entry: String,
+    uuid: String,
     biologicalSex: {
       type: String,
       default: ""

package/src/components/MultiFlatmapVuer.vue

@@ -31,6 +31,7 @@
       :showLayer="showLayer"
       v-show="activeSpecies==key"
       :entry="item.taxo"
+      :uuid="item.uuid"
       :biologicalSex="item.biologicalSex"
       :displayWarning="item.displayWarning"
       :displayLatestChanges="item.displayLatestChanges"
@@ -110,19 +111,24 @@ export default {
           .then(response => response.json())
           .then(data => {
             //Check each key in the provided availableSpecies against the one 
-            //on the server, add them to the Select if the key is found
             Object.keys(this.availableSpecies).forEach(key => {
-              for (let i = 0; i < data.length; i++) {
-                if (this.availableSpecies[key].taxo === data[i].taxon) {
-                  if (this.availableSpecies[key].biologicalSex) {
-                    if (data[i].biologicalSex && 
-                      data[i].biologicalSex === this.availableSpecies[key].biologicalSex) {
-                        this.$set(this.speciesList, key, this.availableSpecies[key]);
-                        break;
-                      }
-                  } else {
-                    this.$set(this.speciesList, key, this.availableSpecies[key]);
-                    break;
+              // FIrst look through the uuid
+              const uuid = this.availableSpecies[key].uuid;
+              if (uuid && data.map(e => e.uuid).indexOf(uuid) > 0) {
+                this.$set(this.speciesList, key, this.availableSpecies[key]);
+              } else {
+                for (let i = 0; i < data.length; i++) {
+                  if (this.availableSpecies[key].taxo === data[i].taxon) {
+                    if (this.availableSpecies[key].biologicalSex) {
+                      if (data[i].biologicalSex && 
+                        data[i].biologicalSex === this.availableSpecies[key].biologicalSex) {
+                          this.$set(this.speciesList, key, this.availableSpecies[key]);
+                          break;
+                        }
+                    } else {
+                      this.$set(this.speciesList, key, this.availableSpecies[key]);
+                      break;
+                    }
                   }
                 }
               }

package/src/components/Tooltip.vue

@@ -10,69 +10,79 @@
       <div class="block" v-else>
         <span class="title">{{entry.featureId}}</span>
       </div>
-      <div class="content-container scrollbar">
-        {{entry.paths}}
-        <div v-if="entry.origins && entry.origins.length > 0" class="block">
-          <div>
-            <span class="attribute-title">Origin</span>
-            <el-popover
-            width="250"
-            trigger="hover"
-            :append-to-body=false
-            popper-class="popover-origin-help"
-            >
-            <i slot="reference" class="el-icon-warning-outline info"/>
-            <span style="word-break: keep-all;">
-              <i>Origin</i> {{originDescription}}
-            </span>
-            </el-popover>
-          </div>
-          <div v-for="(origin, i) in entry.origins" class="attribute-content"  :key="origin">
-            {{ capitalise(origin) }}
-            <div v-if="i != entry.origins.length - 1" class="seperator"></div>
-          </div>
-          <el-button v-show="entry.originsWithDatasets && entry.originsWithDatasets.length > 0" class="button" @click="openDendrites">
-            Explore origin data
-          </el-button>
+      <div v-show="showDetails" class="hide" @click="showDetails = false">
+          Hide path information
+          <i class="el-icon-arrow-up"></i>
         </div>
-        <div v-if="entry.components && entry.components.length > 0" class="block">
-          <div class="attribute-title">Components</div>
-          <div v-for="(component, i) in entry.components" class="attribute-content"  :key="component">
-            {{ capitalise(component) }}
-            <div v-if="i != entry.components.length - 1" class="seperator"></div>
-          </div>
+        <div v-show="!showDetails" class="hide" @click="showDetails = true">
+          Show path information
+          <i class="el-icon-arrow-down"></i>
         </div>
-        <div v-if="entry.destinations && entry.destinations.length > 0" class="block">
-          <div>
-            <span class="attribute-title">Destination</span>
-            <el-popover
-            width="250"
-            trigger="hover"
-            :append-to-body=false
-            popper-class="popover-origin-help"
-            >
-            <i slot="reference" class="el-icon-warning-outline info"/>
-            <span style="word-break: keep-all;">
-            <i>Destination</i> is where the axons terminate
-            </span>
-            </el-popover>
+      <transition name="slide-fade">
+        <div v-show="showDetails" class="content-container scrollbar">
+          {{entry.paths}}
+          <div v-if="entry.origins && entry.origins.length > 0" class="block">
+            <div>
+              <span class="attribute-title">Origin</span>
+              <el-popover
+              width="250"
+              trigger="hover"
+              :append-to-body=false
+              popper-class="popover-origin-help"
+              >
+              <i slot="reference" class="el-icon-warning-outline info"/>
+              <span style="word-break: keep-all;">
+                <i>Origin</i> {{originDescription}}
+              </span>
+              </el-popover>
+            </div>
+            <div v-for="(origin, i) in entry.origins" class="attribute-content"  :key="origin">
+              {{ capitalise(origin) }}
+              <div v-if="i != entry.origins.length - 1" class="seperator"></div>
+            </div>
+            <el-button v-show="entry.originsWithDatasets && entry.originsWithDatasets.length > 0" class="button" @click="openDendrites">
+              Explore origin data
+            </el-button>
           </div>
-          <div v-for="(destination, i) in entry.destinations" class="attribute-content"  :key="destination">
-            {{ capitalise(destination) }}
-            <div v-if="i != entry.destinations.length - 1" class="seperator"></div>
+          <div v-if="entry.components && entry.components.length > 0" class="block">
+            <div class="attribute-title">Components</div>
+            <div v-for="(component, i) in entry.components" class="attribute-content"  :key="component">
+              {{ capitalise(component) }}
+              <div v-if="i != entry.components.length - 1" class="seperator"></div>
+            </div>
+          </div>
+          <div v-if="entry.destinations && entry.destinations.length > 0" class="block">
+            <div>
+              <span class="attribute-title">Destination</span>
+              <el-popover
+              width="250"
+              trigger="hover"
+              :append-to-body=false
+              popper-class="popover-origin-help"
+              >
+              <i slot="reference" class="el-icon-warning-outline info"/>
+              <span style="word-break: keep-all;">
+              <i>Destination</i> is where the axons terminate
+              </span>
+              </el-popover>
+            </div>
+            <div v-for="(destination, i) in entry.destinations" class="attribute-content"  :key="destination">
+              {{ capitalise(destination) }}
+              <div v-if="i != entry.destinations.length - 1" class="seperator"></div>
+            </div>
+            <el-button v-show="entry.destinationsWithDatasets && entry.destinationsWithDatasets.length > 0" class="button" @click="openAxons">
+              Explore destination data
+            </el-button>
           </div>
-          <el-button v-show="entry.destinationsWithDatasets && entry.destinationsWithDatasets.length > 0" class="button" @click="openAxons">
-            Explore destination data
-          </el-button>
-        </div>
 
-        <el-button v-show="entry.componentsWithDatasets && entry.componentsWithDatasets.length > 0" class="button" @click="openAll">
-          Search for data on components
-        </el-button>
+          <el-button v-show="entry.componentsWithDatasets && entry.componentsWithDatasets.length > 0" class="button" @click="openAll">
+            Search for data on components
+          </el-button>
 
-        <external-resource-card :resources="resources"></external-resource-card>
+          <external-resource-card :resources="resources"></external-resource-card>
 
-      </div>
+        </div>
+      </transition>
     </el-main>
   </div>
 </template>
@@ -139,6 +149,7 @@ export default {
       pubmedSearchUrl: '',
       loading: false,
       showToolip: false,
+      showDetails: false,
       originDescriptions: {
         'motor': 'is the location of the initial cell body of the circuit',
         'sensory': 'is the location of the initial cell body in the PNS circuit'
@@ -236,7 +247,7 @@ export default {
 }
 
 .block {
-  margin-bottom: 1.5em;
+  margin-bottom: 0.5em;
 }
 
 .pub {
@@ -269,6 +280,24 @@ export default {
   background-color:#bfbec2;
 }
 
+.hide{
+  color: $app-primary-color;
+  cursor: pointer;
+  margin-right: 6px;
+  margin-top: 3px;
+}
+
+.slide-fade-enter-active {
+  transition: opacity 0.5s, transform 0.5s;
+}
+.slide-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 .main {
   font-size: 14px;
   text-align: left;
@@ -279,6 +308,7 @@ export default {
   padding: 1em !important;
   overflow: hidden;
   min-width: 16rem;
+
 }
 
 .title{