From 49407e668fb3db65b719465a5bd7fed05cbebc20 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 11:40:38 +0200
Subject: [PATCH 01/25] style: Profile table adjustments

---
 app/login/components/login-menu.tsx     |  2 +-
 app/login/components/profile-tables.tsx | 33 +++++++++++++++++--------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/login/components/login-menu.tsx b/app/login/components/login-menu.tsx
index 84a4b0537..191e47d62 100644
--- a/app/login/components/login-menu.tsx
+++ b/app/login/components/login-menu.tsx
@@ -13,7 +13,7 @@ export const LoginMenu = () => {
         <Typography variant="body2">
           <Link href="/profile" legacyBehavior>
             {user.name}
-          </Link>{" "}
+          </Link>
         </Typography>
       ) : (
         <Button
diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 3f2dcb96f..8a2c77409 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   Link,
+  Skeleton,
   Table,
   TableBody,
   TableCell,
@@ -63,7 +64,7 @@ type RowProps = {
 const Row = (props: RowProps) => {
   const { config } = props;
   const locale = useLocale();
-  const [{ data }] = useDataCubeMetadataQuery({
+  const [{ data, fetching }] = useDataCubeMetadataQuery({
     variables: {
       iri: config.data.dataSet,
       sourceType: config.data.dataSource.type,
@@ -72,18 +73,30 @@ const Row = (props: RowProps) => {
     },
   });
 
-  console.log(config);
-
   return (
     <TableRow>
-      <TableCell>
-        {config.data.chartConfigs.length > 1
-          ? "multi"
-          : config.data.chartConfigs[0].chartType}
+      <TableCell width={80}>
+        <Typography variant="body2">
+          {config.data.chartConfigs.length > 1
+            ? "multi"
+            : config.data.chartConfigs[0].chartType}
+        </Typography>
+      </TableCell>
+      <TableCell width="auto">
+        <Typography variant="body2">
+          {config.data.meta.title[locale]}
+        </Typography>
+      </TableCell>
+      <TableCell width="40%">
+        {fetching ? (
+          <Skeleton variant="rectangular" width="100%" height={10} />
+        ) : (
+          <Typography variant="body2">
+            {data?.dataCubeByIri?.title ?? ""}
+          </Typography>
+        )}
       </TableCell>
-      <TableCell>{config.data.meta.title[locale]}</TableCell>
-      <TableCell>{data?.dataCubeByIri?.title ?? ""}</TableCell>
-      <TableCell>
+      <TableCell width={80}>
         <Box sx={{ display: "flex", gap: 2 }}>
           <NextLink href={`/v/${config.key}`} passHref legacyBehavior>
             <Link target="_blank">

From e4ba16ef714fd223f18327c67ab2e05da97f564b Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 11:45:56 +0200
Subject: [PATCH 02/25] feat: Add published date to profile table

---
 app/login/components/profile-tables.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 8a2c77409..fabef241d 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -36,6 +36,7 @@ export const ProfileVisualizationsTable = (
             <TableCell>Chart type</TableCell>
             <TableCell>Name</TableCell>
             <TableCell>Dataset</TableCell>
+            <TableCell>Published</TableCell>
             <TableCell>Actions</TableCell>
           </TableHead>
           <TableBody>
@@ -96,6 +97,9 @@ const Row = (props: RowProps) => {
           </Typography>
         )}
       </TableCell>
+      <TableCell width={120}>
+        {config.created_at.toLocaleDateString("de")}
+      </TableCell>
       <TableCell width={80}>
         <Box sx={{ display: "flex", gap: 2 }}>
           <NextLink href={`/v/${config.key}`} passHref legacyBehavior>

From 4fe11508f6d5ece5eb18eeb285ebfbd7eae315f3 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 12:31:35 +0200
Subject: [PATCH 03/25] feat: Add profile table Actions tooltip

---
 app/login/components/profile-tables.tsx | 104 ++++++++++++++++++------
 1 file changed, 81 insertions(+), 23 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index fabef241d..7d3ceba67 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -1,5 +1,7 @@
 import {
   Box,
+  ClickAwayListener,
+  IconButton,
   Link,
   Skeleton,
   Table,
@@ -7,13 +9,16 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  Tooltip,
   Typography,
 } from "@mui/material";
 import NextLink from "next/link";
+import React from "react";
 
+import useDisclosure from "@/components/use-disclosure";
 import { ParsedConfig } from "@/db/config";
 import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
-import { Icon } from "@/icons";
+import { Icon, IconName } from "@/icons";
 import { useRootStyles } from "@/login/utils";
 import { useLocale } from "@/src";
 
@@ -33,11 +38,11 @@ export const ProfileVisualizationsTable = (
       {userConfigs.length > 0 ? (
         <Table>
           <TableHead>
-            <TableCell>Chart type</TableCell>
+            <TableCell>Type</TableCell>
             <TableCell>Name</TableCell>
             <TableCell>Dataset</TableCell>
             <TableCell>Published</TableCell>
-            <TableCell>Actions</TableCell>
+            <TableCell align="right">Actions</TableCell>
           </TableHead>
           <TableBody>
             {userConfigs.map((d) => (
@@ -75,7 +80,7 @@ const Row = (props: RowProps) => {
   });
 
   return (
-    <TableRow>
+    <TableRow sx={{ verticalAlign: "middle", height: 64 }}>
       <TableCell width={80}>
         <Typography variant="body2">
           {config.data.chartConfigs.length > 1
@@ -90,7 +95,7 @@ const Row = (props: RowProps) => {
       </TableCell>
       <TableCell width="40%">
         {fetching ? (
-          <Skeleton variant="rectangular" width="100%" height={10} />
+          <Skeleton width="50%" height={32} />
         ) : (
           <Typography variant="body2">
             {data?.dataCubeByIri?.title ?? ""}
@@ -98,26 +103,79 @@ const Row = (props: RowProps) => {
         )}
       </TableCell>
       <TableCell width={120}>
-        {config.created_at.toLocaleDateString("de")}
+        <Typography variant="body2">
+          {config.created_at.toLocaleDateString("de")}
+        </Typography>
       </TableCell>
-      <TableCell width={80}>
-        <Box sx={{ display: "flex", gap: 2 }}>
-          <NextLink href={`/v/${config.key}`} passHref legacyBehavior>
-            <Link target="_blank">
-              <Icon name="linkExternal" size={14} />
-            </Link>
-          </NextLink>
-          <NextLink
-            href={`/create/new?edit=${config.key}`}
-            passHref
-            legacyBehavior
-          >
-            <Link target="_blank">
-              <Icon name="edit" size={14} />
-            </Link>
-          </NextLink>
-        </Box>
+      <TableCell width={80} align="right">
+        <Actions configKey={config.key} />
       </TableCell>
     </TableRow>
   );
 };
+
+type ActionsProps = {
+  configKey: string;
+};
+
+const Actions = (props: ActionsProps) => {
+  const { configKey } = props;
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const { isOpen, open, close } = useDisclosure();
+
+  return (
+    <ClickAwayListener onClickAway={close}>
+      <Tooltip
+        arrow
+        open={isOpen}
+        title={
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+            <ActionsLink
+              href={`/v/${configKey}`}
+              label="Open"
+              iconName="linkExternal"
+            />
+            <ActionsLink
+              href={`/create/new?edit=${configKey}`}
+              label="Edit"
+              iconName="edit"
+            />
+          </Box>
+        }
+        sx={{ p: 2 }}
+        componentsProps={{ tooltip: { sx: { p: 3, pb: 2 } } }}
+      >
+        <IconButton ref={buttonRef} onClick={isOpen ? close : open}>
+          <Icon name="more" size={16} />
+        </IconButton>
+      </Tooltip>
+    </ClickAwayListener>
+  );
+};
+
+type ActionsLinkProps = {
+  href: string;
+  label: string;
+  iconName: IconName;
+};
+
+const ActionsLink = (props: ActionsLinkProps) => {
+  const { href, label, iconName } = props;
+
+  return (
+    <NextLink href={href} passHref legacyBehavior>
+      <Link
+        target="_blank"
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          color: "primary.main",
+        }}
+      >
+        <Icon name={iconName} size={16} />
+        <Typography variant="body2">{label}</Typography>
+      </Link>
+    </NextLink>
+  );
+};

From 0f6f81177b6d6da31f93a430b0af7e48809c5e3b Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 12:35:42 +0200
Subject: [PATCH 04/25] feat: Add link to dataset title in profile table

---
 app/login/components/profile-tables.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 7d3ceba67..763aa3039 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -17,6 +17,7 @@ import React from "react";
 
 import useDisclosure from "@/components/use-disclosure";
 import { ParsedConfig } from "@/db/config";
+import { sourceToLabel } from "@/domain/datasource";
 import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
 import { Icon, IconName } from "@/icons";
 import { useRootStyles } from "@/login/utils";
@@ -97,9 +98,19 @@ const Row = (props: RowProps) => {
         {fetching ? (
           <Skeleton width="50%" height={32} />
         ) : (
-          <Typography variant="body2">
-            {data?.dataCubeByIri?.title ?? ""}
-          </Typography>
+          <NextLink
+            href={`/browse?dataset=${
+              config.data.dataSet
+            }&dataSource=${sourceToLabel(config.data.dataSource)}`}
+            passHref
+            legacyBehavior
+          >
+            <Link target="_blank" color="primary">
+              <Typography variant="body2">
+                {data?.dataCubeByIri?.title ?? ""}
+              </Typography>
+            </Link>
+          </NextLink>
         )}
       </TableCell>
       <TableCell width={120}>

From 40d9a1c66e074c6234f0b09ff11780d2384f8072 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 12:47:25 +0200
Subject: [PATCH 05/25] style: Update style of user name

---
 app/login/components/login-menu.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/login/components/login-menu.tsx b/app/login/components/login-menu.tsx
index 191e47d62..28b883f2a 100644
--- a/app/login/components/login-menu.tsx
+++ b/app/login/components/login-menu.tsx
@@ -1,6 +1,6 @@
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Link, Typography } from "@mui/material";
 import { signIn } from "next-auth/react";
-import Link from "next/link";
+import NextLink from "next/link";
 
 import { useUser } from "@/login/utils";
 
@@ -11,9 +11,11 @@ export const LoginMenu = () => {
     <Box sx={{ alignItems: "center", display: "flex" }}>
       {user ? (
         <Typography variant="body2">
-          <Link href="/profile" legacyBehavior>
-            {user.name}
-          </Link>
+          <NextLink href="/profile" passHref legacyBehavior>
+            <Link sx={{ textDecoration: "none", color: "primary.main" }}>
+              {user.name}
+            </Link>
+          </NextLink>
         </Typography>
       ) : (
         <Button

From 2d079e3a3cc43cfdf62b8f1b29722fc9d59b0470 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 13:21:38 +0200
Subject: [PATCH 06/25] refactor: Share componentIris at a higher level

...and include combo component iris when during the extraction.
---
 app/browse/datatable.tsx                     |  4 +--
 app/charts/area/chart-area.tsx               |  8 ++---
 app/charts/column/chart-column.tsx           |  8 ++---
 app/charts/combo/chart-combo-line-column.tsx |  8 ++---
 app/charts/combo/chart-combo-line-dual.tsx   |  8 ++---
 app/charts/combo/chart-combo-line-single.tsx |  8 ++---
 app/charts/line/chart-lines.tsx              |  8 ++---
 app/charts/map/chart-map.tsx                 |  8 ++---
 app/charts/pie/chart-pie.tsx                 | 11 ++-----
 app/charts/scatterplot/chart-scatterplot.tsx | 11 ++-----
 app/charts/shared/chart-helpers.spec.tsx     |  6 ++--
 app/charts/shared/chart-helpers.tsx          | 32 +++++++++++++++++++-
 app/charts/table/chart-table.tsx             |  8 ++---
 app/components/chart-footnotes.tsx           |  4 +--
 app/components/chart-preview.tsx             |  2 +-
 app/components/chart-published.tsx           | 12 ++++++--
 app/components/chart-with-filters.tsx        |  8 ++---
 17 files changed, 72 insertions(+), 82 deletions(-)

diff --git a/app/browse/datatable.tsx b/app/browse/datatable.tsx
index 133e31c72..2f73b8950 100644
--- a/app/browse/datatable.tsx
+++ b/app/browse/datatable.tsx
@@ -15,7 +15,7 @@ import { ascending, descending } from "d3";
 import { useMemo, useRef, useState } from "react";
 
 import {
-  extractComponentIris,
+  extractChartConfigComponentIris,
   useQueryFilters,
 } from "@/charts/shared/chart-helpers";
 import { Loading } from "@/components/hint";
@@ -246,7 +246,7 @@ export const DataSetTable = ({
   sx?: SxProps<Theme>;
 }) => {
   const locale = useLocale();
-  const componentIris = extractComponentIris(chartConfig);
+  const componentIris = extractChartConfigComponentIris(chartConfig);
   const filters = useQueryFilters({ chartConfig });
   const commonQueryVariables = {
     iri: dataSetIri,
diff --git a/app/charts/area/chart-area.tsx b/app/charts/area/chart-area.tsx
index 2fb42778c..ed602d6e9 100644
--- a/app/charts/area/chart-area.tsx
+++ b/app/charts/area/chart-area.tsx
@@ -6,7 +6,6 @@ import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
 import { BrushTime } from "@/charts/shared/brush";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -31,18 +30,15 @@ export const ChartAreasVisualization = ({
   dataSource,
   chartConfig,
   queryFilters,
-  published,
+  componentIris,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: AreaConfig;
   queryFilters: QueryFilters;
-  published: boolean;
+  componentIris: string[] | undefined;
 }) => {
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
index 0c6b06e95..d815dfab4 100644
--- a/app/charts/column/chart-column.tsx
+++ b/app/charts/column/chart-column.tsx
@@ -17,7 +17,6 @@ import {
   AxisWidthBandDomain,
 } from "@/charts/shared/axis-width-band";
 import { BrushTime } from "@/charts/shared/brush";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -39,20 +38,17 @@ import { ChartProps } from "../shared/ChartProps";
 export const ChartColumnsVisualization = ({
   dataSetIri,
   dataSource,
+  componentIris,
   chartConfig,
   queryFilters,
-  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: ColumnConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 }) => {
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
diff --git a/app/charts/combo/chart-combo-line-column.tsx b/app/charts/combo/chart-combo-line-column.tsx
index 15349658c..4c24c7c96 100644
--- a/app/charts/combo/chart-combo-line-column.tsx
+++ b/app/charts/combo/chart-combo-line-column.tsx
@@ -7,7 +7,6 @@ import { ComboLineColumn } from "@/charts/combo/combo-line-column";
 import { ComboLineColumnChart } from "@/charts/combo/combo-line-column-state";
 import { AxisWidthBand } from "@/charts/shared/axis-width-band";
 import { BrushTime } from "@/charts/shared/brush";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
 import { Ruler } from "@/charts/shared/interaction/ruler";
@@ -29,20 +28,17 @@ import { ChartProps } from "../shared/ChartProps";
 type ChartComboLineColumnVisualizationProps = {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: ComboLineColumnConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 };
 
 export const ChartComboLineColumnVisualization = (
   props: ChartComboLineColumnVisualizationProps
 ) => {
-  const { dataSetIri, dataSource, chartConfig, queryFilters, published } =
+  const { dataSetIri, dataSource, componentIris, chartConfig, queryFilters } =
     props;
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
diff --git a/app/charts/combo/chart-combo-line-dual.tsx b/app/charts/combo/chart-combo-line-dual.tsx
index d24eceab6..7023c41c2 100644
--- a/app/charts/combo/chart-combo-line-dual.tsx
+++ b/app/charts/combo/chart-combo-line-dual.tsx
@@ -6,7 +6,6 @@ import { ComboLineDual } from "@/charts/combo/combo-line-dual";
 import { ComboLineDualChart } from "@/charts/combo/combo-line-dual-state";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
 import { BrushTime } from "@/charts/shared/brush";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
 import { Ruler } from "@/charts/shared/interaction/ruler";
@@ -25,20 +24,17 @@ import { ChartProps } from "../shared/ChartProps";
 type ChartComboLineDualVisualizationProps = {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: ComboLineDualConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 };
 
 export const ChartComboLineDualVisualization = (
   props: ChartComboLineDualVisualizationProps
 ) => {
-  const { dataSetIri, dataSource, chartConfig, queryFilters, published } =
+  const { dataSetIri, dataSource, componentIris, chartConfig, queryFilters } =
     props;
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
diff --git a/app/charts/combo/chart-combo-line-single.tsx b/app/charts/combo/chart-combo-line-single.tsx
index 4697b63c4..af763b7d0 100644
--- a/app/charts/combo/chart-combo-line-single.tsx
+++ b/app/charts/combo/chart-combo-line-single.tsx
@@ -6,7 +6,6 @@ import { ComboLineSingleChart } from "@/charts/combo/combo-line-single-state";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
 import { BrushTime } from "@/charts/shared/brush";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -34,20 +33,17 @@ import { ChartProps } from "../shared/ChartProps";
 type ChartComboLineSingleVisualizationProps = {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: ComboLineSingleConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 };
 
 export const ChartComboLineSingleVisualization = (
   props: ChartComboLineSingleVisualizationProps
 ) => {
-  const { dataSetIri, dataSource, chartConfig, queryFilters, published } =
+  const { dataSetIri, dataSource, componentIris, chartConfig, queryFilters } =
     props;
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
diff --git a/app/charts/line/chart-lines.tsx b/app/charts/line/chart-lines.tsx
index 4bed41549..65d7d3531 100644
--- a/app/charts/line/chart-lines.tsx
+++ b/app/charts/line/chart-lines.tsx
@@ -6,7 +6,6 @@ import { LineChart } from "@/charts/line/lines-state";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
 import { BrushTime } from "@/charts/shared/brush";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -30,20 +29,17 @@ import { ChartProps } from "../shared/ChartProps";
 export const ChartLinesVisualization = ({
   dataSetIri,
   dataSource,
+  componentIris,
   chartConfig,
   queryFilters,
-  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: LineConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 }) => {
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
index bd1a17b6c..db0e2cd46 100644
--- a/app/charts/map/chart-map.tsx
+++ b/app/charts/map/chart-map.tsx
@@ -5,7 +5,6 @@ import { MapComponent } from "@/charts/map/map";
 import { MapLegend } from "@/charts/map/map-legend";
 import { MapChart } from "@/charts/map/map-state";
 import { MapTooltip } from "@/charts/map/map-tooltip";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -29,15 +28,15 @@ import { ChartProps } from "../shared/ChartProps";
 export const ChartMapVisualization = ({
   dataSetIri,
   dataSource,
+  componentIris,
   chartConfig,
   queryFilters,
-  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: MapConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 }) => {
   const locale = useLocale();
   const areaDimensionIri = chartConfig.fields.areaLayer?.componentIri || "";
@@ -48,9 +47,6 @@ export const ChartMapVisualization = ({
     sourceUrl: dataSource.url,
     locale,
   };
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: commonQueryVariables,
   });
diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
index 7d0b62a24..0b58e857f 100644
--- a/app/charts/pie/chart-pie.tsx
+++ b/app/charts/pie/chart-pie.tsx
@@ -3,7 +3,6 @@ import { memo } from "react";
 import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import { Pie } from "@/charts/pie/pie";
 import { PieChart } from "@/charts/pie/pie-state";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -26,20 +25,17 @@ import { ChartProps } from "../shared/ChartProps";
 export const ChartPieVisualization = ({
   dataSetIri,
   dataSource,
+  componentIris,
   chartConfig,
   queryFilters,
-  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: PieConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 }) => {
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
@@ -70,9 +66,6 @@ export const ChartPieVisualization = ({
       observationsQuery={observationsQuery}
       chartConfig={chartConfig}
       Component={ChartPie}
-      ComponentProps={{
-        published,
-      }}
     />
   );
 };
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
index 222d66881..603d646a4 100644
--- a/app/charts/scatterplot/chart-scatterplot.tsx
+++ b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -11,7 +11,6 @@ import {
   AxisWidthLinear,
   AxisWidthLinearDomain,
 } from "@/charts/shared/axis-width-linear";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -34,20 +33,17 @@ import { ChartProps } from "../shared/ChartProps";
 export const ChartScatterplotVisualization = ({
   dataSetIri,
   dataSource,
+  componentIris,
   chartConfig,
   queryFilters,
-  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: ScatterPlotConfig;
   queryFilters: QueryFilters;
-  published: boolean;
 }) => {
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
@@ -77,9 +73,6 @@ export const ChartScatterplotVisualization = ({
       componentsQuery={componentsQuery}
       observationsQuery={observationsQuery}
       Component={ChartScatterplot}
-      ComponentProps={{
-        published,
-      }}
       chartConfig={chartConfig}
     />
   );
diff --git a/app/charts/shared/chart-helpers.spec.tsx b/app/charts/shared/chart-helpers.spec.tsx
index 2e69f4a37..6e5887a1f 100644
--- a/app/charts/shared/chart-helpers.spec.tsx
+++ b/app/charts/shared/chart-helpers.spec.tsx
@@ -2,7 +2,7 @@ import { InternMap } from "d3";
 import merge from "lodash/merge";
 
 import {
-  extractComponentIris,
+  extractChartConfigComponentIris,
   getWideData,
   prepareQueryFilters,
 } from "@/charts/shared/chart-helpers";
@@ -156,7 +156,7 @@ describe("getChartConfigComponentIris", () => {
   const mapConfig = map1Fixture.data.chartConfig as unknown as MapConfig;
 
   it("should return correct componentIris for line chart", () => {
-    const componentsIris = extractComponentIris(lineConfig);
+    const componentsIris = extractChartConfigComponentIris(lineConfig);
     expect(componentsIris).toEqual([
       "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/0",
       "http://environment.ld.admin.ch/foen/px/0703010000_105/measure/0",
@@ -168,7 +168,7 @@ describe("getChartConfigComponentIris", () => {
   });
 
   it("should return correct componentIris for map chart", () => {
-    const componentsIris = extractComponentIris(mapConfig);
+    const componentsIris = extractChartConfigComponentIris(mapConfig);
     expect(componentsIris).toEqual([
       "https://environment.ld.admin.ch/foen/nfi/unitOfReference",
       "https://environment.ld.admin.ch/foen/nfi/Topic/3r",
diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index 5a39cc3c4..18f5fe1d0 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -23,8 +23,10 @@ import {
 } from "@/config-types";
 import {
   CategoricalColorField,
+  ComboChartConfig,
   GenericField,
   NumericalColorField,
+  isComboChartConfig,
 } from "@/configurator";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
@@ -118,12 +120,40 @@ const getMapChartConfigAdditionalFields = ({ fields }: MapConfig) => {
   return additionalFields;
 };
 
-export const extractComponentIris = (chartConfig: ChartConfig) => {
+const getComboChartConfigAdditionalFields = (chartConfig: ComboChartConfig) => {
+  switch (chartConfig.chartType) {
+    case "comboLineSingle":
+      return chartConfig.fields.y.componentIris;
+    case "comboLineDual":
+      return [
+        chartConfig.fields.y.leftAxisComponentIri,
+        chartConfig.fields.y.rightAxisComponentIri,
+      ];
+    case "comboLineColumn":
+      return [
+        chartConfig.fields.y.columnComponentIri,
+        chartConfig.fields.y.lineComponentIri,
+      ];
+    default:
+      const _exhaustiveCheck: never = chartConfig;
+      return _exhaustiveCheck;
+  }
+};
+
+export const extractChartConfigsComponentIris = (
+  chartConfigs: ChartConfig[]
+) => {
+  return uniq(chartConfigs.map(extractChartConfigComponentIris).flat());
+};
+
+export const extractChartConfigComponentIris = (chartConfig: ChartConfig) => {
   const { fields, interactiveFiltersConfig: IFConfig } = chartConfig;
   const fieldIris = Object.values(fields).map((d) => d.componentIri);
   const additionalFieldIris =
     chartConfig.chartType === "map"
       ? getMapChartConfigAdditionalFields(chartConfig)
+      : isComboChartConfig(chartConfig)
+      ? getComboChartConfigAdditionalFields(chartConfig)
       : [];
   const filterIris = getChartConfigFilterComponentIris(chartConfig);
   const IFKeys = IFConfig ? (Object.keys(IFConfig) as IFKey[]) : [];
diff --git a/app/charts/table/chart-table.tsx b/app/charts/table/chart-table.tsx
index 7570cb8b6..691ae05ae 100644
--- a/app/charts/table/chart-table.tsx
+++ b/app/charts/table/chart-table.tsx
@@ -1,7 +1,6 @@
 import { memo } from "react";
 
 import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
 import { Table } from "@/charts/table/table";
 import { TableChart } from "@/charts/table/table-state";
 import { DataSource, TableConfig } from "@/configurator";
@@ -17,18 +16,15 @@ import { ChartProps } from "../shared/ChartProps";
 export const ChartTableVisualization = ({
   dataSetIri,
   dataSource,
+  componentIris,
   chartConfig,
-  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: TableConfig;
-  published: boolean;
 }) => {
   const locale = useLocale();
-  const componentIris = published
-    ? extractComponentIris(chartConfig)
-    : undefined;
   const commonQueryVariables = {
     iri: dataSetIri,
     sourceType: dataSource.type,
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index 6cc0cfd2c..bc71369a4 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@mui/styles";
 import { PropsWithChildren, useEffect, useMemo, useState } from "react";
 
 import {
-  extractComponentIris,
+  extractChartConfigComponentIris,
   useQueryFilters,
 } from "@/charts/shared/chart-helpers";
 import { useChartTablePreview } from "@/components/chart-table-preview";
@@ -81,7 +81,7 @@ export const ChartFootnotes = ({
 
   // Data for data download
   const filters = useQueryFilters({ chartConfig });
-  const componentIris = extractComponentIris(chartConfig);
+  const componentIris = extractChartConfigComponentIris(chartConfig);
   const [{ data: visibleData }] = useDataCubeObservationsQuery({
     variables: {
       ...commonQueryVariables,
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 1a9e6656d..27d3837c4 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -214,8 +214,8 @@ export const ChartPreviewInner = (props: ChartPreviewProps) => {
                 <ChartWithFilters
                   dataSet={dataSetIri}
                   dataSource={dataSource}
+                  componentIris={undefined}
                   chartConfig={chartConfig}
-                  published={false}
                 />
               )}
             </Box>
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 2d16ccb81..2cfe582ab 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { useStore } from "zustand";
 
 import { DataSetTable } from "@/browse/datatable";
-import { extractComponentIris } from "@/charts/shared/chart-helpers";
+import { extractChartConfigsComponentIris } from "@/charts/shared/chart-helpers";
 import { isUsingImputation } from "@/charts/shared/imputation";
 import { ChartErrorBoundary } from "@/components/chart-error-boundary";
 import { ChartFootnotes } from "@/components/chart-footnotes";
@@ -23,6 +23,7 @@ import {
 } from "@/components/metadata-panel";
 import {
   ChartConfig,
+  ConfiguratorStatePublished,
   DataSource,
   getChartConfig,
   isPublished,
@@ -58,6 +59,7 @@ export const ChartPublished = (props: ChartPublishedProps) => {
       <ChartPublishedInner
         dataSet={dataSet}
         dataSource={dataSource}
+        state={state}
         chartConfig={chartConfig}
         configKey={configKey}
       />
@@ -83,6 +85,7 @@ const useStyles = makeStyles<Theme, { shrink: boolean }>((theme) => ({
 type ChartPublishInnerProps = {
   dataSet: string;
   dataSource: DataSource | undefined;
+  state: ConfiguratorStatePublished;
   chartConfig: ChartConfig;
   configKey: string | undefined;
 };
@@ -91,6 +94,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
   const {
     dataSet,
     dataSource = DEFAULT_DATA_SOURCE,
+    state,
     chartConfig,
     configKey,
   } = props;
@@ -141,10 +145,12 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
   const [{ data: metadata }] = useDataCubeMetadataQuery({
     variables: commonQueryVariables,
   });
+  const componentIris = extractChartConfigsComponentIris(state.chartConfigs);
+  console.log(componentIris);
   const [{ data: components }] = useComponentsQuery({
     variables: {
       ...commonQueryVariables,
-      componentIris: extractComponentIris(chartConfig),
+      componentIris,
     },
   });
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
@@ -250,8 +256,8 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
                 <ChartWithFilters
                   dataSet={dataSet}
                   dataSource={dataSource}
+                  componentIris={componentIris}
                   chartConfig={chartConfig}
-                  published
                 />
               )}
             </Flex>
diff --git a/app/components/chart-with-filters.tsx b/app/components/chart-with-filters.tsx
index 6fb5571e6..3bd9a3665 100644
--- a/app/components/chart-with-filters.tsx
+++ b/app/components/chart-with-filters.tsx
@@ -73,18 +73,18 @@ const ChartTableVisualization = dynamic(
 type GenericChartProps = {
   dataSet: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: ChartConfig;
-  published: boolean;
 };
 
 const GenericChart = (props: GenericChartProps) => {
-  const { dataSet, dataSource, chartConfig, published } = props;
+  const { dataSet, dataSource, componentIris, chartConfig } = props;
   const queryFilters = useQueryFilters({ chartConfig });
   const commonProps = {
     dataSetIri: dataSet,
     dataSource,
     queryFilters,
-    published,
+    componentIris,
   };
 
   switch (chartConfig.chartType) {
@@ -150,8 +150,8 @@ const GenericChart = (props: GenericChartProps) => {
 type ChartWithFiltersProps = {
   dataSet: string;
   dataSource: DataSource;
+  componentIris: string[] | undefined;
   chartConfig: ChartConfig;
-  published: boolean;
 };
 
 export const ChartWithFilters = React.forwardRef<

From 7c4c9e971834437b12f107d78e434560d5967d79 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 14:36:36 +0200
Subject: [PATCH 07/25] refactor: Copy instead of from

---
 app/configurator/configurator-state.tsx | 6 +++---
 app/pages/v/[chartId].tsx               | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index ce5aa49e0..7bf66cb1e 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -1318,7 +1318,7 @@ const ConfiguratorStateContext = createContext<
 type ChartId = string;
 type DatasetIri = string;
 
-export const initChartStateFromChart = async (
+export const initChartStateFromChartCopy = async (
   from: ChartId
 ): Promise<ConfiguratorStateConfiguringChart | undefined> => {
   const config = await fetchChartConfig(from);
@@ -1443,8 +1443,8 @@ const ConfiguratorStateProviderInternal = (
         let newChartState;
 
         if (chartId === "new") {
-          if (query.from && typeof query.from === "string") {
-            newChartState = await initChartStateFromChart(query.from);
+          if (query.copy && typeof query.copy === "string") {
+            newChartState = await initChartStateFromChartCopy(query.copy);
           } else if (query.edit && typeof query.edit === "string") {
             newChartState = await initChartStateFromChartEdit(query.edit);
           } else if (query.cube && typeof query.cube === "string") {
diff --git a/app/pages/v/[chartId].tsx b/app/pages/v/[chartId].tsx
index 6391be31a..4682a80bd 100644
--- a/app/pages/v/[chartId].tsx
+++ b/app/pages/v/[chartId].tsx
@@ -190,7 +190,7 @@ const VisualizationPage = (props: Serialized<PageProps>) => {
                 </Button>
               </NextLink>
               <NextLink
-                href={{ pathname: "/create/new", query: { from: key } }}
+                href={{ pathname: "/create/new", query: { copy: key } }}
                 passHref
                 legacyBehavior
               >

From 9ae320dc10a4dcbdf0ceaab6166ed38a3b732439 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 14:36:47 +0200
Subject: [PATCH 08/25] feat: Add a chart copy option to profile table

---
 app/login/components/profile-tables.tsx | 41 +++++++++++++++++++------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 763aa3039..1bd927e07 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -35,10 +35,22 @@ export const ProfileVisualizationsTable = (
 
   return (
     <Box className={rootClasses.sectionContent}>
-      <Typography variant="h2">My visualizations</Typography>
+      <Typography variant="h2" sx={{ mb: 4 }}>
+        My visualizations
+      </Typography>
+      <Typography variant="h3" sx={{ mb: 2 }}>
+        My published visualizations
+      </Typography>
       {userConfigs.length > 0 ? (
         <Table>
-          <TableHead>
+          <TableHead
+            sx={{
+              "& > .MuiTableCell-root": {
+                borderBottomColor: "divider",
+                color: "secondary.main",
+              },
+            }}
+          >
             <TableCell>Type</TableCell>
             <TableCell>Name</TableCell>
             <TableCell>Dataset</TableCell>
@@ -81,12 +93,18 @@ const Row = (props: RowProps) => {
   });
 
   return (
-    <TableRow sx={{ verticalAlign: "middle", height: 64 }}>
+    <TableRow
+      sx={{
+        verticalAlign: "middle",
+        height: 56,
+        "& > .MuiTableCell-root": {
+          borderBottomColor: "divider",
+        },
+      }}
+    >
       <TableCell width={80}>
         <Typography variant="body2">
-          {config.data.chartConfigs.length > 1
-            ? "multi"
-            : config.data.chartConfigs[0].chartType}
+          {config.data.chartConfigs.length > 1 ? "multi" : "single"}
         </Typography>
       </TableCell>
       <TableCell width="auto">
@@ -142,15 +160,20 @@ const Actions = (props: ActionsProps) => {
         title={
           <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
             <ActionsLink
-              href={`/v/${configKey}`}
-              label="Open"
-              iconName="linkExternal"
+              href={`/create/new?copy=${configKey}`}
+              label="Copy"
+              iconName="copy"
             />
             <ActionsLink
               href={`/create/new?edit=${configKey}`}
               label="Edit"
               iconName="edit"
             />
+            <ActionsLink
+              href={`/v/${configKey}`}
+              label="Share"
+              iconName="linkExternal"
+            />
           </Box>
         }
         sx={{ p: 2 }}

From 062403f1181ede0e136f8394c96dc5dd24a7f381 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 14:48:43 +0200
Subject: [PATCH 09/25] feat: Sort user configs by default

---
 app/db/config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/db/config.ts b/app/db/config.ts
index a41a7c585..7f4a69d9f 100644
--- a/app/db/config.ts
+++ b/app/db/config.ts
@@ -143,7 +143,11 @@ export const getUserConfigs = async (userId: number) => {
     where: {
       user_id: userId,
     },
+    orderBy: {
+      created_at: "desc",
+    },
   });
+
   return configs.map((c) => parseDbConfig(c));
 };
 

From 3f7c162139b1545f9a136cbf53cc7dea70c59d61 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 14:49:26 +0200
Subject: [PATCH 10/25] feat: Add preview mode to visualizations table

---
 app/login/components/profile-content-tabs.tsx |  6 +++++-
 app/login/components/profile-tables.tsx       | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index 2995c1772..fc34bdf96 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -64,7 +64,11 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
       </Box>
       <TabPanel className={classes.tabPanel} value="Home">
         <Box className={classes.tabPanelContent}>
-          <ProfileVisualizationsTable userConfigs={userConfigs} />
+          <ProfileVisualizationsTable
+            userConfigs={userConfigs}
+            preview
+            onShowAll={() => setValue("My visualizations")}
+          />
         </Box>
       </TabPanel>
       <TabPanel className={classes.tabPanel} value="My visualizations">
diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 1bd927e07..cf88df0d6 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   ClickAwayListener,
   IconButton,
   Link,
@@ -25,12 +26,14 @@ import { useLocale } from "@/src";
 
 type ProfileVisualizationsTableProps = {
   userConfigs: ParsedConfig[];
+  preview?: boolean;
+  onShowAll?: () => void;
 };
 
 export const ProfileVisualizationsTable = (
   props: ProfileVisualizationsTableProps
 ) => {
-  const { userConfigs } = props;
+  const { userConfigs, preview, onShowAll } = props;
   const rootClasses = useRootStyles();
 
   return (
@@ -58,7 +61,7 @@ export const ProfileVisualizationsTable = (
             <TableCell align="right">Actions</TableCell>
           </TableHead>
           <TableBody>
-            {userConfigs.map((d) => (
+            {(preview ? userConfigs.slice(0, 3) : userConfigs).map((d) => (
               <Row key={d.key} config={d} />
             ))}
           </TableBody>
@@ -72,6 +75,17 @@ export const ProfileVisualizationsTable = (
           .
         </Typography>
       )}
+      {preview && (
+        <Button
+          variant="text"
+          color="primary"
+          size="small"
+          onClick={onShowAll}
+          sx={{ ml: 1, mt: 2 }}
+        >
+          <Typography variant="body2">Show all</Typography>
+        </Button>
+      )}
     </Box>
   );
 };

From 153976447636395d6e76fa9f56f9c459f547f8d0 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 15:01:35 +0200
Subject: [PATCH 11/25] refactor: Abstract profile Actions

---
 app/login/components/profile-tables.tsx | 52 +++++++++++++------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index cf88df0d6..0c65bccbf 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -41,9 +41,6 @@ export const ProfileVisualizationsTable = (
       <Typography variant="h2" sx={{ mb: 4 }}>
         My visualizations
       </Typography>
-      <Typography variant="h3" sx={{ mb: 2 }}>
-        My published visualizations
-      </Typography>
       {userConfigs.length > 0 ? (
         <Table>
           <TableHead
@@ -62,7 +59,7 @@ export const ProfileVisualizationsTable = (
           </TableHead>
           <TableBody>
             {(preview ? userConfigs.slice(0, 3) : userConfigs).map((d) => (
-              <Row key={d.key} config={d} />
+              <ProfileVisualizationsRow key={d.key} config={d} />
             ))}
           </TableBody>
         </Table>
@@ -90,11 +87,11 @@ export const ProfileVisualizationsTable = (
   );
 };
 
-type RowProps = {
+type ProfileVisualizationsRowProps = {
   config: ParsedConfig;
 };
 
-const Row = (props: RowProps) => {
+const ProfileVisualizationsRow = (props: ProfileVisualizationsRowProps) => {
   const { config } = props;
   const locale = useLocale();
   const [{ data, fetching }] = useDataCubeMetadataQuery({
@@ -105,6 +102,25 @@ const Row = (props: RowProps) => {
       locale,
     },
   });
+  const links: ActionsLinkProps[] = React.useMemo(() => {
+    return [
+      {
+        href: `/create/new?copy=${config.key}`,
+        label: "Copy",
+        iconName: "copy",
+      },
+      {
+        href: `/create/new?edit=${config.key}`,
+        label: "Edit",
+        iconName: "edit",
+      },
+      {
+        href: `/v/${config.key}`,
+        label: "Share",
+        iconName: "linkExternal",
+      },
+    ];
+  }, [config.key]);
 
   return (
     <TableRow
@@ -151,18 +167,18 @@ const Row = (props: RowProps) => {
         </Typography>
       </TableCell>
       <TableCell width={80} align="right">
-        <Actions configKey={config.key} />
+        <Actions links={links} />
       </TableCell>
     </TableRow>
   );
 };
 
 type ActionsProps = {
-  configKey: string;
+  links: ActionsLinkProps[];
 };
 
 const Actions = (props: ActionsProps) => {
-  const { configKey } = props;
+  const { links } = props;
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const { isOpen, open, close } = useDisclosure();
 
@@ -173,21 +189,9 @@ const Actions = (props: ActionsProps) => {
         open={isOpen}
         title={
           <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-            <ActionsLink
-              href={`/create/new?copy=${configKey}`}
-              label="Copy"
-              iconName="copy"
-            />
-            <ActionsLink
-              href={`/create/new?edit=${configKey}`}
-              label="Edit"
-              iconName="edit"
-            />
-            <ActionsLink
-              href={`/v/${configKey}`}
-              label="Share"
-              iconName="linkExternal"
-            />
+            {links.map((props) => (
+              <ActionsLink key={props.href} {...props} />
+            ))}
           </Box>
         }
         sx={{ p: 2 }}

From d82ee4cb45ad80564908779de085c5f808b6f50e Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 15:01:43 +0200
Subject: [PATCH 12/25] fix: Import

---
 app/configurator/configurator-state.spec.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/configurator/configurator-state.spec.tsx b/app/configurator/configurator-state.spec.tsx
index d50b0c4c5..f97bb71a6 100644
--- a/app/configurator/configurator-state.spec.tsx
+++ b/app/configurator/configurator-state.spec.tsx
@@ -21,7 +21,7 @@ import {
   getLocalStorageKey,
   handleChartFieldChanged,
   handleChartOptionChanged,
-  initChartStateFromChart,
+  initChartStateFromChartCopy,
   initChartStateFromCube,
   initChartStateFromLocalStorage,
   moveFilterField,
@@ -106,7 +106,7 @@ describe("initChartStateFromChart", () => {
     });
     // @ts-ignore
     const { key, activeChartKey, chartConfigs, ...rest } =
-      await initChartStateFromChart("abcde");
+      await initChartStateFromChartCopy("abcde");
     const { key: chartConfigKey, ...chartConfig } = chartConfigs[0];
     const {
       key: migratedKey,
@@ -132,7 +132,7 @@ describe("initChartStateFromChart", () => {
         isBadState: true,
       },
     });
-    const state = await initChartStateFromChart("abcde");
+    const state = await initChartStateFromChartCopy("abcde");
     expect(state).toEqual(undefined);
   });
 });

From 3dca61722d94e10cdc8c869a04d27f1c1d3949c4 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 15:14:06 +0200
Subject: [PATCH 13/25] refactor: Abstract ProfileTable

---
 app/login/components/profile-tables.tsx | 58 +++++++++++++++++--------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 0c65bccbf..871ac4895 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -24,6 +24,37 @@ import { Icon, IconName } from "@/icons";
 import { useRootStyles } from "@/login/utils";
 import { useLocale } from "@/src";
 
+type ProfileTableProps = React.PropsWithChildren<{
+  title: string;
+  preview?: boolean;
+  onShowAll?: () => void;
+}>;
+
+const ProfileTable = (props: ProfileTableProps) => {
+  const { title, preview, onShowAll, children } = props;
+  const rootClasses = useRootStyles();
+
+  return (
+    <Box className={rootClasses.sectionContent}>
+      <Typography variant="h2" sx={{ mb: 4 }}>
+        {title}
+      </Typography>
+      <Table>{children}</Table>
+      {preview && (
+        <Button
+          variant="text"
+          color="primary"
+          size="small"
+          onClick={onShowAll}
+          sx={{ ml: 1, mt: 2 }}
+        >
+          <Typography variant="body2">Show all</Typography>
+        </Button>
+      )}
+    </Box>
+  );
+};
+
 type ProfileVisualizationsTableProps = {
   userConfigs: ParsedConfig[];
   preview?: boolean;
@@ -34,15 +65,15 @@ export const ProfileVisualizationsTable = (
   props: ProfileVisualizationsTableProps
 ) => {
   const { userConfigs, preview, onShowAll } = props;
-  const rootClasses = useRootStyles();
 
   return (
-    <Box className={rootClasses.sectionContent}>
-      <Typography variant="h2" sx={{ mb: 4 }}>
-        My visualizations
-      </Typography>
+    <ProfileTable
+      title="My visualizations"
+      preview={preview && userConfigs.length > 0}
+      onShowAll={onShowAll}
+    >
       {userConfigs.length > 0 ? (
-        <Table>
+        <>
           <TableHead
             sx={{
               "& > .MuiTableCell-root": {
@@ -62,7 +93,7 @@ export const ProfileVisualizationsTable = (
               <ProfileVisualizationsRow key={d.key} config={d} />
             ))}
           </TableBody>
-        </Table>
+        </>
       ) : (
         <Typography variant="body1">
           No charts yet,{" "}
@@ -72,18 +103,7 @@ export const ProfileVisualizationsTable = (
           .
         </Typography>
       )}
-      {preview && (
-        <Button
-          variant="text"
-          color="primary"
-          size="small"
-          onClick={onShowAll}
-          sx={{ ml: 1, mt: 2 }}
-        >
-          <Typography variant="body2">Show all</Typography>
-        </Button>
-      )}
-    </Box>
+    </ProfileTable>
   );
 };
 

From 8d1c2c151d6cb3ff03a291d0f99a8a524a02fd2c Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 16:53:39 +0200
Subject: [PATCH 14/25] feat: Add logic to remove configs from database

---
 app/db/config.ts               | 18 ++++++++++++++++++
 app/pages/api/config-remove.ts | 24 ++++++++++++++++++++++++
 app/utils/chart-config/api.ts  | 15 +++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 app/pages/api/config-remove.ts

diff --git a/app/db/config.ts b/app/db/config.ts
index 7f4a69d9f..659619c47 100644
--- a/app/db/config.ts
+++ b/app/db/config.ts
@@ -62,6 +62,24 @@ export const updateConfig = async ({
   });
 };
 
+/**
+ * Remove config from the DB.
+ * Only valid for logged in users.
+ *
+ * @param key Key of the config to be updated
+ */
+export const removeConfig = async ({
+  key,
+}: {
+  key: string;
+}): Promise<{ key: string }> => {
+  return await prisma.config.delete({
+    where: {
+      key,
+    },
+  });
+};
+
 const migrateDataSet = (dataSet: string): string => {
   if (dataSet.includes("https://environment.ld.admin.ch/foen/nfi")) {
     return dataSet.replace(/None-None-/, "");
diff --git a/app/pages/api/config-remove.ts b/app/pages/api/config-remove.ts
new file mode 100644
index 000000000..c59d069af
--- /dev/null
+++ b/app/pages/api/config-remove.ts
@@ -0,0 +1,24 @@
+import { getServerSession } from "next-auth";
+
+import { removeConfig } from "@/db/config";
+
+import { api } from "../../server/nextkit";
+
+import { nextAuthOptions } from "./auth/[...nextauth]";
+
+const route = api({
+  POST: async ({ req, res }) => {
+    const session = await getServerSession(req, res, nextAuthOptions);
+    const serverUserId = session?.user?.id;
+    const { key, userId } = req.body;
+    console.log(key, userId, serverUserId);
+
+    if (serverUserId !== userId) {
+      throw new Error("Unauthorized!");
+    }
+
+    return await removeConfig({ key });
+  },
+});
+
+export default route;
diff --git a/app/utils/chart-config/api.ts b/app/utils/chart-config/api.ts
index dececca95..cd15ded75 100644
--- a/app/utils/chart-config/api.ts
+++ b/app/utils/chart-config/api.ts
@@ -62,6 +62,21 @@ export const updateConfig = async (
   );
 };
 
+export const removeConfig = async (options: UpdateConfigOptions) => {
+  const { key, userId } = options;
+
+  return apiFetch<InferAPIResponse<typeof apiConfigUpdate, "POST">>(
+    "/api/config-remove",
+    {
+      method: "POST",
+      data: {
+        key,
+        userId,
+      },
+    }
+  );
+};
+
 export const fetchChartConfig = async (id: string) => {
   return await apiFetch<InferAPIResponse<typeof apiConfig, "GET">>(
     `/api/config/${id}`

From 80338dbabde388c7a68f2908bbccdb93a5ca1321 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 11 Oct 2023 16:57:27 +0200
Subject: [PATCH 15/25] fix: Keep locale when using browse button (user
 profile)

---
 app/login/components/profile-header.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/login/components/profile-header.tsx b/app/login/components/profile-header.tsx
index 5d9c6e8ac..a9685ecdb 100644
--- a/app/login/components/profile-header.tsx
+++ b/app/login/components/profile-header.tsx
@@ -3,6 +3,7 @@ import { makeStyles } from "@mui/styles";
 import { User } from "@prisma/client";
 import clsx from "clsx";
 import { signOut } from "next-auth/react";
+import NextLink from "next/link";
 
 import { useRootStyles } from "@/login/utils";
 
@@ -35,8 +36,8 @@ export const ProfileHeader = (props: ProfileHeaderProps) => {
       <Box className={rootClasses.sectionContent}>
         <Box className={classes.topRow}>
           <Typography variant="h1">{user.name}</Typography>
-          <Button component={Link} href="/browse">
-            Browse all datasets
+          <Button>
+            <BrowseLink />
           </Button>
         </Box>
         <Button
@@ -52,3 +53,19 @@ export const ProfileHeader = (props: ProfileHeaderProps) => {
     </Box>
   );
 };
+
+const BrowseLink = () => {
+  return (
+    <NextLink href="/browse" passHref legacyBehavior>
+      <Link
+        sx={{
+          "&:hover": {
+            textDecoration: "none",
+          },
+        }}
+      >
+        Browse all datasets
+      </Link>
+    </NextLink>
+  );
+};

From 80103fdd542ab5f599f3bbbcf6ae115b46c24126 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 09:36:09 +0200
Subject: [PATCH 16/25] chore: Remove console.logs

---
 app/components/chart-published.tsx | 1 -
 app/pages/api/config-remove.ts     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 2cfe582ab..c448d27ab 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -146,7 +146,6 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
     variables: commonQueryVariables,
   });
   const componentIris = extractChartConfigsComponentIris(state.chartConfigs);
-  console.log(componentIris);
   const [{ data: components }] = useComponentsQuery({
     variables: {
       ...commonQueryVariables,
diff --git a/app/pages/api/config-remove.ts b/app/pages/api/config-remove.ts
index c59d069af..398b5a002 100644
--- a/app/pages/api/config-remove.ts
+++ b/app/pages/api/config-remove.ts
@@ -11,7 +11,6 @@ const route = api({
     const session = await getServerSession(req, res, nextAuthOptions);
     const serverUserId = session?.user?.id;
     const { key, userId } = req.body;
-    console.log(key, userId, serverUserId);
 
     if (serverUserId !== userId) {
       throw new Error("Unauthorized!");

From a89a62c6c67d17c81fcea32e8cc32aae62ebfab3 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 09:38:03 +0200
Subject: [PATCH 17/25] style: Use flex layout

---
 app/login/components/profile-content-tabs.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index fc34bdf96..48aea99d5 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -63,7 +63,10 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
         </Box>
       </Box>
       <TabPanel className={classes.tabPanel} value="Home">
-        <Box className={classes.tabPanelContent}>
+        <Box
+          className={classes.tabPanelContent}
+          sx={{ display: "flex", flexDirection: "column", gap: 6 }}
+        >
           <ProfileVisualizationsTable
             userConfigs={userConfigs}
             preview

From 9d3962f5cc28c3c4535c02301cd2c93ec5d1e65e Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 10:48:54 +0200
Subject: [PATCH 18/25] chore: Remove favorite visualizations tab

---
 app/login/components/profile-content-tabs.tsx | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index 48aea99d5..472e2cee9 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -53,11 +53,9 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
         <Box className={rootClasses.sectionContent}>
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
             <TabList className={classes.tabList} onChange={handleChange}>
-              {["Home", "My visualizations", "My favorite datasets"].map(
-                (d) => (
-                  <Tab key={d} className={classes.tab} label={d} value={d} />
-                )
-              )}
+              {["Home", "My visualizations"].map((d) => (
+                <Tab key={d} className={classes.tab} label={d} value={d} />
+              ))}
             </TabList>
           </Box>
         </Box>
@@ -82,14 +80,6 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
           <ProfileVisualizationsTable userConfigs={userConfigs} />
         </Box>
       </TabPanel>
-      <TabPanel className={classes.tabPanel} value="My favorite datasets">
-        <Box
-          className={classes.tabPanelContent}
-          sx={{ bgcolor: "background.paper" }}
-        >
-          <Typography variant="h2">My favorite datasets</Typography>
-        </Box>
-      </TabPanel>
     </TabContext>
   );
 };

From 990513a2dab705b99fde9c65af3ec60d2808ea84 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 10:52:34 +0200
Subject: [PATCH 19/25] refactor: Keep user configs in state to enable
 re-rendering when they change

...plus pass userId to the props.
---
 app/login/components/profile-content-tabs.tsx | 6 ++++--
 app/pages/profile.tsx                         | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index 472e2cee9..2435f59d7 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -1,5 +1,5 @@
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Tab, Theme, Typography } from "@mui/material";
+import { Box, Tab, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
 import React from "react";
@@ -35,11 +35,13 @@ const useStyles = makeStyles<Theme>((theme) => ({
 }));
 
 type ProfileContentTabsProps = {
+  userId: number;
   userConfigs: ParsedConfig[];
 };
 
 export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
-  const { userConfigs } = props;
+  const { userId, userConfigs: _userConfigs } = props;
+  const [userConfigs, setUserConfigs] = React.useState(_userConfigs);
   const [value, setValue] = React.useState("Home");
   const handleChange = useEvent((_: React.SyntheticEvent, v: string) => {
     setValue(v);
diff --git a/app/pages/profile.tsx b/app/pages/profile.tsx
index 73566df6a..e9909209c 100644
--- a/app/pages/profile.tsx
+++ b/app/pages/profile.tsx
@@ -53,7 +53,7 @@ const ProfilePage = (props: Serialized<PageProps>) => {
     <AppLayout>
       <Box className={rootClasses.root}>
         <ProfileHeader user={user} />
-        <ProfileContentTabs userConfigs={userConfigs} />
+        <ProfileContentTabs userId={user.id} userConfigs={userConfigs} />
       </Box>
     </AppLayout>
   );

From e1c652a1430132fee86787916ddc824d8c8f3b7e Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 12:09:06 +0200
Subject: [PATCH 20/25] feat: Add chart removal button

---
 app/login/components/profile-content-tabs.tsx |   8 +-
 app/login/components/profile-tables.tsx       | 217 ++++++++++++++++--
 2 files changed, 203 insertions(+), 22 deletions(-)

diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index 2435f59d7..ebbf2c1b8 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -68,7 +68,9 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
           sx={{ display: "flex", flexDirection: "column", gap: 6 }}
         >
           <ProfileVisualizationsTable
+            userId={userId}
             userConfigs={userConfigs}
+            setUserConfigs={setUserConfigs}
             preview
             onShowAll={() => setValue("My visualizations")}
           />
@@ -79,7 +81,11 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
           className={classes.tabPanelContent}
           sx={{ bgcolor: "background.paper" }}
         >
-          <ProfileVisualizationsTable userConfigs={userConfigs} />
+          <ProfileVisualizationsTable
+            userId={userId}
+            userConfigs={userConfigs}
+            setUserConfigs={setUserConfigs}
+          />
         </Box>
       </TabPanel>
     </TabContext>
diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 871ac4895..c091ce816 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -1,7 +1,13 @@
 import {
   Box,
   Button,
+  CircularProgress,
   ClickAwayListener,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
   IconButton,
   Link,
   Skeleton,
@@ -23,6 +29,9 @@ import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
 import { Icon, IconName } from "@/icons";
 import { useRootStyles } from "@/login/utils";
 import { useLocale } from "@/src";
+import { removeConfig } from "@/utils/chart-config/api";
+
+const PREVIEW_LIMIT = 3;
 
 type ProfileTableProps = React.PropsWithChildren<{
   title: string;
@@ -56,7 +65,9 @@ const ProfileTable = (props: ProfileTableProps) => {
 };
 
 type ProfileVisualizationsTableProps = {
+  userId: number;
   userConfigs: ParsedConfig[];
+  setUserConfigs: React.Dispatch<React.SetStateAction<ParsedConfig[]>>;
   preview?: boolean;
   onShowAll?: () => void;
 };
@@ -64,12 +75,19 @@ type ProfileVisualizationsTableProps = {
 export const ProfileVisualizationsTable = (
   props: ProfileVisualizationsTableProps
 ) => {
-  const { userConfigs, preview, onShowAll } = props;
+  const { userId, userConfigs, setUserConfigs, preview, onShowAll } = props;
+  const onRemoveSuccess = React.useCallback(
+    (key: string) => {
+      setUserConfigs((prev) => prev.filter((d) => d.key !== key));
+    },
+    [setUserConfigs]
+  );
 
   return (
     <ProfileTable
-      title="My visualizations"
-      preview={preview && userConfigs.length > 0}
+      // TODO: translate
+      title={"My visualizations"}
+      preview={preview && userConfigs.length > PREVIEW_LIMIT}
       onShowAll={onShowAll}
     >
       {userConfigs.length > 0 ? (
@@ -82,6 +100,7 @@ export const ProfileVisualizationsTable = (
               },
             }}
           >
+            {/* TODO: translate */}
             <TableCell>Type</TableCell>
             <TableCell>Name</TableCell>
             <TableCell>Dataset</TableCell>
@@ -89,13 +108,21 @@ export const ProfileVisualizationsTable = (
             <TableCell align="right">Actions</TableCell>
           </TableHead>
           <TableBody>
-            {(preview ? userConfigs.slice(0, 3) : userConfigs).map((d) => (
-              <ProfileVisualizationsRow key={d.key} config={d} />
-            ))}
+            {userConfigs
+              .slice(0, preview ? PREVIEW_LIMIT : undefined)
+              .map((config) => (
+                <ProfileVisualizationsRow
+                  key={config.key}
+                  userId={userId}
+                  config={config}
+                  onRemoveSuccess={onRemoveSuccess}
+                />
+              ))}
           </TableBody>
         </>
       ) : (
         <Typography variant="body1">
+          {/* TODO: translate */}
           No charts yet,{" "}
           <NextLink href="/browse" legacyBehavior>
             create one
@@ -108,39 +135,63 @@ export const ProfileVisualizationsTable = (
 };
 
 type ProfileVisualizationsRowProps = {
+  userId: number;
   config: ParsedConfig;
+  onRemoveSuccess: (key: string) => void;
 };
 
 const ProfileVisualizationsRow = (props: ProfileVisualizationsRowProps) => {
-  const { config } = props;
+  const { userId, config, onRemoveSuccess } = props;
+  const { dataSet, dataSource } = config.data;
   const locale = useLocale();
   const [{ data, fetching }] = useDataCubeMetadataQuery({
     variables: {
-      iri: config.data.dataSet,
-      sourceType: config.data.dataSource.type,
-      sourceUrl: config.data.dataSource.url,
+      iri: dataSet,
+      sourceType: dataSource.type,
+      sourceUrl: dataSource.url,
       locale,
     },
   });
-  const links: ActionsLinkProps[] = React.useMemo(() => {
-    return [
+  const actions = React.useMemo(() => {
+    const actions: ActionProps[] = [
       {
+        type: "link",
         href: `/create/new?copy=${config.key}`,
+        // TODO: translate
         label: "Copy",
         iconName: "copy",
       },
       {
+        type: "button",
+        // TODO: translate
+        label: "Delete",
+        iconName: "trash",
+        requireConfirmation: true,
+        // TODO: translate
+        confirmationText: "Are you sure you want to delete this chart?",
+        onClick: async () => {
+          await removeConfig({ key: config.key, userId });
+        },
+        onSuccess: () => {
+          onRemoveSuccess(config.key);
+        },
+      },
+      {
+        type: "link",
         href: `/create/new?edit=${config.key}`,
         label: "Edit",
         iconName: "edit",
       },
       {
+        type: "link",
         href: `/v/${config.key}`,
         label: "Share",
         iconName: "linkExternal",
       },
     ];
-  }, [config.key]);
+
+    return actions;
+  }, [config.key, onRemoveSuccess, userId]);
 
   return (
     <TableRow
@@ -187,30 +238,35 @@ const ProfileVisualizationsRow = (props: ProfileVisualizationsRowProps) => {
         </Typography>
       </TableCell>
       <TableCell width={80} align="right">
-        <Actions links={links} />
+        <Actions actions={actions} />
       </TableCell>
     </TableRow>
   );
 };
 
 type ActionsProps = {
-  links: ActionsLinkProps[];
+  actions: ActionProps[];
 };
 
 const Actions = (props: ActionsProps) => {
-  const { links } = props;
+  const { actions } = props;
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const { isOpen, open, close } = useDisclosure();
+  const clickAwayListenerRef = React.useRef<HTMLElement>(null);
 
   return (
-    <ClickAwayListener onClickAway={close}>
+    <ClickAwayListener ref={clickAwayListenerRef} onClickAway={close}>
       <Tooltip
         arrow
         open={isOpen}
         title={
           <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-            {links.map((props) => (
-              <ActionsLink key={props.href} {...props} />
+            {actions.map((props, i) => (
+              <Action
+                key={i}
+                {...props}
+                {...(props.type === "button" ? { onDialogClose: close } : {})}
+              />
             ))}
           </Box>
         }
@@ -225,13 +281,28 @@ const Actions = (props: ActionsProps) => {
   );
 };
 
-type ActionsLinkProps = {
+type ActionProps = ActionLinkProps | ActionButtonProps;
+
+const Action = (props: ActionProps) => {
+  switch (props.type) {
+    case "link":
+      return <ActionLink {...props} />;
+    case "button":
+      return <ActionButton {...props} />;
+    default:
+      const _exhaustiveCheck: never = props;
+      return _exhaustiveCheck;
+  }
+};
+
+type ActionLinkProps = {
+  type: "link";
   href: string;
   label: string;
   iconName: IconName;
 };
 
-const ActionsLink = (props: ActionsLinkProps) => {
+const ActionLink = (props: ActionLinkProps) => {
   const { href, label, iconName } = props;
 
   return (
@@ -251,3 +322,107 @@ const ActionsLink = (props: ActionsLinkProps) => {
     </NextLink>
   );
 };
+
+type ActionButtonProps = {
+  type: "button";
+  label: string;
+  iconName: IconName;
+  requireConfirmation?: boolean;
+  confirmationText?: string;
+  onClick: () => Promise<void>;
+  onDialogClose?: () => void;
+  onSuccess?: () => void;
+};
+
+const ActionButton = (props: ActionButtonProps) => {
+  const {
+    label,
+    iconName,
+    requireConfirmation,
+    confirmationText,
+    onClick,
+    onDialogClose,
+    onSuccess,
+  } = props;
+  const { isOpen, open, close } = useDisclosure();
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <>
+      <Link
+        onClick={(e) => {
+          // To prevent the click away listener from closing the dialog.
+          e.stopPropagation();
+
+          if (requireConfirmation) {
+            open();
+          } else {
+            onClick();
+          }
+        }}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          color: "primary.main",
+          cursor: "pointer",
+        }}
+      >
+        <Icon name={iconName} size={16} style={{ margin: 0 }} />
+        <Typography variant="body2">{label}</Typography>
+      </Link>
+      {requireConfirmation && (
+        <Dialog
+          open={isOpen}
+          // To prevent the click away listener from closing the dialog.
+          onClick={(e) => e.stopPropagation()}
+          onClose={close}
+          maxWidth="xs"
+        >
+          <DialogTitle>
+            <Typography variant="h3">
+              {/* TODO: translate */}
+              {confirmationText ??
+                "Are you sure you want to perform this action?"}
+            </Typography>
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              {/* TODO: translate */}
+              Keep in mind that removing this visualization will affect all the
+              places where it might be already embedded!
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions
+            sx={{
+              "& > .MuiButton-root": {
+                justifyContent: "center",
+                pointerEvents: loading ? "none" : "auto",
+              },
+            }}
+          >
+            <Button variant="text" onClick={close}>
+              No
+            </Button>
+            <Button
+              variant="text"
+              onClick={async (e) => {
+                e.stopPropagation();
+                setLoading(true);
+
+                await onClick();
+                close();
+                await new Promise((r) => setTimeout(r, 100));
+
+                onDialogClose?.();
+                onSuccess?.();
+              }}
+            >
+              {loading ? <CircularProgress /> : "Yes"}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
+    </>
+  );
+};

From 3b0865cd9ab100225e5f039fc5014336b0dc9473 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 12:54:10 +0200
Subject: [PATCH 21/25] chore: Add translations

---
 app/browser/dataset-browse.tsx                |   2 +-
 app/locales/de/messages.po                    |  91 ++++++++++++++++
 app/locales/en/messages.po                    |  91 ++++++++++++++++
 app/locales/fr/messages.po                    |  91 ++++++++++++++++
 app/locales/it/messages.po                    |  91 ++++++++++++++++
 app/login/components/profile-content-tabs.tsx |  26 ++++-
 app/login/components/profile-tables.tsx       | 100 +++++++++++-------
 7 files changed, 451 insertions(+), 41 deletions(-)

diff --git a/app/browser/dataset-browse.tsx b/app/browser/dataset-browse.tsx
index b8f8f1df5..ded0dee85 100644
--- a/app/browser/dataset-browse.tsx
+++ b/app/browser/dataset-browse.tsx
@@ -592,7 +592,7 @@ const NavSection = ({
                 color="inherit"
                 onClick={open}
               >
-                Show all
+                <Trans id="show.all">Show all</Trans>
               </Button>
             )}
           </Box>
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 1512f3325..1d61fba6c 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -17,6 +17,10 @@ msgstr ""
 msgid "Add filter"
 msgstr "Filter hinzufügen"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "Axis orientation"
+msgstr "Achsenausrichtung"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "Drag filters to reorganize"
 msgstr "Ziehen Sie die Filter per Drag & Drop, um sie neu zu organisieren"
@@ -239,6 +243,18 @@ msgstr "Balken"
 msgid "controls.chart.type.column"
 msgstr "Säulen"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineColumn"
+msgstr "Column-line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineDual"
+msgstr "Dual-axis line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineSingle"
+msgstr "Multi-line"
+
 #: app/configurator/components/field-i18n.ts
 msgid "controls.chart.type.line"
 msgstr "Linien"
@@ -481,6 +497,7 @@ msgstr "Zurück zur Übersicht"
 msgid "controls.nav.back-to-preview"
 msgstr "Zurück zur Vorschau"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
 msgid "controls.none"
@@ -735,6 +752,7 @@ msgstr "Filter anwenden"
 msgid "controls.size"
 msgstr "Grösse"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/table/table-chart-sorting-options.tsx
 msgid "controls.sorting.addDimension"
 msgstr "Dimension hinzufügen"
@@ -1068,6 +1086,66 @@ msgstr "Filter ausblenden"
 msgid "interactive.data.filters.show"
 msgstr "Filter anzeigen"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.copy"
+msgstr "Kopieren"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete"
+msgstr "Löschen"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete.confirmation"
+msgstr "Sind Sie sicher, dass Sie diese Grafik löschen wollen?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.edit"
+msgstr "Bearbeiten"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.share"
+msgstr "Teilen"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.create-chart"
+msgstr "erstellen Sie einen"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.no-charts"
+msgstr "Noch keine Charts"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.confirmation.default"
+msgstr "Sind Sie sicher, dass Sie diese Aktion durchführen wollen?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.delete.warning"
+msgstr "Denken Sie daran, dass das Entfernen dieser Visualisierung sich auf alle Stellen auswirkt, an denen sie möglicherweise bereits eingebettet ist!"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations"
+msgstr "Meine Visualisierungen"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-actions"
+msgstr "Aktionen"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-name"
+msgstr "Name"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-published-date"
+msgstr "Veröffentlicht"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-type"
+msgstr "Typ"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.dataset-name"
+msgstr "Datensatz"
+
 #: app/components/header.tsx
 #: app/components/header.tsx
 msgid "logo.swiss.confederation"
@@ -1093,6 +1171,10 @@ msgstr "Zur Diagrammansicht wechseln"
 msgid "metadata.switch.table"
 msgstr "Zur Tabellenansicht wechseln"
 
+#: app/login/components/profile-tables.tsx
+msgid "no"
+msgstr "Nein"
+
 #: app/components/publish-actions.tsx
 msgid "publication.embed.AEM"
 msgstr "Einbett-Code für AEM «Externe Applikation»"
@@ -1162,6 +1244,11 @@ msgstr "Suche"
 msgid "select.controls.metadata.search"
 msgstr "Springen zu..."
 
+#: app/browser/dataset-browse.tsx
+#: app/login/components/profile-tables.tsx
+msgid "show.all"
+msgstr "Alle anzeigen"
+
 #: app/configurator/components/chart-controls/drag-and-drop-tab.tsx
 msgid "table.column.no"
 msgstr "Spalte {0}"
@@ -1171,3 +1258,7 @@ msgstr "Spalte {0}"
 #: app/components/chart-footnotes.tsx
 msgid "typography.colon"
 msgstr ": "
+
+#: app/login/components/profile-tables.tsx
+msgid "yes"
+msgstr "Ja"
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index d1eb04374..4e53f0a0a 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -17,6 +17,10 @@ msgstr ""
 msgid "Add filter"
 msgstr "Add filter"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "Axis orientation"
+msgstr "Axis orientation"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "Drag filters to reorganize"
 msgstr "Drag filters to reorganize"
@@ -239,6 +243,18 @@ msgstr "Bars"
 msgid "controls.chart.type.column"
 msgstr "Columns"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineColumn"
+msgstr "Column-line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineDual"
+msgstr "Dual-axis line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineSingle"
+msgstr "Multi-line"
+
 #: app/configurator/components/field-i18n.ts
 msgid "controls.chart.type.line"
 msgstr "Lines"
@@ -481,6 +497,7 @@ msgstr "Back to main"
 msgid "controls.nav.back-to-preview"
 msgstr "Back to preview"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
 msgid "controls.none"
@@ -735,6 +752,7 @@ msgstr "Apply filters"
 msgid "controls.size"
 msgstr "Size"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/table/table-chart-sorting-options.tsx
 msgid "controls.sorting.addDimension"
 msgstr "Add dimension"
@@ -1068,6 +1086,66 @@ msgstr "Hide Filters"
 msgid "interactive.data.filters.show"
 msgstr "Show Filters"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.copy"
+msgstr "Copy"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete"
+msgstr "Delete"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete.confirmation"
+msgstr "Are you sure you want to delete this chart?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.edit"
+msgstr "Edit"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.share"
+msgstr "Share"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.create-chart"
+msgstr "create one"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.no-charts"
+msgstr "No charts yet"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.confirmation.default"
+msgstr "Are you sure you want to perform this action?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.delete.warning"
+msgstr "Keep in mind that removing this visualization will affect all the places where it might be already embedded!"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations"
+msgstr "My visualizations"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-actions"
+msgstr "Actions"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-name"
+msgstr "Name"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-published-date"
+msgstr "Published"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-type"
+msgstr "Type"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.dataset-name"
+msgstr "Dataset"
+
 #: app/components/header.tsx
 #: app/components/header.tsx
 msgid "logo.swiss.confederation"
@@ -1093,6 +1171,10 @@ msgstr "Switch to chart view"
 msgid "metadata.switch.table"
 msgstr "Switch to table view"
 
+#: app/login/components/profile-tables.tsx
+msgid "no"
+msgstr "No"
+
 #: app/components/publish-actions.tsx
 msgid "publication.embed.AEM"
 msgstr "Embed Code for AEM \"External Application\""
@@ -1162,6 +1244,11 @@ msgstr "Search"
 msgid "select.controls.metadata.search"
 msgstr "Jump to..."
 
+#: app/browser/dataset-browse.tsx
+#: app/login/components/profile-tables.tsx
+msgid "show.all"
+msgstr "Show all"
+
 #: app/configurator/components/chart-controls/drag-and-drop-tab.tsx
 msgid "table.column.no"
 msgstr "Column {0}"
@@ -1171,3 +1258,7 @@ msgstr "Column {0}"
 #: app/components/chart-footnotes.tsx
 msgid "typography.colon"
 msgstr ": "
+
+#: app/login/components/profile-tables.tsx
+msgid "yes"
+msgstr "Yes"
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index c358b0150..e6d35e4a3 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -17,6 +17,10 @@ msgstr ""
 msgid "Add filter"
 msgstr "Ajouter un filtre"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "Axis orientation"
+msgstr "Orientation de l'axe"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "Drag filters to reorganize"
 msgstr "Faites glisser les filtres pour les réorganiser"
@@ -239,6 +243,18 @@ msgstr "Barres"
 msgid "controls.chart.type.column"
 msgstr "Colonnes"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineColumn"
+msgstr "Column-line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineDual"
+msgstr "Dual-axis line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineSingle"
+msgstr "Multi-line"
+
 #: app/configurator/components/field-i18n.ts
 msgid "controls.chart.type.line"
 msgstr "Lignes"
@@ -481,6 +497,7 @@ msgstr "Retour aux paramètres généraux"
 msgid "controls.nav.back-to-preview"
 msgstr "Retour à l'aperçu"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
 msgid "controls.none"
@@ -735,6 +752,7 @@ msgstr "Appliquer les filtres"
 msgid "controls.size"
 msgstr "Taille"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/table/table-chart-sorting-options.tsx
 msgid "controls.sorting.addDimension"
 msgstr "Ajouter une dimension"
@@ -1068,6 +1086,66 @@ msgstr "Masquer les filtres"
 msgid "interactive.data.filters.show"
 msgstr "Afficher les filtres"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.copy"
+msgstr "Copie"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete"
+msgstr "Supprimer"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete.confirmation"
+msgstr "Êtes-vous sûr de vouloir supprimer cette carte ?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.edit"
+msgstr "Editer"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.share"
+msgstr "Partager"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.create-chart"
+msgstr "créez-en un"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.no-charts"
+msgstr "Pas encore de graphiques"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.confirmation.default"
+msgstr "Êtes-vous sûr de vouloir effectuer cette action ?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.delete.warning"
+msgstr "Gardez à l'esprit que la suppression de cette visualisation affectera tous les endroits où elle est déjà intégrée !"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations"
+msgstr "Mes visualisations"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-actions"
+msgstr "Actions"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-name"
+msgstr "Nom"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-published-date"
+msgstr "Publié"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-type"
+msgstr "Type"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.dataset-name"
+msgstr "Ensemble de données"
+
 #: app/components/header.tsx
 #: app/components/header.tsx
 msgid "logo.swiss.confederation"
@@ -1093,6 +1171,10 @@ msgstr "Passer à la vue graphique"
 msgid "metadata.switch.table"
 msgstr "Passer à la vue en tableau"
 
+#: app/login/components/profile-tables.tsx
+msgid "no"
+msgstr "Non"
+
 #: app/components/publish-actions.tsx
 msgid "publication.embed.AEM"
 msgstr "Code pour intégrer sur AEM comme \"External Application\""
@@ -1162,6 +1244,11 @@ msgstr "Chercher"
 msgid "select.controls.metadata.search"
 msgstr "Sauter à..."
 
+#: app/browser/dataset-browse.tsx
+#: app/login/components/profile-tables.tsx
+msgid "show.all"
+msgstr "Tout afficher"
+
 #: app/configurator/components/chart-controls/drag-and-drop-tab.tsx
 msgid "table.column.no"
 msgstr "Colonne {0}"
@@ -1171,3 +1258,7 @@ msgstr "Colonne {0}"
 #: app/components/chart-footnotes.tsx
 msgid "typography.colon"
 msgstr " : "
+
+#: app/login/components/profile-tables.tsx
+msgid "yes"
+msgstr "Oui"
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index 9cc5a8572..677342604 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -17,6 +17,10 @@ msgstr ""
 msgid "Add filter"
 msgstr "Aggiungi filtro"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "Axis orientation"
+msgstr "Orientamento dell'asse"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "Drag filters to reorganize"
 msgstr "Trascina i filtri per riorganizzarli"
@@ -239,6 +243,18 @@ msgstr "Barre"
 msgid "controls.chart.type.column"
 msgstr "Colonne"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineColumn"
+msgstr "Column-line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineDual"
+msgstr "Dual-axis line"
+
+#: app/configurator/components/field-i18n.ts
+msgid "controls.chart.type.comboLineSingle"
+msgstr "Multi-line"
+
 #: app/configurator/components/field-i18n.ts
 msgid "controls.chart.type.line"
 msgstr "Linee"
@@ -481,6 +497,7 @@ msgstr "Torna alle impostazioni generali"
 msgid "controls.nav.back-to-preview"
 msgstr "Torna all'anteprima"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
 msgid "controls.none"
@@ -735,6 +752,7 @@ msgstr "Appliquer les filtres"
 msgid "controls.size"
 msgstr "Grandezza"
 
+#: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/table/table-chart-sorting-options.tsx
 msgid "controls.sorting.addDimension"
 msgstr "Aggiungi una dimensione"
@@ -1068,6 +1086,66 @@ msgstr "Nascondi i filtri"
 msgid "interactive.data.filters.show"
 msgstr "Mostra i filtri"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.copy"
+msgstr "Copia"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete"
+msgstr "Cancellare"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete.confirmation"
+msgstr "Sei sicuro di voler cancellare questo grafico?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.edit"
+msgstr "Modifica"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.share"
+msgstr "Condividi"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.create-chart"
+msgstr "creane uno"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.no-charts"
+msgstr "Non ci sono ancora grafici"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.confirmation.default"
+msgstr "Siete sicuri di voler eseguire questa azione?"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.delete.warning"
+msgstr "Tenete presente che la rimozione di questa visualizzazione avrà effetto su tutti i luoghi in cui potrebbe essere già incorporata!"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations"
+msgstr "Le mie visualizzazioni"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-actions"
+msgstr "Azioni"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-name"
+msgstr "Nome"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-published-date"
+msgstr "Pubblicato"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.chart-type"
+msgstr "Tipo"
+
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.my-visualizations.dataset-name"
+msgstr "Set di dati"
+
 #: app/components/header.tsx
 #: app/components/header.tsx
 msgid "logo.swiss.confederation"
@@ -1093,6 +1171,10 @@ msgstr "Passare alla visualizzazione del grafico"
 msgid "metadata.switch.table"
 msgstr "Passare alla vista tabella"
 
+#: app/login/components/profile-tables.tsx
+msgid "no"
+msgstr "No"
+
 #: app/components/publish-actions.tsx
 msgid "publication.embed.AEM"
 msgstr "Codice da incorporare su AEM come \"External Application\""
@@ -1162,6 +1244,11 @@ msgstr "Cerca"
 msgid "select.controls.metadata.search"
 msgstr "Salta a..."
 
+#: app/browser/dataset-browse.tsx
+#: app/login/components/profile-tables.tsx
+msgid "show.all"
+msgstr "Mostra tutti"
+
 #: app/configurator/components/chart-controls/drag-and-drop-tab.tsx
 msgid "table.column.no"
 msgstr "Colonna {0}"
@@ -1171,3 +1258,7 @@ msgstr "Colonna {0}"
 #: app/components/chart-footnotes.tsx
 msgid "typography.colon"
 msgstr ": "
+
+#: app/login/components/profile-tables.tsx
+msgid "yes"
+msgstr "Sì"
diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index ebbf2c1b8..69dd9ce43 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -1,3 +1,4 @@
+import { t } from "@lingui/macro";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import { Box, Tab, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
@@ -55,7 +56,13 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
         <Box className={rootClasses.sectionContent}>
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
             <TabList className={classes.tabList} onChange={handleChange}>
-              {["Home", "My visualizations"].map((d) => (
+              {[
+                "Home",
+                t({
+                  id: "login.profile.my-visualizations",
+                  message: "My visualizations",
+                }),
+              ].map((d) => (
                 <Tab key={d} className={classes.tab} label={d} value={d} />
               ))}
             </TabList>
@@ -72,11 +79,24 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
             userConfigs={userConfigs}
             setUserConfigs={setUserConfigs}
             preview
-            onShowAll={() => setValue("My visualizations")}
+            onShowAll={() =>
+              setValue(
+                t({
+                  id: "login.profile.my-visualizations",
+                  message: "My visualizations",
+                })
+              )
+            }
           />
         </Box>
       </TabPanel>
-      <TabPanel className={classes.tabPanel} value="My visualizations">
+      <TabPanel
+        className={classes.tabPanel}
+        value={t({
+          id: "login.profile.my-visualizations",
+          message: "My visualizations",
+        })}
+      >
         <Box
           className={classes.tabPanelContent}
           sx={{ bgcolor: "background.paper" }}
diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index c091ce816..e1e9eea75 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -1,3 +1,4 @@
+import { Trans, t } from "@lingui/macro";
 import {
   Box,
   Button,
@@ -57,7 +58,9 @@ const ProfileTable = (props: ProfileTableProps) => {
           onClick={onShowAll}
           sx={{ ml: 1, mt: 2 }}
         >
-          <Typography variant="body2">Show all</Typography>
+          <Typography variant="body2">
+            <Trans id="show.all">Show all</Trans>
+          </Typography>
         </Button>
       )}
     </Box>
@@ -85,8 +88,10 @@ export const ProfileVisualizationsTable = (
 
   return (
     <ProfileTable
-      // TODO: translate
-      title={"My visualizations"}
+      title={t({
+        id: "login.profile.my-visualizations",
+        message: "My visualizations",
+      })}
       preview={preview && userConfigs.length > PREVIEW_LIMIT}
       onShowAll={onShowAll}
     >
@@ -100,12 +105,31 @@ export const ProfileVisualizationsTable = (
               },
             }}
           >
-            {/* TODO: translate */}
-            <TableCell>Type</TableCell>
-            <TableCell>Name</TableCell>
-            <TableCell>Dataset</TableCell>
-            <TableCell>Published</TableCell>
-            <TableCell align="right">Actions</TableCell>
+            <TableCell>
+              <Trans id="login.profile.my-visualizations.chart-type">
+                Type
+              </Trans>
+            </TableCell>
+            <TableCell>
+              <Trans id="login.profile.my-visualizations.chart-name">
+                Name
+              </Trans>
+            </TableCell>
+            <TableCell>
+              <Trans id="login.profile.my-visualizations.dataset-name">
+                Dataset
+              </Trans>
+            </TableCell>
+            <TableCell>
+              <Trans id="login.profile.my-visualizations.chart-published-date">
+                Published
+              </Trans>
+            </TableCell>
+            <TableCell align="right">
+              <Trans id="login.profile.my-visualizations.chart-actions">
+                Actions
+              </Trans>
+            </TableCell>
           </TableHead>
           <TableBody>
             {userConfigs
@@ -122,10 +146,9 @@ export const ProfileVisualizationsTable = (
         </>
       ) : (
         <Typography variant="body1">
-          {/* TODO: translate */}
-          No charts yet,{" "}
+          <Trans id="login.no-charts">No charts yet</Trans>,{" "}
           <NextLink href="/browse" legacyBehavior>
-            create one
+            <Trans id="login.create-chart">create one</Trans>
           </NextLink>
           .
         </Typography>
@@ -157,18 +180,30 @@ const ProfileVisualizationsRow = (props: ProfileVisualizationsRowProps) => {
       {
         type: "link",
         href: `/create/new?copy=${config.key}`,
-        // TODO: translate
-        label: "Copy",
+        label: t({ id: "login.chart.copy", message: "Copy" }),
         iconName: "copy",
       },
+      {
+        type: "link",
+        href: `/create/new?edit=${config.key}`,
+        label: t({ id: "login.chart.edit", message: "Edit" }),
+        iconName: "edit",
+      },
+      {
+        type: "link",
+        href: `/v/${config.key}`,
+        label: t({ id: "login.chart.share", message: "Share" }),
+        iconName: "linkExternal",
+      },
       {
         type: "button",
-        // TODO: translate
-        label: "Delete",
+        label: t({ id: "login.chart.delete", message: "Delete" }),
         iconName: "trash",
         requireConfirmation: true,
-        // TODO: translate
-        confirmationText: "Are you sure you want to delete this chart?",
+        confirmationText: t({
+          id: "login.chart.delete.confirmation",
+          message: "Are you sure you want to delete this chart?",
+        }),
         onClick: async () => {
           await removeConfig({ key: config.key, userId });
         },
@@ -176,18 +211,6 @@ const ProfileVisualizationsRow = (props: ProfileVisualizationsRowProps) => {
           onRemoveSuccess(config.key);
         },
       },
-      {
-        type: "link",
-        href: `/create/new?edit=${config.key}`,
-        label: "Edit",
-        iconName: "edit",
-      },
-      {
-        type: "link",
-        href: `/v/${config.key}`,
-        label: "Share",
-        iconName: "linkExternal",
-      },
     ];
 
     return actions;
@@ -381,16 +404,19 @@ const ActionButton = (props: ActionButtonProps) => {
         >
           <DialogTitle>
             <Typography variant="h3">
-              {/* TODO: translate */}
               {confirmationText ??
-                "Are you sure you want to perform this action?"}
+                t({
+                  id: "login.profile.chart.confirmation.default",
+                  message: "Are you sure you want to perform this action?",
+                })}
             </Typography>
           </DialogTitle>
           <DialogContent>
             <DialogContentText>
-              {/* TODO: translate */}
-              Keep in mind that removing this visualization will affect all the
-              places where it might be already embedded!
+              <Trans id="login.profile.chart.delete.warning">
+                Keep in mind that removing this visualization will affect all
+                the places where it might be already embedded!
+              </Trans>
             </DialogContentText>
           </DialogContent>
           <DialogActions
@@ -402,7 +428,7 @@ const ActionButton = (props: ActionButtonProps) => {
             }}
           >
             <Button variant="text" onClick={close}>
-              No
+              <Trans id="no">No</Trans>
             </Button>
             <Button
               variant="text"
@@ -418,7 +444,7 @@ const ActionButton = (props: ActionButtonProps) => {
                 onSuccess?.();
               }}
             >
-              {loading ? <CircularProgress /> : "Yes"}
+              {loading ? <CircularProgress /> : <Trans id="yes">Yes</Trans>}
             </Button>
           </DialogActions>
         </Dialog>

From 9ebb3adc85bfc42ddeecda8c8eb293a8f4817442 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 12:55:40 +0200
Subject: [PATCH 22/25] docs: Update CHANGELOG

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52ca022d8..0c303d46c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Features
   - Added a new group of charts – Combo charts – that includes multi-measure line, dual-axis line and column-line charts
+  - Added a way to edit and remove charts for logged in users
+  - Improved user profile page
 
 # [3.22.9] - 2023-10-06
 

From ec2b57ae3876dd8ea6dfbf57bfbeec2bb90396f2 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 13:02:21 +0200
Subject: [PATCH 23/25] chore: Translate browse all datasets button

---
 app/locales/de/messages.po              |  7 ++++++
 app/locales/en/messages.po              |  7 ++++++
 app/locales/fr/messages.po              |  7 ++++++
 app/locales/it/messages.po              |  7 ++++++
 app/login/components/profile-header.tsx | 31 +++++++++++++------------
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 1d61fba6c..22d74d0b8 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -54,6 +54,10 @@ msgstr "Organisationen"
 msgid "browse-panel.themes"
 msgstr "Kategorien"
 
+#: app/login/components/profile-header.tsx
+msgid "browse.dataset.all"
+msgstr "Alle Datensätze durchsuchen"
+
 #: app/browser/dataset-preview.tsx
 msgid "browse.dataset.create-visualization"
 msgstr "Visualisierung von diesem Datensatz erstellen"
@@ -1122,6 +1126,9 @@ msgstr "Sind Sie sicher, dass Sie diese Aktion durchführen wollen?"
 msgid "login.profile.chart.delete.warning"
 msgstr "Denken Sie daran, dass das Entfernen dieser Visualisierung sich auf alle Stellen auswirkt, an denen sie möglicherweise bereits eingebettet ist!"
 
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.my-visualizations"
 msgstr "Meine Visualisierungen"
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index 4e53f0a0a..05630f96c 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -54,6 +54,10 @@ msgstr "Organizations"
 msgid "browse-panel.themes"
 msgstr "Categories"
 
+#: app/login/components/profile-header.tsx
+msgid "browse.dataset.all"
+msgstr "Browse all datasets"
+
 #: app/browser/dataset-preview.tsx
 msgid "browse.dataset.create-visualization"
 msgstr "Start a visualization"
@@ -1122,6 +1126,9 @@ msgstr "Are you sure you want to perform this action?"
 msgid "login.profile.chart.delete.warning"
 msgstr "Keep in mind that removing this visualization will affect all the places where it might be already embedded!"
 
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.my-visualizations"
 msgstr "My visualizations"
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index e6d35e4a3..b125e868f 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -54,6 +54,10 @@ msgstr "Organisations"
 msgid "browse-panel.themes"
 msgstr "Catégories"
 
+#: app/login/components/profile-header.tsx
+msgid "browse.dataset.all"
+msgstr "Parcourir tous les ensembles de données"
+
 #: app/browser/dataset-preview.tsx
 msgid "browse.dataset.create-visualization"
 msgstr "Démarrer une visualisation"
@@ -1122,6 +1126,9 @@ msgstr "Êtes-vous sûr de vouloir effectuer cette action ?"
 msgid "login.profile.chart.delete.warning"
 msgstr "Gardez à l'esprit que la suppression de cette visualisation affectera tous les endroits où elle est déjà intégrée !"
 
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.my-visualizations"
 msgstr "Mes visualisations"
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index 677342604..117c2ac54 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -54,6 +54,10 @@ msgstr "Organizzazioni"
 msgid "browse-panel.themes"
 msgstr "Categorie"
 
+#: app/login/components/profile-header.tsx
+msgid "browse.dataset.all"
+msgstr "Sfoglia tutti i set di dati"
+
 #: app/browser/dataset-preview.tsx
 msgid "browse.dataset.create-visualization"
 msgstr "Iniziare una visualizzazione"
@@ -1122,6 +1126,9 @@ msgstr "Siete sicuri di voler eseguire questa azione?"
 msgid "login.profile.chart.delete.warning"
 msgstr "Tenete presente che la rimozione di questa visualizzazione avrà effetto su tutti i luoghi in cui potrebbe essere già incorporata!"
 
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
+#: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.my-visualizations"
 msgstr "Le mie visualizzazioni"
diff --git a/app/login/components/profile-header.tsx b/app/login/components/profile-header.tsx
index a9685ecdb..2de39841c 100644
--- a/app/login/components/profile-header.tsx
+++ b/app/login/components/profile-header.tsx
@@ -1,3 +1,4 @@
+import { Trans } from "@lingui/macro";
 import { Box, Button, Link, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { User } from "@prisma/client";
@@ -36,9 +37,7 @@ export const ProfileHeader = (props: ProfileHeaderProps) => {
       <Box className={rootClasses.sectionContent}>
         <Box className={classes.topRow}>
           <Typography variant="h1">{user.name}</Typography>
-          <Button>
-            <BrowseLink />
-          </Button>
+          <BrowseButton />
         </Box>
         <Button
           className={classes.browseButton}
@@ -54,18 +53,20 @@ export const ProfileHeader = (props: ProfileHeaderProps) => {
   );
 };
 
-const BrowseLink = () => {
+const BrowseButton = () => {
   return (
-    <NextLink href="/browse" passHref legacyBehavior>
-      <Link
-        sx={{
-          "&:hover": {
-            textDecoration: "none",
-          },
-        }}
-      >
-        Browse all datasets
-      </Link>
-    </NextLink>
+    <Button>
+      <NextLink href="/browse" passHref legacyBehavior>
+        <Link
+          sx={{
+            "&:hover": {
+              textDecoration: "none",
+            },
+          }}
+        >
+          <Trans id="browse.dataset.all">Browse all datasets</Trans>
+        </Link>
+      </NextLink>
+    </Button>
   );
 };

From 32d593eb89c0f8fbcb4657ef324bc9461c5112a6 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 13:04:38 +0200
Subject: [PATCH 24/25] chore: Remove unused

---
 app/login/components/profile-tables.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index e1e9eea75..72ff2e3cd 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -275,10 +275,9 @@ const Actions = (props: ActionsProps) => {
   const { actions } = props;
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const { isOpen, open, close } = useDisclosure();
-  const clickAwayListenerRef = React.useRef<HTMLElement>(null);
 
   return (
-    <ClickAwayListener ref={clickAwayListenerRef} onClickAway={close}>
+    <ClickAwayListener onClickAway={close}>
       <Tooltip
         arrow
         open={isOpen}

From 828ac0619b8f8d677698fa5999f205235bde0066 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 12 Oct 2023 13:07:12 +0200
Subject: [PATCH 25/25] refactor: Separate confirmation title and text

---
 app/login/components/profile-tables.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 72ff2e3cd..f0f4e239a 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -200,10 +200,15 @@ const ProfileVisualizationsRow = (props: ProfileVisualizationsRowProps) => {
         label: t({ id: "login.chart.delete", message: "Delete" }),
         iconName: "trash",
         requireConfirmation: true,
-        confirmationText: t({
+        confirmationTitle: t({
           id: "login.chart.delete.confirmation",
           message: "Are you sure you want to delete this chart?",
         }),
+        confirmationText: t({
+          id: "login.profile.chart.delete.warning",
+          message:
+            "Keep in mind that removing this visualization will affect all the places where it might be already embedded!",
+        }),
         onClick: async () => {
           await removeConfig({ key: config.key, userId });
         },
@@ -350,6 +355,7 @@ type ActionButtonProps = {
   label: string;
   iconName: IconName;
   requireConfirmation?: boolean;
+  confirmationTitle?: string;
   confirmationText?: string;
   onClick: () => Promise<void>;
   onDialogClose?: () => void;
@@ -361,6 +367,7 @@ const ActionButton = (props: ActionButtonProps) => {
     label,
     iconName,
     requireConfirmation,
+    confirmationTitle,
     confirmationText,
     onClick,
     onDialogClose,
@@ -403,21 +410,18 @@ const ActionButton = (props: ActionButtonProps) => {
         >
           <DialogTitle>
             <Typography variant="h3">
-              {confirmationText ??
+              {confirmationTitle ??
                 t({
                   id: "login.profile.chart.confirmation.default",
                   message: "Are you sure you want to perform this action?",
                 })}
             </Typography>
           </DialogTitle>
-          <DialogContent>
-            <DialogContentText>
-              <Trans id="login.profile.chart.delete.warning">
-                Keep in mind that removing this visualization will affect all
-                the places where it might be already embedded!
-              </Trans>
-            </DialogContentText>
-          </DialogContent>
+          {confirmationText && (
+            <DialogContent>
+              <DialogContentText>{confirmationText}</DialogContentText>
+            </DialogContent>
+          )}
           <DialogActions
             sx={{
               "& > .MuiButton-root": {