@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/epi/EpiLineList/EpiLineList.tsx

@@ -0,0 +1,492 @@
+import {
+  Box,
+  CircularProgress,
+  Link,
+  Tooltip,
+  useTheme,
+} from '@mui/material';
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import { useDebouncedCallback } from 'use-debounce';
+import type { ListRange } from 'react-virtuoso';
+import TroubleshootIcon from '@mui/icons-material/Troubleshoot';
+
+import CollectionIcon from '../../../assets/icons/CollectionIcon.svg?react';
+import { EpiWidget } from '../EpiWidget';
+import { EpiLegendaItem } from '../EpiLegendaItem';
+import type {
+  CaseSet,
+  Case,
+  Col,
+} from '../../../api';
+import { ColType } from '../../../api';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { EpiEventBusManager } from '../../../classes/managers/EpiEventBusManager';
+import { EpiLineListCaseSetMembersManager } from '../../../classes/managers/EpiLineListCaseSetMembersManager';
+import { EpiHighlightingManager } from '../../../classes/managers/EpiHighlightingManager';
+import { Subject } from '../../../classes/Subject';
+import type { EpiLinkedScrollSubjectValue } from '../../../models/epi';
+import {
+  EPI_ZONE,
+  STRATIFICATION_MODE,
+} from '../../../models/epi';
+import type {
+  TableColumn,
+  TableRowParams,
+  GetTableCellRowComparatorProps,
+  TableColumnCaseType,
+} from '../../../models/table';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
+import { CaseUtil } from '../../../utils/CaseUtil';
+import { StringUtil } from '../../../utils/StringUtil';
+import { TableUtil } from '../../../utils/TableUtil';
+import {
+  Table,
+  type TableRef,
+} from '../../ui/Table';
+
+import { EpiLineListTitle } from './EpiLineListTitle';
+import { EpiLineListPrimaryMenu } from './EpiLineListPrimaryMenu';
+import { EpiLineListSecondaryMenu } from './EpiLineListSecondaryMenu';
+import { useEpiLineListEmitDownloadOptions } from './useEpiLineListEmitDownloadOptions';
+
+export type EpiLineListProps = {
+  readonly linkedScrollSubject: Subject<EpiLinkedScrollSubjectValue>;
+  readonly onLink: () => void;
+  readonly caseSet?: CaseSet;
+};
+
+export const EpiLineList = ({ linkedScrollSubject, onLink, caseSet }: EpiLineListProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const highlightingManager = useMemo(() => EpiHighlightingManager.instance, []);
+  const rowHighlightingSubject = useMemo(() => new Subject<string[]>([]), []);
+  const tableRef = useRef<TableRef>(null);
+
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
+  const sortedData = useStore(epiDashboardStore, (state) => state.sortedData);
+  const stratification = useStore(epiDashboardStore, (state) => state.stratification?.mode === STRATIFICATION_MODE.FIELD ? state.stratification : null);
+  const updateEpiListWidgetData = useStore(epiDashboardStore, (state) => state.updateEpiListWidgetData);
+  const treeAddresses = useStore(epiDashboardStore, (state) => state.treeAddresses);
+  const setTableColumns = useStore(epiDashboardStore, (state) => state.setColumns);
+  const isDataLoading = useStore(epiDashboardStore, (state) => state.isDataLoading);
+
+  const onIndexCellClick = useCallback((row: Case) => {
+    EpiEventBusManager.instance.emit('openCaseInfoDialog', {
+      caseId: row.id,
+      caseTypeId: completeCaseType.id,
+    });
+  }, [completeCaseType.id]);
+
+  const getColumnWidth = useCallback((col: Col, label: string) => {
+    let maxTextLength = label?.length * 0.8;
+    sortedData.forEach(row => {
+      const value = CaseUtil.getRowValue(row.content, col, completeCaseType).short;
+      if (value?.length > maxTextLength) {
+        maxTextLength = value.length;
+      }
+    });
+
+    let maxWidth = +theme.spacing(5).replace('px', '') + maxTextLength * 7;
+    if (stratification?.col?.id === col.id) {
+      maxWidth = maxWidth + +theme.spacing(3).replace('px', '');
+    }
+
+    const { MAX_COLUMN_WIDTH, REQUIRED_EXTRA_CELL_PADDING_TO_FIT_CONTENT } = ConfigManager.instance.config.epiLineList;
+    return Math.min(MAX_COLUMN_WIDTH, maxWidth) + REQUIRED_EXTRA_CELL_PADDING_TO_FIT_CONTENT;
+  }, [completeCaseType, sortedData, stratification?.col?.id, theme]);
+
+  const onOrganizationCellClick = useCallback((organizationId: string, organizationName: string) => {
+    EpiEventBusManager.instance.emit('openContactDetailsDialog', {
+      organizationId,
+      organizationName,
+    });
+  }, []);
+
+  const renderOrganizationCell = useCallback(({ id, row }: TableRowParams<Case>) => {
+    const rowValue = CaseUtil.getRowValue(row.content, completeCaseType.cols[id], completeCaseType);
+    if (rowValue.isMissing) {
+      return rowValue.short;
+    }
+    const link = (
+      <Link
+        component={'button'}
+        sx={{
+          cursor: 'pointer',
+        }}
+        color={'primary'}
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={() => {
+          onOrganizationCellClick(row.content[id], rowValue.long);
+        }}
+      >
+        {rowValue.short}
+      </Link>
+    );
+    if (id === stratification?.col?.id) {
+      return (
+        <EpiLegendaItem
+          color={stratification?.caseIdColors[row.id]}
+          rowValue={rowValue}
+        >
+          {link}
+        </EpiLegendaItem>
+      );
+    }
+    return link;
+  }, [completeCaseType, onOrganizationCellClick, stratification?.caseIdColors, stratification?.col?.id]);
+
+  const onGeneticSequenceCellClick = useCallback((id: string, row: Case) => {
+    EpiEventBusManager.instance.emit('openSequenceDownloadDialog', {
+      geneticSequenceColId: id,
+      cases: [row],
+    });
+  }, []);
+
+  const renderGeneticSequenceCell = useCallback(({ id, row }: TableRowParams<Case>) => {
+    return (
+      <Link
+        component={'button'}
+        sx={{
+          cursor: 'pointer',
+        }}
+        color={'primary'}
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={() => {
+          onGeneticSequenceCellClick(id, row);
+        }}
+      >
+        {row.content[id]}
+      </Link>
+    );
+  }, [onGeneticSequenceCellClick]);
+
+  const renderEventsHeader = useCallback(() => {
+    return (
+      <Tooltip
+        arrow
+        title={t('Indicates if case is in an event')}
+        aria-hidden={false}
+      >
+        <CollectionIcon
+          style={{
+            color: theme.palette.primary.main,
+            position: 'absolute',
+            width: 20,
+            height: 20,
+            marginLeft: theme.spacing(-0.5),
+          }}
+          fontSize={'small'}
+        />
+      </Tooltip>
+    );
+  }, [t, theme]);
+
+  const renderEventsCell = useCallback(({ row }: TableRowParams<Case>) => {
+    let queryResult;
+    const rowId = `row_${row.id}`;
+
+    EpiLineListCaseSetMembersManager.instance.query(row.id).then(result => {
+      queryResult = result;
+      const element = document.getElementById(rowId);
+      if (element) {
+        element.innerHTML = queryResult ? '✓' : '';
+      }
+    }).catch(() => {
+      const element = document.getElementById(rowId);
+      if (element) {
+        element.innerHTML = '?';
+      }
+    });
+    return (
+      <Box id={rowId}>
+        <CircularProgress
+          size={16}
+          sx={{
+            position: 'absolute',
+            marginTop: '4px',
+          }}
+        />
+      </Box>
+    );
+  }, []);
+
+  const renderSimilarCell = useCallback(({ row }: TableRowParams<Case>) => {
+    const similarCaseIds = epiDashboardStore.getState().findSimilarCasesResults.reduce<string[]>((acc, result) => [...acc, ...result.similarCaseIds], []);
+    if (similarCaseIds.includes(row.id)) {
+      return (
+        <Box>
+          {`✓`}
+        </Box>
+      );
+    }
+    return null;
+  }, [epiDashboardStore]);
+
+
+  const renderSimilarHeader = useCallback(() => {
+    return (
+      <Tooltip
+        arrow
+        title={t('Indicates if the case has been identified as similar to another case based on the selected tree algorithm and distance threshold')}
+        aria-hidden={false}
+      >
+        <TroubleshootIcon
+          style={{
+            color: theme.palette.primary.main,
+            position: 'absolute',
+            width: 20,
+            height: 20,
+            marginLeft: theme.spacing(-0.5),
+          }}
+          fontSize={'small'}
+        />
+      </Tooltip>
+    );
+  }, [t, theme]);
+
+
+  const renderCell = useCallback(({ id, row }: TableRowParams<Case>) => {
+    const rowValue = CaseUtil.getRowValue(row.content, completeCaseType.cols[id], completeCaseType);
+
+    if (id === stratification?.col?.id) {
+      return (
+        <EpiLegendaItem
+          color={stratification?.caseIdColors[row.id]}
+          rowValue={rowValue}
+        />
+      );
+    }
+
+    return (
+      <>
+        {rowValue.short}
+      </>
+    );
+  }, [completeCaseType, stratification?.caseIdColors, stratification?.col?.id]);
+
+  const staticTableColumns = useMemo<TableColumn<Case>[]>(() => {
+    return [
+      TableUtil.createReadableIndexColumn({
+        getAriaLabel: (params: TableRowParams<Case>) => t('Show case information for {{index}}', { index: params.rowIndex + 1 }),
+      }),
+      TableUtil.createSelectableColumn(),
+      {
+        type: 'text',
+        renderCell: renderEventsCell,
+        isInitiallyVisible: true,
+        isStatic: true,
+        frozen: true,
+        resizable: false,
+        id: 'events',
+        renderHeader: renderEventsHeader,
+        widthPx: 24,
+      },
+      {
+        type: 'text',
+        renderCell: renderSimilarCell,
+        headerTooltipContent: t`Is similar case?`,
+        isInitiallyVisible: true,
+        isStatic: true,
+        frozen: true,
+        resizable: false,
+        id: 'similar',
+        renderHeader: renderSimilarHeader,
+        widthPx: 24,
+      },
+    ];
+  }, [renderEventsCell, renderSimilarCell, renderEventsHeader, renderSimilarHeader, t]);
+
+  const tableColumns = useMemo<TableColumn<Case>[]>(() => {
+    const { DATA_MISSING_CHARACTER } = ConfigManager.instance.config.epi;
+
+    const initialVisibleColumnIds = CaseTypeUtil.getInitialVisibleColIds(completeCaseType);
+    const caseTypeTableColumns: TableColumn<Case>[] = [];
+
+
+    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];
+        const baseCaseTypeTableColumn: Partial<TableColumn<Case>> = {
+          isInitiallyVisible: initialVisibleColumnIds.includes(col.id),
+          id: col.id,
+          headerTooltipContent: refCol.description,
+          headerName: col.label,
+        };
+        if (refCol.col_type === ColType.GENETIC_DISTANCE) {
+          caseTypeTableColumns.push({
+            ...baseCaseTypeTableColumn,
+            type: 'caseType',
+            widthPx: 200,
+            valueGetter: (params) => {
+              const value = treeAddresses[col.id]?.addresses[params.row.id] ? `${treeAddresses[col.id].algorithmCode} ${treeAddresses[col.id].addresses[params.row.id]}` : undefined;
+              return {
+                raw: value,
+                short: value ?? DATA_MISSING_CHARACTER,
+                full: value ?? DATA_MISSING_CHARACTER,
+                long: value ?? DATA_MISSING_CHARACTER,
+                isMissing: !value,
+              };
+            },
+            comparatorFactory: ({ direction }: GetTableCellRowComparatorProps<TableColumnCaseType<Case>>) => (a: Case, b: Case) => {
+              const sortValue = StringUtil.advancedSortComperator(treeAddresses[col.id]?.addresses?.[a.id], treeAddresses[col.id]?.addresses?.[b.id]);
+              return direction === 'asc' ? sortValue : -sortValue;
+            },
+          } as TableColumn<Case>);
+        } else {
+          let cellRenderer: (params: TableRowParams<Case>) => string | ReactElement;
+          if (refCol.col_type === ColType.ORGANIZATION) {
+            cellRenderer = renderOrganizationCell;
+          } else if (refCol.col_type === ColType.GENETIC_SEQUENCE) {
+            cellRenderer = renderGeneticSequenceCell;
+          } else {
+            cellRenderer = renderCell;
+          }
+
+          caseTypeTableColumns.push({
+            ...baseCaseTypeTableColumn,
+            widthPx: getColumnWidth(col, col.label),
+            type: 'caseType',
+            renderCell: cellRenderer,
+            col,
+            completeCaseType,
+            comparatorFactory: TableUtil.createCaseTypeCellRowComperator,
+            textAlign: ([ColType.DECIMAL_0, ColType.DECIMAL_1, ColType.DECIMAL_2, ColType.DECIMAL_3, ColType.DECIMAL_4, ColType.DECIMAL_4, ColType.DECIMAL_5, ColType.DECIMAL_6] as ColType[]).includes(refCol.col_type) ? 'right' : 'left',
+          } as TableColumn<Case>);
+        }
+      });
+    });
+
+    return [
+      ...staticTableColumns,
+      ...caseTypeTableColumns,
+    ];
+  }, [completeCaseType, staticTableColumns, treeAddresses, getColumnWidth, renderOrganizationCell, renderGeneticSequenceCell, renderCell]);
+
+  const onRowMouseEnter = useCallback((row: Case) => {
+    highlightingManager.highlight({
+      caseIds: [row.id],
+      origin: EPI_ZONE.LINE_LIST,
+    });
+  }, [highlightingManager]);
+
+  const onRowMouseLeave = useCallback(() => {
+    highlightingManager.highlight({
+      caseIds: [],
+      origin: EPI_ZONE.LINE_LIST,
+    });
+  }, [highlightingManager]);
+
+  useEffect(() => {
+    setTableColumns(tableColumns);
+  }, [setTableColumns, tableColumns]);
+
+  useEffect(() => {
+    const unsubscribe = highlightingManager.subscribe((highlighting) => {
+      if (highlighting?.origin === EPI_ZONE.LINE_LIST) {
+        return;
+      }
+      rowHighlightingSubject.next(highlighting.caseIds);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [highlightingManager, rowHighlightingSubject]);
+
+  useEpiLineListEmitDownloadOptions();
+
+  const updateVisibleIndexDebounced = useDebouncedCallback((index: number) => {
+    updateEpiListWidgetData({
+      visibleItemItemIndex: index,
+    });
+  }, 500);
+
+  const onTableVisibleItemIndexChange = useCallback((index: number) => {
+    updateVisibleIndexDebounced(index);
+  }, [updateVisibleIndexDebounced]);
+
+  const onRangeChangedDebounced = useDebouncedCallback(async (range: ListRange) => {
+    await EpiLineListCaseSetMembersManager.instance.loadRange(sortedData.slice(range.startIndex, Math.min(range.endIndex + 1, sortedData.length)).map(row => row.id));
+  }, ConfigManager.instance.config.epiLineList.CASE_SET_MEMBERS_FETCH_DEBOUNCE_DELAY_MS, {
+    trailing: true,
+    leading: false,
+  });
+
+  useEffect(() => {
+    return () => {
+      EpiLineListCaseSetMembersManager.instance.cleanStaleQueue();
+    };
+  }, []);
+
+  const onVerticalScrollPositionChange = useCallback((position: number) => {
+    if (isNaN(position)) {
+      return;
+    }
+    linkedScrollSubject.next({
+      position,
+      origin: containerRef.current,
+    });
+  }, [linkedScrollSubject]);
+
+  useEffect(() => {
+    const unsubscribe = linkedScrollSubject.subscribe((data) => {
+      if (data.origin === containerRef.current) {
+        return;
+      }
+      tableRef.current.setVerticalScrollPosition(data.position);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [linkedScrollSubject]);
+
+  const getRowName = useCallback((row: Case): string => {
+    return row.id;
+  }, []);
+
+  return (
+    <EpiWidget
+      isLoading={isDataLoading}
+      primaryMenu={<EpiLineListPrimaryMenu caseSet={caseSet} />}
+      secondaryMenu={<EpiLineListSecondaryMenu onLink={onLink} />}
+      title={<EpiLineListTitle />}
+      zone={EPI_ZONE.LINE_LIST}
+    >
+      <Box
+        ref={containerRef}
+        sx={{
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <Table
+          ref={tableRef}
+          forceHorizontalOverflow
+          font={theme['gen-epix'].lineList.font}
+          getRowName={getRowName}
+          initialVisibleItemIndex={epiDashboardStore.getState().epiListWidgetData.visibleItemItemIndex}
+          rowHeight={3}
+          rowHighlightingSubject={rowHighlightingSubject}
+          onRangeChanged={onRangeChangedDebounced}
+          onReadableIndexClick={onIndexCellClick}
+          onRowMouseEnter={onRowMouseEnter}
+          onRowMouseLeave={onRowMouseLeave}
+          onVerticalScrollPositionChange={onVerticalScrollPositionChange}
+          onVisibleItemIndexChange={onTableVisibleItemIndexChange}
+        />
+      </Box>
+    </EpiWidget>
+  );
+};

package/src/components/epi/EpiLineList/EpiLineListPrimaryMenu.tsx

@@ -0,0 +1,189 @@
+import {
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+
+import type {
+  Case,
+  CaseSet,
+} from '../../../api';
+import {
+  CommandName,
+  PermissionType,
+} from '../../../api';
+import { AuthorizationManager } from '../../../classes/managers/AuthorizationManager';
+import { EpiEventBusManager } from '../../../classes/managers/EpiEventBusManager';
+import type { MenuItemData } from '../../../models/nestedMenu';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { UseColumnsMenu } from '../../../hooks/useColumnsMenu';
+import type { TableColumn } from '../../../models/table';
+import { CaseUtil } from '../../../utils/CaseUtil';
+import { EpiWidgetMenu } from '../EpiWidgetMenu';
+import { SelectionFilter } from '../../../classes/filters/SelectionFilter';
+
+export type EpiLineListPrimaryMenuProps = {
+  readonly caseSet?: CaseSet;
+};
+
+
+export const EpiLineListPrimaryMenu = ({
+  caseSet,
+}: EpiLineListPrimaryMenuProps) => {
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const { t } = useTranslation();
+  const selectedIds = useStore(epiDashboardStore, useShallow((state) => state.selectedIds));
+  const sortedData = useStore(epiDashboardStore, useShallow((state) => state.sortedData));
+  const completeCaseType = useStore(epiDashboardStore, useShallow((state) => state.completeCaseType));
+  const setFilterValue = useStore(epiDashboardStore, useShallow((state) => state.setFilterValue));
+  const filters = useStore(epiDashboardStore, useShallow((state) => state.filters));
+  const setSelectedIds = useStore(epiDashboardStore, useShallow((state) => state.setSelectedIds));
+  const findSimilarCasesResults = useStore(epiDashboardStore, useShallow((state) => state.findSimilarCasesResults));
+
+  const hasCellData = useCallback((row: Case, tableColumn: TableColumn<Case>, rowIndex: number) => {
+    if (tableColumn.type === 'caseType' && tableColumn.valueGetter) {
+      return !tableColumn.valueGetter({
+        row,
+        id: tableColumn.id,
+        rowIndex,
+      }).isMissing;
+    }
+    return !CaseUtil.getRowValue(row.content, completeCaseType.cols[tableColumn.id], completeCaseType).isMissing;
+  }, [completeCaseType]);
+
+  const createFilterFromSelectedRowCaseIds = useCallback(async () => {
+    await setFilterValue('selected', selectedIds);
+    setSelectedIds([]);
+  }, [setFilterValue, selectedIds, setSelectedIds]);
+
+  const hasSelectionFilter = filters.some((filter) => filter instanceof SelectionFilter && filter.filterValue.length > 0);
+  const columnsMenuItem = UseColumnsMenu({ hasCellData });
+
+  const similarCaseIds = useMemo(() => findSimilarCasesResults?.flatMap((result) => result.similarCaseIds) || [], [findSimilarCasesResults]);
+
+  const rowsWithoutSimilarCases = useMemo(() => {
+    if (!findSimilarCasesResults?.length) {
+      return sortedData;
+    }
+    return sortedData.filter((row) => !similarCaseIds.includes(row.id));
+  }, [findSimilarCasesResults, sortedData, similarCaseIds]);
+
+  const selectedRowsWithoutSimilarCases = useMemo(() => {
+    return rowsWithoutSimilarCases.filter((row) => selectedIds?.includes(row.id));
+  }, [rowsWithoutSimilarCases, selectedIds]);
+
+  const selectedRows = useMemo(() => {
+    return sortedData.filter((row) => selectedIds?.includes(row.id));
+  }, [sortedData, selectedIds]);
+
+  const menu = useMemo<MenuItemData[]>(() => {
+    const shouldShowCreateEventMenuItem = AuthorizationManager.instance.doesUserHavePermission([{ command_name: CommandName.CreateCaseSetCommand, permission_type: PermissionType.EXECUTE }]);
+    const shouldShowAddToEventMenuItem = AuthorizationManager.instance.doesUserHavePermission([{ command_name: CommandName.CaseSetMemberCrudCommand, permission_type: PermissionType.CREATE }]);
+    const shouldShowRemoveFromEventMenuItem = !!caseSet && AuthorizationManager.instance.doesUserHavePermission([{ command_name: CommandName.CaseSetMemberCrudCommand, permission_type: PermissionType.DELETE }]);
+    // FIXME
+    // const shouldShowBulkEditCaseMenuItem = true;
+
+    const actionsColumnMenuItem: MenuItemData = {
+      label: t`Actions`,
+      items: [
+        {
+          label: t`Create filter from selected cases`,
+          disabled: !selectedIds?.length || similarCaseIds.length > 0,
+          callback: createFilterFromSelectedRowCaseIds,
+          divider: true,
+        },
+        {
+          label: t`Find similar cases`,
+          disabled: hasSelectionFilter,
+          callback: () => EpiEventBusManager.instance.emit('openFindSimilarCasesDialog', {
+            selectedRows: sortedData,
+            allRows: sortedData,
+            completeCaseType,
+          }),
+        },
+        {
+          label: t`Find similar cases (based on selected cases)`,
+          disabled: !selectedIds?.length || hasSelectionFilter,
+          callback: () => EpiEventBusManager.instance.emit('openFindSimilarCasesDialog', {
+            selectedRows,
+            allRows: sortedData,
+            completeCaseType,
+          }),
+        },
+        {
+          label: t`Remove similar cases from results`,
+          disabled: !findSimilarCasesResults?.length,
+          callback: () => EpiEventBusManager.instance.emit('openRemoveFindSimilarCasesResultDialog', {
+            completeCaseType,
+          }),
+        },
+      ],
+    };
+
+    if (shouldShowCreateEventMenuItem) {
+      actionsColumnMenuItem.items.push(
+        {
+          label: t`Create new event with selected cases`,
+          disabled: !selectedIds?.length,
+          callback: () => EpiEventBusManager.instance.emit('openCreateEventDialog', {
+            rows: selectedRows,
+            completeCaseType,
+          }),
+        },
+      );
+    }
+
+    if (shouldShowAddToEventMenuItem) {
+      actionsColumnMenuItem.items.push(
+        {
+          disabled: !selectedIds?.length,
+          label: t`Add selected cases to an existing event`,
+          callback: () => EpiEventBusManager.instance.emit('openAddCasesToEventDialog', {
+            rows: selectedRows,
+            currentCaseSet: caseSet,
+          }),
+        },
+      );
+    }
+
+    if (shouldShowRemoveFromEventMenuItem) {
+      actionsColumnMenuItem.items.push(
+        {
+          disabled: !selectedRowsWithoutSimilarCases.length,
+          label: t`Remove selected cases from this event`,
+          callback: () => EpiEventBusManager.instance.emit('openRemoveCasesFromEventDialog', {
+            rows: selectedRowsWithoutSimilarCases,
+            caseSet,
+          }),
+        },
+      );
+    }
+    if (actionsColumnMenuItem.items.length > 3) {
+      actionsColumnMenuItem.items[3].divider = true;
+    }
+
+    // last(actionsColumnMenuItem.items).divider = true;
+    // if (shouldShowBulkEditCaseMenuItem) {
+    //   actionsColumnMenuItem.items.push(
+    //     {
+    //       disabled: !selectedRowCaseIds?.length,
+    //       label: t`Bulk edit selected cases`,
+    //       callback: () => EpiEventBusManager.instance.emit('openBulkEditCaseDialog', { rows: selectedRows }),
+    //     },
+    //   );
+    // }
+
+    const menus: MenuItemData[] = [
+      columnsMenuItem,
+      actionsColumnMenuItem,
+    ];
+
+    return menus;
+  }, [caseSet, t, selectedIds?.length, hasSelectionFilter, similarCaseIds.length, createFilterFromSelectedRowCaseIds, findSimilarCasesResults?.length, columnsMenuItem, sortedData, completeCaseType, selectedRows, selectedRowsWithoutSimilarCases]);
+
+
+  return <EpiWidgetMenu menu={menu} />;
+};