@oneuptime/common 12.0.26 → 12.0.27

package/Tests/UI/Components/TelemetryHistogramDragTooltip.test.tsx

@@ -0,0 +1,205 @@
+/** @timezone UTC */
+
+import {
+  HistogramBucket,
+  HistogramSeriesOption,
+} from "../../../UI/Components/TelemetryViewer/types";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The traces / exceptions volume chart is the same chart as the log volume
+ * one, drawn from a different signal — so it carries the same drag-to-zoom
+ * behaviour and needs the same cover. See LogsHistogramDragTooltip.test.tsx
+ * for why recharts is stood in for here.
+ */
+jest.mock("recharts", () => {
+  const react: typeof React = jest.requireActual("react") as typeof React;
+
+  interface StubRow {
+    time: string;
+  }
+
+  interface StubChartProps {
+    data: Array<StubRow>;
+    children?: React.ReactNode;
+    onMouseDown?: (state: { activeLabel: string }) => void;
+    onMouseMove?: (state: { activeLabel: string }) => void;
+    onMouseUp?: (state: { activeLabel: string }) => void;
+  }
+
+  return {
+    __esModule: true,
+    ResponsiveContainer: (props: { children: React.ReactNode }) => {
+      return react.createElement("div", null, props.children);
+    },
+    BarChart: (props: StubChartProps) => {
+      return react.createElement(
+        "div",
+        { "data-testid": "bar-chart" },
+        props.data.map((row: StubRow) => {
+          return react.createElement("div", {
+            key: row.time,
+            "data-testid": `bucket-${row.time}`,
+            onMouseDown: () => {
+              props.onMouseDown?.({ activeLabel: row.time });
+            },
+            onMouseMove: () => {
+              props.onMouseMove?.({ activeLabel: row.time });
+            },
+            onMouseUp: () => {
+              props.onMouseUp?.({ activeLabel: row.time });
+            },
+          });
+        }),
+        props.children,
+      );
+    },
+    Bar: () => {
+      return null;
+    },
+    XAxis: () => {
+      return null;
+    },
+    YAxis: () => {
+      return null;
+    },
+    Tooltip: (props: { active?: boolean }) => {
+      return react.createElement("div", {
+        "data-testid": "tooltip",
+        "data-active": String(props.active),
+      });
+    },
+    ReferenceArea: (props: { x1?: string; x2?: string }) => {
+      return react.createElement("div", {
+        "data-testid": "selection-band",
+        "data-x1": props.x1,
+        "data-x2": props.x2,
+      });
+    },
+  };
+});
+
+// Imported after the mock so the chart picks the stand-in up.
+import TelemetryHistogram from "../../../UI/Components/TelemetryViewer/components/TelemetryHistogram";
+
+const FIRST_BUCKET: string = "2026-08-05T11:58:00Z";
+const LAST_BUCKET: string = "2026-08-05T12:00:00Z";
+
+const SERIES: Array<HistogramSeriesOption> = [
+  { key: "ok", label: "OK", color: "#34d399" },
+  { key: "error", label: "Error", color: "#f87171" },
+];
+
+const BUCKETS: Array<HistogramBucket> = [
+  { time: FIRST_BUCKET, series: "ok", count: 12 },
+  { time: "2026-08-05T11:59:00Z", series: "error", count: 4 },
+  { time: LAST_BUCKET, series: "ok", count: 9 },
+];
+
+const ZOOM_OUT_HINT: string = "Double-click to zoom out";
+
+function bucketAt(time: string): HTMLElement {
+  return screen.getByTestId(`bucket-${time}`);
+}
+
+function tooltipActiveProp(): string | null {
+  return screen.getByTestId("tooltip").getAttribute("data-active");
+}
+
+interface RenderedHistogram {
+  onTimeRangeSelect: MockFunction;
+  onZoomOut: MockFunction;
+}
+
+function renderHistogram(
+  options: { canZoomOut?: boolean } = {},
+): RenderedHistogram {
+  const onTimeRangeSelect: MockFunction = getJestMockFunction();
+  const onZoomOut: MockFunction = getJestMockFunction();
+
+  render(
+    <TelemetryHistogram
+      buckets={BUCKETS}
+      series={SERIES}
+      isLoading={false}
+      onTimeRangeSelect={onTimeRangeSelect}
+      {...(options.canZoomOut ? { onZoomOut: onZoomOut } : {})}
+    />,
+  );
+
+  return { onTimeRangeSelect: onTimeRangeSelect, onZoomOut: onZoomOut };
+}
+
+describe("TelemetryHistogram — dragging out a time range", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("holds the tooltip shut for the length of the drag", () => {
+    renderHistogram();
+
+    expect(tooltipActiveProp()).toBe("undefined");
+
+    fireEvent.mouseDown(bucketAt(FIRST_BUCKET));
+    fireEvent.mouseMove(bucketAt(LAST_BUCKET));
+
+    expect(tooltipActiveProp()).toBe("false");
+  });
+
+  test("gives the tooltip back when the reader lets go", () => {
+    renderHistogram();
+
+    fireEvent.mouseDown(bucketAt(FIRST_BUCKET));
+    fireEvent.mouseMove(bucketAt(LAST_BUCKET));
+    fireEvent.mouseUp(bucketAt(LAST_BUCKET));
+
+    expect(tooltipActiveProp()).toBe("undefined");
+  });
+
+  test("gives the tooltip back when the pointer is released off the chart", () => {
+    renderHistogram();
+
+    fireEvent.mouseDown(bucketAt(FIRST_BUCKET));
+    fireEvent.mouseMove(bucketAt(LAST_BUCKET));
+    fireEvent.mouseUp(document.body);
+
+    expect(tooltipActiveProp()).toBe("undefined");
+    expect(screen.queryByTestId("selection-band")).toBeNull();
+  });
+
+  test("reports the dragged window once", () => {
+    const { onTimeRangeSelect } = renderHistogram();
+
+    fireEvent.mouseDown(bucketAt(FIRST_BUCKET));
+    fireEvent.mouseMove(bucketAt(LAST_BUCKET));
+    fireEvent.mouseUp(bucketAt(LAST_BUCKET));
+
+    expect(onTimeRangeSelect).toHaveBeenCalledTimes(1);
+    const [start, end] = onTimeRangeSelect.mock.calls[0] as [Date, Date];
+    expect(start.toISOString()).toBe(new Date(FIRST_BUCKET).toISOString());
+    expect(end.toISOString()).toBe(new Date(LAST_BUCKET).toISOString());
+  });
+
+  test("zooms back out on a double-click", () => {
+    const { onZoomOut } = renderHistogram({ canZoomOut: true });
+
+    expect(screen.queryByText(ZOOM_OUT_HINT)).not.toBeNull();
+
+    fireEvent.doubleClick(screen.getByTestId("bar-chart"));
+
+    expect(onZoomOut).toHaveBeenCalledTimes(1);
+  });
+
+  test("offers no way out while the chart is on its original window", () => {
+    renderHistogram();
+
+    expect(screen.queryByText(ZOOM_OUT_HINT)).toBeNull();
+
+    fireEvent.doubleClick(screen.getByTestId("bar-chart"));
+
+    expect(screen.queryByText(ZOOM_OUT_HINT)).toBeNull();
+  });
+});

