[client] gauge & emotional plot for time selection (no default value)

Universite-Gustave-Eiffel · Mar 12, 2024 · ead7936 · ead7936
1 parent 16355fa
commit ead7936
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/packages/client/src/components/project/map/AcousticFeatureCircles.tsx b/packages/client/src/components/project/map/AcousticFeatureCircles.tsx
@@ -22,15 +22,16 @@ export const AcousticFeatureCircles: FC<{ feature: Feature; currentTimeKey?: str
 
       let value = undefined;
       if (feature.properties) {
-        // default is the generic value
-        if (!isNil(feature.properties[variable.variable])) value = toNumber(feature.properties[variable.variable]);
         // if time is specified, we try to get it
-        if (
-          currentTimeKey &&
-          feature.properties[currentTimeKey] &&
-          !isNil(feature.properties[currentTimeKey][variable.variable])
-        )
-          value = toNumber(feature.properties[currentTimeKey][variable.variable]);
+        if (currentTimeKey) {
+          if (feature.properties[currentTimeKey] && !isNil(feature.properties[currentTimeKey][variable.variable])) {
+            value = toNumber(feature.properties[currentTimeKey][variable.variable]);
+          }
+        } else {
+          if (!isNil(feature.properties[variable.variable])) {
+            value = toNumber(feature.properties[variable.variable]);
+          }
+        }
       }
 
       return {

diff --git a/packages/client/src/components/project/map/EmotionFeatureScatterPlot.tsx b/packages/client/src/components/project/map/EmotionFeatureScatterPlot.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useMemo } from "react";
 import { Feature } from "geojson";
 import { useT } from "@transifex/react";
-import { toNumber } from "lodash";
+import { isNil, toNumber } from "lodash";
 
 import { SOUNDSCAPE_VARIABLES_TYPES } from "@lasso/dataprep";
 import { useCurrentProject } from "../../../hooks/useCurrentProject";
@@ -21,6 +21,13 @@ export const EmotionFeatureScatterPlot: FC<EmotionFeatureScatterPlotProps> = ({
   const t = useT();
   const { project } = useCurrentProject();
 
+  const hasEmotionsData = useMemo(() => {
+    if (feature.properties) {
+      return !isNil(feature.properties.emotion_pleasant) || !isNil(feature.properties.emotion_eventful);
+    }
+    return false;
+  }, [feature]);
+
   const getColorFunctionForVariable = useCallback(
     (variable: SOUNDSCAPE_VARIABLES_TYPES) => {
       return (value: number) => {
@@ -39,32 +46,29 @@ export const EmotionFeatureScatterPlot: FC<EmotionFeatureScatterPlotProps> = ({
     let data: { pleasant?: number; eventful?: number } = { pleasant: undefined, eventful: undefined };
 
     if (feature.properties) {
-      // default value is the generic one
-      if (feature.properties.emotion_pleasant !== undefined && feature.properties.emotion_eventful !== undefined) {
+      if (currentTimeKey) {
+        if (feature.properties[currentTimeKey]) {
+          data = {
+            pleasant: feature.properties[currentTimeKey]["emotion_pleasant"]
+              ? toNumber(feature.properties[currentTimeKey]["emotion_pleasant"])
+              : undefined,
+            eventful: feature.properties[currentTimeKey]["emotion_eventful"]
+              ? toNumber(feature.properties[currentTimeKey]["emotion_eventful"])
+              : undefined,
+          };
+        }
+      } else {
         data = { pleasant: feature.properties.emotion_pleasant, eventful: feature.properties.emotion_eventful };
       }
-
-      // if time is specified and data exist we take it
-      if (
-        currentTimeKey &&
-        feature.properties[currentTimeKey] &&
-        feature.properties[currentTimeKey]["emotion_pleasant"] &&
-        feature.properties[currentTimeKey]["emotion_eventful"]
-      ) {
-        data = {
-          pleasant: toNumber(feature.properties[currentTimeKey]["emotion_pleasant"]),
-          eventful: toNumber(feature.properties[currentTimeKey]["emotion_eventful"]),
-        };
-      }
     }
     return data;
   }, [feature, currentTimeKey]);
-//<h6>{t("Emotions plot")}</h6> 
+
   return (
     <>
-      {value.eventful !== undefined && value.pleasant !== undefined && (
+      {hasEmotionsData && (
         <div>
-          <h6>{t("Emotions plot")}</h6> 
+          <h6>{t("Emotions plot")}</h6>
           <EmotionScatterPlot
             evenfulAxis={{
               arrow: true,