@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/epi/EpiUpload/EpiUploadMapSequences.tsx

@@ -0,0 +1,332 @@
+import {
+  Alert,
+  AlertTitle,
+  Autocomplete,
+  Box,
+  TextField,
+  useTheme,
+} from '@mui/material';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+
+import {
+  createTableStore,
+  TableStoreContextProvider,
+} from '../../../stores/tableStore';
+import { useInitializeTableStore } from '../../../hooks/useInitializeTableStore';
+import type {
+  TableColumn,
+  TableRowParams,
+} from '../../../models/table';
+import { TableUtil } from '../../../utils/TableUtil';
+import { EpiUploadUtil } from '../../../utils/EpiUploadUtil';
+import { Table } from '../../ui/Table';
+import { CaseUtil } from '../../../utils/CaseUtil';
+import { type Col } from '../../../api';
+import { EpiUploadStoreContext } from '../../../stores/epiUploadStore';
+import type { CaseUploadResultWithGeneratedId } from '../../../models/epi';
+
+import { EpiUploadNavigation } from './EpiUploadNavigation';
+
+export const EpiUploadMapSequences = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const store = useContext(EpiUploadStoreContext);
+  const goToNextStep = useStore(store, (state) => state.goToNextStep);
+  const goToPreviousStep = useStore(store, (state) => state.goToPreviousStep);
+  const completeCaseType = useStore(store, (state) => state.completeCaseType);
+  const sampleIdColId = useStore(store, (state) => state.sampleIdColId);
+  const sequenceFilesDataTransfer = useStore(store, (state) => state.sequenceFilesDataTransfer);
+  const validatedCasesWithGeneratedId = useStore(store, (state) => state.validatedCasesWithGeneratedId);
+  const validatedCases = useStore(store, (state) => state.validatedCases);
+  const setSequenceMapping = useStore(store, (state) => state.setSequenceMapping);
+
+  const completeCaseTypeColStats = useMemo(() => {
+    return EpiUploadUtil.getCompleteCaseTypeColStats(completeCaseType);
+  }, [completeCaseType]);
+
+  const alertTitleId = useId();
+  const alertContentId = useId();
+
+  const epiUploadSequenceMapping = useRef(store.getState().sequenceMapping);
+
+  const onProceedButtonClick = useCallback(async () => {
+    setSequenceMapping(epiUploadSequenceMapping.current);
+    await goToNextStep();
+  }, [setSequenceMapping, goToNextStep]);
+
+  const updateAlert = useCallback(() => {
+    // Note: This is done via DOM manipulation to prevent excessive re-renders of the entire table
+
+    const alertTitleElement = document.getElementById(alertTitleId);
+    const alertContentElement = document.getElementById(alertContentId);
+    if (!alertTitleElement || !alertContentElement) {
+      return;
+    }
+    const {
+      numberOfFilesToMap,
+      mappedFiles,
+      unmappedFileNames,
+    } = EpiUploadUtil.getSequenceMappingStats(epiUploadSequenceMapping.current, sequenceFilesDataTransfer);
+
+    alertTitleElement.innerHTML = numberOfFilesToMap === mappedFiles.length ? t('All {{numberOfFilesToMap}} files are mapped', { numberOfFilesToMap }) : t('{{mappedFilesLength}} of {{numberOfFilesToMap}} files mapped', { mappedFilesLength: mappedFiles.length, numberOfFilesToMap });
+    alertContentElement.innerHTML = numberOfFilesToMap === mappedFiles.length ? '' : t('Unmapped files: {{unmappedFileNames}}', { unmappedFileNames: unmappedFileNames.join(', ') });
+  }, [alertContentId, alertTitleId, sequenceFilesDataTransfer, t]);
+
+  useEffect(() => {
+    updateAlert();
+  }, [updateAlert]);
+
+  const tableStore = useMemo(() => createTableStore<CaseUploadResultWithGeneratedId>({
+    idSelectorCallback: (row) => row.generatedId,
+  }), []);
+
+  const caseHasColumnContent = useCallback((rows: CaseUploadResultWithGeneratedId[], col: Col): boolean => {
+    return rows.some((row) => {
+      const value = CaseUtil.getRowValue(row.validated_content, col, completeCaseType);
+      return value && !value?.isMissing;
+    });
+  }, [completeCaseType]);
+
+  const sequenceDropDownOptions = useMemo(() => {
+    return Array.from(sequenceFilesDataTransfer.files).map((file) => file.name).filter(name => name.endsWith('.fasta') || name.endsWith('.fa') || name.endsWith('.fa.gz') || name.endsWith('.fasta.gz'));
+  }, [sequenceFilesDataTransfer.files]);
+
+  const readsDropDownOptions = useMemo(() => {
+    return Array.from(sequenceFilesDataTransfer.files).map((file) => file.name).filter(name => name.endsWith('.fastq') || name.endsWith('.fq') || name.endsWith('.fq.gz') || name.endsWith('.fastaq.gz'));
+  }, [sequenceFilesDataTransfer.files]);
+
+  const createDropDown = useCallback((kwArgs: { dropDownValue: string; dropDownOptions: string[]; label: string; onChange: (newValue: string) => void }) => {
+    const { dropDownValue, dropDownOptions, label, onChange } = kwArgs;
+
+    return (
+      <Autocomplete
+        freeSolo
+        fullWidth
+        sx={{
+          lineHeight: 'initial',
+        }}
+        value={dropDownValue}
+        options={dropDownOptions}
+        // eslint-disable-next-line react/jsx-no-bind
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            size={'small'}
+            label={label}
+          />
+        )}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={(_, newValue) => {
+          onChange(newValue);
+          setSequenceMapping(epiUploadSequenceMapping.current);
+          updateAlert();
+        }}
+      />
+    );
+  }, [setSequenceMapping, updateAlert]);
+
+  const renderSequenceCell = useCallback((tableRowParams: TableRowParams<CaseUploadResultWithGeneratedId>) => {
+    const col = completeCaseType.cols[tableRowParams.id];
+
+    const id = tableRowParams.row.generatedId;
+    const dropDownValue = epiUploadSequenceMapping.current?.[tableRowParams.row.generatedId]?.sequenceFileNames[col.id] || '';
+    const onChange = (newValue: string) => {
+      if (!newValue) {
+        delete epiUploadSequenceMapping.current?.[id]?.sequenceFileNames[col.id];
+      } else {
+        epiUploadSequenceMapping.current[id].sequenceFileNames[col.id] = newValue;
+      }
+    };
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+        height={'100%'}
+      >
+        {createDropDown({
+          dropDownValue,
+          dropDownOptions: sequenceDropDownOptions,
+          label: col.label,
+          onChange,
+        })}
+      </Box>
+    );
+  }, [completeCaseType, createDropDown, sequenceDropDownOptions]);
+
+
+  const renderReadsCell = useCallback((tableRowParams: TableRowParams<CaseUploadResultWithGeneratedId>) => {
+    const col = completeCaseType.cols[tableRowParams.id];
+    const isSequenceColumn = completeCaseTypeColStats.sequenceColumns.includes(col);
+
+    const id = tableRowParams.row.generatedId;
+    const dropDownValueFwd = epiUploadSequenceMapping.current?.[tableRowParams.row.generatedId]?.readsFileNames?.[col.id]?.fwd || '';
+    const dropDownValueRev = epiUploadSequenceMapping.current?.[tableRowParams.row.generatedId]?.readsFileNames?.[col.id]?.rev || '';
+    const onChangeFwd = (newValue: string) => {
+      if (!newValue) {
+        delete epiUploadSequenceMapping.current?.[id]?.readsFileNames?.[col.id]?.fwd;
+      } else {
+        epiUploadSequenceMapping.current[id].readsFileNames[col.id].fwd = newValue;
+      }
+    };
+    const onChangeRev = (newValue: string) => {
+      if (!newValue) {
+        delete epiUploadSequenceMapping.current?.[id]?.readsFileNames?.[col.id]?.rev;
+      } else {
+        epiUploadSequenceMapping.current[id].readsFileNames[col.id].rev = newValue;
+      }
+    };
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'row',
+          gap: 1,
+        }}
+        height={'100%'}
+      >
+        {createDropDown({
+          dropDownValue: dropDownValueFwd,
+          dropDownOptions: isSequenceColumn ? sequenceDropDownOptions : readsDropDownOptions,
+          label: `${col.label} FWD`,
+          onChange: onChangeFwd,
+        })}
+        {createDropDown({
+          dropDownValue: dropDownValueRev,
+          dropDownOptions: isSequenceColumn ? sequenceDropDownOptions : readsDropDownOptions,
+          label: `${col.label} REV`,
+          onChange: onChangeRev,
+        })}
+      </Box>
+    );
+  }, [completeCaseType, completeCaseTypeColStats.sequenceColumns, createDropDown, sequenceDropDownOptions, readsDropDownOptions]);
+
+
+  const tableColumns = useMemo<TableColumn<CaseUploadResultWithGeneratedId>[]>(() => {
+    const tableCols: TableColumn<CaseUploadResultWithGeneratedId>[] = [];
+    tableCols.push(
+      TableUtil.createReadableIndexColumn(),
+    );
+
+    const columnsUsedForMapping = [
+      ...completeCaseTypeColStats.sampleIdColumns,
+      ...completeCaseTypeColStats.sequenceColumns,
+      ...completeCaseTypeColStats.readsColumns,
+    ];
+
+    const sampleIdCol = completeCaseTypeColStats.sampleIdColumns.find(x => x.id === sampleIdColId);
+    if (sampleIdCol && caseHasColumnContent(validatedCasesWithGeneratedId, sampleIdCol)) {
+      tableCols.push({
+        type: 'text',
+        isInitiallyVisible: true,
+        hideInFilter: true,
+        id: sampleIdCol.id,
+        headerName: sampleIdCol.label,
+        widthPx: 300,
+        valueGetter: (params) => CaseUtil.getRowValue(params.row.validated_content, sampleIdCol, completeCaseType).short,
+      });
+    }
+
+    completeCaseTypeColStats.sequenceColumns.forEach((col) => {
+      tableCols.push({
+        type: 'text',
+        isInitiallyVisible: true,
+        hideInFilter: true,
+        id: col.id,
+        headerName: col.label,
+        widthPx: 400,
+        renderCell: renderSequenceCell,
+        valueGetter: (params) => CaseUtil.getRowValue(params.row.validated_content, col, completeCaseType).short,
+        cellTitleGetter: () => null,
+      });
+    });
+
+    completeCaseTypeColStats.readsColumns.forEach((col) => {
+      tableCols.push({
+        type: 'text',
+        isInitiallyVisible: true,
+        hideInFilter: true,
+        id: col.id,
+        headerName: col.label,
+        widthPx: 800,
+        renderCell: renderReadsCell,
+        valueGetter: (params) => CaseUtil.getRowValue(params.row.validated_content, col, completeCaseType).short,
+        cellTitleGetter: () => null,
+      });
+    });
+
+    const uniqueColIds: Set<string> = new Set();
+    validatedCases.forEach((vc) => {
+      Object.keys(vc.validated_content || {}).forEach((colId) => uniqueColIds.add(colId));
+    });
+
+    const colIdsToIgnore = [...completeCaseTypeColStats.sequenceColumns.map(x => x.id), ...completeCaseTypeColStats.readsColumns.map(x => x.id), sampleIdCol?.id];
+
+    completeCaseType.ordered_col_ids.forEach((colId) => {
+      if (colIdsToIgnore.includes(colId) || !uniqueColIds.has(colId) || columnsUsedForMapping.find(c => c.id === colId)) {
+        return;
+      }
+
+      const col = completeCaseType.cols[colId];
+      if (col) {
+        tableCols.push({
+          type: 'text',
+          isInitiallyVisible: true,
+          hideInFilter: true,
+          id: col.id,
+          headerName: col.code,
+          widthPx: 250,
+          valueGetter: (params) => CaseUtil.getRowValue(params.row.validated_content, col, completeCaseType).short,
+        } satisfies TableColumn<CaseUploadResultWithGeneratedId>);
+      }
+    });
+
+    return tableCols;
+  }, [caseHasColumnContent, completeCaseType, completeCaseTypeColStats.readsColumns, completeCaseTypeColStats.sampleIdColumns, completeCaseTypeColStats.sequenceColumns, renderReadsCell, renderSequenceCell, sampleIdColId, validatedCases, validatedCasesWithGeneratedId]);
+
+  useInitializeTableStore<CaseUploadResultWithGeneratedId>({ store: tableStore, columns: tableColumns, rows: validatedCasesWithGeneratedId, createFiltersFromColumns: true });
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        display: 'grid',
+        gridTemplateRows: 'max-content auto max-content',
+      }}
+    >
+      <Box paddingBottom={1}>
+        <Alert severity={'info'}>
+          <AlertTitle id={alertTitleId} />
+          <Box id={alertContentId} />
+        </Alert>
+      </Box>
+      <TableStoreContextProvider store={tableStore}>
+        <Table
+          font={theme['gen-epix'].lineList.font}
+          rowHeight={7}
+        />
+        <EpiUploadNavigation
+          onGoBackButtonClick={goToPreviousStep}
+          onProceedButtonClick={onProceedButtonClick}
+        />
+      </TableStoreContextProvider>
+    </Box>
+  );
+};

