@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.153 → 2.0.0-next.155

package/src/components/alert-list-details-experimental/alert-list-details-experimental.ts

@@ -1,8 +1,9 @@
-import {LitElement, html, unsafeCSS} from 'lit';
+import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';
 import {customElement} from '../../decorator.js';
 import compentStyle from './alert-list-details-experimental.css?inline';
 import {msg} from '@lit/localize';
 import {property, query, state} from 'lit/decorators.js';
+import {repeat} from 'lit/directives/repeat.js';
 import '../icon-button/icon-button.js';
 import '../button/button.js';
 import '../../icons/icon-silence-iec.js';
@@ -39,7 +40,7 @@ import {
 } from '../table/table.js';
 import '../scrollbar/scrollbar.js';
 
-export enum AlertListMode {
+export enum FilterModes {
   UNACKED = 'unacked',
   ALL = 'all',
   SHELVED = 'shelved',
@@ -47,26 +48,73 @@ export enum AlertListMode {
   RECTIFIED = 'rectified',
 }
 
-export type ObcAckClickEvent = CustomEvent<{
+export type ObcAlertListCellClickEvent = CustomEvent<{
   alert: Alert;
+  columnKey: string;
+  rowId: string;
 }>;
 
 export type ObcRowClickEvent = CustomEvent<{
   alert: Alert;
+  rowId: string;
 }>;
 
-export function getAlertListModeData(selectedMode: AlertListMode) {
-  if (selectedMode === AlertListMode.ALL)
+export interface AlertListColumnBase {
+  /** Unique within the list; part of the cell slot name. */
+  key: string;
+  label: string;
+  /** CSS grid track size. Defaults to `1fr` for the first column, `min-content` for the rest. */
+  width?: string;
+  dividerRight?: boolean;
+}
+
+/** A column whose cells the list renders from `cell(alert)`. */
+export interface AlertListDataColumn extends AlertListColumnBase {
+  cell: (alert: Alert) => ObcTableCellData | undefined;
+  /** Makes the column sortable. */
+  compare?: (a: Alert, b: Alert) => number;
+  sortDirection?: 'asc' | 'desc';
+}
+
+/** A column whose cells the consumer supplies through `cell-<key>:<rowId>` slots. */
+export interface AlertListSlotColumn extends AlertListColumnBase {
+  slot: true;
+}
+
+export type AlertListColumn = AlertListDataColumn | AlertListSlotColumn;
+
+export type AlertListColumnOptions = Partial<AlertListColumnBase>;
+
+/** One cell of a slot column, for every row including rows in collapsed groups. */
+export interface AlertListCellSlot {
+  name: string;
+  alert: Alert;
+  rowId: string;
+  columnKey: string;
+}
+
+export type ObcAlertListCellSlotsChangeEvent = CustomEvent<AlertListCellSlot[]>;
+
+export interface AlertListRow {
+  rowId: string;
+  parentRowId?: string;
+  alert: Alert;
+  level: number;
+  expandable: boolean;
+}
+
+export function getFilterModeData(filterMode: FilterModes) {
+  if (filterMode === FilterModes.ALL)
     return {
-      name: AlertListMode.ALL,
+      name: FilterModes.ALL,
       title: msg('All'),
       emptyTitle: msg('No active alerts'),
       emptyIcon: html`<obi-alerts></obi-alerts>`,
       filter: (alert: Alert) => !isShelved(alert) && isActive(alert),
     };
-  else if (selectedMode === AlertListMode.UNACKED)
+  else if (filterMode === FilterModes.UNACKED)
     return {
-      name: AlertListMode.UNACKED,
+      name: FilterModes.UNACKED,
       title: msg('Unacked'),
       emptyTitle: msg('No unacknowledged alerts'),
       emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,
@@ -76,31 +124,31 @@ export function getAlertListModeData(selectedMode: AlertListMode) {
         !excludedFromUnackedFilter(alert.type) &&
         !isShelved(alert),
     };
-  else if (selectedMode === AlertListMode.SHELVED)
+  else if (filterMode === FilterModes.SHELVED)
     return {
-      name: AlertListMode.SHELVED,
+      name: FilterModes.SHELVED,
       title: msg('Shelved'),
       emptyTitle: msg('No shelved alerts'),
       emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,
       filter: (alert: Alert) => isShelved(alert),
     };
-  else if (selectedMode === AlertListMode.BLOCKED)
+  else if (filterMode === FilterModes.BLOCKED)
     return {
-      name: AlertListMode.BLOCKED,
+      name: FilterModes.BLOCKED,
       title: msg('Blocked'),
       emptyTitle: msg('No blocked alerts'),
       emptyIcon: html`<obi-alerts-active></obi-alerts-active>`,
       filter: (alert: Alert) => isBlocked(alert),
     };
-  else if (selectedMode === AlertListMode.RECTIFIED)
+  else if (filterMode === FilterModes.RECTIFIED)
     return {
-      name: AlertListMode.RECTIFIED,
+      name: FilterModes.RECTIFIED,
       title: msg('Rectified'),
       emptyTitle: msg('No rectified alerts'),
       emptyIcon: html`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,
       filter: (alert: Alert) => !isActive(alert),
     };
-  else throw new Error('Invalid selected mode');
+  else throw new Error('Invalid filter mode');
 }
 
 export function canAckFilter(filter: (alert: Alert) => boolean) {
@@ -111,23 +159,278 @@ export function canAckFilter(filter: (alert: Alert) => boolean) {
     filter(alert);
 }
 
+/** Name of the slot that fills the cell of a slot column in one row. */
+export function alertListCellSlotName(columnKey: string, rowId: string) {
+  // Row ids are URI-encoded too, so neither part can contain the `:` separator.
+  return `cell-${encodeURIComponent(columnKey)}:${rowId}`;
+}
+
+/** Alert icon, text and source; sorted by priority. */
+export function statusColumn(
+  options: AlertListColumnOptions = {}
+): AlertListDataColumn {
+  return {
+    key: 'status',
+    label: 'Status',
+    sortDirection: 'desc',
+    compare: comparePriorityAlerts,
+    cell: (alert) => ({
+      type: ObcTableCellType.Regular,
+      largeIcon: true,
+      text: alert.text,
+      title: alert.source,
+      noWrap: true,
+      icon: html`<obc-alert-icon
+        .type=${alert.type}
+        .acknowledged=${isAcknowledged(alert)}
+        .active=${isActive(alert)}
+      ></obc-alert-icon>`,
+    }),
+    ...options,
+  };
+}
+
+/** ACK button, or the no-ack icon, for alerts that await acknowledgement. The button fires `cell-click`. */
+export function ackColumn(
+  options: AlertListColumnOptions = {}
+): AlertListDataColumn {
+  return {
+    key: 'ack',
+    label: 'ACK-status',
+    cell: (alert) => {
+      if (
+        isAcknowledged(alert) ||
+        !isActive(alert) ||
+        !requiresAcknowledgement(alert.type)
+      ) {
+        return {type: ObcTableCellType.Regular};
+      }
+      if (alert.noAck) {
+        const icon = usesAlarmNoAckIcon(alert.type)
+          ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`
+          : html`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;
+        return {
+          type: ObcTableCellType.Regular,
+          largeIcon: true,
+          icon,
+          align: 'center',
+        };
+      }
+      return {type: ObcTableCellType.Button, text: msg('ACK')};
+    },
+    ...options,
+  };
+}
+
+/** Activation time; sorted by time. */
+export function timeColumn({
+  formatter = (time: Date) =>
+    time.toLocaleTimeString(undefined, {hour12: false}),
+  ...options
+}: AlertListColumnOptions & {
+  formatter?: (time: Date) => string;
+} = {}): AlertListDataColumn {
+  return {
+    key: 'time',
+    label: 'Activated',
+    compare: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
+    cell: (alert) => ({
+      type: ObcTableCellType.Regular,
+      text: formatter(alert.time),
+      align: 'center',
+      neutral: true,
+    }),
+    ...options,
+  };
+}
+
+/** Tag ID prefixed with `#`; sorted alphabetically. */
+export function tagIdColumn(
+  options: AlertListColumnOptions = {}
+): AlertListDataColumn {
+  return {
+    key: 'tagId',
+    label: 'Tag ID',
+    compare: (a, b) => a.tagId.localeCompare(b.tagId),
+    cell: (alert) => ({
+      type: ObcTableCellType.Regular,
+      text: '#' + alert.tagId,
+      align: 'right',
+    }),
+    ...options,
+  };
+}
+
+function isSlotColumn(column: AlertListColumn): column is AlertListSlotColumn {
+  return 'slot' in column && column.slot === true;
+}
+
+/** Row ids join URI-encoded alert ids with `/`, so the last `/` separates the parent. */
+function parentRowIdOf(rowId: string): string | undefined {
+  const separatorIndex = rowId.lastIndexOf('/');
+  return separatorIndex === -1 ? undefined : rowId.slice(0, separatorIndex);
+}
+
+/** Keeps column keys clear of the row fields `obc-table` reserves (`id`, `level`, …). */
+const TABLE_KEY_PREFIX = 'column-';
+
+function walkAlertRows(
+  alerts: Alert[],
+  isExpanded: (rowId: string) => boolean
+): AlertListRow[] {
+  const alertIds = new Set(alerts.map((alert) => alert.id));
+  const membersByGroupId = new Map<string, Alert[]>();
+  const roots: Alert[] = [];
+  for (const alert of alerts) {
+    const groupIds = (alert.memberOf ?? []).filter(
+      (groupId) => groupId !== alert.id && alertIds.has(groupId)
+    );
+    if (groupIds.length === 0) {
+      roots.push(alert);
+      continue;
+    }
+    for (const groupId of groupIds) {
+      const members = membersByGroupId.get(groupId) ?? [];
+      members.push(alert);
+      membersByGroupId.set(groupId, members);
+    }
+  }
+
+  const reachable = new Set<string>();
+  const markReachable = (alert: Alert) => {
+    if (reachable.has(alert.id)) {
+      return;
+    }
+    reachable.add(alert.id);
+    for (const member of membersByGroupId.get(alert.id) ?? []) {
+      markReachable(member);
+    }
+  };
+  roots.forEach(markReachable);
+  for (const alert of alerts) {
+    if (!reachable.has(alert.id)) {
+      roots.push(alert);
+      markReachable(alert);
+    }
+  }
+
+  const rows: AlertListRow[] = [];
+  const visit = (
+    alert: Alert,
+    level: number,
+    parentRowId: string | undefined,
+    ancestors: Set<string>
+  ) => {
+    const segment = encodeURIComponent(alert.id);
+    const rowId =
+      parentRowId === undefined ? segment : `${parentRowId}/${segment}`;
+    const members = membersByGroupId.get(alert.id) ?? [];
+    // A member can name a group that is also its own descendant.
+    const expandableMembers = members.filter(
+      (member) => !ancestors.has(member.id)
+    );
+
+    rows.push({
+      rowId,
+      parentRowId,
+      alert,
+      level,
+      expandable: expandableMembers.length > 0,
+    });
+
+    if (!isExpanded(rowId)) {
+      return;
+    }
+    const nextAncestors = new Set(ancestors).add(alert.id);
+    for (const member of expandableMembers) {
+      visit(member, level + 1, rowId, nextAncestors);
+    }
+  };
+
+  for (const alert of roots) {
+    visit(alert, 0, undefined, new Set());
+  }
+  return rows;
+}
+
 /**
- * @availableWhen timeFormatter showTime==true
+ * Every row `obc-alert-list-details-experimental` can show for these alerts
+ * and filter mode, rows inside collapsed groups included. An alert that is a member
+ * of several groups gets one row, and one `rowId`, under each.
+ */
+export function getAlertRows(
+  alerts: Alert[],
+  filterMode: FilterModes
+): AlertListRow[] {
+  const {filter} = getFilterModeData(filterMode);
+  return walkAlertRows(alerts.filter(filter), () => true);
+}
+
+/**
+ * `<obc-alert-list-details-experimental>` lists alerts in a table with
+ * consumer-defined columns, grouping alerts through `memberOf`.
+ *
+ * ## Features
+ * - **Columns:** `columns` sets which columns show and in what order. A data
+ *   column renders each cell from `cell(alert)`; a slot column renders
+ *   whatever the consumer places in the cell's slot.
+ * - **Column factories:** `statusColumn()`, `ackColumn()`, `timeColumn()` and
+ *   `tagIdColumn()` build the standard data columns; each takes overrides
+ *   such as `label`, `width` or `dividerRight`.
+ * - **Filter modes:** `filterMode` lists unacknowledged, all, shelved,
+ *   blocked or rectified alerts, with an empty state per filter mode.
+ * - **Grouping:** an alert listing group ids in `memberOf` renders under each
+ *   of those groups; groups nest and can be collapsed.
+ * - **Selection:** `selectedRowId` highlights one row. When a collapsed group
+ *   hides it, the nearest visible group row is highlighted instead.
+ *
+ * ## Usage Guidelines
+ * - Use a slot column when the cell content must be owned by the consumer,
+ *   for example a button the application disables or removes later. Slotted
+ *   content stays in the light DOM, so it can be looked up by id.
+ * - Slot names are `cell-<key>:<rowId>`. `cellSlots` lists every one, with its
+ *   alert, row id and column key, and `cell-slots-change` fires when the list
+ *   changes. The Svelte wrapper renders its `cell` snippet once per entry. An
+ *   alert in two groups has two rows, so it gets two entries.
+ * - Without a wrapper, build the names from `getAlertRows(alerts, filterMode)`
+ *   and `alertListCellSlotName(key, rowId)`, or read `cellSlots`.
+ * - Clicks on buttons, links and inputs in a cell do not fire `row-click`.
+ * - The consumer owns the selection: set `selectedRowId` from `row-click`, and
+ *   set it to `undefined` on a second click to unselect. The list never changes
+ *   it; clear it when the row is no longer in `getAlertRows(alerts, filterMode)`.
+ *
+ * ## Example
+ * ```html
+ * <obc-alert-list-details-experimental>
+ *   <obc-button slot="cell-ack:radar" id="ack-radar">ACK</obc-button>
+ * </obc-alert-list-details-experimental>
+ * ```
+ * with `columns` set to `[statusColumn(), {key: 'ack', label: 'ACK-status', slot: true}]`.
+ *
+ * @property filterMode - Which alerts to list.
+ * @property alerts - Alerts to list.
+ * @property columns - Columns in display order.
+ * @property showHeader - Whether to show the column header row.
  * @property defaultExpanded - Whether groups start expanded. Set false to open the list collapsed.
- * @fires {ObcAckClickEvent} ack-click - Fired when the user clicks the "ACK" button.
+ * @property selectedRowId - Row id to highlight, as given by `row-click` or `getAlertRows()`. Nothing is highlighted when no row has this id.
+ * @slot cell-<key>:<rowId> - Content of the cell in slot column `<key>` for row `<rowId>`.
+ * @fires {ObcAlertListCellClickEvent} cell-click - Fired when the user clicks a button rendered by a data column, such as the one from `ackColumn()`.
  * @fires {ObcRowClickEvent} row-click - Fired when the user clicks a row.
+ * @fires {ObcAlertListCellSlotsChangeEvent} cell-slots-change - Fired when `cellSlots` changes; the detail is the new list.
  * @experimental
  */
 @customElement('obc-alert-list-details-experimental')
 export class ObcAlertListDetailsExperimental extends LitElement {
-  @property({type: String}) selectedMode: AlertListMode = AlertListMode.ALL;
+  @property({type: String}) filterMode: FilterModes = FilterModes.ALL;
   @property({type: Array}) alerts: Alert[] = [];
-  @property({type: Boolean}) showTime: boolean = false;
-  @property({attribute: false}) timeFormatter: (time: Date) => string = (
-    time: Date
-  ) => time.toLocaleTimeString(undefined, {hour12: false});
-  @property({type: Boolean}) small: boolean = false;
+  @property({type: Array, attribute: false}) columns: AlertListColumn[] = [
+    statusColumn(),
+    ackColumn({dividerRight: true}),
+    tagIdColumn(),
+  ];
+  @property({type: Boolean, attribute: false}) showHeader: boolean = true;
   @property({type: Boolean, attribute: false}) defaultExpanded: boolean = true;
+  @property({type: String}) selectedRowId?: string;
 
   @query('obc-table')
   private alertList!: ObcTable;
@@ -135,6 +438,58 @@ export class ObcAlertListDetailsExperimental extends LitElement {
   @state() private expansionOverrides = new Map<string, boolean>();
 
   private alertByRowId = new Map<string, Alert>();
+  private allRowIds = new Set<string>();
+
+  private _cellSlots: AlertListCellSlot[] = [];
+  private cellSlotsChanged = false;
+
+  /** Slot of every cell in a slot column, rows in collapsed groups included. */
+  get cellSlots(): AlertListCellSlot[] {
+    return this._cellSlots;
+  }
+
+  override willUpdate(changed: PropertyValues<this>) {
+    if (
+      !changed.has('alerts') &&
+      !changed.has('columns') &&
+      !changed.has('filterMode')
+    ) {
+      return;
+    }
+    const rows = getAlertRows(this.alerts, this.filterMode);
+    this.allRowIds = new Set(rows.map((row) => row.rowId));
+    const slotColumns = this.columns.filter(isSlotColumn);
+    const next = getAlertRows(this.alerts, this.filterMode).flatMap((row) =>
+      slotColumns.map((column) => ({
+        name: alertListCellSlotName(column.key, row.rowId),
+        alert: row.alert,
+        rowId: row.rowId,
+        columnKey: column.key,
+      }))
+    );
+    const unchanged =
+      next.length === this._cellSlots.length &&
+      next.every(
+        (slot, index) =>
+          slot.name === this._cellSlots[index].name &&
+          slot.alert === this._cellSlots[index].alert
+      );
+    if (!unchanged) {
+      this._cellSlots = next;
+      this.cellSlotsChanged = true;
+    }
+  }
+
+  override updated() {
+    if (this.cellSlotsChanged) {
+      this.cellSlotsChanged = false;
+      this.dispatchEvent(
+        new CustomEvent('cell-slots-change', {
+          detail: this._cellSlots,
+        }) as ObcAlertListCellSlotsChangeEvent
+      );
+    }
+  }
 
   public getVisibleAlerts(): Alert[] {
     const seen = new Set<string>();
@@ -152,22 +507,30 @@ export class ObcAlertListDetailsExperimental extends LitElement {
   }
 
   private onRowClick(e: ObcTableRowClickEvent) {
-    const row = this.alertByRowId.get(e.detail.row.id);
-    if (row) {
+    const rowId = e.detail.row.id;
+    const alert = this.alertByRowId.get(rowId);
+    if (alert) {
       this.dispatchEvent(
-        new CustomEvent('row-click', {detail: {alert: row}}) as ObcRowClickEvent
+        new CustomEvent('row-click', {
+          detail: {alert, rowId},
+        }) as ObcRowClickEvent
       );
     }
   }
 
   private onCellButtonClick(e: ObcTableCellClickEvent) {
-    const row = this.alertByRowId.get(e.detail.rowId);
-    if (row) {
+    const {rowId, columnKey} = e.detail;
+    const alert = this.alertByRowId.get(rowId);
+    if (alert) {
       this.dispatchEvent(
-        new CustomEvent('ack-click', {
-          detail: {alert: row},
+        new CustomEvent('cell-click', {
+          detail: {
+            alert,
+            columnKey: columnKey.slice(TABLE_KEY_PREFIX.length),
+            rowId,
+          },
           bubbles: false,
-        }) as ObcAckClickEvent
+        }) as ObcAlertListCellClickEvent
       );
     }
   }
@@ -182,243 +545,110 @@ export class ObcAlertListDetailsExperimental extends LitElement {
     return this.expansionOverrides.get(rowId) ?? this.defaultExpanded;
   }
 
-  private get columns() {
-    if (this.small) {
-      const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [
-        {
-          label: 'Status',
-          key: 'status',
-          sortDirection: 'desc',
-          sortable: true,
-          compareFunction: (_a, _b, aRow, bRow) => {
-            const aAlert = this.alertByRowId.get(aRow.id);
-            const bAlert = this.alertByRowId.get(bRow.id);
-            if (aAlert && bAlert) {
-              return comparePriorityAlerts(aAlert, bAlert);
-            }
-            return 0;
-          },
-        },
-      ];
-      if (this.showTime) {
-        columns.push({
-          label: 'Activated',
-          key: 'time',
-        });
+  private compareRows(
+    compare: (a: Alert, b: Alert) => number,
+    aRow: ObcTableRow,
+    bRow: ObcTableRow
+  ) {
+    const aAlert = this.alertByRowId.get(aRow.id);
+    const bAlert = this.alertByRowId.get(bRow.id);
+    return aAlert && bAlert ? compare(aAlert, bAlert) : 0;
+  }
+
+  private get tableColumns(): ObcTableColumn[] {
+    return this.columns.map((column): ObcTableColumn => {
+      const base = {
+        label: column.label,
+        key: TABLE_KEY_PREFIX + column.key,
+        dividerRight: column.dividerRight,
+      };
+      if (isSlotColumn(column)) {
+        return {
+          ...base,
+          renderCell: (_value, row) =>
+            html`<slot
+              name=${alertListCellSlotName(column.key, row.id)}
+            ></slot>`,
+        };
       }
-      columns.push({
-        label: 'ACK-status',
-        key: 'action',
-      });
-      return columns;
-    } else {
-      const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [
-        {
-          label: 'Status',
-          key: 'status',
-          sortDirection: 'desc',
-          sortable: true,
-          compareFunction: (_a, _b, aRow, bRow) => {
-            const aAlert = this.alertByRowId.get(aRow.id);
-            const bAlert = this.alertByRowId.get(bRow.id);
-            if (aAlert && bAlert) {
-              return comparePriorityAlerts(aAlert, bAlert);
-            }
-            return 0;
-          },
-        },
-        {
-          label: 'ACK-status',
-          key: 'action',
-          dividerRight: true,
-        },
-      ];
-      if (this.showTime) {
-        columns.push({
-          label: 'Activated',
-          key: 'time',
+      const {compare} = column;
+      if (compare) {
+        return {
+          ...base,
           sortable: true,
-          compareFunction: (_a, _b, aRow, bRow) => {
-            const aAlert = this.alertByRowId.get(aRow.id);
-            const bAlert = this.alertByRowId.get(bRow.id);
-            if (aAlert && bAlert) {
-              const aTime = new Date(aAlert.time);
-              const bTime = new Date(bAlert.time);
-              return aTime.getTime() - bTime.getTime();
-            }
-            return 0;
-          },
-        });
+          sortDirection: column.sortDirection,
+          compareFunction: (_a, _b, aRow, bRow) =>
+            this.compareRows(compare, aRow, bRow),
+        };
       }
-      columns.push({
-        label: 'Tag ID',
-        key: 'tagId',
-        sortable: true,
-        compareFunction: (a, b) => {
-          const aText =
-            a?.type === ObcTableCellType.Regular ? String(a.text ?? '') : '';
-          const bText =
-            b?.type === ObcTableCellType.Regular ? String(b.text ?? '') : '';
-          return aText.localeCompare(bText);
-        },
-      });
-      return columns;
-    }
+      return base;
+    });
   }
 
-  private get metadata() {
-    return getAlertListModeData(this.selectedMode);
+  private get gridColumns() {
+    const columnTracks = this.columns.map(
+      (column, index) => column.width ?? (index === 0 ? '1fr' : 'min-content')
+    );
+    // The empty trailing track takes the table body's end padding and
+    // scrollbar gutter, which obc-table's subgrids add to the last track.
+    return [...columnTracks, 'min-content'].join(' ');
   }
 
-  private get filteredAlerts() {
-    return this.alerts.filter(this.metadata.filter);
+  private get metadata() {
+    return getFilterModeData(this.filterMode);
   }
 
   private buildVisibleRows(): ObcTableRow[] {
-    const alerts = this.filteredAlerts;
-    const alertIds = new Set(alerts.map((alert) => alert.id));
-    const membersByGroupId = new Map<string, Alert[]>();
-    const roots: Alert[] = [];
-    for (const alert of alerts) {
-      const groupIds = (alert.memberOf ?? []).filter(
-        (groupId) => groupId !== alert.id && alertIds.has(groupId)
-      );
-      if (groupIds.length === 0) {
-        roots.push(alert);
-        continue;
-      }
-      for (const groupId of groupIds) {
-        const members = membersByGroupId.get(groupId) ?? [];
-        members.push(alert);
-        membersByGroupId.set(groupId, members);
-      }
-    }
+    const rows = walkAlertRows(
+      this.alerts.filter(this.metadata.filter),
+      (rowId) => this.isExpanded(rowId)
+    );
+    this.alertByRowId = new Map(rows.map((row) => [row.rowId, row.alert]));
+    const highlightedRowId = this.highlightedRowId();
+    return rows.map((row) => ({
+      ...this.buildRowCells(row.alert),
+      id: row.rowId,
+      parentId: row.parentRowId,
+      level: row.level,
+      expandable: row.expandable,
+      expanded: this.isExpanded(row.rowId),
+      selected: row.rowId === highlightedRowId,
+    }));
+  }
 
-    const reachable = new Set<string>();
-    const markReachable = (alert: Alert) => {
-      if (reachable.has(alert.id)) {
-        return;
-      }
-      reachable.add(alert.id);
-      for (const member of membersByGroupId.get(alert.id) ?? []) {
-        markReachable(member);
-      }
-    };
-    roots.forEach(markReachable);
-    for (const alert of alerts) {
-      if (!reachable.has(alert.id)) {
-        roots.push(alert);
-        markReachable(alert);
-      }
+  /** The selected row, or the nearest visible group row when a collapsed group hides it. */
+  private highlightedRowId(): string | undefined {
+    if (
+      this.selectedRowId === undefined ||
+      !this.allRowIds.has(this.selectedRowId)
+    ) {
+      return undefined;
     }
-
-    const rows: ObcTableRow[] = [];
-    this.alertByRowId = new Map();
-    const visit = (
-      alert: Alert,
-      level: number,
-      parentRowId: string | undefined,
-      ancestors: Set<string>
-    ) => {
-      const segment = encodeURIComponent(alert.id);
-      const rowId =
-        parentRowId === undefined ? segment : `${parentRowId}/${segment}`;
-      const members = membersByGroupId.get(alert.id) ?? [];
-      // A member can name a group that is also its own descendant.
-      const expandableMembers = members.filter(
-        (member) => !ancestors.has(member.id)
-      );
-      const expanded = this.isExpanded(rowId);
-
-      this.alertByRowId.set(rowId, alert);
-      rows.push({
-        ...this.buildRowCells(alert),
-        id: rowId,
-        parentId: parentRowId,
-        level,
-        expandable: expandableMembers.length > 0,
-        expanded,
-      });
-
-      if (!expanded) {
-        return;
-      }
-      const nextAncestors = new Set(ancestors).add(alert.id);
-      for (const member of expandableMembers) {
-        visit(member, level + 1, rowId, nextAncestors);
-      }
-    };
-
-    for (const alert of roots) {
-      visit(alert, 0, undefined, new Set());
+    let rowId: string | undefined = this.selectedRowId;
+    while (rowId !== undefined && !this.alertByRowId.has(rowId)) {
+      rowId = parentRowIdOf(rowId);
     }
-    return rows;
+    return rowId;
   }
 
   private buildRowCells(
     alert: Alert
   ): Record<string, ObcTableCellData | undefined> {
-    let action: ObcTableCellData = {
-      type: ObcTableCellType.Regular,
-    };
-    if (
-      !isAcknowledged(alert) &&
-      isActive(alert) &&
-      requiresAcknowledgement(alert.type)
-    ) {
-      if (alert.noAck) {
-        const icon = usesAlarmNoAckIcon(alert.type)
-          ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`
-          : html`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;
-        action = {
-          type: ObcTableCellType.Regular,
-          largeIcon: true,
-          icon,
-          align: 'center',
-        };
-      } else {
-        action = {
-          type: ObcTableCellType.Button,
-          text: msg('ACK'),
-        };
-      }
+    const cells: Record<string, ObcTableCellData | undefined> = {};
+    for (const column of this.columns) {
+      cells[TABLE_KEY_PREFIX + column.key] = isSlotColumn(column)
+        ? // obc-table skips renderCell for an undefined value.
+          {type: ObcTableCellType.Regular}
+        : column.cell(alert);
     }
+    return cells;
+  }
 
-    const status: ObcTableCellData = {
-      type: ObcTableCellType.Regular,
-      largeIcon: true,
-      text: alert.text,
-      title: alert.source,
-      noWrap: true,
-      icon: html`<obc-alert-icon
-        .type=${alert.type}
-        .acknowledged=${isAcknowledged(alert)}
-        .active=${isActive(alert)}
-      ></obc-alert-icon>`,
-    };
-
-    const time: ObcTableCellData | undefined = this.showTime
-      ? {
-          type: ObcTableCellType.Regular,
-          text: this.timeFormatter(alert.time),
-          align: 'center',
-          neutral: true,
-        }
-      : undefined;
-
-    const tagId: ObcTableCellData | undefined = this.small
-      ? undefined
-      : {
-          type: ObcTableCellType.Regular,
-          text: '#' + alert.id,
-          align: 'right',
-        };
-    return {
-      status,
-      time,
-      action,
-      tagId,
-    };
+  private slotNames(rows: ObcTableRow[]) {
+    const slotColumns = this.columns.filter(isSlotColumn);
+    return rows.flatMap((row) =>
+      slotColumns.map((column) => alertListCellSlotName(column.key, row.id))
+    );
   }
 
   override render() {
@@ -426,18 +656,26 @@ export class ObcAlertListDetailsExperimental extends LitElement {
     const data = this.buildVisibleRows();
 
     return html`
-      <div class="wrapper ${this.small ? 'small' : ''}">
+      <div class="wrapper">
         ${data.length > 0
           ? html` <obc-table
                 class="alert-list"
+                style="--alert-list-grid-columns: ${this.gridColumns}"
                 .data=${data}
-                .columns=${this.columns}
+                .columns=${this.tableColumns}
                 .striped=${true}
-                .showHeader=${!this.small}
+                .showHeader=${this.showHeader}
                 @row-click=${this.onRowClick}
                 @cell-button-click=${this.onCellButtonClick}
                 @expand-toggle=${this.onExpandToggle}
-              ></obc-table>
+              >
+                ${repeat(
+                  this.slotNames(data),
+                  (name) => name,
+                  // Forwards the host's slot into the one obc-table renders in the cell.
+                  (name) => html`<slot name=${name} slot=${name}></slot>`
+                )}
+              </obc-table>
               <div class="spacer"></div>`
           : html` <div class="empty-list">
               <div class="icon">${selectedList.emptyIcon}</div>