fix: Map offset on edge

app/components/chart-footnotes.tsx

@@ -60,11 +60,12 @@ export const ChartFootnotes = ({
   const classes = useStyles();
   const locale = useLocale();
   const [shareUrl, setShareUrl] = useState("");
-  const [isChartTablePreview, setIsChartTablePreview] = useChartTablePreview();
+  const { state: isTablePreview, setState: setIsTablePreview } =
+    useChartTablePreview();
   // Reset back to chart view when switching chart type.
   useEffect(() => {
-    setIsChartTablePreview(false);
-  }, [setIsChartTablePreview, chartConfig.chartType]);
+    setIsTablePreview(false);
+  }, [setIsTablePreview, chartConfig.chartType]);
 
   useEffect(() => {
     setShareUrl(`${window.location.origin}/${locale}/v/${configKey}`);
@@ -146,7 +147,7 @@ export const ChartFootnotes = ({
               startIcon={
                 <Icon
                   name={
-                    isChartTablePreview
+                    isTablePreview
                       ? getChartIcon(chartConfig.chartType)
                       : "table"
                   }
@@ -155,7 +156,7 @@ export const ChartFootnotes = ({
               onClick={onToggleTableView}
               sx={{ p: 0, typography: "caption" }}
             >
-              {isChartTablePreview ? (
+              {isTablePreview ? (
                 <Trans id="metadata.switch.chart">Switch to chart view</Trans>
               ) : (
                 <Trans id="metadata.switch.table">Switch to table view</Trans>

app/components/chart-preview.tsx

@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 import { Box, Typography } from "@mui/material";
 import Head from "next/head";
 import * as React from "react";
-import { useRef } from "react";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
@@ -58,17 +57,14 @@ export const ChartPreviewInner = ({
       locale,
     },
   });
-  const [isTablePreview, setIsChartTablePreview] = useChartTablePreview();
-  const lastHeight = useRef("auto" as "auto" | number);
-  const chartTableContainerRef = useRef<HTMLDivElement>();
-  const handleToggleTableView = useEvent(() => {
-    if (!chartTableContainerRef.current) {
-      return;
-    }
-    const bcr = chartTableContainerRef.current.getBoundingClientRect();
-    lastHeight.current = bcr.height;
-    return setIsChartTablePreview((c) => !c);
-  });
+  const {
+    state: isTablePreview,
+    setState: setIsTablePreview,
+    containerRef,
+    containerHeight,
+  } = useChartTablePreview();
+
+  const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
   return (
     <Flex
@@ -136,7 +132,7 @@ export const ChartPreviewInner = ({
               </Typography>
             </>
             <InteractiveFiltersProvider>
-              <Box ref={chartTableContainerRef} height={lastHeight.current}>
+              <Box ref={containerRef} height={containerHeight.current!}>
                 {isTablePreview ? (
                   <DataSetTable
                     sx={{

app/components/chart-published.tsx

@@ -2,7 +2,7 @@ import { Trans } from "@lingui/macro";
 import { Box, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import * as React from "react";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { isUsingImputation } from "@/charts/shared/imputation";
@@ -100,9 +100,6 @@ export const ChartPublishedInner = ({
       locale,
     },
   });
-  const [isTablePreview] = useChartTablePreview();
-
-  const lastHeight = React.useRef("auto" as "auto" | number);
 
   const publishedConfiguratorState = useMemo(() => {
     return {
@@ -112,16 +109,13 @@ export const ChartPublishedInner = ({
     } as ConfiguratorStatePublishing;
   }, [chartConfig, dataSource]);
 
-  const [, setIsChartTablePreview] = useChartTablePreview();
-  const chartTableContainerRef = useRef<HTMLDivElement>();
-  const handleToggleTableView = useEvent(() => {
-    if (!chartTableContainerRef.current) {
-      return;
-    }
-    const bcr = chartTableContainerRef.current.getBoundingClientRect();
-    lastHeight.current = bcr.height;
-    return setIsChartTablePreview((c) => !c);
-  });
+  const {
+    state: isTablePreview,
+    setState: setIsTablePreview,
+    containerRef,
+    containerHeight,
+  } = useChartTablePreview();
+  const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
   return (
     <Box className={classes.root}>
@@ -179,7 +173,7 @@ export const ChartPublishedInner = ({
           </Typography>
         )}
         <InteractiveFiltersProvider>
-          <Box ref={chartTableContainerRef} height={lastHeight.current}>
+          <Box ref={containerRef} height={containerHeight.current!}>
             <PublishedConfiguratorStateProvider
               chartId={configKey}
               initialState={publishedConfiguratorState}

app/components/chart-table-preview.tsx

@@ -5,11 +5,25 @@ import {
   SetStateAction,
   useContext,
   useState,
+  useCallback,
+  useRef,
+  useMemo,
+  RefObject,
 } from "react";
 
-const ChartTablePreviewContext = createContext<
-  [boolean, Dispatch<SetStateAction<boolean>>] | undefined
->(undefined);
+type Context = {
+  state: boolean;
+  setState: Dispatch<SetStateAction<boolean>>;
+  containerRef: RefObject<HTMLDivElement>;
+  containerHeight: RefObject<"auto" | number>;
+};
+
+const ChartTablePreviewContext = createContext<Context>({
+  state: true,
+  setState: () => {},
+  containerRef: { current: null },
+  containerHeight: { current: "auto" },
+});
 
 export const useChartTablePreview = () => {
   const ctx = useContext(ChartTablePreviewContext);
@@ -23,15 +37,41 @@ export const useChartTablePreview = () => {
   return ctx;
 };
 
+/**
+ * Keep tracks of whether we are looking at the chart of a table
+ * Before changing type, the height of containerRef is measured
+ * and passed back into containerHeight.
+ */
 export const ChartTablePreviewProvider = ({
   children,
 }: {
   children: ReactNode;
 }) => {
-  const [state, dispatch] = useState<boolean>(false);
+  const [state, setStateRaw] = useState<boolean>(false);
+  const containerHeight = useRef("auto" as "auto" | number);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const setState = useCallback(
+    (v) => {
+      if (!containerRef.current) {
+        return;
+      }
+      const bcr = containerRef.current.getBoundingClientRect();
+      containerHeight.current = bcr.height;
+      return setStateRaw(v);
+    },
+    [setStateRaw]
+  );
 
+  const ctx = useMemo(() => {
+    return {
+      state,
+      setState,
+      containerRef,
+      containerHeight,
+    };
+  }, [setState, state]);
   return (
-    <ChartTablePreviewContext.Provider value={[state, dispatch]}>
+    <ChartTablePreviewContext.Provider value={ctx}>
       {children}
     </ChartTablePreviewContext.Provider>
   );