Rename DomainTooltip to DomainControls and move tooltip logic to DomainWidget

apps/storybook/src/DomainControls.stories.tsx

@@ -0,0 +1,73 @@
+import { DomainControls } from '@h5web/lib';
+import type { Domain } from '@h5web/shared';
+import { useToggle } from '@react-hookz/web';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+const meta = {
+  title: 'Toolbar/DomainControls',
+  component: DomainControls,
+  argTypes: {
+    sliderDomain: { control: false },
+    errors: { control: false },
+    isAutoMin: { control: false },
+    isAutoMax: { control: false },
+    isEditingMin: { control: false },
+    isEditingMax: { control: false },
+  },
+} satisfies Meta<typeof DomainControls>;
+
+export default meta;
+type Story = StoryObj<typeof DomainControls>;
+
+export const Default = {
+  render: (args) => {
+    const { dataDomain } = args;
+
+    const [sliderDomain, setSliderDomain] = useState<Domain>(dataDomain);
+    const [isAutoMin, toggleAutoMin] = useToggle();
+    const [isAutoMax, toggleAutoMax] = useToggle();
+    const [isEditingMin, toggleEditingMin] = useToggle();
+    const [isEditingMax, toggleEditingMax] = useToggle();
+
+    useEffect(() => {
+      setSliderDomain(dataDomain);
+    }, [dataDomain]);
+
+    return (
+      <div style={{ maxWidth: '18rem' }}>
+        <DomainControls
+          sliderDomain={sliderDomain}
+          dataDomain={dataDomain}
+          errors={{}}
+          isAutoMin={isAutoMin}
+          isAutoMax={isAutoMax}
+          onAutoMinToggle={() => {
+            toggleAutoMin();
+            if (!isAutoMin) {
+              setSliderDomain([dataDomain[0], sliderDomain[1]]);
+              toggleEditingMin(false);
+            }
+          }}
+          onAutoMaxToggle={() => {
+            toggleAutoMax();
+            if (!isAutoMax) {
+              setSliderDomain([sliderDomain[0], dataDomain[1]]);
+              toggleEditingMax(false);
+            }
+          }}
+          isEditingMin={isEditingMin}
+          isEditingMax={isEditingMax}
+          onEditMin={toggleEditingMin}
+          onEditMax={toggleEditingMax}
+          onChangeMin={(val) => setSliderDomain([val, sliderDomain[1]])}
+          onChangeMax={(val) => setSliderDomain([sliderDomain[0], val])}
+          onSwap={() => setSliderDomain([sliderDomain[1], sliderDomain[0]])}
+        />
+      </div>
+    );
+  },
+  args: {
+    dataDomain: [4, 400],
+  },
+} satisfies Story;

packages/lib/src/index.ts

@@ -17,6 +17,7 @@ export { default as ToggleBtn } from './toolbar/controls/ToggleBtn';
 export { default as ToggleGroup } from './toolbar/controls/ToggleGroup';
 export { default as DomainWidget } from './toolbar/controls/DomainWidget/DomainWidget';
 export { default as DomainSlider } from './toolbar/controls/DomainWidget/DomainSlider';
+export { default as DomainControls } from './toolbar/controls/DomainWidget/DomainControls';
 export { default as ColorMapSelector } from './toolbar/controls/ColorMapSelector/ColorMapSelector';
 export { default as ScaleSelector } from './toolbar/controls/ScaleSelector/ScaleSelector';
 export { default as GridToggler } from './toolbar/controls/GridToggler';
@@ -30,6 +31,8 @@ export { default as Histogram } from './toolbar/controls/Histogram/Histogram';
 export type { ToolbarProps } from './toolbar/Toolbar';
 export type { DomainWidgetProps } from './toolbar/controls/DomainWidget/DomainWidget';
 export type { DomainSliderProps } from './toolbar/controls/DomainWidget/DomainSlider';
+export type { DomainControlsHandle } from './toolbar/controls/DomainWidget/DomainControls';
+export type { DomainControlsProps } from './toolbar/controls/DomainWidget/DomainControls';
 export type { HistogramProps } from './toolbar/controls/Histogram/Histogram';
 
 // Building blocks

packages/lib/src/toolbar/controls/DomainWidget/BoundEditor.module.css

@@ -57,5 +57,5 @@
 }
 
 .actionBtn {
-  composes: actionBtn from './DomainTooltip.module.css';
+  composes: actionBtn from './DomainControls.module.css';
 }

packages/lib/src/toolbar/controls/DomainWidget/DomainTooltip.module.css → packages/lib/src/toolbar/controls/DomainWidget/DomainControls.module.css

