feat: Add basic list of dimensions (metadata panel)

Author: bprusinowski

app/components/chart-preview.tsx

@@ -3,6 +3,7 @@ import { Box, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import Head from "next/head";
 import * as React from "react";
+import { useMemo } from "react";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
@@ -22,7 +23,7 @@ import { HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
 import { ChartConfig, DataSource, useConfiguratorState } from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
-import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
+import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
 import useEvent from "@/utils/use-event";
@@ -68,7 +69,7 @@ export const ChartPreviewInner = ({
   const [state, dispatch] = useConfiguratorState();
   const locale = useLocale();
   const classes = useStyles();
-  const [{ data: metaData }] = useDataCubeMetadataQuery({
+  const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
     variables: {
       iri: dataSetIri,
       sourceType: dataSource.type,
@@ -85,6 +86,13 @@ export const ChartPreviewInner = ({
 
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
+  const allDimensions = useMemo(() => {
+    return [
+      ...(metaData?.dataCubeByIri?.dimensions ?? []),
+      ...(metaData?.dataCubeByIri?.measures ?? []),
+    ];
+  }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
+
   return (
     <Flex
       sx={{
@@ -143,6 +151,7 @@ export const ChartPreviewInner = ({
                 <MetadataPanel
                   datasetIri={dataSetIri}
                   dataSource={dataSource}
+                  dimensions={allDimensions}
                   top={96}
                 />
               </Flex>

app/components/chart-published.tsx

@@ -33,7 +33,7 @@ import {
   DEFAULT_DATA_SOURCE,
   useIsTrustedDataSource,
 } from "@/domain/datasource";
-import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
+import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
 import useEvent from "@/utils/use-event";
@@ -95,7 +95,7 @@ export const ChartPublishedInner = ({
 
   const rootRef = useRef<HTMLDivElement>(null);
 
-  const [{ data: metaData }] = useDataCubeMetadataQuery({
+  const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
     variables: {
       iri: dataSet,
       sourceType: dataSource.type,
@@ -120,6 +120,13 @@ export const ChartPublishedInner = ({
   } = useChartTablePreview();
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
+  const allDimensions = useMemo(() => {
+    return [
+      ...(metaData?.dataCubeByIri?.dimensions ?? []),
+      ...(metaData?.dataCubeByIri?.measures ?? []),
+    ];
+  }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
+
   return (
     <Box className={classes.root} ref={rootRef}>
       <ChartErrorBoundary resetKeys={[chartConfig]}>
@@ -173,6 +180,7 @@ export const ChartPublishedInner = ({
           <MetadataPanel
             datasetIri={dataSet}
             dataSource={dataSource}
+            dimensions={allDimensions}
             container={rootRef.current}
           />
         </Flex>

app/components/metadata-panel.tsx

@@ -1,5 +1,6 @@
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import {
+  Box,
   Button,
   Drawer,
   IconButton,
@@ -13,6 +14,7 @@ import React from "react";
 import { DataSource } from "@/configurator";
 import { DataSetMetadata } from "@/configurator/components/dataset-metadata";
 import { DRAWER_WIDTH } from "@/configurator/components/drawer";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import SvgIcClose from "@/icons/components/IcClose";
 import useEvent from "@/utils/use-event";
 
@@ -96,6 +98,9 @@ const useStyles = makeStyles<Theme, { drawerTop?: number }>((theme) => {
       },
     },
     tabPanel: {
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.spacing(4),
       padding: 0,
     },
   };
@@ -104,11 +109,13 @@ const useStyles = makeStyles<Theme, { drawerTop?: number }>((theme) => {
 export const MetadataPanel = ({
   datasetIri,
   dataSource,
+  dimensions,
   container,
   top,
 }: {
   datasetIri: string;
   dataSource: DataSource;
+  dimensions: DimensionMetadataFragment[];
   container?: HTMLDivElement | null;
   top?: number;
 }) => {
@@ -117,51 +124,24 @@ export const MetadataPanel = ({
       <PanelInner
         datasetIri={datasetIri}
         dataSource={dataSource}
+        dimensions={dimensions}
         container={container}
         top={top}
       />
     </ContextProvider>
   );
 };
 
-const ToggleButton = ({ onClick }: { onClick: () => void }) => {
-  return (
-    <Button component="a" variant="text" size="small" onClick={onClick}>
-      <Typography variant="body2">Metadata</Typography>
-    </Button>
-  );
-};
-
-const Header = ({ onClose }: { onClose: () => void }) => {
-  const classes = useStyles({});
-
-  return (
-    <div className={classes.header}>
-      <Typography variant="body2" fontWeight="bold">
-        Metadata
-      </Typography>
-
-      <IconButton size="small" onClick={onClose}>
-        <SvgIcClose />
-      </IconButton>
-    </div>
-  );
-};
-
-const Content = () => {
-  const classes = useStyles({});
-
-  return <div className={classes.content}></div>;
-};
-
 const PanelInner = ({
   datasetIri,
   dataSource,
+  dimensions,
   container,
   top = 0,
 }: {
   datasetIri: string;
   dataSource: DataSource;
+  dimensions: DimensionMetadataFragment[];
   container: HTMLDivElement | null | undefined;
   top?: number;
 }) => {
@@ -210,16 +190,79 @@ const PanelInner = ({
             />
           </TabList>
 
-          <TabPanel className={classes.tabPanel} value="general">
-            <DataSetMetadata dataSetIri={datasetIri} dataSource={dataSource} />
-          </TabPanel>
-          <TabPanel className={classes.tabPanel} value="data">
-            Data
-          </TabPanel>
+          <TabPanelGeneral datasetIri={datasetIri} dataSource={dataSource} />
+          <TabPanelData dimensions={dimensions} />
         </TabContext>
 
         <Content />
       </Drawer>
     </>
   );
 };
+
+const ToggleButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <Button component="a" variant="text" size="small" onClick={onClick}>
+      <Typography variant="body2">Metadata</Typography>
+    </Button>
+  );
+};
+
+const Header = ({ onClose }: { onClose: () => void }) => {
+  const classes = useStyles({});
+
+  return (
+    <div className={classes.header}>
+      <Typography variant="body2" fontWeight="bold">
+        Metadata
+      </Typography>
+
+      <IconButton size="small" onClick={onClose}>
+        <SvgIcClose />
+      </IconButton>
+    </div>
+  );
+};
+
+const Content = () => {
+  const classes = useStyles({});
+
+  return <div className={classes.content}></div>;
+};
+
+const TabPanelGeneral = ({
+  datasetIri,
+  dataSource,
+}: {
+  datasetIri: string;
+  dataSource: DataSource;
+}) => {
+  const classes = useStyles({});
+
+  return (
+    <TabPanel className={classes.tabPanel} value="general">
+      <DataSetMetadata dataSetIri={datasetIri} dataSource={dataSource} />
+    </TabPanel>
+  );
+};
+
+const TabPanelData = ({
+  dimensions,
+}: {
+  dimensions: DimensionMetadataFragment[];
+}) => {
+  const classes = useStyles({});
+
+  return (
+    <TabPanel className={classes.tabPanel} value="data">
+      {dimensions.map((d) => (
+        <Box key={d.iri}>
+          <Typography variant="body2" fontWeight="bold">
+            {d.label}
+          </Typography>
+          <Typography variant="body2">{d.description}</Typography>
+        </Box>
+      ))}
+    </TabPanel>
+  );
+};