feat: Multi filter adjustments

CHANGELOG.md

@@ -11,7 +11,11 @@ You can also check the
 
 ## Unreleased
 
+- Features
+  - Table sorting is not reset anymore on data / filter change
 - Fixes
+  - Hiding a temporal column and then enabling an interactive filter doesn't
+    result in broken state anymore
   - Fixed workflow for populating Varnish cache
 
 ### 6.0.0 - 2025-09-05

app/charts/shared/chart-data-filters/index.tsx

@@ -312,8 +312,8 @@ export const DataFilterGenericDimension = ({
 }: DataFilterGenericDimensionProps) => {
   const { label, isKeyDimension } = dimension;
   const noneLabel = t({
-    id: "controls.dimensionvalue.none",
-    message: "No filter",
+    id: "controls.dimensionvalue.select",
+    message: "Select filter",
   });
   const clearSelectionLabel = t({
     id: "controls.clear-selection",
@@ -366,6 +366,7 @@ export const DataFilterGenericDimension = ({
         options={allOptions}
         value={displayValues}
         onChange={onMultiChange}
+        size="sm"
         disabled={disabled}
         placeholder={noneLabel}
       />
@@ -408,8 +409,8 @@ export const DataFilterHierarchyDimension = ({
 }) => {
   const { label, isKeyDimension, values: dimensionValues } = dimension;
   const noneLabel = t({
-    id: "controls.dimensionvalue.none",
-    message: "No filter",
+    id: "controls.dimensionvalue.select",
+    message: "Select filter",
   });
   const options: Tree = useMemo(() => {
     const noneOption = {

app/charts/shared/legend-color.tsx

@@ -332,13 +332,14 @@ const LegendColorContent = ({
     >
       {groups
         ? groups.map(([g, colorValues], i) => {
+            const key = g.map((n) => n.label).join(" > ");
             const isLastGroup = i === groups.length - 1;
             const headerLabelsArray = g.map((d) => d.label);
 
             return (
               <div
+                key={key}
                 className={classes.legendGroup}
-                key={g.map((n) => n.label).join(" > ")}
                 data-testid="colorLegend"
               >
                 {headerLabelsArray.length > 0 ? (
@@ -357,12 +358,13 @@ const LegendColorContent = ({
                   </Typography>
                 ) : null}
                 {colorValues.map((value, i) => {
+                  const key = `${value}-${i}`;
                   const label = getLabel(value);
                   const active = !activeInteractiveFilters.has(label);
 
                   return (
                     <LegendItem
-                      key={value + i}
+                      key={key}
                       label={label}
                       color={getColor(value)}
                       dimension={getItemDimension?.(label)}

app/charts/table/table-content.tsx

@@ -106,6 +106,11 @@ export const TableContent = ({ children }: { children: ReactNode }) => {
                     <TableSortLabel
                       active={isCustomSorted}
                       direction={column.isSortedDesc ? "desc" : "asc"}
+                      sx={{
+                        "& svg": {
+                          opacity: isCustomSorted ? 1 : 0.5,
+                        },
+                      }}
                     >
                       <OpenMetadataPanelWrapper component={dim}>
                         <span style={{ fontWeight: "bold" }}>

app/charts/table/table.tsx

@@ -137,7 +137,6 @@ export const Table = () => {
     return result as Observation[];
   }, [chartData, searchTerm, searchIndex]);
 
-  // Table Instance
   const {
     getTableProps,
     getTableBodyProps,
@@ -152,6 +151,7 @@ export const Table = () => {
       columns: tableColumns,
       data: filteredData,
       autoResetExpanded: false,
+      autoResetSortBy: false,
       useControlledState: (state) => {
         return useMemo(
           () => ({

app/components/multi-select/tags.tsx

@@ -77,7 +77,7 @@ export const MultiSelectTags = ({
             height: "fit-content",
             mr: 0.5,
             px: 1,
-            py: 0.25,
+            py: 0.75,
             backgroundColor: "#F0F4F7",
 
             "&:hover": {

app/components/select-tree.tsx

@@ -621,7 +621,7 @@ export const SelectTree = ({
           ref={inputRef}
           id={id}
           name={id}
-          size="sm"
+          size={size}
           disabled={disabled}
           readOnly
           displayEmpty
@@ -710,7 +710,9 @@ export const SelectTree = ({
               );
             }
             if (isMulti && Array.isArray(value) && value.length === 0) {
-              return <Trans id="No filter">No filter</Trans>;
+              return (
+                <Trans id="controls.dimensionvalue.select">Select filter</Trans>
+              );
             }
 
             return (

app/configurator/components/field-date-picker.tsx

@@ -113,8 +113,8 @@ export const DatePickerField = ({
                 value: value
                   ? dateFormat(value)
                   : t({
-                      id: "controls.dimensionvalue.none",
-                      message: "No filter",
+                      id: "controls.dimensionvalue.select",
+                      message: "Select filter",
                     }),
               }}
               onChange={(e) => {

app/configurator/components/field.tsx

@@ -197,8 +197,8 @@ export const DataFilterSelect = ({
 }) => {
   const fieldProps = useSingleFilterSelect(dimensionToFieldProps(dimension));
   const noneLabel = t({
-    id: "controls.dimensionvalue.none",
-    message: "No filter",
+    id: "controls.dimensionvalue.select",
+    message: "Select filter",
   });
   const sortedValues = useMemo(() => {
     const sorters = makeDimensionValueSorters(dimension);

app/configurator/components/filters.tsx

@@ -422,8 +422,8 @@ const MultiFilterContent = ({
                 message: "Default value",
               })}
               placeholder={t({
-                id: "controls.dimensionvalue.none",
-                message: "No filter",
+                id: "controls.dimensionvalue.select",
+                message: "Select filter",
               })}
               options={defaultValueOptions}
               {...defaultValueOverrideProps}

app/configurator/configurator-state/reducer.spec.tsx

@@ -423,20 +423,15 @@ describe("applyDimensionToFilters", () => {
       expect(initialFilters).toEqual(expectedFilters);
     });
 
-    it("should set single value filter for a keyDimension if hidden", () => {
+    it("should not set single value filter for a keyDimension if hidden and range", () => {
       const initialFilters = {
         "https://environment.ld.admin.ch/foen/ubd0104/parametertype": {
           from: "2007-05-21",
           to: "2020-09-28",
           type: "range",
         },
       } as any;
-      const expectedFilters = {
-        "https://environment.ld.admin.ch/foen/ubd0104/parametertype": {
-          type: "single",
-          value: "2007-05-21",
-        },
-      };
+      const expectedFilters = { ...initialFilters };
 
       applyTableDimensionToFilters({
         filters: initialFilters,

app/configurator/configurator-state/reducer.tsx

@@ -193,12 +193,6 @@ export const applyTableDimensionToFilters = (props: {
         }
         break;
       case "range":
-        if (shouldBecomeSingleFilter) {
-          filters[originalIri] = {
-            type: "single",
-            value: currentFilter.from,
-          };
-        }
         break;
       default:
         const _exhaustiveCheck: never = currentFilter;

app/locales/de/messages.po

@@ -217,7 +217,7 @@ msgstr "Benutzer können den Diagramm-Modus ändern"
 msgid "controls.filters.interactive.tooltip"
 msgstr "Erlauben Sie Benutzern, Filter zu ändern"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.data.filters.possible-filters-error"
 msgstr "Beim Abrufen möglicher Filter ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut oder laden Sie die Seite neu."
@@ -474,7 +474,7 @@ msgstr "Wählen Sie kontrastierende Farben für Start- und Endpunkt. Diese Farbe
 msgid "controls.search.clear"
 msgstr "Suche zurücksetzen"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 #: app/components/multi-select/option.tsx
 msgid "controls.clear-selection"
 msgstr "Auswahl löschen"
@@ -971,7 +971,7 @@ msgstr "Spalte ausblenden"
 msgid "publication.embed.iframe.remove-filters"
 msgstr "Filter ausblenden"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 msgid "interactive.data.filters.hide"
 msgstr "Filter ausblenden"
 
@@ -1277,14 +1277,6 @@ msgstr "Keine kompatiblen Messungen zu kombinieren!"
 msgid "hint.nodata.title"
 msgstr "Keine Daten für die aktuelle Filterauswahl"
 
-#: app/charts/shared/chart-data-filters.tsx
-#: app/charts/shared/chart-data-filters.tsx
-#: app/configurator/components/field-date-picker.tsx
-#: app/configurator/components/field.tsx
-#: app/configurator/components/filters.tsx
-msgid "controls.dimensionvalue.none"
-msgstr "Kein Filter"
-
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.data.filters.none"
 msgstr "Keine Filter"
@@ -1645,6 +1637,15 @@ msgstr "Datensatz auswählen"
 msgid "chart.datasets.add-dataset-dialog.title"
 msgstr "Wählen Sie einen Datensatz mit gemeinsamen Dimensionen aus"
 
+#: app/charts/shared/chart-data-filters/index.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
+#: app/components/select-tree.tsx
+#: app/configurator/components/field-date-picker.tsx
+#: app/configurator/components/field.tsx
+#: app/configurator/components/filters.tsx
+msgid "controls.dimensionvalue.select"
+msgstr "Filter auswählen"
+
 #: app/configurator/components/chart-options-selector/limits-field.tsx
 msgid "controls.section.targets-and-limit-values.line-type"
 msgstr "Linientyp auswählen"
@@ -1723,7 +1724,7 @@ msgstr "Hintergrundfarbe anzeigen"
 msgid "controls.section.data.filters.default-open"
 msgstr "Filterbereich anzeigen geöffnet"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 msgid "interactive.data.filters.show"
 msgstr "Filter anzeigen"
 

app/locales/en/messages.po

@@ -217,7 +217,7 @@ msgstr "Allow users to change chart mode"
 msgid "controls.filters.interactive.tooltip"
 msgstr "Allow users to change filters"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.data.filters.possible-filters-error"
 msgstr "An error happened while fetching possible filters, please retry later or reload the page."
@@ -474,7 +474,7 @@ msgstr "Choose contrasting colors for the start and end points. These colors wil
 msgid "controls.search.clear"
 msgstr "Clear search field"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 #: app/components/multi-select/option.tsx
 msgid "controls.clear-selection"
 msgstr "Clear selection"
@@ -971,7 +971,7 @@ msgstr "Hide column"
 msgid "publication.embed.iframe.remove-filters"
 msgstr "Hide filters"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 msgid "interactive.data.filters.hide"
 msgstr "Hide Filters"
 
@@ -1277,14 +1277,6 @@ msgstr "No compatible measures to combine!"
 msgid "hint.nodata.title"
 msgstr "No data available for current filter selection"
 
-#: app/charts/shared/chart-data-filters.tsx
-#: app/charts/shared/chart-data-filters.tsx
-#: app/configurator/components/field-date-picker.tsx
-#: app/configurator/components/field.tsx
-#: app/configurator/components/filters.tsx
-msgid "controls.dimensionvalue.none"
-msgstr "No filter"
-
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.data.filters.none"
 msgstr "No filters"
@@ -1645,6 +1637,15 @@ msgstr "Select dataset"
 msgid "chart.datasets.add-dataset-dialog.title"
 msgstr "Select dataset with shared dimensions"
 
+#: app/charts/shared/chart-data-filters/index.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
+#: app/components/select-tree.tsx
+#: app/configurator/components/field-date-picker.tsx
+#: app/configurator/components/field.tsx
+#: app/configurator/components/filters.tsx
+msgid "controls.dimensionvalue.select"
+msgstr "Select filter"
+
 #: app/configurator/components/chart-options-selector/limits-field.tsx
 msgid "controls.section.targets-and-limit-values.line-type"
 msgstr "Select line type"
@@ -1723,7 +1724,7 @@ msgstr "Show bar background"
 msgid "controls.section.data.filters.default-open"
 msgstr "Show filter area open"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 msgid "interactive.data.filters.show"
 msgstr "Show Filters"
 

app/locales/fr/messages.po

@@ -217,7 +217,7 @@ msgstr "Permettre aux utilisateurs de changer de mode graphique"
 msgid "controls.filters.interactive.tooltip"
 msgstr "Permettre aux utilisateurs de changer le filtre"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.data.filters.possible-filters-error"
 msgstr "Une erreur s'est produite lors de la récupération des filtres possibles. Merci de réessayer plus tard ou d'actualiser la page."
@@ -474,7 +474,7 @@ msgstr "Choisissez des couleurs contrastées pour les points de départ et d'arr
 msgid "controls.search.clear"
 msgstr "Effacer la recherche"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 #: app/components/multi-select/option.tsx
 msgid "controls.clear-selection"
 msgstr "Sélection claire"
@@ -971,7 +971,7 @@ msgstr "Masquer la colonne"
 msgid "publication.embed.iframe.remove-filters"
 msgstr "Masquer les filtres"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 msgid "interactive.data.filters.hide"
 msgstr "Masquer les filtres"
 
@@ -1277,14 +1277,6 @@ msgstr "Aucune mesure compatible à combiner !"
 msgid "hint.nodata.title"
 msgstr "Il n'y a pas de données correspondant aux filtres sélectionnés"
 
-#: app/charts/shared/chart-data-filters.tsx
-#: app/charts/shared/chart-data-filters.tsx
-#: app/configurator/components/field-date-picker.tsx
-#: app/configurator/components/field.tsx
-#: app/configurator/components/filters.tsx
-msgid "controls.dimensionvalue.none"
-msgstr "Aucune filtre"
-
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.data.filters.none"
 msgstr "Aucun filtre"
@@ -1645,6 +1637,15 @@ msgstr "Sélectionner un ensemble de données"
 msgid "chart.datasets.add-dataset-dialog.title"
 msgstr "Sélectionner un ensemble de données avec des dimensions partagées"
 
+#: app/charts/shared/chart-data-filters/index.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
+#: app/components/select-tree.tsx
+#: app/configurator/components/field-date-picker.tsx
+#: app/configurator/components/field.tsx
+#: app/configurator/components/filters.tsx
+msgid "controls.dimensionvalue.select"
+msgstr "Sélectionnez le filtre"
+
 #: app/configurator/components/chart-options-selector/limits-field.tsx
 msgid "controls.section.targets-and-limit-values.line-type"
 msgstr "Sélectionner le type de ligne"
@@ -1723,7 +1724,7 @@ msgstr "Afficher la couleur de fond"
 msgid "controls.section.data.filters.default-open"
 msgstr "Afficher la zone de filtre ouverte"
 
-#: app/charts/shared/chart-data-filters.tsx
+#: app/charts/shared/chart-data-filters/index.tsx
 msgid "interactive.data.filters.show"
 msgstr "Afficher les filtres"