From 0920355d05bb4449c2308ff729b60bbe08964ef6 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 7 May 2024 14:33:09 +0200 Subject: [PATCH] fix: Keep errors in one container, so the subgrid layout doesn't break in case of errors --- app/components/chart-preview.tsx | 33 +++++------ app/components/chart-published.tsx | 90 +++++++++++++++--------------- app/components/chart-utils.ts | 2 +- 3 files changed, 64 insertions(+), 61 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 3e2b3f34d..da107945c 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -9,7 +9,7 @@ import { import { Trans } from "@lingui/macro"; import { Box } from "@mui/material"; import Head from "next/head"; -import React, { useState, useMemo, useCallback } from "react"; +import { ReactNode, useCallback, useMemo, useState } from "react"; import { DataSetTable } from "@/browse/datatable"; import { ChartDataFilters } from "@/charts/shared/chart-data-filters"; @@ -301,7 +301,7 @@ const SingleURLsPreview = (props: SingleURLsPreviewProps) => { type ChartPreviewInnerProps = ChartPreviewProps & { chartKey?: string | null; - actionElementSlot?: React.ReactNode; + actionElementSlot?: ReactNode; disableMetadataPanel?: boolean; }; @@ -356,20 +356,21 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { return ( - {/* FIXME: adapt to design */} - {metadata?.dataCubesMetadata.some( - (d) => d.publicationStatus === DataCubePublicationStatus.Draft - ) && ( - - - - Careful, this dataset is only a draft. -
- Don't use for reporting! - - - - )} +
+ {metadata?.dataCubesMetadata.some( + (d) => d.publicationStatus === DataCubePublicationStatus.Draft + ) && ( + + + + Careful, this dataset is only a draft. +
+ Don't use for reporting! + + + + )} +
{hasChartConfigs(state) && ( <> diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx index febaf2111..839785d4b 100644 --- a/app/components/chart-published.tsx +++ b/app/components/chart-published.tsx @@ -2,7 +2,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, useCallback } from "react"; +import { useCallback, useEffect, useMemo, useRef } from "react"; import { useStore } from "zustand"; import { DataSetTable } from "@/browse/datatable"; @@ -248,49 +248,51 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => { ref={rootRef} > - {metadata?.some( - (d) => d.publicationStatus === DataCubePublicationStatus.Draft - ) && ( - - - - Careful, this dataset is only a draft. -
- Don't use for reporting! - - - - )} - {metadata?.some((d) => d.expires) && ( - - - - Careful, the data for this chart has expired. -
- Don't use for reporting! - - - - )} - {!isTrustedDataSource && ( - - - - This chart is not using a trusted data source. - - - - )} - {isUsingImputation(chartConfig) && ( - - - - Some data in this dataset is missing and has been interpolated - to fill the gaps. - - - - )} +
+ {metadata?.some( + (d) => d.publicationStatus === DataCubePublicationStatus.Draft + ) && ( + + + + Careful, this dataset is only a draft. +
+ Don't use for reporting! + + + + )} + {metadata?.some((d) => d.expires) && ( + + + + Careful, the data for this chart has expired. +
+ Don't use for reporting! + + + + )} + {!isTrustedDataSource && ( + + + + This chart is not using a trusted data source. + + + + )} + {isUsingImputation(chartConfig) && ( + + + + Some data in this dataset is missing and has been + interpolated to fill the gaps. + + + + )} +
((theme) => ({ root: { display: "grid", gridTemplateRows: "subgrid", - gridRow: shouldShowDebugPanel() ? "span 6" : "span 5", + gridRow: shouldShowDebugPanel() ? "span 7" : "span 6", padding: theme.spacing(6), backgroundColor: theme.palette.background.paper, border: "1px solid",