package/Tests/UI/Components/UseHistogramZoom.test.tsx

@@ -0,0 +1,262 @@
+/** @timezone UTC */
+
+import useHistogramZoom, {
+  HistogramZoomOptions,
+  HistogramZoomState,
+} from "../../../UI/Components/Charts/Utils/useHistogramZoom";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+const PAST_HOUR: RangeStartAndEndDateTime = { range: TimeRange.PAST_ONE_HOUR };
+const PAST_DAY: RangeStartAndEndDateTime = { range: TimeRange.PAST_ONE_DAY };
+
+function customRange(start: string, end: string): RangeStartAndEndDateTime {
+  return {
+    range: TimeRange.CUSTOM,
+    startAndEndDate: new InBetween<Date>(new Date(start), new Date(end)),
+  };
+}
+
+const DRAGGED_START: Date = new Date("2026-08-05T11:58:00Z");
+const DRAGGED_END: Date = new Date("2026-08-05T12:00:00Z");
+
+interface ZoomHarness {
+  result: { current: HistogramZoomState };
+  rerender: (options: HistogramZoomOptions) => void;
+  onTimeRangeSelect: MockFunction;
+  onTimeRangeChange: MockFunction;
+  /** Drags a range out of the histogram, the way the chart would. */
+  dragZoom: () => void;
+  /** Double-clicks the chart, the way the chart would. */
+  zoomOut: () => void;
+  /** Picks a range from the toolbar, the way the picker would. */
+  pickTimeRange: (timeRange: RangeStartAndEndDateTime) => void;
+}
+
+function renderZoom(
+  timeRange: RangeStartAndEndDateTime | undefined = PAST_HOUR,
+): ZoomHarness {
+  const onTimeRangeSelect: MockFunction = getJestMockFunction();
+  const onTimeRangeChange: MockFunction = getJestMockFunction();
+
+  const { result, rerender } = renderHook(
+    (options: HistogramZoomOptions) => {
+      return useHistogramZoom(options);
+    },
+    {
+      initialProps: {
+        timeRange: timeRange,
+        onTimeRangeSelect: onTimeRangeSelect,
+        onTimeRangeChange: onTimeRangeChange,
+      } as HistogramZoomOptions,
+    },
+  );
+
+  return {
+    result: result,
+    rerender: rerender,
+    onTimeRangeSelect: onTimeRangeSelect,
+    onTimeRangeChange: onTimeRangeChange,
+    dragZoom: (): void => {
+      act(() => {
+        result.current.onTimeRangeSelect?.(DRAGGED_START, DRAGGED_END);
+      });
+    },
+    zoomOut: (): void => {
+      act(() => {
+        result.current.onZoomOut?.();
+      });
+    },
+    pickTimeRange: (next: RangeStartAndEndDateTime): void => {
+      act(() => {
+        result.current.onTimeRangeChange?.(next);
+      });
+    },
+  };
+}
+
+describe("useHistogramZoom", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("before anything has been zoomed", () => {
+    test("offers no way out, because there is nowhere to go back to", () => {
+      const { result } = renderZoom();
+
+      expect(result.current.onZoomOut).toBeUndefined();
+    });
+
+    test("still passes a dragged range straight through to the host", () => {
+      const { dragZoom, onTimeRangeSelect } = renderZoom();
+
+      dragZoom();
+
+      expect(onTimeRangeSelect).toHaveBeenCalledWith(
+        DRAGGED_START,
+        DRAGGED_END,
+      );
+    });
+  });
+
+  describe("after a drag-zoom", () => {
+    test("offers a way back out", () => {
+      const { dragZoom, result } = renderZoom();
+
+      dragZoom();
+
+      expect(result.current.onZoomOut).toBeDefined();
+    });
+
+    test("restores the window the reader started on", () => {
+      const { dragZoom, zoomOut, onTimeRangeChange } = renderZoom(PAST_DAY);
+
+      dragZoom();
+      zoomOut();
+
+      expect(onTimeRangeChange).toHaveBeenCalledTimes(1);
+      expect(onTimeRangeChange).toHaveBeenCalledWith(PAST_DAY);
+    });
+
+    test("restores a custom window just as faithfully", () => {
+      const original: RangeStartAndEndDateTime = customRange(
+        "2026-08-05T00:00:00Z",
+        "2026-08-05T23:59:00Z",
+      );
+      const { dragZoom, zoomOut, onTimeRangeChange } = renderZoom(original);
+
+      dragZoom();
+      zoomOut();
+
+      expect(onTimeRangeChange).toHaveBeenCalledWith(original);
+    });
+
+    test("takes the way out away again once it has been used", () => {
+      const { dragZoom, zoomOut, result } = renderZoom();
+
+      dragZoom();
+      zoomOut();
+
+      expect(result.current.onZoomOut).toBeUndefined();
+    });
+  });
+
+  /*
+   * Drilling down twice is normal: an hour to a minute, a minute to ten
+   * seconds. One double-click has to return the whole hour, not the minute
+   * on the way — "zoom out to the original", as the report puts it.
+   */
+  describe("after drilling down more than once", () => {
+    test("still returns the window the reader started from", () => {
+      const harness: ZoomHarness = renderZoom(PAST_DAY);
+
+      harness.dragZoom();
+      // The host applies the dragged window, so the hook sees it next render.
+      harness.rerender({
+        timeRange: customRange("2026-08-05T11:58:00Z", "2026-08-05T12:00:00Z"),
+        onTimeRangeSelect: harness.onTimeRangeSelect,
+        onTimeRangeChange: harness.onTimeRangeChange,
+      });
+      harness.dragZoom();
+
+      harness.zoomOut();
+
+      expect(harness.onTimeRangeChange).toHaveBeenCalledTimes(1);
+      expect(harness.onTimeRangeChange).toHaveBeenCalledWith(PAST_DAY);
+    });
+  });
+
+  /*
+   * Picking a range anywhere else is the reader choosing a new starting
+   * point. Holding on to the old one would send a later double-click to a
+   * window they had already moved on from.
+   */
+  describe("when the range is changed by other means", () => {
+    test("forgets the remembered window", () => {
+      const { dragZoom, pickTimeRange, result } = renderZoom(PAST_DAY);
+
+      dragZoom();
+      pickTimeRange(PAST_HOUR);
+
+      expect(result.current.onZoomOut).toBeUndefined();
+    });
+
+    test("passes the picked range on to the host untouched", () => {
+      const { pickTimeRange, onTimeRangeChange } = renderZoom();
+
+      pickTimeRange(PAST_DAY);
+
+      expect(onTimeRangeChange).toHaveBeenCalledWith(PAST_DAY);
+    });
+
+    test("remembers the new starting point on the next drag", () => {
+      const harness: ZoomHarness = renderZoom(PAST_DAY);
+
+      harness.dragZoom();
+      harness.pickTimeRange(PAST_HOUR);
+      harness.rerender({
+        timeRange: PAST_HOUR,
+        onTimeRangeSelect: harness.onTimeRangeSelect,
+        onTimeRangeChange: harness.onTimeRangeChange,
+      });
+      harness.dragZoom();
+      harness.zoomOut();
+
+      expect(harness.onTimeRangeChange).toHaveBeenLastCalledWith(PAST_HOUR);
+    });
+  });
+
+  describe("hosts that wire up only part of this", () => {
+    test("a host with no time range gets no zoom-out to offer", () => {
+      const onTimeRangeSelect: MockFunction = getJestMockFunction();
+      const onTimeRangeChange: MockFunction = getJestMockFunction();
+
+      const { result } = renderHook(() => {
+        return useHistogramZoom({
+          onTimeRangeSelect: onTimeRangeSelect,
+          onTimeRangeChange: onTimeRangeChange,
+        });
+      });
+
+      act(() => {
+        result.current.onTimeRangeSelect?.(DRAGGED_START, DRAGGED_END);
+      });
+
+      // The drag still applies; there is simply no window to hand back.
+      expect(onTimeRangeSelect).toHaveBeenCalled();
+      expect(result.current.onZoomOut).toBeUndefined();
+    });
+
+    test("a host with no select handler leaves the chart unzoomable", () => {
+      const { result } = renderHook(() => {
+        return useHistogramZoom({ timeRange: PAST_HOUR });
+      });
+
+      expect(result.current.onTimeRangeSelect).toBeUndefined();
+      expect(result.current.onZoomOut).toBeUndefined();
+      expect(result.current.onTimeRangeChange).toBeUndefined();
+    });
+
+    test("a host that cannot apply a range change offers no zoom-out", () => {
+      const onTimeRangeSelect: MockFunction = getJestMockFunction();
+
+      const { result } = renderHook(() => {
+        return useHistogramZoom({
+          timeRange: PAST_HOUR,
+          onTimeRangeSelect: onTimeRangeSelect,
+        });
+      });
+
+      act(() => {
+        result.current.onTimeRangeSelect?.(DRAGGED_START, DRAGGED_END);
+      });
+
+      expect(onTimeRangeSelect).toHaveBeenCalled();
+      expect(result.current.onZoomOut).toBeUndefined();
+    });
+  });
+});

