From bfd05f3b61f3c7730757bcd5c6d36b4b11024a43 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Thu, 11 Mar 2021 10:12:22 +0100
Subject: [PATCH] Implement editing of domain bounds

---
 src/h5web/toolbar/Toolbar.module.css          | 10 +-
 .../DomainSlider/BoundEditor.module.css       | 78 ++++++++++++++++
 .../controls/DomainSlider/BoundEditor.tsx     | 85 +++++++++++++++++
 .../DomainSlider/BoundErrorMessage.tsx        |  2 +-
 .../DomainSlider/DomainSlider.module.css      |  2 +-
 .../controls/DomainSlider/DomainSlider.tsx    | 92 +++++++++++--------
 .../DomainSlider/DomainTooltip.module.css     | 46 +---------
 .../controls/DomainSlider/DomainTooltip.tsx   | 48 +++++++---
 .../controls/DomainSlider/ScaledSlider.tsx    | 14 +--
 .../core/heatmap/MappedHeatmapVis.tsx         |  7 +-
 src/h5web/vis-packs/core/heatmap/hooks.ts     |  3 +-
 src/h5web/vis-packs/core/heatmap/utils.ts     | 24 ++---
 src/styles/utils.css                          |  6 ++
 src/styles/vars.css                           |  2 +-
 14 files changed, 296 insertions(+), 123 deletions(-)
 create mode 100644 src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css
 create mode 100644 src/h5web/toolbar/controls/DomainSlider/BoundEditor.tsx

diff --git a/src/h5web/toolbar/Toolbar.module.css b/src/h5web/toolbar/Toolbar.module.css
index 21eb380b3..29e2aea71 100644
--- a/src/h5web/toolbar/Toolbar.module.css
+++ b/src/h5web/toolbar/Toolbar.module.css
@@ -29,12 +29,6 @@
   padding: 0 0.25rem;
 }
 
-.btn:disabled,
-.btn[aria-disabled='true'] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 .btn[data-small] {
   padding: 0 0.125rem;
 }
@@ -88,6 +82,10 @@
   box-shadow: var(--btn-shadow-idle) var(--btn-shadow-color);
 }
 
