@gen-epix/ui 1.14.4 → 1.15.0

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

@@ -0,0 +1,375 @@
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  useTheme,
+} from '@mui/material';
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import {
+  object,
+  string,
+} from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import type { Resolver } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import noop from 'lodash/noop';
+
+import { FileSelector } from '../../ui/FileSelector';
+import { EpiUploadUtil } from '../../../utils/EpiUploadUtil';
+import { EpiUploadStoreContext } from '../../../stores/epiUploadStore';
+import { useSequencingProtocolOptionsQuery } from '../../../dataHooks/useSequencingProtocolsQuery';
+import { useArray } from '../../../hooks/useArray';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import type {
+  FormFieldDefinition,
+  SelectOption,
+} from '../../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../../models/form';
+import { GenericForm } from '../../form/helpers/GenericForm';
+import { useAssemblyProtocolOptionsQuery } from '../../../dataHooks/useAssemblyProtocolsQuery';
+
+import { EpiUploadNavigation } from './EpiUploadNavigation';
+
+
+type FormFields = {
+  sequencingProtocolId: string;
+  assemblyProtocolId: string;
+  sampleIdColId: string;
+};
+
+export const EpiUploadSelectSequenceFiles = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const store = useContext(EpiUploadStoreContext);
+  const completeCaseType = useStore(store, (state) => state.completeCaseType);
+  const mappedColumns = useStore(store, (state) => state.mappedColumns);
+  const validatedCases = useStore(store, (state) => state.validatedCases);
+  const goToNextStep = useStore(store, (state) => state.goToNextStep);
+  const goToPreviousStep = useStore(store, (state) => state.goToPreviousStep);
+  const setSequenceFilesDataTransfer = useStore(store, (state) => state.setSequenceFilesDataTransfer);
+  const sampleIdColId = useStore(store, (state) => state.sampleIdColId);
+  const initialDataTransfer = useStore(store, (state) => state.sequenceFilesDataTransfer);
+  const dataTransfer = useRef(initialDataTransfer);
+
+  const formId = useId();
+
+  const sequencingProtocolOptionsQuery = useSequencingProtocolOptionsQuery();
+  const assemblyProtocolOptionsQuery = useAssemblyProtocolOptionsQuery();
+
+  const loadables = useArray([
+    sequencingProtocolOptionsQuery,
+    assemblyProtocolOptionsQuery,
+  ]);
+
+  const sampleIdColIdOptions = useMemo<SelectOption<string>[]>(() => {
+    return mappedColumns.filter(mc => mc.isSampleIdColumn).map(mc => ({
+      label: mc.col.label,
+      value: mc.col.id,
+    } satisfies SelectOption<string>));
+  }, [mappedColumns]);
+
+  const schema = useMemo(() => object<FormFields>().shape({
+    // eslint-disable-next-line react-hooks/refs
+    sequencingProtocolId: string().when({
+      is: () => Array.from(dataTransfer.current?.files ?? []).filter(f => EpiUploadUtil.isReadsFile(f.name)).length > 0,
+      then: () => string().uuid4().required(),
+      otherwise: () => string().nullable().notRequired(),
+    }),
+    // eslint-disable-next-line react-hooks/refs
+    assemblyProtocolId: string().when({
+      is: () => Array.from(dataTransfer.current?.files ?? []).filter(f => EpiUploadUtil.isGenomeFile(f.name)).length > 0,
+      then: () => string().uuid4().required(),
+      otherwise: () => string().nullable().notRequired(),
+    }),
+    // eslint-disable-next-line react-hooks/refs
+    sampleIdColId: string().when({
+      is: () => Array.from(dataTransfer.current?.files ?? []).length > 0,
+      then: () => string().uuid4().required(),
+      otherwise: () => string().nullable().notRequired(),
+    }),
+  }), []);
+
+  const defaultFormValues = useMemo<FormFields>(() => {
+    return {
+      sequencingProtocolId: store.getState().sequencingProtocolId ?? null,
+      assemblyProtocolId: store.getState().assemblyProtocolId ?? null,
+      sampleIdColId: store.getState().sampleIdColId ?? null,
+    };
+  }, [store]);
+
+  const formMethods = useForm<FormFields>({
+    resolver: yupResolver(schema) as unknown as Resolver<FormFields>,
+    defaultValues: defaultFormValues,
+    values: defaultFormValues,
+  });
+  const { handleSubmit, setValue } = formMethods;
+
+  useEffect(() => {
+    if (sequencingProtocolOptionsQuery.isLoading || assemblyProtocolOptionsQuery.isLoading) {
+      return;
+    }
+    if (!store.getState().sequencingProtocolId) {
+      setValue('sequencingProtocolId', sequencingProtocolOptionsQuery.options[0]?.value || null);
+      store.setState({ sequencingProtocolId: sequencingProtocolOptionsQuery.options[0]?.value || null });
+    }
+    if (!store.getState().assemblyProtocolId) {
+      setValue('assemblyProtocolId', assemblyProtocolOptionsQuery.options[0]?.value || null);
+      store.setState({ assemblyProtocolId: assemblyProtocolOptionsQuery.options[0]?.value || null });
+    }
+    if (!store.getState().sampleIdColId) {
+      setValue('sampleIdColId', sampleIdColIdOptions[0]?.value || null);
+      store.setState({ sampleIdColId: sampleIdColIdOptions[0]?.value || null });
+    }
+  }, [assemblyProtocolOptionsQuery.isLoading, assemblyProtocolOptionsQuery.options, sequencingProtocolOptionsQuery.isLoading, sequencingProtocolOptionsQuery.options, setValue, store, sampleIdColIdOptions]);
+
+  const onSequencingProtocolChange = useCallback((value: string) => {
+    store.setState({ sequencingProtocolId: value });
+  }, [store]);
+
+  const onAssemblyProtocolChange = useCallback((value: string) => {
+    store.setState({ assemblyProtocolId: value });
+  }, [store]);
+
+  const onSampleIdColIdChange = useCallback((value: string) => {
+    store.setState({ sampleIdColId: value });
+  }, [store]);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+        {
+          definition: FORM_FIELD_DEFINITION_TYPE.SELECT,
+          name: 'assemblyProtocolId',
+          label: t`Genome files: assembly protocol`,
+          options: assemblyProtocolOptionsQuery.options,
+          loading: assemblyProtocolOptionsQuery.isLoading,
+          onChange: onAssemblyProtocolChange,
+        } as const satisfies FormFieldDefinition<FormFields>,
+        {
+          definition: FORM_FIELD_DEFINITION_TYPE.SELECT,
+          name: 'sequencingProtocolId',
+          label: t`Reads files: sequencing protocol`,
+          options: sequencingProtocolOptionsQuery.options,
+          loading: sequencingProtocolOptionsQuery.isLoading,
+          onChange: onSequencingProtocolChange,
+        } as const satisfies FormFieldDefinition<FormFields>,
+        {
+          definition: FORM_FIELD_DEFINITION_TYPE.SELECT,
+          name: 'sampleIdColId',
+          label: t`Sample ID column`,
+          options: sampleIdColIdOptions,
+          onChange: onSampleIdColIdChange,
+        } as const satisfies FormFieldDefinition<FormFields>,
+    ];
+  }, [assemblyProtocolOptionsQuery.isLoading, assemblyProtocolOptionsQuery.options, onAssemblyProtocolChange, onSampleIdColIdChange, onSequencingProtocolChange, sampleIdColIdOptions, sequencingProtocolOptionsQuery.isLoading, sequencingProtocolOptionsQuery.options, t]);
+
+
+  const hasWritableSampleIdColumn = useMemo(() => {
+    return mappedColumns.some(mappedColumn => {
+      return mappedColumn.isSampleIdColumn && mappedColumn.sampleIdentifierIssuerId;
+    });
+  }, [mappedColumns]);
+
+  const hasRowContentForSampleIdColId = useMemo(() => {
+    if (!sampleIdColId) {
+      return false;
+    }
+    return validatedCases.some(vc => {
+      return vc.validated_content[sampleIdColId]?.trim().length > 0;
+    });
+  }, [sampleIdColId, validatedCases]);
+
+  const completeCaseTypeColStats = useMemo(() => {
+    return EpiUploadUtil.getCompleteCaseTypeColStats(completeCaseType);
+  }, [completeCaseType]);
+
+  const canUploadSequences = useMemo(() => {
+    return completeCaseTypeColStats.sequenceColumns.length > 0;
+  }, [completeCaseTypeColStats]);
+
+  const canUploadReads = useMemo(() => {
+    return completeCaseTypeColStats.readsColumns.length > 0;
+  }, [completeCaseTypeColStats]);
+
+  const canUpload = useMemo(() => {
+    return hasWritableSampleIdColumn && hasRowContentForSampleIdColId && (canUploadSequences || canUploadReads);
+  }, [hasWritableSampleIdColumn, hasRowContentForSampleIdColId, canUploadSequences, canUploadReads]);
+
+  const accept = useMemo(() => {
+    let acc = '';
+    if (canUploadSequences) {
+      acc += '.fa,.fasta,.fa.gz,.fasta.gz,';
+    }
+    if (canUploadReads) {
+      acc += '.fq,.fastq,.fq.gz,.fastq.gz,';
+    }
+    return acc;
+  }, [canUploadReads, canUploadSequences]);
+
+  const onProceedButtonClick = useCallback(async () => {
+    setSequenceFilesDataTransfer(canUpload ? dataTransfer.current : new DataTransfer());
+    await handleSubmit(async () => {
+      await goToNextStep();
+    })();
+  }, [canUpload, goToNextStep, handleSubmit, setSequenceFilesDataTransfer]);
+
+  const onDataTransferChange = useCallback((dt: DataTransfer) => {
+    dataTransfer.current = dt;
+
+    // Note: setState in a timeout to avoid React state update during rendering warning
+    setTimeout(() => {
+      setSequenceFilesDataTransfer(dataTransfer.current);
+    });
+  }, [setSequenceFilesDataTransfer]);
+
+  const wrapForm = useCallback((children: ReactElement) => {
+    return (
+      <Box
+        sx={{
+          display: 'grid',
+          gap: theme.spacing(1),
+          gridTemplateColumns: '1fr 1fr 1fr',
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }, [theme]);
+
+  const cantUploadMessage = useMemo<{ title: string; message: string }>(() => {
+    if (!hasWritableSampleIdColumn) {
+      return {
+        title: t('Uploading of files is disabled.'),
+        message: t`No columns have been mapped as writable sample ID column with selected identifier issuer provider.`,
+      };
+    }
+    if (!hasRowContentForSampleIdColId) {
+      return {
+        title: t('Uploading of files is disabled.'),
+        message: t`No rows have a sample ID filled for the selected sample ID column.`,
+      };
+    }
+    if (!canUploadReads) {
+      return {
+        title: t('Uploading of read files is disabled.'),
+        message: t`The selected case type does not support uploading read files.`,
+      };
+    }
+    if (!canUploadSequences) {
+      return {
+        title: t('Uploading of sequence files is disabled.'),
+        message: t`The selected case type does not support uploading sequence files.`,
+      };
+    }
+    return null;
+  }, [canUploadReads, canUploadSequences, hasRowContentForSampleIdColId, hasWritableSampleIdColumn, t]);
+
+  return (
+    <ResponseHandler
+      loadables={loadables}
+    >
+      <Box
+        sx={{
+          height: '100%',
+          display: 'grid',
+          gridTemplateRows: `${canUpload ? '' : 'max-content '}max-content auto max-content`,
+          position: 'relative',
+        }}
+      >
+        {!canUpload && (
+          <Box marginBottom={2}>
+            <Alert severity={'error'}>
+              <AlertTitle>
+                {cantUploadMessage.title}
+              </AlertTitle>
+              {cantUploadMessage.message}
+            </Alert>
+          </Box>
+        )}
+        <Box
+          sx={{
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <Box
+            maxWidth={theme.spacing(128)}
+          >
+            <GenericForm<FormFields>
+              formFieldDefinitions={formFieldDefinitions}
+              formId={formId}
+              formMethods={formMethods}
+              wrapForm={wrapForm}
+              schema={schema}
+              onSubmit={noop}
+            />
+          </Box>
+          {!canUploadSequences && (
+            <Box marginY={1}>
+              <Alert severity={'info'}>
+                <AlertTitle>
+                  {t('Uploading of sequences has been disabled.')}
+                </AlertTitle>
+                <Box>
+                  {t('Uploading of sequences is not supported for the selected case type.')}
+                </Box>
+              </Alert>
+            </Box>
+          )}
+          {!canUploadReads && (
+            <Box marginY={1}>
+              <Alert severity={'info'}>
+                <AlertTitle>
+                  {t('Uploading of read files has been disabled.')}
+                </AlertTitle>
+                <Box>
+                  {t('Uploading of read files is not supported for the selected case type.')}
+                </Box>
+              </Alert>
+            </Box>
+          )}
+        </Box>
+        <Box
+          sx={{
+            position: 'relative',
+          }}
+        >
+
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: '100%',
+            }}
+          >
+            {canUpload && (
+              <FileSelector
+                initialDataTransfer={initialDataTransfer}
+                accept={accept}
+                numFilesAllowed={Infinity}
+                onDataTransferChange={onDataTransferChange}
+              />
+            )}
+          </Box>
+        </Box>
+        <EpiUploadNavigation
+          proceedLabel={!canUpload ? t`Proceed` : undefined}
+          onGoBackButtonClick={goToPreviousStep}
+          onProceedButtonClick={onProceedButtonClick}
+        />
+      </Box>
+    </ResponseHandler>
+  );
+};

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

@@ -0,0 +1,199 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useStore } from 'zustand';
+import {
+  Alert,
+  AlertTitle,
+  Box,
+} from '@mui/material';
+import omit from 'lodash/omit';
+import { useTranslation } from 'react-i18next';
+import { useShallow } from 'zustand/shallow';
+
+import { EpiUploadStoreContext } from '../../../stores/epiUploadStore';
+import { EpiCompletCaseTypeLoader } from '../EpiCompletCaseTypeLoader';
+import type { CaseForUpload } from '../../../api';
+import {
+  CaseApi,
+  DataIssueType,
+  UploadAction,
+} from '../../../api';
+import { useArray } from '../../../hooks/useArray';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+import type { CaseUploadResultWithGeneratedId } from '../../../models/epi';
+import {
+  createTableStore,
+  TableStoreContextProvider,
+} from '../../../stores/tableStore';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { EpiUploadUtil } from '../../../utils/EpiUploadUtil';
+
+import { EpiUploadCaseResultTable } from './EpiUploadCaseResultTable';
+import { EpiUploadValidateNavigation } from './EpiUploadValidateNavigation';
+
+export const EpiUploadValidateInner = () => {
+  const { t } = useTranslation();
+
+  const store = useContext(EpiUploadStoreContext);
+  const goToNextStep = useStore(store, (state) => state.goToNextStep);
+  const goToPreviousStep = useStore(store, (state) => state.goToPreviousStep);
+  const mappedColumns = useStore(store, (state) => state.mappedColumns);
+  const completeCaseType = useStore(store, (state) => state.completeCaseType);
+  const setValidatedCases = useStore(store, (state) => state.setValidatedCases);
+  const caseTypeId = useStore(store, (state) => state.caseTypeId);
+  const createdInDataCollectionId = useStore(store, (state) => state.createdInDataCollectionId);
+  const rawData = useStore(store, (state) => state.rawData);
+  const validateCasesQueryKey = useStore(store, (state) => state.validateCasesQueryKey);
+  const [exceedsMaxNumCases, setExceedsMaxNumCases] = useState(false);
+
+  const casesForVerification = useMemo<CaseForUpload[]>(() => {
+    return EpiUploadUtil.getCasesForVerification({
+      rawData,
+      mappedColumns,
+      caseTypeId,
+      createdInDataCollectionId,
+    });
+  }, [caseTypeId, createdInDataCollectionId, mappedColumns, rawData]);
+
+  const caseUploadValidationResultQuery = useQueryMemo({
+    queryKey: validateCasesQueryKey,
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.uploadCases({
+        case_type_id: caseTypeId,
+        created_in_data_collection_id: createdInDataCollectionId,
+        verify_only: true,
+        on_exists: UploadAction.UPDATE,
+        case_batch: {
+          cases: casesForVerification,
+        },
+      }, { signal });
+      return response.data;
+    },
+    enabled: mappedColumns.length > 0 && casesForVerification.length > 0,
+    gcTime: Infinity,
+    staleTime: Infinity,
+  });
+
+  const rowsWithGeneratedId = useMemo<CaseUploadResultWithGeneratedId[]>(() => {
+    return (caseUploadValidationResultQuery?.data?.cases || []).map((vc, index) => ({
+      ...vc,
+      generatedId: vc.id || index.toString(),
+    }));
+  }, [caseUploadValidationResultQuery?.data?.cases]);
+
+  const loadables = useArray([
+    caseUploadValidationResultQuery,
+  ]);
+
+  const tableStore = useMemo(() => createTableStore<CaseUploadResultWithGeneratedId>({
+    idSelectorCallback: (row) => row.generatedId,
+  }), []);
+
+  const selectedIdsRef = useRef<string[]>([]);
+
+  // const selectedIds = useStore(tableStore, (state) => state.selectedIds);
+  const setSelectedIds = useStore(tableStore, useShallow((state) => state.setSelectedIds));
+
+
+  useEffect(() => {
+    const unsubscribe = tableStore.subscribe((state, prevState) => {
+      if (state.selectedIds === prevState.selectedIds) {
+        return;
+      }
+      selectedIdsRef.current = state.selectedIds;
+      const newExceedsMaxNumCases = state.selectedIds.length > completeCaseType.create_max_n_cases;
+      setExceedsMaxNumCases(newExceedsMaxNumCases);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [completeCaseType.create_max_n_cases, tableStore]);
+
+  useEffect(() => {
+    const newSelectedIds = rowsWithGeneratedId.filter(validatedCase => {
+      return !validatedCase.data_issues.some(issue => issue.data_issue_type === DataIssueType.INVALID || issue.data_issue_type === DataIssueType.UNAUTHORIZED);
+    }).map(vc => vc.generatedId);
+    setSelectedIds(newSelectedIds);
+  }, [rowsWithGeneratedId, setSelectedIds]);
+
+  const onProceedButtonClick = useCallback(async () => {
+    const validatedCases = rowsWithGeneratedId.filter(r => selectedIdsRef.current.includes(r.generatedId)).map(r => omit(r, 'generatedId'));
+    setValidatedCases(validatedCases);
+    await goToNextStep();
+  }, [goToNextStep, rowsWithGeneratedId, selectedIdsRef, setValidatedCases]);
+
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        display: 'grid',
+        gridTemplateRows: `${exceedsMaxNumCases ? 'max-content' : ''} max-content auto max-content`,
+      }}
+    >
+      <TableStoreContextProvider store={tableStore}>
+        <ResponseHandler
+          inlineSpinner
+          loadables={loadables}
+          loadingMessage={t('Validating cases')}
+          takingLongerTimeoutMs={10000}
+        >
+          {exceedsMaxNumCases && (
+            <Box marginY={2}>
+              <Alert severity={'error'}>
+                <AlertTitle>
+                  {t('You have exceeded the maximum number of {{maxCases}} cases for this case type. Please reduce the number of selected cases before proceeding.', {
+                    maxCases: completeCaseType.create_max_n_cases,
+                  })}
+                </AlertTitle>
+              </Alert>
+            </Box>
+          )}
+          <EpiUploadCaseResultTable
+            completeCaseType={completeCaseType}
+            rowsWithGeneratedId={rowsWithGeneratedId}
+            validatedCases={caseUploadValidationResultQuery?.data?.cases || []}
+            rawData={rawData}
+            mappedColumns={mappedColumns}
+            tableStore={tableStore}
+          />
+          <EpiUploadValidateNavigation
+            onGoBackButtonClick={goToPreviousStep}
+            onProceedButtonClick={onProceedButtonClick}
+          />
+        </ResponseHandler>
+      </TableStoreContextProvider>
+    </Box>
+  );
+};
+
+export const EpiUploadValidate = () => {
+  const store = useContext(EpiUploadStoreContext);
+  const completeCaseType = useStore(store, (state) => state.completeCaseType);
+
+  const [isCompleteCaseTypeLoaded, setIsCompleteCaseTypeLoaded] = useState<boolean>(false);
+
+  const onCompleteCaseTypeLoaded = useCallback(() => {
+    setIsCompleteCaseTypeLoaded(true);
+  }, []);
+
+  return (
+    <EpiCompletCaseTypeLoader
+      caseTypeId={completeCaseType.id}
+      onCompleteCaseTypeLoaded={onCompleteCaseTypeLoaded}
+    >
+      {isCompleteCaseTypeLoaded && (
+        <EpiUploadValidateInner />
+      )}
+    </EpiCompletCaseTypeLoader>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import { useContext } from 'react';
+
+import type { CaseUploadResultWithGeneratedId } from '../../../models/epi';
+import { useTableStoreContext } from '../../../stores/tableStore';
+import { EpiUploadStoreContext } from '../../../stores/epiUploadStore';
+
+import { EpiUploadNavigation } from './EpiUploadNavigation';
+
+export type EpiUploadValidateNavigationProps = {
+  readonly onGoBackButtonClick: () => void;
+  readonly onProceedButtonClick: () => void;
+};
+
+export const EpiUploadValidateNavigation = ({ onGoBackButtonClick, onProceedButtonClick }: EpiUploadValidateNavigationProps) => {
+  const { t } = useTranslation();
+  const tableStore = useTableStoreContext<CaseUploadResultWithGeneratedId>();
+  const uploadStore = useContext(EpiUploadStoreContext);
+
+  const completeCaseType = useStore(uploadStore, (state) => state.completeCaseType);
+  const selectedIds = useStore(tableStore, (state) => state.selectedIds);
+
+  const proceedDisabled = !selectedIds.length || selectedIds.length > completeCaseType.create_max_n_cases;
+
+  return (
+    <EpiUploadNavigation
+      proceedLabel={t`Continue`}
+      proceedDisabled={proceedDisabled}
+      onGoBackButtonClick={onGoBackButtonClick}
+      onProceedButtonClick={onProceedButtonClick}
+    />
+  );
+};

package/src/components/epi/EpiUpload/index.ts

@@ -0,0 +1 @@
+export * from './EpiUpload';