refactor: Simplified HoverTooltip, moved tooltip styling into CanvasH…

…overTooltip, renamed state values for clarity
allen-cell-animated · Dec 6, 2024 · 7f2eac1 · 7f2eac1
1 parent 124c974
commit 7f2eac1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/src/Viewer.tsx b/src/Viewer.tsx
@@ -200,9 +200,8 @@ function Viewer(): ReactElement {
    */
   const [frameInput, setFrameInput] = useState(0);
   const [findTrackInput, setFindTrackInput] = useState("");
-  // Prevent jarring jumps in the hover tooltip by using the last non-null value
-  const [lastHoveredId, setLastHoveredId] = useState<number | null>(null);
-  const [showHoveredId, setShowHoveredId] = useState(false);
+  const [lastValidHoveredId, setLastValidHoveredId] = useState<number>(-1);
+  const [showObjectHoverInfo, setShowObjectHoverInfo] = useState(false);
 
   // UTILITY METHODS /////////////////////////////////////////////////////////////
 
@@ -996,8 +995,8 @@ function Viewer(): ReactElement {
               <CanvasHoverTooltip
                 dataset={dataset}
                 featureKey={featureKey}
-                lastHoveredId={lastHoveredId}
-                showHoveredId={showHoveredId}
+                lastValidHoveredId={lastValidHoveredId}
+                showObjectHoverInfo={showObjectHoverInfo}
                 motionDeltas={motionDeltas}
                 config={config}
               >
@@ -1026,12 +1025,12 @@ function Viewer(): ReactElement {
                   inRangeLUT={inRangeLUT}
                   onMouseHover={(id: number): void => {
                     const isObject = id !== BACKGROUND_ID;
-                    setShowHoveredId(isObject);
+                    setShowObjectHoverInfo(isObject);
                     if (isObject) {
-                      setLastHoveredId(id);
+                      setLastValidHoveredId(id);
                     }
                   }}
-                  onMouseLeave={() => setShowHoveredId(false)}
+                  onMouseLeave={() => setShowObjectHoverInfo(false)}
                   showAlert={isInitialDatasetLoaded ? showAlert : undefined}
                 />
               </CanvasHoverTooltip>

diff --git a/src/components/Tooltips/CanvasHoverTooltip.tsx b/src/components/Tooltips/CanvasHoverTooltip.tsx
@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, ReactElement, useCallback } from "react";
+import styled from "styled-components";
 
 import { Dataset, VECTOR_KEY_MOTION_DELTA, VectorTooltipMode, ViewerConfig } from "../../colorizer";
 import { numberToStringDecimal } from "../../colorizer/utils/math_utils";
@@ -8,12 +9,25 @@ import HoverTooltip from "./HoverTooltip";
 type CanvasHoverTooltipProps = {
   dataset: Dataset | null;
   featureKey: string;
-  lastHoveredId: number | null;
-  showHoveredId: boolean;
+  lastValidHoveredId: number;
+  showObjectHoverInfo: boolean;
   motionDeltas: Float32Array | null;
   config: ViewerConfig;
 };
 
+// Styling for the tooltip
+const TooltipCard = styled.div`
+  font-family: var(--default-font);
+
+  border-radius: var(--radius-control-small);
+  border: 1px solid var(--color-dividers);
+  background-color: var(--color-background);
+  padding: 6px 8px;
+  overflow-wrap: break-word;
+
+  transition: opacity 300ms;
+`;
+
 /**
  * Sets up and configures the hover tooltip for the main viewport canvas.
  * By default, displays the track ID and the value of the feature at the hovered point.
@@ -22,7 +36,7 @@ type CanvasHoverTooltipProps = {
  * - If vectors are enabled, the vector value (either magnitude or components) will be displayed.
  */
 export default function CanvasHoverTooltip(props: PropsWithChildren<CanvasHoverTooltipProps>): ReactElement {
-  const { dataset, featureKey, lastHoveredId, motionDeltas, config } = props;
+  const { dataset, featureKey, lastValidHoveredId: lastHoveredId, motionDeltas, config } = props;
 
   const getFeatureValue = useCallback(
     (id: number): string => {
@@ -79,8 +93,8 @@ export default function CanvasHoverTooltip(props: PropsWithChildren<CanvasHoverT
        `;
     }
   };
-
   const vectorTooltipText = getVectorTooltipText();
+
   const hoverTooltipContent = [
     <p key="track_id">Track ID: {lastHoveredId && dataset?.getTrackId(lastHoveredId)}</p>,
     <p key="feature_value">
@@ -90,9 +104,9 @@ export default function CanvasHoverTooltip(props: PropsWithChildren<CanvasHoverT
     vectorTooltipText ? <p key="vector">{vectorTooltipText}</p> : null,
   ];
 
-  return (
-    <HoverTooltip tooltipContent={hoverTooltipContent} disabled={!props.showHoveredId}>
-      {props.children}
-    </HoverTooltip>
+  const tooltipContent = (
+    <TooltipCard style={{ opacity: props.showObjectHoverInfo ? 1 : 0 }}>{hoverTooltipContent}</TooltipCard>
   );
+
+  return <HoverTooltip tooltipContent={tooltipContent}>{props.children}</HoverTooltip>;
 }
diff --git a/src/components/Tooltips/HoverTooltip.tsx b/src/components/Tooltips/HoverTooltip.tsx
@@ -18,16 +18,8 @@ const defaultProps: Partial<HoverTooltipProps> = {
   maxWidthPx: 250,
 };
 
-// Styling for the tooltip
 const TooltipDiv = styled.div`
   position: fixed;
-  font-family: var(--default-font);
-
-  border-radius: var(--radius-control-small);
-  border: 1px solid var(--color-dividers);
-  background-color: var(--color-background);
-  padding: 6px 8px;
-  overflow-wrap: break-word;
 
   transition: opacity 300ms;
   z-index: 1;