Merge pull request #906 from visualize-admin/feat/metadata-panel

feat: First version of 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";
@@ -19,9 +20,14 @@ import GenericChart from "@/components/common-chart";
 import DebugPanel from "@/components/debug-panel";
 import Flex from "@/components/flex";
 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 { flag } from "@/configurator/components/flag";
+import {
+  DimensionMetadataFragment,
+  useDataCubeMetadataWithComponentValuesQuery,
+} from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
 import useEvent from "@/utils/use-event";
@@ -67,7 +73,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,
@@ -84,6 +90,13 @@ export const ChartPreviewInner = ({
 
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
+  const allDimensions: DimensionMetadataFragment[] = useMemo(() => {
+    return [
+      ...(metaData?.dataCubeByIri?.dimensions ?? []),
+      ...(metaData?.dataCubeByIri?.measures ?? []),
+    ];
+  }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
+
   return (
     <Flex
       sx={{
@@ -112,25 +125,42 @@ export const ChartPreviewInner = ({
           state.state === "PUBLISHING") && (
           <>
             <>
-              <Typography
-                variant="h2"
+              <Flex
                 sx={{
-                  color: state.meta.title[locale] === "" ? "grey.500" : "text",
+                  justifyContent: "space-between",
+                  alignItems: "flex-start",
                 }}
-                className={classes.title}
-                onClick={() =>
-                  dispatch({
-                    type: "ACTIVE_FIELD_CHANGED",
-                    value: "title",
-                  })
-                }
               >
-                {state.meta.title[locale] === "" ? (
-                  <Trans id="annotation.add.title">[ Title ]</Trans>
-                ) : (
-                  state.meta.title[locale]
+                <Typography
+                  variant="h2"
+                  sx={{
+                    color:
+                      state.meta.title[locale] === "" ? "grey.500" : "text",
+                  }}
+                  className={classes.title}
+                  onClick={() =>
+                    dispatch({
+                      type: "ACTIVE_FIELD_CHANGED",
+                      value: "title",
+                    })
+                  }
+                >
+                  {state.meta.title[locale] === "" ? (
+                    <Trans id="annotation.add.title">[ Title ]</Trans>
+                  ) : (
+                    state.meta.title[locale]
+                  )}
+                </Typography>
+
+                {flag("metadata") && (
+                  <MetadataPanel
+                    datasetIri={dataSetIri}
+                    dataSource={dataSource}
+                    dimensions={allDimensions}
+                    top={96}
+                  />
                 )}
-              </Typography>
+              </Flex>
               <Head>
                 <title key="title">
                   {state.meta.title[locale] === ""

app/components/chart-published.tsx

@@ -2,7 +2,7 @@ import { Trans } from "@lingui/macro";
 import { Box, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import * as React from "react";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { isUsingImputation } from "@/charts/shared/imputation";
@@ -19,6 +19,7 @@ import {
 import GenericChart from "@/components/common-chart";
 import Flex from "@/components/flex";
 import { HintBlue, HintRed, HintYellow } from "@/components/hint";
+import { MetadataPanel } from "@/components/metadata-panel";
 import {
   ChartConfig,
   ConfiguratorStatePublishing,
@@ -27,12 +28,16 @@ import {
   PublishedConfiguratorStateProvider,
 } from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
+import { flag } from "@/configurator/components/flag";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
   DEFAULT_DATA_SOURCE,
   useIsTrustedDataSource,
 } from "@/domain/datasource";
-import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
+import {
+  DimensionMetadataFragment,
+  useDataCubeMetadataWithComponentValuesQuery,
+} from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
 import useEvent from "@/utils/use-event";
@@ -65,6 +70,7 @@ export const ChartPublished = ({
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
+    position: "relative",
     display: "flex",
     flexGrow: 1,
     flexDirection: "column",
@@ -91,7 +97,9 @@ export const ChartPublishedInner = ({
   const locale = useLocale();
   const isTrustedDataSource = useIsTrustedDataSource(dataSource);
 
-  const [{ data: metaData }] = useDataCubeMetadataQuery({
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
     variables: {
       iri: dataSet,
       sourceType: dataSource.type,
@@ -116,8 +124,15 @@ export const ChartPublishedInner = ({
   } = useChartTablePreview();
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
+  const allDimensions: DimensionMetadataFragment[] = useMemo(() => {
+    return [
+      ...(metaData?.dataCubeByIri?.dimensions ?? []),
+      ...(metaData?.dataCubeByIri?.measures ?? []),
+    ];
+  }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
+
   return (
-    <Box className={classes.root}>
+    <Box className={classes.root} ref={rootRef}>
       <ChartErrorBoundary resetKeys={[chartConfig]}>
         {metaData?.dataCubeByIri?.publicationStatus ===
           DataCubePublicationStatus.Draft && (
@@ -161,11 +176,21 @@ export const ChartPublishedInner = ({
             </HintBlue>
           </Box>
         )}
-        {meta.title[locale] !== "" && (
+        <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}
+            />
+          )}
+        </Flex>
+
         {meta.description[locale] && (
           <Typography component="div" variant="body1" mb={2}>
             {meta.description[locale]}

app/components/chart-selection-tabs.tsx

@@ -195,10 +195,20 @@ const TabsInner = ({
 }) => {
   return (
     <Box display="flex" sx={{ width: "100%", alignItems: "flex-start" }}>
-      <Tabs value={0} sx={{ position: "relative", top: 1, flexGrow: 1 }}>
-        {/* TODO: Generate dynamically when chart composition is implemented */}
+      <Tabs
+        value={0}
+        TabIndicatorProps={{ style: { display: "none" } }}
+        sx={{ position: "relative", top: 1, flexGrow: 1 }}
+      >
+        {/* TODO: Generate dynamically when chart composition is implemented. Add useStyles */}
         <Tab
-          sx={{ p: 0, background: "white" }}
+          sx={{
+            p: 0,
+            background: "white",
+            border: "1px solid",
+            borderBottomWidth: 0,
+            borderColor: "divider",
+          }}
           onClick={onActionButtonClick}
           label={
             <TabContent iconName={getIconName(chartType)} editable={editable} />