fix: Avoid scrolling the entire page for charts with many series (#134)

* fix: Avoid scrolling the entire page for charts with many series

* Add screenshot test for scroll-into-view logic.

Author: avinashbot

src/internal/components/chart-legend/index.tsx

@@ -16,6 +16,7 @@ import {
 import Box, { BoxProps } from "@cloudscape-design/components/box";
 import { InternalChartTooltip } from "@cloudscape-design/components/internal/do-not-use/chart-tooltip";
 
+import { scrollIntoViewNearestContainer } from "../../utils/dom";
 import { DebouncedCall } from "../../utils/utils";
 import { GetLegendTooltipContentProps, LegendItem, LegendTooltipContent } from "../interfaces";
 
@@ -110,20 +111,11 @@ export const ChartLegend = ({
       if (isMouseInContainer.current) {
         return;
       }
-      const container = containerRef.current;
       const element = elementsByIndexRef.current?.[highlightedIndex];
-      if (!container || !element) {
+      if (!element) {
         return;
       }
-      const elementRect = element.getBoundingClientRect();
-      const containerRect = container.getBoundingClientRect();
-      const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
-      if (!isVisible) {
-        const elementCenter = elementRect.top + elementRect.height / 2;
-        const containerCenter = containerRect.top + containerRect.height / 2;
-        const top = container.scrollTop + (elementCenter - containerCenter);
-        container.scrollTo({ top, behavior: "smooth" });
-      }
+      scrollIntoViewNearestContainer(element, { behavior: "smooth", scrollMode: "if-needed" });
     }, SCROLL_DELAY);
   }, [items, scrollIntoViewControl]);
 

src/internal/components/series-details/index.tsx

@@ -9,6 +9,7 @@ import { BaseComponentProps } from "@cloudscape-design/components/internal/base-
 import { InternalExpandableSection } from "@cloudscape-design/components/internal/do-not-use/expandable-section";
 
 import { getDataAttributes } from "../../base-component/get-data-attributes";
+import { scrollIntoViewNearestContainer } from "../../utils/dom";
 
 import styles from "./styles.css.js";
 import testClasses from "./test-classes/styles.css.js";
@@ -59,8 +60,8 @@ function ChartSeriesDetails(
 
   const selectedIndex = details.findIndex((d) => d.highlighted);
   useEffect(() => {
-    if (selectedIndex !== -1 && selectedRef.current && "scrollIntoView" in selectedRef.current) {
-      selectedRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    if (selectedIndex !== -1 && selectedRef.current) {
+      scrollIntoViewNearestContainer(selectedRef.current, { behavior: "smooth", scrollMode: "always" });
     }
   }, [selectedIndex]);
 

src/internal/utils/dom.ts

@@ -0,0 +1,54 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Polyfill for `element.scrollIntoView({ container: "nearest", scrollMode: "..." })`
+ * For ease of implementation, behaves like `{ block: "center" }` is provided.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView (for `container`)
+ * @see https://caniuse.com/wf-scroll-into-view-container (for `container` browser support)
+ * @see https://github.com/w3c/csswg-drafts/pull/5677 (for discussion of `if-needed`)
+ */
+export function scrollIntoViewNearestContainer(
+  element: HTMLElement,
+  options?: ScrollOptions & { scrollMode?: "always" | "if-needed" },
+) {
+  // Scroll methods (scrollTo, scrollIntoView, etc) are not supported in test environments like JSDOM.
+  if (!("scrollTo" in element)) {
+    return;
+  }
+
+  // Get element boundaries to measure scroll offsets.
+  // In the future, could be replaced with a simple `element.scrollParent`.
+  // https://drafts.csswg.org/cssom-view/#dom-htmlelement-scrollparent
+  const scrollParent = getScrollParent(element) ?? element.ownerDocument.documentElement;
+  const { top: elementTop, bottom: elementBottom, height: elementHeight } = element.getBoundingClientRect();
+  const { top: scrollTop, bottom: scrollBottom, height: scrollHeight } = scrollParent.getBoundingClientRect();
+
+  if (options?.scrollMode === "if-needed") {
+    // Technically, getBoundingClientRect() returns the border-box, which includes the border width.
+    // We should subtract the border width to get the padding box, but all that computation isn't worth it.
+    const isNeeded = elementTop < scrollTop || elementBottom > scrollBottom;
+    if (!isNeeded) {
+      return;
+    }
+  }
+
+  const topRelativeToParent = elementTop + scrollParent.scrollTop - scrollTop;
+  const blockCenterOffset = scrollHeight / 2 - elementHeight / 2;
+  scrollParent.scrollTo({ top: topRelativeToParent - blockCenterOffset, ...options });
+}
+
+function getScrollParent(element: HTMLElement): HTMLElement | null {
+  for (
+    let node: HTMLElement | null = element.parentElement;
+    node !== null && node !== element.ownerDocument.body;
+    node = node.parentElement
+  ) {
+    const overflow = getComputedStyle(node).overflow;
+    if (overflow !== "visible" && overflow !== "hidden") {
+      return node;
+    }
+  }
+  return null;
+}

test/visual/scroll.test.ts

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { expect, test } from "vitest";
+
+import { setupScreenshotTest } from "../utils";
+
+test(
+  "scrolls highlighted element into view in tooltip and legend",
+  setupScreenshotTest(
+    "/#/01-cartesian-chart/many-series?screenshotMode=true&legendBottomMaxHeight=32",
+    async (page) => {
+      await page.waitForVisible(".screenshot-area");
+      await page.waitForJsTimers(100);
+      await page.hoverElement('[aria-label*="series 18"] [aria-label*="Sep 25\\a  01:15"]');
+      const pngString = await page.fullPageScreenshot();
+      expect(pngString).toMatchImageSnapshot();
+    },
+  ),
+);