@gen-epix/ui 1.15.1 → 1.16.0

package/src/components/epi/EpiRemoveCasesFromEventDialog/EpiRemoveCasesFromEventDialog.tsx

@@ -1,169 +0,0 @@
-import { Box } from '@mui/material';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  type ReactElement,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { useStore } from 'zustand';
-import { useShallow } from 'zustand/shallow';
-
-import type {
-  Case,
-  CaseSet,
-  TypedUuidSetFilter,
-  CaseSetMember,
-} from '../../../api';
-import { CaseApi } from '../../../api';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-import { useDeleteMutation } from '../../../hooks/useDeleteMutation';
-import { QUERY_KEY } from '../../../models/query';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import type { DialogAction } from '../../ui/Dialog';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { Spinner } from '../../ui/Spinner';
-import { useQueryMemo } from '../../../hooks/useQueryMemo';
-
-export interface EpiRemoveCasesFromEventDialogOpenProps {
-  rows: Case[];
-  caseSet: CaseSet;
-}
-
-export interface EpiRemoveCasesFromEventDialogProps extends WithDialogRenderProps<EpiRemoveCasesFromEventDialogOpenProps> {
-  //
-}
-
-export type EpiRemoveCasesFromEventDialogRefMethods = WithDialogRefMethods<EpiRemoveCasesFromEventDialogProps, EpiRemoveCasesFromEventDialogOpenProps>;
-
-export const EpiRemoveCasesFromEventDialog = withDialog<EpiRemoveCasesFromEventDialogProps, EpiRemoveCasesFromEventDialogOpenProps>((
-  {
-    openProps,
-    onActionsChange,
-    onTitleChange,
-    onClose,
-  }: EpiRemoveCasesFromEventDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const completeCaseType = useStore(epiDashboardStore, useShallow((state) => state.completeCaseType));
-  const fetchData = useStore(epiDashboardStore, useShallow((state) => state.fetchData));
-  const setSelectedIds = useStore(epiDashboardStore, useShallow((state) => state.setSelectedIds));
-
-  const isMaxExceeded = openProps.rows.length > completeCaseType.delete_max_n_cases;
-
-  const caseSetMembersFilter = useMemo<TypedUuidSetFilter>(() => ({
-    invert: false,
-    key: 'case_id',
-    type: 'UUID_SET',
-    members: openProps.rows.map(row => row.id),
-  }), [openProps.rows]);
-
-  const { isLoading: isCaseSetMembersLoading, error: caseSetMembersError, data: caseSetMembers } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_MEMBERS, caseSetMembersFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetMembersPostQuery(caseSetMembersFilter, { signal });
-      return response.data;
-    },
-  });
-
-  const onSuccess = useCallback(async () => {
-    setSelectedIds([]);
-    await fetchData();
-    onClose();
-  }, [fetchData, onClose, setSelectedIds]);
-
-  const onError = useCallback(async () => {
-    await fetchData();
-    onClose();
-  }, [fetchData, onClose]);
-
-  const { mutate, isMutating } = useDeleteMutation<CaseSetMember[]>({
-    associationQueryKeys: QueryUtil.getQueryKeyDependencies([QUERY_KEY.CASE_SET_MEMBERS], true),
-    queryFn: async (items: CaseSetMember[]) => {
-      await CaseApi.instance.caseSetMembersDeleteSome(items.map(item => item.id).join(','));
-    },
-    getProgressNotificationMessage: (items) => t('Removing {{numCases}} case(s) from {{eventName}}...', { numCases: items.length, eventName: openProps.caseSet.name }),
-    getSuccessNotificationMessage: (items) => t('Successfully removed {{numCases}} case(s) from {{eventName}}.', { numCases: items.length, eventName: openProps.caseSet.name }),
-    getErrorNotificationMessage: () => t('Could not remove all cases from {{eventName}}.', { eventName: openProps.caseSet.name }),
-    onSuccess,
-    onError,
-  });
-
-  const onConfirmButtonClick = useCallback((() => {
-    mutate(caseSetMembers);
-  }), [mutate, caseSetMembers]);
-
-  const onCancelButtonClick = useCallback((() => {
-    onClose();
-  }), [onClose]);
-
-  useEffect(() => {
-    onTitleChange(t`Remove selected cases from event`);
-  }, [onTitleChange, t]);
-
-
-  useEffect(() => {
-    const actions: DialogAction[] = [];
-    actions.push(
-      {
-        ...TestIdUtil.createAttributes('EpiRemoveCasesFromEventDialog-closeButton'),
-        color: 'primary',
-        autoFocus: true,
-        variant: 'outlined',
-        onClick: onCancelButtonClick,
-        disabled: isMutating,
-        label: t`Close`,
-      },
-    );
-    if (!isMaxExceeded) {
-      actions.push(
-        {
-          ...TestIdUtil.createAttributes('EpiRemoveCasesFromEventDialog-confirmButton'),
-          color: 'secondary',
-          autoFocus: true,
-          variant: 'contained',
-          onClick: onConfirmButtonClick,
-          disabled: isMutating,
-          label: t`Confirm`,
-        },
-      );
-    }
-    onActionsChange(actions);
-  }, [isMaxExceeded, isMutating, onActionsChange, onCancelButtonClick, onConfirmButtonClick, t]);
-
-  if (isMutating) {
-    return <Spinner />;
-  }
-
-  return (
-    <ResponseHandler
-      shouldHideActionButtons
-      error={caseSetMembersError}
-      isLoading={isCaseSetMembersLoading}
-    >
-      {isMaxExceeded ? (
-        <Box>
-          {t('You can only remove up to {{maxCases}} cases at a time. Please refine your selection and try again.', { maxCases: completeCaseType.delete_max_n_cases })}
-        </Box>
-      ) : (
-        <Box>
-          {t('Are you sure you want to remove {{numCases}} selected cases from {{eventName}}?', { numCases: openProps.rows.length, eventName: openProps.caseSet.name })}
-        </Box>
-      )}
-    </ResponseHandler>
-  );
-}, {
-  testId: 'EpiRemoveCasesFromEventDialog',
-  maxWidth: 'md',
-  fullWidth: true,
-  defaultTitle: '',
-});

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

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

