feat: Introduce component ids

app/browse/datatable.tsx

@@ -12,10 +12,10 @@ import {
   TooltipProps,
 } from "@mui/material";
 import { ascending, descending } from "d3-array";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 import {
-  extractChartConfigComponentIris,
+  extractChartConfigComponentIds,
   useQueryFilters,
 } from "@/charts/shared/chart-helpers";
 import { Loading } from "@/components/hint";
@@ -92,62 +92,64 @@ export const PreviewTable = ({
     const valuesIndex = uniqueMapBy(sortBy.values, (d) => d.label);
     const convert =
       isNumericalMeasure(sortBy) || sortBy.isNumerical
-        ? (value: string) => +value
-        : (value: string) => valuesIndex.get(value)?.position ?? value;
+        ? (v: string) => +v
+        : (v: string) => valuesIndex.get(v)?.position ?? v;
 
     return [...observations].sort((a, b) =>
-      compare(
-        convert(a[sortBy.iri] as string),
-        convert(b[sortBy.iri] as string)
-      )
+      compare(convert(a[sortBy.id] as string), convert(b[sortBy.id] as string))
     );
   }, [observations, sortBy, sortDirection]);
 
-  const tooltipContainerRef = useRef(null);
+  const tooltipContainerRef = useRef<HTMLDivElement>(null);
+  const tooltipProps = useMemo(() => {
+    return {
+      PopperProps: {
+        // Tooltip contained inside the table so as not to overflow when table is scrolled
+        container: tooltipContainerRef.current,
+      },
+    };
+  }, []);
 
