@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/ui/Table/TableHeaderCell.tsx

@@ -0,0 +1,434 @@
+import {
+  Tooltip,
+  Box,
+  styled,
+  Paper,
+  useTheme,
+  IconButton,
+  Popover,
+} from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import type {
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+} from 'react';
+import {
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import clsx from 'clsx';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import sum from 'lodash/sum';
+
+import type {
+  TableColumn,
+  TableDragEvent,
+} from '../../../models/table';
+import { useTableStoreContext } from '../../../stores/tableStore';
+
+import { TableHeaderFilter } from './TableHeaderFilter';
+import type {
+  TableCellProps,
+  TableCellRef,
+} from './TableCell';
+import { TableCell } from './TableCell';
+import { tableHeaderCellClassNames } from './classNames';
+
+export interface TableHeaderCellProps<TRowData> extends TableCellProps<TRowData> {
+  readonly onColumnDividerMouseDown: (event: ReactMouseEvent<HTMLDivElement>, column: TableColumn<TRowData>) => void;
+  readonly onColumnDividerKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>, column: TableColumn<TRowData>) => void;
+  readonly dividerColor: string;
+}
+
+type TableSortLabelIconProps = {
+  ownerState: {
+    readonly direction: 'asc' | 'desc';
+  };
+};
+
+const iconSize = 18;
+
+const tableHeaderCellClassNamesFocus = `${tableHeaderCellClassNames.root}--focus`;
+
+const TableSortLabelIconButton = styled(IconButton, {
+  name: 'GENEPIX-TableSortLabelIcon',
+})<TableSortLabelIconProps>(({ theme, ownerState }) => {
+  return {
+    padding: 0,
+    fontSize: iconSize,
+    width: `${iconSize}px`,
+    height: `${iconSize}px`,
+    display: 'none',
+    opacity: 0,
+    userSelect: 'none',
+    color: theme.palette.text.primary,
+    '&:hover': {
+      opacity: '1 !important',
+      color: theme.palette.primary.main,
+    },
+    '& svg': {
+      ...(ownerState.direction === 'desc' && {
+        transform: 'rotate(0deg)',
+      }),
+      ...(ownerState.direction === 'asc' && {
+        transform: 'rotate(180deg)',
+      }),
+    },
+  };
+});
+
+const TableFilterLabelIconButton = styled(IconButton, {
+  name: 'GENEPIX-TableFilterLabelIcon',
+})(({ theme }) => {
+  return {
+    fontSize: iconSize,
+    width: `${iconSize}px`,
+    height: `${iconSize}px`,
+    padding: 0,
+    display: 'none',
+    opacity: 0,
+    userSelect: 'none',
+    '&:hover': {
+      opacity: '1 !important',
+      color: theme.palette.primary.main,
+    },
+  };
+});
+
+export const TableHeaderCell = <TRowData,>(props: TableHeaderCellProps<TRowData>) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const tableStore = useTableStoreContext<TRowData>();
+  const sortByField = useStore(tableStore, (state) => state.sortByField);
+  const sortDirection = useStore(tableStore, (state) => state.sortDirection);
+  const setSorting = useStore(tableStore, (state) => state.setSorting);
+  const filters = useStore(tableStore, (state) => state.filters);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const popperId = useId();
+  const [filterAnchorElement, setFilterAnchorElement] = useState<HTMLDivElement>();
+  const tableCellRef = useRef<TableCellRef>(null);
+  const filterLabelIconButtonRef = useRef<HTMLButtonElement>(null);
+
+  const {
+    column,
+    columnIndex,
+    dividerColor,
+    height,
+    onColumnDividerMouseDown: onColumnDividerMouseDownProp,
+    onColumnDividerKeyDown: onColumnDividerKeyDownProp,
+    onCustomDrag,
+    order,
+    width,
+    xOffset,
+  } = props;
+
+  const ignoreNextClick = useRef(false);
+
+  const canDrag = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
+    if (column.frozen || column.isStatic) {
+      return false;
+    }
+    if (event.button !== 0) {
+      return false;
+    }
+    return (event.nativeEvent.target as HTMLDivElement).classList.contains(tableHeaderCellClassNames.content);
+  }, [column.frozen, column.isStatic]);
+
+  const onCustomDragTableHeaderCell = useCallback((event: TableDragEvent, tableColumn: TableColumn<TRowData>) => {
+    if (onCustomDrag) {
+      if (event.type === 'start') {
+        ignoreNextClick.current = true;
+      }
+      onCustomDrag(event, tableColumn);
+    }
+  }, [onCustomDrag]);
+
+  const updateSorting = useCallback(async () => {
+    if (sortByField === column.id) {
+
+      await setSorting(column.id, sortDirection === 'asc' ? 'desc' : 'asc');
+      return;
+    }
+
+    await setSorting(column.id, 'asc');
+  }, [column.id, setSorting, sortByField, sortDirection]);
+
+  const onContentClick = useCallback(async (event: ReactMouseEvent<HTMLDivElement>) => {
+    if (ignoreNextClick.current) {
+      event.preventDefault();
+      event.stopPropagation();
+      ignoreNextClick.current = false;
+      return;
+    }
+
+    if (column.comparatorFactory) {
+      await updateSorting();
+    }
+  }, [column.comparatorFactory, updateSorting]);
+
+  const onTableSortClick = useCallback(async (_event: ReactMouseEvent<HTMLButtonElement>) => {
+    await updateSorting();
+  }, [updateSorting]);
+
+  const onFilterIconClick = useCallback(() => {
+    setFilterAnchorElement(el => el ? null : tableCellRef.current);
+  }, []);
+
+  const onFilterChange = useCallback(() => {
+    setFilterAnchorElement(null);
+  }, []);
+
+  const onColumnDividerMouseDown = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onColumnDividerMouseDownProp(event, column);
+  }, [column, onColumnDividerMouseDownProp]);
+
+  const onColumnDividerKeyDown = useCallback((event: ReactKeyboardEvent<HTMLDivElement>) => {
+    onColumnDividerKeyDownProp(event, column);
+  }, [column, onColumnDividerKeyDownProp]);
+
+  const filter = useMemo(() => {
+    return filters.find((f) => f.id === column.id);
+  }, [column.id, filters]);
+
+  const hasActiveFilter = useMemo(() => {
+    return !!filter && !filter.isInitialFilterValue();
+  }, [filter]);
+
+  const onFilterPopOverClose = useCallback(() => {
+    setFilterAnchorElement(null);
+    // Focus back to the header cell and filter icon button after closing the popover. This must be done in a setTimeout to ensure the popover has closed before focusing.
+    setTimeout(() => {
+      tableCellRef.current.classList.add(tableHeaderCellClassNamesFocus);
+      tableCellRef.current?.focus();
+      filterLabelIconButtonRef.current?.focus();
+    });
+  }, []);
+
+  const hasActiveSorting = sortByField === column.id;
+
+  const tableSortLabelIconProps: TableSortLabelIconProps['ownerState'] = {
+    direction: sortByField === column.id ? sortDirection : 'asc',
+  };
+
+  const tableSortLabelClassNames = clsx(tableHeaderCellClassNames.sortLabelIcon, {
+    [`${tableHeaderCellClassNames.sortLabelIcon}--active`]: hasActiveSorting,
+  });
+
+  const tableFilterLabelClassNames = clsx(tableHeaderCellClassNames.filterLabelIcon, {
+    [`${tableHeaderCellClassNames.filterLabelIcon}--active`]: hasActiveFilter,
+  });
+
+  const shouldShowSortIcon = !!column.comparatorFactory;
+  const shouldShowFilterIcon = !!filter;
+  const tabIndex = shouldShowSortIcon || shouldShowFilterIcon ? 0 : -1;
+
+  const iconSpacing = +theme.spacing(2).replace('px', '');
+
+  const ariaSortLabel = useMemo((): TableCellProps<TRowData>['ariaSort'] => {
+    if (sortByField !== column.id) {
+      return undefined;
+    }
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+  }, [column.id, sortByField, sortDirection]);
+
+  return (
+    <TableCell
+      key={column.id}
+      ref={tableCellRef}
+      ariaSort={ariaSortLabel}
+      className={clsx(tableHeaderCellClassNames.root, {
+        [tableHeaderCellClassNamesFocus]: !!filterAnchorElement,
+      })}
+      column={column}
+      columnIndex={columnIndex}
+      canDrag={canDrag}
+      height={height}
+      order={order}
+      role={'columnheader'}
+      tabIndex={tabIndex}
+      sx={{
+        textAlign: 'left',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        backgroundColor: theme.palette.background.paper,
+        [`&:hover, &:focus-visible, &:focus, &:focus-within, &.${tableHeaderCellClassNamesFocus}`]: {
+          [`.${tableHeaderCellClassNames.sortLabelIcon}, .${tableHeaderCellClassNames.filterLabelIcon}`]: {
+            display: 'inline-block',
+            opacity: 0.5,
+          },
+          [`.${tableHeaderCellClassNames.columnDivider}`]: {
+            opacity: 1,
+          },
+        },
+        [`.${tableHeaderCellClassNames.sortLabelIcon}--active, .${tableHeaderCellClassNames.filterLabelIcon}--active`]: {
+          display: 'inline-block',
+          opacity: '1 !important',
+        },
+        [`.${tableHeaderCellClassNames.sortLabelIcon}--active`]: {
+          color: theme.palette.text.secondary,
+        },
+        [`.${tableHeaderCellClassNames.filterLabelIcon}--active`]: {
+          color: theme.palette.secondary.main,
+        },
+      }}
+      width={width}
+      xOffset={xOffset}
+      onCustomDrag={onCustomDragTableHeaderCell}
+    >
+      {column.type === 'actions' && (
+        <Box
+          className={tableHeaderCellClassNames.content}
+          sx={visuallyHidden}
+        >
+          {t`Actions`}
+        </Box>
+      )}
+      {column.type !== 'actions' && (
+        <Box
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            [`&:hover .${tableHeaderCellClassNames.content}`]: {
+              maxWidth: `calc(100% + 16px - ${sum([shouldShowFilterIcon ? iconSpacing : 0, shouldShowSortIcon ? iconSpacing : 0, iconSpacing])}px)`,
+            },
+            width: '100%',
+          }}
+        >
+          {column.renderHeader ? (
+            <>
+              {column.renderHeader({
+                columnIndex,
+                column,
+              })}
+            </>
+          ) : (
+            <Tooltip
+              arrow
+              placement={'top'}
+              title={column.headerTooltipContent}
+            >
+
+              <Box
+                ref={contentRef}
+                className={tableHeaderCellClassNames.content}
+                sx={{
+                  cursor: 'pointer',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  maxWidth: `calc(100% + 16px - ${sum([hasActiveSorting ? iconSpacing : 0, hasActiveFilter ? iconSpacing : 0, iconSpacing])}px)`,
+                  flexGrow: 1,
+                }}
+                onClick={onContentClick}
+              >
+                {column.renderHeaderContent
+                  ? column.renderHeaderContent({
+                    columnIndex,
+                    column,
+                  })
+                  : column.headerName ?? ''}
+              </Box>
+            </Tooltip>
+          )}
+          {shouldShowFilterIcon && (
+            <>
+              <TableFilterLabelIconButton
+                ref={filterLabelIconButtonRef}
+                className={tableFilterLabelClassNames}
+                tabIndex={0}
+                title={t('Show filter for {{name}}', { name: column.headerName || t('unknown') })}
+                onClick={onFilterIconClick}
+              >
+                <FilterAltIcon fontSize={'inherit'} />
+              </TableFilterLabelIconButton>
+              <Popover
+                anchorEl={filterAnchorElement}
+                id={popperId}
+                open={!!filterAnchorElement}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
+                }}
+                sx={{
+                  zIndex: theme.zIndex.appBar + 1,
+                }}
+                onClose={onFilterPopOverClose}
+              >
+                <Paper
+                  square
+                  elevation={4}
+                  sx={{
+                    padding: theme.spacing(3),
+                  }}
+                >
+                  <TableHeaderFilter
+                    filter={filter}
+                    onFilterChange={onFilterChange}
+                  />
+                </Paper>
+              </Popover>
+            </>
+          )}
+          {shouldShowSortIcon && (
+            <>
+              <TableSortLabelIconButton
+                tabIndex={0}
+                title={t('Toggle sorting for {{name}}', { name: column.headerName || t('unknown') })}
+                className={tableSortLabelClassNames}
+                ownerState={tableSortLabelIconProps}
+                onClick={onTableSortClick}
+              >
+                <ArrowDownwardIcon fontSize={'inherit'} />
+              </TableSortLabelIconButton>
+            </>
+          )}
+          {column.resizable !== false && (
+            <Box
+              className={tableHeaderCellClassNames.columnDivider}
+              aria-label={t('Resize column {{name}}, use arrow keys to adjust the size.', { name: column.headerName || t('unknown') })}
+              role={'separator'}
+              tabIndex={0}
+              sx={{
+                width: '7px',
+                height: '18px',
+                position: 'absolute',
+                right: 0,
+                cursor: 'col-resize',
+                borderRight: `1px solid ${dividerColor}`,
+                boxSizing: 'border-box',
+                opacity: 0,
+
+                '&:focus-visible, &:focus, &:focus-within': {
+                  opacity: 1,
+                  borderColor: theme.palette.primary.main,
+                },
+                '&:hover': {
+                  opacity: 1,
+                  borderColor: theme.palette.primary.main,
+                },
+              }}
+              onMouseDown={onColumnDividerMouseDown}
+              onKeyDown={onColumnDividerKeyDown}
+            />
+          )}
+        </Box>
+      )}
+    </TableCell>
+  );
+};

