Merge pull request #1469 from visualize-admin/fix/dashboard-layout-with-interactive-filters

fix: ChartPreview with Tall dashboard layout in edit mode and interactive filters active

Author: bprusinowski

app/components/chart-preview.tsx

@@ -7,8 +7,7 @@ import {
   useDroppable,
 } from "@dnd-kit/core";
 import { Trans } from "@lingui/macro";
-import { Box, Theme } from "@mui/material";
-import { makeStyles } from "@mui/styles";
+import { Box } from "@mui/material";
 import Head from "next/head";
 import React from "react";
 
@@ -28,8 +27,9 @@ import {
   ChartTablePreviewProvider,
   useChartTablePreview,
 } from "@/components/chart-table-preview";
+import { useChartStyles } from "@/components/chart-utils";
 import { ChartWithFilters } from "@/components/chart-with-filters";
-import DebugPanel, { shouldShowDebugPanel } from "@/components/debug-panel";
+import DebugPanel from "@/components/debug-panel";
 import Flex from "@/components/flex";
 import { Checkbox } from "@/components/form";
 import { HintYellow } from "@/components/hint";
@@ -301,19 +301,6 @@ const SingleURLsPreview = (props: SingleURLsPreviewProps) => {
   );
 };
 
-const useStyles = makeStyles<Theme>((theme) => ({
-  root: {
-    display: "grid",
-    gridTemplateRows: "subgrid",
-    gridRow: shouldShowDebugPanel() ? "span 5" : "span 4",
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.grey[800],
-    padding: theme.spacing(6),
-    border: "1px solid",
-    borderColor: theme.palette.divider,
-  },
-}));
-
 type ChartPreviewInnerProps = ChartPreviewProps & {
   chartKey?: string | null;
   actionElementSlot?: React.ReactNode;
@@ -327,7 +314,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
   const configuring = isConfiguring(state);
   const chartConfig = getChartConfig(state, chartKey);
   const locale = useLocale();
-  const classes = useStyles();
+  const chartClasses = useChartStyles();
   const commonQueryVariables = {
     sourceType: dataSource.type,
     sourceUrl: dataSource.url,
@@ -369,7 +356,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
   }, [dimensions, measures]);
 
   return (
-    <Box className={classes.root}>
+    <Box className={chartClasses.root}>
       <ChartErrorBoundary resetKeys={[state]}>
         {/* FIXME: adapt to design */}
         {metadata?.dataCubesMetadata.some(
@@ -459,11 +446,15 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
                   // title and the chart (subgrid layout)
                   <span />
                 )}
-                {chartConfig.interactiveFiltersConfig?.dataFilters.active && (
+                {chartConfig.interactiveFiltersConfig?.dataFilters.active ? (
                   <ChartDataFilters
                     dataSource={dataSource}
                     chartConfig={chartConfig}
                   />
+                ) : (
+                  // We need to have a span here to keep the space between the
+                  // description and the chart (subgrid layout)
+                  <span />
                 )}
                 <div
                   ref={containerRef}

app/components/chart-published.tsx

@@ -1,6 +1,7 @@
 import { Trans } from "@lingui/macro";
 import { Box, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import clsx from "clsx";
 import React, { useEffect, useMemo, useRef } from "react";
 import { useStore } from "zustand";
 
@@ -20,8 +21,8 @@ import {
   ChartTablePreviewProvider,
   useChartTablePreview,
 } from "@/components/chart-table-preview";
+import { useChartStyles } from "@/components/chart-utils";
 import { ChartWithFilters } from "@/components/chart-with-filters";
-import { shouldShowDebugPanel } from "@/components/debug-panel";
 import Flex from "@/components/flex";
 import { HintBlue, HintRed, HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
@@ -141,22 +142,17 @@ export const ChartPublished = (props: ChartPublishedProps) => {
   );
 };
 
-const useStyles = makeStyles<Theme, { shrink: boolean }>((theme) => ({
-  root: {
-    position: "relative",
-    display: "grid",
-    gridTemplateRows: "subgrid",
-    gridRow: shouldShowDebugPanel() ? "span 6" : "span 5",
-    backgroundColor: theme.palette.background.paper,
-    border: "1px solid",
-    borderColor: theme.palette.divider,
-    padding: theme.spacing(6),
-    paddingLeft: ({ shrink }) =>
-      `calc(${theme.spacing(5)} + ${shrink ? DRAWER_WIDTH : 0}px)`,
-    color: theme.palette.grey[800],
-    transition: "padding 0.25s ease",
-  },
-}));
+const usePublishedChartStyles = makeStyles<Theme, { shrink: boolean }>(
+  (theme) => ({
+    root: {
+      // Needed for the metadata panel to be contained inside the root.
+      position: "relative",
+      paddingLeft: ({ shrink }) =>
+        `calc(${theme.spacing(5)} + ${shrink ? DRAWER_WIDTH : 0}px)`,
+      transition: "padding 0.25s ease",
+    },
+  })
+);
 
 type ChartPublishInnerProps = {
   dataSource: DataSource | undefined;
@@ -203,7 +199,8 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
     return () => unsubscribe();
   });
 
-  const classes = useStyles({
+  const chartClasses = useChartStyles();
+  const publishedChartClasses = usePublishedChartStyles({
     shrink: shouldShrink,
   });
   const locale = useLocale();
@@ -246,7 +243,10 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
 
   return (
     <MetadataPanelStoreContext.Provider value={metadataPanelStore}>
-      <Box className={classes.root} ref={rootRef}>
+      <Box
+        className={clsx(chartClasses.root, publishedChartClasses.root)}
+        ref={rootRef}
+      >
         <ChartErrorBoundary resetKeys={[chartConfig]}>
           {metadata?.some(
             (d) => d.publicationStatus === DataCubePublicationStatus.Draft
@@ -329,7 +329,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
                 />
               ) : (
                 // We need to have a span here to keep the space between the
-                // title and the chart (subgrid layout)
+                // description and the chart (subgrid layout)
                 <span />
               )}
               <div

app/components/chart-utils.ts

@@ -0,0 +1,18 @@
+import { Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+
+import { shouldShowDebugPanel } from "@/components/debug-panel";
+
+/** Generic styles shared between `ChartPreview` and `ChartPublished`. */
+export const useChartStyles = makeStyles<Theme>((theme) => ({
+  root: {
+    display: "grid",
+    gridTemplateRows: "subgrid",
+    gridRow: shouldShowDebugPanel() ? "span 6" : "span 5",
+    padding: theme.spacing(6),
+    backgroundColor: theme.palette.background.paper,
+    border: "1px solid",
+    borderColor: theme.palette.divider,
+    color: theme.palette.grey[800],
+  },
+}));