@@ -1,20 +1,3 @@
-.tooltip {
-  composes: popup from '../../Toolbar.module.css';
-  z-index: 2; /* above overflow and selector menus */
-  /* Add invisible padding around tooltip to extend hover area */
-  /* (especially for when enabling auto-scaling hides an error message). */
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-bottom: 2rem;
-}
-
-.tooltipInner {
-  composes: popupInner from '../../Toolbar.module.css';
-  padding: 1rem 0.375rem 1rem 0.75rem;
-  display: flex;
-  align-items: center;
-}
-
 .tooltipControls > p {
   margin-bottom: 0.75rem;
 }

packages/lib/src/toolbar/controls/DomainWidget/DomainControls.tsx

@@ -0,0 +1,129 @@
+import type { Domain } from '@h5web/shared';
+import { formatBound } from '@h5web/shared';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+
+import type { DomainErrors } from '../../../vis/models';
+import { DomainError } from '../../../vis/models';
+import ToggleBtn from '../ToggleBtn';
+import type { BoundEditorHandle } from './BoundEditor';
+import BoundEditor from './BoundEditor';
+import styles from './DomainControls.module.css';
+import ErrorMessage from './ErrorMessage';
+
+interface Props {
+  sliderDomain: Domain;
+  dataDomain: Domain;
+  errors: DomainErrors;
+  isAutoMin: boolean;
+  isAutoMax: boolean;
+  onAutoMinToggle: () => void;
+  onAutoMaxToggle: () => void;
+  isEditingMin: boolean;
+  isEditingMax: boolean;
+  onEditMin: (force: boolean) => void;
+  onEditMax: (force: boolean) => void;
+  onChangeMin: (val: number) => void;
+  onChangeMax: (val: number) => void;
+  onSwap: () => void;
+}
+
+interface Handle {
+  cancelEditing: () => void;
+}
+
+const DomainControls = forwardRef<Handle, Props>((props, ref) => {
+  const { sliderDomain, dataDomain, errors } = props;
+  const { isAutoMin, isAutoMax, isEditingMin, isEditingMax } = props;
+  const {
+    onAutoMinToggle,
+    onAutoMaxToggle,
+    onEditMin,
+    onEditMax,
+    onChangeMin,
+    onChangeMax,
+    onSwap,
+  } = props;
+
+  const { minGreater, minError, maxError } = errors;
+  const minEditorRef = useRef<BoundEditorHandle>(null);
+  const maxEditorRef = useRef<BoundEditorHandle>(null);
+
+  /* Expose `cancelEditing` function to parent component through ref handle so that
+     editing can be cancelled when the user closes the domain tooltip. */
+  useImperativeHandle(ref, () => ({
+    cancelEditing: () => {
+      minEditorRef.current?.cancel();
+      maxEditorRef.current?.cancel();
+    },
+  }));
+
+  return (
+    <div className={styles.tooltipControls}>
+      {minGreater && (
+        <ErrorMessage
+          error={DomainError.MinGreater}
+          showSwapBtn={!isAutoMin && !isAutoMax}
+          onSwap={onSwap}
+        />
+      )}
+      <BoundEditor
+        ref={minEditorRef}
+        bound="min"
+        value={sliderDomain[0]}
+        isEditing={isEditingMin}
+        hasError={minGreater || !!minError}
+        onEditToggle={onEditMin}
+        onChange={onChangeMin}
+      />
+      {minError && <ErrorMessage error={minError} />}
+
+      <BoundEditor
+        ref={maxEditorRef}
+        bound="max"
+        value={sliderDomain[1]}
+        isEditing={isEditingMax}
+        hasError={minGreater || !!maxError}
+        onEditToggle={onEditMax}
+        onChange={onChangeMax}
+      />
+      {maxError && <ErrorMessage error={maxError} />}
+
+      <p className={styles.dataRange}>
+        Data range{' '}
+        <span>
+          [{' '}
+          <abbr title={dataDomain[0].toString()}>
+            {formatBound(dataDomain[0])}
+          </abbr>{' '}
+          ,{' '}
+          <abbr title={dataDomain[1].toString()}>
+            {formatBound(dataDomain[1])}
+          </abbr>{' '}
+          ]
+        </span>
+      </p>
+
+      <p className={styles.autoscale}>
+        Autoscale{' '}
+        <ToggleBtn
+          label="Min"
+          raised
+          value={isAutoMin}
+          onToggle={onAutoMinToggle}
+        />
+        <ToggleBtn
+          label="Max"
+          raised
+          value={isAutoMax}
+          onToggle={onAutoMaxToggle}
+        />
+      </p>
+    </div>
+  );
+});
+
+DomainControls.displayName = 'DomainControls';
+
+export type { Handle as DomainControlsHandle };
+export type { Props as DomainControlsProps };
+export default DomainControls;