@gen-epix/ui 1.15.1 → 1.15.2

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

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

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

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

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

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

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

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

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

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

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

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

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