Help Mode Updates

src/components/FlatmapVuer.vue

@@ -18,6 +18,7 @@
       <div class="beta-popovers" v-show="!disableUI">
         <div>
           <el-popover
+            v-if="displayWarning || isLegacy"
             placement="right"
             popper-class="warning-popper flatmap-popper"
             :teleported="false"
@@ -58,7 +59,10 @@ Please use `const` to assign meaningful names to them...
                 SCKAN </a
               >.
             </p>
-            <p v-else @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
+            <p v-else
+              @mouseover="showTooltip(7)"
+              @mouseout="hideTooltip(7)"
+            >
               This map displays the connectivity of neuron populations.
               Specifically, those from the primarily rat-based
               <a
@@ -264,35 +268,17 @@ Please use `const` to assign meaningful names to them...
               :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
               v-popover:checkBoxPopover
             >
-              <el-popover
-                content="Location of the featured dataset"
-                placement="bottom"
-                :teleported="true"
-                trigger="manual"
-                width="max-content"
-                :offset="-10"
-                popper-class="flatmap-popper flatmap-teleport-popper"
-                :visible="hoverVisibilities[9].value && showStarInLegend"
+              <dynamic-legends
+                v-if="legendEntry.length"
+                identifierKey="prompt"
+                colourKey="colour"
+                styleKey="style"
+                :legends="legendEntry"
+                :showStarInLegend="true"
+                :showDatasetMarkerTooltip="showDatasetMarkerTooltip"
                 ref="featuredMarkerPopover"
-              >
-                <template #reference>
-                  <div
-                    v-popover:featuredMarkerPopover
-                    @mouseover="showTooltip(9)"
-                    @mouseout="hideTooltip(9)"
-                  >
-                    <dynamic-legends
-                      v-if="legendEntry.length"
-                      identifierKey="prompt"
-                      colourKey="colour"
-                      styleKey="style"
-                      :legends="legendEntry"
-                      :showStarInLegend="true"
-                      class="svg-legends-container"
-                    />
-                  </div>
-                </template>
-              </el-popover>
+                class="svg-legends-container"
+              />
               <!-- 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. The number inside the markers is the number of datasets available for each marker."
@@ -2401,9 +2387,17 @@ export default {
         } else {
           // skip the unavailable tooltips
           this.helpModeActiveIndex += 1;
+          this.setHelpMode(helpMode);
         }
       }
 
