@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/epi/EpiDashboardStoreLoader/EpiDashboardStoreLoaderContent.tsx

@@ -0,0 +1,73 @@
+import type { PropsWithChildren } from 'react';
+import {
+  useMemo,
+  useEffect,
+} from 'react';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+
+import type {
+  CompleteCaseType,
+  CaseSet,
+} from '../../../api';
+import type { TableColumnDimension } from '../../../models/table';
+import {
+  createEpiDashboardStore,
+  EpiDashboardStoreContext,
+} from '../../../stores/epiDashboardStore';
+import { TableStoreContextProvider } from '../../../stores/tableStore';
+import { StringUtil } from '../../../utils/StringUtil';
+import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
+
+type EpiDashboardStoreLoaderContentProps = PropsWithChildren<{
+  readonly completeCaseType: CompleteCaseType;
+  readonly caseSet: CaseSet;
+}>;
+
+export const EpiDashboardStoreLoaderContent = ({ completeCaseType, caseSet, children }: EpiDashboardStoreLoaderContentProps) => {
+  const epiDashBoardStore = useMemo(() => {
+    const store = createEpiDashboardStore({
+      idSelectorCallback: (row) => row.id,
+      caseSetId: caseSet?.id,
+      completeCaseType,
+      storageNamePostFix: `epiDashboardStoreLoader-${StringUtil.createSlug(completeCaseType.name)}-${StringUtil.createHash(completeCaseType.id)}`,
+      storageVersion: 1,
+    });
+    return store;
+  }, [caseSet, completeCaseType]);
+
+  const tableColumnDimensions = useMemo<TableColumnDimension[]>(() => {
+    const items: TableColumnDimension[] = [];
+    completeCaseType.ordered_dim_ids.map(x => completeCaseType.dims[x]).forEach((dim) => {
+      const item: TableColumnDimension = {
+        label: CaseTypeUtil.getDimLabel(completeCaseType, dim.id),
+        id: dim.id,
+        columnIds: completeCaseType.ordered_col_ids_by_dim[dim.id],
+      };
+      items.push(item);
+    });
+    return items;
+  }, [completeCaseType]);
+
+  const initialize = useStore(epiDashBoardStore, useShallow((state) => state.initialize));
+  const setColumnDimensions = useStore(epiDashBoardStore, useShallow((state) => state.setColumnDimensions));
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    setColumnDimensions(tableColumnDimensions);
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    initialize(abortController.signal);
+    return () => {
+      abortController.abort();
+    };
+  }, [initialize, setColumnDimensions, tableColumnDimensions]);
+
+  return (
+    <TableStoreContextProvider store={epiDashBoardStore}>
+      <EpiDashboardStoreContext.Provider value={epiDashBoardStore}>
+        {children}
+      </EpiDashboardStoreContext.Provider>
+    </TableStoreContextProvider>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './EpiDashboardStoreLoader';
+export * from './withEpiDashboardStore';

package/src/components/epi/EpiDashboardStoreLoader/withEpiDashboardStore.tsx

@@ -0,0 +1,19 @@
+import type { ComponentType } from 'react';
+
+import type { EpiDashboardStoreLoaderProps } from './EpiDashboardStoreLoader';
+import { EpiDashboardStoreLoader } from './EpiDashboardStoreLoader';
+
+export type WithEpiDashboardStoreProps = EpiDashboardStoreLoaderProps;
+
+export const withEpiDashboardStore = <P extends WithEpiDashboardStoreProps>(WrappedComponent: ComponentType<P>): ComponentType<P> => {
+  return (props: WithEpiDashboardStoreProps) => (
+    <EpiDashboardStoreLoader
+      caseSet={props.caseSet}
+      caseTypeId={props.caseTypeId}
+    >
+      <WrappedComponent
+        {...props as P}
+      />
+    </EpiDashboardStoreLoader>
+  );
+};

package/src/components/epi/EpiDataCollectionAccessInfo/EpiDataCollectionAccessInfo.tsx

@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import { useCaseAbacContext } from '../../../context/caseAbac';
+
+export const EpiDataCollectionAccessInfo = () => {
+  const { t } = useTranslation();
+
+  const caseAbacContext = useCaseAbacContext();
+
+  const canRemoveItemFromDataCollection = useCallback((dataCollectionId: string) => {
+    return caseAbacContext?.rights?.[0]?.remove_data_collection_ids?.includes(dataCollectionId);
+  }, [caseAbacContext.rights]);
+
+  if (!caseAbacContext.itemDataCollections || caseAbacContext.itemDataCollections?.length === 0) {
+    return (
+      <Box sx={{ fontStyle: 'italic' }}>
+        {t`None`}
+      </Box>
+    );
+  }
+
+  return (
+    <Table size={'small'}>
+      <TableHead>
+        <TableRow>
+          <TableCell
+            sx={{
+              width: 'calc(100% * 1/3)',
+            }}
+          >
+            {t`Data collection`}
+          </TableCell>
+          <TableCell
+            sx={{
+              width: 'calc(100% * 1/6)',
+            }}
+          >
+            {t`Removable`}
+          </TableCell>
+          <TableCell
+            sx={{
+              width: 'calc(100% * 1/2)',
+            }}
+          >
+            {t`Is created in`}
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {caseAbacContext.createdInDataCollection && (
+          <TableRow>
+            <TableCell>
+              {caseAbacContext.createdInDataCollection.name}
+            </TableCell>
+            <TableCell>
+              {t`No`}
+            </TableCell>
+            <TableCell>
+              {t`Yes`}
+            </TableCell>
+          </TableRow>
+        )}
+        {caseAbacContext.itemSharedInDataCollections[0].map((dataCollection) => (
+          <TableRow key={dataCollection.id}>
+            <TableCell>
+              {dataCollection.name}
+            </TableCell>
+            <TableCell>
+              {canRemoveItemFromDataCollection(dataCollection.id) ? t`Yes` : t`No`}
+            </TableCell>
+            <TableCell>
+              {t`No`}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};

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

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

package/src/components/epi/EpiFindSimilarCasesDialog/EpiFindSimilarCasesDialog.tsx

@@ -0,0 +1,302 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ReactElement,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  object,
+  string,
+} from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import type { Resolver } from 'react-hook-form';
+import {
+  useForm,
+  useWatch,
+} from 'react-hook-form';
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  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 { useQueryMemo } from '../../../hooks/useQueryMemo';
+import { QUERY_KEY } from '../../../models/query';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import type {
+  FormFieldDefinition,
+  AutoCompleteOption,
+} from '../../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../../models/form';
+import { GenericForm } from '../../form/helpers/GenericForm';
+import type {
+  Case,
+  CompleteCaseType,
+  Col,
+} from '../../../api';
+import { CaseApi } from '../../../api';
+import { NumberUtil } from '../../../utils/NumberUtil';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+
+export interface EpiFindSimilarCasesDialogOpenProps {
+  allRows: Case[];
+  selectedRows: Case[];
+  completeCaseType: CompleteCaseType;
+}
+
+export interface EpiFindSimilarCasesDialogProps extends WithDialogRenderProps<EpiFindSimilarCasesDialogOpenProps> {
+  //
+}
+
+export type EpiFindSimilarCasesDialogRefMethods = WithDialogRefMethods<EpiFindSimilarCasesDialogProps, EpiFindSimilarCasesDialogOpenProps>;
+
+
+type FormFields = {
+  treeColId: string;
+  maxDistance: number;
+};
+
+export const EpiFindSimilarCasesDialog = withDialog<EpiFindSimilarCasesDialogProps, EpiFindSimilarCasesDialogOpenProps>((
+  {
+    openProps,
+    onActionsChange,
+    onTitleChange,
+    onClose,
+  }: EpiFindSimilarCasesDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+  const formId = useId();
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const treeConfiguration = epiDashboardStore.getState().epiTreeWidgetData.treeConfiguration;
+  const setFindSimilarCasesResults = useStore(epiDashboardStore, (state) => state.setFindSimilarCasesResults);
+  const findSimilarCasesResults = useStore(epiDashboardStore, (state) => state.findSimilarCasesResults);
+  const treeConfigurations = useMemo(() => EpiTreeUtil.getTreeConfigurations(openProps.completeCaseType), [openProps.completeCaseType]);
+  const [formData, setFormData] = useState<FormFields>(null);
+
+  const schema = useMemo(() => object<FormFields>().shape({
+    treeColId: string().required(),
+    maxDistance: NumberUtil.yup.required().min(0).when('treeColId', ([treeColId], s) => {
+      const currentTreeConfiguration = treeConfigurations.find(x => x.col.id === treeColId);
+      if (!currentTreeConfiguration) {
+        return s;
+      }
+      const sWithIntegerCheck = s.integer(t`Max distance must be an integer`);
+      return sWithIntegerCheck.max(currentTreeConfiguration.geneticDistanceProtocol.seqdb_max_stored_distance || ConfigManager.instance.config.epi.SEQDB_MAX_STORED_DISTANCE_FALLBACK);
+    }),
+  }), [t, treeConfigurations]);
+
+  const treeOptions = useMemo<AutoCompleteOption<string>[]>(() => {
+    const cols = new Set<Col>();
+    treeConfigurations.forEach(x => {
+      cols.add(x.col);
+    });
+    return Array.from(cols).map(x => {
+      return {
+        label: x.label,
+        value: x.id,
+      } satisfies AutoCompleteOption<string>;
+    });
+
+  }, [treeConfigurations]);
+
+  const formMethods = useForm<FormFields>({
+    resolver: yupResolver(schema, undefined,{ raw: true }) as Resolver<FormFields>,
+    values: {
+      treeColId: treeConfiguration ? treeConfiguration.col.id : null,
+      maxDistance: 0,
+    },
+  });
+  const { handleSubmit, control } = formMethods;
+
+  const formValues = useWatch({ control });
+
+  const formFieldDefinitions = useMemo(() => {
+    const currentTreeConfiguration = treeConfigurations.find(x => x.col.id === formValues.treeColId);
+
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'treeColId',
+        label: t`Tree`,
+        options: treeOptions,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.NUMBER,
+        name: 'maxDistance',
+        label: t`Max distance`,
+        min: 0,
+        max: currentTreeConfiguration?.geneticDistanceProtocol?.seqdb_max_stored_distance || ConfigManager.instance.config.epi.SEQDB_MAX_STORED_DISTANCE_FALLBACK,
+        step: 1,
+        showSlider: true,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ];
+  }, [formValues.treeColId, t, treeConfigurations, treeOptions]);
+
+  // Note: keeping track of dirty against submitted value, not the form dirty state.
+  const isDirty = useMemo(() => {
+    if (!formData) {
+      return false;
+    }
+    return formValues.treeColId !== formData.treeColId || formValues.maxDistance !== formData.maxDistance;
+  }, [formData, formValues]);
+
+  useEffect(() => {
+    onTitleChange(t`Find similar cases`);
+  }, [t, onTitleChange]);
+
+  const onFormSubmit = useCallback((data: FormFields) => {
+    setFormData(data);
+  }, []);
+
+  const query = useQueryMemo({
+    queryKey: [QueryUtil.getGenericKey(QUERY_KEY.SIMILAR_CASES), JSON.stringify({ formData, rowIds: openProps.selectedRows.map(row => row.id) })],
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.retrieveSimilarCases({
+        case_ids: openProps.selectedRows.map(x => x.id),
+        case_type_id: openProps.completeCaseType.id,
+        genetic_distance_col_id: formData?.treeColId,
+        max_distance: formData?.maxDistance,
+      }, { signal });
+      return response.data;
+    },
+    enabled: !!formData,
+  });
+
+  const similarCaseIdsNotInView = useMemo(() => {
+    if (!query.data) {
+      return [];
+    }
+    const allRowIds = openProps.allRows.map(x => x.id);
+    return query.data.filter(x => !allRowIds.includes(x));
+  }, [query.data, openProps.allRows]);
+
+  const similarCaseIdsAlreadyInView = useMemo(() => {
+    if (!query.data) {
+      return [];
+    }
+    const allRowIds = openProps.allRows.map(x => x.id);
+    return query.data.filter(x => allRowIds.includes(x));
+  }, [query.data, openProps.allRows]);
+
+  const onAddToLineListButtonClick = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    setFindSimilarCasesResults(produce(findSimilarCasesResults, draft => {
+      draft.push({
+        key: findSimilarCasesResults.length.toString(),
+        similarCaseIds: similarCaseIdsNotInView,
+        distance: formData?.maxDistance,
+        colId: formData?.treeColId,
+        originalCaseIds: openProps.allRows.map(x => x.id),
+      });
+      return draft;
+    }));
+
+    onClose();
+  }, [setFindSimilarCasesResults, findSimilarCasesResults, onClose, similarCaseIdsNotInView, formData?.maxDistance, formData?.treeColId, openProps.allRows]);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+    actions.push({
+      ...TestIdUtil.createAttributes('EpiFindSimilarCasesDialog-closeButton'),
+      color: 'primary',
+      variant: 'outlined',
+      label: t`Close`,
+      onClick: onClose,
+    });
+    actions.push({
+      ...TestIdUtil.createAttributes('EpiFindSimilarCasesDialog-findSimilarCasesButton'),
+      color: 'secondary',
+      variant: 'contained',
+      form: formId,
+      type: 'submit',
+      label: t`Search`,
+    });
+    if (similarCaseIdsNotInView.length > 0 && !isDirty) {
+      actions.push({
+        ...TestIdUtil.createAttributes('EpiFindSimilarCasesDialog-addSimilarCasesButton'),
+        color: 'secondary',
+        variant: 'contained',
+        label: t('Add {{count}} similar cases to line list', { count: similarCaseIdsNotInView.length }),
+        onClick: onAddToLineListButtonClick,
+      });
+    }
+    onActionsChange(actions);
+  }, [formId, isDirty, onActionsChange, onAddToLineListButtonClick, onClose, similarCaseIdsNotInView.length, t]);
+
+  return (
+    <Box>
+      <Box marginBottom={2}>
+        <Typography>
+          {t('Select a tree and maximum distance to find similar cases for the {{count}} selected cases.', { count: openProps.selectedRows.length })}
+        </Typography>
+      </Box>
+      <GenericForm<FormFields>
+        formFieldDefinitions={formFieldDefinitions}
+        formId={formId}
+        formMethods={formMethods}
+        schema={schema}
+        onSubmit={handleSubmit(onFormSubmit)}
+      />
+      <ResponseHandler
+        inlineSpinner
+        loadables={query}
+      >
+        {query.data && !isDirty && (
+          <>
+            <Box marginY={2}>
+              <Alert
+                severity={query.data.length > 0 ? 'success' : 'warning'}
+              >
+                <AlertTitle>
+                  {t('Found {{count}} similar cases with a distance of {{distance}}.', { count: query.data.length, distance: formData?.maxDistance })}
+                </AlertTitle>
+              </Alert>
+            </Box>
+            {similarCaseIdsNotInView.length !== query.data.length && (
+              <Box marginY={2}>
+                <Alert
+                  severity={'info'}
+                >
+                  <AlertTitle>
+                    {t('{{count}} similar cases can be added to the line list.', { count: similarCaseIdsNotInView.length })}
+                  </AlertTitle>
+                </Alert>
+              </Box>
+            )}
+            {similarCaseIdsAlreadyInView.length > 0 && (
+              <Alert
+                severity={'warning'}
+              >
+                <AlertTitle>
+                  {t('{{count}} similar cases found that are already in the line list.', { count: similarCaseIdsAlreadyInView.length })}
+                </AlertTitle>
+              </Alert>
+            )}
+          </>
+        )}
+      </ResponseHandler>
+    </Box>
+  );
+}, {
+  testId: 'EpiFindSimilarCasesDialog',
+  maxWidth: 'md',
+  fullWidth: true,
+  defaultTitle: '',
+});

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

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

