@oneuptime/common 14.0.7 → 14.0.9

package/UI/Components/ActionButton/RowActions.tsx

@@ -0,0 +1,238 @@
+import ActionButtonSchema from "./ActionButtonSchema";
+import splitActionButtons, {
+  IndexedActionButton,
+  isDestructiveActionButton,
+  SplitActionButtonsResult,
+} from "./SplitActionButtons";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import Icon from "../Icon/Icon";
+import ConfirmModal from "../Modal/ConfirmModal";
+import MoreMenu from "../MoreMenu/MoreMenu";
+import MoreMenuDivider from "../MoreMenu/Divider";
+import MoreMenuItem from "../MoreMenu/MoreMenuItem";
+import GenericObject from "../../../Types/GenericObject";
+import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
+import React, { ReactElement, useRef, useState } from "react";
+
+/*
+ * The actions of one row - a table row, a list card, a state in an ordered
+ * list: one button, and a ⋯ menu holding everything else. SplitActionButtons
+ * decides which action is which; this only draws the result.
+ */
+
+export interface ComponentProps<T extends GenericObject> {
+  item: T;
+  actionButtons?: Array<ActionButtonSchema<T>> | undefined;
+  isMobile?: boolean | undefined;
+  /*
+   * Alignment of the button and the menu trigger. Rows right-align their
+   * actions (the default); a centred card can centre them.
+   */
+  className?: string | undefined;
+  /*
+   * What this row is, for the ⋯ trigger's accessible name - "More actions for
+   * Monitor: Checkout API" rather than twenty-five identical "More actions" in
+   * a screen reader's list of buttons.
+   */
+  itemLabel?: string | undefined;
+}
+
+/*
+ * OUTLINE and its hover variants are drawn by a `btn-outline-secondary` class
+ * that no stylesheet defines, so they render as bare text. That was tolerable
+ * in a strip of buttons; as the row's one button, sat beside a bordered ⋯, it
+ * reads as a stray label. The row's button always looks like a button.
+ */
+const getRowButtonStyle: (style: ButtonStyleType) => ButtonStyleType = (
+  style: ButtonStyleType,
+): ButtonStyleType => {
+  switch (style) {
+    case ButtonStyleType.OUTLINE:
+    case ButtonStyleType.HOVER_PRIMARY_OUTLINE:
+    case ButtonStyleType.HOVER_SUCCESS_OUTLINE:
+      return ButtonStyleType.NORMAL;
+    case ButtonStyleType.HOVER_DANGER_OUTLINE:
+      return ButtonStyleType.DANGER_OUTLINE;
+    default:
+      return style;
+  }
+};
+
+type RowActionsFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+) => ReactElement;
+
+const RowActions: RowActionsFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+): ReactElement => {
+  const { translateString } = useTranslateValue();
+
+  const [error, setError] = useState<string>("");
+
+  /*
+   * Which actions are mid-flight, by their index in props.actionButtons. Held
+   * in a ref, as the rows always have: it is read whenever the row renders but
+   * never forces a render of its own. Plenty of action handlers navigate away
+   * or open a modal without ever calling onCompleteAction, and a spinner that
+   * forced its own render would spin on those forever.
+   */
+  const loadingActionIndexes: React.MutableRefObject<Array<boolean>> = useRef<
+    Array<boolean>
+  >([]);
+
+  const { primary, moreMenu }: SplitActionButtonsResult<T> =
+    splitActionButtons<T>({
+      actionButtons: props.actionButtons,
+      item: props.item,
+      isMobile: props.isMobile,
+    });
+
+  if (!primary && moreMenu.length === 0 && !error) {
+    return <></>;
+  }
+
+  type RunActionFunction = (entry: IndexedActionButton<T>) => void;
+
+  const runAction: RunActionFunction = (
+    entry: IndexedActionButton<T>,
+  ): void => {
+    const { button, index } = entry;
+
+    if (button.disabled || !button.onClick) {
+      return;
+    }
+
+    loadingActionIndexes.current[index] = true;
+
+    button.onClick(
+      props.item,
+      () => {
+        loadingActionIndexes.current[index] = false;
+      },
+      (err: Error) => {
+        loadingActionIndexes.current[index] = false;
+        setError((err as Error).message);
+      },
+    );
+  };
+
+  const hasMenuIcons: boolean = moreMenu.some(
+    (entry: IndexedActionButton<T>) => {
+      return Boolean(entry.button.icon);
+    },
+  );
+
+  const menuItems: Array<ReactElement> = [];
+
+  moreMenu.forEach((entry: IndexedActionButton<T>, position: number) => {
+    const isDestructive: boolean = isDestructiveActionButton(entry.button);
+    const previous: IndexedActionButton<T> | undefined = moreMenu[position - 1];
+
+    // A gap between the everyday actions and the destructive ones below them.
+    if (
+      isDestructive &&
+      previous &&
+      !isDestructiveActionButton(previous.button)
+    ) {
+      menuItems.push(<MoreMenuDivider key={`divider-${entry.index}`} />);
+    }
+
+    const title: string =
+      translateString(entry.button.title) || entry.button.title;
+
+    menuItems.push(
+      <MoreMenuItem
+        key={`action-${entry.index}`}
+        text={title}
+        icon={entry.button.icon}
+        isIconSpaceReserved={hasMenuIcons}
+        isDestructive={isDestructive}
+        isDisabled={entry.button.disabled}
+        tooltip={translateString(entry.button.tooltip)}
+        onClick={() => {
+          runAction(entry);
+        }}
+      />,
+    );
+  });
+
+  return (
+    <div
+      /*
+       * Button carries an md:ml-3 of its own, meant for a row of loose
+       * buttons. Here the gap does the spacing, and the stray margin would
+       * push a centred group off centre.
+       */
+      className={`flex items-center gap-2 [&_button]:md:ml-0 ${
+        props.className || "justify-end"
+      }`}
+      data-testid="row-actions"
+    >
+      {error && (
+        <div className="text-align-left">
+          <ConfirmModal
+            title={`Error`}
+            description={error}
+            submitButtonText={"Close"}
+            onSubmit={() => {
+              return setError("");
+            }}
+          />
+        </div>
+      )}
+
+      {primary && (
+        /*
+         * Button is w-full below md. Its own content-sized box keeps it the
+         * size of its label on every surface - a Table card, a List card and a
+         * centred ordered-states item alike - instead of stretching whenever
+         * the row's container happens to be a block.
+         */
+        <div className="shrink-0">
+          <Button
+            buttonSize={ButtonSize.Small}
+            title={primary.button.title}
+            icon={primary.button.icon}
+            buttonStyle={getRowButtonStyle(primary.button.buttonStyleType)}
+            isLoading={loadingActionIndexes.current[primary.index]}
+            disabled={primary.button.disabled}
+            tooltip={primary.button.tooltip}
+            onClick={() => {
+              runAction(primary);
+            }}
+          />
+        </div>
+      )}
+
+      {menuItems.length > 0 && (
+        <MoreMenu
+          isMenuPortaled={true}
+          ariaLabel={
+            props.itemLabel
+              ? `${translateString("More actions for") || "More actions for"} ${props.itemLabel}`
+              : translateString("More actions") || "More actions"
+          }
+          elementToBeShownInsteadOfButton={
+            <button
+              type="button"
+              data-testid="row-actions-more-button"
+              /*
+               * Sized to the Small row button beside it: that button's label
+               * is text-base below md and text-sm above, so the trigger's
+               * vertical padding steps down at md to keep the two level.
+               */
+              className="inline-flex shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white px-1.5 py-1.5 md:py-1 text-gray-500 shadow-sm transition-colors duration-150 ease-out hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+            >
+              <Icon icon={IconProp.EllipsisHorizontal} className="h-5 w-5" />
+            </button>
+          }
+        >
+          {menuItems}
+        </MoreMenu>
+      )}
+    </div>
+  );
+};
+
+export default RowActions;

