@abi-software/flatmapvuer 0.5.9-fccb.2 → 0.5.9

package/src/components/FlatmapVuer.vue

@@ -191,11 +191,25 @@
       >
         <div
           class="pathway-container"
-          :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
+          :class="{ open: drawerOpen, close: !drawerOpen }"
+          :style="{ 'max-height' : pathwaysMaxHeight + 'px' }"
           v-if="pathControls"
           v-popover:checkBoxPopover
         >
           <svg-legends v-if="!isFC" class="svg-legends-container" />
+          <el-popover
+            content="Location of the featured dataset"
+            placement="right"
+            :appendToBody="false"
+            trigger="hover"
+            popper-class="flatmap-popper popper-bump-right right-popper"
+            v-model="hoverVisibilities[9].value"
+            ref="featuredMarkerPopover"
+          >
+          </el-popover>
+          <div v-show="showStarInLegend" v-popover:featuredMarkerPopover class="yellow-star-legend" v-html="yellowstar"></div>
+          <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
+
           <el-popover
             content="Find these markers for data"
             placement="right"
@@ -331,17 +345,6 @@
           </el-select>
         </el-row>
         <el-row class="backgroundSpacer"></el-row>
-        <el-row class="backgroundText">HighlightTool</el-row>
-        <el-row class="backgroundControl">
-          <el-radio-group
-            v-model="highlightToolOn"
-            class="flatmap-radio"
-            @change="setHighlightTool"
-          >
-            <el-radio :label="true">On</el-radio>
-            <el-radio :label="false">Off</el-radio>
-          </el-radio-group>
-        </el-row>
         <el-row class="backgroundText">Organs display</el-row>
         <el-row class="backgroundControl">
           <el-radio-group
@@ -428,8 +431,6 @@
         ref="tooltip"
         class="tooltip"
         :annotationEntry="annotationEntry"
-        @highlightConnectedPaths="highlightConnectedPaths"
-        @onClose="closeTooltip"
         :entry="tooltipEntry"
         :annotationDisplay="viewingMode === 'Annotation'"
       />
@@ -457,10 +458,8 @@ import {
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import flatmapMarker from "../icons/flatmap-marker";
-import {
-  FlatmapQueries,
-  findTaxonomyLabel,
-} from "../services/flatmapQueries.js";
+import {FlatmapQueries, findTaxonomyLabel} from "../services/flatmapQueries.js";
+import yellowstar from "../icons/yellowstar";
 
 locale.use(lang);
 Vue.use(Button);
@@ -594,9 +593,6 @@ export default {
         this.mapImp.setColour({ colour: flag, outline: this.outlinesRadio });
       }
     },
-    setHighlightTool: function (flag) {
-      this.highlightToolOn = flag;
-    },
     /**
      * Function to toggle outlines f organs.
      */
@@ -661,25 +657,23 @@ export default {
     checkAllSCKAN: function (payload) {
       if (this.mapImp) {
         payload.keys.forEach((key) =>
-          this.mapImp.enableSckanPath(key, payload.value)
-        );
+          this.mapImp.enableSckanPath(key, payload.value));
       }
     },
     highlightConnectedPaths: function (payload) {
-      console.log('highlightConnectedPaths', payload)
       if (this.mapImp) {
         let paths = [...this.mapImp.pathModelNodes(payload)];
         // The line below matches the paths to the annIdToFeatureId map to get the feature ids
 
-        let pathFeatures = paths.map((p) => this.mapImp.featureProperties(p));
+        let pathFeatures = paths.map(p=>this.mapImp.featureProperties(p));
         let toHighlight = [];
-        pathFeatures.forEach((p) => {
-          this.mapImp.nodePathModels(p.featureId).forEach((f) => {
+        pathFeatures.forEach(p=>{
+          this.mapImp.nodePathModels(p.featureId).forEach(f=>{
             toHighlight.push(f);
-          });
-        });
-
-        this.mapImp.highlightFeatures(toHighlight);
+          })
+        })
+        // display connected paths
+        this.mapImp.zoomToFeatures(toHighlight, {noZoomIn: true});
       }
     },
     systemSelected: function (payload) {
@@ -757,19 +751,20 @@ export default {
               : undefined,
           };
           if (eventType === "click") {
-            if (this.highlightToolOn) {
+            if (this.viewingMode === "Network Discovery") {
               this.highlightConnectedPaths([data.models]);
             } else {
               this.currentActive = data.models ? data.models : "";
             }
-          } else if (eventType === "mouseenter" && !this.highlightToolOn) {
+          } else if (eventType === "mouseenter" && 
+          !(this.viewingMode === "Network Discovery")) {
             this.currentHover = data.models ? data.models : "";
           }
           if (
             data &&
             data.type !== "marker" &&
             eventType === "click" &&
-            !this.highlightToolOn
+            !(this.viewingMode === "Network Discovery")
           ) {
             this.checkAndCreatePopups(payload);
           }
@@ -1235,6 +1230,10 @@ export default {
         ];
       },
     },
