From e4709f5af7df113a1d592d4076c0bf9f0fa7516a Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Mon, 10 Jun 2024 16:42:39 +0200
Subject: [PATCH 1/4] feat: Activate shared filters for "tab" layout in
 configurator mode

---
 app/components/chart-panel.tsx                      | 2 +-
 app/components/chart-preview.tsx                    | 6 ++++++
 app/configurator/components/layout-configurator.tsx | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx
index d445fd16cb..f881440085 100644
--- a/app/components/chart-panel.tsx
+++ b/app/components/chart-panel.tsx
@@ -1,7 +1,7 @@
 import { Box, BoxProps, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
-import React, { forwardRef, HTMLProps } from "react";
+import React, { HTMLProps, forwardRef } from "react";
 
 import ChartPanelLayoutCanvas, {
   chartPanelLayoutGridClasses,
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 6f3a66a096..e87612625c 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -36,6 +36,7 @@ import {
 } from "@/components/chart-table-preview";
 import { useChartStyles } from "@/components/chart-utils";
 import { ChartWithFilters } from "@/components/chart-with-filters";
+import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-filters";
 import DebugPanel from "@/components/debug-panel";
 import { DragHandle, DragHandleProps } from "@/components/drag-handle";
 import Flex from "@/components/flex";
@@ -85,6 +86,11 @@ export const ChartPreview = (props: ChartPreviewProps) => {
     // we switch tabs in the configurator, otherwise we end up with the wrong
     // data in the downstream hooks (useDataCubesMetadataQuery, etc.)
     <ChartTablePreviewProvider key={state.activeChartKey}>
+      {state.state !== "CONFIGURING_CHART" ? (
+        <DashboardInteractiveFilters
+          key={state.chartConfigs.map((x) => x.key).join(",")}
+        />
+      ) : null}
       <ChartWrapper editing={editing} layoutType={layout.type}>
         <ChartPreviewInner dataSource={dataSource} />
       </ChartWrapper>
diff --git a/app/configurator/components/layout-configurator.tsx b/app/configurator/components/layout-configurator.tsx
index 301b7f9716..c1b9cfd982 100644
--- a/app/configurator/components/layout-configurator.tsx
+++ b/app/configurator/components/layout-configurator.tsx
@@ -209,6 +209,7 @@ const LayoutSharedFiltersConfigurator = () => {
   );
 
   switch (layout.type) {
+    case "tab":
     case "dashboard":
       return (
         <ControlSection

From ea16559e15fbb4e3f134db33e55ece02bad7032e Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Mon, 10 Jun 2024 16:45:34 +0200
Subject: [PATCH 2/4] feat: Activate dashboard filters for tabs published

---
 app/components/chart-published.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 1e61f62db7..fbd8da2830 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -19,6 +19,7 @@ import {
 } from "@/components/chart-table-preview";
 import { useChartStyles } from "@/components/chart-utils";
 import { ChartWithFilters } from "@/components/chart-with-filters";
+import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-filters";
 import Flex from "@/components/flex";
 import { HintBlue, HintRed, HintYellow } from "@/components/hint";
 import {
@@ -149,6 +150,7 @@ export const ChartPublished = (props: ChartPublishedProps) => {
             )}
           </Flex>
           <ChartTablePreviewProvider>
+            <DashboardInteractiveFilters />
             <ChartWrapper layoutType={state.layout.type}>
               <ChartPublishedInner
                 dataSource={dataSource}

From cf2950840092cc4862984e8be88dd3d1b8200df4 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 11 Jun 2024 11:35:24 +0200
Subject: [PATCH 3/4] feat: Add tooltip for tab

---
 app/components/chart-selection-tabs.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
index fbdf05f0bd..d89631d513 100644
--- a/app/components/chart-selection-tabs.tsx
+++ b/app/components/chart-selection-tabs.tsx
@@ -936,14 +936,16 @@ const TabContent = (props: TabContentProps) => {
       </Button>
 
       {label ? (
-        <Button
-          variant="text"
-          color="primary"
-          className={classes.label}
-          onClick={onSwitchClick}
-        >
-          {label}
-        </Button>
+        <Tooltip title={label} enterDelay={750}>
+          <Button
+            variant="text"
+            color="primary"
+            className={classes.label}
+            onClick={onSwitchClick}
+          >
+            {label}
+          </Button>
+        </Tooltip>
       ) : null}
       {editable && (
         <Button

From 3f554f162a2211d44f72c091834be71397952ee6 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 11 Jun 2024 11:35:40 +0200
Subject: [PATCH 4/4] feat: Add automatic title WIP

---
 app/components/chart-panel.tsx          | 45 +++++++++++++++--
 app/components/chart-selection-tabs.tsx | 10 +++-
 app/utils/title.spec.ts                 | 65 +++++++++++++++++++++++++
 app/utils/title.ts                      | 37 ++++++++++++++
 4 files changed, 152 insertions(+), 5 deletions(-)
 create mode 100644 app/utils/title.spec.ts
 create mode 100644 app/utils/title.ts

diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx
index f881440085..67d9474441 100644
--- a/app/components/chart-panel.tsx
+++ b/app/components/chart-panel.tsx
@@ -1,7 +1,8 @@
 import { Box, BoxProps, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
-import React, { HTMLProps, forwardRef } from "react";
+import keyBy from "lodash/keyBy";
+import React, { forwardRef, HTMLProps, useMemo } from "react";
 
 import ChartPanelLayoutCanvas, {
   chartPanelLayoutGridClasses,
@@ -12,7 +13,8 @@ import { ChartSelectionTabs } from "@/components/chart-selection-tabs";
 import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-filters";
 import { ChartConfig, Layout, LayoutDashboard } from "@/config-types";
 import { hasChartConfigs } from "@/configurator";
-import { useConfiguratorState } from "@/src";
+import { useDataCubesComponentsQuery } from "@/graphql/hooks";
+import { useConfiguratorState, useLocale } from "@/src";
 
 const useStyles = makeStyles((theme: Theme) => ({
   panelLayout: {
@@ -48,13 +50,50 @@ export const ChartWrapper = forwardRef<HTMLDivElement, ChartWrapperProps>(
   (props, ref) => {
     const { children, editing, layoutType, ...rest } = props;
     const classes = useStyles();
+    const [state] = useConfiguratorState(hasChartConfigs);
+    const dataSource = state.dataSource;
+    const locale = useLocale();
+    const commonQueryVariables = {
+      sourceType: dataSource.type,
+      sourceUrl: dataSource.url,
+      locale,
+    };
+
+    const componentIris = undefined;
+    const chartConfig = state.chartConfigs.find(
+      (x) => x.key === state.activeChartKey
+    );
+    const [{ data: components }] = useDataCubesComponentsQuery({
+      variables: {
+        ...commonQueryVariables,
+        cubeFilters:
+          chartConfig?.cubes.map((cube) => ({
+            iri: cube.iri,
+            componentIris,
+            filters: cube.filters,
+            joinBy: cube.joinBy,
+          })) ?? [],
+      },
+    });
+    const dimensionsByIri = useMemo(() => {
+      return keyBy(
+        [
+          ...(components?.dataCubesComponents.dimensions ?? []),
+          ...(components?.dataCubesComponents.measures ?? []),
+        ],
+        (x) => x.iri
+      );
+    }, [components?.dataCubesComponents]);
+
     return (
       <Box
         ref={ref}
         {...rest}
         className={clsx(classes.chartWrapper, props.className)}
       >
-        {(editing || layoutType === "tab") && <ChartSelectionTabs />}
+        {(editing || layoutType === "tab") && (
+          <ChartSelectionTabs dimensionsByIri={dimensionsByIri} />
+        )}
         <Box
           className={classes.chartWrapperInner}
           sx={{ minHeight: [150, 300, 500] }}
diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
index d89631d513..afd2741376 100644
--- a/app/components/chart-selection-tabs.tsx
+++ b/app/components/chart-selection-tabs.tsx
@@ -48,6 +48,7 @@ import {
 import { useSearchDatasetPanelStore } from "@/configurator/components/add-new-dataset-panel";
 import { ChartTypeSelector } from "@/configurator/components/chart-type-selector";
 import { getIconName } from "@/configurator/components/ui-helpers";
+import { Dimension, Measure } from "@/domain/data";
 import { useUserConfig } from "@/domain/user-configs";
 import { useFlag } from "@/flags";
 import { useDataCubesComponentsQuery } from "@/graphql/hooks";
@@ -56,6 +57,7 @@ import { defaultLocale, useLocale } from "@/locales";
 import { createConfig, updateConfig } from "@/utils/chart-config/api";
 import { createChartId } from "@/utils/create-chart-id";
 import { getRouterChartId } from "@/utils/router/helpers";
+import { generateChartTitle } from "@/utils/title";
 import { replaceLinks } from "@/utils/ui-strings";
 import useEvent from "@/utils/use-event";
 import { useMutate } from "@/utils/use-fetch-data";
@@ -102,7 +104,11 @@ const TabsStateProvider = (props: React.PropsWithChildren<{}>) => {
   );
 };
 
-export const ChartSelectionTabs = () => {
+export const ChartSelectionTabs = ({
+  dimensionsByIri,
+}: {
+  dimensionsByIri: Record<string, Dimension | Measure>;
+}) => {
   const [state] = useConfiguratorState(hasChartConfigs);
   const editable =
     isConfiguring(state) || isLayouting(state) || isPublishing(state);
@@ -123,7 +129,7 @@ export const ChartSelectionTabs = () => {
           ? d.meta.title[locale]
           : d.meta.title[defaultLocale] !== ""
             ? d.meta.title[defaultLocale]
-            : t({ id: "annotation.add.title" }),
+            : generateChartTitle(d, dimensionsByIri),
     };
   });
 
diff --git a/app/utils/title.spec.ts b/app/utils/title.spec.ts
new file mode 100644
index 0000000000..ef39871b3d
--- /dev/null
+++ b/app/utils/title.spec.ts
@@ -0,0 +1,65 @@
+import keyBy from "lodash/keyBy";
+
+import { ChartConfig } from "@/configurator";
+import { Dimension } from "@/domain/data";
+import { generateChartTitle } from "@/utils/title";
+
+const dimensionsByIri = keyBy(
+  [
+    {
+      iri: "emissions",
+      label: "Emissions of CO2",
+      __typename: "OrdinalDimension",
+    },
+    { iri: "emissions", label: "Year", __typename: "TemporalDimension" },
+    { iri: "gastype", label: "Type of Gas", __typename: "NominalDimension" },
+  ] as Dimension[],
+  (x) => x.iri
+);
+
+describe("generateChartTitle", () => {
+  it("should generate the correct title for a column chart", () => {
+    const columnChartConfig = {
+      chartType: "column",
+      fields: {
+        x: { componentIri: "year" },
+        y: { componentIri: "emissions" },
+      },
+    } as ChartConfig;
+    const expectedTitle = "Emissions of CO2 per Year";
+
+    const actualTitle = generateChartTitle(columnChartConfig, dimensionsByIri);
+
+    expect(actualTitle).toBe(expectedTitle);
+  });
+
+  it("should generate the correct title for a line chart", () => {
+    const lineChartConfig = {
+      chartType: "line",
+      fields: {
+        x: { componentIri: "year" },
+        y: { componentIri: "emissions" },
+      },
+    } as ChartConfig;
+    const expectedTitle = "Evolution of the Emissions of CO2";
+
+    const actualTitle = generateChartTitle(lineChartConfig, dimensionsByIri);
+
+    expect(actualTitle).toBe(expectedTitle);
+  });
+
+  it("should generate the correct title for an area chart", () => {
+    const areaChartConfig = {
+      chartType: "pie",
+      fields: {
+        y: { componentIri: "emissions" },
+        segment: { componentIri: "gastype" },
+      },
+    } as ChartConfig;
+    const expectedTitle = "Shares of Emissions of CO2 by Type of Gas";
+
+    const actualTitle = generateChartTitle(areaChartConfig, dimensionsByIri);
+
+    expect(actualTitle).toBe(expectedTitle);
+  });
+});
diff --git a/app/utils/title.ts b/app/utils/title.ts
new file mode 100644
index 0000000000..ff34bb225d
--- /dev/null
+++ b/app/utils/title.ts
@@ -0,0 +1,37 @@
+import { t } from "@lingui/macro";
+
+import { ChartConfig } from "@/config-types";
+import { Dimension, Measure } from "@/domain/data";
+
+export function generateChartTitle(
+  chartInfo: ChartConfig,
+  dimensionsByIri: Record<string, Dimension | Measure>
+): string {
+  const { chartType } = chartInfo;
+  const getLabel = (type: "x" | "y" | "segment") => {
+    const field = chartInfo.fields[type as keyof (typeof chartInfo)["fields"]];
+    // @ts-ignore
+    const iri = field?.componentIri;
+    const dimension = dimensionsByIri[iri];
+    return dimension?.label ?? "";
+  };
+
+  // prettier-ignore
+  const chartTitleLocales = {
+      column: t({ id: "columnChart", message: `${getLabel("y")} per ${getLabel("x")}` }),
+      line: t({ id: "lineChart", message: `Evolution of the ${getLabel("y")}` }),
+      area: t({ id: "areaChart", message: `Distribution of ${getLabel("y")} over ${getLabel("x")}` }),
+      areaSegmented: t({ id: `Shares of ${getLabel("y")} by ${getLabel("segment")}` }),
+      pie: t({ id: "pieChart", message: `${getLabel("y")} per ${getLabel("segment")}` }),
+      map: t({ id: "mapChart", message: `Geographical distribution of ${getLabel("y")}` }),
+      scatterplot: t({ id: "scatterplotChart", message: `${getLabel("y")} against ${getLabel("x")}` }),
+      table: t({ id: "tableChart", message: `Table` }),
+      comboLineSingle: t({ id: "comboLineSingleChart", message: `Combo line single chart` }),
+      comboLineDual: t({ id: "comboLineDuoChart", message: `Combo line dual chart` }),
+      comboLineColumn: t({ id: "comboLineSingleChart", message: `Combo line column chart` }),
+  };
+
+  const defaultChartTitle = `${chartType} Chart`;
+  const chartTitle = chartTitleLocales[chartType] || defaultChartTitle;
+  return chartTitle;
+}