package/src/components/epi/EpiRemoveFindSimilarCasesResultDialog/EpiRemoveFindSimilarCasesResultDialog.tsx

@@ -1,216 +0,0 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useState,
-  type ReactElement,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  Button,
-  Typography,
-} from '@mui/material';
-import { useStore } from 'zustand';
-import { produce } from 'immer';
-
-import {
-  type WithDialogRenderProps,
-  type WithDialogRefMethods,
-  withDialog,
-} from '../../../hoc/withDialog';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import type { DialogAction } from '../../ui/Dialog';
-import { EpiTreeUtil } from '../../../utils/EpiTreeUtil';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import type { CompleteCaseType } from '../../../api';
-import type { Step } from '../../ui/Stepper';
-import {
-  Stepper,
-  STEPPER_DIRECTION,
-} from '../../ui/Stepper';
-
-export interface EpiRemoveFindSimilarCasesResultDialogOpenProps {
-  completeCaseType: CompleteCaseType;
-}
-
-export interface EpiRemoveFindSimilarCasesResultDialogProps extends WithDialogRenderProps<EpiRemoveFindSimilarCasesResultDialogOpenProps> {
-  //
-}
-
-export type EpiRemoveFindSimilarCasesResultDialogRefMethods = WithDialogRefMethods<EpiRemoveFindSimilarCasesResultDialogProps, EpiRemoveFindSimilarCasesResultDialogOpenProps>;
-
-export const EpiRemoveFindSimilarCasesResultDialog = withDialog<EpiRemoveFindSimilarCasesResultDialogProps, EpiRemoveFindSimilarCasesResultDialogOpenProps>((
-  {
-    openProps,
-    onActionsChange,
-    onTitleChange,
-    onClose,
-  }: EpiRemoveFindSimilarCasesResultDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-  const formId = useId();
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const setFindSimilarCasesResults = useStore(epiDashboardStore, (state) => state.setFindSimilarCasesResults);
-  const treeConfigurations = useMemo(() => EpiTreeUtil.getTreeConfigurations(openProps.completeCaseType), [openProps.completeCaseType]);
-  const findSimilarCasesResults = useStore(epiDashboardStore, (state) => state.findSimilarCasesResults);
-  const [intermediateFindSimilarCasesResults, setIntermediateFindSimilarCasesResults] = useState(findSimilarCasesResults);
-
-  useEffect(() => {
-    onTitleChange(t`Remove similar cases from results`);
-  }, [t, onTitleChange]);
-
-  const onApplyIntermediateResultsButtonClick = useCallback(() => {
-    void setFindSimilarCasesResults(intermediateFindSimilarCasesResults);
-    onClose();
-
-  }, [setFindSimilarCasesResults, intermediateFindSimilarCasesResults, onClose]);
-
-  const onUndoButtonClick = useCallback(() => {
-    setIntermediateFindSimilarCasesResults(findSimilarCasesResults);
-  }, [findSimilarCasesResults]);
-
-  const onRemoveAllAndCloseButtonClick = useCallback(() => {
-    void setFindSimilarCasesResults([]);
-    onClose();
-  }, [setFindSimilarCasesResults, onClose]);
-
-  useEffect(() => {
-    const actions: DialogAction[] = [];
-    actions.push({
-      ...TestIdUtil.createAttributes('EpiRemoveFindSimilarCasesResultDialog-closeButton'),
-      color: 'primary',
-      variant: 'outlined',
-      label: t`Close`,
-      onClick: onClose,
-    });
-    if (findSimilarCasesResults.length !== intermediateFindSimilarCasesResults.length) {
-      actions.push({
-        ...TestIdUtil.createAttributes('EpiRemoveFindSimilarCasesResultDialog-undoButton'),
-        color: 'secondary',
-        variant: 'outlined',
-        label: t`Undo`,
-        onClick: onUndoButtonClick,
-      });
-    }
-    if (findSimilarCasesResults.length !== intermediateFindSimilarCasesResults.length) {
-      actions.push({
-        ...TestIdUtil.createAttributes('EpiRemoveFindSimilarCasesResultDialog-applyButton'),
-        color: 'secondary',
-        variant: 'contained',
-        label: t`Apply and close`,
-        onClick: onApplyIntermediateResultsButtonClick,
-      });
-    }
-    onActionsChange(actions);
-  }, [formId, onActionsChange, onClose, t, findSimilarCasesResults, intermediateFindSimilarCasesResults, onApplyIntermediateResultsButtonClick, onUndoButtonClick]);
-
-  const onRemoveCasesButtonClick = useCallback((index: number) => {
-    setIntermediateFindSimilarCasesResults(produce(intermediateFindSimilarCasesResults, draft => {
-      draft.splice(index, 1);
-      return draft;
-    }));
-  }, [intermediateFindSimilarCasesResults]);
-
-  const steps = useMemo((): Step[] => {
-    return [
-      {
-        key: 'start',
-        label: t('Result without similar cases ({{numberOfCases}} cases)', {
-          numberOfCases: findSimilarCasesResults?.[0]?.originalCaseIds.length || 0,
-        }),
-        index: '',
-        content: (
-          <Box
-            marginTop={1}
-            marginBottom={2}
-          >
-            <Button
-              variant={'outlined'}
-              color={'primary'}
-              onClick={onRemoveAllAndCloseButtonClick}
-            >
-              {t('Remove all similar cases from result')}
-            </Button>
-          </Box>
-        ),
-      },
-      ...intermediateFindSimilarCasesResults.map((item, index) => ({
-        key: item.key,
-        label: t('Searched {{numberOfInputCases}} cases for similar cases.', {
-          numberOfInputCases: item.originalCaseIds.length,
-        }),
-        index: (index + 1).toString(),
-        content: (
-          <Box>
-            <Box component={'ul'}>
-              <Box component={'li'}>
-                {t('Tree: {{treeLabel}}', {
-                  treeLabel: treeConfigurations.find((config) => config.col.id === item.colId)?.col?.label || item.colId,
-                })}
-              </Box>
-              <Box component={'li'}>
-                {t('Distance: {{distance}}', {
-                  distance: item.distance,
-                })}
-              </Box>
-              <Box component={'li'}>
-                {t('Found similar cases: {{foundCases}}', {
-                  foundCases: item.similarCaseIds.length,
-                })}
-              </Box>
-              <Box component={'li'}>
-                {t('New number of cases: {{numberOfCases}}', {
-                  numberOfCases: item.similarCaseIds.length + item.originalCaseIds.length,
-                })}
-              </Box>
-            </Box>
-            <Box
-              marginTop={1}
-              marginBottom={2}
-            >
-              <Button
-                disabled={index !== intermediateFindSimilarCasesResults.length - 1}
-                variant={'outlined'}
-                color={'primary'}
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick={() => onRemoveCasesButtonClick(index)}
-              >
-                {t('Remove')}
-              </Button>
-            </Box>
-          </Box>
-        ),
-      }))];
-  }, [findSimilarCasesResults, intermediateFindSimilarCasesResults, onRemoveAllAndCloseButtonClick, onRemoveCasesButtonClick, t, treeConfigurations]);
-
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-      }}
-    >
-      {steps.length === 0 && (
-        <Typography>
-          {t('No similar cases results to remove.')}
-        </Typography>
-      )}
-      {steps.length > 0 && (
-        <Stepper
-          hideCompletedIndicator
-          steps={steps}
-          activeStep={steps[steps.length - 1].key}
-          direction={STEPPER_DIRECTION.VERTICAL}
-        />
-      )}
-    </Box>
-  );
-
-}, {
-  testId: 'EpiRemoveFindSimilarCasesResultDialog',
-  maxWidth: 'lg',
-  fullWidth: true,
-  defaultTitle: '',
-});

