optimizing legend scale calculation

client/src/containers/analysis-visualization/analysis-map/component.tsx

@@ -22,11 +22,18 @@ import type { MapStyle } from 'components/map/types';
 import type { BasemapValue } from 'components/map/controls/basemap/types';
 import type { Layer, Legend as LegendType } from 'types';
 
-const getValueInRange = (value: number, legendInfo: LegendType): string => {
-  const threshold = legendInfo.items.map((item) => item.value);
-  const rangeValues = legendInfo.items.map((item) => item.label);
-  const scale = scaleByLegendType(legendInfo?.type, threshold as number[], rangeValues);
-  return scale(value);
+const getLegendScale = (legendInfo: LegendType) => {
+  if (legendInfo?.type === 'range' || legendInfo?.type === 'category') {
+    const threshold = legendInfo.items.map((item) => item.value);
+    const rangeValues = legendInfo.items.map((item) => item.label);
+    const scale = scaleByLegendType(legendInfo?.type, threshold as number[], rangeValues);
+    return scale;
+  }
+  return (value: number) => {
+    if (!value) return null;
+    if (!Number.isNaN(value)) return NUMBER_FORMAT(Number(value));
+    return value.toString();
+  };
 };
 
 const AnalysisMap = () => {
@@ -38,34 +45,40 @@ const AnalysisMap = () => {
   const handleViewState = useCallback((viewState: ViewState) => setViewState(viewState), []);
   const [tooltipData, setTooltipData] = useState(null);
 
+  // Pre-Calculating legend scales
+  const legendScales = useMemo(() => {
+    const scales = {};
+    Object.values(layers).forEach((layer) => {
+      scales[layer.id] = getLegendScale(layer.metadata?.legend);
+    });
+    return scales;
+  }, [layers]);
+
   // Loading layers
   const { isError, isFetching } = useImpactLayer();
 
   const onHoverLayer = useCallback(
     (
       { object, coordinate, viewport, x, y }: Parameters<H3HexagonLayerProps['onHover']>[0],
-      metadata: Layer['metadata'],
+      metadata: Layer['metadata'] & { layerId?: string },
     ): void => {
-      const v =
-        metadata?.legend?.type === 'range'
-          ? getValueInRange(object?.v, metadata?.legend)
-          : NUMBER_FORMAT(Number(object?.v));
-
       setTooltipData({
         x,
         y,
         viewport,
         data: {
           ...object,
-          v,
+          v: legendScales[metadata?.layerId]
+            ? legendScales[metadata?.layerId](object?.v)
+            : object?.v,
           coordinate,
           name: metadata?.name || metadata?.legend.name,
           unit: metadata?.legend?.unit,
           legend: metadata?.legend,
         },
       });
     },
-    [setTooltipData],
+    [legendScales],
   );
 
   const handleMapStyleChange = useCallback((newStyle: BasemapValue) => {

client/src/containers/analysis-visualization/analysis-map/layers/contextual/hooks.ts

@@ -30,7 +30,10 @@ export function useLayer({
   }, [contextualData, id]);
 
   const settings = useMemo(() => layerDeckGLProps[id] || {}, [layerDeckGLProps, id]);
-  const metadata = useMemo(() => layersMetadata[id]['metadata'], [layersMetadata, id]);
+  const metadata = useMemo(
+    () => ({ layerId: id, ...layersMetadata[id]['metadata'] }),
+    [layersMetadata, id],
+  );
 
   const layer = useMemo(() => {
     return {

client/src/containers/analysis-visualization/analysis-map/layers/impact/hooks.ts

@@ -17,7 +17,10 @@ export function useLayer(props: LayerProps<LayerSettings>['settings']) {
   } = useImpactLayer();
 
   const settings = useMemo(() => layerDeckGLProps['impact'] || {}, [layerDeckGLProps]);
-  const metadata = useMemo(() => layersMetadata['impact']['metadata'], [layersMetadata]);
+  const metadata = useMemo(
+    () => ({ layerId: 'impact', ...layersMetadata['impact']['metadata'] }),
+    [layersMetadata],
+  );
 
   const layer = useMemo(() => {
     return {

client/src/containers/analysis-visualization/analysis-map/layers/material/hooks.ts

@@ -19,7 +19,10 @@ export function useLayer(props: LayerProps<LayerSettings>['settings']) {
   });
 
   const settings = useMemo(() => layerDeckGLProps['material'] || {}, [layerDeckGLProps]);
-  const metadata = useMemo(() => layersMetadata['material']['metadata'], [layersMetadata]);
+  const metadata = useMemo(
+    () => ({ layerId: 'material', ...layersMetadata['material']['metadata'] }),
+    [layersMetadata],
+  );
 
   const layer = useMemo(() => {
     return {