package/src/components/epi/EpiLegendaItem/EpiLegendaItem.tsx

@@ -0,0 +1,106 @@
+import type { TooltipProps } from '@mui/material';
+import {
+  Box,
+  Tooltip,
+  useTheme,
+} from '@mui/material';
+import type {
+  MouseEvent,
+  ReactNode,
+} from 'react';
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+
+import type { CaseTypeRowValue } from '../../../models/epi';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+
+export type EpiLegendaItemProps = {
+  readonly color: string;
+  readonly rowValue: CaseTypeRowValue;
+  readonly onItemClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  readonly onMouseOver?: (color: string) => void;
+  readonly onMouseLeave?: (color: string) => void;
+  readonly tooltip?: boolean;
+  readonly tooltipProps?: Partial<TooltipProps>;
+  readonly disabled?: boolean;
+  readonly children?: ReactNode;
+};
+
+export const EpiLegendaItem = ({ rowValue, color, onItemClick, tooltip, tooltipProps, onMouseOver: onMouseOverCallback, onMouseLeave: onMouseLeaveCallback, disabled, children }: EpiLegendaItemProps) => {
+  const theme = useTheme();
+  const onClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
+    if (onItemClick) {
+      onItemClick(event);
+    }
+  }, [onItemClick]);
+
+  const onMouseOver = useCallback((event: MouseEvent<HTMLElement>) => {
+    if (onMouseOverCallback) {
+      onMouseOverCallback(event.currentTarget.getAttribute('data-color'));
+    }
+  }, [onMouseOverCallback]);
+
+  const onMouseLeave = useCallback((event: MouseEvent<HTMLElement>) => {
+    if (onMouseLeaveCallback) {
+      onMouseLeaveCallback(event.currentTarget.getAttribute('data-color'));
+    }
+  }, [onMouseLeaveCallback]);
+
+  const canClick = onClick && !disabled;
+
+  const innerContent = useMemo(() => {
+    const value = rowValue.isMissing ? ConfigManager.instance.config.epi.DATA_MISSING_CHARACTER : rowValue.short;
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          cursor: canClick ? 'pointer' : 'initial',
+          opacity: disabled ? 0.3 : 1,
+        }}
+      >
+        <Box
+          sx={{
+            width: theme.spacing(2),
+            height: theme.spacing(2),
+            minWidth: theme.spacing(2),
+            minHeight: theme.spacing(2),
+            background: color,
+            marginRight: theme.spacing(1),
+          }}
+        />
+        <Box
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {children || value}
+        </Box>
+      </Box>
+    );
+  }, [canClick, children, color, disabled, rowValue.isMissing, rowValue.short, theme]);
+
+  return (
+    <Box
+      data-color={color}
+      onClick={canClick ? onClick : undefined}
+      onMouseLeave={onMouseLeave}
+      onMouseOver={onMouseOver}
+    >
+      {tooltip && (
+        <Tooltip
+          {...tooltipProps}
+          title={rowValue.full}
+        >
+          {innerContent}
+        </Tooltip>
+      )}
+      {!tooltip && innerContent}
+
+    </Box>
+  );
+};

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

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