Telemetry UI Updates

api/src/paths/project/{projectId}/survey/{surveyId}/critters/{critterId}/deployments.ts

@@ -100,8 +100,13 @@ POST.apiDoc = {
       content: {
         'application/json': {
           schema: {
-            title: 'Number of rows affected',
-            type: 'number'
+            title: 'Deployment response object',
+            type: 'object',
+            properties: {
+              message: {
+                type: 'string'
+              }
+            }
           }
         }
       }
@@ -199,8 +204,13 @@ PATCH.apiDoc = {
       content: {
         'application/json': {
           schema: {
-            title: 'Number of rows affected',
-            type: 'number'
+            title: 'Deployment response object',
+            type: 'object',
+            properties: {
+              message: {
+                type: 'string'
+              }
+            }
           }
         }
       }
@@ -237,10 +247,10 @@ export function deployDevice(): RequestHandler {
       await connection.open();
       const override_deployment_id = v4();
       req.body.deployment_id = override_deployment_id;
-      const surveyEntry = await surveyCritterService.upsertDeployment(critterId, req.body.deployment_id);
+      await surveyCritterService.upsertDeployment(critterId, req.body.deployment_id);
       await bctw.deployDevice(req.body);
       await connection.commit();
-      return res.status(201).json(surveyEntry);
+      return res.status(201).json({ message: 'Deployment created.' });
     } catch (error) {
       defaultLog.error({ label: 'addDeployment', message: 'error', error });
       await connection.rollback();
@@ -263,10 +273,10 @@ export function updateDeployment(): RequestHandler {
     const bctw = new BctwService(user);
     try {
       await connection.open();
-      const surveyEntry = await surveyCritterService.upsertDeployment(critterId, req.body.deployment_id);
+      await surveyCritterService.upsertDeployment(critterId, req.body.deployment_id);
       await bctw.updateDeployment(req.body);
       await connection.commit();
-      return res.status(200).json(surveyEntry);
+      return res.status(200).json({ message: 'Deployment updated.' });
     } catch (error) {
       defaultLog.error({ label: 'updateDeployment', message: 'error', error });
       console.log(JSON.stringify((error as Error).message));

app/src/components/buttons/HelpButtonTooltip.tsx

@@ -1,7 +1,7 @@
-import { mdiHelpCircle } from '@mdi/js';
+import { mdiHelpCircleOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { Box, IconButton, Tooltip, Zoom } from '@mui/material';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 interface HelpButtonTooltipProps {
   content: string;
@@ -18,26 +18,50 @@ interface HelpButtonTooltipProps {
 
 const HelpButtonTooltip = ({ content, children }: HelpButtonTooltipProps) => {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box
+      sx={{
+        position: 'relative',
+        '& input': {
+          pr: 7,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        },
+        '& .MuiSelect-select': {
+          pr: '80px !important',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        },
+        '& .MuiSelect-icon': {
+          right: '52px'
+        }
+      }}>
       {children}
       <Tooltip
+        arrow
         title={content}
         placement={'right-start'}
         TransitionComponent={Zoom}
         PopperProps={{
           sx: {
             '& .MuiTooltip-tooltip': {
-              backgroundColor: 'white',
-              color: 'text.primary',
-              fontSize: 14,
-              elevation: 10,
-              padding: 2,
-              boxShadow: 3
+              py: 1.5,
+              px: 2,
+              fontSize: '0.875rem',
+              background: '#38598A'
+            },
+            '& .MuiTooltip-arrow::before': {
+              background: '#38598A'
             }
           }
         }}>
-        <IconButton>
-          <Icon path={mdiHelpCircle} size={0.8} />
+        <IconButton
+          sx={{
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            color: '#38598A'
+          }}>
+          <Icon path={mdiHelpCircleOutline} size={1} />
         </IconButton>
       </Tooltip>
     </Box>

app/src/components/fields/CbSelectFieldWrapper.tsx

@@ -1,7 +1,7 @@
 import { FormControl, FormHelperText, InputLabel, Select, SelectProps } from '@mui/material';
 import { useFormikContext } from 'formik';
 import { get } from 'lodash-es';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ICbSelectSharedProps } from './CbSelectField';
 
 interface CbSelectWrapperProps extends ICbSelectSharedProps {

app/src/components/fields/TelemetrySelectField.tsx

@@ -37,8 +37,7 @@ const TelemetrySelectField: React.FC<ITelemetrySelectField> = (props) => {
         value={get(values, props.name) ?? ''}
         onChange={handleChange}
         onBlur={handleBlur}
-        displayEmpty
-        inputProps={{ 'aria-label': 'Permit Type' }}>
+        displayEmpty>
         {bctwLookupLoader.data?.map((bctwValue: string | number) => {
           return (
             <MenuItem key={String(bctwValue)} value={bctwValue}>

app/src/constants/i18n.ts

@@ -299,12 +299,12 @@ export const SubmitSurveyBiohubI18N = {
 
 export const SurveyAnimalsI18N = {
   animalIndividualsHelp:
-    'Individual animals are animals that have been captured, marked, measured, or have died, generating data that applies to one specific individual.',
+    'Animals are animals that have been captured, marked, measured, or have died, generating data that applies to one specific individual.',
   animalDialogTitle: 'Invidividual Animals',
   animalDialogAddNew: 'Add New Individual',
   animalSectionComment: (section: string) => `Add comment about this ${section}`,
   animalGeneralTitle: 'General',
-  animalGeneralHelp: 'General help placeholder',
+  animalGeneralHelp: 'General information about this animal.',
   animalCaptureTitle: 'Capture Information',
   animalCaptureTitle2: 'Capture Event',
   animalCaptureHelp:
@@ -338,9 +338,9 @@ export const SurveyAnimalsI18N = {
   animalCollectionUnitAddBtn: 'Add Unit',
   // Input help strings
   taxonHelp:
-    'The species or taxon of the animal. If the species is unknown, select the lowest-ranking known taxon, such as the genus or family',
-  taxonLabelHelp: 'A custom and unique name for you to recognize this individual',
-  wlhIdHelp: 'The Wildlife Health ID associated with this critter.',
+    'The species or taxon of the animal. If the species is unknown, select the lowest-ranking known taxon, such as the genus or family.',
+  taxonLabelHelp: 'A unique name for you to recognize this individual.',
+  wlhIdHelp: 'An ID used to identify animals in the BC Wildlife Health Program',
   sexHelp: 'The sex of this critter. Leave as Unknown if unsure.'
 };
 

app/src/features/surveys/view/SurveyAnimals.test.tsx

@@ -130,10 +130,10 @@ describe('SurveyAnimals', () => {
       expect(getByTestId('survey-animal-table')).toBeInTheDocument();
       fireEvent.click(getByTestId('animal actions'));
       fireEvent.click(getByTestId('animal-table-row-edit-timespan'));
-      fireEvent.click(getByText('Save Changes'));
+      fireEvent.click(getByText('Save'));
       fireEvent.click(getByTestId('animal actions'));
       fireEvent.click(getByTestId('animal-table-row-add-device'));
-      fireEvent.click(getByText('Save Changes'));
+      fireEvent.click(getByText('Save'));
     });
   });
 });

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

@@ -1,4 +1,4 @@
-import { mdiImport } from '@mdi/js';
+import { mdiPlus } from '@mdi/js';
 import Icon from '@mdi/react';
 import { Box, Divider, Typography } from '@mui/material';
 import HelpButtonTooltip from 'components/buttons/HelpButtonTooltip';
@@ -341,6 +341,7 @@ const SurveyAnimals: React.FC = () => {
 
     setOpenDeviceDialog(false);
     refreshDeployments();
+    surveyContext.artifactDataLoader.refresh(projectId, surveyId);
   };
 
   const handleRemoveCritter = async () => {
@@ -363,6 +364,7 @@ const SurveyAnimals: React.FC = () => {
         dialogTitle={
           telemetryFormMode === TELEMETRY_DEVICE_FORM_MODE.ADD ? 'Add Telemetry Device' : 'Edit Telemetry Devices'
         }
+        dialogSaveButtonLabel="Save"
         open={openDeviceDialog}
         component={{
           element: <TelemetryDeviceForm mode={telemetryFormMode} />,
@@ -389,11 +391,11 @@ const SurveyAnimals: React.FC = () => {
         onYes={handleRemoveCritter}
       />
       <H2ButtonToolbar
-        label="Individual Animals"
-        buttonLabel="Import"
-        buttonTitle="Import Animals"
+        label="Marked or Known Animals"
+        buttonLabel="Add Animal"
+        buttonTitle="Add Animal"
         buttonProps={{ variant: 'contained', color: 'primary' }}
-        buttonStartIcon={<Icon path={mdiImport} size={1} />}
+        buttonStartIcon={<Icon path={mdiPlus} size={1} />}
         buttonOnClick={toggleDialog}
       />
       <Divider></Divider>

app/src/features/surveys/view/survey-animals/IndividualAnimalForm.tsx

@@ -1,7 +1,6 @@
 import { Typography } from '@mui/material';
 import FormikDevDebugger from 'components/formik/FormikDevDebugger';
 import { Form, useFormikContext } from 'formik';
-import { useEffect } from 'react';
 import { Critter, IAnimal } from './animal';
 import CaptureAnimalForm from './form-sections/CaptureAnimalForm';
 import CollectionUnitAnimalForm from './form-sections/CollectionUnitAnimalForm';
@@ -34,13 +33,6 @@ interface IndividualAnimalFormProps {
 const IndividualAnimalForm = ({ getAnimalCount, critter_id, mode }: IndividualAnimalFormProps) => {
   const { values } = useFormikContext<IAnimal>();
 
-  useEffect(() => {
-    // placeholder for when the form handles multiple animals.
-    // waiting on direction from client, either displays all survey animals count
-    // or count of animals in form
-    getAnimalCount(values.general.taxon_id ? 1 : 0);
-  }, [values.general.taxon_id, getAnimalCount]);
-
   return (
     <Form>
       <Typography variant="h4">{mode === ANIMAL_FORM_MODE.ADD ? 'Add New Individual' : 'Edit Individual'}</Typography>
@@ -56,7 +48,6 @@ const IndividualAnimalForm = ({ getAnimalCount, critter_id, mode }: IndividualAn
       <MarkingAnimalForm />
       <MeasurementAnimalForm />
       <FamilyAnimalForm />
-
       <FormikDevDebugger custom_payload={new Critter(values)} />
     </Form>
   );

app/src/features/surveys/view/survey-animals/SurveyAnimalsTable.tsx

@@ -52,6 +52,11 @@ export const SurveyAnimalsTable = ({
     : animalData;
 
   const columns: GridColDef<ISurveyAnimalsTableEntry>[] = [
+    {
+      field: 'taxon',
+      headerName: 'Species',
+      flex: 1
+    },
     {
       field: 'animal_id',
       headerName: 'Alias',
@@ -61,12 +66,7 @@ export const SurveyAnimalsTable = ({
       field: 'wlh_id',
       headerName: 'WLH ID',
       flex: 1,
-      renderCell: (params) => <Typography>{params.value || 'None'}</Typography>
-    },
-    {
-      field: 'taxon',
-      headerName: 'Taxon',
-      flex: 1
+      renderCell: (params) => <>{params.value ? params.value : 'None'}</>
     },
     {
       field: 'create_timestamp',

app/src/features/surveys/view/survey-animals/SurveyAnimalsTableActions.tsx

@@ -74,7 +74,7 @@ const SurveyAnimalsTableActions = (props: ITableActionsMenuProps) => {
             <ListItemIcon>
               <Icon path={mdiPencilOutline} size={1} />
             </ListItemIcon>
-            <Typography variant="inherit">Edit Deployment Timespan</Typography>
+            <Typography variant="inherit">Edit Telemetry Devices</Typography>
           </MenuItem>
         ) : null}
         <MenuItem
@@ -98,7 +98,7 @@ const SurveyAnimalsTableActions = (props: ITableActionsMenuProps) => {
             <ListItemIcon>
               <Icon path={mdiTrashCanOutline} size={1} />
             </ListItemIcon>
-            <Typography variant="inherit">Remove Critter From Survey</Typography>
+            <Typography variant="inherit">Remove Animal</Typography>
           </MenuItem>
         )}
       </Menu>