package/src/components/epi/EpiUpload/EpiUploadNavigation.tsx

@@ -0,0 +1,52 @@
+import type { ContainerOwnProps } from '@mui/material';
+import {
+  Box,
+  Button,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export type EpiUploadNavigationProps = {
+  readonly onProceedButtonClick?: () => void;
+  readonly onGoBackButtonClick?: () => void;
+  readonly containerProps?: ContainerOwnProps;
+  readonly proceedLabel?: string;
+  readonly backLabel?: string;
+  readonly proceedDisabled?: boolean;
+};
+
+export const EpiUploadNavigation = ({ onProceedButtonClick: onProceedButtonClick, onGoBackButtonClick: onGoBack, proceedLabel, backLabel, proceedDisabled }: EpiUploadNavigationProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      sx={{
+        marginTop: 1,
+        paddingTop: 1,
+        display: 'flex',
+        gap: 2,
+        justifyContent: 'flex-end',
+        borderTop: (theme) => `1px solid ${theme.palette.divider}`,
+      }}
+    >
+      {onGoBack && (
+        <Button
+          variant={'outlined'}
+          onClick={onGoBack}
+        >
+          {backLabel ?? t`Go back`}
+        </Button>
+      )}
+      {onProceedButtonClick && (
+        <Button
+          variant={'contained'}
+          color={'secondary'}
+          disabled={proceedDisabled}
+          onClick={onProceedButtonClick}
+        >
+          {proceedLabel ?? t`Next`}
+        </Button>
+      )}
+    </Box>
+  );
+
+};