package/Types/API/URL.ts

@@ -276,22 +276,33 @@ export default class URL extends DatabaseProperty {
     }
 
     let urlString: string = `${this.protocol}${this.hostname || this.email}`;
-    if (!this.email && !urlString.startsWith("mailto:")) {
-      if (this.route && this.route.toString().startsWith("/")) {
-        if (urlString.endsWith("/")) {
-          urlString = urlString.substring(0, urlString.length - 1);
-        }
-        urlString += this.route.toString();
-      } else {
-        if (urlString.endsWith("/")) {
-          urlString = urlString.substring(0, urlString.length - 1);
-        }
-        urlString += "/" + this.route.toString();
-      }
 
-      urlString += this.queryStringSuffix();
+    /*
+     * mailto: has no authority to trim and no route to append, so it skips the
+     * branch below — but it CAN carry a query, and "?subject=...&body=..." is
+     * the whole point of a prefilled mail link. The suffix used to be appended
+     * inside that branch, so skipping the route silently dropped the subject
+     * and body too, and the link opened on an empty draft. It returns here
+     * with the suffix attached instead, the way the opaque branch above does.
+     */
+    if (this.email || urlString.startsWith("mailto:")) {
+      return urlString + this.queryStringSuffix();
     }
 
+    if (this.route && this.route.toString().startsWith("/")) {
+      if (urlString.endsWith("/")) {
+        urlString = urlString.substring(0, urlString.length - 1);
+      }
+      urlString += this.route.toString();
+    } else {
+      if (urlString.endsWith("/")) {
+        urlString = urlString.substring(0, urlString.length - 1);
+      }
+      urlString += "/" + this.route.toString();
+    }
+
+    urlString += this.queryStringSuffix();
+
     return urlString;
   }
 
