refactor: remove grayscale utility and update color handling in DatasetMenu and MultiSelectFilter (#379)

Author: vbaroni

apps/frontend/src/components/map-menu/DatasetMenu.tsx

@@ -9,7 +9,7 @@ import { FilterField } from '../keplerGl/factories';
 import { MenuIcon } from './MenuIcon';
 import { FilterFactory } from './FilterFactory';
 import { LayerConfigChange, MenuSectionHeading } from './MapMenu';
-import { grayscale, rgbToHsl, toCss } from '../../utils/color';
+import { rgbToHsl, toCss } from '../../utils/color';
 
 const ToggleVisibilityMenuIcon = styled(({ visible, ...props }) => (
   <MenuIcon {...props}>{visible ? 'OUI' : 'NON'}</MenuIcon>
@@ -76,7 +76,7 @@ export const DatasetMenu = ({
   };
 
   const hslLayerColor = rgbToHsl(layer.config.color);
-  const hslColor = !layer.config.isVisible ? grayscale(hslLayerColor) : hslLayerColor;
+  const hslColor = !layer.config.isVisible ? rgbToHsl([230, 230, 230]) : hslLayerColor;
   const hslCssColor = toCss(hslColor);
 
   return (

apps/frontend/src/components/map-menu/MultiSelectFillter.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
-import { grayscale, rgbToHsl, toCss } from '../../utils/color';
+import { rgbToHsl, toCss } from '../../utils/color';
 
 export const MultiSelectFilterOption = styled(({ hslCssColor, selected, ...props }) => <button {...props} />)`
   display: inline;
@@ -40,7 +40,7 @@ export const MultiSelectFilter = styled(({ idx, filter, setFilter, layer, ...pro
   );
 
   const hslLayerColor = rgbToHsl(layer.config.color);
-  const hslColor = !layer.config.isVisible ? grayscale(hslLayerColor) : hslLayerColor;
+  const hslColor = !layer.config.isVisible ? rgbToHsl([230, 230, 230]) : hslLayerColor;
   const hslCssColor = toCss(hslColor);
 
   return (

apps/frontend/src/utils/color.ts

@@ -40,5 +40,4 @@ export function rgbToHsl([r, g, b]: [r: number, g: number, b: number]): [number,
   return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
 }
 
-export const grayscale = ([h, s, l]: [h: number, s: number, l: number]): [number, number, number] => [0, 0, l / 2];
 export const toCss = ([h, s, l]: [h: number, s: number, l: number]) => `${h}, ${s}%, ${l}%`;