package/src/components/epi/EpiUpload/EpiUploadSelectFile.tsx

@@ -0,0 +1,285 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { yupResolver } from '@hookform/resolvers/yup';
+import type { Resolver } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import {
+  mixed,
+  object,
+  string,
+} from 'yup';
+import {
+  Alert,
+  AlertTitle,
+  Container,
+  Typography,
+} from '@mui/material';
+import { useStore } from 'zustand';
+
+import { CaseApi } from '../../../api';
+import {
+  useCaseTypeOptionsQuery,
+  useCaseTypesQuery,
+} from '../../../dataHooks/useCaseTypesQuery';
+import { useItemQuery } from '../../../hooks/useItemQuery';
+import type { FormFieldDefinition } from '../../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../../models/form';
+import { QUERY_KEY } from '../../../models/query';
+import { useArray } from '../../../hooks/useArray';
+import { GenericForm } from '../../form/helpers/GenericForm';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { useDataCollectionOptionsQuery } from '../../../dataHooks/useDataCollectionsQuery';
+import { useColsQuery } from '../../../dataHooks/useColsQuery';
+import { EpiUploadUtil } from '../../../utils/EpiUploadUtil';
+import { EpiUploadStoreContext } from '../../../stores/epiUploadStore';
+
+import { EpiUploadNavigation } from './EpiUploadNavigation';
+
+type FormFields = {
+  caseTypeId: string;
+  createdInDataCollectionId: string;
+  fileList: unknown;
+  sheet: string;
+};
+
+const EpiUploadSelectFile = () => {
+  const { t } = useTranslation();
+  const caseTypesQuery = useCaseTypesQuery();
+  const caseTypeOptionsQuery = useCaseTypeOptionsQuery();
+  const dataCollectionOptionsQuery = useDataCollectionOptionsQuery();
+  const colsQuery = useColsQuery();
+  const formId = useId();
+
+  const store = useContext(EpiUploadStoreContext);
+
+  const caseTypeId = useStore(store, (state) => state.caseTypeId);
+  const fileList = useStore(store, (state) => state.fileList);
+  const fileName = useStore(store, (state) => state.fileName);
+  const fileParsingError = useStore(store, (state) => state.fileParsingError);
+  const goToNextStep = useStore(store, (state) => state.goToNextStep);
+  const createdInDataCollectionOptions = useStore(store, (state) => state.createdInDataCollectionOptions);
+  const rawData = useStore(store, (state) => state.rawData);
+  const setCols = useStore(store, (state) => state.setCols);
+  const setCaseTypeId = useStore(store, (state) => state.setCaseTypeId);
+  const setCompleteCaseType = useStore(store, (state) => state.setCompleteCaseType);
+  const setCreatedInDataCollectionId = useStore(store, (state) => state.setCreatedInDataCollectionId);
+  const setFileList = useStore(store, (state) => state.setFileList);
+  const setSheet = useStore(store, (state) => state.setSheet);
+  const setDataCollectionOptions = useStore(store, (state) => state.setDataCollectionOptions);
+  const sheet = useStore(store, (state) => state.sheet);
+  const sheetOptions = useStore(store, (state) => state.sheetOptions);
+
+  const schema = useMemo(() => object<FormFields>().shape({
+    caseTypeId: string().uuid4().required(),
+    createdInDataCollectionId: string().uuid4().required(),
+    fileList: mixed().required(t`File is required`),
+    sheet: string().required(t`Sheet is required`),
+  }), [t]);
+
+  const formMethods = useForm<FormFields>({
+    resolver: yupResolver(schema) as unknown as Resolver<FormFields>,
+    defaultValues: {
+      caseTypeId: null,
+      createdInDataCollectionId: null,
+      fileList: null,
+      sheet: null,
+    },
+    values: {
+      caseTypeId: store.getState().caseTypeId ?? null,
+      createdInDataCollectionId: store.getState().createdInDataCollectionId ?? null,
+      fileList: store.getState().fileList ?? null,
+      sheet: store.getState().sheet ?? null,
+    },
+  });
+  const { handleSubmit, setValue, setError } = formMethods;
+
+  useEffect(() => {
+    if (Array.isArray(colsQuery?.data)) {
+      setCols(colsQuery.data);
+    }
+  }, [colsQuery.data, setCols]);
+
+  useEffect(() => {
+    if (dataCollectionOptionsQuery?.options?.length) {
+      setDataCollectionOptions(dataCollectionOptionsQuery.options);
+    }
+  }, [dataCollectionOptionsQuery?.options, setDataCollectionOptions]);
+
+  const { isLoading: isCompleteCaseTypeLoading, error: completeCaseTypeError, data: completeCaseType } = useItemQuery({
+    baseQueryKey: QUERY_KEY.COMPLETE_CASE_TYPES,
+    itemId: caseTypeId,
+    useQueryOptions: {
+      queryFn: async ({ signal }) => {
+        return (await CaseApi.instance.completeCaseTypesGetOne(caseTypeId, { signal })).data;
+      },
+      enabled: !!caseTypeId,
+    },
+  });
+
+  useEffect(() => {
+    if (completeCaseType) {
+      setCompleteCaseType(completeCaseType);
+    }
+  }, [completeCaseType, setCompleteCaseType]);
+
+  const onFileListChange = useCallback(async (value: FileList) => {
+    await setFileList(value);
+  }, [setFileList]);
+
+  const onSheetChange = useCallback(async (value: unknown) => {
+    await setSheet(value as string);
+  }, [setSheet]);
+
+  const onCaseTypeIdChange = useCallback((value: unknown) => {
+    setCaseTypeId(value as string);
+  }, [setCaseTypeId]);
+
+  const onCreatedInDataCollectionIdChange = useCallback((value: unknown) => {
+    setCreatedInDataCollectionId(value as string);
+  }, [setCreatedInDataCollectionId]);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    const fields: FormFieldDefinition<FormFields>[] = [
+        {
+          definition: FORM_FIELD_DEFINITION_TYPE.FILE,
+          name: 'fileList',
+          label: t`File`,
+          accept: '.csv,.tsv,.txt,.xlsx',
+          onChange: onFileListChange,
+        } as const satisfies FormFieldDefinition<FormFields>,
+    ];
+
+    if (EpiUploadUtil.isXlsxFile(fileName)) {
+      fields.push({
+        definition: FORM_FIELD_DEFINITION_TYPE.SELECT,
+        name: 'sheet',
+        label: t`Sheet`,
+        options: sheetOptions,
+        onChange: onSheetChange,
+      } as const satisfies FormFieldDefinition<FormFields>);
+    }
+
+    fields.push(...[
+        {
+          definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+          name: 'caseTypeId',
+          label: t`Case type`,
+          options: caseTypeOptionsQuery.options,
+          loading: caseTypeOptionsQuery.isLoading,
+          disabled: !fileList,
+          onChange: onCaseTypeIdChange,
+        } as const satisfies FormFieldDefinition<FormFields>,
+        {
+          definition: FORM_FIELD_DEFINITION_TYPE.SELECT,
+          name: 'createdInDataCollectionId',
+          label: t`Create in data collection`,
+          options: createdInDataCollectionOptions,
+          loading: dataCollectionOptionsQuery.isLoading || isCompleteCaseTypeLoading,
+          disabled: !fileList || !caseTypeId,
+          onChange: onCreatedInDataCollectionIdChange,
+        } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const);
+
+    return fields;
+  }, [t, onFileListChange, fileName, caseTypeOptionsQuery.options, caseTypeOptionsQuery.isLoading, fileList, onCaseTypeIdChange, createdInDataCollectionOptions, dataCollectionOptionsQuery.isLoading, isCompleteCaseTypeLoading, caseTypeId, onCreatedInDataCollectionIdChange, sheetOptions, onSheetChange]);
+
+  useEffect(() => {
+    if (fileParsingError) {
+      setError('fileList', { type: 'manual', message: fileParsingError });
+    } else {
+      setError('fileList', undefined);
+    }
+  }, [fileParsingError, setError, setValue]);
+
+  const onFormSubmit = useCallback(async () => {
+    await goToNextStep();
+  }, [goToNextStep]);
+
+  const loadables = useArray([
+    caseTypesQuery,
+    caseTypeOptionsQuery,
+    dataCollectionOptionsQuery,
+    colsQuery,
+  ]);
+
+  const onProceedButtonClick = useCallback(async () => {
+    await handleSubmit(onFormSubmit)();
+  }, [handleSubmit, onFormSubmit]);
+
+  const canUpload = useMemo(() => {
+    if (colsQuery.isLoading === false && colsQuery.data?.length === 0) {
+      return false;
+    }
+    if (caseTypeOptionsQuery.isLoading === false && caseTypeOptionsQuery.options?.length === 0) {
+      return false;
+    }
+    if (dataCollectionOptionsQuery.isLoading === false && dataCollectionOptionsQuery.options?.length === 0) {
+      return false;
+    }
+    return true;
+  }, [colsQuery.data?.length, colsQuery.isLoading, caseTypeOptionsQuery.isLoading, caseTypeOptionsQuery.options?.length, dataCollectionOptionsQuery.isLoading, dataCollectionOptionsQuery.options?.length]);
+
+  return (
+
+    <ResponseHandler
+      inlineSpinner
+      error={completeCaseTypeError}
+      loadables={loadables}
+    >
+      <Container maxWidth={'lg'}>
+        {!canUpload && (
+          <Alert
+            severity={'warning'}
+            sx={{ mb: 2 }}
+          >
+            {t('Upload is disabled because you have insufficient data access to proceed. Contact your organization administrator for assistance.')}
+          </Alert>
+        )}
+        {canUpload && (
+          <>
+            {rawData && rawData.length > 0 && (
+              <Alert
+                severity={'info'}
+                sx={{ mb: 2 }}
+              >
+                <AlertTitle>
+                  {t('{{fileName}} loaded successfully', { fileName })}
+                </AlertTitle>
+                {sheet && (
+                  <Typography>
+                    {t('Sheet name: {{sheet}}', { sheet: sheet || '' })}
+                  </Typography>
+                )}
+                <Typography>
+                  {t('Number of columns: {{columnCount}}', { columnCount: rawData[0].length })}
+                </Typography>
+                <Typography>
+                  {t('Number of data rows: {{rowCount}}', { rowCount: rawData.length - 1 })}
+                </Typography>
+              </Alert>
+            )}
+            <GenericForm<FormFields>
+              formFieldDefinitions={formFieldDefinitions}
+              formId={formId}
+              formMethods={formMethods}
+              schema={schema}
+              onSubmit={handleSubmit(onFormSubmit)}
+            />
+            <EpiUploadNavigation
+              onProceedButtonClick={onProceedButtonClick}
+            />
+          </>
+        )}
+
+      </Container>
+    </ResponseHandler>
+  );
+};
+
+export default EpiUploadSelectFile;