From ddebff3cc1db5d2496bdccd546c8255940efad65 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Tue, 29 Nov 2022 13:46:47 +0100
Subject: [PATCH] feat: Shrink published chart when metadata panel is opened

---
 app/components/chart-published.tsx | 252 +++++++++++++++--------------
 1 file changed, 130 insertions(+), 122 deletions(-)

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 44d7dab5c4..7278903060 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -3,6 +3,7 @@ import { Box, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import * as React from "react";
 import { useEffect, useMemo, useRef } from "react";
+import { useStore } from "zustand";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { isUsingImputation } from "@/charts/shared/imputation";
@@ -32,6 +33,7 @@ import {
   PublishedConfiguratorStateProvider,
 } from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
+import { DRAWER_WIDTH } from "@/configurator/components/drawer";
 import { flag } from "@/configurator/components/flag";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
@@ -59,34 +61,35 @@ export const ChartPublished = ({
   chartConfig: ChartConfig;
   configKey: string;
 }) => {
-  const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);
-
   return (
     <ChartTablePreviewProvider>
-      <MetadataPanelStoreContext.Provider value={metadataPanelStore}>
-        <ChartPublishedInner
-          dataSet={dataSet}
-          dataSource={dataSource}
-          meta={meta}
-          chartConfig={chartConfig}
-          configKey={configKey}
-        />
-      </MetadataPanelStoreContext.Provider>
+      <ChartPublishedInner
+        dataSet={dataSet}
+        dataSource={dataSource}
+        meta={meta}
+        chartConfig={chartConfig}
+        configKey={configKey}
+      />
     </ChartTablePreviewProvider>
   );
 };
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    position: "relative",
-    display: "flex",
-    flexGrow: 1,
-    flexDirection: "column",
-    padding: theme.spacing(5),
-    color: theme.palette.grey[800],
-    overflowX: "auto",
-  },
-}));
+const useStyles = makeStyles<Theme, { metadataPanelOpen: boolean }>(
+  (theme) => ({
+    root: {
+      position: "relative",
+      display: "flex",
+      flexGrow: 1,
+      flexDirection: "column",
+      padding: theme.spacing(5),
+      paddingLeft: ({ metadataPanelOpen }) =>
+        `calc(${theme.spacing(5)} + ${metadataPanelOpen ? DRAWER_WIDTH : 0}px)`,
+      color: theme.palette.grey[800],
+      overflowX: "auto",
+      transition: "padding 0.25s ease",
+    },
+  })
+);
 
 export const ChartPublishedInner = ({
   dataSet,
@@ -101,7 +104,10 @@ export const ChartPublishedInner = ({
   chartConfig: ChartConfig;
   configKey: string;
 }) => {
-  const classes = useStyles();
+  const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);
+  const metadataPanelOpen = useStore(metadataPanelStore, (state) => state.open);
+
+  const classes = useStyles({ metadataPanelOpen });
   const locale = useLocale();
   const isTrustedDataSource = useIsTrustedDataSource(dataSource);
 
@@ -140,109 +146,111 @@ export const ChartPublishedInner = ({
   }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
 
   return (
-    <Box className={classes.root} ref={rootRef}>
-      <ChartErrorBoundary resetKeys={[chartConfig]}>
-        {metaData?.dataCubeByIri?.publicationStatus ===
-          DataCubePublicationStatus.Draft && (
-          <Box sx={{ mb: 4 }}>
-            <HintRed iconName="datasetError" iconSize={64}>
-              <Trans id="dataset.publicationStatus.draft.warning">
-                Careful, this dataset is only a draft.
-                <br />
-                <strong>Don&apos;t use for reporting!</strong>
-              </Trans>
-            </HintRed>
-          </Box>
-        )}
-        {metaData?.dataCubeByIri?.expires && (
-          <Box sx={{ mb: 4 }}>
-            <HintRed iconName="datasetError" iconSize={64}>
-              <Trans id="dataset.publicationStatus.expires.warning">
-                Careful, the data for this chart has expired.
-                <br />
-                <strong>Don&apos;t use for reporting!</strong>
-              </Trans>
-            </HintRed>
-          </Box>
-        )}
-        {!isTrustedDataSource && (
-          <Box sx={{ mb: 4 }}>
-            <HintYellow iconName="hintWarning">
-              <Trans id="data.source.notTrusted">
-                This chart is not using a trusted data source.
-              </Trans>
-            </HintYellow>
-          </Box>
-        )}
-        {isUsingImputation(chartConfig) && (
-          <Box sx={{ mb: 4 }}>
-            <HintBlue iconName="hintWarning">
-              <Trans id="dataset.hasImputedValues">
-                Some data in this dataset is missing and has been interpolated
-                to fill the gaps.
-              </Trans>
-            </HintBlue>
-          </Box>
-        )}
-        <Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
-          <Typography component="div" variant="h2" mb={2}>
-            {meta.title[locale]}
-          </Typography>
-
-          {flag("metadata") && (
-            <MetadataPanel
-              datasetIri={dataSet}
-              dataSource={dataSource}
-              dimensions={allDimensions}
-              container={rootRef.current}
-            />
+    <MetadataPanelStoreContext.Provider value={metadataPanelStore}>
+      <Box className={classes.root} ref={rootRef}>
+        <ChartErrorBoundary resetKeys={[chartConfig]}>
+          {metaData?.dataCubeByIri?.publicationStatus ===
+            DataCubePublicationStatus.Draft && (
+            <Box sx={{ mb: 4 }}>
+              <HintRed iconName="datasetError" iconSize={64}>
+                <Trans id="dataset.publicationStatus.draft.warning">
+                  Careful, this dataset is only a draft.
+                  <br />
+                  <strong>Don&apos;t use for reporting!</strong>
+                </Trans>
+              </HintRed>
+            </Box>
+          )}
+          {metaData?.dataCubeByIri?.expires && (
+            <Box sx={{ mb: 4 }}>
+              <HintRed iconName="datasetError" iconSize={64}>
+                <Trans id="dataset.publicationStatus.expires.warning">
+                  Careful, the data for this chart has expired.
+                  <br />
+                  <strong>Don&apos;t use for reporting!</strong>
+                </Trans>
+              </HintRed>
+            </Box>
+          )}
+          {!isTrustedDataSource && (
+            <Box sx={{ mb: 4 }}>
+              <HintYellow iconName="hintWarning">
+                <Trans id="data.source.notTrusted">
+                  This chart is not using a trusted data source.
+                </Trans>
+              </HintYellow>
+            </Box>
           )}
-        </Flex>
+          {isUsingImputation(chartConfig) && (
+            <Box sx={{ mb: 4 }}>
+              <HintBlue iconName="hintWarning">
+                <Trans id="dataset.hasImputedValues">
+                  Some data in this dataset is missing and has been interpolated
+                  to fill the gaps.
+                </Trans>
+              </HintBlue>
+            </Box>
+          )}
+          <Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
+            <Typography component="div" variant="h2" mb={2}>
+              {meta.title[locale]}
+            </Typography>
 
-        {meta.description[locale] && (
-          <Typography component="div" variant="body1" mb={2}>
-            {meta.description[locale]}
-          </Typography>
-        )}
-        <InteractiveFiltersProvider>
-          <Flex
-            flexDirection="column"
-            ref={containerRef}
-            height={containerHeight.current!}
-            flexGrow={1}
-          >
-            <PublishedConfiguratorStateProvider
-              chartId={configKey}
-              initialState={publishedConfiguratorState}
-            >
-              {isTablePreview ? (
-                <DataSetTable
-                  sx={{ maxHeight: "100%" }}
-                  dataSetIri={dataSet}
-                  dataSource={dataSource}
-                  chartConfig={chartConfig}
-                />
-              ) : (
-                <ChartWithInteractiveFilters
-                  dataSet={dataSet}
-                  dataSource={dataSource}
-                  chartConfig={chartConfig}
-                />
-              )}
-            </PublishedConfiguratorStateProvider>
+            {flag("metadata") && (
+              <MetadataPanel
+                datasetIri={dataSet}
+                dataSource={dataSource}
+                dimensions={allDimensions}
+                container={rootRef.current}
+              />
+            )}
           </Flex>
-          {chartConfig && (
-            <ChartFootnotes
-              dataSetIri={dataSet}
-              dataSource={dataSource}
-              chartConfig={chartConfig}
-              configKey={configKey}
-              onToggleTableView={handleToggleTableView}
-            />
+
+          {meta.description[locale] && (
+            <Typography component="div" variant="body1" mb={2}>
+              {meta.description[locale]}
+            </Typography>
           )}
-        </InteractiveFiltersProvider>
-      </ChartErrorBoundary>
-    </Box>
+          <InteractiveFiltersProvider>
+            <Flex
+              flexDirection="column"
+              ref={containerRef}
+              height={containerHeight.current!}
+              flexGrow={1}
+            >
+              <PublishedConfiguratorStateProvider
+                chartId={configKey}
+                initialState={publishedConfiguratorState}
+              >
+                {isTablePreview ? (
+                  <DataSetTable
+                    sx={{ maxHeight: "100%" }}
+                    dataSetIri={dataSet}
+                    dataSource={dataSource}
+                    chartConfig={chartConfig}
+                  />
+                ) : (
+                  <ChartWithInteractiveFilters
+                    dataSet={dataSet}
+                    dataSource={dataSource}
+                    chartConfig={chartConfig}
+                  />
+                )}
+              </PublishedConfiguratorStateProvider>
+            </Flex>
+            {chartConfig && (
+              <ChartFootnotes
+                dataSetIri={dataSet}
+                dataSource={dataSource}
+                chartConfig={chartConfig}
+                configKey={configKey}
+                onToggleTableView={handleToggleTableView}
+              />
+            )}
+          </InteractiveFiltersProvider>
+        </ChartErrorBoundary>
+      </Box>
+    </MetadataPanelStoreContext.Provider>
   );
 };