package/src/components/epi/EpiSequenceDownloadDialog/EpiSequenceDownloadDialog.tsx

@@ -1,151 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  Button,
-} from '@mui/material';
-import DownloadIcon from '@mui/icons-material/Download';
-import type { ReactElement } from 'react';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { useStore } from 'zustand';
-import { useShallow } from 'zustand/shallow';
-import {
-  FormProvider,
-  useForm,
-} from 'react-hook-form';
-import noop from 'lodash/noop';
-
-import type { Case } from '../../../api';
-import { ColType } from '../../../api';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-import type { AutoCompleteOption } from '../../../models/form';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { DownloadUtil } from '../../../utils/DownloadUtil';
-import { Autocomplete } from '../../form/fields/Autocomplete';
-import { StringUtil } from '../../../utils/StringUtil';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-
-export interface EpiSequenceDownloadDialogOpenProps {
-  cases: Case[];
-  geneticSequenceColId?: string;
-}
-
-export interface EpiSequenceDownloadDialogProps extends WithDialogRenderProps<EpiSequenceDownloadDialogOpenProps> {
-  //
-}
-
-export type EpiSequenceDownloadDialogRefMethods = WithDialogRefMethods<EpiSequenceDownloadDialogProps, EpiSequenceDownloadDialogOpenProps>;
-
-type FormFields = {
-  geneticSequenceColId: string;
-};
-
-export const EpiSequenceDownloadDialog = withDialog<EpiSequenceDownloadDialogProps, EpiSequenceDownloadDialogOpenProps>((
-  {
-    openProps,
-    onTitleChange,
-    onClose,
-  }: EpiSequenceDownloadDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const completeCaseType = useStore(epiDashboardStore, useShallow((state) => state.completeCaseType));
-
-  const geneticSequenceColOptions = useMemo<AutoCompleteOption<string>[]>(() => {
-    const options: AutoCompleteOption<string>[] = [];
-
-    completeCaseType.ordered_dim_ids.map(x => completeCaseType.dims[x]).forEach((dim) => {
-      completeCaseType.ordered_col_ids_by_dim[dim.id].map(id => completeCaseType.cols[id]).forEach(col => {
-        const refCol = completeCaseType.ref_cols[col.ref_col_id];
-        if (refCol?.col_type === ColType.GENETIC_SEQUENCE) {
-          options.push({
-            value: col.id,
-            label: col.label,
-          });
-        }
-      });
-    });
-    return options;
-  }, [completeCaseType]);
-
-  const [geneticSequenceColId, setGeneticSequenceColId] = useState(openProps?.geneticSequenceColId ?? geneticSequenceColOptions?.length === 1 ? geneticSequenceColOptions[0].value : '');
-
-  const formMethods = useForm<FormFields>({
-    values: {
-      geneticSequenceColId,
-    },
-  });
-
-  const onDownloadFastaButtonClick = useCallback(() => {
-    DownloadUtil.downloadAsMultiPartForm({
-      action: `${ConfigManager.instance.config.getAPIBaseUrl()}/v1/retrieve/genetic_sequence/fasta`,
-      data: {
-        case_type_id: completeCaseType.id,
-        case_ids: openProps.cases.map(c => c.id),
-        genetic_sequence_col_id: geneticSequenceColId,
-        file_name: `${StringUtil.createSlug(completeCaseType.name)}-${StringUtil.createSlug(geneticSequenceColOptions.find(x => x.value === geneticSequenceColId)?.label)}-sequences.fasta`,
-      },
-    });
-    onClose();
-  }, [completeCaseType.id, completeCaseType.name, geneticSequenceColId, geneticSequenceColOptions, onClose, openProps.cases]);
-
-  useEffect(() => {
-    onTitleChange(t`Download sequences`);
-  }, [onTitleChange, t]);
-
-  return (
-    <Box>
-      <Box marginBottom={3}>
-        <FormProvider {...formMethods}>
-          <form
-            autoComplete={'off'}
-            onSubmit={noop}
-          >
-            <Autocomplete
-              disabled={geneticSequenceColOptions.length < 2}
-              label={t`Genetic sequence column`}
-              options={geneticSequenceColOptions}
-              name={'geneticSequenceColId'}
-              // eslint-disable-next-line react/jsx-no-bind
-              onChange={(value: string) => setGeneticSequenceColId(value)}
-            />
-          </form>
-        </FormProvider>
-      </Box>
-      {geneticSequenceColId && (
-        <Box
-          marginBottom={1}
-          sx={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: 1,
-          }}
-        >
-          <Box>
-            <Button
-              startIcon={<DownloadIcon />}
-              color={'primary'}
-              onClick={onDownloadFastaButtonClick}
-            >
-              {t`Download FASTA`}
-            </Button>
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
-}, {
-  testId: 'EpiSequenceDownloadDialog',
-  maxWidth: 'lg',
-  fullWidth: true,
-  defaultTitle: '',
-});

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

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