fix: Map offset on edge

visualize-admin · Sep 20, 2022 · 163666d · 163666d
1 parent 6ef2ac4
commit 163666d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 42 deletions.
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
@@ -49,11 +49,13 @@ export const ChartFootnotes = ({
   dataSource,
   chartConfig,
   configKey,
+  onToggleTableView,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: ChartConfig;
   configKey?: string;
+  onToggleTableView: () => void;
 }) => {
   const classes = useStyles();
   const locale = useLocale();
@@ -150,7 +152,7 @@ export const ChartFootnotes = ({
                   }
                 />
               }
-              onClick={() => setIsChartTablePreview(!isChartTablePreview)}
+              onClick={onToggleTableView}
               sx={{ p: 0, typography: "caption" }}
             >
               {isChartTablePreview ? (

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -2,6 +2,7 @@ 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";
@@ -23,7 +24,7 @@ import { DataSetTable } from "@/configurator/components/datatable";
 import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
-import { useResizeObserver } from "@/utils/use-resize-observer";
+import useEvent from "@/utils/use-event";
 
 export const ChartPreview = ({
   dataSetIri,
@@ -57,16 +58,17 @@ export const ChartPreviewInner = ({
       locale,
     },
   });
-  const [isTablePreview] = useChartTablePreview();
-
-  const [chartRef, _, height] = useResizeObserver<HTMLDivElement>();
-  const lastHeight = React.useRef(height);
-
-  React.useEffect(() => {
-    if (height !== 0) {
-      lastHeight.current = height;
+  const [isTablePreview, setIsChartTablePreview] = useChartTablePreview();
+  const lastHeight = useRef("auto" as "auto" | number);
+  const chartTableContainerRef = useRef<HTMLDivElement>();
+  const handleToggleTableView = useEvent(() => {
+    if (!chartTableContainerRef.current) {
+      return;
     }
-  }, [height]);
+    const bcr = chartTableContainerRef.current.getBoundingClientRect();
+    lastHeight.current = bcr.height;
+    return setIsChartTablePreview((c) => !c);
+  });
 
   return (
     <Flex
@@ -134,29 +136,31 @@ export const ChartPreviewInner = ({
               </Typography>
             </>
             <InteractiveFiltersProvider>
-              {isTablePreview ? (
-                <DataSetTable
-                  sx={{
-                    height: height || lastHeight.current,
-                    width: "100%",
-                  }}
-                  dataSetIri={dataSetIri}
-                  dataSource={dataSource}
-                  chartConfig={state.chartConfig}
-                />
-              ) : (
-                <ChartWithInteractiveFilters
-                  ref={chartRef}
-                  dataSet={dataSetIri}
-                  dataSource={dataSource}
-                  chartConfig={state.chartConfig}
-                />
-              )}
+              <Box ref={chartTableContainerRef} height={lastHeight.current}>
+                {isTablePreview ? (
+                  <DataSetTable
+                    sx={{
+                      width: "100%",
+                      maxHeight: "100%",
+                    }}
+                    dataSetIri={dataSetIri}
+                    dataSource={dataSource}
+                    chartConfig={state.chartConfig}
+                  />
+                ) : (
+                  <ChartWithInteractiveFilters
+                    dataSet={dataSetIri}
+                    dataSource={dataSource}
+                    chartConfig={state.chartConfig}
+                  />
+                )}
+              </Box>
               {state.chartConfig && (
                 <ChartFootnotes
                   dataSetIri={dataSetIri}
                   dataSource={dataSource}
                   chartConfig={state.chartConfig}
+                  onToggleTableView={handleToggleTableView}
                 />
               )}
               <DebugPanel configurator={true} interactiveFilters={true} />

diff --git a/app/components/chart-published.tsx b/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 } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { isUsingImputation } from "@/charts/shared/imputation";
@@ -35,7 +35,7 @@ import {
 import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
-import { useResizeObserver } from "@/utils/use-resize-observer";
+import useEvent from "@/utils/use-event";
 
 export const ChartPublished = ({
   dataSet,
@@ -102,14 +102,7 @@ export const ChartPublishedInner = ({
   });
   const [isTablePreview] = useChartTablePreview();
 
-  const [chartRef, _, height] = useResizeObserver<HTMLDivElement>();
-  const lastHeight = React.useRef(height);
-
-  React.useEffect(() => {
-    if (height !== 0) {
-      lastHeight.current = height;
-    }
-  }, [height]);
+  const lastHeight = React.useRef("auto" as "auto" | number);
 
   const publishedConfiguratorState = useMemo(() => {
     return {
@@ -119,6 +112,17 @@ 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);
+  });
+
   return (
     <Box className={classes.root}>
       <ChartErrorBoundary resetKeys={[chartConfig]}>
@@ -175,7 +179,7 @@ export const ChartPublishedInner = ({
           </Typography>
         )}
         <InteractiveFiltersProvider>
-          <Box height={height || lastHeight.current}>
+          <Box ref={chartTableContainerRef} height={lastHeight.current}>
             <PublishedConfiguratorStateProvider
               chartId={configKey}
               initialState={publishedConfiguratorState}
@@ -189,7 +193,6 @@ export const ChartPublishedInner = ({
                 />
               ) : (
                 <ChartWithInteractiveFilters
-                  ref={chartRef}
                   dataSet={dataSet}
                   dataSource={dataSource}
                   chartConfig={chartConfig}
@@ -203,6 +206,7 @@ export const ChartPublishedInner = ({
               dataSource={dataSource}
               chartConfig={chartConfig}
               configKey={configKey}
+              onToggleTableView={handleToggleTableView}
             />
           )}
         </InteractiveFiltersProvider>

diff --git a/app/components/chart-table-preview.tsx b/app/components/chart-table-preview.tsx
@@ -2,12 +2,13 @@ import {
   createContext,
   Dispatch,
   ReactNode,
+  SetStateAction,
   useContext,
   useState,
 } from "react";
 
 const ChartTablePreviewContext = createContext<
-  [boolean, Dispatch<boolean>] | undefined
+  [boolean, Dispatch<SetStateAction<boolean>>] | undefined
 >(undefined);
 
 export const useChartTablePreview = () => {