@abi-software/flatmapvuer 0.3.0 → 0.3.3

package/package-lock.json

@@ -1280,13 +1280,6 @@
       "requires": {
         "get-stream": "^6.0.1",
         "minimist": "^1.2.6"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.6",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-          "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
-        }
       }
     },
     "@mapbox/jsonlint-lines-primitives": {
@@ -2753,6 +2746,15 @@
       "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
       "dev": true
     },
+    "async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
     "async-each": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
@@ -5765,13 +5767,10 @@
       "dev": true
     },
     "eventsource": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
-      "integrity": "sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==",
-      "dev": true,
-      "requires": {
-        "original": "^1.0.0"
-      }
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.2.tgz",
+      "integrity": "sha512-xAH3zWhgO2/3KIniEKYPr8plNSzlGINOUqYj0m0u7AB81iRw8b/3E73W6AuU+6klLbaSFmZnaETQ2lXPfAydrA==",
+      "dev": true
     },
     "evp_bytestokey": {
       "version": "1.0.3",
@@ -8453,9 +8452,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "minipass": {
       "version": "3.1.3",
@@ -9152,15 +9151,6 @@
         }
       }
     },
-    "original": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
-      "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
-      "dev": true,
-      "requires": {
-        "url-parse": "^1.4.3"
-      }
-    },
     "os-browserify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
@@ -9526,15 +9516,6 @@
         "mkdirp": "^0.5.5"
       },
       "dependencies": {
-        "async": {
-          "version": "2.6.3",
-          "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-          "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-          "dev": true,
-          "requires": {
-            "lodash": "^4.17.14"
-          }
-        },
         "debug": {
           "version": "3.2.7",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@@ -11245,9 +11226,9 @@
       "dev": true
     },
     "shell-quote": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
-      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
+      "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
       "dev": true
     },
     "signal-exit": {
@@ -12073,9 +12054,9 @@
       }
     },
     "terser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
+      "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",

package/src/App.vue

