Merge pull request #728 from visualize-admin/fix/map-offset-edge

visualize-admin · Sep 20, 2022 · e6d090b · e6d090b · vercel · Sep 20, 2022
2 parents 6ef2ac4 + 706426d
commit e6d090b
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 52 deletions.
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
@@ -49,20 +49,23 @@ export const ChartFootnotes = ({
   dataSource,
   chartConfig,
   configKey,
+  onToggleTableView,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: ChartConfig;
   configKey?: string;
+  onToggleTableView: () => void;
 }) => {
   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}`);
@@ -144,16 +147,16 @@ export const ChartFootnotes = ({
               startIcon={
                 <Icon
                   name={
-                    isChartTablePreview
+                    isTablePreview
                       ? getChartIcon(chartConfig.chartType)
                       : "table"
                   }
                 />
               }
-              onClick={() => setIsChartTablePreview(!isChartTablePreview)}
+              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>

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -23,7 +23,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 +57,14 @@ export const ChartPreviewInner = ({
       locale,
     },
   });
-  const [isTablePreview] = useChartTablePreview();
+  const {
+    state: isTablePreview,
+    setState: setIsTablePreview,
+    containerRef,
+    containerHeight,
+  } = useChartTablePreview();
 
-  const [chartRef, _, height] = useResizeObserver<HTMLDivElement>();
-  const lastHeight = React.useRef(height);
-
-  React.useEffect(() => {
-    if (height !== 0) {
-      lastHeight.current = height;
-    }
-  }, [height]);
+  const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
   return (
     <Flex
@@ -134,29 +132,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={containerRef} height={containerHeight.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
@@ -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,
@@ -100,16 +100,6 @@ export const ChartPublishedInner = ({
       locale,
     },
   });
-  const [isTablePreview] = useChartTablePreview();
-
-  const [chartRef, _, height] = useResizeObserver<HTMLDivElement>();
-  const lastHeight = React.useRef(height);
-
-  React.useEffect(() => {
-    if (height !== 0) {
-      lastHeight.current = height;
-    }
-  }, [height]);
 
   const publishedConfiguratorState = useMemo(() => {
     return {
@@ -119,6 +109,14 @@ export const ChartPublishedInner = ({
     } as ConfiguratorStatePublishing;
   }, [chartConfig, dataSource]);
 
+  const {
+    state: isTablePreview,
+    setState: setIsTablePreview,
+    containerRef,
+    containerHeight,
+  } = useChartTablePreview();
+  const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
+
   return (
     <Box className={classes.root}>
       <ChartErrorBoundary resetKeys={[chartConfig]}>
@@ -175,7 +173,7 @@ export const ChartPublishedInner = ({
           </Typography>
         )}
         <InteractiveFiltersProvider>
-          <Box height={height || lastHeight.current}>
+          <Box ref={containerRef} height={containerHeight.current!}>
             <PublishedConfiguratorStateProvider
               chartId={configKey}
               initialState={publishedConfiguratorState}
@@ -189,7 +187,6 @@ export const ChartPublishedInner = ({
                 />
               ) : (
                 <ChartWithInteractiveFilters
-                  ref={chartRef}
                   dataSet={dataSet}
                   dataSource={dataSource}
                   chartConfig={chartConfig}
@@ -203,6 +200,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,13 +2,28 @@ import {
   createContext,
   Dispatch,
   ReactNode,
+  SetStateAction,
   useContext,
   useState,
+  useCallback,
+  useRef,
+  useMemo,
+  RefObject,
 } from "react";
 
-const ChartTablePreviewContext = createContext<
-  [boolean, Dispatch<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);
@@ -22,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>
   );