@oneuptime/common 14.0.0 → 14.0.2

package/UI/Components/Graphs/UptimeDaySummary.tsx

@@ -10,6 +10,14 @@ export interface StatusDuration {
   seconds: number;
   color: Color;
   isDowntime: boolean;
+  /*
+   * The monitor status's priority; a higher number wins the bar's colour, as
+   * it does for events (the default statuses run Operational 1, Degraded 2,
+   * Offline 3). Only a server reading carries it: a day painted from that
+   * reading takes the colour of its highest-priority status, as a day painted
+   * from events does. Optional because event-derived durations never need it.
+   */
+  priority?: number | undefined;
 }
 
 export interface ComponentProps {

package/UI/Components/Icon/Icon.tsx

@@ -800,7 +800,7 @@ const Icon: FunctionComponent<ComponentProps> = ({
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25"
+        d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"
       />,
     );
   } else if (icon === IconProp.CheckCircle) {

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -3,6 +3,7 @@ import React, {
   ReactElement,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -120,6 +121,11 @@ export interface ComponentProps {
   liveOptions?: LiveLogsOptions | undefined;
   histogramBuckets?: Array<HistogramBucket>;
   histogramLoading?: boolean;
+  /*
+   * How much time one histogram bar covers, as the query that drew the bars
+   * bucketed them. It is what lets a click on a bar open that bar's logs.
+   */
+  histogramBucketIntervalMs?: number | undefined;
   onHistogramTimeRangeSelect?: (startTime: Date, endTime: Date) => void;
   facetData?: FacetData;
   facetLoading?: boolean;
@@ -180,6 +186,9 @@ export type {
 const DEFAULT_PAGE_SIZE: number = 100;
 const PAGE_SIZE_OPTIONS: Array<number> = [100, 250, 500, 1000];
 
+export const LOGS_VIEWER_MAIN_AREA_TEST_ID: string = "logs-viewer-main-area";
+export const LOGS_VIEWER_LIST_TEST_ID: string = "logs-viewer-list";
+
 const severityWeight: Record<string, number> = {
   fatal: 6,
   error: 5,
@@ -320,6 +329,16 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   const [showKeyboardShortcuts, setShowKeyboardShortcuts] =
     useState<boolean>(false);
 
+  /*
+   * Below md there is no room for the facet sidebar beside the list: at phone
+   * width it squeezed the list card to ~120px. There the sidebar stacks above
+   * the list instead, folded behind a "Filters" toggle in the toolbar so the
+   * list stays the first thing on screen. From md up the sidebar always shows
+   * and the toggle is hidden, so this state only matters on small screens.
+   */
+  const [isFacetPanelOpen, setIsFacetPanelOpen] = useState<boolean>(false);
+  const facetPanelId: string = useId();
+
   /*
    * Drag-zooming the histogram is a one-way trip on its own: it swaps the
    * window for a custom one and nothing remembers what the reader was
@@ -1129,6 +1148,13 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     props.onViewModeChange?.(mode);
   };
 
+  const showSidebar: boolean =
+    props.showFacetSidebar !== false && Boolean(props.facetData);
+
+  // The analytics view replaces the sidebar, so there is nothing to toggle.
+  const showFacetPanelToggle: boolean =
+    showSidebar && currentViewMode !== "analytics";
+
   const toolbarProps: LogsViewerToolbarProps = {
     resultCount: totalItems,
     currentPage,
@@ -1180,11 +1206,19 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     },
     onShowDocumentation: props.onShowDocumentation,
     signalPivotActions: props.signalPivotActions,
+    ...(showFacetPanelToggle
+      ? {
+          facetPanelId,
+          isFacetPanelOpen,
+          onToggleFacetPanel: () => {
+            setIsFacetPanelOpen((prev: boolean) => {
+              return !prev;
+            });
+          },
+        }
+      : {}),
   };
 
-  const showSidebar: boolean =
-    props.showFacetSidebar !== false && Boolean(props.facetData);
-
   return (
     <div className="space-y-2">
       {props.showFilters && (
@@ -1220,6 +1254,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         <LogsHistogram
           buckets={props.histogramBuckets}
           isLoading={props.histogramLoading || false}
+          bucketIntervalMs={props.histogramBucketIntervalMs}
           onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
           onZoomOut={histogramZoom.onZoomOut}
         />
@@ -1235,9 +1270,18 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
           logAttributes={logAttributes}
         />
       ) : (
-        <div className="flex gap-3">
+        /*
+         * Facets + list. A column below md (the sidebar, when opened, stacks
+         * above the list); side by side from md up.
+         */
+        <div
+          className="flex flex-col gap-3 md:flex-row"
+          data-testid={LOGS_VIEWER_MAIN_AREA_TEST_ID}
+        >
           {showSidebar && props.facetData && (
             <LogsFacetSidebar
+              id={facetPanelId}
+              isCollapsedOnSmallScreens={!isFacetPanelOpen}
               facetData={props.facetData}
               isLoading={props.facetLoading || false}
               serviceMap={serviceMap}
@@ -1257,7 +1301,10 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
             />
           )}
 
-          <div className="min-w-0 flex-1">
+          <div
+            className="min-w-0 flex-1"
+            data-testid={LOGS_VIEWER_LIST_TEST_ID}
+          >
             <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
               {!props.showFilters && (
                 <div className="border-b border-gray-100 bg-gray-50/50 px-4 py-3">

package/UI/Components/LogsViewer/components/ColumnSelector.tsx

@@ -25,6 +25,8 @@ const triggerButtonClassName: string =
 const actionButtonClassName: string =
   "rounded-md px-2 py-1 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700";
 
+export const COLUMN_SELECTOR_PANEL_TEST_ID: string = "column-selector-panel";
+
 const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
   props: ColumnSelectorProps,
 ): ReactElement => {
@@ -136,7 +138,13 @@ const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
   };
 
   return (
-    <div className="relative" ref={ref}>
+    /*
+     * Positioned from md up only. A 24rem panel hung off the trigger's right
+     * edge ran off the side of a phone, since the trigger can sit anywhere in
+     * the wrapped toolbar. Below md the panel instead spans the nearest
+     * positioned ancestor, the toolbar row, and drops below the trigger.
+     */
+    <div className="md:relative" ref={ref}>
       <button
         type="button"
         className={triggerButtonClassName}
@@ -153,7 +161,10 @@ const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
       </button>
 
       {isComponentVisible && (
-        <div className="absolute right-0 z-20 mt-2 w-96 rounded-lg border border-gray-200 bg-white p-4 shadow-xl">
+        <div
+          className="absolute left-0 right-0 z-20 mt-2 rounded-lg border border-gray-200 bg-white p-4 shadow-xl md:left-auto md:w-96"
+          data-testid={COLUMN_SELECTOR_PANEL_TEST_ID}
+        >
           <div className="flex items-center justify-between gap-3">
             <div>
               <h3 className="text-sm font-semibold text-gray-900">Columns</h3>

package/UI/Components/LogsViewer/components/KeyboardShortcutsHelp.tsx

@@ -29,11 +29,23 @@ const SHORTCUT_ROWS: Array<ShortcutRow> = [
   { keys: ["?"], description: "Toggle this help" },
 ];
 
+export const KEYBOARD_SHORTCUTS_HELP_TEST_ID: string =
+  "keyboard-shortcuts-help";
+
 const KeyboardShortcutsHelp: FunctionComponent<KeyboardShortcutsHelpProps> = (
   props: KeyboardShortcutsHelpProps,
 ): ReactElement => {
   return (
-    <div className="absolute right-0 top-full z-50 mt-1 w-72 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
+    /*
+     * From md up this hangs off the trigger's right edge. Below md it spans
+     * the toolbar row the trigger sits in instead (the trigger's wrapper is
+     * not positioned there) and drops below the trigger, since an 18rem panel
+     * hung off a trigger mid-row could run off the side of a phone.
+     */
+    <div
+      className="absolute left-0 right-0 z-50 mt-1 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg md:left-auto md:top-full md:w-72"
+      data-testid={KEYBOARD_SHORTCUTS_HELP_TEST_ID}
+    >
       <div className="flex items-center justify-between border-b border-gray-100 px-3 py-2">
         <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
           Keyboard shortcuts

package/UI/Components/LogsViewer/components/LogDetailsPanel.tsx

@@ -13,6 +13,13 @@ import Dictionary from "../../../../Types/Dictionary";
 import Route from "../../../../Types/API/Route";
 import URL from "../../../../Types/API/URL";
 import CopyTextButton from "../../CopyTextButton/CopyTextButton";
+import AttributesJSONView from "../../AttributesJSON/AttributesJSONView";
+import AttributesViewToggle from "../../AttributesJSON/AttributesViewToggle";
+import CopyAttributesAsJSONButton from "../../AttributesJSON/CopyAttributesAsJSONButton";
+import {
+  AttributesView,
+  useAttributesView,
+} from "../../AttributesJSON/AttributesJSONPreferences";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Link from "../../Link/Link";
@@ -298,17 +305,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
       });
   }, [props.log.attributes]);
 
-  const attributesAsJson: string | null = useMemo(() => {
-    if (attributeEntries.length === 0) {
-      return null;
-    }
-
-    const flat: Record<string, string> = {};
-    for (const entry of attributeEntries) {
-      flat[entry.key] = entry.value;
-    }
-    return JSON.stringify(flat, null, 2);
-  }, [attributeEntries]);
+  const [attributesView, setAttributesView] = useAttributesView();
 
   const traceId: string = props.log.traceId?.toString() || "";
   const spanId: string = props.log.spanId?.toString() || "";
@@ -877,74 +874,92 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
           {attributeEntries.length > 0 && (
             <section className="space-y-3">
-              <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
-                <span>Attributes</span>
-                {attributesAsJson && (
-                  <CopyTextButton
-                    textToBeCopied={attributesAsJson}
-                    size="xs"
-                    variant="ghost"
-                    iconOnly={false}
-                    title="Copy attributes as JSON"
+              <header className="flex flex-wrap items-center justify-between gap-2">
+                <span className="flex items-center gap-1.5 text-[11px] uppercase tracking-wide text-gray-400">
+                  Attributes
+                  <span className="rounded-full bg-gray-100 px-1.5 py-px text-[10px] font-medium normal-case tracking-normal tabular-nums text-gray-500">
+                    {attributeEntries.length}
+                  </span>
+                </span>
+                <div className="flex items-center gap-1.5">
+                  <AttributesViewToggle
+                    value={attributesView}
+                    onChange={(view: AttributesView) => {
+                      setAttributesView(view);
+                    }}
+                    dataTestId="log-attributes-view-toggle"
+                  />
+                  <CopyAttributesAsJSONButton
+                    attributes={props.log.attributes}
+                    dataTestId="log-attributes-copy-json"
                   />
-                )}
+                </div>
               </header>
-              <div
-                className={`max-h-80 overflow-auto rounded-lg border ${surfaceCardClass}`}
-              >
-                <ul className="divide-y divide-gray-200">
-                  {attributeEntries.map((entry: AttributeEntry) => {
-                    return (
-                      <li
-                        key={entry.key}
-                        className="group flex items-start gap-3 px-3 py-2 hover:bg-white"
-                      >
-                        <span
-                          className="w-56 flex-none truncate font-mono text-[12px] text-gray-500"
-                          title={entry.key}
-                        >
-                          {entry.key}
-                        </span>
-                        <span
-                          className="min-w-0 flex-1 break-all font-mono text-[12px] text-gray-800"
-                          title={entry.value}
+              {attributesView === "json" ? (
+                <AttributesJSONView
+                  attributes={props.log.attributes}
+                  dataTestId="log-attributes-json"
+                />
+              ) : (
+                <div
+                  className={`max-h-80 overflow-auto rounded-lg border ${surfaceCardClass}`}
+                >
+                  <ul className="divide-y divide-gray-200">
+                    {attributeEntries.map((entry: AttributeEntry) => {
+                      return (
+                        <li
+                          key={entry.key}
+                          className="group flex items-start gap-3 px-3 py-2 hover:bg-white"
                         >
-                          {entry.value || (
-                            <span className="italic text-gray-400">empty</span>
-                          )}
-                        </span>
-                        <div className="flex flex-none items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
-                          {props.onFilterByAttribute && entry.value && (
-                            <button
-                              type="button"
-                              className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-indigo-600"
-                              title={`Filter by ${entry.key}: ${entry.value}`}
-                              onClick={() => {
-                                props.onFilterByAttribute!(
-                                  entry.key,
-                                  entry.value,
-                                );
-                              }}
-                            >
-                              <Icon
-                                icon={IconProp.Filter}
-                                className="h-3.5 w-3.5"
-                              />
-                            </button>
-                          )}
-                          <CopyTextButton
-                            textToBeCopied={entry.value}
-                            size="xs"
-                            variant="ghost"
-                            iconOnly={true}
-                            title={`Copy ${entry.key}`}
-                          />
-                        </div>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
+                          <span
+                            className="w-56 flex-none truncate font-mono text-[12px] text-gray-500"
+                            title={entry.key}
+                          >
+                            {entry.key}
+                          </span>
+                          <span
+                            className="min-w-0 flex-1 break-all font-mono text-[12px] text-gray-800"
+                            title={entry.value}
+                          >
+                            {entry.value || (
+                              <span className="italic text-gray-400">
+                                empty
+                              </span>
+                            )}
+                          </span>
+                          <div className="flex flex-none items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+                            {props.onFilterByAttribute && entry.value && (
+                              <button
+                                type="button"
+                                className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-indigo-600"
+                                title={`Filter by ${entry.key}: ${entry.value}`}
+                                onClick={() => {
+                                  props.onFilterByAttribute!(
+                                    entry.key,
+                                    entry.value,
+                                  );
+                                }}
+                              >
+                                <Icon
+                                  icon={IconProp.Filter}
+                                  className="h-3.5 w-3.5"
+                                />
+                              </button>
+                            )}
+                            <CopyTextButton
+                              textToBeCopied={entry.value}
+                              size="xs"
+                              variant="ghost"
+                              iconOnly={true}
+                              title={`Copy ${entry.key}`}
+                            />
+                          </div>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
             </section>
           )}
         </div>

package/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx

@@ -71,6 +71,15 @@ export interface LogsFacetSidebarProps {
   onFacetSearchChange?:
     | ((facetKey: string, searchText: string) => void)
     | undefined;
+  // Lets a disclosure toggle point at the panel with aria-controls.
+  id?: string | undefined;
+  /*
+   * Below md the sidebar stacks above the list at full width rather than
+   * sitting beside it. When true it is also folded away there, until the
+   * caller's toggle opens it. From md up it always shows. The fold is CSS
+   * only, so the sidebar stays mounted and keeps its search and expand state.
+   */
+  isCollapsedOnSmallScreens?: boolean | undefined;
 }
 
 /*
@@ -349,7 +358,12 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
   ]);
 
   return (
-    <div className="flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
+    <div
+      id={props.id}
+      className={`${
+        props.isCollapsedOnSmallScreens ? "hidden md:flex" : "flex"
+      } max-h-80 w-full flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white md:h-full md:max-h-none md:w-56`}
+    >
       <div className="border-b border-gray-100 px-3 py-2.5">
         <h3 className="text-[11px] font-semibold uppercase tracking-widest text-gray-400">
           Filters

package/UI/Components/LogsViewer/components/LogsHistogram.tsx

@@ -1,12 +1,4 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useCallback,
-  useRef,
-  useState,
-} from "react";
+import React, { FunctionComponent, ReactElement, useMemo } from "react";
 import {
   BarChart,
   Bar,
@@ -25,6 +17,9 @@ import {
 import HistogramTooltip from "./HistogramTooltip";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
 import OneUptimeDate from "../../../../Types/Date";
+import useHistogramRangeSelection, {
+  HistogramRangeSelectionState,
+} from "../../Charts/Utils/useHistogramRangeSelection";
 
 export interface LogsHistogramProps {
   buckets: Array<HistogramBucket>;
@@ -36,6 +31,12 @@ export interface LogsHistogramProps {
    * started from.
    */
   onZoomOut?: (() => void) | undefined;
+  /*
+   * How much time one bar covers. With it a click on a bar zooms into that
+   * bar and a drag zooms through the end of the last bar it covered; without
+   * it a selection can only run from one bar's start to another's.
+   */
+  bucketIntervalMs?: number | undefined;
 }
 
 interface PivotedRow {
@@ -88,15 +89,11 @@ function formatYAxisTick(value: number): string {
 const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
   props: LogsHistogramProps,
 ): ReactElement => {
-  const [selectionStart, setSelectionStart] = useState<string | null>(null);
-  const [selectionEnd, setSelectionEnd] = useState<string | null>(null);
-  const isSelecting: React.MutableRefObject<boolean> = useRef(false);
-  /*
-   * Mirrors isSelecting for rendering. The ref stays the authority so a
-   * mouseup handled twice (chart *and* window, below) cannot commit the same
-   * drag twice; the state is only here so the drag can change what is drawn.
-   */
-  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const selection: HistogramRangeSelectionState = useHistogramRangeSelection({
+    onTimeRangeSelect: props.onTimeRangeSelect,
+    onZoomOut: props.onZoomOut,
+    bucketIntervalMs: props.bucketIntervalMs,
+  });
 
   const pivotedData: Array<PivotedRow> = useMemo(() => {
     return pivotBuckets(props.buckets);
@@ -114,85 +111,6 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
     });
   }, [props.buckets]);
 
-  const handleMouseDown: (e: any) => void = useCallback(
-    (e: any): void => {
-      if (!props.onTimeRangeSelect || !e?.activeLabel) {
-        return;
-      }
-
-      isSelecting.current = true;
-      setIsDragging(true);
-      setSelectionStart(e.activeLabel as string);
-      setSelectionEnd(null);
-    },
-    [props.onTimeRangeSelect],
-  );
-
-  const handleMouseMove: (e: any) => void = useCallback((e: any): void => {
-    if (!isSelecting.current || !e?.activeLabel) {
-      return;
-    }
-
-    setSelectionEnd(e.activeLabel as string);
-  }, []);
-
-  const handleMouseUp: () => void = useCallback((): void => {
-    if (
-      !isSelecting.current ||
-      !selectionStart ||
-      !selectionEnd ||
-      !props.onTimeRangeSelect
-    ) {
-      isSelecting.current = false;
-      setIsDragging(false);
-      setSelectionStart(null);
-      setSelectionEnd(null);
-      return;
-    }
-
-    isSelecting.current = false;
-    setIsDragging(false);
-
-    const start: Date = OneUptimeDate.fromString(selectionStart);
-    const end: Date = OneUptimeDate.fromString(selectionEnd);
-
-    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
-      setSelectionStart(null);
-      setSelectionEnd(null);
-      return;
-    }
-
-    const earlierDate: Date = start < end ? start : end;
-    const laterDate: Date = start < end ? end : start;
-
-    props.onTimeRangeSelect(earlierDate, laterDate);
-
-    setSelectionStart(null);
-    setSelectionEnd(null);
-  }, [selectionStart, selectionEnd, props.onTimeRangeSelect]);
-
-  /*
-   * Readers routinely drag past the edge of a 120px-tall chart and let go
-   * outside it, where the chart's own mouseup never fires. Without this the
-   * drag would never end: the selection band would stay painted and the
-   * tooltip would stay suppressed until the next click.
-   */
-  useEffect(() => {
-    if (!isDragging) {
-      return undefined;
-    }
-
-    const finishDragOutsideChart: () => void = (): void => {
-      handleMouseUp();
-    };
-
-    window.addEventListener("mouseup", finishDragOutsideChart);
-
-    return () => {
-      window.removeEventListener("mouseup", finishDragOutsideChart);
-    };
-  }, [isDragging, handleMouseUp]);
-
   if (props.isLoading && pivotedData.length === 0) {
     return (
       <div className="flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white">
@@ -212,7 +130,11 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
         <div className="flex items-center gap-2">
           <span className="text-xs font-medium text-gray-500">Log Volume</span>
           {props.onTimeRangeSelect && (
-            <span className="text-[10px] text-gray-300">Drag to zoom</span>
+            <span className="text-[10px] text-gray-300">
+              {selection.canClickToZoom
+                ? "Click or drag to zoom"
+                : "Drag to zoom"}
+            </span>
           )}
           {props.onZoomOut && (
             <span className="text-[10px] text-gray-300">
@@ -243,15 +165,15 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
           height: 120,
           cursor: props.onTimeRangeSelect ? "crosshair" : "default",
         }}
-        onDoubleClick={props.onZoomOut}
+        onDoubleClick={selection.onDoubleClick}
       >
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={pivotedData}
             margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
+            onMouseDown={selection.onMouseDown}
+            onMouseMove={selection.onMouseMove}
+            onMouseUp={selection.onMouseUp}
             barCategoryGap="15%"
             barGap={0}
           >
@@ -288,7 +210,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
             <Tooltip
               content={<HistogramTooltip />}
               cursor={{ fill: "rgba(99,102,241,0.06)" }}
-              {...(isDragging ? { active: false } : {})}
+              {...(selection.isDragging ? { active: false } : {})}
             />
             {activeSeverities.map((severity: string, index: number) => {
               const isLast: boolean = index === activeSeverities.length - 1;
@@ -304,10 +226,10 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
                 />
               );
             })}
-            {selectionStart && selectionEnd && (
+            {selection.selectionStart && selection.selectionEnd && (
               <ReferenceArea
-                x1={selectionStart}
-                x2={selectionEnd}
+                x1={selection.selectionStart}
+                x2={selection.selectionEnd}
                 fill="rgba(99,102,241,0.12)"
                 stroke="rgba(99,102,241,0.5)"
                 strokeWidth={1}