Show Animal Nickname in Capture/Mortality Map Popup

app/src/features/surveys/view/SurveyMapPopup.tsx

@@ -8,7 +8,7 @@ export interface ISurveyMapPopupProps {
   title: string;
   metadata: {
     label: string;
-    value: string | number;
+    value: string | number | null;
   }[];
 }
 

app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimal.tsx

@@ -20,8 +20,10 @@
 }
 
 /**
- * Component for displaying animal capture points on a map and in a table.
- * Retrieves and displays data related to animal captures for a specific survey.
+ * Container displaying map of captures and mortalities for animals in the Survey, and table of animals below the map
+ *
+ * @param {ISurveySpatialAnimalProps} props
+ * @returns
  */
 export const SurveySpatialAnimal = (props: ISurveySpatialAnimalProps) => {
   const surveyContext = useSurveyContext();
@@ -66,7 +68,7 @@
           properties: {}
         }
       })) ?? [],
-    popup: (feature) => <SurveySpatialAnimalCapturePopup feature={feature} />,
+    popup: (feature) => <SurveySpatialAnimalCapturePopup captureId={`${feature.id}`} />,
     tooltip: (feature) => <SurveyMapTooltip title="Animal Capture" key={`mortality-tooltip-${feature.id}`} />
   };
 
@@ -90,7 +92,7 @@
           properties: {}
         }
       })) ?? [],
-    popup: (feature) => <SurveySpatialAnimalMortalityPopup feature={feature} />,
+    popup: (feature) => <SurveySpatialAnimalMortalityPopup mortalityId={`${feature.id}`} />,
     tooltip: (feature) => <SurveyMapTooltip title="Animal Mortality" key={`capture-tooltip-${feature.id}`} />
   };
 
@@ -105,7 +107,7 @@
       </Box>
 
       {/* Display data table with animal capture details */}
-      <Box height={{ xs: 300, md: 500 }} display="flex">
+      <Box height={{ xs: 300, md: 500 }} display="flex" flexDirection="column">
         <SurveySpatialAnimalTable isLoading={geometryDataLoader.isLoading} />
       </Box>
     </>

app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalCapturePopup.tsx

@@ -1,37 +1,41 @@
-import { IStaticLayerFeature } from 'components/map/components/StaticLayers';
 import { DATE_FORMAT } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { SurveyMapPopup } from 'features/surveys/view/SurveyMapPopup';
 import { useCritterbaseApi } from 'hooks/useCritterbaseApi';
 import useDataLoader from 'hooks/useDataLoader';
-import { ICaptureResponse } from 'interfaces/useCritterApi.interface';
 import { Popup } from 'react-leaflet';
 
