feat: Add dashboard text blocks

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+<!--- Link this pull request to an issue (fixes or closes #issue_number) -->
+
+Closes #
+
+<!--- Describe the changes -->
+
+This PR...
+
+<!--- Test instructions -->
+
+## How to test
+
+1. Go to...
+
+<!--- Reproduction steps, in case of a bug -->
+
+---
+
+- [ ] Add a CHANGELOG entry

CHANGELOG.md

@@ -12,14 +12,16 @@ You can also check the
 # Unreleased
 
 - Features
-  - Implemented Content Security Policy (CSP)
+  - Added a new chart type - bar
   - It's now possible to export charts as images
-	- Added support for custom colors in single and multi-colored charts, enabling enhanced visual customization.
-	- Introduced a new Color Picker, offering greater flexibility and precision in chart color selection.
-  - Added Footer to the Profile Page
+  - Added footer to the profile page
+  - Added support for custom colors in single and multi-colored charts, enabling
+    enhanced visual customization
+  - Introduced a new color picker, offering greater flexibility and precision in
+    chart color selection
 - Fixes
-  - Addressed security flaw allowing the injection of arbitrary URLs
-    in the `sourceUrl` parameter in the GraphQL API
+  - Addressed security flaw allowing the injection of arbitrary URLs in the
+    `sourceUrl` parameter in the GraphQL API
   - Color mapping is now correctly kept up to date in case of editing an old
     chart and the cube has been updated in the meantime and contains new values
     in the color dimension
@@ -34,6 +36,9 @@ You can also check the
     inputs
   - Opening a temporal dimension with timezone in table chart configurator
     doesn't crash the application anymore
+  - Themes fetching is now done by using standard SPARQL iris (starting with
+    https://), so that it behaves consistently across different SPARQL database
+    engines
 - Styles
   - Updated dataset result borders to match the design
 - Maintenance
@@ -49,14 +54,14 @@ You can also check the
   - Removed unused dependencies and dead code
   - Updated several outdated packages
   - Added knip as a new CI task
+  - Implemented Content Security Policy (CSP)
 - Performance
   - Introduced sharding to improve performance of basic CI checks (unit tests,
     type checks, linting, knip)
 - Docs
   - Added auto-generated JSON Schema files for configurator state and chart
     config and improved preview charts via API documentation
 
-
 # [5.0.2] - 2024-11-28
 
 - Features

app/charts/index.ts

@@ -92,7 +92,7 @@ import {
 import { theme } from "@/themes/federal";
 import { bfs } from "@/utils/bfs";
 import { CHART_CONFIG_VERSION } from "@/utils/chart-config/constants";
-import { createChartId } from "@/utils/create-chart-id";
+import { createId } from "@/utils/create-id";
 import { isMultiHierarchyNode } from "@/utils/hierarchy";
 import { unreachableError } from "@/utils/unreachable";
 
@@ -374,7 +374,7 @@ export const getInitialConfig = (
     activeField: string | undefined;
   } => {
     return {
-      key: key ?? createChartId(),
+      key: key ?? createId(),
       version: CHART_CONFIG_VERSION,
       meta: meta ?? META,
       // Technically, we should scope filters per cube; but as we only set initial

app/components/action-elements-container.tsx

@@ -0,0 +1,23 @@
+import { Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import { ReactNode } from "react";
+
+const useStyles = makeStyles<Theme>((theme) => ({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    height: "fit-content",
+    marginTop: "-0.33rem",
+  },
+}));
+
+export const ActionElementsContainer = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const classes = useStyles();
+
+  return <div className={classes.root}>{children}</div>;
+};

app/components/add-button.tsx

@@ -0,0 +1,22 @@
+import { Button, ButtonProps } from "@mui/material";
+
+import { Icon } from "@/icons";
+
+export const AddButton = (props: ButtonProps) => {
+  const { sx, ...rest } = props;
+
+  return (
+    <Button
+      color="primary"
+      variant="contained"
+      startIcon={<Icon name="add" />}
+      sx={{
+        width: "fit-content",
+        ml: "0.5rem",
+        px: 3,
+        ...sx,
+      }}
+      {...rest}
+    />
+  );
+};

app/components/chart-panel-layout-grid.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import { fold } from "fp-ts/lib/Either";
 import { pipe } from "fp-ts/lib/function";
-import { useState } from "react";
 import { Layouts } from "react-grid-layout";
 
 import { ChartPanelLayoutTypeProps } from "@/components/chart-panel";
@@ -33,26 +32,25 @@ const decodeLayouts = (layouts: Layouts) => {
   );
 };
 
-const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
-  const { chartConfigs } = props;
+export const ChartPanelLayoutCanvas = ({
+  blocks,
+  renderBlock,
+  className,
+}: ChartPanelLayoutTypeProps) => {
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
-  const [layouts, setLayouts] = useState<Layouts>(() => {
-    assert(
-      state.layout.type === "dashboard" && state.layout.layout === "canvas",
-      "ChartPanelLayoutGrid should be rendered only for dashboard layout with canvas"
-    );
-
-    return state.layout.layouts;
-  });
-
+  const layout = state.layout;
+  assert(
+    layout.type === "dashboard" && layout.layout === "canvas",
+    "ChartPanelLayoutGrid should be rendered only for dashboard layout with canvas"
+  );
   const handleChangeLayouts = (layouts: Layouts) => {
-    const layout = state.layout;
     assert(
       layout.type === "dashboard" && layout.layout === "canvas",
       "ChartPanelLayoutGrid should be rendered only for dashboard layout with canvas"
     );
 
     const parsedLayouts = decodeLayouts(layouts);
+
     if (!parsedLayouts) {
       return;
     }
@@ -64,22 +62,19 @@ const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
         layouts: parsedLayouts,
       },
     });
-    setLayouts(layouts);
   };
 
   return (
     <ChartGridLayout
       key={state.state}
-      className={clsx(chartPanelLayoutGridClasses.root, props.className)}
-      layouts={layouts}
+      className={clsx(chartPanelLayoutGridClasses.root, className)}
+      layouts={layout.layouts}
       resize={state.state === "LAYOUTING"}
       draggableHandle={`.${chartPanelLayoutGridClasses.dragHandle}`}
-      onLayoutChange={(_l, allLayouts) => handleChangeLayouts(allLayouts)}
+      onLayoutChange={(_, allLayouts) => handleChangeLayouts(allLayouts)}
       breakpoints={FREE_CANVAS_BREAKPOINTS}
     >
-      {chartConfigs.map((chartConfig) => props.renderChart(chartConfig))}
+      {blocks.map(renderBlock)}
     </ChartGridLayout>
   );
 };
