Fix displaying wrong specie label. Raise selected circle

Vizzuality · May 4, 2023 · e367f75 · e367f75
1 parent b4fc064
commit e367f75
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 22 deletions.
diff --git a/src/containers/modals/species-analysis-modal/component.tsx b/src/containers/modals/species-analysis-modal/component.tsx
@@ -25,7 +25,7 @@ function SpeciesAnalysisModal({
   loading,
   cardProps,
   speciesData,
-  setSpecieBySliceNumber,
+  setSpecieById,
 }: SpeciesModalProps) {
   const [globalRangeSelected, setGlobalRangeSelected] = useState({
     min: 3,
@@ -112,7 +112,7 @@ function SpeciesAnalysisModal({
                   globalRangeSelected={globalRangeSelected}
                   SPSSelected={SPSSelected}
                   speciesData={speciesData}
-                  setSpecieBySliceNumber={setSpecieBySliceNumber}
+                  setSpecieById={setSpecieById}
                 />
               </div>
               <SpsLegend

diff --git a/src/containers/modals/species-analysis-modal/sps-chart/sps-chart-component.tsx b/src/containers/modals/species-analysis-modal/sps-chart/sps-chart-component.tsx
@@ -20,15 +20,14 @@ function SpsChart({
   SPSSelected,
   globalRangeSelected,
   speciesData,
-  setSpecieBySliceNumber,
+  setSpecieById,
 }: SPSChartProps) {
   const [tooltipPosition, setTooltipPosition] = useState<
     { top: number; left: number } | undefined
   >();
   const [tooltipText, setTooltipText] = useState<string | undefined>();
   const { id: selectedSpeciesId }: { id: string } = selectedSpecies;
   const height: number = useMemo(() => width / 2 + HEIGHT_PADDING, [width]);
-
   if (!data) return null;
 
   useD3Effect({
@@ -39,7 +38,7 @@ function SpsChart({
     data,
     setTooltipPosition,
     setTooltipText,
-    setSpecieBySliceNumber,
+    setSpecieById,
     speciesData,
     styles,
     height,

diff --git a/src/containers/modals/species-analysis-modal/sps-chart/sps-chart-hooks.ts b/src/containers/modals/species-analysis-modal/sps-chart/sps-chart-hooks.ts
@@ -80,7 +80,7 @@ export const useD3Effect = ({
   data,
   setTooltipPosition,
   setTooltipText,
-  setSpecieBySliceNumber,
+  setSpecieById,
   speciesData,
   styles,
 }: {
@@ -92,7 +92,7 @@ export const useD3Effect = ({
   data: SPSChartProps['data'];
   setTooltipPosition: (tooltipPosition: { top: number; left: number }) => void;
   setTooltipText: (tooltipText: string) => void;
-  setSpecieBySliceNumber: (sliceNumber: number) => void;
+  setSpecieById: (id: string) => void;
   speciesData: SPSChartProps['speciesData'];
   styles: {
     [className: string]: string;
@@ -231,7 +231,7 @@ export const useD3Effect = ({
         .data(data)
         .enter()
         .append('g')
-        .attr('id', (d: SPSData) => `point-${d.SliceNumber}`)
+        .attr('id', (d: SPSData) => `point-${d.id}`)
         .attr('transform', getPointPosition)
         .append('circle')
         .attr('class', styles.point)
@@ -257,9 +257,7 @@ export const useD3Effect = ({
         )
         .on('mouseenter', (d: SPSData) => {
           if (speciesData) {
-            const specie: SpeciesData = speciesData.find(
-              (s) => s.sliceNumber === d.SliceNumber
-            );
+            const specie: SpeciesData = speciesData.find((s) => s.id === d.id);
             const PADDING_LEFT = 5;
             const TOP_PADDING_CENTER = 25;
             setTooltipText(specie.name);
@@ -275,8 +273,12 @@ export const useD3Effect = ({
           setTooltipText(undefined);
         })
         .on('click', (d: SPSData) => {
-          setSpecieBySliceNumber(d.SliceNumber);
+          setSpecieById(d.id);
         });
+
+      // Raise selected point so we can see it clearly over the rest
+      const selectedPoint = points.select(`#point-${selectedSpeciesId}`);
+      selectedPoint.raise();
     };
 
     // Recalculate on change
@@ -313,7 +315,7 @@ export const useD3Effect = ({
     data,
     setTooltipPosition,
     setTooltipText,
-    setSpecieBySliceNumber,
+    setSpecieById,
     speciesData,
   ]);
 };
diff --git a/src/containers/modals/species-analysis-modal/sps-chart/types.d.ts b/src/containers/modals/species-analysis-modal/sps-chart/types.d.ts
@@ -12,5 +12,5 @@ export type SPSChartProps = {
   SPSSelected: Range;
   globalRangeSelected: Range;
   speciesData: SpeciesData[];
-  setSpecieBySliceNumber: (sliceNumber: number) => void;
+  setSpecieById: (id: string) => void;
 };
diff --git a/src/containers/modals/species-analysis-modal/types.d.ts b/src/containers/modals/species-analysis-modal/types.d.ts
@@ -60,5 +60,5 @@ export type SpeciesModalProps = {
     selectedSpeciesFilter: { label: string; slug: string };
   };
   speciesData: SpeciesData[];
-  setSpecieBySliceNumber: (sliceNumber: number) => void;
+  setSpecieById: (id: string) => void;
 };
diff --git a/src/containers/sidebars/aoi-sidebar/species-card/component.jsx b/src/containers/sidebars/aoi-sidebar/species-card/component.jsx
@@ -39,7 +39,7 @@ function Component(props) {
     selectedSpeciesFilter,
     individualSpeciesData,
     handleNextSpeciesSelection,
-    setSpecieBySliceNumber,
+    setSpecieById,
     handlePreviousSpeciesSelection,
     previousImage,
     nextImage,
@@ -314,7 +314,7 @@ function Component(props) {
                     contextualData={contextualData}
                     cardProps={props}
                     speciesData={speciesData && speciesData.species}
-                    setSpecieBySliceNumber={setSpecieBySliceNumber}
+                    setSpecieById={setSpecieById}
                     selectedSpeciesFilter={selectedSpeciesFilter}
                   />
                 </div>

diff --git a/src/containers/sidebars/aoi-sidebar/species-card/index.js b/src/containers/sidebars/aoi-sidebar/species-card/index.js
@@ -329,17 +329,15 @@ function SpeciesCardContainer(props) {
     }
   }, [selectedSpecies, locale, SPSData]);
 
-  const setSpecieBySliceNumber = (sliceNumber) => {
-    setSelectedSpecies(
-      speciesToDisplay.find((s) => s.sliceNumber === sliceNumber)
-    );
+  const setSpecieById = (id) => {
+    setSelectedSpecies(speciesToDisplay.find((s) => s.id === id));
   };
   return (
     <Component
       speciesFilters={speciesFilters}
       placeholderText={placeholderText}
       individualSpeciesData={individualSpeciesData}
-      setSpecieBySliceNumber={setSpecieBySliceNumber}
+      setSpecieById={setSpecieById}
       speciesToDisplay={speciesToDisplay}
       setSpeciesFilter={setSpeciesFilter}
       selectedSpeciesFilter={selectedSpeciesFilter}