@@ -75,7 +75,7 @@ export default {
       pathControls: true,
       minZoom: 4,
       availableSpecies : {"Human":{taxo: "NCBITaxon:9606", iconClass:"mapicon-icon_human", displayWarning:true},
-        "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayWarning:false},
+        "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayWarning:false, displayLatestChanges:true},
         "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning:true},
         "Kember":{taxo: "ABI:1000001", displayWarning:true},
         "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true}, 

package/src/components/FlatmapVuer.vue

@@ -9,25 +9,48 @@
     <map-svg-sprite-color />
     <div style="height:100%;width:100%;position:relative;overflow-y:none">
       <div style="height:100%;width:100%;" ref="display"></div>
-      <el-popover
-        :content="warningMessage"
-        placement="right"
-        v-if="displayWarning"
-        :appendToBody="false"
-        trigger="manual"
-        popper-class="warning-popper flatmap-popper right-popper"
-        v-model="hoverVisibilities[6].value"
-        ref="warningPopover"
-      ></el-popover>
-      <i
-        class="el-icon-warning warning-icon"
-        v-if="displayWarning"
-        @mouseover="showToolitip(6)"
-        @mouseout="hideToolitip(6)"
-        v-popover:warningPopover
-      >
-        <span class="warning-text">Beta</span>
-      </i>
+      <div class="beta-popovers">
+        <div>
+          <el-popover
+            :content="warningMessage"
+            placement="right"
+            :appendToBody="false"
+            trigger="manual"
+            popper-class="warning-popper flatmap-popper right-popper"
+            v-model="hoverVisibilities[6].value"
+            ref="warningPopover"
+          ></el-popover>
+          <i
+            class="el-icon-warning warning-icon"
+            v-if="displayWarning && warningMessage"
+            @mouseover="showToolitip(6)"
+            @mouseout="hideToolitip(6)"
+            v-popover:warningPopover
+          >
+          <span class="warning-text">Beta</span>
+        </i>
+        </div>
+        <el-popover
+          :content="latestChangesMessage"
+          placement="right"
+          v-if="displayLatestChanges"
+          :appendToBody="false"
+          trigger="manual"
+          popper-class="warning-popper flatmap-popper right-popper"
+          v-model="hoverVisibilities[7].value"
+          ref="latestChangesPopover"
+        ></el-popover>
+        <i
+          class="el-icon-warning latest-changesicon"
+          v-if="displayLatestChanges && latestChangesMessage"
+          @mouseover="showToolitip(7)"
+          @mouseout="hideToolitip(7)"
+          v-popover:latestChangesPopover
+        >
+          <span class="warning-text">What's new?</span>
+        </i>
+      </div>
+
       <div class="bottom-right-control">
         <el-popover
           content="Zoom in"
@@ -659,11 +682,11 @@ export default {
       type: Boolean,
       default: true
     },
-    displayWarning: {
+    displayMinimap: {
       type: Boolean,
-      default: true
+      default: false
     },
-    displayMinimap: {
+    displayWarning: {
       type: Boolean,
       default: false
     },
@@ -671,6 +694,14 @@ export default {
       type: String,
       default: "Beta feature - This map is based on the connectivity of a rat. New connectivity and species specificity will be added as the SPARC program progress."
     },
+    displayLatestChanges: {
+      type: Boolean,
+      default: false,
+    },
+    latestChangesMessage: {
+      type: String,
+      default: "Bladder connectivity can now be explored and searched on when selected! To see it, click on any of the paths coming from the bladder. Other pathways will be searchable soon.",
+    },
     /**
      * State containing state of the flatmap.
      */
@@ -688,7 +719,7 @@ export default {
     sparcAPI: {
       type: String,
       default: "https://api.sparc.science/"
-    }
+    },
   },
   provide() {
     return {
@@ -709,6 +740,7 @@ export default {
         { value: false },
         { value: false },
         { value: false },
+        { value: false },
         { value: false }
       ],
       inHelp: false,
@@ -753,12 +785,15 @@ export default {
 @import "~element-ui/packages/theme-chalk/src/loading";
 @import "~element-ui/packages/theme-chalk/src/row";
 
-.warning-icon {
+.beta-popovers{
   position: absolute;
   top: 90px;
-  left: 37px;
+  left: 16px;
   text-align: left;
-  font-size: 25px;
+  font-size: 25px;  
+}
+
+.warning-icon {
   color: $warning;
 
   &:hover {
@@ -767,6 +802,21 @@ export default {
 }
 
 .warning-text {
+  font-family: Asap, sans-serif;
+  font-size: 15px;
+  vertical-align: 5px;
+}
+
+.latest-changesicon {
+  color: $success;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.latest-changestext {
+  font-family: Asap, sans-serif;
   font-size: 15px;
   vertical-align: 5px;
 }

package/src/components/MultiFlatmapVuer.vue

@@ -33,6 +33,8 @@
       :entry="item.taxo"
       :displayWarning="item.displayWarning"
       :warningMessage="warningMessage"
+      :displayLatestChanges="item.displayLatestChanges"
+      :latestChangesMessage="item.latestChangesMessage"
       :ref="key"
       @resource-selected="FlatmapSelected"
       @ready="FlatmapReady"

package/src/components/Tooltip.vue

@@ -7,74 +7,76 @@
       <div class="block" v-else>
         <span class="title">{{content.featureId}}</span>
       </div>
-      <!-- Currently we don't show the pubmed viewer, will remove once we are certain it won't be used -->
-      <pubmed-viewer v-if="content.featureIds" v-show="false" class="block" :entry="content" @pubmedSearchUrl="pubmedSearchUrlUpdate"/>
-      {{content.paths}}
-      <div v-if="this.origins" 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 class="content-container scrollbar">
+        <!-- Currently we don't show the pubmed viewer, will remove once we are certain it won't be used -->
+        <pubmed-viewer v-if="content.featureIds" v-show="false" class="block" :entry="content" @pubmedSearchUrl="pubmedSearchUrlUpdate"/>
+        {{content.paths}}
+        <div v-if="this.origins" 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 in origins" class="attribute-content"  :key="origin">
+            {{ capitalise(origin) }}
+          </div>
+          <el-button v-show="originsWithDatasets.length > 0" class="button" @click="openDendrites">
+            Explore origin data
+          </el-button>
         </div>
-        <div v-for="origin in origins" class="attribute-content"  :key="origin">
-          {{ capitalise(origin) }}
+        <div v-if="this.components" class="block">
+          <div class="attribute-title">Components</div>
+          <div v-for="component in components" class="attribute-content"  :key="component">
+            {{ capitalise(component) }}
+          </div>
         </div>
-        <el-button v-show="originsWithDatasets.length > 0" class="button" @click="openDendrites">
-          Explore origin data
-        </el-button>
-      </div>
-      <div v-if="this.components" class="block">
-        <div class="attribute-title">Components</div>
-        <div v-for="component in components" class="attribute-content"  :key="component">
-          {{ capitalise(component) }}
-        </div>
-      </div>
-      <div v-if="this.destinations" 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 in destinations" class="attribute-content"  :key="destination">
-          {{ capitalise(destination) }}
+        <div v-if="this.destinations" 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 in destinations" class="attribute-content"  :key="destination">
+            {{ capitalise(destination) }}
+          </div>
+          <el-button v-show="destinationsWithDatasets.length > 0" class="button" @click="openAxons">
+            Explore destination data
+          </el-button>
         </div>
-        <el-button v-show="destinationsWithDatasets.length > 0" class="button" @click="openAxons">
-          Explore destination data
+
+        <!-- We will serach on components until we can search on neurons -->
+        <el-button v-show="components.length > 0" class="button" @click="openAll">
+          Search for data on components
         </el-button>
-      </div>
 
-      <!-- We will serach on components until we can search on neurons -->
-      <el-button v-show="components.length > 0" class="button" @click="openAll">
-        Search for data on components
-      </el-button>
-
-      <!-- Disable neuron search until it is ready -->
-      <!-- <el-button v-for="action in content.actions" round :key="action.title"
-        class="button" @click="resourceSelected(action)">
-        <i v-if="action.title === 'Search for datasets' || action.title === 'View Dataset' " class="el-icon-coin"></i>
-        {{action.title}}
-      </el-button> -->
-      <el-button  v-if="pubmedSearchUrl" class="button" icon="el-icon-notebook-2" @click="openUrl(pubmedSearchUrl)">
-        Open publications in pubmed
-      </el-button>
+        <!-- Disable neuron search until it is ready -->
+        <!-- <el-button v-for="action in content.actions" round :key="action.title"
+          class="button" @click="resourceSelected(action)">
+          <i v-if="action.title === 'Search for datasets' || action.title === 'View Dataset' " class="el-icon-coin"></i>
+          {{action.title}}
+        </el-button> -->
+        <el-button  v-if="pubmedSearchUrl" class="button" icon="el-icon-notebook-2" @click="openUrl(pubmedSearchUrl)">
+          Open publications in pubmed
+        </el-button>
+      </div>
     </el-main>
   </div>
 </template>
@@ -486,6 +488,29 @@ export default {
   }
 }
 
+.content-container {
+  overflow-y: scroll;
+  scrollbar-width: thin !important;
+  height: 200px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+  right: -12px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
+
 
 /* Fix for chrome bug where under triangle pops up above one on top of it  */
 .selector:not(*:root), .tooltip-container::after{