From 1476474ceb44f62c4791f288df37a1659f57ebc0 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Mon, 28 Nov 2022 17:43:34 +0100
Subject: [PATCH] WIP

---
 app/components/chart-filters-list.tsx | 73 ++++++++++++++++++++-------
 app/components/metadata-panel.tsx     |  4 ++
 2 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
index 9c25748276..ae6dfcf028 100644
--- a/app/components/chart-filters-list.tsx
+++ b/app/components/chart-filters-list.tsx
@@ -1,13 +1,35 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Button, Theme, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import { Fragment } from "react";
+import shallow from "zustand/shallow";
 
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import { useMetadataPanelStore } from "@/components/metadata-panel";
 import { ChartConfig, DataSource } from "@/configurator";
 import { isTemporalDimension } from "@/domain/data";
 import { useTimeFormatUnit } from "@/formatters";
-import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
+import {
+  DimensionMetadataFragment,
+  useDataCubeMetadataWithComponentValuesQuery,
+} from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
-import { MaybeTooltip } from "@/utils/maybe-tooltip";
+import useEvent from "@/utils/use-event";
+
+const useStyles = makeStyles<Theme>((theme) => ({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  button: {
+    minHeight: 0,
+    padding: 0,
+    fontWeight: "bold",
+    color: theme.palette.grey[800],
+  },
+  semicolon: {
+    marginRight: theme.spacing(1),
+  },
+}));
 
 export const ChartFiltersList = ({
   dataSetIri,
@@ -18,9 +40,26 @@ export const ChartFiltersList = ({
   dataSource: DataSource;
   chartConfig: ChartConfig;
 }) => {
+  const classes = useStyles();
   const locale = useLocale();
   const timeFormatUnit = useTimeFormatUnit();
 
+  const { setOpen, setActiveSection, setSelectedDimension } =
+    useMetadataPanelStore(
+      (state) => ({
+        setOpen: state.setOpen,
+        setActiveSection: state.setActiveSection,
+        setSelectedDimension: state.setSelectedDimension,
+      }),
+      shallow
+    );
+
+  const handleClick = useEvent((d: DimensionMetadataFragment) => {
+    setOpen(true);
+    setActiveSection("data");
+    setSelectedDimension(d);
+  });
+
   const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
     variables: {
       iri: dataSetIri,
@@ -67,28 +106,24 @@ export const ChartFiltersList = ({
       <>
         {namedFilters.length > 0 && (
           <Typography
+            className={classes.root}
             component="div"
             variant="body2"
-            sx={{ color: "grey.800" }}
             data-testid="chart-filters-list"
           >
             {namedFilters.map(({ dimension, value }, i) => (
               <Fragment key={dimension.iri}>
-                <Box component="span" fontWeight="bold">
-                  <MaybeTooltip text={dimension.description || undefined}>
-                    <span
-                      style={{
-                        textDecoration: dimension.description
-                          ? "underline"
-                          : undefined,
-                      }}
-                    >
-                      {dimension.label}
-                    </span>
-                  </MaybeTooltip>
-
-                  {": "}
-                </Box>
+                <Button
+                  className={classes.button}
+                  variant="text"
+                  size="small"
+                  onClick={() => {
+                    handleClick(dimension);
+                  }}
+                >
+                  {dimension.label}
+                </Button>
+                <span className={classes.semicolon}>{": "}</span>
 
                 <Box component="span">{value && value.label}</Box>
                 {i < namedFilters.length - 1 && ", "}
diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx
index aca3303b8c..3f12202416 100644
--- a/app/components/metadata-panel.tsx
+++ b/app/components/metadata-panel.tsx
@@ -37,6 +37,7 @@ type MetadataPanelSection = "general" | "data";
 
 type MetadataPanelState = {
   open: boolean;
+  setOpen: (d: boolean) => void;
   toggle: () => void;
   activeSection: MetadataPanelSection;
   setActiveSection: (d: MetadataPanelSection) => void;
@@ -47,6 +48,9 @@ type MetadataPanelState = {
 
 export const useMetadataPanelStore = create<MetadataPanelState>((set, get) => ({
   open: false,
+  setOpen: (d: boolean) => {
+    set({ open: d });
+  },
   toggle: () => {
     set({ open: !get().open });
   },