-  // Tooltip contained inside the table so as not to overflow when table is scrolled
-  const tooltipProps = useMemo(
-    () => ({ PopperProps: { container: tooltipContainerRef.current } }),
-    []
+  const handleSort = useCallback(
+    (header: Component) => {
+      if (sortBy?.id === header.id) {
+        setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+      } else {
+        setSortBy(header);
+        setSortDirection("asc");
+      }
+    },
+    [sortBy, sortDirection]
   );
 
   return (
     <div ref={tooltipContainerRef}>
       <Table>
         <caption style={{ display: "none" }}>{title}</caption>
-        <TableHead sx={{ position: "sticky", top: 0, background: "white" }}>
+        <TableHead
+          sx={{ position: "sticky", top: 0, background: "background.paper" }}
+        >
           <TableRow sx={{ borderBottom: "none" }}>
             {headers.map((header) => {
               return (
                 <TableCell
-                  key={header.iri}
+                  key={header.id}
                   component="th"
                   role="columnheader"
-                  onClick={() => {
-                    if (sortBy?.iri === header.iri) {
-                      setSortDirection(
-                        sortDirection === "asc" ? "desc" : "asc"
-                      );
-                    } else {
-                      setSortBy(header);
-                      setSortDirection("asc");
-                    }
-                  }}
+                  onClick={() => handleSort(header)}
                   sx={{
                     textAlign: isNumericalMeasure(header) ? "right" : "left",
                     borderBottom: "none",
                     whiteSpace: "nowrap",
                   }}
                 >
                   <TableSortLabel
-                    active={sortBy === undefined || sortBy.iri === header.iri}
-                    direction={sortBy === undefined ? "desc" : sortDirection}
+                    active={!sortBy || sortBy.id === header.id}
+                    direction={!sortBy ? "desc" : sortDirection}
                     IconComponent={SvgIcChevronDown}
                     sx={{
                       "&:hover > svg": {
-                        ...(sortBy === undefined
-                          ? { transform: "translateY(-15%)" }
-                          : {}),
+                        ...(!sortBy ? { transform: "translateY(-15%)" } : {}),
                       },
                     }}
                   >
@@ -168,18 +170,19 @@ export const PreviewTable = ({
             return (
               <TableRow key={i}>
                 {headers.map((header) => {
-                  const formatter = formatters[header.iri];
+                  const format = formatters[header.id];
+
                   return (
                     <TableCell
-                      key={header.iri}
+                      key={header.id}
                       component="td"
                       sx={{
                         textAlign: isNumericalMeasure(header)
                           ? "right"
                           : "left",
                       }}
                     >
-                      {formatter(obs[header.iri])}
+                      {format(obs[header.id])}
                     </TableCell>
                   );
                 })}
@@ -242,7 +245,7 @@ export const DataSetTable = ({
   sx?: SxProps<Theme>;
 }) => {
   const locale = useLocale();
-  const componentIris = extractChartConfigComponentIris({ chartConfig });
+  const componentIris = extractChartConfigComponentIds({ chartConfig });
   const commonQueryVariables = {
     sourceType: dataSource.type,
     sourceUrl: dataSource.url,

app/browser/select-dataset-step.tsx

@@ -340,7 +340,7 @@ const SelectDatasetStepContent = ({
                   >
                     <Trans id="browse.datasets.description">
                       Explore datasets provided by the LINDAS Linked Data
-                      Service by either filtering by categories or organisations
+                      Service by either filtering by categories or organizations
                       or search directly for specific keywords. Click on a
                       dataset to see more detailed information and start
                       creating your own visualizations.

app/charts/area/areas-state-props.ts

@@ -30,24 +30,24 @@ export type AreasStateVariables = BaseVariables &
 export const useAreasStateVariables = (
   props: ChartProps<AreaConfig>
 ): AreasStateVariables => {
-  const { chartConfig, observations, dimensionsByIri, measuresByIri } = props;
+  const { chartConfig, observations, dimensionsById, measuresById } = props;
   const { fields } = chartConfig;
   const { x, y, segment } = fields;
 
   const baseVariables = useBaseVariables(chartConfig);
   const temporalXVariables = useTemporalXVariables(x, {
-    dimensionsByIri,
+    dimensionsById,
   });
   const numericalYVariables = useNumericalYVariables("area", y, {
-    measuresByIri,
+    measuresById,
   });
   const segmentVariables = useSegmentVariables(segment, {
-    dimensionsByIri,
+    dimensionsById,
     observations,
   });
   const interactiveFiltersVariables = useInteractiveFiltersVariables(
     chartConfig.interactiveFiltersConfig,
-    { dimensionsByIri }
+    { dimensionsById }
   );
 
   const { getX } = temporalXVariables;
@@ -92,7 +92,7 @@ export const useAreasStateData = (
   }, [sortData, plottableData]);
   const data = useChartData(sortedPlottableData, {
     chartConfig,
-    timeRangeDimensionIri: xDimension.iri,
+    timeRangeDimensionId: xDimension.id,
     getXAsDate: getX,
     getSegmentAbbreviationOrLabel,
     getTimeRangeDate,

app/charts/area/areas-state.tsx

@@ -93,7 +93,7 @@ const useAreasState = (
     getSegmentAbbreviationOrLabel,
     getSegmentLabel,
   } = variables;
-  const getIdentityY = useGetIdentityY(yMeasure.iri);
+  const getIdentityY = useGetIdentityY(yMeasure.id);
   const {
     chartData,
     scalesData,
@@ -121,9 +121,9 @@ const useAreasState = (
   const segmentSortingType = segmentSorting?.sortingType;
   const segmentSortingOrder = segmentSorting?.sortingOrder;
 
-  const segmentFilter = segmentDimension?.iri
+  const segmentFilter = segmentDimension?.id
     ? chartConfig.cubes.find((d) => d.iri === segmentDimension.cubeIri)
-        ?.filters[segmentDimension.iri]
+        ?.filters[segmentDimension.id]
     : undefined;
 
   const sumsBySegment = useMemo(() => {
@@ -170,7 +170,7 @@ const useAreasState = (
     fields.segment?.useAbbreviations,
   ]);
 
-  const xKey = fields.x.componentIri;
+  const xKey = fields.x.componentId;
   const sumsByX = useMemo(() => {
     return Object.fromEntries(
       rollup(
@@ -186,7 +186,7 @@ const useAreasState = (
     if (normalize) {
       return group(
         normalizeData(chartData, {
-          yKey: yMeasure.iri,
+          yKey: yMeasure.id,
           getY,
           getTotalGroupValue: (d) => {
             return sumsByX[getXAsString(d)];
@@ -197,7 +197,7 @@ const useAreasState = (
     }
 
     return group(chartData, getXAsString);
-  }, [chartData, getXAsString, sumsByX, getY, yMeasure.iri, normalize]);
+  }, [chartData, getXAsString, sumsByX, getY, yMeasure.id, normalize]);
 
   const chartWideData = useMemo(() => {
     return getWideData({
@@ -366,7 +366,7 @@ const useAreasState = (
       });
       const yValueFormatter = getStackedTooltipValueFormatter({
         normalize,
-        yMeasureIri: yMeasure.iri,
+        yMeasureId: yMeasure.id,
         yMeasureUnit: yMeasure.unit,
         formatters,
         formatNumber,
@@ -415,7 +415,7 @@ const useAreasState = (
       timeFormatUnit,
       xDimension.timeUnit,
       xScale,
-      yMeasure.iri,
+      yMeasure.id,
       yMeasure.unit,
       normalize,
       getIdentityY,

app/charts/chart-config-ui-options.spec.ts

@@ -33,7 +33,7 @@ describe("defaultSegmentOnChange", () => {
     expect(Object.keys(chartConfig.fields)).toEqual(["segment"]);
     expect(chartConfig.fields.segment).toEqual(
       expect.objectContaining({
-        componentIri: "iri",
+        componentId: "iri",
         palette: DEFAULT_CATEGORICAL_PALETTE_NAME,
       })
     );