+.btn:active > .btnLike {
+  box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color);
+}
+
 .btn[data-raised]:hover > .btnLike {
   box-shadow: var(--btn-shadow-raised) var(--btn-shadow-color),
     var(--btn-shadow-idle) var(--btn-shadow-color);
diff --git a/src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css b/src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css
new file mode 100644
index 000000000..3ce8190b6
--- /dev/null
+++ b/src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css
@@ -0,0 +1,78 @@
+.boundEditor {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-weight: bold;
+}
+
+.label {
+  width: 2.5em;
+  margin: 0 1rem 0 0;
+  text-transform: uppercase;
+  font-size: inherit;
+  color: var(--near-black);
+}
+
+.value {
+  flex: 1 1 0%;
+  width: 0; /* ensures this input shrinks before filling the available space */
+  height: 1.875rem; /* maintain height regardless of font size */
+  margin-right: 0.375rem;
+  padding: 0.25rem 0.375rem;
+  background-color: rgba(255, 255, 255, 0.5);
+  border: 1px solid transparent;
+  border-radius: 0.125rem;
+  box-shadow: 0 0 2px var(--dark-slate-gray);
+  text-align: right;
+  color: var(--near-black);
+  font-weight: inherit;
+  line-height: inherit;
+  transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
+  cursor: text;
+}
+
+.value:hover {
+  box-shadow: 1px 1px 2px 1px var(--dark-gray);
+}
+
+.value:focus {
+  box-shadow: 1px 1px 2px 1px var(--secondary-dark);
+  outline: none;
+}
+
+.boundEditor[data-error] .label,
+.boundEditor[data-error] .value {
+  color: var(--warn);
+}
+
+.boundEditor[data-editing='true'] .value {
+  background-color: var(--white);
+  border-color: var(--secondary-dark);
+  outline: none;
+  font-weight: 600;
+  font-size: 0.9375em;
+  line-height: calc(1.2 / 0.9375);
+}
+
+.boundEditor[data-editing='true'] .value:hover {
+  box-shadow: 1px 1px 2px 1px var(--secondary-dark);
+}
+
+.action {
+  composes: btn-clean from global;
+  display: flex;
+  align-items: center;
+  padding: 0.25rem;
+  font-size: 1.125em;
+  border-radius: 0.5rem;
+  transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
+}
+
+.action:hover {
+  background-color: var(--secondary-light);
+  box-shadow: var(--btn-shadow-idle) var(--btn-shadow-color);
+}
+
+.action:active {
+  box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color);
+}
diff --git a/src/h5web/toolbar/controls/DomainSlider/BoundEditor.tsx b/src/h5web/toolbar/controls/DomainSlider/BoundEditor.tsx
new file mode 100644
index 000000000..5487839e3
--- /dev/null
+++ b/src/h5web/toolbar/controls/DomainSlider/BoundEditor.tsx
@@ -0,0 +1,85 @@
+import { ReactElement, useEffect, useRef, useState } from 'react';
+import { FiCheck, FiSlash } from 'react-icons/fi';
+import { formatValue } from '../../../utils';
+import styles from './BoundEditor.module.css';
+
+interface Props {
+  label: string;
+  value: number;
+  isEditing: boolean;
+  hasError: boolean;
+  onEditToggle: (force: boolean) => void;
+  onChange: (val: number) => void;
+}
+
+function BoundEditor(props: Props): ReactElement {
+  const { label, value, isEditing, hasError, onEditToggle, onChange } = props;
+
+  const id = `${label}-bound`;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [inputValue, setInputValue] = useState(formatValue(value));
+
+  useEffect(() => {
+    setInputValue(isEditing ? value.toString() : formatValue(value));
+  }, [isEditing, value, setInputValue]);
+
+  useEffect(() => {
+    if (!isEditing) {
+      // Remove focus from min field when editing is turned off
+      inputRef.current?.blur();
+    }
+
+    if (isEditing && label === 'Min') {
+      // Give focus to min field when opening tooltip in edit mode
+      inputRef.current?.focus();
+    }
+  }, [isEditing, label]);
+
+  return (
+    <form
+      className={styles.boundEditor}
+      data-error={hasError || undefined}
+      data-editing={isEditing}
+      onSubmit={(evt) => {
+        evt.preventDefault();
+        onChange(Number.parseFloat(inputValue));
+        onEditToggle(false);
+      }}
+    >
+      <label id={`${id}-label`} className={styles.label} htmlFor={id}>
+        <abbr title={value.toString()}>{label}</abbr>
+      </label>
+
+      <input
+        id={id}
+        ref={inputRef}
+        className={styles.value}
+        type="text"
+        name="bound"
+        value={inputValue}
+        aria-labelledby={`${id}-label`} // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/566
+        onChange={(evt) => setInputValue(evt.target.value)}
+        onFocus={() => {
+          if (!isEditing) {
+            onEditToggle(true);
+          }
+        }}
+      />
+
+      <button className={styles.action} type="submit" disabled={!isEditing}>
+        <FiCheck>Apply</FiCheck>
+      </button>
+      <button
+        className={styles.action}
+        type="button"
+        disabled={!isEditing}
+        onClick={() => onEditToggle(false)}
+      >
+        <FiSlash>Cancel</FiSlash>
+      </button>
+    </form>
+  );
+}
+
+export default BoundEditor;
diff --git a/src/h5web/toolbar/controls/DomainSlider/BoundErrorMessage.tsx b/src/h5web/toolbar/controls/DomainSlider/BoundErrorMessage.tsx
index 88d5544c6..7692088c8 100644
--- a/src/h5web/toolbar/controls/DomainSlider/BoundErrorMessage.tsx
+++ b/src/h5web/toolbar/controls/DomainSlider/BoundErrorMessage.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import { FiCornerDownRight } from 'react-icons/fi';
 import { Bound, BoundError } from '../../../vis-packs/core/models';