package/src/components/ui/Table/TableHeaderFilter.tsx

@@ -0,0 +1,104 @@
+import {
+  FormProvider,
+  useForm,
+} from 'react-hook-form';
+import {
+  Box,
+  Button,
+} from '@mui/material';
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useStore } from 'zustand';
+import { useTranslation } from 'react-i18next';
+
+import type {
+  Filters,
+  FilterValues,
+} from '../../../models/filter';
+import type { UnwrapArray } from '../../../models/generic';
+import { useTableStoreContext } from '../../../stores/tableStore';
+
+import { TableFilter } from './TableFilter';
+
+export type TableHeaderFilterProps = {
+  readonly filter: UnwrapArray<Filters>;
+  readonly onFilterChange: () => void;
+};
+
+export const TableHeaderFilter = <TRowData,>({ filter, onFilterChange }: TableHeaderFilterProps) => {
+  const tableStore = useTableStoreContext<TRowData>();
+  const { t } = useTranslation();
+  const setFilterValue = useStore(tableStore, (state) => state.setFilterValue);
+
+  const initialDefaultValues = useMemo<FilterValues>(() => {
+    return {
+      [filter.id]: filter.initialFilterValue,
+    };
+  }, [filter.id, filter.initialFilterValue]);
+
+  const initialValues = useMemo<FilterValues>(() => {
+    return {
+      [filter.id]: filter.filterValue ?? filter.initialFilterValue,
+    };
+  }, [filter.id, filter.filterValue, filter.initialFilterValue]);
+
+  const formMethods = useForm<FilterValues>({
+    defaultValues: initialDefaultValues,
+    values: initialValues,
+  });
+
+  const { handleSubmit, formState: { isDirty } } = formMethods;
+
+  const onFormSubmit = useCallback(async (formFields: FilterValues) => {
+
+    await setFilterValue(filter.id, formFields[filter.id]);
+    onFilterChange();
+  }, [filter.id, onFilterChange, setFilterValue]);
+
+  const onResetButtonClick = useCallback(async () => {
+
+    await setFilterValue(filter.id, filter.initialFilterValue);
+    onFilterChange();
+  }, [filter.id, filter.initialFilterValue, onFilterChange, setFilterValue]);
+
+  return (
+    <FormProvider {...formMethods}>
+      <Box
+        autoComplete={'off'}
+        component={'form'}
+        id={'Filters'}
+        sx={{
+          minWidth: '400px',
+        }}
+        onSubmit={handleSubmit(onFormSubmit)}
+      >
+        <TableFilter filter={filter} />
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 1,
+            justifyContent: 'flex-end',
+          }}
+        >
+          <Button
+            disabled={filter.isInitialFilterValue()}
+            variant={'outlined'}
+            onClick={onResetButtonClick}
+          >
+            {t`Remove filter`}
+          </Button>
+          <Button
+            disabled={!isDirty}
+            type={'submit'}
+            variant={'contained'}
+          >
+            {t`Apply`}
+          </Button>
+
+        </Box>
+      </Box>
+    </FormProvider>
+  );
+};

