Toggle exact notation in Live vis tooltip with wheel button

Author: axelboc

packages/lib/src/vis/line/LineVis.tsx

@@ -124,7 +124,7 @@ function LineVis(props: Props) {
 
         <TooltipMesh
           guides="vertical"
-          renderTooltip={(x) => {
+          renderTooltip={(x, _, exact) => {
             const xi = abscissaToIndex(x);
             const abscissa = abscissas[xi];
 
@@ -137,7 +137,7 @@ function LineVis(props: Props) {
 
             return (
               <>
-                {`${abscissaLabel ?? 'x'} = ${formatTooltipVal(abscissa)}`}
+                {`${abscissaLabel ?? 'x'} = ${exact ? abscissa : formatTooltipVal(abscissa)}`}
 
                 <div className={styles.tooltipValue}>
                   {auxiliaries.length > 0 && (
@@ -148,8 +148,9 @@ function LineVis(props: Props) {
                     />
                   )}
                   <span>
-                    <strong>{formatTooltipVal(value)}</strong>
-                    {error !== undefined && ` ±${formatTooltipErr(error)}`}
+                    <strong>{exact ? value : formatTooltipVal(value)}</strong>
+                    {error !== undefined &&
+                      ` ±${exact ? error : formatTooltipErr(error)}`}
                     {dtype && <em>{` (${dtype})`}</em>}
                   </span>
                 </div>
@@ -162,8 +163,9 @@ function LineVis(props: Props) {
                       style={{ color: auxColors[index % auxColors.length] }}
                     />
                     {label ? `${label} = ` : ''}
-                    {formatTooltipVal(array.get(xi))}
-                    {errors && ` ±${formatTooltipErr(errors.get(xi))}`}
+                    {exact ? array.get(xi) : formatTooltipVal(array.get(xi))}
+                    {errors &&
+                      ` ±${exact ? errors.get(xi) : formatTooltipErr(errors.get(xi))}`}
                   </div>
                 ))}
               </>

packages/lib/src/vis/shared/TooltipMesh.tsx

@@ -1,3 +1,4 @@
+import { useToggle } from '@react-hookz/web';
 import { type ThreeEvent } from '@react-three/fiber';
 import { useTooltip } from '@visx/tooltip';
 import { type ReactElement, useCallback } from 'react';
@@ -10,7 +11,11 @@ import VisMesh from './VisMesh';
 interface Props {
   size?: Size;
   guides?: 'horizontal' | 'vertical' | 'both';
-  renderTooltip: (x: number, y: number) => ReactElement | undefined;
+  renderTooltip: (
+    x: number,
+    y: number,
+    exact: boolean,
+  ) => ReactElement | undefined;
 }
 
 function TooltipMesh(props: Props) {
@@ -27,6 +32,8 @@ function TooltipMesh(props: Props) {
     hideTooltip,
   } = useTooltip<Coords>();
 
+  const [isExact, toggleExact] = useToggle();
+
   // Show and/or update tooltip when pointer moves except when dragging
   const onPointerMove = useCallback(
     (evt: ThreeEvent<PointerEvent>) => {
@@ -57,7 +64,16 @@ function TooltipMesh(props: Props) {
   }, [hideTooltip, tooltipOpen]);
 
   // Hide tooltip when user starts panning
-  const onPointerDown = useCallback(() => hideTooltip(), [hideTooltip]);
+  const onPointerDown = useCallback(
+    (evt: ThreeEvent<PointerEvent>) => {
+      if (evt.button === 1) {
+        toggleExact();
+      } else {
+        hideTooltip();
+      }
+    },
+    [hideTooltip, toggleExact],
+  );
 
   // Show tooltip after dragging, if pointer is released inside the vis viewport
   const onPointerUp = useCallback(
@@ -71,7 +87,7 @@ function TooltipMesh(props: Props) {
     [height, onPointerMove, width],
   );
 
-  const content = tooltipData && renderTooltip(...tooltipData);
+  const content = tooltipData && renderTooltip(...tooltipData, isExact);
 
   return (
     <>