style(frontend): fix ESLint warnings

frontend-v2/src/components/DynamicTabs.tsx

@@ -66,7 +66,7 @@ export const DynamicTabs: FC<PropsWithChildren<DynamicTabsProps>> = ({
   const toast = useCustomToast();
   const dispatch = useDispatch();
 
-  const errors: { [key: string]: ReactElement<any, string> } = {};
+  const errors: { [key: string]: ReactElement<unknown, string> } = {};
   for (const key in tabErrors) {
     errors[key] = (
       <Tooltip title={tabErrors[key]}>
@@ -115,7 +115,13 @@ export const DynamicTabs: FC<PropsWithChildren<DynamicTabsProps>> = ({
   return (
     <TabContext.Provider value={{ currentTab, setCurrentTab }}>
       <Box sx={{ width: "100%" }}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider", marginBottom: marginBottom }}>
+        <Box
+          sx={{
+            borderBottom: 1,
+            borderColor: "divider",
+            marginBottom: marginBottom,
+          }}
+        >
           <Tabs
             value={currentTab}
             onChange={handleChange}

frontend-v2/src/components/FloatField.tsx

@@ -15,7 +15,7 @@ type Props<T extends FieldValues> = {
   sx?: Record<string, string>;
 };
 
-function convert(value: any) {
+function convert(value: string): number | null {
   if (typeof value === "string") {
     if (value !== "") {
       return parseFloat(value);

frontend-v2/src/components/HelpButton.tsx

@@ -10,7 +10,7 @@ interface HelpButtonProps {
   children: ReactNode;
 }
 
-const HelpButton: FC<HelpButtonProps> = ({ title, children }) => {
+const HelpButton: FC<HelpButtonProps> = ({ children }) => {
   const [open, setOpen] = useState(false);
   const selectedPage = useSelector(
     (state: RootState) => state.main.selectedPage,

frontend-v2/src/components/IntegerField.tsx

@@ -7,12 +7,12 @@ type Props<T extends FieldValues> = {
   label?: string;
   name: FieldPath<T>;
   control: Control<T>;
-  size?: 'small' | 'medium',
-  rules?: Object;
+  size?: "small" | "medium";
+  rules?: Record<string, unknown>;
   textFieldProps?: TextFieldProps;
 };
 
-function convert(value: any) {
+function convert(value: string): number | string {
   if (typeof value === "string" && value !== "") {
     return parseInt(value);
   } else {
@@ -25,7 +25,7 @@ function IntegerField<T extends FieldValues>({
   name,
   control,
   rules,
-  size = 'medium',
+  size = "medium",
   textFieldProps,
 }: Props<T>): ReactElement {
   const [fieldValue, setFieldValue] = useFieldState({ name, control });
@@ -36,12 +36,12 @@ function IntegerField<T extends FieldValues>({
       rules={rules}
       render={({
         field: { onChange, onBlur, value },
-        fieldState: { error, isDirty, isTouched },
+        fieldState: { error },
       }) => {
         const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
           const updatedValue = convert(e.target.value);
           if (updatedValue !== value) {
-            e.target.value = updatedValue;
+            e.target.value = updatedValue.toString();
             onChange(e);
           }
           onBlur();

frontend-v2/src/components/SelectField.tsx

@@ -13,7 +13,7 @@ import {
 import { getLabel } from "../shared/getRequiredLabel";
 
 type Option = {
-  value: any;
+  value: string;
   label: string;
 };
 
@@ -25,7 +25,7 @@ type Props<T extends FieldValues> = {
   rules?: Record<string, unknown>;
   selectProps?: SelectProps;
   formControlProps?: FormControlProps;
-  size?: 'small' | 'medium'
+  size?: "small" | "medium";
   sx?: SxProps;
 };
 
@@ -37,7 +37,7 @@ function SelectField<T extends FieldValues>({
   rules,
   selectProps,
   formControlProps,
-  size = 'medium',
+  size = "medium",
   sx,
 }: Props<T>): ReactElement {
   const labelId = `${name}-label`;
@@ -69,7 +69,6 @@ function SelectField<T extends FieldValues>({
             name={name}
             id={name}
             value={value === undefined || value === null ? "" : value}
-            // @ts-ignore
             onChange={onChange}
             onBlur={onBlur}
             input={<OutlinedInput label={label} notched={displayEmpty} />}

frontend-v2/src/components/TextField.tsx

@@ -16,7 +16,7 @@ type Props<T extends FieldValues> = {
   mode?: "onChange" | "onBlur";
   textFieldProps?: TextFieldProps;
   autoShrink?: boolean;
-  size?: 'small' | 'medium'
+  size?: "small" | "medium";
   sx?: SxProps;
 };
 
@@ -26,7 +26,7 @@ function TextField<T extends FieldValues>({
   control,
   rules,
   mode,
-  size = 'medium',
+  size = "medium",
   textFieldProps,
   autoShrink,
   sx,
@@ -44,7 +44,7 @@ function TextField<T extends FieldValues>({
       rules={rules}
       render={({
         field: { onChange, onBlur, value },
-        fieldState: { error, isDirty, isTouched },
+        fieldState: { error },
       }) => {
         const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
           if (mode === "onBlur" && e.target.value !== value) {

frontend-v2/src/contexts/SimulationContext.ts

@@ -3,5 +3,5 @@ import { SimulateResponse } from "../app/backendApi";
 
 export const SimulationContext = createContext({
   simulations: [] as SimulateResponse[],
-  setSimulations: (simulations: SimulateResponse[]) => {},
+  setSimulations: (_simulations: SimulateResponse[]) => {},
 });

frontend-v2/src/features/data/CreateDosingProtocols.tsx

@@ -222,34 +222,7 @@ const CreateDosingProtocols: FC<IDosingProtocols> = ({
     administrationIdField,
     groupIdField,
   );
-  const administrationIds = dosingRows.map((row) => row[administrationIdField]);
-  const uniqueAdministrationIds = [...new Set(administrationIds)];
 
-  const isAmount = (variable: VariableRead) => {
-    const amountUnits = units?.find(
-      (unit) => unit.symbol === amountUnit?.symbol,
-    )?.compatible_units;
-    const variableUnit = units?.find((unit) => unit.id === variable.unit);
-    return (
-      variableUnit?.symbol !== "" &&
-      amountUnits?.find((unit) => parseInt(unit.id) === variable.unit) !==
-        undefined
-    );
-  };
-  const modelAmounts = variables?.filter(isAmount) || [];
-
-  const handleAmountMappingChange =
-    (id: string) => (event: SelectChangeEvent) => {
-      const nextData = [...state.data];
-      const { value } = event.target;
-      const dosingRows = nextData.filter(
-        (row) => row[administrationIdField] === id && row["Amount"] !== ".",
-      );
-      dosingRows.forEach((row) => {
-        row["Amount Variable"] = value;
-      });
-      state.setData(nextData);
-    };
   type InputChangeEvent =
     | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
     | SelectChangeEvent;

frontend-v2/src/features/data/LoadData.tsx

@@ -102,11 +102,7 @@ function setMinimumInfusionTime(state: StepperState) {
   }
 }
 
-const LoadData: FC<ILoadDataProps> = ({
-  state,
-  firstTime,
-  notificationsInfo,
-}) => {
+const LoadData: FC<ILoadDataProps> = ({ state, notificationsInfo }) => {
   const showData = state.data.length > 0 && state.fields.length > 0;
   const normalisedHeaders = state.normalisedHeaders;
   if (!normalisedHeaders.includes("ID")) {
@@ -184,14 +180,6 @@ const LoadData: FC<ILoadDataProps> = ({
     state.setWarnings(warnings);
   };
 
-  const noTimeUnit = !state.normalisedHeaders.find(
-    (field) => field === "Time Unit",
-  );
-  const invalidTimeUnits = state.errors.find((error) =>
-    error.includes("file contains multiple time units"),
-  );
-  const showTimeUnitSelector = noTimeUnit || invalidTimeUnits;
-
   return (
     <Stack
       sx={{

frontend-v2/src/features/data/LoadDataStepper.tsx

@@ -94,7 +94,8 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
   const csvData = Papa.parse(csv, { header: true });
   const csvFields = csvData.meta.fields || [];
   const [data, setData] = useState<Data>((csvData.data as Data) || []);
-  let [errors, setErrors] = useState<string[]>([]);
+  const [errors, setErrors] = useState<string[]>([]);
+  let displayedErrors = [...errors];
   const [warnings, setWarnings] = useState<string[]>([]);
   const [normalisedFields, setNormalisedFields] = useState<Map<Field, string>>(
     new Map(csvFields.map(normaliseHeader)),
@@ -145,7 +146,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
     "Invalid data file. Each subject ID can only belong to one dosing protocol.";
 
   if (!areValidProtocols && !errors.includes(protocolErrorMessage)) {
-    errors = [...errors, protocolErrorMessage];
+    displayedErrors = [...displayedErrors, protocolErrorMessage];
   }
 
   const [stepState, setStepState] = useState({ activeStep: 0, maxStep: 0 });
@@ -158,7 +159,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
     !normalisedHeaders.includes("Time Unit") &&
     !timeUnit
   ) {
-    errors = [...errors, "Time unit is not defined."];
+    displayedErrors = [...displayedErrors, "Time unit is not defined."];
   }
 
   const noTimeUnit = !state.normalisedHeaders.find(
@@ -172,7 +173,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
   const shouldShowTimeUnitNotification =
     showTimeUnitSelector || hasTimeUnitChanged;
   const notificationsCount =
-    errors?.length +
+    displayedErrors?.length +
     warnings?.length +
     (shouldShowTimeUnitNotification ? 2 : 1);
 
@@ -291,7 +292,9 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
           <Step key={index}>
             <StepButton
               onClick={handleStep(index)}
-              disabled={data.length === 0 || isFinished || errors.length > 0}
+              disabled={
+                data.length === 0 || isFinished || displayedErrors.length > 0
+              }
             >
               {step}
             </StepButton>
@@ -301,7 +304,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
       <Notifications
         isOpen={isNotificationsOpen}
         showData={showData}
-        errors={errors}
+        errors={displayedErrors}
         warnings={warnings}
         fileName={fileName}
         state={state}

frontend-v2/src/features/data/MapDosing.tsx

@@ -23,7 +23,6 @@ interface IMapDosing {
 
 const MapDosing: FC<IMapDosing> = ({
   state,
-  firstTime,
   notificationsInfo,
 }: IMapDosing) => {
   const projectId = useSelector(
@@ -35,8 +34,10 @@ const MapDosing: FC<IMapDosing> = ({
     { skip: !projectId },
   );
   const isPreclinical = project?.species !== "H";
-  const { data: projectProtocols, isLoading: isProtocolsLoading } =
-    useProtocolListQuery({ projectId: projectIdOrZero }, { skip: !projectId });
+  const { data: projectProtocols } = useProtocolListQuery(
+    { projectId: projectIdOrZero },
+    { skip: !projectId },
+  );
   const { data: models = [] } = useCombinedModelListQuery(
     { projectId: projectIdOrZero },
     { skip: !projectId },

frontend-v2/src/features/data/MapHeaders.tsx

@@ -13,6 +13,7 @@ import {
   Typography,
   TablePagination,
   TableContainer,
+  SelectChangeEvent,
 } from "@mui/material";
 import { Data, Field } from "./LoadData";
 import { groupedHeaders } from "./dataValidation";
@@ -47,7 +48,7 @@ const MapHeaders: FC<IMapHeaders> = ({
     handlePageChange,
   } = usePagination();
   const fields = [...normalisedFields.keys()];
-  const handleFieldChange = (field: string) => (event: any) => {
+  const handleFieldChange = (field: string) => (event: SelectChangeEvent) => {
     const newFields = new Map([
       ...normalisedFields.entries(),
       [field, event.target.value],

frontend-v2/src/features/data/MapObservations.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, useState } from "react";
+import { FC, SyntheticEvent, useState } from "react";
 import { DataGrid } from "@mui/x-data-grid";
 import {
   Box,
@@ -206,7 +206,10 @@ const MapObservations: FC<IMapObservations> = ({
     state.setWarnings(warnings);
   };
 
-  function handleTabChange(event: ChangeEvent<{}>, newValue: number) {
+  function handleTabChange(
+    event: SyntheticEvent<Element, Event>,
+    newValue: number,
+  ) {
     setTab(newValue);
   }
 

frontend-v2/src/features/data/PreviewData.tsx

@@ -25,7 +25,7 @@ const IGNORED_COLUMNS = ["Ignore"];
 function normaliseDataColumn(state: StepperState, type: string) {
   const normalisedHeaders = [...state.normalisedFields.entries()];
   const matchingFields =
-    normalisedHeaders.filter(([key, value]) => value === type) || [];
+    normalisedHeaders.filter(([_key, value]) => value === type) || [];
   if (matchingFields.length !== 1) {
     // only normalise a column if there is exactly one column of that type.
     return state.data;

frontend-v2/src/features/data/SetUnits.tsx

@@ -26,7 +26,6 @@ interface IMapObservations {
 
 const SetUnits: FC<IMapObservations> = ({
   state,
-  firstTime,
   setHasTimeUnitChanged,
 }: IMapObservations) => {
   const [isChanged, setIsChanged] = useState<boolean>(false);

frontend-v2/src/features/data/Stratification.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, useState } from "react";
+import { ChangeEvent, FC, SyntheticEvent, useState } from "react";
 import {
   Box,
   Radio,
@@ -126,7 +126,10 @@ const Stratification: FC<IStratification> = ({
     );
   }
 
-  const handleTabChange = (event: ChangeEvent<{}>, newValue: number) => {
+  const handleTabChange = (
+    event: SyntheticEvent<Element, Event>,
+    newValue: number,
+  ) => {
     setTab(newValue);
   };
 

frontend-v2/src/features/login/loginSlice.ts

@@ -5,7 +5,7 @@ import { UserRead, ProjectRead, ProjectAccessRead } from "../../app/backendApi";
 
 export const fetchCsrf = createAsyncThunk<string, undefined>(
   "login/fetchCsrf",
-  async (_, { dispatch }) => {
+  async () => {
     const csrfResponse = await fetch("/api/csrf/", {
       method: "GET",
       credentials: "include",
@@ -17,7 +17,7 @@ export const fetchCsrf = createAsyncThunk<string, undefined>(
 
 interface Login {
   isAuthenticated: boolean;
-  user: any;
+  user: UserRead;
 }
 
 interface LoginErrorResponse {
@@ -111,7 +111,7 @@ export const logout = createAsyncThunk(
       credentials: "include",
     })
       .then(isResponseOk)
-      .then((data) => {
+      .then(() => {
         dispatch(fetchCsrf());
         return { isAuthenticated: false };
       });
@@ -143,7 +143,7 @@ const slice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(fetchCsrf.rejected, (state, action) => {
+    builder.addCase(fetchCsrf.rejected, (state) => {
       state.csrf = undefined;
     });
     builder.addCase(fetchCsrf.fulfilled, (state, action) => {