-export interface ISurveySpatialAnimalCapturePopupProps {
-  feature: IStaticLayerFeature;
+interface ISurveySpatialAnimalCapturePopupProps {
+  captureId: string;
 }
 
 /**
- * Renders a popup for animal capture data on the map.
+ * Returns information about a critter capture record, shown when a capture point is clicked on the map
  *
  * @param {ISurveySpatialAnimalCapturePopupProps} props
- * @return {*}
+ * @returns {*}
  */
 export const SurveySpatialAnimalCapturePopup = (props: ISurveySpatialAnimalCapturePopupProps) => {
-  const { feature } = props;
+  const { captureId } = props;
 
   const critterbaseApi = useCritterbaseApi();
 
-  const captureDataLoader = useDataLoader((captureId) => critterbaseApi.capture.getCapture(captureId));
+  const captureDataLoader = useDataLoader(() => critterbaseApi.capture.getCapture(captureId));
+  const animalDataLoader = useDataLoader(critterbaseApi.critters.getCritterSimple);
+
+  const formatPopupMetadata = () => {
+    if (!captureDataLoader.data || !animalDataLoader.data) return [];
+
+    const { capture_date, capture_time, capture_location } = captureDataLoader.data;
+    const { animal_id } = animalDataLoader.data;
 
-  const getCaptureMetadata = (capture: ICaptureResponse) => {
     return [
-      { label: 'Capture ID', value: String(capture.capture_id) },
-      { label: 'Date', value: dayjs(capture.capture_date).format(DATE_FORMAT.LongDateTimeFormat) },
-      { label: 'Time', value: String(capture.capture_time ?? '') },
+      { label: 'Nickname', value: animal_id },
+      { label: 'Date', value: dayjs(capture_date).format(DATE_FORMAT.LongDateTimeFormat) },
+      { label: 'Time', value: String(capture_time ?? '') },
       {
         label: 'Coordinates',
-        value: [capture.release_location?.latitude ?? null, capture.release_location?.longitude ?? null]
+        value: [capture_location?.latitude, capture_location?.longitude]
           .filter((coord): coord is number => coord !== null)
           .map((coord) => coord.toFixed(6))
           .join(', ')
@@ -45,15 +49,17 @@
       closeButton={true}
       autoPan={true}
       eventHandlers={{
-        add: () => {
-          captureDataLoader.load(String(feature.id));
+        add: async () => {
+          const capture = await captureDataLoader.load();
+          // Fetch critter information to get the animal's nickname to display, which isn't included in the capture response
+          if (capture) animalDataLoader.load(capture.critter_id);
         }
       }}>
       <SurveyMapPopup
-        isLoading={captureDataLoader.isLoading || !captureDataLoader.isReady}
-        title="Capture"
-        metadata={captureDataLoader.data ? getCaptureMetadata(captureDataLoader.data) : []}
-        key={`capture-feature-popup-${feature.id}`}
+        isLoading={captureDataLoader.isLoading || animalDataLoader.isLoading}
+        title="Capture Details"
+        metadata={formatPopupMetadata()}
+        key={`capture-feature-popup-${captureId}`}
       />
     </Popup>
   );

app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalMortalityPopup.tsx

@@ -1,38 +1,46 @@
-import { IStaticLayerFeature } from 'components/map/components/StaticLayers';
 import { DATE_FORMAT } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { SurveyMapPopup } from 'features/surveys/view/SurveyMapPopup';
 import { useCritterbaseApi } from 'hooks/useCritterbaseApi';
 import useDataLoader from 'hooks/useDataLoader';
-import { IMortalityResponse } from 'interfaces/useCritterApi.interface';
 import { Popup } from 'react-leaflet';
 
-export interface ISurveySpatialAnimalMortalityPopupProps {
-  feature: IStaticLayerFeature;
+interface ISurveySpatialAnimalMortalityPopupProps {
+  mortalityId: string;
 }
 
 /**
- * Renders a popup for animal mortality data on the map.
+ * Returns information about a critter mortality record, shown when a mortality point is clicked on the map
  *
  * @param {ISurveySpatialAnimalMortalityPopupProps} props
- * @return {*}
+ * @returns {*}
  */
 export const SurveySpatialAnimalMortalityPopup = (props: ISurveySpatialAnimalMortalityPopupProps) => {
-  const { feature } = props;
+  const { mortalityId } = props;
 
   const critterbaseApi = useCritterbaseApi();
 
-  const mortalityDataLoader = useDataLoader((mortalityId) => critterbaseApi.mortality.getMortality(mortalityId));
+  const mortalityDataLoader = useDataLoader(critterbaseApi.mortality.getMortality);
+  const animalDataLoader = useDataLoader(critterbaseApi.critters.getCritterSimple);
+
+  const formatPopupMetadata = () => {
+    if (!mortalityDataLoader.data || !animalDataLoader.data) return [];
+
+    const { mortality_timestamp, location } = mortalityDataLoader.data;
+    const { animal_id } = animalDataLoader.data;
 
-  const getMortalityMetadata = (mortality: IMortalityResponse) => {
     return [
-      { label: 'Mortality ID', value: String(mortality.mortality_id) },
-      { label: 'Date', value: dayjs(mortality.mortality_timestamp).format(DATE_FORMAT.LongDateTimeFormat) },
+      { label: 'Nickname', value: animal_id },
+      {
+        label: 'Date',
+        // Critterbase does not provide time as its own string so mortalities without time data will erroneously show 12:00 AM in the popup
+        value: dayjs(mortality_timestamp).format(DATE_FORMAT.MediumDateTimeFormat)
+      },
       {
         label: 'Coordinates',
-        value: [mortality.location?.latitude ?? null, mortality.location?.longitude ?? null]
-          .filter((coord): coord is number => coord !== null)
-          .map((coord) => coord.toFixed(6))
+        value: [location?.latitude, location?.longitude]
+          .filter(Boolean)
+          .map((coord) => coord!.toFixed(6))
           .join(', ')
       }
     ];
@@ -44,15 +52,16 @@
       closeButton={true}
       autoPan={true}
       eventHandlers={{
-        add: () => {
-          mortalityDataLoader.load(String(feature.id));
+        add: async () => {
+          const mortality = await mortalityDataLoader.load(mortalityId);
+          if (mortality) animalDataLoader.load(mortality.critter_id);
         }
       }}>
       <SurveyMapPopup
-        isLoading={mortalityDataLoader.isLoading || !mortalityDataLoader.isReady}
-        title="Mortality"
-        metadata={mortalityDataLoader.data ? getMortalityMetadata(mortalityDataLoader.data) : []}
-        key={`mortality-feature-popup-${feature.id}`}
+        isLoading={mortalityDataLoader.isLoading || animalDataLoader.isLoading}
+        title="Mortality Details"
+        metadata={formatPopupMetadata()}
+        key={`mortality-feature-popup-${mortalityId}`}
       />
     </Popup>
   );