@@ -406,6 +417,20 @@ export default class URL extends DatabaseProperty {
       return new URL(protocol, number, undefined, opaqueQueryString);
     }
 
+    /*
+     * The query and the fragment come off BEFORE the authority and the route
+     * are read off the string.
+     *
+     * Splitting on "/" first meant a "/" inside a QUERY VALUE was read as a
+     * path segment whenever the URL had no path of its own:
+     * "https://example.com?next=/a/b" parsed to a route of "a/b" and went back
+     * out as "https://example.com/a/b?next=/a/b" — a path nobody wrote, on a
+     * request the workflow API components dispatch verbatim. The authority was
+     * already cut at "?"/"#" and is unchanged by this, so the host stays the
+     * one the SSRF check upstream resolved; what moved was the path.
+     */
+    const beforeQuery: string = url.split("?")[0] || "";
+
     /*
      * The authority ends at the first "/", "?" or "#". Splitting on "/" alone
      * left the query and fragment glued to the host for URLs with no path
@@ -413,16 +438,28 @@ export default class URL extends DatabaseProperty {
      * round-tripped wrong and handed anything that later interpolated the
      * host a way to smuggle a path.
      */
-    const authority: string = (url.split("/")[0] || "").split(/[?#]/)[0] || "";
+    const authorityAndPath: string = beforeQuery.split("#")[0] || "";
+
+    /*
+     * A fragment is not a field on this type. It rides on the end of the route
+     * — which is where it has always ended up, because the route was cut at
+     * "?" and never at "#" — so "…/docs#section" keeps round-tripping instead
+     * of losing its "#section" to this change.
+     */
+    const fragment: string = beforeQuery.substring(authorityAndPath.length);
+
+    const authority: string = authorityAndPath.split("/")[0] || "";
 
     const hostname: Hostname = new Hostname(authority);
 
     let route: Route | undefined;
 
-    if (url.split("/").length > 1) {
-      const paths: Array<string> = url.split("/");
-      paths.shift();
-      route = new Route(paths.join("/").split("?")[0]);
+    const pathSegments: Array<string> = authorityAndPath.split("/");
+    pathSegments.shift(); // drop the authority; what is left is the path
+    const path: string = pathSegments.join("/");
+
+    if (path || fragment) {
+      route = new Route(path + fragment);
     }
 
     const queryString: string = URL.queryStringOf(url);

package/UI/Components/Charts/Utils/useHistogramZoom.ts

@@ -0,0 +1,101 @@
+import { useCallback, useState } from "react";
+import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
+
+export interface HistogramZoomOptions {
+  /** The window the explorer is showing right now. */
+  timeRange?: RangeStartAndEndDateTime | undefined;
+  /** Applies a range the reader dragged out on the histogram. */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /** Applies a range picked anywhere else (the toolbar picker, a reset). */
+  onTimeRangeChange?:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined;
+}
+
+export interface HistogramZoomState {
+  /** Hand to the histogram in place of the raw select handler. */
+  onTimeRangeSelect: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Hand to the histogram: set only while a drag-zoom is in effect, so the
+   * chart can both offer the affordance and act on a double-click.
+   */
+  onZoomOut: (() => void) | undefined;
+  /** Hand to the time range picker in place of the raw change handler. */
+  onTimeRangeChange:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined;
+}
+
+export type UseHistogramZoomFunction = (
+  options: HistogramZoomOptions,
+) => HistogramZoomState;
+
+/**
+ * Remembers the window a reader was on before they dragged a zoom out of the
+ * histogram, so a double-click can put them back on it.
+ *
+ * Only the *first* zoom is remembered: after drilling from "past one hour"
+ * into a minute and then into ten seconds, one double-click returns the whole
+ * hour rather than making the reader climb back out a level at a time. Any
+ * time range picked by other means — the toolbar picker, a saved view — is
+ * the reader choosing a new starting point, so it forgets what it held and
+ * the zoom-out affordance goes away until the next drag.
+ */
+const useHistogramZoom: UseHistogramZoomFunction = (
+  options: HistogramZoomOptions,
+): HistogramZoomState => {
+  const [rangeBeforeZoom, setRangeBeforeZoom] =
+    useState<RangeStartAndEndDateTime | null>(null);
+
+  const timeRange: RangeStartAndEndDateTime | undefined = options.timeRange;
+  const onTimeRangeSelect:
+    | ((startTime: Date, endTime: Date) => void)
+    | undefined = options.onTimeRangeSelect;
+  const onTimeRangeChange:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined = options.onTimeRangeChange;
+
+  const handleTimeRangeSelect: (startTime: Date, endTime: Date) => void =
+    useCallback(
+      (startTime: Date, endTime: Date): void => {
+        if (!onTimeRangeSelect) {
+          return;
+        }
+
+        if (timeRange) {
+          setRangeBeforeZoom((current: RangeStartAndEndDateTime | null) => {
+            return current || timeRange;
+          });
+        }
+
+        onTimeRangeSelect(startTime, endTime);
+      },
+      [onTimeRangeSelect, timeRange],
+    );
+
+  const handleZoomOut: () => void = useCallback((): void => {
+    if (!rangeBeforeZoom || !onTimeRangeChange) {
+      return;
+    }
+
+    setRangeBeforeZoom(null);
+    onTimeRangeChange(rangeBeforeZoom);
+  }, [rangeBeforeZoom, onTimeRangeChange]);
+
+  const handleTimeRangeChange: (timeRange: RangeStartAndEndDateTime) => void =
+    useCallback(
+      (nextTimeRange: RangeStartAndEndDateTime): void => {
+        setRangeBeforeZoom(null);
+        onTimeRangeChange?.(nextTimeRange);
+      },
+      [onTimeRangeChange],
+    );
+
+  return {
+    onTimeRangeSelect: onTimeRangeSelect ? handleTimeRangeSelect : undefined,
+    onZoomOut: rangeBeforeZoom && onTimeRangeChange ? handleZoomOut : undefined,
+    onTimeRangeChange: onTimeRangeChange ? handleTimeRangeChange : undefined,
+  };
+};
+
+export default useHistogramZoom;