wip

src/components/Map/components/RangeFilter.tsx

@@ -42,7 +42,7 @@ const RangeFilter = memo(
     const ref = useRef<HTMLDivElement>(null);
 
     // This is needed because DSFR does not give ability to change it through a prop
-    const reformatRangeOutput = useCallback(
+    const reformatRangeOutputText = useCallback(
       (min: number, max: number) => {
         const updateRangeText = () => {
           const textToUpdate = ref.current?.querySelector('.fr-range__output');
@@ -61,19 +61,42 @@ const RangeFilter = memo(
 
     useEffect(() => {
       // Everytime value changes, reformat displayed values
-      reformatRangeOutput(values[0], values[1]);
+      reformatRangeOutputText(values[0], values[1]);
     }, [values[0], values[1]]);
 
     useEffect(() => {
-      // DSFR component does not redraw the full background when resetting values
+      // DSFR component does not redraw the full colored background when resetting values
       // This is an attempt to fix it
       if (!ref.current) return;
 
-      const { style } = ref.current.querySelector('.fr-range') as HTMLElement;
+      const { style: rangeStyle } = ref.current.querySelector('.fr-range') as HTMLElement;
 
       if (values[0] === domain[0] && values[1] === domain[1]) {
-        style.setProperty('--progress-left', '0%');
-        style.setProperty('--progress-right', '100%');
+        const centerRangeOutput = () => {
+          const rangeOutput = ref.current?.querySelector('.fr-range__output') as HTMLElement;
+          console.log(''); //eslint-disable-line
+          console.log('╔════START════════════════════════════════════════════════════'); //eslint-disable-line
+          console.log(rangeOutput.style); //eslint-disable-line
+          console.log(rangeOutput.style.transform); //eslint-disable-line
+          console.log('╚════END══════════════════════════════════════════════════════'); //eslint-disable-line
+
+          if (rangeOutput && rangeOutput.style.transform !== '') {
+            rangeOutput.style.setProperty('display', 'block');
+            rangeOutput.style.setProperty('margin', '0 auto');
+            rangeOutput.style.removeProperty('transform');
+            return;
+          }
+          // Retry after 50ms if the element is not found
+          setTimeout(centerRangeOutput, 50);
+        };
+
+        centerRangeOutput();
+        rangeStyle.setProperty('--progress-left', '0%');
+        rangeStyle.setProperty('--progress-right', '100%');
+      } else {
+        const { style: rangeOutputStyle } = ref.current.querySelector('.fr-range__output') as HTMLElement;
+        rangeOutputStyle.removeProperty('display');
+        rangeOutputStyle.removeProperty('margin');
       }
     }, [values, domain, ref.current]);
 

src/components/Map/components/ReseauxDeChaleurFilters.tsx

@@ -6,7 +6,7 @@ import useFCUMap from '@components/Map/MapProvider';
 import Accordion from '@components/ui/Accordion';
 import Button from '@components/ui/Button';
 import Divider from '@components/ui/Divider';
-import { FiltreEnergieConfKey, filtresEnergies, percentageMaxInterval } from 'src/services/Map/map-configuration';
+import { emptyMapConfiguration, FiltreEnergieConfKey, filtresEnergies, percentageMaxInterval } from 'src/services/Map/map-configuration';
 
 import { DeactivatableBox } from './SimpleMapLegend.style';
 
@@ -25,6 +25,13 @@ function ReseauxDeChaleurFilters() {
       ...mapConfiguration,
       reseauxDeChaleur: {
         ...mapConfiguration.reseauxDeChaleur,
+        ...filtresEnergies.reduce(
+          (acc, filtreEnergie) => ({
+            ...acc,
+            [`energie_ratio_${filtreEnergie.confKey}`]: emptyMapConfiguration.reseauxDeChaleur[`energie_ratio_${filtreEnergie.confKey}`],
+          }),
+          {}
+        ),
         ...mapConfiguration.reseauxDeChaleur.limits,
       },
     });

src/services/Map/map-configuration.ts

@@ -138,7 +138,7 @@ export const percentageMaxInterval: Interval = [0, 100];
 export const defaultInterval: Interval = [Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
 export const communesFortPotentielPourCreationReseauxChaleurInterval: Interval = [0, 100_000];
 
-const emptyMapConfiguration: EmptyMapConfiguration = {
+export const emptyMapConfiguration: EmptyMapConfiguration = {
   filtreIdentifiantReseau: [],
   filtreGestionnaire: [],
   reseauxDeChaleur: {