Feat/Co2 intensity filtering (#8245)

kumarabinash · web-flow · commit ea0648cbfb57 · 2025-07-02T11:14:51.000+02:00
* Added feature to filter Co2 Intensity through a slider in legend

* Removed temporary code

* Refactored code to remove fixed height for the slider track

* Resolved comments.
- Updated Icon
- Extracted default value to const and memoized

And

- Fixed alignment issue
diff --git a/web/src/components/RangeSlider.stories.tsx b/web/src/components/RangeSlider.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+import RangeSlider, { RangeSliderProps } from './RangeSlider';
+
+const meta: Meta<typeof RangeSlider> = {
+  title: 'basics/RangeSlider',
+  component: RangeSlider,
+};
+
+export default meta;
+
+function SliderWithControls(arguments_: RangeSliderProps) {
+  const [value, setValue] = useState<number[]>(arguments_.value);
+
+  const handleOnSelectedIndexChange = (selectedIndex: number[]) => {
+    setValue(selectedIndex);
+  };
+
+  useEffect(() => {
+    setValue(arguments_.value);
+  }, [arguments_.value]);
+
+  return (
+    <RangeSlider {...arguments_} value={value} onChange={handleOnSelectedIndexChange} />
+  );
+}
+
+export const Default = SliderWithControls.bind({}) as StoryObj;
+Default.args = {
+  value: [0, 10],
+};
+
+export const WithCustomStepComponent = SliderWithControls.bind({}) as StoryObj;
+WithCustomStepComponent.args = {
+  value: [0, 20],
+  step: 20,
+  trackComponent: (
+    <div className="h-2 w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
+  ),
+};
+
+export const WithTrackComponent = SliderWithControls.bind({}) as StoryObj;
+WithTrackComponent.args = {
+  value: [0, 20],
+  trackComponent: (
+    <div className="h-2 w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
+  ),
+};
diff --git a/web/src/components/RangeSlider.tsx b/web/src/components/RangeSlider.tsx
@@ -0,0 +1,76 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { ChevronFirst, ChevronLast } from 'lucide-react';
+import { memo, type ReactElement } from 'react';
+
+import LabelTooltip from './tooltips/LabelTooltip';
+import TooltipWrapper from './tooltips/TooltipWrapper';
+
+export interface RangeSliderProps {
+  onChange: (values: number[]) => void;
+  defaultValue: number[];
+  maxValue: number;
+  step: number;
+  value: number[];
+  trackComponent?: string | ReactElement;
+}
+
+function RangeSlider({
+  onChange,
+  defaultValue,
+  maxValue,
+  step,
+  value,
+  trackComponent,
+}: RangeSliderProps): ReactElement {
+  return (
+    <Tooltip.Provider delayDuration={0}>
+      <SliderPrimitive.Root
+        defaultValue={defaultValue}
+        max={maxValue}
+        step={step}
+        value={value}
+        onValueChange={onChange}
+        aria-label="select range"
+        className="relative flex w-full touch-none hover:cursor-pointer"
+        minStepsBetweenThumbs={1}
+      >
+        <SliderPrimitive.Track className="pointer-events-none relative w-full rounded-md">
+          {trackComponent ?? (
+            <div className="h-2 w-full bg-neutral-100 dark:bg-neutral-600"></div>
+          )}
+        </SliderPrimitive.Track>
+
+        <TooltipWrapper
+          tooltipContent={<LabelTooltip className={'text-xs'}>{value[0]}</LabelTooltip>}
+          side="top"
+          sideOffset={4}
+        >
+          <SliderPrimitive.Thumb
+            data-testid="range-slider-input-1"
+            className="-ml-2.5 -mt-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-white p-1 outline
+           outline-1 outline-neutral-200 hover:outline-2 focus-visible:outline-2 focus-visible:outline-brand-green dark:bg-neutral-900 dark:outline-neutral-700 dark:focus-visible:outline-brand-green"
+          >
+            <ChevronFirst strokeWidth={3} size={12} pointerEvents="none" />
+          </SliderPrimitive.Thumb>
+        </TooltipWrapper>
+
+        <TooltipWrapper
+          tooltipContent={<LabelTooltip className={'text-xs'}>{value[1]}</LabelTooltip>}
+          side="top"
+          sideOffset={4}
+        >
+          <SliderPrimitive.Thumb
+            data-testid="range-slider-input-2"
+            className="-mr-2.5 -mt-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-white p-1 outline
+           outline-1 outline-neutral-200 hover:outline-2 focus-visible:outline-2 focus-visible:outline-brand-green dark:bg-neutral-900 dark:outline-neutral-700 dark:focus-visible:outline-brand-green"
+          >
+            <ChevronLast strokeWidth={3} size={12} pointerEvents="none" />
+          </SliderPrimitive.Thumb>
+        </TooltipWrapper>
+      </SliderPrimitive.Root>
+    </Tooltip.Provider>
+  );
+}
+
+export default memo(RangeSlider);
diff --git a/web/src/components/legend/Co2Legend.tsx b/web/src/components/legend/Co2Legend.tsx
@@ -1,20 +1,71 @@
+import { extent } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
 import { useCo2ColorScale } from 'hooks/theme';
-import { memo, type ReactElement } from 'react';
+import { useAtom } from 'jotai/index';
+import { memo, type ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CarbonUnits } from 'utils/units';
 
-import HorizontalColorbar from './ColorBar';
+import { useFeatureFlag } from '../../features/feature-flags/api';
+import { co2IntensityRangeAtom } from '../../utils/state/atoms';
+import RangeSlider from '../RangeSlider';
+import HorizontalColorbar, { spreadOverDomain } from './ColorBar';
 import { LegendItem } from './LegendItem';
 
+const TICKS_COUNT = 6;
+
 function Co2Legend(): ReactElement {
+  const isCo2IntensityFilteringFeatureEnabled = useFeatureFlag(
+    'legend-co2-intensity-filtering'
+  );
   const { t } = useTranslation();
   const co2ColorScale = useCo2ColorScale();
+
+  const rangeValues = useMemo(
+    () =>
+      spreadOverDomain(
+        scaleLinear().domain(
+          extent(co2ColorScale.domain()) as unknown as [number, number]
+        ),
+        TICKS_COUNT
+      ),
+    [co2ColorScale]
+  );
+
+  const [co2IntensityRange, setCo2IntensityRange] = useAtom(co2IntensityRangeAtom);
+  const defaultValue = useMemo(
+    () => [rangeValues.at(0) as number, rangeValues.at(-1) as number],
+    [rangeValues]
+  );
+
   return (
     <LegendItem
       label={t('legends.carbonintensity')}
       unit={CarbonUnits.GRAMS_CO2EQ_PER_KILOWATT_HOUR}
     >
-      <HorizontalColorbar colorScale={co2ColorScale} ticksCount={6} id={'co2'} />
+      {isCo2IntensityFilteringFeatureEnabled ? (
+        <RangeSlider
+          value={co2IntensityRange}
+          defaultValue={defaultValue}
+          onChange={setCo2IntensityRange}
+          maxValue={rangeValues.at(-1) as number}
+          step={20}
+          trackComponent={
+            <HorizontalColorbar
+              colorScale={co2ColorScale}
+              ticksCount={TICKS_COUNT}
+              id={'co2'}
+              labelClassNames="mt-1"
+            />
+          }
+        />
+      ) : (
+        <HorizontalColorbar
+          colorScale={co2ColorScale}
+          ticksCount={TICKS_COUNT}
+          id={'co2'}
+        />
+      )}
     </LegendItem>
   );
 }
diff --git a/web/src/components/legend/ColorBar.tsx b/web/src/components/legend/ColorBar.tsx
@@ -16,10 +16,12 @@ function HorizontalColorbar({
   colorScale,
   id,
   ticksCount = 5,
+  labelClassNames = '',
 }: {
   colorScale: ScaleLinear<string, string, string>;
   id: string;
   ticksCount?: number;
+  labelClassNames?: string;
 }) {
   const linearScale = scaleLinear().domain(
     extent(colorScale.domain()) as unknown as [number, number]
@@ -28,7 +30,7 @@ function HorizontalColorbar({
   return (
     <>
       <svg className="flex h-3 w-full flex-col overflow-visible">
-        <g transform={`translate(8,0)`}>
+        <g transform={`translate(10,0)`}>
           <linearGradient id={`${id}-gradient`} x2="100%">
             {spreadOverDomain(colorScale, 10).map((value, index) => (
               <stop key={value} offset={index / 9} stopColor={colorScale(value)} />
@@ -44,7 +46,7 @@ function HorizontalColorbar({
         </g>
       </svg>
 
-      <div className="flex flex-row justify-between pr-0.5">
+      <div className={`flex flex-row justify-between ${labelClassNames}`}>
         {spreadOverDomain(linearScale, ticksCount).map((t) => (
           <div
             key={t}
diff --git a/web/src/features/feature-flags/api.ts b/web/src/features/feature-flags/api.ts
@@ -9,6 +9,5 @@ export function useFeatureFlags(): FeatureFlags {
 
 export function useFeatureFlag(name: string): boolean {
   const { features } = useMeta();
-
   return features?.[name] || false;
 }
diff --git a/web/src/features/map/Map.tsx b/web/src/features/map/Map.tsx
@@ -14,18 +14,21 @@ import { ErrorEvent, Map, MapRef } from 'react-map-gl/maplibre';
 import { useLocation, useParams } from 'react-router-dom';
 import { RouteParameters } from 'types';
 import {
+  filterCarbonIntensity,
   getCarbonIntensity,
   useNavigateWithParameters,
   useUserLocation,
 } from 'utils/helpers';
 import {
+  co2IntensityRangeAtom,
   isConsumptionAtom,
   selectedDatetimeStringAtom,
   spatialAggregateAtom,
   userLocationAtom,
 } from 'utils/state/atoms';
 
 import { useCo2ColorScale, useTheme } from '../../hooks/theme';
+import { useFeatureFlag } from '../feature-flags/api';
 import BackgroundLayer from './map-layers/BackgroundLayer';
 import StatesLayer from './map-layers/StatesLayer';
 import ZonesLayer from './map-layers/ZonesLayer';
@@ -63,6 +66,7 @@ interface ExtendedWindow extends Window {
 // We could even consider not changing it hear, but always reading it from the path parameter?
 export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
   const setIsMoving = useSetAtom(mapMovingAtom);
+  const co2IntensityRange = useAtomValue(co2IntensityRangeAtom);
   const setMousePosition = useSetAtom(mousePositionAtom);
   const [isLoadingMap, setIsLoadingMap] = useAtom(loadingMapAtom);
   const [hoveredZone, setHoveredZone] = useAtom(hoveredZoneAtom);
@@ -90,6 +94,9 @@ export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
   const onMapReferenceChange = useCallback((reference: MapRef) => {
     setMapReference(reference);
   }, []);
+  const isCo2IntensityFilteringFeatureEnabled = useFeatureFlag(
+    'legend-co2-intensity-filtering'
+  );
 
   useEffect(() => {
     let subscription: PluginListenerHandle | null = null;
@@ -181,7 +188,16 @@ export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
     for (const feature of worldGeometries.features) {
       const { zoneId } = feature.properties;
       const zone = data?.datetimes[selectedDatetimeString]?.z[zoneId];
-      const co2intensity = zone ? getCarbonIntensity(zone, isConsumption) : undefined;
+
+      let co2intensity = zone ? getCarbonIntensity(zone, isConsumption) : undefined;
+
+      co2intensity = filterCarbonIntensity(
+        isCo2IntensityFilteringFeatureEnabled,
+        co2intensity,
+        co2IntensityRange[0],
+        co2IntensityRange[1]
+      );
+
       const fillColor = co2intensity
         ? getCo2colorScale(co2intensity)
         : theme.clickableFill;
@@ -216,6 +232,8 @@ export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
     theme.clickableFill,
     selectedDatetimeString,
     isConsumption,
+    co2IntensityRange,
+    isCo2IntensityFilteringFeatureEnabled,
   ]);
 
   useEffect(() => {
diff --git a/web/src/utils/helpers.test.ts b/web/src/utils/helpers.test.ts
@@ -13,6 +13,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { TimeRange } from './constants';
 import {
   dateToDatetimeString,
+  filterCarbonIntensity,
   getCarbonIntensity,
   getDestinationPath,
   getFossilFuelRatio,
@@ -424,3 +425,29 @@ describe('getLocalTime', () => {
     expect(result).toEqual({ localHours: 8, localMinutes: 0 });
   });
 });
+
+describe('filterCarbonIntensity', () => {
+  it('should return carbon intensity if feature is not enabled', () => {
+    const result = filterCarbonIntensity(false, 420, 1, 10);
+
+    expect(result).toEqual(420);
+  });
+
+  it('should return undefined if carbon intensity is undefined', () => {
+    const result = filterCarbonIntensity(false, undefined, 1, 10);
+    expect(result).toBeUndefined();
+  });
+
+  it.each([
+    [10, 10, 1, 10],
+    [undefined, 10, 1, 9],
+    [10, 10, 10, 20],
+    [undefined, 10, 11, 20],
+  ])(
+    'should return %s for given co2Intensity of %s, min %s and max %s',
+    (expected, co2Intensity, min, max) => {
+      const result = filterCarbonIntensity(true, co2Intensity, min, max);
+      expect(result).toBe(expected);
+    }
+  );
+});
diff --git a/web/src/utils/helpers.ts b/web/src/utils/helpers.ts
@@ -187,6 +187,30 @@ export const getCarbonIntensity = (
   isConsumption: boolean
 ): number => (isConsumption ? zoneData?.c?.ci : zoneData?.p?.ci) ?? Number.NaN;
 
+/**
+ * Returns carbon intensity within given range if feature is enabled
+ * @param isFeatureEnabled
+ * @param co2intensity
+ * @param min
+ * @param max
+ */
+export const filterCarbonIntensity = (
+  isFeatureEnabled: boolean,
+  co2intensity: number | undefined,
+  min: number,
+  max: number
+): number | undefined => {
+  if (!isFeatureEnabled) {
+    return co2intensity;
+  }
+
+  if (co2intensity && (co2intensity < min || co2intensity > max)) {
+    return undefined;
+  }
+
+  return co2intensity;
+};
+
 /**
  * Returns the renewable ratio of a zone
  * @param zoneData - The zone data
diff --git a/web/src/utils/state/atoms.ts b/web/src/utils/state/atoms.ts
@@ -20,6 +20,9 @@ import {
 
 export const timeRangeAtom = atom<TimeRange>(TimeRange.H72);
 
+// TODO: Maintain constants for lower and upper limits for co2 intensity and use from there
+export const co2IntensityRangeAtom = atom([0, 1500]);
+
 export function useTimeRangeSync() {
   const [timeRange, setTimeRange] = useAtom(timeRangeAtom);
   const { resolution, urlTimeRange } = useParams<RouteParameters>();

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,5 @@ export function useFeatureFlags(): FeatureFlags {`
`9`	`9`
`10`	`10`	`export function useFeatureFlag(name: string): boolean {`
`11`	`11`	`const { features } = useMeta();`
`12`		`-`
`13`	`12`	`return features?.[name] \|\| false;`
`14`	`13`	`}`