feat: Login improvements

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
 

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,

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>

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,

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,

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,

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,

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,

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,

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

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

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

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",