@gen-epix/ui 1.15.1 → 1.15.2

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

@@ -1,332 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,285 +0,0 @@
-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;