-
-export default ChartPanelLayoutCanvas;

app/components/chart-panel-layout-tall.tsx

@@ -1,20 +1,18 @@
 import { Box, useMediaQuery } from "@mui/material";
 import { useMemo } from "react";
 
+import { ChartPanelLayoutTypeProps } from "@/components/chart-panel";
 import classes from "@/components/chart-panel-layout-tall.module.css";
-import { ChartConfig } from "@/config-types";
+import { LayoutBlock } from "@/config-types";
 import { useTheme } from "@/themes";
 
-type ChartPanelLayoutTallProps = {
-  chartConfigs: ChartConfig[];
-  renderChart: (chartConfig: ChartConfig) => JSX.Element;
-};
-
-export const ChartPanelLayoutTall = (props: ChartPanelLayoutTallProps) => {
-  const { chartConfigs, renderChart } = props;
+export const ChartPanelLayoutTall = ({
+  blocks,
+  renderBlock,
+}: ChartPanelLayoutTypeProps) => {
   const rows = useMemo(() => {
-    return getChartPanelLayoutTallRows(chartConfigs, renderChart);
-  }, [chartConfigs, renderChart]);
+    return getChartPanelLayoutTallRows({ blocks, renderBlock });
+  }, [blocks, renderBlock]);
 
   return (
     <>
@@ -24,67 +22,59 @@ export const ChartPanelLayoutTall = (props: ChartPanelLayoutTallProps) => {
     </>
   );
 };
-type ChartPanelLayoutTallRowProps = {
-  row: ChartPanelLayoutTallRow;
-};
 
-const ChartPanelLayoutTallRow = (props: ChartPanelLayoutTallRowProps) => {
-  const { row } = props;
+const ChartPanelLayoutTallRow = ({ row }: { row: ChartPanelLayoutTallRow }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   switch (row.type) {
     case "wide":
-      return row.renderChart(row.chartConfig);
+      return row.renderBlock(row.block);
     case "narrow":
       if (isMobile) {
-        return <>{row.chartConfigs.map(row.renderChart)}</>;
+        return <>{row.blocks.map(row.renderBlock)}</>;
       }
 
       return (
-        <Box className={classes.root}>
-          {row.chartConfigs.map(row.renderChart)}
-        </Box>
+        <Box className={classes.root}>{row.blocks.map(row.renderBlock)}</Box>
       );
   }
 };
 type ChartPanelLayoutTallRow = {
-  renderChart: (chartConfig: ChartConfig) => JSX.Element;
+  renderBlock: (block: LayoutBlock) => JSX.Element;
 } & (
   | {
       type: "wide";
-      chartConfig: ChartConfig;
+      block: LayoutBlock;
     }
   | {
       type: "narrow";
-      chartConfigs: [ChartConfig] | [ChartConfig, ChartConfig];
+      blocks: [LayoutBlock] | [LayoutBlock, LayoutBlock];
     }
 );
 
-const getChartPanelLayoutTallRows = (
-  chartConfigs: ChartConfig[],
-  renderChart: (chartConfig: ChartConfig) => JSX.Element
-): ChartPanelLayoutTallRow[] => {
+const getChartPanelLayoutTallRows = ({
+  blocks,
+  renderBlock,
+}: ChartPanelLayoutTypeProps): ChartPanelLayoutTallRow[] => {
   const rows: ChartPanelLayoutTallRow[] = [];
 
-  for (let i = 0; i < chartConfigs.length; i += 1) {
+  for (let i = 0; i < blocks.length; i += 1) {
     if (i % 3 === 0) {
       rows.push({
         type: "wide",
-        chartConfig: chartConfigs[i],
-        renderChart,
+        block: blocks[i],
+        renderBlock,
       });
     }
 
     if (i % 3 === 1) {
-      const currentConfig = chartConfigs[i];
-      const nextConfig = chartConfigs[i + 1];
+      const block = blocks[i];
+      const nextBlock = blocks[i + 1];
       rows.push({
         type: "narrow",
-        chartConfigs: nextConfig
-          ? [currentConfig, nextConfig]
-          : [currentConfig],
-        renderChart,
+        blocks: nextBlock ? [block, nextBlock] : [block],
+        renderBlock,
       });
     }
   }

app/components/chart-panel-layout-vertical.tsx

@@ -1,6 +1,8 @@
 import { ChartPanelLayoutTypeProps } from "@/components/chart-panel";
 
-export const ChartPanelLayoutVertical = (props: ChartPanelLayoutTypeProps) => {
-  const { chartConfigs, renderChart } = props;
-  return <>{chartConfigs.map(renderChart)}</>;
+export const ChartPanelLayoutVertical = ({
+  blocks,
+  renderBlock,
+}: ChartPanelLayoutTypeProps) => {
+  return <>{blocks.map(renderBlock)}</>;
 };