package/src/components/ui/Table/TableMenu.tsx

@@ -0,0 +1,26 @@
+import type { BoxProps } from '@mui/material';
+
+import { UseColumnsMenu } from '../../../hooks/useColumnsMenu';
+import { NestedDropdown } from '../NestedMenu';
+
+export type TableMenuProps = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  readonly ContainerProps?: Partial<BoxProps>;
+};
+
+export const TableMenu = ({ ContainerProps }: TableMenuProps) => {
+  const columnsMenu = UseColumnsMenu({});
+
+  return (
+    <NestedDropdown
+      ButtonProps={{
+        variant: 'text',
+        size: 'small',
+        color: 'primary',
+      }}
+      ContainerProps={ContainerProps}
+      MenuProps={{ elevation: 3 }}
+      menuItemsData={columnsMenu}
+    />
+  );
+};

package/src/components/ui/Table/TableReadableIndexCell.tsx

@@ -0,0 +1,65 @@
+import { Button } from '@mui/material';
+import {
+  useCallback,
+  type MouseEvent as ReactMouseEvent,
+} from 'react';
+
+import type {
+  TableColumnReadableIndex,
+  TableRowParams,
+} from '../../../models/table';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { PageEventBusManager } from '../../../classes/managers/PageEventBusManager';
+
+export type TableReadableIndexCellProps<TRowData> = {
+  readonly tableColumn: TableColumnReadableIndex<TRowData>;
+  readonly cell: TableRowParams<TRowData>;
+  readonly onReadableIndexClick: (row: TRowData) => void;
+  readonly getRowName?: (row: TRowData) => string;
+};
+
+export const TableReadableIndexCell = <TRowData, >({
+  tableColumn,
+  cell,
+  onReadableIndexClick,
+  getRowName,
+}: TableReadableIndexCellProps<TRowData>) => {
+  const onClick = useCallback((event: ReactMouseEvent) => {
+    if (onReadableIndexClick) {
+      if (!getRowName) {
+        throw new Error('getRowName is required when onReadableIndexClick is provided');
+      }
+      if (ConfigManager.instance.config.enablePageEvents) {
+        PageEventBusManager.instance.emit('click', {
+          label: getRowName(cell.row),
+          type: 'table-row-index',
+        });
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      onReadableIndexClick(cell.row);
+    }
+  }, [getRowName, onReadableIndexClick, cell.row]);
+
+  if (!onReadableIndexClick) {
+    return cell.rowIndex + 1;
+  }
+
+  return (
+    <Button
+      variant={'text'}
+      size={'small'}
+      aria-label={tableColumn.getAriaLabel(cell)}
+      color={'primary'}
+      sx={{
+        width: '100%',
+        height: '100%',
+        minWidth: 'unset',
+        padding: 0,
+      }}
+      onClick={onClick}
+    >
+      {cell.rowIndex + 1}
+    </Button>
+  );
+};

package/src/components/ui/Table/TableSidebarMenu.tsx

@@ -0,0 +1,59 @@
+import { t } from 'i18next';
+import type { ReactNode } from 'react';
+import {
+  useCallback,
+  useState,
+} from 'react';
+import { useStore } from 'zustand';
+
+import {
+  SidebarMenu,
+  SidebarMenuItem,
+} from '../Sidebar';
+import { useTableStoreContext } from '../../../stores/tableStore';
+
+import {
+  TableFiltersSidebarItem,
+  TableFiltersSidebarItemIcon,
+} from './TableFiltersSidebarItem';
+
+export type TableSidebarMenuProps = {
+  readonly extraSidebarMenuItems?: ReactNode;
+};
+
+export const TableSidebarMenu = <TRowData, >({ extraSidebarMenuItems }: TableSidebarMenuProps) => {
+  const tableStore = useTableStoreContext<TRowData>();
+
+  const activeFiltersCount = useStore(tableStore, (state) => state.filters.filter(f => !f.isInitialFilterValue()).length);
+
+  const [isTableFiltersSidebarItemOpen, setIsTableFiltersSidebarItemOpen] = useState(false);
+
+  const onEpiDashboardFilterSidebarClose = useCallback(() => {
+    setIsTableFiltersSidebarItemOpen(false);
+  }, []);
+
+  const onEpiDashboardOpenFilterSidebarButtonClick = useCallback(() => {
+    setIsTableFiltersSidebarItemOpen(true);
+  }, []);
+
+  return (
+    <>
+      <SidebarMenu>
+        <SidebarMenuItem
+          first
+          badgeColor={'secondary'}
+          badgeContent={activeFiltersCount}
+          icon={<TableFiltersSidebarItemIcon />}
+          testIdAttributes={{ name: 'filters' }}
+          title={t`Open filters`}
+          onClick={onEpiDashboardOpenFilterSidebarButtonClick}
+        />
+        {extraSidebarMenuItems}
+      </SidebarMenu>
+      <TableFiltersSidebarItem
+        open={isTableFiltersSidebarItemOpen}
+        onClose={onEpiDashboardFilterSidebarClose}
+      />
+    </>
+  );
+};

package/src/components/ui/Table/classNames.ts

@@ -0,0 +1,7 @@
+export const tableHeaderCellClassNames = {
+  root: 'GENEPIX-TableHeaderCell',
+  content: 'GENEPIX-TableHeaderCell-content',
+  columnDivider: 'GENEPIX-TableHeaderCell-columnDivider',
+  sortLabelIcon: 'GENEPIX-TableHeaderCell-sortLabelIcon',
+  filterLabelIcon: 'GENEPIX-TableHeaderCell-filterLabelIcon',
+};