@gen-epix/ui 1.15.1 → 1.15.2

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

@@ -1,266 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import type { ReactNode } from 'react';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  Alert,
-  AlertTitle,
-  Box,
-  Button,
-  Container,
-} from '@mui/material';
-import { useStore } from 'zustand';
-
-import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
-import { RouterManager } from '../../../classes/managers/RouterManager';
-import { EpiUploadStoreContext } from '../../../stores/epiUploadStore';
-import { GenericErrorMessage } from '../../ui/GenericErrorMessage';
-import { LinearProgressWithLabel } from '../../ui/LinearProgressWithLabel';
-import { EpiUploadUtil } from '../../../utils/EpiUploadUtil';
-import { InactivityManager } from '../../../classes/managers/InactivityManager';
-import { UploadError } from '../../../classes/errors';
-
-import { EpiUploadNavigation } from './EpiUploadNavigation';
-
-
-export const EpiUploadCreateCases = () => {
-  const { t } = useTranslation();
-
-  const store = useContext(EpiUploadStoreContext);
-  const reset = useStore(store, (state) => state.reset);
-  const goToPreviousStep = useStore(store, (state) => state.goToPreviousStep);
-  const sequenceMapping = useStore(store, (state) => state.sequenceMapping);
-  const sequenceFilesDataTransfer = useStore(store, (state) => state.sequenceFilesDataTransfer);
-  const validatedCases = useStore(store, (state) => state.validatedCases);
-  const validatedCasesWithGeneratedId = useStore(store, (state) => state.validatedCasesWithGeneratedId);
-  const completeCaseType = useStore(store, (state) => state.completeCaseType);
-  const rawData = useStore(store, (state) => state.rawData);
-  const [progress, setProgress] = useState(0);
-  const [progressMessage, setProgressMessage] = useState('');
-
-  const [isUploadStarted, setIsUploadStarted] = useState(false);
-  const [isUploadCompleted, setIsUploadCompleted] = useState(false);
-  const [error, setError] = useState<unknown>(undefined);
-
-  const sequenceFileStats = useMemo(() => {
-    return EpiUploadUtil.getSequenceMappingStats(sequenceMapping, sequenceFilesDataTransfer);
-  }, [sequenceFilesDataTransfer, sequenceMapping]);
-
-  useEffect(() => {
-    const abortController = new AbortController();
-    const { signal } = abortController;
-
-    const abort = () => {
-      abortController.abort();
-      InactivityManager.instance.resume();
-    };
-
-    if (!isUploadStarted) {
-      return abort;
-    }
-    InactivityManager.instance.pause();
-
-    EpiUploadUtil.createCasesAndUploadFiles({
-      mappedColumns: store.getState().mappedColumns,
-      completeCaseType: store.getState().completeCaseType,
-      sampleIdColId: store.getState().sampleIdColId,
-      caseTypeId: store.getState().caseTypeId,
-      createdInDataCollectionId: store.getState().createdInDataCollectionId,
-      sequencingProtocolId: store.getState().sequencingProtocolId,
-      assemblyProtocolId: store.getState().assemblyProtocolId,
-      sequenceFilesDataTransfer,
-      sequenceMapping,
-      signal,
-      validatedCases,
-      validatedCasesWithGeneratedId,
-      onProgress: (percentage: number, message: string) => {
-        setProgress(percentage);
-        setProgressMessage(message);
-      },
-      onComplete: () => {
-        setIsUploadCompleted(true);
-      },
-      onError: (e: Error) => {
-        setError(e);
-      },
-    }).catch((e) => {
-      if (!signal.aborted) {
-        setError(e);
-      }
-    });
-
-    return abort;
-  }, [isUploadStarted, sequenceFilesDataTransfer, sequenceMapping, store, t, validatedCases, validatedCasesWithGeneratedId]);
-
-
-  const onStartOverButtonClick = useCallback(async () => {
-    await reset();
-  }, [reset]);
-
-  const onStartUploadButtonClick = useCallback(() => {
-    setIsUploadStarted(true);
-  }, []);
-
-  const onGotoCasesButtonClick = useCallback(async () => {
-    const link = CaseTypeUtil.createCaseTypeLink(completeCaseType);
-    await RouterManager.instance.router.navigate(link);
-  }, [completeCaseType]);
-
-  let content: ReactNode;
-
-  if (error) {
-    content = (
-      <Box>
-        {error instanceof UploadError && (
-          <Alert severity={'error'}>
-            <AlertTitle>
-              {t('Failed to create cases during upload.')}
-            </AlertTitle>
-            {t('An error occurred while creating cases. Please try again or contact support if the issue persists. Cases may have been partially created. No files were uploaded.')}
-          </Alert>
-        )}
-        <GenericErrorMessage error={error} />
-      </Box>
-    );
-  } else if (isUploadCompleted) {
-    content = (
-      <Box>
-        <Box>
-          <Alert severity={'success'}>
-            <AlertTitle>
-              {t('Upload completed.')}
-            </AlertTitle>
-          </Alert>
-        </Box>
-        <Box
-          marginTop={2}
-          marginBottom={1}
-          sx={{
-            display: 'flex',
-            gap: 2,
-            justifyContent: 'flex-end',
-          }}
-        >
-          <Button
-            variant={'outlined'}
-            onClick={onStartOverButtonClick}
-          >
-            {t('Upload more cases')}
-          </Button>
-          <Button
-            variant={'contained'}
-            onClick={onGotoCasesButtonClick}
-          >
-            {t('View uploaded cases')}
-          </Button>
-        </Box>
-      </Box>
-    );
-  } else if (isUploadStarted) {
-    content = (
-      <Box>
-        <Box marginBottom={4}>
-          <Alert severity={'info'}>
-            <AlertTitle>
-              {t('Uploading cases and files.')}
-            </AlertTitle>
-            {t('Please wait while the cases and associated files are being uploaded. This may take a while depending on the number and size of the files being uploaded.')}
-          </Alert>
-        </Box>
-        <Box
-          marginTop={4}
-          marginBottom={2}
-        >
-          <LinearProgressWithLabel value={progress} />
-        </Box>
-        <Box
-          sx={{
-            fontWeight: 700,
-          }}
-        >
-          {progressMessage}
-        </Box>
-      </Box>
-    );
-  } else {
-    content = (
-      <Box>
-        <Box>
-          <Box marginY={2}>
-            <Alert severity={'info'}>
-              <AlertTitle>
-                {t('{{numCases}} cases are ready to be uploaded.', { numCases: validatedCases.length })}
-              </AlertTitle>
-            </Alert>
-          </Box>
-          {sequenceFileStats.mappedSequenceFiles.length > 0 && (
-            <Box marginY={2}>
-              <Alert severity={'info'}>
-                <AlertTitle>
-                  {t('{{numSequenceFiles}} genome files are ready to be uploaded.', { numSequenceFiles: sequenceFileStats.mappedSequenceFiles.length })}
-                </AlertTitle>
-              </Alert>
-            </Box>
-          )}
-          {sequenceFileStats.mappedReadsFiles.length > 0 && (
-            <Box marginY={2}>
-              <Alert severity={'info'}>
-                <AlertTitle>
-                  {t('{{numReadsFiles}} reads files are ready to be uploaded.', { numReadsFiles: sequenceFileStats.mappedReadsFiles.length })}
-                </AlertTitle>
-              </Alert>
-            </Box>
-          )}
-          {(rawData.length - 1) - validatedCases.length > 0 && (
-            <Box marginY={2}>
-              <Alert severity={'warning'}>
-                <AlertTitle>
-                  {t('{{numCases}} cases were not selected and will not be uploaded.', { numCases: (rawData.length - 1) - validatedCases.length })}
-                </AlertTitle>
-              </Alert>
-            </Box>
-          )}
-          {sequenceFileStats.unmappedSequenceFiles.length > 0 && (
-            <Box marginY={2}>
-              <Alert severity={'warning'}>
-                <AlertTitle>
-                  {t('{{unmappedSequenceFiles}} unmapped genome files will not be uploaded.', { unmappedSequenceFiles: sequenceFileStats.unmappedSequenceFiles.length })}
-                </AlertTitle>
-              </Alert>
-            </Box>
-          )}
-          {sequenceFileStats.unmappedReadsFiles.length > 0 && (
-            <Box marginY={2}>
-              <Alert severity={'warning'}>
-                <AlertTitle>
-                  {t('{{unmappedReadsFiles}} unmapped reads files will not be uploaded.', { unmappedReadsFiles: sequenceFileStats.unmappedReadsFiles.length })}
-                </AlertTitle>
-              </Alert>
-            </Box>
-          )}
-        </Box>
-        <EpiUploadNavigation
-          proceedLabel={'Start upload'}
-          onGoBackButtonClick={goToPreviousStep}
-          onProceedButtonClick={onStartUploadButtonClick}
-        />
-      </Box>
-    );
-  }
-
-  return (
-    <Container
-      maxWidth={'xl'}
-      sx={{
-        height: '100%',
-      }}
-    >
-      {content}
-    </Container>
-  );
-};

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