-import styles from './DomainSlider.module.css';
+import styles from './DomainTooltip.module.css';
 
 interface Props {
   bound: Bound;
diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css b/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css
index efe536221..4665156ce 100644
--- a/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css
+++ b/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css
@@ -11,7 +11,7 @@
 .slider {
   display: flex;
   width: 8rem;
-  margin-right: 0.25rem;
+  margin-right: -0.25rem;
   font-size: 0.75rem;
   cursor: pointer;
 }
diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainSlider.tsx b/src/h5web/toolbar/controls/DomainSlider/DomainSlider.tsx
index c0693323f..cf4354e9c 100644
--- a/src/h5web/toolbar/controls/DomainSlider/DomainSlider.tsx
+++ b/src/h5web/toolbar/controls/DomainSlider/DomainSlider.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useRef, useState } from 'react';
 import styles from './DomainSlider.module.css';
 import type {
   CustomDomain,
@@ -6,26 +6,17 @@ import type {
   ScaleType,
 } from '../../../vis-packs/core/models';
 import ToggleBtn from '../ToggleBtn';
-import { FiZap } from 'react-icons/fi';
-import { useKey, useToggle } from 'react-use';
+import { MdTune } from 'react-icons/md';
+import { useClickAway, useKey, useToggle } from 'react-use';
 import DomainTooltip from './DomainTooltip';
 import ScaledSlider from './ScaledSlider';
-import { useVisDomain } from '../../../vis-packs/core/heatmap/hooks';
+import {
+  useSafeDomain,
+  useVisDomain,
+} from '../../../vis-packs/core/heatmap/hooks';
 
 const TOOLTIP_ID = 'domain-tooltip';
 
-function getAutoscaleLabel(isAutoMin: boolean, isAutoMax: boolean): string {
-  if (isAutoMin && !isAutoMax) {
-    return 'Min';
-  }
-
-  if (isAutoMax && !isAutoMin) {
-    return 'Max';
-  }
-
-  return 'Auto';
-}
-
 interface Props {
   dataDomain: Domain;
   customDomain: CustomDomain;
@@ -38,38 +29,55 @@ function DomainSlider(props: Props): ReactElement {
   const { dataDomain, customDomain, scaleType, disabled } = props;
   const { onCustomDomainChange } = props;
 
-  const [visDomain, errors] = useVisDomain(dataDomain, customDomain, scaleType);
-  const [sliderDomain, setSliderDomain] = useState(visDomain);
+  const visDomain = useVisDomain(customDomain, dataDomain);
+  const [safeDomain, errors] = useSafeDomain(visDomain, dataDomain, scaleType);
 
+  const [sliderDomain, setSliderDomain] = useState(visDomain);
   useEffect(() => {
     setSliderDomain(visDomain);
   }, [visDomain, setSliderDomain]);
 
   const isAutoMin = customDomain[0] === undefined;
   const isAutoMax = customDomain[1] === undefined;
-  const isAutoscaling = isAutoMin || isAutoMax;
 
-  const [tooltipOpen, toggleTooltip] = useToggle(false);
-  useKey('Escape', () => toggleTooltip(false));
+  const [hovered, toggleHovered] = useToggle(false);
+  const [isEditingMin, toggleEditingMin] = useToggle(false);
+  const [isEditingMax, toggleEditingMax] = useToggle(false);
+  const isEditing = isEditingMin || isEditingMax;
+
+  function toggleAll(force: boolean) {
+    toggleEditingMin(force);
+    toggleEditingMax(force);
+    toggleHovered(force);
+  }
+
+  const rootRef = useRef(null);
+  useClickAway(rootRef, () => toggleAll(false));
+  useKey('Escape', () => toggleAll(false));
 
   return (
     <div
+      ref={rootRef}
       className={styles.root}
-      aria-expanded={tooltipOpen}
+      aria-expanded={hovered}
       aria-describedby={TOOLTIP_ID}
-      onPointerEnter={() => toggleTooltip(true)}
-      onPointerLeave={() => toggleTooltip(false)}
+      onPointerEnter={() => toggleHovered(true)}
+      onPointerLeave={() => toggleHovered(false)}
     >
       <ScaledSlider
         value={sliderDomain}
+        safeVisDomain={safeDomain}
         dataDomain={dataDomain}
-        visDomain={visDomain}
         scaleType={scaleType}
         errors={errors}
         disabled={disabled}
         isAutoMin={isAutoMin}
         isAutoMax={isAutoMax}
-        onChange={setSliderDomain}
+        onChange={(newValue) => {
+          setSliderDomain(newValue);
+          toggleEditingMin(false);
+          toggleEditingMax(false);
+        }}
         onAfterChange={(hasMinChanged, hasMaxChanged) => {
           onCustomDomainChange([
             hasMinChanged ? sliderDomain[0] : customDomain[0],
@@ -79,22 +87,18 @@ function DomainSlider(props: Props): ReactElement {
       />
 
       <ToggleBtn
-        small
-        label={getAutoscaleLabel(isAutoMin, isAutoMax)}
-        icon={FiZap}
-        value={isAutoscaling}
+        iconOnly
+        label="Edit domain"
+        icon={MdTune}
+        value={isEditing}
         disabled={disabled}
-        onChange={() => {
-          onCustomDomainChange(
-            isAutoscaling ? dataDomain : [undefined, undefined]
-          );
-        }}
+        onChange={() => toggleAll(!isEditing)}
       />
 
       <DomainTooltip
         id={TOOLTIP_ID}
-        open={tooltipOpen}
-        domain={sliderDomain}
+        open={hovered || isEditing}
+        sliderDomain={sliderDomain}
         dataDomain={dataDomain}
         errors={errors}
         isAutoMin={isAutoMin}
@@ -102,11 +106,25 @@ function DomainSlider(props: Props): ReactElement {
         onAutoMinToggle={() => {
           const newMin = isAutoMin ? dataDomain[0] : undefined;
           onCustomDomainChange([newMin, customDomain[1]]);
+
+          if (!isAutoMin) {
+            toggleEditingMin(false);
+          }
         }}
         onAutoMaxToggle={() => {
           const newMax = isAutoMax ? dataDomain[1] : undefined;
           onCustomDomainChange([customDomain[0], newMax]);
+
+          if (!isAutoMax) {
+            toggleEditingMax(false);
+          }
         }}
+        isEditingMin={isEditingMin}
+        isEditingMax={isEditingMax}
+        onEditMin={toggleEditingMin}
+        onEditMax={toggleEditingMax}
+        onChangeMin={(val) => onCustomDomainChange([val, customDomain[1]])}
+        onChangeMax={(val) => onCustomDomainChange([customDomain[0], val])}
       />
     </div>
   );
diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css
index 1671a0f9f..e85fbcc70 100644
--- a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css
+++ b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css
@@ -1,13 +1,13 @@
 .tooltip {
   composes: popup from '../../Toolbar.module.css';
   left: 50%;
-  min-width: 17em;
+  min-width: 18.25em;
   transform: translate(-50%, 100%);
 }
 
 .tooltipInner {
   composes: popupInner from '../../Toolbar.module.css';
-  padding: 1rem 0.75rem;
+  padding: 1rem 0.375rem 1rem 0.75rem;
 }
 
 .tooltipInner > p {
@@ -18,48 +18,8 @@
   margin-bottom: 0;
 }
 
-.minMax {
-  display: grid;
-  grid-template-columns: [label] auto [value] 1fr [actions] 2.5em;
-  grid-gap: 0.5rem;
-  margin-bottom: 1rem;
-  font-weight: bold;
-  color: var(--near-black);
-}
-
-.minMax > h3,
-.minMax > p {
-  margin-bottom: 0;
-}
-
-.minMax > h3 {
-  grid-column: label;
-  text-transform: uppercase;
-  font-size: inherit;
-}
-
-.value {
-  grid-column: value;
-  display: flex;
-  align-items: center;
-  text-align: right;
-}
-
-.value::before {
-  flex: 1 1 0%;
-  content: '';
-  min-width: 1em;
-  margin-right: 0.5rem;
-  margin-top: 0.5rem;
-  border-bottom: 2px dotted currentColor;
-  color: var(--black);
-}
-
-.value[data-error] {
-  color: var(--warn);
-}
-
 .dataRange {
+  margin-top: 1rem;
   white-space: nowrap;
 }
 
diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx
index 39c1f5012..1a2b83915 100644
--- a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx
+++ b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx
@@ -3,39 +3,61 @@ import type { Domain } from '../../../../packages/lib';
 import { formatValue } from '../../../utils';
 import type { DomainErrors } from '../../../vis-packs/core/models';
 import ToggleBtn from '../ToggleBtn';
+import BoundEditor from './BoundEditor';
 import BoundErrorMessage from './BoundErrorMessage';
 import styles from './DomainTooltip.module.css';
 
 interface Props {
   id: string;
   open: boolean;
-  domain: Domain;
+  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;
 }
 
 function DomainTooltip(props: Props): ReactElement {
-  const { id, open, domain, dataDomain, errors, isAutoMin, isAutoMax } = props;
-  const { onAutoMinToggle, onAutoMaxToggle } = props;
+  const { id, open, sliderDomain, dataDomain, errors } = props;
+  const { isAutoMin, isAutoMax, isEditingMin, isEditingMax } = props;
+  const {
+    onAutoMinToggle,
+    onAutoMaxToggle,
+    onEditMin,
+    onEditMax,
+    onChangeMin,
+    onChangeMax,
+  } = props;
+
   const { minError, maxError } = errors;
 
   return (
     <div id={id} className={styles.tooltip} role="tooltip" hidden={!open}>
       <div className={styles.tooltipInner}>
-        <div className={styles.minMax}>
-          <h3>Min</h3>
-          <p className={styles.value} data-error={minError || undefined}>
-            <abbr title={domain[0].toString()}>{formatValue(domain[0])}</abbr>
-          </p>
-          <h3>Max</h3>
-          <p className={styles.value} data-error={maxError || undefined}>
-            <abbr title={domain[1].toString()}>{formatValue(domain[1])}</abbr>
-          </p>
-        </div>
+        <BoundEditor
+          label="Min"
+          value={sliderDomain[0]}
+          isEditing={isEditingMin}
+          hasError={!!minError}
+          onEditToggle={onEditMin}
+          onChange={onChangeMin}
+        />
+        <BoundEditor
+          label="Max"
+          value={sliderDomain[1]}
+          isEditing={isEditingMax}
+          hasError={!!maxError}
+          onEditToggle={onEditMax}
+          onChange={onChangeMax}
+        />
 
         <p className={styles.dataRange}>
           Data range{' '}
diff --git a/src/h5web/toolbar/controls/DomainSlider/ScaledSlider.tsx b/src/h5web/toolbar/controls/DomainSlider/ScaledSlider.tsx
index a05b8a575..00b2badc7 100644
--- a/src/h5web/toolbar/controls/DomainSlider/ScaledSlider.tsx
+++ b/src/h5web/toolbar/controls/DomainSlider/ScaledSlider.tsx
@@ -11,6 +11,7 @@ import type {
 import styles from './DomainSlider.module.css';
 import Thumb from './Thumb';
 import Track from './Track';
+import { getSafeDomain } from '../../../vis-packs/core/heatmap/utils';
 
 const SLIDER_RANGE: Domain = [1, 100];
 const EXTEND_FACTOR = 0.3;
@@ -18,7 +19,7 @@ const EXTEND_FACTOR = 0.3;
 interface Props {
   value: Domain;
   dataDomain: Domain;
-  visDomain: Domain;
+  safeVisDomain: Domain;
   scaleType: ScaleType;
   errors: DomainErrors;
   disabled?: boolean;
@@ -36,7 +37,7 @@ function ScaledSlider(props: Props): ReactElement {
   const {
     value,
     dataDomain,
-    visDomain,
+    safeVisDomain,
     scaleType,
     errors,
     disabled,
@@ -46,7 +47,7 @@ function ScaledSlider(props: Props): ReactElement {
   const { onChange, onAfterChange: onDone } = props;
   const { minError, maxError } = errors;
 
-  const sliderExtent = extendDomain(visDomain, EXTEND_FACTOR, scaleType);
+  const sliderExtent = extendDomain(safeVisDomain, EXTEND_FACTOR, scaleType);
 
   const [hasMinChanged, setMinChanged] = useBoolean(false);
   const [hasMaxChanged, setMaxChanged] = useBoolean(false);
@@ -58,7 +59,8 @@ function ScaledSlider(props: Props): ReactElement {
     clamp: true,
   });
 
-  const scaledValue = value.map(scale).map(Math.round) as Domain;
+  const [safeValue] = getSafeDomain(value, dataDomain, scaleType);
+  const scaledValue = safeValue.map(scale).map(Math.round) as Domain;
 
   function handleChange(newScaledValue: Domain) {
     const [newScaledMin, newScaledMax] = newScaledValue;
@@ -66,8 +68,8 @@ function ScaledSlider(props: Props): ReactElement {
     const hasMaxChanged = newScaledMax !== scaledValue[1];
 
     const newValue: Domain = [
-      hasMinChanged ? scale.invert(newScaledMin) : value[0],
-      hasMaxChanged ? scale.invert(newScaledMax) : value[1],
+      hasMinChanged ? scale.invert(newScaledMin) : safeValue[0],
+      hasMaxChanged ? scale.invert(newScaledMax) : safeValue[1],
     ];
 
     onChange(newValue, hasMinChanged, hasMaxChanged);
diff --git a/src/h5web/vis-packs/core/heatmap/MappedHeatmapVis.tsx b/src/h5web/vis-packs/core/heatmap/MappedHeatmapVis.tsx
index 5458a692a..a08f4e590 100644
--- a/src/h5web/vis-packs/core/heatmap/MappedHeatmapVis.tsx
+++ b/src/h5web/vis-packs/core/heatmap/MappedHeatmapVis.tsx
@@ -17,7 +17,7 @@ import type {
 } from '../../../providers/hdf5-models';
 import { isAxis } from '../../../dimension-mapper/utils';
 import shallow from 'zustand/shallow';
-import { useVisDomain } from './hooks';
+import { useSafeDomain, useVisDomain } from './hooks';
 
 interface Props {
   dataset: Dataset<HDF5SimpleShape, HDF5NumericType>;
@@ -65,7 +65,8 @@ function MappedHeatmapVis(props: Props): ReactElement {
   const dataDomain =
     useDomain(dataArray.data as number[], scaleType) || DEFAULT_DOMAIN;
 
-  const [visDomain] = useVisDomain(dataDomain, customDomain, scaleType);
+  const visDomain = useVisDomain(customDomain, dataDomain);
+  const [safeDomain] = useSafeDomain(visDomain, dataDomain, scaleType);
 
   useEffect(() => {
     setDataDomain(dataDomain);
@@ -81,7 +82,7 @@ function MappedHeatmapVis(props: Props): ReactElement {
     <HeatmapVis
       dataArray={dataArray}
       title={title}
-      domain={visDomain}
+      domain={safeDomain}
       colorMap={colorMap}
       scaleType={scaleType}
       keepAspectRatio={keepAspectRatio}
diff --git a/src/h5web/vis-packs/core/heatmap/hooks.ts b/src/h5web/vis-packs/core/heatmap/hooks.ts
index aaa5012b5..63b25c988 100644
--- a/src/h5web/vis-packs/core/heatmap/hooks.ts
+++ b/src/h5web/vis-packs/core/heatmap/hooks.ts
@@ -1,4 +1,5 @@
 import { createMemo } from 'react-use';
-import { getVisDomain } from './utils';
+import { getVisDomain, getSafeDomain } from './utils';
 
 export const useVisDomain = createMemo(getVisDomain);
+export const useSafeDomain = createMemo(getSafeDomain);
diff --git a/src/h5web/vis-packs/core/heatmap/utils.ts b/src/h5web/vis-packs/core/heatmap/utils.ts
index b06ddfc6b..c054b8a5b 100644
--- a/src/h5web/vis-packs/core/heatmap/utils.ts
+++ b/src/h5web/vis-packs/core/heatmap/utils.ts
@@ -14,29 +14,31 @@ const GRADIENT_PRECISION = 1 / 20;
 const GRADIENT_RANGE = range(0, 1 + GRADIENT_PRECISION, GRADIENT_PRECISION);
 
 export function getVisDomain(
-  dataDomain: Domain,
   customDomain: CustomDomain,
+  dataDomain: Domain
+): Domain {
+  return [customDomain[0] ?? dataDomain[0], customDomain[1] ?? dataDomain[1]];
+}
+
+export function getSafeDomain(
+  domain: Domain,
+  fallbackDomain: Domain,
   scaleType: ScaleType
 ): [Domain, DomainErrors] {
-  const visDomain: Domain = [
-    customDomain[0] ?? dataDomain[0],
-    customDomain[1] ?? dataDomain[1],
-  ];
-
   if (scaleType === ScaleType.Log) {
     return [
       [
-        visDomain[0] <= 0 ? dataDomain[0] : visDomain[0],
-        visDomain[1] <= 0 ? dataDomain[1] : visDomain[1],
+        domain[0] <= 0 ? fallbackDomain[0] : domain[0],
+        domain[1] <= 0 ? fallbackDomain[1] : domain[1],
       ],
       {
-        minError: visDomain[0] <= 0 ? BoundError.InvalidWithLog : undefined,
-        maxError: visDomain[1] <= 0 ? BoundError.InvalidWithLog : undefined,
+        minError: domain[0] <= 0 ? BoundError.InvalidWithLog : undefined,
+        maxError: domain[1] <= 0 ? BoundError.InvalidWithLog : undefined,
       },
     ];
   }
 
-  return [visDomain, {}];
+  return [domain, {}];
 }
 
 export function getDims(dataArray: ndarray): Dims {
diff --git a/src/styles/utils.css b/src/styles/utils.css
index 114721a56..1bc7aeb05 100644
--- a/src/styles/utils.css
+++ b/src/styles/utils.css
@@ -10,3 +10,9 @@
   white-space: normal;
   cursor: pointer;
 }
+
+.btn-clean:disabled,
+.btn-clean[aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}
diff --git a/src/styles/vars.css b/src/styles/vars.css
index a844c26c9..cb7135022 100644
--- a/src/styles/vars.css
+++ b/src/styles/vars.css
@@ -22,7 +22,7 @@
   --secondary-light-bg: #ecfaf6;
   --secondary-light-bg-90: #ebfaf5e6;
   --danger: #99231b;
-  --warn: #7e4c00;
+  --warn: #973c00;
   --monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
     monospace;
   --sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',