@gen-epix/ui 1.15.1 → 1.15.2

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

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

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

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

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