@oneuptime/common 14.0.8 → 14.0.10

package/UI/Components/TelemetryViewer/components/TelemetryHistogram.tsx

@@ -104,6 +104,15 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
     bucketIntervalMs: props.bucketIntervalMs,
   });
 
+  /*
+   * The crosshair goes on the chart root itself: recharts sets an inline
+   * `cursor: default` on the .recharts-wrapper that fills the plot, so the
+   * cursor on the box around it never shows over the bars. Left off
+   * entirely when nothing can be dragged, so recharts keeps its default.
+   */
+  const chartRootCursorProps: { style?: React.CSSProperties } =
+    props.onTimeRangeSelect ? { style: { cursor: "crosshair" } } : {};
+
   const pivotedData: Array<PivotedRow> = useMemo(() => {
     return pivotBuckets(props.buckets);
   }, [props.buckets]);
@@ -135,9 +144,22 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
     });
   }, [props.buckets, props.series]);
 
-  if (props.isLoading && pivotedData.length === 0) {
+  /*
+   * The loader and the empty box below stand where the bars were, and take
+   * the double-click as the bars do: right after a zoom, while its window
+   * loads or when it holds nothing, is exactly when a reader double-clicks
+   * to go back (issue #4116), and the bars can replace them in the middle
+   * of that double-click (see placeholderProps). select-none: a
+   * double-click on the message would otherwise also select a word. A
+   * zoomed chart keeps its card while it loads (below), so the way back
+   * stays in the same place.
+   */
+  if (props.isLoading && pivotedData.length === 0 && !props.onZoomOut) {
     return (
-      <div className="flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white">
+      <div
+        className="flex h-32 select-none items-center justify-center rounded-lg border border-gray-200 bg-white"
+        {...selection.placeholderProps}
+      >
         <ComponentLoader />
       </div>
     );
@@ -146,9 +168,10 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
   /*
    * With header actions (e.g. a metric selector) the header must survive an
    * empty result, or switching away from a metric with no data would strand
-   * the user with no control to switch back.
+   * the user with no control to switch back. So must a zoomed chart's, or
+   * a zoom into a quiet stretch would leave nothing to double-click.
    */
-  if (pivotedData.length === 0 && !props.headerActions) {
+  if (pivotedData.length === 0 && !props.headerActions && !props.onZoomOut) {
     return <></>;
   }
 
@@ -165,7 +188,7 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
           <span className="text-xs font-medium text-gray-500">
             {props.title || "Volume"}
           </span>
-          {props.onTimeRangeSelect && (
+          {props.onTimeRangeSelect && pivotedData.length > 0 && (
             <span className="text-[10px] text-gray-300">
               {selection.canClickToZoom
                 ? "Click or drag to zoom"
@@ -174,14 +197,18 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
           )}
           {props.onZoomOut && (
             <span className="text-[10px] text-gray-300">
-              Double-click to zoom out
+              Double-click to reset
             </span>
           )}
         </div>
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 md:flex-nowrap">
           {activeSeries.map((option: HistogramSeriesOption) => {
             return (
-              <div key={option.key} className="flex items-center gap-1.5">
+              <div
+                key={option.key}
+                className="flex items-center gap-1.5"
+                title={option.description}
+              >
                 <span
                   className="inline-block h-2.5 w-2.5 rounded-sm"
                   style={{ backgroundColor: option.color }}
@@ -196,8 +223,17 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
         </div>
       </div>
       {pivotedData.length === 0 && (
-        <div className="flex h-[120px] items-center justify-center text-xs text-gray-400">
-          No data for this metric in the selected range
+        <div
+          className="flex h-[120px] select-none items-center justify-center text-xs text-gray-400"
+          {...selection.placeholderProps}
+        >
+          {props.isLoading ? (
+            <ComponentLoader />
+          ) : props.headerActions ? (
+            "No data for this metric in the selected range"
+          ) : (
+            "No data in the selected range"
+          )}
         </div>
       )}
 
@@ -215,10 +251,12 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
               data={pivotedData}
               margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
               onMouseDown={selection.onMouseDown}
+              {...selection.chartRootProps}
               onMouseMove={selection.onMouseMove}
               onMouseUp={selection.onMouseUp}
               barCategoryGap="15%"
               barGap={0}
+              {...chartRootCursorProps}
             >
               <XAxis
                 dataKey="time"

package/UI/Components/TelemetryViewer/components/TelemetryTimeRangePicker.tsx

@@ -1,10 +1,17 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
 import TimeRangePickerDropdown from "../../Date/TimeRangePickerDropdown";
+import ResetTimeRangeZoomButton from "../../Charts/TimeRangeZoom/ResetTimeRangeZoomButton";
 
 export interface TelemetryTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
+  /*
+   * False while the explorer this picker belongs to follows a zoom offered
+   * around it (see useViewerTimeRangeZoom): whoever offers that zoom shows
+   * its "Reset zoom", and a second one here would only repeat it.
+   */
+  showResetZoom?: boolean | undefined;
 }
 
 // Matches the Tailwind `w-72` on the rendered dropdown (18rem).
@@ -16,13 +23,25 @@ export const TELEMETRY_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
 const TelemetryTimeRangePicker: FunctionComponent<
   TelemetryTimeRangePickerProps
 > = (props: TelemetryTimeRangePickerProps): ReactElement => {
+  /*
+   * Inside a page that zooms (TimeRangeZoomScope), a drag on any chart
+   * retimes the page; the reset button beside the picker is the way back
+   * for anyone who does not know to double-click a chart. It shows only
+   * for a zoom of this picker's range, so a viewer nested in a zoomed page
+   * does not offer to reset the page.
+   */
   return (
-    <TimeRangePickerDropdown
-      value={props.value}
-      onChange={props.onChange}
-      dataTestIdPrefix={TELEMETRY_TIME_RANGE_PICKER_TEST_ID_PREFIX}
-      dropdownWidthInPx={TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
-    />
+    <div className="inline-flex items-center gap-1.5">
+      <TimeRangePickerDropdown
+        value={props.value}
+        onChange={props.onChange}
+        dataTestIdPrefix={TELEMETRY_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+        dropdownWidthInPx={TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+      />
+      {props.showResetZoom === false ? null : (
+        <ResetTimeRangeZoomButton forTimeRange={props.value} />
+      )}
+    </div>
   );
 };
 

package/UI/Components/TelemetryViewer/types.ts

@@ -47,6 +47,8 @@ export interface HistogramSeriesOption {
   label: string;
   // Hex fill color used for the bar segment and the legend swatch.
   color: string;
+  // Hover text for the legend entry, e.g. what a status name means.
+  description?: string | undefined;
 }
 
 export interface LiveOptions {

package/UI/Components/TelemetryViewer/useViewerTimeRangeZoom.ts

@@ -0,0 +1,448 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+import OneUptimeDate from "../../../Types/Date";
+import TimeRangeZoomUtil from "../Charts/TimeRangeZoom/TimeRangeZoomUtil";
+import { TimeRangeZoom } from "../Charts/TimeRangeZoom/UseTimeRangeZoom";
+import {
+  ChartTimeRangeZoomContextValue,
+  isTimeRangeZoomFor,
+  useChartTimeRangeZoom,
+} from "../Charts/TimeRangeZoom/TimeRangeZoomContext";
+
+export interface ViewerTimeRangeZoomOptions {
+  /** The window the explorer is showing right now (its host owns it). */
+  timeRange: RangeStartAndEndDateTime | undefined;
+  /** How the host applies a window a reader dragged out of a chart. */
+  onTimeRangeSelect: ((startTime: Date, endTime: Date) => void) | undefined;
+  /*
+   * How the host applies any other range: the toolbar picker, and the way
+   * back out of a zoom.
+   */
+  onTimeRangeChange:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined;
+}
+
+export interface ViewerTimeRangeZoom {
+  /*
+   * The zoom the explorer offers every chart inside it (hand it to a
+   * TimeRangeZoomProvider), or null when its host cannot apply a zoom. While
+   * the explorer follows the zoom around it, this hands that zoom on.
+   */
+  zoom: TimeRangeZoom | null;
+  /** Hand to the volume histogram in place of the host's select handler. */
+  onTimeRangeSelect: ((startTime: Date, endTime: Date) => void) | undefined;
+  /*
+   * Hand to the volume histogram: set only while a zoom can be undone, so
+   * the chart offers the double-click exactly when it does something.
+   */
+  onZoomOut: (() => void) | undefined;
+  /** Hand to the toolbar picker in place of the host's change handler. */
+  onTimeRangeChange:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined;
+  /*
+   * True while the explorer follows the zoom offered around it instead of
+   * keeping one of its own (see useViewerTimeRangeZoom). Whoever offers that
+   * zoom shows its "Reset zoom" (the telemetry snapshot, beside its badge),
+   * so the explorer's picker must not show a second one for the same zoom.
+   */
+  followsEnclosingZoom: boolean;
+}
+
+export type UseViewerTimeRangeZoomFunction = (
+  options: ViewerTimeRangeZoomOptions,
+) => ViewerTimeRangeZoom;
+
+interface ViewerZoomRecord {
+  /** The window the explorer was on before its first zoom. */
+  rangeBeforeZoom: RangeStartAndEndDateTime;
+  /** The window the latest zoom asked the host for. */
+  zoomedTo: RangeStartAndEndDateTime;
+  /** The window the explorer was on when that zoom was made. */
+  zoomedFrom: RangeStartAndEndDateTime;
+  /*
+   * True until the host's window first moves off `zoomedFrom`. Until then
+   * the host may simply not have applied the zoom yet, so being on
+   * `zoomedFrom` still counts as zoomed.
+   */
+  isAwaitingHost: boolean;
+}
+
+interface LatestInputs {
+  timeRange: RangeStartAndEndDateTime | undefined;
+  onTimeRangeSelect: ((startTime: Date, endTime: Date) => void) | undefined;
+  onTimeRangeChange:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined;
+  activeRecord: ViewerZoomRecord | null;
+  // The zoom around the explorer that it follows, or null.
+  followedZoom: ChartTimeRangeZoomContextValue | null;
+}
+
+export type ShouldFollowEnclosingZoomFunction = (
+  enclosingZoom: ChartTimeRangeZoomContextValue | null,
+  timeRange: RangeStartAndEndDateTime | undefined,
+) => boolean;
+
+/**
+ * Whether an explorer on `timeRange` follows the zoom offered around it
+ * (useChartTimeRangeZoom) rather than keeping a zoom of its own.
+ *
+ * Only a zoom over the explorer's very window is followed: the telemetry
+ * snapshot's, which pins its primary explorer to the window the snapshot
+ * shows, so a drag on that explorer's histogram is a drag on the snapshot.
+ * A zoom over any other range is about a window this explorer does not
+ * show (the snapshot's, once the reader has picked a range of the
+ * explorer's own in its picker), and a drag here must not retime it. Nor
+ * is a zoom that does not say which range it works over (the investigation
+ * drawer's, a hand-built one): nothing ties it to this explorer's window.
+ */
+export const shouldFollowEnclosingZoom: ShouldFollowEnclosingZoomFunction = (
+  enclosingZoom: ChartTimeRangeZoomContextValue | null,
+  timeRange: RangeStartAndEndDateTime | undefined,
+): boolean => {
+  if (!enclosingZoom || !enclosingZoom.timeRange || !timeRange) {
+    return false;
+  }
+
+  return isTimeRangeZoomFor(enclosingZoom, timeRange);
+};
+
+type ToEpochMsFunction = (value: unknown) => number;
+
+// NaN for anything that is not a date: a window restored from a URL can hold strings.
+const toEpochMs: ToEpochMsFunction = (value: unknown): number => {
+  if (value === undefined || value === null || value === "") {
+    return Number.NaN;
+  }
+
+  try {
+    return OneUptimeDate.fromString(value as Date).getTime();
+  } catch {
+    return Number.NaN;
+  }
+};
+
+type GetTimeRangeKeyFunction = (
+  timeRange: RangeStartAndEndDateTime | undefined,
+) => string;
+
+/*
+ * The value a range is compared by, as a string an effect can depend on: a
+ * host re-rendering with a new but equal object must not look like a move.
+ * A relative range is the same range whatever it last resolved to.
+ */
+const getTimeRangeKey: GetTimeRangeKeyFunction = (
+  timeRange: RangeStartAndEndDateTime | undefined,
+): string => {
+  if (!timeRange) {
+    return "";
+  }
+
+  if (timeRange.range !== TimeRange.CUSTOM) {
+    return timeRange.range;
+  }
+
+  return [
+    timeRange.range,
+    toEpochMs(timeRange.startAndEndDate?.startValue),
+    toEpochMs(timeRange.startAndEndDate?.endValue),
+  ].join("|");
+};
+
+type IsRecordActiveFunction = (
+  record: ViewerZoomRecord | null,
+  timeRange: RangeStartAndEndDateTime | undefined,
+) => boolean;
+
+const isRecordActive: IsRecordActiveFunction = (
+  record: ViewerZoomRecord | null,
+  timeRange: RangeStartAndEndDateTime | undefined,
+): boolean => {
+  if (!record || !timeRange) {
+    return false;
+  }
+
+  if (TimeRangeZoomUtil.isSameRange(timeRange, record.zoomedTo)) {
+    return true;
+  }
+
+  return (
+    record.isAwaitingHost &&
+    TimeRangeZoomUtil.isSameRange(timeRange, record.zoomedFrom)
+  );
+};
+
+/**
+ * Drag-to-zoom for an explorer (the logs viewer, and the traces, exceptions
+ * and security events viewers on the telemetry shell): the histogram, the
+ * analytics charts and the toolbar's "Reset zoom" all share one zoom over
+ * the window the explorer's host owns.
+ *
+ * - A zoom goes to the host's own select handler, which sets a custom window
+ *   (and does whatever else the host does on a zoom: turns live mode off,
+ *   goes back to page one, lifts the window to a page that shares it).
+ * - Only the FIRST zoom is remembered: after drilling from "past hour" into
+ *   ten minutes and then into one, a reset returns the whole hour.
+ * - The way back goes to the host's change handler, like a picked range.
+ * - The zoom is over as soon as the explorer's window is anything other
+ *   than the one the zoom asked for: the toolbar picker, a saved view, the
+ *   URL or a page steering the explorer are all the reader starting from
+ *   somewhere new, and a reset must not jump them back past that. (The
+ *   older useHistogramZoom kept the pre-zoom window until the picker was
+ *   used, so after a saved view "zoom out" jumped to a window from before
+ *   it.) A host that has not applied the zoom yet still counts as zoomed.
+ * - The callbacks keep their identity for the life of the explorer, and
+ *   read the latest window through a ref.
+ * - An explorer whose window is the very one a zoom offered around it is
+ *   over (see shouldFollowEnclosingZoom) follows that zoom and keeps none
+ *   of its own: a drag on any of its charts goes to that zoom, and so do a
+ *   double-click and the way back. The telemetry snapshot of an incident
+ *   pins its Logs, Traces or Exceptions explorer to the window its zoom
+ *   shows, so a drag on the explorer's histogram retimes the whole
+ *   snapshot, every tab of it, and one reset undoes it all. With a zoom of
+ *   its own as well there would be two zooms and two ways back, each
+ *   undoing only part of what the reader sees.
+ */
+const useViewerTimeRangeZoom: UseViewerTimeRangeZoomFunction = (
+  options: ViewerTimeRangeZoomOptions,
+): ViewerTimeRangeZoom => {
+  /*
+   * Read here, outside the provider the explorer puts around what it
+   * renders, so this is always the zoom around the explorer, never its own.
+   */
+  const enclosingZoom: ChartTimeRangeZoomContextValue | null =
+    useChartTimeRangeZoom();
+  const followedZoom: ChartTimeRangeZoomContextValue | null =
+    shouldFollowEnclosingZoom(enclosingZoom, options.timeRange)
+      ? enclosingZoom
+      : null;
+  const followsEnclosingZoom: boolean = followedZoom !== null;
+
+  const [record, setRecord] = useState<ViewerZoomRecord | null>(null);
+
+  const activeRecord: ViewerZoomRecord | null =
+    !followedZoom && isRecordActive(record, options.timeRange) ? record : null;
+
+  /*
+   * Written on every render and again straight after a gesture, so a second
+   * gesture that lands before the explorer re-renders sees the first one.
+   */
+  const latest: React.MutableRefObject<LatestInputs> = useRef<LatestInputs>({
+    timeRange: options.timeRange,
+    onTimeRangeSelect: options.onTimeRangeSelect,
+    onTimeRangeChange: options.onTimeRangeChange,
+    activeRecord: activeRecord,
+    followedZoom: followedZoom,
+  });
+
+  latest.current = {
+    timeRange: options.timeRange,
+    onTimeRangeSelect: options.onTimeRangeSelect,
+    onTimeRangeChange: options.onTimeRangeChange,
+    activeRecord: activeRecord,
+    followedZoom: followedZoom,
+  };
+
+  /*
+   * Once the host has applied the zoom, being back on the window the zoom
+   * was made from no longer counts; and once the window has moved anywhere
+   * else, the record is dropped so a later zoom starts a fresh baseline.
+   */
+  const timeRangeKey: string = getTimeRangeKey(options.timeRange);
+
+  useEffect(() => {
+    setRecord((current: ViewerZoomRecord | null): ViewerZoomRecord | null => {
+      if (!current) {
+        return current;
+      }
+
+      /*
+       * An explorer that follows the zoom around it has no zoom of its own:
+       * one it made before was left behind when its host moved it onto that
+       * zoom's window, and must not come back once it stops following.
+       */
+      if (latest.current.followedZoom) {
+        return null;
+      }
+
+      const timeRange: RangeStartAndEndDateTime | undefined =
+        latest.current.timeRange;
+
+      if (
+        timeRange &&
+        TimeRangeZoomUtil.isSameRange(timeRange, current.zoomedTo)
+      ) {
+        return current.isAwaitingHost
+          ? { ...current, isAwaitingHost: false }
+          : current;
+      }
+
+      if (isRecordActive(current, timeRange)) {
+        return current;
+      }
+
+      return null;
+    });
+  }, [timeRangeKey, followsEnclosingZoom]);
+
+  const zoomToTimeRange: (startTime: Date, endTime: Date) => void = useCallback(
+    (startTime: Date, endTime: Date): void => {
+      const current: LatestInputs = latest.current;
+
+      /*
+       * The followed zoom keeps the record and applies the window (the
+       * explorer's host follows it there), so the drag is handed over as it
+       * came: that zoom cuts it at the end of its own range.
+       */
+      if (current.followedZoom) {
+        current.followedZoom.onTimeRangeSelect(startTime, endTime);
+        return;
+      }
+
+      if (!current.onTimeRangeSelect) {
+        return;
+      }
+
+      const zoomedTo: RangeStartAndEndDateTime | null =
+        TimeRangeZoomUtil.getZoomedRange({
+          startTime: startTime,
+          endTime: endTime,
+          currentRange: current.timeRange,
+        });
+
+      if (!zoomedTo || !zoomedTo.startAndEndDate) {
+        return;
+      }
+
+      /*
+       * Without a window to go back to, or a way to apply one, there is no
+       * zoom to undo; the drag still narrows the explorer.
+       */
+      if (current.timeRange && current.onTimeRangeChange) {
+        const nextRecord: ViewerZoomRecord = {
+          rangeBeforeZoom: current.activeRecord
+            ? current.activeRecord.rangeBeforeZoom
+            : current.timeRange,
+          zoomedTo: zoomedTo,
+          zoomedFrom: current.timeRange,
+          isAwaitingHost: true,
+        };
+
+        latest.current = { ...current, activeRecord: nextRecord };
+        setRecord(nextRecord);
+      }
+
+      current.onTimeRangeSelect(
+        zoomedTo.startAndEndDate.startValue,
+        zoomedTo.startAndEndDate.endValue,
+      );
+    },
+    [],
+  );
+
+  const resetZoom: () => void = useCallback((): void => {
+    const current: LatestInputs = latest.current;
+
+    /*
+     * The way back is the followed zoom's own: it returns everything that
+     * zoom retimed, not just this explorer. It is offered only while that
+     * zoom is zoomed, so a stray double-click does nothing here either.
+     */
+    if (current.followedZoom) {
+      current.followedZoom.onTimeRangeReset?.();
+      return;
+    }
+
+    // Nothing to undo: a stray double-click must not retime the explorer.
+    if (!current.activeRecord || !current.onTimeRangeChange) {
+      return;
+    }
+
+    const rangeBeforeZoom: RangeStartAndEndDateTime =
+      current.activeRecord.rangeBeforeZoom;
+
+    latest.current = { ...current, activeRecord: null };
+    setRecord(null);
+    current.onTimeRangeChange(rangeBeforeZoom);
+  }, []);
+
+  const pickTimeRange: (timeRange: RangeStartAndEndDateTime) => void =
+    useCallback((timeRange: RangeStartAndEndDateTime): void => {
+      const current: LatestInputs = latest.current;
+
+      /*
+       * A pick is a new starting point even when it names the window the
+       * zoom was made from ("past hour" again), which the value check alone
+       * could not tell from a host that has not applied the zoom yet.
+       */
+      latest.current = { ...current, activeRecord: null };
+      setRecord(null);
+      current.onTimeRangeChange?.(timeRange);
+    }, []);
+
+  const canZoom: boolean = Boolean(options.onTimeRangeSelect);
+
+  let isZoomed: boolean =
+    activeRecord !== null && Boolean(options.onTimeRangeChange);
+  let rangeBeforeZoom: RangeStartAndEndDateTime | null =
+    isZoomed && activeRecord ? activeRecord.rangeBeforeZoom : null;
+
+  if (followedZoom) {
+    isZoomed = followedZoom.isZoomed && Boolean(followedZoom.onTimeRangeReset);
+    rangeBeforeZoom = isZoomed ? followedZoom.rangeBeforeZoom : null;
+  }
+
+  /*
+   * Handed on with the zoom it belongs to, so the explorer's charts see a
+   * zoom over that zoom's range, as if nothing stood in between.
+   */
+  const followedTimeRange: RangeStartAndEndDateTime | null = followedZoom
+    ? followedZoom.timeRange
+    : null;
+
+  const zoom: TimeRangeZoom | null = useMemo((): TimeRangeZoom | null => {
+    if (!canZoom) {
+      return null;
+    }
+
+    return {
+      isZoomed: isZoomed,
+      ...(followedTimeRange ? { timeRange: followedTimeRange } : {}),
+      rangeBeforeZoom: rangeBeforeZoom,
+      zoomToTimeRange: zoomToTimeRange,
+      resetZoom: resetZoom,
+    };
+  }, [
+    canZoom,
+    isZoomed,
+    followedTimeRange,
+    rangeBeforeZoom,
+    zoomToTimeRange,
+    resetZoom,
+  ]);
+
+  return {
+    zoom: zoom,
+    /*
+     * A followed zoom is applied by whoever offers it, so the histogram
+     * takes part in it even where the explorer's host could not apply a
+     * zoom itself.
+     */
+    onTimeRangeSelect:
+      canZoom || followsEnclosingZoom ? zoomToTimeRange : undefined,
+    onZoomOut: isZoomed ? resetZoom : undefined,
+    onTimeRangeChange: options.onTimeRangeChange ? pickTimeRange : undefined,
+    followsEnclosingZoom: followsEnclosingZoom,
+  };
+};
+
+export default useViewerTimeRangeZoom;

package/UI/Components/Toggle/Toggle.tsx

@@ -22,6 +22,13 @@ export interface ComponentProps {
   dataTestId?: string | undefined;
   tooltip?: string | undefined;
   ariaLabelledby?: string | undefined;
+  /*
+   * Presses are ignored and the switch says so (aria-disabled) - while the
+   * value it shows is being saved, say. Deliberately not the native
+   * `disabled` attribute: that would throw keyboard focus off a switch the
+   * user just pressed, and it is still the element they are on.
+   */
+  disabled?: boolean | undefined;
 }
 
 const Toggle: FunctionComponent<ComponentProps> = (
@@ -59,6 +66,13 @@ const Toggle: FunctionComponent<ComponentProps> = (
       "bg-indigo-600 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2";
   }
 
+  if (props.disabled) {
+    buttonClassName = buttonClassName.replace(
+      "cursor-pointer",
+      "cursor-not-allowed",
+    );
+  }
+
   let toggleClassName: string =
     "translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out";
 
@@ -72,6 +86,17 @@ const Toggle: FunctionComponent<ComponentProps> = (
       <div className="flex items-center">
         <button
           onClick={() => {
+            /*
+             * Before handleChange, which flips the switch's own copy of its
+             * value: flipped and then refused by the caller, that copy would
+             * no longer match `value`, and nothing re-syncs it until `value`
+             * itself changes - a disabled switch pressed from the keyboard
+             * would go on showing the state it was refused.
+             */
+            if (props.disabled) {
+              return;
+            }
+
             if (props.onFocus) {
               props.onFocus();
             }
@@ -105,6 +130,7 @@ const Toggle: FunctionComponent<ComponentProps> = (
           className={buttonClassName}
           role="switch"
           aria-checked={isChecked ? "true" : "false"}
+          aria-disabled={props.disabled ? "true" : undefined}
           aria-labelledby={props.ariaLabelledby || labelId}
           aria-describedby={props.error ? errorId : undefined}
           aria-invalid={props.error ? "true" : undefined}