@@ -1,261 +0,0 @@
-import type { ReactElement } from 'react';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-} from 'react';
-import { yupResolver } from '@hookform/resolvers/yup';
-import type { Resolver } from 'react-hook-form';
-import {
-  useForm,
-  useWatch,
-} from 'react-hook-form';
-import {
-  Alert,
-  AlertTitle,
-  Box,
-  Container,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import uniq from 'lodash/uniq';
-import { useStore } from 'zustand';
-import difference from 'lodash/difference';
-
-import { type FormFieldDefinition } from '../../../models/form';
-import { GenericForm } from '../../form/helpers/GenericForm';
-import { useColMapQuery } from '../../../dataHooks/useColsQuery';
-import { useArray } from '../../../hooks/useArray';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { EpiUploadUtil } from '../../../utils/EpiUploadUtil';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { EpiUploadStoreContext } from '../../../stores/epiUploadStore';
-import { Select } from '../../form/fields/Select';
-import { useIdentifierIssuerOwnOrganizationOptionsQuery } from '../../../dataHooks/useIdentifierIssuerOwnOrganizationQuery';
-import type { EpiUploadMappedColumnsFormFields } from '../../../models/epi';
-
-import { EpiUploadNavigation } from './EpiUploadNavigation';
-
-
-export const EpiUploadMapColumns = () => {
-  const { t } = useTranslation();
-  const colMap = useColMapQuery();
-  const identifierIssuerOptionsQuery = useIdentifierIssuerOwnOrganizationOptionsQuery();
-
-  const store = useContext(EpiUploadStoreContext);
-  const completeCaseType = useStore(store, (state) => state.completeCaseType);
-  const rawData = useStore(store, (state) => state.rawData);
-  const fileName = useStore(store, (state) => state.fileName);
-  const goToNextStep = useStore(store, (state) => state.goToNextStep);
-  const goToPreviousStep = useStore(store, (state) => state.goToPreviousStep);
-  const setMappedColumns = useStore(store, (state) => state.setMappedColumns);
-
-  const loadables = useArray([
-    colMap,
-    identifierIssuerOptionsQuery,
-  ]);
-
-  const columnMappingFormId = useId();
-  // const identifierIssuerMappingFormId = useId();
-
-  const schema = useMemo(() => {
-    return EpiUploadUtil.getColumnMappingSchema(rawData, completeCaseType);
-  }, [completeCaseType, rawData]);
-
-  const defaultValues: EpiUploadMappedColumnsFormFields = useMemo(() => {
-    return EpiUploadUtil.getDefaultColumnMappingFormValues(rawData[0], store.getState().mappedColumns, identifierIssuerOptionsQuery.options);
-  }, [rawData, store, identifierIssuerOptionsQuery.options]);
-
-  const formMethods = useForm<EpiUploadMappedColumnsFormFields>({
-    resolver: yupResolver(schema) as unknown as Resolver<EpiUploadMappedColumnsFormFields>,
-    values: { ...defaultValues },
-    defaultValues: { ...defaultValues },
-  });
-
-  const { handleSubmit, control, clearErrors } = formMethods;
-  const columnMappingFormValues = useWatch({ control });
-
-  const formFieldDefinitions = useMemo<FormFieldDefinition<EpiUploadMappedColumnsFormFields>[]>(() => {
-    return EpiUploadUtil.getColumnMappingFormFieldDefinitions(completeCaseType, rawData[0], fileName).map(def => ({
-      ...def,
-      onChange: () => clearErrors(),
-    }));
-  }, [completeCaseType, rawData, fileName, clearErrors]);
-
-  useEffect(() => {
-    const perform = async () => {
-      await setMappedColumns(EpiUploadUtil.getMappedColumnsFromFormData(columnMappingFormValues, rawData, colMap.map, completeCaseType));
-    };
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    perform();
-  }, [setMappedColumns, columnMappingFormValues, rawData, colMap.map, completeCaseType]);
-
-  const unMappedColumns = useMemo(() => {
-    const knownIndicies = rawData[0].map((_col, index) => index);
-    const mappedIndicies = EpiUploadUtil.getMappedColumnsFromFormData(columnMappingFormValues, rawData, colMap.map, completeCaseType).map(mappedColumn => mappedColumn.originalIndex);
-    return difference(knownIndicies, mappedIndicies).map(index => {
-      return {
-        originalIndex: index,
-        originalLabel: rawData[0][index],
-      };
-    });
-  }, [colMap.map, rawData, columnMappingFormValues, completeCaseType]);
-
-  const onFormSubmit = useCallback(async (data: EpiUploadMappedColumnsFormFields) => {
-    await setMappedColumns(EpiUploadUtil.getMappedColumnsFromFormData(data, rawData, colMap.map, completeCaseType));
-    await goToNextStep();
-  }, [rawData, colMap.map, goToNextStep, setMappedColumns, completeCaseType]);
-
-  const sampleIdColIds = useMemo(() => {
-    return EpiUploadUtil.getSampleIdColIds(completeCaseType);
-  }, [completeCaseType]);
-
-  const renderField = useCallback((definition: FormFieldDefinition<EpiUploadMappedColumnsFormFields>, element: ReactElement) => {
-    const columnIndexInRawData = parseInt(definition.name, 10);
-    const columnValues = uniq(rawData.slice(1).map((row) => row[columnIndexInRawData] ?? '')).filter(x => !!x);
-    const firstFiveValuesString = columnValues.slice(0, 5).join(', ').trim() || t('<no data>');
-
-    let elementWithIssuer = element;
-    const fieldValue = columnMappingFormValues[definition.name];
-    if (sampleIdColIds.includes(fieldValue)) {
-      elementWithIssuer = (
-        <>
-          <Box>
-            {element}
-          </Box>
-          <Box marginTop={1}>
-            <Select
-              label={t('{{columnLabel}}: Identifier issuer', { columnLabel: definition.label })}
-              name={fieldValue}
-              options={identifierIssuerOptionsQuery.options}
-              loading={identifierIssuerOptionsQuery.isLoading}
-            />
-          </Box>
-        </>
-      );
-    }
-
-    return (
-      <TableRow key={definition.name}>
-        <TableCell>
-          {definition.label}
-        </TableCell>
-        <TableCell>
-          {elementWithIssuer}
-        </TableCell>
-        <TableCell>
-          {firstFiveValuesString}
-        </TableCell>
-      </TableRow>
-    );
-  }, [columnMappingFormValues, identifierIssuerOptionsQuery.isLoading, identifierIssuerOptionsQuery.options, rawData, sampleIdColIds, t]);
-
-  const wrapForm = useCallback((children: ReactElement) => {
-    return (
-      <Table
-        size={'small'}
-      >
-        <TableHead
-          sx={{
-            position: 'sticky',
-            top: 0,
-            backgroundColor: (theme) => theme.palette.background.paper,
-            zIndex: (theme) => theme.zIndex.appBar - 1,
-          }}
-        >
-          <TableRow>
-            <TableCell sx={{ width: '33%' }}>
-              {t`Source`}
-            </TableCell>
-            <TableCell sx={{ width: '33%' }}>
-              {ConfigManager.instance.config.applicationName}
-            </TableCell>
-            <TableCell sx={{ width: '34%' }}>
-              {t`Data preview (first 5 unique values)`}
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {children}
-        </TableBody>
-      </Table>
-    );
-  }, [t]);
-
-  const onProceedButtonClick = useCallback(async () => {
-    await handleSubmit(onFormSubmit)();
-  }, [handleSubmit, onFormSubmit]);
-
-  return (
-    <ResponseHandler loadables={loadables}>
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateRows: 'max-content auto max-content',
-          height: '100%',
-        }}
-      >
-        <Container
-          maxWidth={'lg'}
-          sx={{
-            marginBottom: 2,
-          }}
-        >
-          <Alert severity={unMappedColumns.length === 0 ? 'info' : 'warning'}>
-            <AlertTitle>
-              {unMappedColumns.length === 0 ?
-                t('All columns in {{fileName}} have been mapped to known columns in {{applicationName}}', { fileName, applicationName: ConfigManager.instance.config.applicationName })
-                : t('{{numUnmappedColumns}} column(s) in {{fileName}} are not mapped', { numUnmappedColumns: unMappedColumns.length, fileName })}
-            </AlertTitle>
-            {unMappedColumns.map((unmappedColumn) => (
-              <Box key={unmappedColumn.originalIndex}>
-                {t('The column "{{columnName}}" (column {{columnIndex}}) has not been mapped.', { columnName: unmappedColumn.originalLabel, columnIndex: unmappedColumn.originalIndex + 1 })}
-              </Box>
-            ))}
-            {unMappedColumns.length === 0 && t('You can proceed to the next step.')}
-          </Alert>
-        </Container>
-        <Box
-          sx={{
-            overflowY: 'auto',
-            position: 'relative',
-          }}
-        >
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-            }}
-          >
-            <Container>
-              <GenericForm<EpiUploadMappedColumnsFormFields>
-                formFieldDefinitions={formFieldDefinitions}
-                formId={columnMappingFormId}
-                formMethods={formMethods}
-                renderField={renderField}
-                wrapForm={wrapForm}
-                schema={schema}
-                onSubmit={handleSubmit(onFormSubmit)}
-              />
-            </Container>
-          </Box>
-        </Box>
-        <Box>
-          <EpiUploadNavigation
-            onGoBackButtonClick={goToPreviousStep}
-            onProceedButtonClick={onProceedButtonClick}
-          />
-        </Box>
-      </Box>
-    </ResponseHandler>
-  );
-};