Show tooltip on hover of domain slider with detailed info

... and ability to autoscale min/max separately

src/h5web/toolbar/HeatmapToolbar.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import { MdAspectRatio, MdGridOn } from 'react-icons/md';
 import ToggleBtn from './controls/ToggleBtn';
 import { useHeatmapConfig } from '../vis-packs/core/heatmap/config';
-import DomainSlider from './controls/DomainSlider';
+import DomainSlider from './controls/DomainSlider/DomainSlider';
 import SnapshotButton from './controls/SnapshotButton';
 import Separator from './Separator';
 import Toolbar from './Toolbar';
@@ -32,8 +32,8 @@ function HeatmapToolbar(): ReactElement {
       {dataDomain && (
         <DomainSlider
           dataDomain={dataDomain}
-          value={customDomain}
-          onChange={setCustomDomain}
+          customDomain={customDomain}
+          onCustomDomainChange={setCustomDomain}
         />
       )}
 

src/h5web/toolbar/OverflowMenu.module.css

@@ -16,15 +16,16 @@
 }
 
 .menu {
-  position: absolute;
-  bottom: 0;
+  composes: popup from './Toolbar.module.css';
   right: 0.25rem;
-  transform: translateY(100%);
+}
+
+.menuList {
+  composes: popupInner from './Toolbar.module.css';
+  display: grid;
+  grid-gap: 0.25rem;
   margin: 0;
   padding: 0.375rem 0.25rem;
-  background-color: var(--secondary-light-bg);
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
-    rgba(0, 0, 0, 0.1) 0px 4px 11px;
   list-style-type: none;
 }
 

src/h5web/toolbar/OverflowMenu.tsx

@@ -46,18 +46,20 @@ function OverflowMenu(props: Props): ReactElement {
         </span>
       </button>
 
-      <ul
+      <div
         id="more-menu"
         className={styles.menu}
         ref={overflowMenuRef}
         role="menu"
         hidden={!isOverflowMenuOpen}
       >
-        {Children.map(children, (child) => (
-          // Render cloned child (React elements don't like to be moved around)
-          <li role="menuitem">{cloneElement(child)}</li>
-        ))}
-      </ul>
+        <ul className={styles.menuList}>
+          {Children.map(children, (child) => (
+            // Render cloned child (React elements don't like to be moved around)
+            <li role="menuitem">{cloneElement(child)}</li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }

src/h5web/toolbar/Toolbar.module.css

@@ -56,6 +56,11 @@
   font-size: 0.875em;
 }
 
+.btn[data-raised] > .btnLike {
+  background-color: var(--btn-bg-raised);
+  box-shadow: 0 0 1px var(--btn-shadow-color);
+}
+
 .icon {
   font-size: 1.5em;
   padding-top: 1px;
@@ -102,3 +107,16 @@
 .btn[aria-expanded='true']:hover > .btnLike {
   box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-dark-color);
 }
+
+.popup {
+  position: absolute;
+  bottom: 1px; /* guarantees overlap with toolbar for hover-only popup */
+  padding-top: calc(0.375rem + 1px);
+  transform: translateY(100%);
+}
+
+.popupInner {
+  background-color: var(--secondary-light-bg-90);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
+    rgba(0, 0, 0, 0.1) 0px 4px 11px;
+}

src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css

@@ -0,0 +1,123 @@
+.root {
+  position: relative;
+  display: flex;
+  padding: 0 0.375rem;
+  margin-right: -0.375rem;
+}
+
+.sliderWrapper {
+  display: flex;
+}
+
+.slider {
+  display: flex;
+  width: 8rem;
+  margin-right: 0.25rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.slider:global(.disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.track {
+  align-self: center;
+  height: 0.375rem;
+  background-color: var(--secondary-dark-15);
+  box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color);
+  border-radius: 0.25rem;
+}
+
+.thumb {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.thumbBtnLike {
+  composes: btnLike from '../../Toolbar.module.css';
+  min-width: 2rem;
+  padding: 0.375rem;
+  background-color: var(--secondary-lighter);
+  box-shadow: var(--btn-shadow-idle) var(--btn-shadow-color);
+}
+
+.thumb:hover > .thumbBtnLike {
+  box-shadow: var(--btn-shadow-idle) var(--btn-shadow-dark-color);
+}
+
+.autoBtnLike {
+  composes: btnLike from '../../Toolbar.module.css';
+  font-size: 0.875em;
+  border-radius: 0.875rem;
+  color: var(--black);
+}
+
+.tooltip {
+  composes: popup from '../../Toolbar.module.css';
+  left: 50%;
+  min-width: 16em;
+  transform: translate(-50%, 100%);
+}
+
+.tooltipInner {
+  composes: popupInner from '../../Toolbar.module.css';
+  padding: 1rem 0.75rem;
+}
+
+.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;
+}
+
+.minMax > p {
+  grid-column: value;
+  display: flex;
+  align-items: center;
+  text-align: right;
+}
+
+.minMax > p::before {
+  flex: 1 1 0%;
+  content: '';
+  min-width: 1em;
+  margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  border-bottom: 2px dotted currentColor;
+}
+
+.dataRange {
+  margin-bottom: 0.75rem;
+  white-space: nowrap;
+}
+
+.dataRange > span {
+  margin-left: 0.5rem;
+}
+
+.autoscale {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.autoscale > button:first-of-type {
+  margin-left: 0.5rem;
+}