feat: Add dashboard text blocks and Markdown editor

.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,6 +12,8 @@ You can also check the
 # Unreleased
 
 - Features
+  - Added a way to add text objects to dashboard layouts
+  - Added Markdown support in chart titles and descriptions
   - Centered x-axis labels
   - Added y-axis labels
   - Added a new option to the vertical axis on the line chart, allowing users to
@@ -46,6 +48,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
@@ -62,6 +67,7 @@ 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)
@@ -560,7 +566,7 @@ introduced since v3.0.0 🎉
   - Implemented initial version of merging the cubes (not yet exposed through
     UI)
 - Fixes
-  - Conslidated behavior of setting initial filters (top-most hierarchy value)
+  - Consolidated behavior of setting initial filters (top-most hierarchy value)
     when filter was not present and multi-filter was removed
   - Fixed switching between segmentation dimensions in column charts
   - Added UTF-8 formatting to CSV and XLSX files (data download)
@@ -574,7 +580,7 @@ introduced since v3.0.0 🎉
   - We now only fetch hierarchies defined in cube's shape
   - Hierarchy names are now correctly retrieved
 - Performance
-  - We no longer fetch shape when initalizing the cube, as we might need to
+  - We no longer fetch shape when initializing the cube, as we might need to
     re-fetch it again if a newer cube is required
   - Vastly improved performance of dataset preview by using a new version of
     `cube-view-query` library (`View.preview`)
@@ -1070,7 +1076,7 @@ Note: We will try in the future to better follow semantic versioning.
 
 ## [3.7.4] - 2022-05-31
 
-- Do not show "Run SPARQL query" button if SPARL_EDITOR variable not set
+- Do not show "Run SPARQL query" button if SPARQL_EDITOR variable not set
 - Add link top opendata.swiss when the cube is published there (chart
   footnotes + chart preview info panel)
 - Repair homepage examples on test
@@ -1088,7 +1094,7 @@ Note: We will try in the future to better follow semantic versioning.
 - Maps: Use neutral map style
 - Interactive filters: time brush is more stable
 - Tables: Column names contain unit if its there by @ptbrowne in #552
-- Tables: Support for monthtly period formatting
+- Tables: Support for monthly period formatting
 - Tables: Bar chart in cells are fixed
 - Navigation: Back button in editor 1st screen brings back to dataset preview
 - Add status page link in the footer
@@ -1105,7 +1111,7 @@ Note: We will try in the future to better follow semantic versioning.
 - Only the top 7 nav items are shown in the search nav bar (design alignment), a
   button is there to display more
 - Added the footer in the search page
-- Maps chloropleth are shown under map labels. Maps symbols are shown over most
+- Maps choropleth are shown under map labels. Maps symbols are shown over most
   map features. When zooming via the buttons, we now have a smooth transition
 - Removed chart selection step; selection of a chart type can now be done at any
   point when creating a chart (added a new chart selection tabs UI)
@@ -1246,7 +1252,7 @@ not shown at first but can be added via a menu.
   [#265](https://github.com/visualize-admin/visualization-tool/pull/265)
 - _beta_ Hierarchical filters are available behind a flag on the "red list"
   dataset [#233](https://github.com/visualize-admin/visualization-tool/pull/233)
-- 🐛 Links from openswissdata should work correctly
+- 🐛 Links from OpenDataSwiss should work correctly
   [#303](https://github.com/visualize-admin/visualization-tool/pull/303)
   [#314](https://github.com/visualize-admin/visualization-tool/pull/314)
 

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