@abi-software/flatmapvuer 0.2.3 → 0.2.4-beta-3

package/src/components/FlatmapVuer.vue

@@ -6,7 +6,7 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.3)"
   >
-    <SvgSpriteColor />
+    <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
@@ -37,7 +37,7 @@
           popper-class="flatmap-popper left-popper"
           v-model="hoverVisibilities[0].value"
         >
-          <SvgIcon
+          <map-svg-icon
             icon="zoomIn"
             class="icon-button zoomIn"
             slot="reference"
@@ -54,7 +54,7 @@
           popper-class="flatmap-popper popper-zoomout"
           v-model="hoverVisibilities[1].value"
         >
-          <SvgIcon
+          <map-svg-icon
             icon="zoomOut"
             class="icon-button zoomOut"
             slot="reference"
@@ -71,7 +71,7 @@
           popper-class="flatmap-popper"
           v-model="hoverVisibilities[2].value"
         >
-          <SvgIcon
+          <map-svg-icon
             icon="resetZoom"
             class="icon-button resetView"
             slot="reference"
@@ -197,7 +197,7 @@
         trigger="manual"
         popper-class="flatmap-popper right-popper"
       >
-        <SvgIcon
+        <map-svg-icon
           v-popover:backgroundPopover
           icon="changeBckgd"
           class="icon-button background-colour"
@@ -211,6 +211,7 @@
         ref="tooltip"
         class="tooltip"
         :content="tooltipContent"
+        :flatmapAPI="flatmapAPI"
         @resource-selected="resourceSelected"
       />
     </div>
@@ -221,7 +222,7 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import Tooltip from "./Tooltip";
-import { SvgIcon, SvgSpriteColor } from "@abi-software/svg-sprite";
+import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 import {
   Checkbox,
   CheckboxGroup,
@@ -253,8 +254,8 @@ const mapResize = map => {
 export default {
   name: "FlatmapVuer",
   components: {
-    SvgIcon,
-    SvgSpriteColor,
+    MapSvgIcon,
+    MapSvgSpriteColor,
     Tooltip
   },
   beforeCreate: function() {
@@ -337,24 +338,31 @@ export default {
         this.mapImp.showPaths(this.checkedItems);
       }
     },
+    enablePanZoomEvents: function(flag) {
+      this.mapImp.enablePanZoomEvents(flag);
+    },
     eventCallback: function() {
-      return (eventType, feature, ...args) => {
-        const label = feature.label;
-        const resource = [feature.models];
-        const taxonomy = this.entry;
-        const data = {
-          dataset: feature.dataset,
-          taxonomy: taxonomy,
-          resource: resource,
-          label: label,
-          feature: feature,
-          userData: args,
-          eventType: eventType
-        };
-        // Disable the nueron pop up for now.
-        if (feature && feature.type !== "marker")
-          this.checkAndCreatePopups(data);
-        this.$emit("resource-selected", data);
+      return (eventType, data, ...args) => {
+        if (eventType !== "pan-zoom") {
+          const label = data.label;
+          const resource = [data.models];
+          const taxonomy = this.entry;
+          const payload = {
+            dataset: data.dataset,
+            taxonomy: taxonomy,
+            resource: resource,
+            label: label,
+            feature: data,
+            userData: args,
+            eventType: eventType
+          };
+          // Disable the nueron pop up for now.
+          if (data && data.type !== "marker")
+            this.checkAndCreatePopups(data);
+          this.$emit("resource-selected", payload);
+        } else {
+          this.$emit("pan-zoom-callback", data);
+        }
       };
     },
     // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
@@ -633,7 +641,7 @@ export default {
     },
     warningMessage: {
       type: String,
-      default: "Beta feature - under active development"
+      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."
     },
     /**
      * State containing state of the flatmap.

package/src/components/MultiFlatmapVuer.vue

@@ -36,6 +36,7 @@
       :ref="key"
       @resource-selected="FlatmapSelected"
       @ready="FlatmapReady"
+      @pan-zoom-callback="panZoomCallback"
       :featureInfo="featureInfo"
       :minZoom="minZoom"
       :pathControls="pathControls"
@@ -119,6 +120,9 @@ export default {
     getCurrentFlatmap: function() {
       return this.$refs[this.activeSpecies][0];
     },
+    panZoomCallback: function(payload) {
+      this.$emit("pan-zoom-callback", payload);
+    },
     showPopup: function(featureId, node, options) {
       let map = this.getCurrentFlatmap();
       map.showPopup(featureId, node, options);

package/src/components/PubmedViewer.vue

@@ -43,6 +43,13 @@ export default {
       type: String,
       default: ''
     },
+    /**
+     * Specify the endpoint of the flatmap server.
+     */
+    flatmapAPI: {
+      type: String,
+      default: "https://mapcore-demo.org/flatmaps/"
+    }
   },
   watch: {
     'featureId': function (val){
@@ -85,8 +92,9 @@ export default {
     flatmapQuery: function(identifier){
       this.pubmeds = []
       this.loading.response = true
+      let endpoint = this.flatmapAPI + 'knowledge/query/';
       const data = { sql: 'select publication from publications where entity=?', "params": [identifier]};
-      fetch('https://mapcore-demo.org/devel/flatmap/v1/knowledge/query/', {
+      fetch(endpoint, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

package/src/components/Tooltip.vue

@@ -9,7 +9,7 @@
       </div>
       
 
-      <pubmed-viewer v-if="content.featureId" class="block" :featureId="content.featureId" @pubmedSearchUrl="pubmedSearchUrlUpdate"/>
+      <pubmed-viewer v-if="content.featureId" class="block" :flatmapAPI=flatmapAPI :featureId="content.featureId" @pubmedSearchUrl="pubmedSearchUrlUpdate"/>
       <div v-if="content.components" class="block">
         <div class="attribute-title">Components</div>
         <span class="attribute-content">{{content.components}}</span>
@@ -71,6 +71,13 @@ export default {
     content: {
       type: Object,
       default: undefined
+    },
+        /**
+     * Specify the endpoint of the flatmap server.
+     */
+    flatmapAPI: {
+      type: String,
+      default: "https://mapcore-demo.org/flatmaps/"
     }
   },
   data: function() {
@@ -104,7 +111,6 @@ export default {
 @import "~element-ui/packages/theme-chalk/src/button";
 @import "~element-ui/packages/theme-chalk/src/container";
 @import "~element-ui/packages/theme-chalk/src/header";
-@import "~element-ui/packages/theme-chalk/src/icon";
 @import "~element-ui/packages/theme-chalk/src/main";
 
 .tooltip-container {

package/vue.config.js

@@ -6,6 +6,20 @@ module.exports = {
       config.externals = [nodeExternals({}) ];
     }
   },
+  chainWebpack: config => {
+    const fontsRule = config.module.rule('fonts')
+    fontsRule.uses.clear()
+    config.module
+      .rule('fonts')
+      .test(/\.(ttf|otf|eot|woff|woff2)$/)
+      .use('base64-inline-loader')
+      .loader('base64-inline-loader')
+      .tap(options => {
+        // modify the options...    
+        return options
+      })
+      .end()
+  },
   css: {
     //Import variables into all stylesheets.
     loaderOptions: {