+    showStarInLegend: {
+      type: Boolean,
+      default: false
+    },
     isLegacy: {
       type: Boolean,
       default: false,
@@ -1305,13 +1304,14 @@ export default {
         { value: false },
         { value: false },
         { value: false },
+        { value: false },
       ],
+      yellowstar: yellowstar,
       isFC: false,
       inHelp: false,
       currentBackground: "white",
       availableBackground: ["white", "lightskyblue", "black"],
       loading: false,
-      highlightToolOn: false,
       flatmapMarker: flatmapMarker,
       tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
@@ -1324,7 +1324,7 @@ export default {
       currentActive: "",
       currentHover: "",
       viewingMode: "Exploration",
-      viewingModes: ["Annotation", "Exploration"],
+      viewingModes: ["Annotation", "Exploration", "Network Discovery"],
     };
   },
   watch: {
@@ -1454,6 +1454,14 @@ export default {
   overflow-x: hidden;
   scrollbar-width: thin;
 
+  transition: all 1s ease;
+  &.open {
+    opacity: 1;
+  }
+  &.close {
+    opacity: 0;
+  }
+
   &::-webkit-scrollbar {
     width: 4px;
   }
@@ -1613,6 +1621,11 @@ export default {
   padding-left: 8px;
 }
 
+.yellow-star-legend {
+  width: 130px;
+  cursor: pointer;
+}
+
 .settings-group {
   bottom: 16px;
   position: absolute;
@@ -1630,7 +1643,7 @@ export default {
   background-color: #ffffff;
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-  height: 330px;
+  height: 270px;
   width: 175px;
   min-width: 175px;
   &.el-popper[x-placement^="top"] {

package/src/components/MultiFlatmapVuer.vue

@@ -53,6 +53,7 @@
       :helpMode="helpMode"
       :renderAtMounted="renderAtMounted"
       :displayMinimap="displayMinimap"
+      :showStarInLegend="showStarInLegend"
       style="height:100%"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="sparcAPI"
@@ -386,6 +387,10 @@ export default {
       type: Boolean,
       default: false
     },
+    showStarInLegend: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Flag to determine rather open map UI should be
      * presented or not.

package/src/components/ProvenancePopup.vue

@@ -5,9 +5,6 @@
       <div v-if="entry.provenanceTaxonomyLabel && entry.provenanceTaxonomyLabel.length > 0" class="subtitle">
         {{provSpeciesDescription}}
       </div>
-      <el-button @click="showConnectedPaths">
-        Show connected paths
-      </el-button>
     </div>
     <div class="block" v-else>
       <span class="title">{{entry.featureId}}</span>
@@ -182,16 +179,9 @@ export default {
     titleCase: function(title){
       return titleCase(title)
     },
-    showConnectedPaths(){
-      this.$emit('highlightConnectedPaths', this.entry.featureId)
-      this.$emit('onClose')
-    },
     capitalise: function(text){
       return capitalise(text)
     },
-    onClose: function() {
-      this.$emit("onClose")
-    },
     openUrl: function(url){
       window.open(url, '_blank')
     },

package/src/components/Tooltip.vue

@@ -4,10 +4,7 @@
       <annotation-tool :annotationEntry="annotationEntry"/>
     </template>
     <template v-else>
-      <provenance-popup :entry="entry"
-        @highlightConnectedPaths="$emit('highlightConnectedPaths', $event)"
-        @onClose="$emit('onClose')"
-      />
+      <provenance-popup :entry="entry"/>
     </template>
   </div>
 </template>

package/src/components/legends/SvgLegends.vue

@@ -17,6 +17,7 @@
       <text transform="matrix(0.9908 0 0 1 118.0903 345.5266)" class="st3 st4 st5" style="white-space: pre;">Ganglia</text>
       <text transform="matrix(0.9908 0 0 1 118.0903 433.1613)" class="st3 st4 st5" style="white-space: pre;">Ganglionated nerve plexus</text>
     </svg>
+    <svg width="72px" height="72px" viewBox="0 0 24 24" fill="yellow"></svg>
   </div>
 </template>
 

package/src/icons/yellowstar.js

@@ -0,0 +1,5 @@
+export default '<svg width="160px" height="24px" viewBox="0 0 160 24" fill="yellow">' +
+  '<path d="M22.0748 3.25583C22.4141 2.42845 23.5859 2.42845 23.9252 3.25583L25.6493 7.45955C25.793 7.80979 26.1221 8.04889 26.4995 8.07727L31.0303 8.41798C31.922 8.48504 32.2841 9.59942 31.6021 10.1778L28.1369 13.1166C27.8482 13.3614 27.7225 13.7483 27.8122 14.1161L28.8882 18.5304C29.1 19.3992 28.152 20.0879 27.3912 19.618L23.5255 17.2305C23.2034 17.0316 22.7966 17.0316 22.4745 17.2305L18.60881 19.618C17.84796 20.0879 16.9 19.3992 17.1118 18.5304L18.18785 14.1161C18.2775 13.7483 18.1518 13.3614 17.86309 13.1166L14.3979 10.1778C13.71588 9.59942 14.07796 8.48504 14.96971 8.41798L19.50046 8.07727C19.87794 8.04889 20.20704 7.80979 20.35068 7.45955L22.0748 3.25583Z" stroke="#000000" stroke-width="2"/>' +
+  // Adjusting the x attribute and adding padding for the text element
+  '<text x="42" y="50%" dominant-baseline="middle" text-anchor="start" font-family="Asap, sans-serif" font-size="12" fill="#000000">Featured marker</text>' +
+'</svg>';