+      // Skip checkbox tooltip if pathway filter is not shown
+      const activePopoverObjAfter = this.hoverVisibilities[this.helpModeActiveIndex];
+      if (activePopoverObjAfter?.ref === 'checkBoxPopover' && !this.showPathwayFilter) {
+        this.helpModeActiveIndex += 1;
+        this.setHelpMode(helpMode);
+      }
+
       if (!helpMode) {
         // reset to iniital state
         this.helpModeActiveIndex = this.helpModeInitialIndex;
@@ -3505,7 +3499,10 @@ export default {
     },
     legendEntry: function () {
       return [...this.flatmapLegends, ...this.externalLegends]
-    }
+    },
+    showDatasetMarkerTooltip: function () {
+      return this.hoverVisibilities[9].value;
+    },
   },
   watch: {
     entry: function () {

src/components/MultiFlatmapVuer.vue

@@ -887,6 +887,8 @@ export default {
   left: 16px;
   top: 44px;
   position: absolute;
+  width: fit-content;
+
   :deep(.el-input__inner) {
     color: rgb(48, 49, 51);
     padding-top: 0.25em;

src/components/legends/DynamicLegends.vue

@@ -6,37 +6,55 @@
       :key="item[identifierKey]"
       :label="item[identifierKey]"
     >
-      <div class="legend-item" v-if="legendStyle(item)">
-        <template v-if="clipPathLegends.includes(legendStyle(item))">
-          <div
-            :class="legendStyle(item)"
-            :style="customClipPathStyle(item, true)"
-          >
+      <template v-if="item[identifierKey] === 'Featured dataset marker'">
+        <el-popover
+          content="Location of the featured dataset"
+          placement="right"
+          :teleported="true"
+          trigger="manual"
+          width="max-content"
+          :offset="0"
+          popper-class="flatmap-popper flatmap-teleport-popper"
+          :visible="tooltipVisible"
+          ref="featuredMarkerPopover"
+        >
+          <template #reference>
             <div
-              :class="legendStyle(item)"
-              :style="customClipPathStyle(item, false)"
+              v-popover:featuredMarkerPopover
+              @mouseover="onMouseOver"
+              @mouseout="onMouseOut"
             >
+              <LegendItem
+                :item="item"
+                :identifierKey="identifierKey"
+                :styleKey="styleKey"
+                :showStarInLegend="showStarInLegend"
+              />
             </div>
-          </div>
-        </template>
-        <template v-else>
-          <div
-          :class="legendStyle(item)"
-          :style="customStyle(item)"
-          >
-          </div>
-        </template>
-        <div class="label">{{ capitalise(item[identifierKey]) }}</div>
-      </div>
+          </template>
+        </el-popover>
+      </template>
+      <template v-else>
+        <LegendItem
+          :item="item"
+          :identifierKey="identifierKey"
+          :styleKey="styleKey"
+          :showStarInLegend="showStarInLegend"
+        />
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-const starTemplate = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="<fillColor>" stroke="<borderColor>" stroke-width="<borderWidth>" d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z"/></svg>'
+import LegendItem from './LegendItem.vue';
+
 /* eslint-disable no-alert, no-console */
 export default {
   name: "DynamicLegends",
+  components: {
+    LegendItem,
+  },
   props: {
     identifierKey: {
       type: String,
@@ -60,58 +78,35 @@ export default {
       type: Boolean,
       default: false,
     },
+    showDatasetMarkerTooltip: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isHovering: false,
+      hoverTimeout: null,
+    };
   },
   computed: {
-    clipPathLegends: function () {
-      return ['exoid', 'hexagon'];
+    tooltipVisible() {
+      // Show tooltip when either help mode is active OR user is hovering
+      return (this.showDatasetMarkerTooltip && this.showStarInLegend) || this.isHovering;
     },
   },
   methods: {
-    capitalise: function (label) {
-      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
-    },
-    customStyle: function(item) {
-      const specifiedColour = item["color"] ? item["color"] : item["colour"];
-      let colour = specifiedColour ? specifiedColour : "transparent";
-      let borderColour = item.border ? item.border : "black";
-      if (specifiedColour && !item.border) {
-        borderColour = colour;
-      } 
-      if (item[this.styleKey] === 'star') {
-        let star = starTemplate.replace('<fillColor>', colour);
-        star = star.replace('<borderColor>', borderColour);
-        star = star.replace('<borderWidth>', borderColour ? '2' : '0');
-        star = 'data:image/svg+xml,' + encodeURIComponent(star);
-        return { 'color': colour, 'background-image': `url(${star})` };
-      } else if (item[this.styleKey] === 'line') {
-        return {'color': colour};
-      } else {
-        return { 'background-color': colour, 'border-color': borderColour};
-      }
-    },
-    customClipPathStyle: function(item, isBorder) {
-      const style = this.customStyle(item);
-      if (isBorder) {
-        style['background-color'] = style['border-color'];
-      } else {
-        style.scale = 0.7;
-      }
-      return style;
+    onMouseOver() {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = setTimeout(() => {
+        this.isHovering = true;
+      }, 500);
     },
-    legendStyle: function (item) {
-      if (item[this.styleKey] === "star") {
-        if (item[this.identifierKey] === "Featured dataset marker") {
-          if (!this.showStarInLegend) {
-            return;
-          }
-        }
-        return 'star';
-      } else if (this.clipPathLegends.includes(item[this.styleKey])) {
-        return item[this.styleKey];
-      } else if (item[this.styleKey] === 'line') {
-        return [item[this.styleKey], item.dashed ? 'dashed' : '', item.arrow ? 'arrow' : ''];
-      }
-      return [item[this.styleKey], 'shape'];
+    onMouseOut() {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = setTimeout(() => {
+        this.isHovering = false;
+      }, 500);
     },
   },
 };
@@ -125,92 +120,4 @@ export default {
 .legend-container {
   width: max-content;
 }
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  margin: 8px 12.5px;
-}
-
-.line {
-  position: relative;
-  width: 20px;
-  border-top: 2px solid currentColor;
-}
-
-.line.dashed {
-  border-top: 2px dashed currentColor;
-}
-
-.line::after {
-  content: "";
-  position: absolute;
-  right: -2px;
-  top: -5px;
-  width: 0;
-  height: 0;
-  border-left: 7px solid currentColor;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  display: none;
-}
-
-.line.arrow::after {
-  display: block;
-}
-
-.shape {
-  height: 16px;
-  width: 16px;
-  border-color: black;
-  border-style: solid;
-  border-width: 2px;
-  background-color: transparent;
-  display: inline-block;
-}
-
-.circle {
-  border-radius: 50%;
-}
-
-.rounded-square {
-  border-radius: 30%;
-}
-
-.hexagon {
-  width: 20px;
-  height: calc(20px * 0.866);
-  background-color: transparent;
-  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-}
-
-.exoid {
-  width: 20px;
-  height: 25px;
-  background-color: transparent;
-  clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
-  );
-  -webkit-clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
-  );
-}
-
-.star {
-  width: 25px;
-  height: 25px;
-  background-color: transparent !important;
-  background-repeat: no-repeat;
-  background-size: contain;
-  display: inline-block;
-  margin: -3px;
-  padding-right: 2px;
-}
-
-.label {
-  margin-left: 14px;
-  font-size: 12px;
-  color: rgb(48, 49, 51);
-}
 </style>