@teselagen/ove 0.3.25 → 0.3.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.3.25",
+  "version": "0.3.27",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -15,10 +15,10 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.7",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.3.25",
+    "@teselagen/ui": "0.3.28",
     "@teselagen/file-utils": "0.3.9",
     "@teselagen/bounce-loader": "0.3.11",
-    "@teselagen/bio-parsers": "0.3.8",
+    "@teselagen/bio-parsers": "0.3.9",
     "@blueprintjs/core": "3.52.0",
     "@blueprintjs/datetime": "3.23.19",
     "@blueprintjs/icons": "3.33.0",

package/src/AlignmentView/index.js

@@ -737,7 +737,7 @@ export class AlignmentView extends React.Component {
             scrollbarWidth: "none",
             whiteSpace: "nowrap"
           }}
-          title={name}
+          data-title={name}
           key={i}
         >
           <div
@@ -1514,7 +1514,7 @@ export class AlignmentView extends React.Component {
                         textOverflow: "ellipsis",
                         whiteSpace: "nowrap"
                       }}
-                      title={
+                      data-title={
                         this.props.alignmentType || "Unknown Alignment Type"
                       }
                     >

package/src/CircularView/Labels/index.js

@@ -4,6 +4,7 @@ import withHover from "../../helperComponents/withHover";
 import "./style.css";
 import React from "react";
 import { cloneDeep, clamp, noop } from "lodash";
+import { avoidOverlapWith } from "../drawAnnotations";
 
 const fontWidthToFontSize = 1.75;
 
@@ -262,7 +263,7 @@ const DrawLabelGroup = withHover(function ({
   //if label xStart or label xEnd don't fit within the canvas, we need to shorten the label..
 
   let content;
-  const labelClass = ` veLabelText veCircularViewLabelText clickable ${label.color} `;
+  const labelClass = ` veLabelText veLabel veCircularViewLabelText clickable ${label.color} `;
 
   if ((multipleLabels || groupLabelXStart !== undefined) && hovered) {
     //HOVERED: DRAW MULTIPLE LABELS IN A RECTANGLE
@@ -310,7 +311,7 @@ const DrawLabelGroup = withHover(function ({
       line,
 
       <PutMyParentOnTop editorName={editorName} key="gGroup">
-        <g className={className + " topLevelLabelGroup"}>
+        <g className={className + " veLabel topLevelLabelGroup"}>
           <rect
             onMouseOver={cancelFn}
             // zIndex={10}
@@ -355,9 +356,11 @@ const DrawLabelGroup = withHover(function ({
   } else {
     //DRAW A SINGLE LABEL
     content = [
-      <title key="labeltitle">{label.title || label.text}</title>,
+      // <title key="labeltitle">{label.title || label.text}</title>,
       <text
         key="text"
+        data-title={label.title || label.text}
+        {...avoidOverlapWith}
         x={labelXStart}
         textLength={getTextLength(text) * fontWidth}
         lengthAdjust="spacing"
@@ -444,6 +447,8 @@ const DrawGroupInnerLabel = withHover(
   ({ className, labelXStart, label, fontWidth, onMouseOver, index, dy }) => {
     return (
       <tspan
+        data-title={label.title}
+        {...avoidOverlapWith}
         x={labelXStart}
         textLength={getTextLength(label.text) * fontWidth}
         lengthAdjust="spacing"
@@ -461,7 +466,7 @@ const DrawGroupInnerLabel = withHover(
         {...{ onMouseOver }}
         className={className}
       >
-        <title>{label.title}</title>
+        {/* <title>{label.title}</title> */}
         {label.text}
       </tspan>
     );

package/src/CircularView/drawAnnotations.js

@@ -360,7 +360,6 @@ function DrawAnnotationInner({
     onMouseLeave,
     onMouseOver
   };
-  const title = <title>{titleText}</title>;
   function getInner(
     {
       startAngle,
@@ -381,17 +380,15 @@ function DrawAnnotationInner({
     return (
       <g
         transform={transform}
+        data-title={noTitle ? null : titleText}
+        {...avoidOverlapWith}
         key={
           isNotLocation
             ? "notLocation"
             : "location--" + annotation.id + "--" + i
         }
-        // {...(ellipsizedName && ellipsizedName !== name
-        //   ? { "data-tip": name }
-        //   : {})}
         {...sharedProps}
       >
-        {noTitle ? null : title}
         <Annotation
           {...(passAnnotation && { annotation })}
           annotationType={annotationType}
@@ -431,3 +428,8 @@ function DrawAnnotationInner({
 }
 
 const DrawAnnotation = withHover(DrawAnnotationInner);
+
+export const avoidOverlapWith = {
+  "data-avoid": ".topLevelLabelGroup",
+  "data-avoid-backup": ".veLabel.veAnnotationHovered"
+};

package/src/helperComponents/withHover.js

@@ -64,20 +64,44 @@ export default compose(
     }, hoveredAnnotationActions)
   ),
   withHandlers({
-    onMouseOver: props => e => {
-      const { editorName, id, hoveredAnnotationUpdate } = props;
-      const isIdHashmap = typeof id === "object";
-      const idToPass = isIdHashmap ? Object.keys(id)[0] : id;
-      const annot = props?.annotation || props?.label?.annotation;
-      if (modifiableTypes.includes(annot?.annotationTypePlural)) {
-        hoveredAnnEasyStore.hoveredAnn = annot;
-      }
-      //because the calling onHover can slow things down, we disable it if dragging or scrolling
-      if (window.__veDragging || window.__veScrolling) return;
-      e.stopPropagation(); //this is important otherwise hovering labels inside circular view label groups won't work
-      hoveredAnnotationUpdate &&
-        hoveredAnnotationUpdate(idToPass, { editorName });
-    },
+    onMouseOver: props =>
+      function (e) {
+        // loop through the target element and the parents and see if any of them have the hoverHelper class
+        // if they do, then we don't want to trigger the hover event
+        // if they don't, then we do want to trigger the hover event
+        // we should stop the loop if the target element is implementing this onMouseOver event
+        // e.stopPropagation(); //this is important otherwise hovering labels inside circular view label groups won't work
+        const target = e.target;
+        let alreadyHandled = false;
+        let currentElement = target;
+        while (currentElement) {
+          if (currentElement === e.currentTarget) {
+            break;
+          }
+          // console.log(`currentElement:`, currentElement)
+
+          if (currentElement.classList.contains("hoverHelper")) {
+            alreadyHandled = true;
+            break;
+          }
+          currentElement = currentElement.parentElement;
+        }
+        if (alreadyHandled) return;
+
+        // const alreadyHandled = e.target.classList.contains("hoverHelper");
+        const { editorName, id, hoveredAnnotationUpdate } = props;
+        const isIdHashmap = typeof id === "object";
+        const idToPass = isIdHashmap ? Object.keys(id)[0] : id;
+        const annot = props?.annotation || props?.label?.annotation;
+        if (modifiableTypes.includes(annot?.annotationTypePlural)) {
+          hoveredAnnEasyStore.hoveredAnn = annot;
+        }
+        //because the calling onHover can slow things down, we disable it if dragging or scrolling
+        if (window.__veDragging || window.__veScrolling) return;
+
+        hoveredAnnotationUpdate &&
+          hoveredAnnotationUpdate(idToPass, { editorName });
+      },
     onMouseLeave: props => e => {
       hoveredAnnEasyStore.hoveredAnn = undefined;
       const { editorName, hoveredAnnotationClear } = props;

package/style.css

@@ -9029,6 +9029,18 @@ code {
   display: none;
 }
 
+.isDataTitle .tippy-arrow {
+  opacity: 0 !important;
+}
+.isDataTitle .tippy-box {
+  background-color: #4f4a50f4 !important;
+  border-radius: 0 !important;
+  color: #f3f3f3 !important;
+  font-size: 11px !important;
+  white-space: pre-wrap;
+  padding: 0px 0px !important;
+}
+
 [data-tippy-root] {
   z-index: 100000 !important;
 }