feat: Add automatic title WIP

Author: ptbrowne

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,49 @@ export const ChartWrapper = forwardRef<HTMLDivElement, ChartWrapperProps>(
   (props, ref) => {
     const { children, editing, layoutType, ...rest } = props;
     const classes = useStyles();
+    const [state, dispatch] = 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] }}

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),
     };
   });
 

app/utils/title.spec.ts

@@ -0,0 +1,51 @@
+// Example usage:
+
+import { ChartInfo, generateChartTitle } from "@/utils/title";
+
+describe("generateChartTitle", () => {
+  it("should generate the correct title for a column chart", () => {
+    const columnChartInfo: ChartInfo = {
+      chartType: "column",
+      dimensions: [
+        { name: "Emissions of CO2", type: "OrdinalDimension" },
+        { name: "Year", type: "TemporalDimension" },
+      ],
+    };
+    const expectedTitle = "Emissions of CO2 per Year";
+
+    const actualTitle = generateChartTitle(columnChartInfo);
+
+    expect(actualTitle).toBe(expectedTitle);
+  });
+
+  it("should generate the correct title for a line chart", () => {
+    const lineChartInfo: ChartInfo = {
+      chartType: "line",
+      dimensions: [
+        { name: "Emissions of CO2", type: "OrdinalDimension" },
+        { name: "Year", type: "TemporalDimension" },
+      ],
+    };
+    const expectedTitle = "Evolution of the Emissions of CO2";
+
+    const actualTitle = generateChartTitle(lineChartInfo);
+
+    expect(actualTitle).toBe(expectedTitle);
+  });
+
+  it("should generate the correct title for an area chart", () => {
+    const areaChartInfo: ChartInfo = {
+      chartType: "area",
+      dimensions: [
+        { name: "Emissions of CO2", type: "OrdinalDimension" },
+        { name: "Year", type: "TemporalDimension" },
+        { name: "Type of Gas", type: "NominalDimension" },
+      ],
+    };
+    const expectedTitle = "Shares of Emissions of CO2 by Type of Gas";
+
+    const actualTitle = generateChartTitle(areaChartInfo);
+
+    expect(actualTitle).toBe(expectedTitle);
+  });
+});

app/utils/title.ts

@@ -0,0 +1,58 @@
+import { getChartSpec } from "@/charts/chart-config-ui-options";
+import { ChartConfig, ChartType, DimensionType } from "@/config-types";
+import { Measure } from "@/domain/data";
+import { truthy } from "@/domain/types";
+
+interface Dimension {
+  name: string;
+  type: DimensionType;
+}
+
+export interface ChartInfo {
+  chartType: ChartType;
+  dimensions: Dimension[];
+}
+
+export function generateChartTitle(
+  chartInfo: ChartConfig,
+  dimensionsByIri: Record<string, Dimension | Measure>
+): string {
+  const chartSpec = getChartSpec(chartInfo);
+  console.log({ chartSpec });
+  const dimensions = chartSpec.encodings
+    .map((encoding) => {
+      const iri =
+        chartInfo.fields[
+          encoding.field as unknown as (typeof chartInfo)["fields"]
+        ]?.componentIri;
+      console.log({ iri });
+      return dimensionsByIri[iri];
+    })
+    .filter(truthy);
+  const { chartType } = chartInfo;
+  const getLabel = (type: "x" | "y" | "segment") => {
+    const iri = chartInfo.fields[type].componentIri;
+    console.log({ chartInfo, fields: chartInfo.fields });
+    const dimension = dimensionsByIri[iri];
+    return dimension?.label;
+  };
+
+  switch (chartType) {
+    case "column":
+      return `${getLabel("y")} per ${getLabel("x")}`;
+    case "line":
+      return `Evolution of the ${getLabel("y")}`;
+    case "area":
+      if (chartInfo.fields.segment) {
+        return `Shares of ${getLabel("y")} by ${getLabel("segment")}`;
+      } else {
+        return `Distribution of ${getLabel("y")} over ${getLabel("x")}`;
+      }
+    case "pie":
+      return `${getLabel("y")} per ${getLabel("segment")}`;
+    case "map":
+      return `Geographical distribution of ${getLabel("y")}`;
+    default:
+      return `${chartType} Chart`;
+  }
+}