Merge pull request #1311 from visualize-admin/fix/most-recent-date-fi…

…lter

fix: Most recent date filter needs to take other filters into account

app/components/form.tsx

@@ -353,7 +353,7 @@ export const Select = ({
     <LoadingMenuPaperContext.Provider value={loading}>
       <Box sx={{ width: "100%", ...sx }}>
         {label && (
-          <Label htmlFor={id} smaller sx={{ my: 1 }}>
+          <Label htmlFor={id} smaller sx={{ my: "6px" }}>
             {label}
             {controls}
           </Label>

app/components/select-tree.tsx

@@ -481,7 +481,7 @@ function SelectTree({
   return (
     <div>
       {label && (
-        <Label htmlFor={id!} smaller sx={{ my: 1 }}>
+        <Label htmlFor={id!} smaller sx={{ my: "6px" }}>
           {label} {controls}
         </Label>
       )}

app/configurator/components/field.tsx

@@ -80,6 +80,7 @@ import {
   HierarchyValue,
   ObservationValue,
   TemporalDimension,
+  isTemporalOrdinalDimension,
 } from "@/domain/data";
 import { useTimeFormatLocale } from "@/formatters";
 import { TimeUnit } from "@/graphql/query-hooks";
@@ -240,11 +241,56 @@ export const DataFilterSelect = ({
     );
   }
 
+  const canUseMostRecentValue = isTemporalOrdinalDimension(dimension);
+  const usesMostRecentValue = isDynamicMaxValue(fieldProps.value);
+  const maxValue = sortedValues[sortedValues.length - 1].value;
+
   return (
     <Select
       id={id}
-      label={<FieldLabel label={label} isOptional={isOptional} />}
-      disabled={disabled}
+      label={
+        canUseMostRecentValue ? (
+          <Flex
+            sx={{
+              width: "100%",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <FieldLabel label={label} isOptional={isOptional} />
+            <FormGroup>
+              <FormControlLabel
+                control={
+                  <MUISwitch
+                    size="small"
+                    checked={usesMostRecentValue}
+                    onChange={() =>
+                      fieldProps.onChange({
+                        target: {
+                          value: usesMostRecentValue
+                            ? `${maxValue}`
+                            : VISUALIZE_MAX_VALUE,
+                        },
+                      })
+                    }
+                  />
+                }
+                label={
+                  <Typography variant="caption">
+                    <Trans id="controls.filter.use-most-recent">
+                      Use most recent
+                    </Trans>
+                  </Typography>
+                }
+                sx={{ mr: 0 }}
+              />
+            </FormGroup>
+          </Flex>
+        ) : (
+          <FieldLabel label={label} isOptional={isOptional} />
+        )
+      }
+      disabled={disabled || usesMostRecentValue}
       options={allValues}
       sortOptions={false}
       controls={controls}
@@ -253,6 +299,7 @@ export const DataFilterSelect = ({
       onOpen={handleOpen}
       loading={loading}
       {...fieldProps}
+      value={usesMostRecentValue ? maxValue : fieldProps.value}
     />
   );
 };
@@ -349,11 +396,11 @@ export const DataFilterTemporal = (props: DataFilterTemporalProps) => {
               </OpenMetadataPanelWrapper>
             }
           />
-          {/* FIXME: adapt to design */}
           <FormGroup>
             <FormControlLabel
               control={
                 <MUISwitch
+                  size="small"
                   checked={usesMostRecentDate}
                   onChange={() =>
                     fieldProps.onChange({
@@ -366,8 +413,14 @@ export const DataFilterTemporal = (props: DataFilterTemporalProps) => {
                   }
                 />
               }
-              // FIXME: adapt to design, translate
-              label={<Typography variant="caption">Use most recent</Typography>}
+              label={
+                <Typography variant="caption">
+                  <Trans id="controls.filter.use-most-recent">
+                    Use most recent
+                  </Trans>
+                </Typography>
+              }
+              sx={{ mr: 0 }}
             />
           </FormGroup>
         </Flex>

app/locales/de/messages.po

@@ -421,7 +421,6 @@ msgstr "Beschreibung hinzufügen"
 #: app/charts/shared/chart-data-filters.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/components/field.tsx
 msgid "controls.dimensionvalue.none"
 msgstr "Kein Filter"
 
@@ -441,6 +440,10 @@ msgstr "Alle auswählen"
 msgid "controls.filter.select.none"
 msgstr "Alle abwählen"
 
+#: app/configurator/components/field.tsx
+msgid "controls.filter.use-most-recent"
+msgstr "Letztes Datum verwenden"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.filters.interactive.calculation"
 msgstr "Benutzer können den Diagramm-Modus ändern"

app/locales/en/messages.po

@@ -421,7 +421,6 @@ msgstr "Description"
 #: app/charts/shared/chart-data-filters.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/components/field.tsx
 msgid "controls.dimensionvalue.none"
 msgstr "No Filter"
 
@@ -441,6 +440,10 @@ msgstr "Select all"
 msgid "controls.filter.select.none"
 msgstr "Select none"
 
+#: app/configurator/components/field.tsx
+msgid "controls.filter.use-most-recent"
+msgstr "Use most recent"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.filters.interactive.calculation"
 msgstr "Allow users to change chart mode"

app/locales/fr/messages.po

@@ -421,7 +421,6 @@ msgstr "Description"
 #: app/charts/shared/chart-data-filters.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/components/field.tsx
 msgid "controls.dimensionvalue.none"
 msgstr "Aucune filtre"
 
@@ -441,6 +440,10 @@ msgstr "Tout sélectionner"
 msgid "controls.filter.select.none"
 msgstr "Tout déselectionner"
 
+#: app/configurator/components/field.tsx
+msgid "controls.filter.use-most-recent"
+msgstr "Utiliser le plus récent"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.filters.interactive.calculation"
 msgstr "Permettre aux utilisateurs de changer de mode graphique"

app/locales/it/messages.po

@@ -421,7 +421,6 @@ msgstr "Descrizione"
 #: app/charts/shared/chart-data-filters.tsx
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/components/field.tsx
 msgid "controls.dimensionvalue.none"
 msgstr "Nessun filtro"
 
@@ -441,6 +440,10 @@ msgstr "Seleziona tutti"
 msgid "controls.filter.select.none"
 msgstr "Deseleziona tutto"
 
+#: app/configurator/components/field.tsx
+msgid "controls.filter.use-most-recent"
+msgstr "Usare il più recente"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.filters.interactive.calculation"
 msgstr "Consentire agli utenti di cambiare la modalità del grafico"

app/rdf/queries.ts

@@ -1,4 +1,3 @@
-import { SELECT } from "@tpluscode/sparql-builder";
 import { descending, group, index } from "d3";
 import { Maybe } from "graphql-tools";
 import keyBy from "lodash/keyBy";
@@ -39,6 +38,7 @@ import {
 } from "./parse";
 import {
   loadDimensionValues,
+  loadMaxDimensionValue,
   loadMinMaxDimensionValues,
 } from "./query-dimension-values";
 import { loadResourceLabels } from "./query-labels";
@@ -343,10 +343,13 @@ export const getCubeDimensionValuesWithMetadata = async ({
     const loaders = [
       filters ? undefined : () => dimension.in ?? [],
       () =>
-        loadDimensionValues(
-          { datasetIri: cube.term, dimension, cube, sparqlClient },
-          filters
-        ),
+        loadDimensionValues({
+          datasetIri: cube.term,
+          dimension,
+          cube,
+          sparqlClient,
+          filters,
+        }),
     ].filter(truthy);
 
     for (const loader of loaders) {
@@ -864,27 +867,15 @@ const buildFilters = async ({
       switch (filter.type) {
         case "single": {
           if (isDynamicMaxValue(filter.value)) {
-            if (cubeDimension.maxInclusive) {
-              return [
-                filterDimension.filter.eq(
-                  toRDFValue(cubeDimension.maxInclusive.value)
-                ),
-              ];
-            }
-
-            // Ideally we would query the max value directly in the observations
-            // query, but it doesn't seem to be supported by the cube-view-query
-            const maxValueQuery = SELECT`(MAX(?value) as ?value)`
-              .WHERE` <${cube.term?.value}> <https://cube.link/observationSet> ?observationSet .
-  ?observationSet <https://cube.link/observation> ?source .
-  ?source <${cubeDimension.path?.value}> ?value .`;
-            const maxValueRaw = await maxValueQuery.execute(
-              sparqlClient.query,
-              { operation: "postUrlencoded" }
-            );
-            const maxValue = maxValueRaw?.[0]?.value?.value as string;
-
-            return [filterDimension.filter.eq(toRDFValue(maxValue))];
+            const maxValue = await loadMaxDimensionValue({
+              datasetIri: cube.term,
+              dimension: cubeDimension,
+              cube,
+              sparqlClient,
+              filters,
+            });
+
+            return [filterDimension.filter.eq(toRDFValue(maxValue[0].value))];
           }
 
           return [filterDimension.filter.eq(toRDFValue(`${filter.value}`))];