package/UI/Components/ActionButton/SplitActionButtons.ts

@@ -0,0 +1,173 @@
+import ActionButtonSchema, {
+  ActionButtonPlacement,
+} from "./ActionButtonSchema";
+import { ButtonStyleType } from "../Button/Button";
+import GenericObject from "../../../Types/GenericObject";
+
+/*
+ * A row carries one action as a button and folds everything else into a ⋯ menu
+ * beside it. Six outlined buttons on every row of a table is the loudest thing
+ * on the page and says nothing about which one matters; one button and a menu
+ * says exactly that.
+ *
+ * Which action gets the button, in order:
+ *
+ *  1. The first visible action marked ActionButtonPlacement.Primary. ModelTable
+ *     marks its "View" action this way, because opening the record is what a
+ *     row is for.
+ *  2. The first action styled as a call to action (NORMAL, PRIMARY, SUCCESS,
+ *     WARNING). The author already said which one is prominent.
+ *  3. The first action that is not destructive - usually Edit.
+ *  4. A lone destructive action. With nothing else on the row, hiding "Delete"
+ *     behind a menu of one would only add a click.
+ *
+ * Within 2 and 3, an action this viewer can use beats one that is locked for
+ * them. A read-only member should not find the row's one button disabled while
+ * the thing they are allowed to do is tucked away in the menu; the locked
+ * action still sits in the menu, explaining itself. A locked action is only the
+ * button when nothing on the row is usable.
+ *
+ * Destructive actions are never promoted over anything else, and actions marked
+ * ActionButtonPlacement.MoreMenu are never promoted at all. The menu keeps the
+ * authored order, except that destructive actions sink to the bottom - the
+ * place people look for them, and the place they are least likely to be hit by
+ * a slip of the pointer.
+ */
+
+export interface IndexedActionButton<T extends GenericObject> {
+  button: ActionButtonSchema<T>;
+  // Position in the array the caller passed in.
+  index: number;
+}
+
+export interface SplitActionButtonsResult<T extends GenericObject> {
+  primary: IndexedActionButton<T> | null;
+  moreMenu: Array<IndexedActionButton<T>>;
+}
+
+export interface SplitActionButtonsOptions<T extends GenericObject> {
+  actionButtons: Array<ActionButtonSchema<T>> | undefined;
+  item: T;
+  isMobile?: boolean | undefined;
+}
+
+const DESTRUCTIVE_STYLES: Array<ButtonStyleType> = [
+  ButtonStyleType.DANGER,
+  ButtonStyleType.DANGER_OUTLINE,
+  ButtonStyleType.HOVER_DANGER_OUTLINE,
+];
+
+const CALL_TO_ACTION_STYLES: Array<ButtonStyleType> = [
+  ButtonStyleType.NORMAL,
+  ButtonStyleType.PRIMARY,
+  ButtonStyleType.SUCCESS,
+  ButtonStyleType.WARNING,
+];
+
+export const isDestructiveActionButton: <T extends GenericObject>(
+  button: ActionButtonSchema<T>,
+) => boolean = <T extends GenericObject>(
+  button: ActionButtonSchema<T>,
+): boolean => {
+  return DESTRUCTIVE_STYLES.includes(button.buttonStyleType);
+};
+
+export const isActionButtonVisible: <T extends GenericObject>(
+  button: ActionButtonSchema<T>,
+  item: T,
+  isMobile: boolean,
+) => boolean = <T extends GenericObject>(
+  button: ActionButtonSchema<T>,
+  item: T,
+  isMobile: boolean,
+): boolean => {
+  if (button.isVisible && !button.isVisible(item)) {
+    return false;
+  }
+
+  if (button.hideOnMobile && isMobile) {
+    return false;
+  }
+
+  return true;
+};
+
+type SplitActionButtonsFunction = <T extends GenericObject>(
+  options: SplitActionButtonsOptions<T>,
+) => SplitActionButtonsResult<T>;
+
+const splitActionButtons: SplitActionButtonsFunction = <
+  T extends GenericObject,
+>(
+  options: SplitActionButtonsOptions<T>,
+): SplitActionButtonsResult<T> => {
+  const visible: Array<IndexedActionButton<T>> = [];
+
+  (options.actionButtons || []).forEach(
+    (button: ActionButtonSchema<T>, index: number) => {
+      if (
+        isActionButtonVisible(button, options.item, Boolean(options.isMobile))
+      ) {
+        visible.push({ button, index });
+      }
+    },
+  );
+
+  const candidates: Array<IndexedActionButton<T>> = visible.filter(
+    (entry: IndexedActionButton<T>) => {
+      return entry.button.placement !== ActionButtonPlacement.MoreMenu;
+    },
+  );
+
+  const nonDestructiveCandidates: Array<IndexedActionButton<T>> =
+    candidates.filter((entry: IndexedActionButton<T>) => {
+      return !isDestructiveActionButton(entry.button);
+    });
+
+  const usableCandidates: Array<IndexedActionButton<T>> =
+    nonDestructiveCandidates.filter((entry: IndexedActionButton<T>) => {
+      return !entry.button.disabled;
+    });
+
+  type FindCallToActionFunction = (
+    entries: Array<IndexedActionButton<T>>,
+  ) => IndexedActionButton<T> | undefined;
+
+  const findCallToAction: FindCallToActionFunction = (
+    entries: Array<IndexedActionButton<T>>,
+  ): IndexedActionButton<T> | undefined => {
+    return entries.find((entry: IndexedActionButton<T>) => {
+      return CALL_TO_ACTION_STYLES.includes(entry.button.buttonStyleType);
+    });
+  };
+
+  const primary: IndexedActionButton<T> | null =
+    candidates.find((entry: IndexedActionButton<T>) => {
+      return entry.button.placement === ActionButtonPlacement.Primary;
+    }) ||
+    findCallToAction(usableCandidates) ||
+    usableCandidates[0] ||
+    findCallToAction(nonDestructiveCandidates) ||
+    nonDestructiveCandidates[0] ||
+    (visible.length === 1 && candidates.length === 1 ? candidates[0]! : null);
+
+  const rest: Array<IndexedActionButton<T>> = visible.filter(
+    (entry: IndexedActionButton<T>) => {
+      return entry !== primary;
+    },
+  );
+
+  return {
+    primary,
+    moreMenu: [
+      ...rest.filter((entry: IndexedActionButton<T>) => {
+        return !isDestructiveActionButton(entry.button);
+      }),
+      ...rest.filter((entry: IndexedActionButton<T>) => {
+        return isDestructiveActionButton(entry.button);
+      }),
+    ],
+  };
+};
+
+export default splitActionButtons;

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -26,7 +26,14 @@ import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
 import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
+import XAxisType from "../Types/XAxis/XAxisType";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
+import {
+  ChartTimeRangeZoomContextValue,
+  ChartTimeRangeZoomHandlers,
+  resolveChartTimeRangeZoom,
+  useChartTimeRangeZoom,
+} from "../TimeRangeZoom/TimeRangeZoomContext";
 
 export const AreaChartPalette: Array<AvailableChartColorsKeys> = [
   "blue",
@@ -61,6 +68,8 @@ export interface ComponentProps {
   /*
    * When provided, the chart supports drag-to-select: dragging across
    * buckets calls back with the [start, end) of the selected time range.
+   * Left unset, the chart zooms the enclosing page instead, when the page
+   * offers that (TimeRangeZoomScope).
    */
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
   /*
@@ -69,6 +78,11 @@ export interface ComponentProps {
    * onTimeRangeReset for why an idle handler costs click latency.
    */
   onTimeRangeReset?: (() => void) | undefined;
+  /*
+   * Keeps this chart out of drag-to-zoom altogether, including the page's:
+   * for a chart whose window is not the page's time range.
+   */
+  disableTimeRangeZoom?: boolean | undefined;
   // Plain click on a bucket — see ChartLibrary onBucketClick.
   onBucketClick?:
     | ((
@@ -109,6 +123,22 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
 ): ReactElement => {
   const [records, setRecords] = React.useState<Array<ChartDataPoint>>([]);
 
+  /*
+   * Drag-to-zoom: the host's own handlers, or else the enclosing page's
+   * (TimeRangeZoomScope), so a drag here retimes every chart on the page.
+   */
+  const pageZoom: ChartTimeRangeZoomContextValue | null =
+    useChartTimeRangeZoom();
+  const timeRangeZoom: ChartTimeRangeZoomHandlers = resolveChartTimeRangeZoom({
+    onTimeRangeSelect: props.onTimeRangeSelect,
+    onTimeRangeReset: props.onTimeRangeReset,
+    isTimeAxis:
+      props.xAxis.options.type === XAxisType.Time ||
+      props.xAxis.options.type === XAxisType.Date,
+    disableTimeRangeZoom: props.disableTimeRangeZoom,
+    pageZoom: pageZoom,
+  });
+
   const bandLower: string | undefined = props.anomalyBandLowerSeriesName;
   const bandUpper: string | undefined = props.anomalyBandUpperSeriesName;
 
@@ -257,8 +287,8 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
           formattedExemplars.length > 0 ? formattedExemplars : undefined
         }
         onExemplarClick={props.onExemplarClick}
-        onTimeRangeSelect={props.onTimeRangeSelect}
-        onTimeRangeReset={props.onTimeRangeReset}
+        onTimeRangeSelect={timeRangeZoom.onTimeRangeSelect}
+        onTimeRangeReset={timeRangeZoom.onTimeRangeReset}
         onBucketClick={props.onBucketClick}
         ghostCategories={props.ghostSeriesNames}
         anomalyBandLowerKey={bandLower}

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -22,7 +22,14 @@ import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
 import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
 import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
+import XAxisType from "../Types/XAxis/XAxisType";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
+import {
+  ChartTimeRangeZoomContextValue,
+  ChartTimeRangeZoomHandlers,
+  resolveChartTimeRangeZoom,
+  useChartTimeRangeZoom,
+} from "../TimeRangeZoom/TimeRangeZoomContext";
 
 export const BarChartPalette: Array<AvailableChartColorsKeys> = [
   "indigo",
@@ -59,10 +66,23 @@ export interface ComponentProps {
    */
   colors?: Array<ChartColorValue> | undefined;
   /*
-   * Double-click on the plot: undoes a board-wide zoom. Bar panels have no
-   * drag-to-select of their own but share the dashboard's time range.
+   * When provided, the chart supports drag-to-select: dragging across bars
+   * calls back with the [start, end) of the time they cover. Left unset,
+   * the chart zooms the enclosing page instead, when the page offers that
+   * (TimeRangeZoomScope).
+   */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /*
+   * Double-click on the plot: undoes whatever drag-to-select produced, on
+   * this chart or a neighbouring one. Supply it only when a reset is
+   * actually possible.
    */
   onTimeRangeReset?: (() => void) | undefined;
+  /*
+   * Keeps this chart out of drag-to-zoom altogether, including the page's:
+   * for a chart whose window is not the page's time range.
+   */
+  disableTimeRangeZoom?: boolean | undefined;
 }
 
 export interface BarInternalProps extends ComponentProps {
@@ -74,6 +94,22 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
 ): ReactElement => {
   const [records, setRecords] = React.useState<Array<ChartDataPoint>>([]);
 
+  /*
+   * Drag-to-zoom: the host's own handlers, or else the enclosing page's
+   * (TimeRangeZoomScope), so a drag here retimes every chart on the page.
+   */
+  const pageZoom: ChartTimeRangeZoomContextValue | null =
+    useChartTimeRangeZoom();
+  const timeRangeZoom: ChartTimeRangeZoomHandlers = resolveChartTimeRangeZoom({
+    onTimeRangeSelect: props.onTimeRangeSelect,
+    onTimeRangeReset: props.onTimeRangeReset,
+    isTimeAxis:
+      props.xAxis.options.type === XAxisType.Time ||
+      props.xAxis.options.type === XAxisType.Date,
+    disableTimeRangeZoom: props.disableTimeRangeZoom,
+    pageZoom: pageZoom,
+  });
+
   const categories: Array<string> = props.data.map((item: SeriesPoint) => {
     return item.seriesName;
   });
@@ -161,7 +197,8 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
             ? formattedReferenceRegions
             : undefined
         }
-        onTimeRangeReset={props.onTimeRangeReset}
+        onTimeRangeSelect={timeRangeZoom.onTimeRangeSelect}
+        onTimeRangeReset={timeRangeZoom.onTimeRangeReset}
       />
       {hasNoData && <NoDataMessage />}
     </div>

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -9,6 +9,13 @@ import AreaChartElement, {
   ComponentProps as AreaChartProps,
 } from "../Area/AreaChart";
 import ExemplarPoint from "../Types/ExemplarPoint";
+import XAxisType from "../Types/XAxis/XAxisType";
+import {
+  ChartTimeRangeZoomContextValue,
+  ChartTimeRangeZoomHandlers,
+  resolveChartTimeRangeZoom,
+  useChartTimeRangeZoom,
+} from "../TimeRangeZoom/TimeRangeZoomContext";
 import Icon, { SizeProp } from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Modal, { ModalWidth } from "../../Modal/Modal";
@@ -90,6 +97,9 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   const syncId: string = props.syncId || fallbackSyncId;
   const [metricInfoModalChart, setMetricInfoModalChart] =
     useState<ChartMetricInfo | null>(null);
+  // The page's zoom, which every chart below takes unless it has its own.
+  const pageZoom: ChartTimeRangeZoomContextValue | null =
+    useChartTimeRangeZoom();
 
   type GetChartContentFunction = (chart: Chart, index: number) => ReactElement;
 
@@ -147,23 +157,39 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   const getDragToZoomHint: GetDragToZoomHintFunction = (
     chart: Chart,
   ): ReactElement => {
-    const supportsTimeRangeSelect: boolean =
-      (chart.type === ChartType.LINE || chart.type === ChartType.AREA) &&
-      Boolean(
-        (chart.props as LineChartProps | AreaChartProps).onTimeRangeSelect,
-      );
+    if (
+      chart.type !== ChartType.LINE &&
+      chart.type !== ChartType.AREA &&
+      chart.type !== ChartType.BAR
+    ) {
+      return <></>;
+    }
+
+    /*
+     * Resolved exactly the way the chart itself resolves them, so the hint
+     * never promises a gesture the chart does not have: the chart's own
+     * handlers, else the page's zoom.
+     */
+    const chartProps: LineChartProps | AreaChartProps | BarChartProps =
+      chart.props;
+    const xAxisType: XAxisType | undefined = chartProps.xAxis?.options?.type;
+    const zoom: ChartTimeRangeZoomHandlers = resolveChartTimeRangeZoom({
+      onTimeRangeSelect: chartProps.onTimeRangeSelect,
+      onTimeRangeReset: chartProps.onTimeRangeReset,
+      isTimeAxis: xAxisType === XAxisType.Time || xAxisType === XAxisType.Date,
+      disableTimeRangeZoom: chartProps.disableTimeRangeZoom,
+      pageZoom: pageZoom,
+    });
 
-    if (!supportsTimeRangeSelect) {
+    if (!zoom.onTimeRangeSelect) {
       return <></>;
     }
 
     /*
      * The way back out is only worth naming while there is something to
-     * reset — the host supplies onTimeRangeReset exactly then.
+     * reset — a reset handler is supplied exactly then.
      */
-    const canReset: boolean = Boolean(
-      (chart.props as LineChartProps | AreaChartProps).onTimeRangeReset,
-    );
+    const canReset: boolean = Boolean(zoom.onTimeRangeReset);
 
     return (
       <span className="ml-auto shrink-0 whitespace-nowrap text-[10px] text-gray-400">
@@ -395,7 +421,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
               key={index}
               className={`flex flex-col rounded-lg border border-gray-200 bg-white shadow-sm ${props.chartCssClass || ""}`}
             >
-              {/* Header strip — title, meta icons, hover-revealed zoom hint */}
+              {/* Header strip — title, meta icons, the always-visible zoom hint */}
               <div className="border-b border-gray-100 px-4 py-2.5">
                 <div className="flex items-center">
                   <h2