From 74be69162b6ab96656c17e464f7c5471d67c2822 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Mon, 19 Oct 2026 15:53:24 +0200
Subject: [PATCH 01/22] feat: add experimental assignment list panel

---
 .../AssignmentAtomCell.tsx                    |  36 ++++
 .../AssignmentListPanel.tsx                   | 183 ++++++++++++++++
 .../MoleculeAssignmentTable.tsx               |  79 +++++++
 .../atomGroupsToAssignmentRows.ts             | 198 ++++++++++++++++++
 src/component/panels/Panels.tsx               |  59 ++++--
 5 files changed, 534 insertions(+), 21 deletions(-)
 create mode 100644 src/component/panels/AssignmentListPanel/AssignmentAtomCell.tsx
 create mode 100644 src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
 create mode 100644 src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
 create mode 100644 src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts

diff --git a/src/component/panels/AssignmentListPanel/AssignmentAtomCell.tsx b/src/component/panels/AssignmentListPanel/AssignmentAtomCell.tsx
new file mode 100644
index 000000000..4006ca70d
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/AssignmentAtomCell.tsx
@@ -0,0 +1,36 @@
+import { Button } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+
+import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
+
+interface AssignmentAtomCellProps {
+  row: AssignmentListRow;
+  onToggle: (id: string) => void;
+}
+
+const AtomCellContainer = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
+export function AssignmentAtomCell({ row, onToggle }: AssignmentAtomCellProps) {
+  return (
+    <AtomCellContainer>
+      <Button
+        variant="minimal"
+        size="small"
+        icon={row.isExpanded ? 'chevron-down' : 'chevron-right'}
+        style={{
+          visibility: row.hasChildren ? 'visible' : 'hidden',
+        }}
+        onClick={(event) => {
+          event.stopPropagation();
+          onToggle(row.id);
+        }}
+      />
+      <span style={{ paddingInlineStart: row.isHydrogen ? '0.5em' : 0 }}>
+        {row.atomLabel}
+      </span>
+    </AtomCellContainer>
+  );
+}
diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
new file mode 100644
index 000000000..331dfa5c4
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
@@ -0,0 +1,183 @@
+import { Switch, Tab, Tabs } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { Molecule } from 'openchemlib';
+import type { GroupedDiaID } from 'openchemlib-utils';
+import { TopicMolecule } from 'openchemlib-utils';
+import { useId, useMemo, useState } from 'react';
+
+import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { EmptyText } from '../../elements/EmptyText.js';
+
+import { MoleculeAssignmentTable } from './MoleculeAssignmentTable.js';
+import { atomGroupsToAssignmentRows } from './atomGroupsToAssignmentRows.js';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  gap: 8px;
+  padding: 8px;
+  overflow: hidden;
+
+  > :not(:last-child) {
+    flex-shrink: 0;
+  }
+
+  [role='tablist'] {
+    overflow-x: auto;
+    flex-shrink: 0;
+  }
+`;
+
+const TableContainer = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+`;
+
+interface MoleculeAssignmentData {
+  molecule: StateMoleculeExtended;
+  groups: GroupedDiaID[];
+  expandableGroupIds: string[];
+}
+
+function toggleExpandedRows(
+  expandedRows: ReadonlySet<string>,
+  keys: readonly string[],
+): Set<string> {
+  const shouldCollapse = keys.every((key) => expandedRows.has(key));
+  const next = new Set(expandedRows);
+  for (const key of keys) {
+    if (shouldCollapse) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+  }
+  return next;
+}
+
+function useMoleculeAssignments(molecules: StateMoleculeExtended[]) {
+  const [selectedMoleculeId, selectMolecule] = useState<string>();
+  const moleculeAssignments = useMemo<MoleculeAssignmentData[]>(
+    () =>
+      molecules.map((molecule) => {
+        const topicMolecule = new TopicMolecule(
+          Molecule.fromMolfile(molecule.molfile),
+        );
+        const groups = topicMolecule.getGroupedDiastereotopicAtomIDs() ?? [];
+        return {
+          molecule,
+          groups,
+          expandableGroupIds: atomGroupsToAssignmentRows(groups, false)
+            .filter((row) => row.hasChildren)
+            .map((row) => row.id),
+        };
+      }),
+    [molecules],
+  );
+  const activeAssignment =
+    moleculeAssignments.find(
+      ({ molecule }) => molecule.id === selectedMoleculeId,
+    ) ?? moleculeAssignments[0];
+
+  return { moleculeAssignments, activeAssignment, selectMolecule };
+}
+
+function useAssignmentExpansion(
+  activeAssignment: MoleculeAssignmentData | undefined,
+) {
+  const [expandedGroupsByMolecule, setExpandedGroupsByMolecule] = useState<
+    ReadonlyMap<string, ReadonlySet<string>>
+  >(() => new Map());
+  const moleculeId = activeAssignment?.molecule.id;
+  const expandableGroupIds = activeAssignment?.expandableGroupIds ?? [];
+  const expandedGroups =
+    moleculeId === undefined
+      ? new Set<string>()
+      : (expandedGroupsByMolecule.get(moleculeId) ?? new Set<string>());
+  const allExpanded =
+    expandableGroupIds.length > 0 &&
+    expandableGroupIds.every((id) => expandedGroups.has(id));
+
+  function toggleRows(groupIds: readonly string[]) {
+    if (moleculeId === undefined) return;
+    setExpandedGroupsByMolecule((previous) => {
+      const next = new Map(previous);
+      next.set(
+        moleculeId,
+        toggleExpandedRows(previous.get(moleculeId) ?? new Set(), groupIds),
+      );
+      return next;
+    });
+  }
+
+  function toggleRow(groupId: string) {
+    toggleRows([groupId]);
+  }
+
+  function toggleAllRows() {
+    toggleRows(expandableGroupIds);
+  }
+
+  return {
+    expandedGroups,
+    allExpanded,
+    canExpand: expandableGroupIds.length > 0,
+    toggleRow,
+    toggleAllRows,
+  };
+}
+
+export function AssignmentListPanel() {
+  const { molecules } = useChartData();
+  const tabsId = useId();
+  const { moleculeAssignments, activeAssignment, selectMolecule } =
+    useMoleculeAssignments(molecules);
+  const expansion = useAssignmentExpansion(activeAssignment);
+
+  if (!activeAssignment) {
+    return <EmptyText text="No molecules available" />;
+  }
+
+  const { molecule } = activeAssignment;
+  const rows = atomGroupsToAssignmentRows(
+    activeAssignment.groups,
+    expansion.expandedGroups,
+  );
+
+  return (
+    <Container>
+      <Tabs
+        id={tabsId}
+        selectedTabId={molecule.id}
+        onChange={(id: string) => selectMolecule(id)}
+      >
+        {moleculeAssignments.map(({ molecule: tabMolecule }) => (
+          <Tab
+            key={tabMolecule.id}
+            id={tabMolecule.id}
+            title={tabMolecule.label}
+          />
+        ))}
+      </Tabs>
+      <Switch
+        label="Expand all"
+        checked={expansion.allExpanded}
+        disabled={!expansion.canExpand}
+        onChange={expansion.toggleAllRows}
+        style={{ marginBottom: 0 }}
+      />
+      <TableContainer>
+        <MoleculeAssignmentTable
+          key={molecule.id}
+          rows={rows}
+          onToggleRow={expansion.toggleRow}
+        />
+      </TableContainer>
+    </Container>
+  );
+}
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
new file mode 100644
index 000000000..23c81dcbe
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -0,0 +1,79 @@
+import styled from '@emotion/styled';
+import { useMemo } from 'react';
+
+import {
+  TanStackTable,
+  createTanStackColumnHelper,
+} from '../../elements/tanstack_table/index.js';
+
+import { AssignmentAtomCell } from './AssignmentAtomCell.js';
+import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
+
+interface MoleculeAssignmentTableProps {
+  rows: AssignmentListRow[];
+  onToggleRow: (id: string) => void;
+}
+
+const columnHelper = createTanStackColumnHelper<AssignmentListRow>();
+
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  table {
+    border-top: 0;
+  }
+
+  table thead th {
+    background-color: #e0e0e0;
+    color: #333;
+    border-bottom-color: #bdbdbd;
+    box-shadow: inset 0 1px 0 #bdbdbd;
+    z-index: 1;
+  }
+`;
+
+export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
+  const { rows, onToggleRow } = props;
+  const columns = useMemo(() => {
+    return columnHelper.columns([
+      {
+        header: 'Atom',
+        accessorKey: 'atomLabel',
+        meta: { style: { width: '80px' } },
+        enableSorting: false,
+        cell: ({ row }) => (
+          <AssignmentAtomCell row={row.original} onToggle={onToggleRow} />
+        ),
+      },
+      {
+        header: 'Atom numbers',
+        accessorKey: 'atomNumbers',
+        enableSorting: false,
+      },
+      {
+        header: 'Atom labels',
+        accessorKey: 'atomLabels',
+        enableSorting: false,
+      },
+    ]);
+  }, [onToggleRow]);
+
+  return (
+    <Container>
+      <TanStackTable
+        data={rows}
+        columns={columns}
+        style={{ flex: 1, minHeight: 0 }}
+        rowStyle={({ original }) => ({
+          base: {
+            backgroundColor: original.isExpanded ? '#f2f2f2' : 'white',
+          },
+        })}
+        emptyDataRowText="No atom groups to display"
+      />
+    </Container>
+  );
+}
diff --git a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
new file mode 100644
index 000000000..6b93cbccb
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
@@ -0,0 +1,198 @@
+import type { GroupedDiaID } from 'openchemlib-utils';
+
+import { sortAssignmentLabels } from '../MoleculesPanel/utilities/sortAssignmentLabels.js';
+
+/**
+ * Controls which atoms show their attached hydrogens in the table.
+ * - `true`: show hydrogens beneath every atom group.
+ * - `false`: hide all hydrogen rows.
+ * - A set of group IDs: show hydrogens only beneath the selected groups.
+ * Hydrogens without a matching parent remain visible unless this is `false`.
+ */
+export type AssignmentExpansion = boolean | ReadonlySet<string>;
+
+export interface AssignmentListRow {
+  id: string;
+  atomLabel: string;
+  atomNumbers: string;
+  atomLabels: string;
+  isHydrogen: boolean;
+  hasChildren: boolean;
+  isExpanded: boolean;
+}
+
+interface AssignmentRowOptions {
+  /**
+   * ID of the atom group this hydrogen row appears beneath.
+   */
+  parentOclId?: string;
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+}
+
+interface HydrogenPartition {
+  /**
+   * The attached hydrogen groups to display beneath each atom group.
+   */
+  hydrogensByParentOclId: Map<string, GroupedDiaID[]>;
+  /**
+   * Hydrogen groups that could not be matched to an atom group.
+   */
+  unattachedHydrogens: GroupedDiaID[];
+}
+
+function isHydrogenGroup(group: GroupedDiaID): boolean {
+  return group.atomLabel === 'H';
+}
+
+function compareByFirstAtomIndex(a: GroupedDiaID, b: GroupedDiaID): number {
+  // Keep groups in molecule order using the first atom number in each group.
+  return a.atoms[0] - b.atoms[0];
+}
+
+function compareNumbers(a: number, b: number): number {
+  return a - b;
+}
+
+function isGroupExpanded(
+  expansion: AssignmentExpansion,
+  parentOclId: string,
+): boolean {
+  return typeof expansion === 'boolean'
+    ? expansion
+    : expansion.has(parentOclId);
+}
+
+function toAssignmentRow(
+  group: GroupedDiaID,
+  options: AssignmentRowOptions = {},
+): AssignmentListRow {
+  const { parentOclId, hasChildren = false, isExpanded = false } = options;
+
+  return {
+    // Include the parent ID so the same hydrogen group can appear under different parents.
+    id: parentOclId ? `${parentOclId}:${group.oclID}` : group.oclID,
+    atomLabel: group.atomLabel,
+    atomNumbers: group.atoms.toSorted(compareNumbers).join(','),
+    atomLabels: sortAssignmentLabels(group.customLabels).join(','),
+    isHydrogen: isHydrogenGroup(group),
+    hasChildren,
+    isExpanded,
+  };
+}
+
+/**
+ * Find which atom group each hydrogen group belongs beneath.
+ * A "heavy atom" means any atom other than hydrogen.
+ *
+ * Use the molecule's atom numbers to find attachments.
+ * First record the group containing each heavy atom, then use that record to place the hydrogens without repeated searches.
+ * Each heavy atom is expected to belong to only one group.
+ */
+function partitionHydrogenGroups(
+  heavyAtomGroups: readonly GroupedDiaID[],
+  hydrogenGroups: readonly GroupedDiaID[],
+): HydrogenPartition {
+  const heavyGroupByAtomIndex = new Map<number, GroupedDiaID>();
+  for (const heavyGroup of heavyAtomGroups) {
+    for (const atomIndex of heavyGroup.atoms) {
+      heavyGroupByAtomIndex.set(atomIndex, heavyGroup);
+    }
+  }
+
+  const hydrogensByParentOclId = new Map<string, GroupedDiaID[]>();
+  const unattachedHydrogens: GroupedDiaID[] = [];
+
+  for (const hydrogenGroup of hydrogenGroups) {
+    // Several attached atoms may share one group; show its hydrogen row only once.
+    const parentGroups = new Set<GroupedDiaID>();
+    for (const heavyAtomIndex of hydrogenGroup.heavyAtoms) {
+      const parentGroup = heavyGroupByAtomIndex.get(heavyAtomIndex);
+      if (parentGroup) parentGroups.add(parentGroup);
+    }
+
+    if (parentGroups.size === 0) {
+      unattachedHydrogens.push(hydrogenGroup);
+      continue;
+    }
+
+    for (const parentGroup of parentGroups) {
+      const siblings = hydrogensByParentOclId.get(parentGroup.oclID);
+      if (siblings) {
+        siblings.push(hydrogenGroup);
+      } else {
+        hydrogensByParentOclId.set(parentGroup.oclID, [hydrogenGroup]);
+      }
+    }
+  }
+
+  return { hydrogensByParentOclId, unattachedHydrogens };
+}
+
+/**
+ * Prepare the rows shown in the assignment list.
+ *
+ * Input comes from `TopicMolecule.getGroupedDiastereotopicAtomIDs()`.
+ * Each group describes equivalent atoms that belong in the same table row:
+ * - `oclID`: the group's identifier.
+ * - `atomLabel`: the element symbol, such as C or H.
+ * - `atoms`: the atom numbers in this group, starting at zero.
+ * - `customLabels`: custom names assigned to these atoms, such as "3a".
+ * - `heavyAtoms`: for hydrogens, the numbers of the atoms they are attached to.
+ *
+ * The table lists each heavy-atom group, followed by its hydrogen groups when
+ * expanded.
+ * for example:
+ *   Input: carbon c1 contains atom 0, carbon c2 contains atom 1, and hydrogen group h1 contains atoms 2, 3, 4 attached to atom 0.
+ *   atomGroupsToAssignmentRows(groups, new Set(['c1']));
+ *  Output table:
+ *  Atom | Atom numbers
+ *  C    | 0
+ *    H  | 2,3,4
+ *  C    | 1
+ */
+export function atomGroupsToAssignmentRows(
+  groups: readonly GroupedDiaID[],
+  expansion: AssignmentExpansion,
+): AssignmentListRow[] {
+  // 1. Put groups in molecule order and separate hydrogens from other atoms.
+  const sortedGroups = groups.toSorted(compareByFirstAtomIndex);
+  const heavyAtomGroups = sortedGroups.filter(
+    (group) => !isHydrogenGroup(group),
+  );
+  const hydrogenGroups = sortedGroups.filter(isHydrogenGroup);
+
+  // 2. Find the parent groups for the hydrogens.
+  const { hydrogensByParentOclId, unattachedHydrogens } =
+    partitionHydrogenGroups(heavyAtomGroups, hydrogenGroups);
+
+  const rows: AssignmentListRow[] = [];
+
+  // 3. Add each parent, followed by its hydrogens if the row is expanded.
+  for (const parentGroup of heavyAtomGroups) {
+    const childHydrogens = hydrogensByParentOclId.get(parentGroup.oclID) ?? [];
+    const hasChildren = childHydrogens.length > 0;
+    const isExpanded =
+      hasChildren && isGroupExpanded(expansion, parentGroup.oclID);
+
+    rows.push(toAssignmentRow(parentGroup, { hasChildren, isExpanded }));
+
+    if (isExpanded) {
+      for (const hydrogenGroup of childHydrogens) {
+        rows.push(
+          toAssignmentRow(hydrogenGroup, { parentOclId: parentGroup.oclID }),
+        );
+      }
+    }
+  }
+
+  // Currently this case is not exits but it is a fallback for any unattached hydrogens.
+  // 4. Keep unmatched hydrogens at the end so they are not lost from the list.
+  if (expansion !== false) {
+    for (const hydrogenGroup of unattachedHydrogens) {
+      rows.push(toAssignmentRow(hydrogenGroup));
+    }
+  }
+
+  return rows;
+}
diff --git a/src/component/panels/Panels.tsx b/src/component/panels/Panels.tsx
index f68c09392..2a6e4964b 100644
--- a/src/component/panels/Panels.tsx
+++ b/src/component/panels/Panels.tsx
@@ -5,7 +5,9 @@ import { memo } from 'react';
 import { Accordion, Toolbar } from 'react-science/ui';
 
 import { usePreferences } from '../context/PreferencesContext.js';
+import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.js';
 
+import { AssignmentListPanel } from './AssignmentListPanel/AssignmentListPanel.js';
 import type { AccordionItem } from './accordionItems.js';
 import { useAccordionItems } from './hooks/useAccordionItems.js';
 import { useGetPanelOptions } from './hooks/useGetPanelOptions.js';
@@ -18,6 +20,7 @@ const Container = styled.div`
 `;
 
 function PanelsInner() {
+  const isExperimental = useCheckExperimentalFeature();
   const getPanelPreferences = useGetPanelOptions();
 
   const { dispatch } = usePreferences();
@@ -38,27 +41,41 @@ function PanelsInner() {
   return (
     <Container>
       <Accordion>
-        {displayedPanels.map((item) => {
-          const { title, component, id } = item;
-          return (
-            <Accordion.Item
-              unmountChildren
-              id={id}
-              key={title}
-              title={title}
-              open={isOpened(item)}
-              onOpenChange={(isOpened) => {
-                dispatch({
-                  type: 'TOGGLE_PANEL',
-                  payload: { id, options: { open: isOpened } },
-                });
-              }}
-              renderToolbar={() => <RightButtons id={id} />}
-            >
-              {component}
-            </Accordion.Item>
-          );
-        })}
+        {[
+          ...displayedPanels.map((item) => {
+            const { title, component, id } = item;
+            return (
+              <Accordion.Item
+                unmountChildren
+                id={id}
+                key={title}
+                title={title}
+                open={isOpened(item)}
+                onOpenChange={(isOpened) => {
+                  dispatch({
+                    type: 'TOGGLE_PANEL',
+                    payload: { id, options: { open: isOpened } },
+                  });
+                }}
+                renderToolbar={() => <RightButtons id={id} />}
+              >
+                {component}
+              </Accordion.Item>
+            );
+          }),
+          ...(isExperimental
+            ? [
+                <Accordion.Item
+                  key="assignment-list"
+                  id="assignment-list"
+                  title="Assignment list"
+                  unmountChildren
+                >
+                  <AssignmentListPanel />
+                </Accordion.Item>,
+              ]
+            : []),
+        ]}
       </Accordion>
     </Container>
   );

From 929d0e854263df0ed4993328b2d7b68206abb806 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Tue, 20 Oct 2026 13:54:20 +0200
Subject: [PATCH 02/22] refactor: support custom row highlight IDs in
 TanStackTable

---
 .../elements/tanstack_table/elements/table_row.tsx          | 6 +++++-
 src/component/elements/tanstack_table/table.tsx             | 2 ++
 src/component/elements/tanstack_table/types.ts              | 2 ++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/component/elements/tanstack_table/elements/table_row.tsx b/src/component/elements/tanstack_table/elements/table_row.tsx
index f1c42e1e5..3fb252eb5 100644
--- a/src/component/elements/tanstack_table/elements/table_row.tsx
+++ b/src/component/elements/tanstack_table/elements/table_row.tsx
@@ -103,6 +103,7 @@ export default function TableRow<TData extends TanStackRowData>(
     table,
     highlightedSource = 'UNKNOWN',
     getHighlightExtra,
+    getHighlightIDs,
     onContextMenuSelect,
     contextMenu,
     onClick,
@@ -121,7 +122,10 @@ export default function TableRow<TData extends TanStackRowData>(
       }) as HighlightEventSource,
     [highlightedSource, row.original, getHighlightExtra],
   );
-  const highlight = useHighlight(getIDs(row), data);
+  const highlight = useHighlight(
+    getHighlightIDs?.(row.original) ?? getIDs(row),
+    data,
+  );
 
   useEffect(() => {
     return () => {
diff --git a/src/component/elements/tanstack_table/table.tsx b/src/component/elements/tanstack_table/table.tsx
index 81d15754d..d11500fb9 100644
--- a/src/component/elements/tanstack_table/table.tsx
+++ b/src/component/elements/tanstack_table/table.tsx
@@ -118,6 +118,7 @@ function TanStackTableInner<TData extends TanStackRowData>(
     columns,
     highlightedSource,
     getHighlightExtra,
+    getHighlightIDs,
     contextMenu = [],
     onContextMenuSelect,
     onScroll,
@@ -265,6 +266,7 @@ function TanStackTableInner<TData extends TanStackRowData>(
               const highlightSourceProps = {
                 highlightedSource,
                 getHighlightExtra,
+                getHighlightIDs,
               } as TanStackTableHighlightSourceProps<TData>;
 
               return (
diff --git a/src/component/elements/tanstack_table/types.ts b/src/component/elements/tanstack_table/types.ts
index 2443d3693..4e8b8974f 100644
--- a/src/component/elements/tanstack_table/types.ts
+++ b/src/component/elements/tanstack_table/types.ts
@@ -44,6 +44,8 @@ export type TanStackTableHeaderGroup<TData extends TanStackRowData> =
   HeaderGroup<TanStackTableFeatures, TData>;
 
 export type TanStackTableHighlightSourceProps<TData extends TanStackRowData> = {
+  getHighlightIDs?: (row: TData) => string[];
+} & {
   [K in HighlightEventSourceType]: HighlightEventSourceExtra<K> extends never
     ? { highlightedSource?: K; getHighlightExtra?: never }
     : {

From 7f3ec641ced352275d531b8f7b137312dcb53906 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Tue, 20 Oct 2026 14:03:30 +0200
Subject: [PATCH 03/22] refactor: extract reusable ACS formatting options
 helper

---
 .../hooks/use_publication_strings.ts          | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/component/hooks/use_publication_strings.ts b/src/component/hooks/use_publication_strings.ts
index 17310a45d..4a1117ec2 100644
--- a/src/component/hooks/use_publication_strings.ts
+++ b/src/component/hooks/use_publication_strings.ts
@@ -1,4 +1,8 @@
-import type { ACSExportOptions, Spectrum } from '@zakodium/nmrium-core';
+import type {
+  ACSExportOptions,
+  Spectrum1D,
+  Spectrum,
+} from '@zakodium/nmrium-core';
 import { assertSpectrum1D, isSpectrum1D } from '@zakodium/nmrium-core';
 import type { RangesToACSOptions } from 'nmr-processing';
 import { rangesToACS } from 'nmr-processing';
@@ -39,8 +43,7 @@ export function buildPublicationString(options: BuildPublicationStringOptions) {
     info,
     ranges: { values },
   } = spectrum;
-  const { originFrequency, nucleus } = info;
-  const { signalKind, format, couplingFormat, ...otherOptions } = acs;
+  const { signalKind } = acs;
 
   const ranges =
     signalKind === 'all'
@@ -49,7 +52,16 @@ export function buildPublicationString(options: BuildPublicationStringOptions) {
           range.signals?.some((signal) => signal.kind === 'signal'),
         );
 
-  const rangesToACSOptions: RangesToACSOptions = {
+  return rangesToACS(ranges, getRangesToACSOptions(info, acs));
+}
+
+export function getRangesToACSOptions(
+  info: Pick<Spectrum1D['info'], 'nucleus' | 'originFrequency'>,
+  acs: ACSExportOptions,
+): RangesToACSOptions {
+  const { originFrequency, nucleus } = info;
+  const { signalKind, format, couplingFormat, ...otherOptions } = acs;
+  const options: RangesToACSOptions = {
     nucleus,
     observedFrequency: originFrequency,
     ...otherOptions,
@@ -57,9 +69,9 @@ export function buildPublicationString(options: BuildPublicationStringOptions) {
   };
 
   if (format !== 'D') {
-    rangesToACSOptions.format = format;
-    rangesToACSOptions.couplingFormat = couplingFormat;
+    options.format = format;
+    options.couplingFormat = couplingFormat;
   }
 
-  return rangesToACS(ranges, rangesToACSOptions);
+  return options;
 }

From 1e5192ffb3fffd3cb97f93390b53c5e1bf5c2035 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Tue, 20 Oct 2026 14:23:44 +0200
Subject: [PATCH 04/22] feat: display per-spectrum chemical shifts in
 assignment table

- Look up assigned 1D signals by OCL ID and group them by spectrum
- Include attached hydrogen assignments in heavy-atom summaries
- Format heavy-atom rows with ACS and hydrogen rows as shifts
- Add spectrum headers with color, nucleus, and full name tooltips
---
 src/component/highlight/index.tsx             |   1 +
 .../AssignmentChemicalShiftCell.tsx           |  56 ++++++
 .../AssignmentListPanel.tsx                   |   7 +-
 .../MoleculeAssignmentTable.tsx               | 115 ++++++++++-
 .../AssignmentListPanel/assignmentSignals.ts  | 187 ++++++++++++++++++
 .../atomGroupsToAssignmentRows.ts             |  31 ++-
 .../hooks/useAtomAssignment.tsx               |   4 +
 7 files changed, 390 insertions(+), 11 deletions(-)
 create mode 100644 src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
 create mode 100644 src/component/panels/AssignmentListPanel/assignmentSignals.ts

diff --git a/src/component/highlight/index.tsx b/src/component/highlight/index.tsx
index 0287be9f5..87995d3b9 100644
--- a/src/component/highlight/index.tsx
+++ b/src/component/highlight/index.tsx
@@ -36,6 +36,7 @@ interface HighlightEventSourceMap {
   MULTIPLE_ANALYSIS_ZONE: { colKey: string };
   DATABASE: { ranges: Range[]; jcampURL: string; baseURL: string };
   ATOM: never;
+  ASSIGNMENT_TABLE: never;
   UNKNOWN: never;
 }
 
diff --git a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
new file mode 100644
index 000000000..0ab7102f9
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
@@ -0,0 +1,56 @@
+import { useACSSettings } from '../../hooks/use_acs_settings.js';
+
+import type {
+  AssignmentSignals,
+  GetAssignmentSignalsOptions,
+} from './assignmentSignals.js';
+import {
+  formatAssignmentSignals,
+  getAssignmentSignals,
+} from './assignmentSignals.js';
+
+interface AssignmentShiftLineProps {
+  assignment: AssignmentSignals;
+  shiftsOnly: boolean;
+}
+
+function AssignmentShiftLine(options: AssignmentShiftLineProps) {
+  const { assignment, shiftsOnly } = options;
+  const { spectrum } = assignment;
+  const acs = useACSSettings(spectrum.info.nucleus);
+  const value = formatAssignmentSignals({
+    assignment,
+    acs,
+    format: shiftsOnly ? 'shifts' : 'acs',
+  });
+
+  return (
+    <div>
+      {shiftsOnly ? (
+        <span>{value} ppm</span>
+      ) : (
+        // eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml
+        <div dangerouslySetInnerHTML={{ __html: value }} />
+      )}
+    </div>
+  );
+}
+
+interface AssignmentChemicalShiftCellProps {
+  options: GetAssignmentSignalsOptions;
+}
+
+export function AssignmentChemicalShiftCell(
+  props: AssignmentChemicalShiftCellProps,
+) {
+  const { options } = props;
+  const assignments = getAssignmentSignals(options);
+
+  return assignments.map((assignment) => (
+    <AssignmentShiftLine
+      key={assignment.spectrum.id}
+      assignment={assignment}
+      shiftsOnly={options.row.isHydrogen}
+    />
+  ));
+}
diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
index 331dfa5c4..00d2bad65 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
@@ -144,10 +144,6 @@ export function AssignmentListPanel() {
   }
 
   const { molecule } = activeAssignment;
-  const rows = atomGroupsToAssignmentRows(
-    activeAssignment.groups,
-    expansion.expandedGroups,
-  );
 
   return (
     <Container>
@@ -174,7 +170,8 @@ export function AssignmentListPanel() {
       <TableContainer>
         <MoleculeAssignmentTable
           key={molecule.id}
-          rows={rows}
+          groups={activeAssignment.groups}
+          expandedGroups={expansion.expandedGroups}
           onToggleRow={expansion.toggleRow}
         />
       </TableContainer>
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index 23c81dcbe..d3eb55ca2 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -1,21 +1,71 @@
+import { Tooltip } from '@blueprintjs/core';
 import styled from '@emotion/styled';
+import type { Spectrum1D } from '@zakodium/nmrium-core';
+import { isSpectrum1D } from '@zakodium/nmrium-core';
+import type { GroupedDiaID } from 'openchemlib-utils';
 import { useMemo } from 'react';
 
+import { useChartData } from '../../context/ChartContext.js';
+import IsotopesViewer from '../../elements/IsotopesViewer.js';
 import {
   TanStackTable,
   createTanStackColumnHelper,
 } from '../../elements/tanstack_table/index.js';
 
 import { AssignmentAtomCell } from './AssignmentAtomCell.js';
+import { AssignmentChemicalShiftCell } from './AssignmentChemicalShiftCell.js';
+import { getSignalsByOclID } from './assignmentSignals.js';
 import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
+import {
+  atomGroupsToAssignmentRows,
+  getHydrogenIDsByParent,
+} from './atomGroupsToAssignmentRows.js';
 
 interface MoleculeAssignmentTableProps {
-  rows: AssignmentListRow[];
+  groups: GroupedDiaID[];
+  expandedGroups: ReadonlySet<string>;
   onToggleRow: (id: string) => void;
 }
 
 const columnHelper = createTanStackColumnHelper<AssignmentListRow>();
 
+/**
+ * Select visible rows from the complete hierarchy and update expansion flags.
+ * rows with no parent or whose parent is expanded remain visible.
+ */
+export function getVisibleAssignmentRows(
+  allRows: readonly AssignmentListRow[],
+  expandedGroups: ReadonlySet<string>,
+): AssignmentListRow[] {
+  const rows: AssignmentListRow[] = [];
+  for (const row of allRows) {
+    if (row.parentOclId !== undefined && !expandedGroups.has(row.parentOclId)) {
+      continue;
+    }
+    rows.push(
+      row.hasChildren
+        ? { ...row, isExpanded: expandedGroups.has(row.id) }
+        : row,
+    );
+  }
+  return rows;
+}
+
+const SpectrumHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  white-space: nowrap;
+`;
+
+const SpectrumColor = styled.span`
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  border-radius: 50%;
+`;
+
 const Container = styled.section`
   display: flex;
   flex-direction: column;
@@ -35,8 +85,42 @@ const Container = styled.section`
   }
 `;
 
+interface SpectrumColumnHeaderProps {
+  spectrum: Spectrum1D;
+}
+
+function SpectrumColumnHeader({ spectrum }: SpectrumColumnHeaderProps) {
+  return (
+    <Tooltip
+      content={spectrum.info.name || spectrum.id}
+      renderTarget={({ isOpen, ...targetProps }) => (
+        <SpectrumHeader {...targetProps}>
+          <SpectrumColor style={{ backgroundColor: spectrum.display.color }} />
+          <IsotopesViewer value={spectrum.info.nucleus} />
+          <span>&delta;</span>
+        </SpectrumHeader>
+      )}
+    />
+  );
+}
+
 export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
-  const { rows, onToggleRow } = props;
+  const { groups, expandedGroups, onToggleRow } = props;
+  const { data } = useChartData();
+  const spectra = useMemo(() => data.filter(isSpectrum1D), [data]);
+  const signalsByOclID = useMemo(() => getSignalsByOclID(spectra), [spectra]);
+  const allRows = useMemo(
+    () => atomGroupsToAssignmentRows(groups, true),
+    [groups],
+  );
+  const hydrogenIDsByParent = useMemo(
+    () => getHydrogenIDsByParent(allRows),
+    [allRows],
+  );
+  const rows = useMemo(
+    () => getVisibleAssignmentRows(allRows, expandedGroups),
+    [allRows, expandedGroups],
+  );
   const columns = useMemo(() => {
     return columnHelper.columns([
       {
@@ -58,14 +142,39 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
         accessorKey: 'atomLabels',
         enableSorting: false,
       },
+      ...spectra.flatMap((spectrum) =>
+        columnHelper.columns([
+          {
+            header: () => <SpectrumColumnHeader spectrum={spectrum} />,
+            id: spectrum.id,
+            enableSorting: false,
+            cell: ({ row }) => (
+              <AssignmentChemicalShiftCell
+                options={{
+                  row: row.original,
+                  hydrogenIDsByParent,
+                  signalsByOclID,
+                  spectrumId: spectrum.id,
+                }}
+              />
+            ),
+          },
+        ]),
+      ),
     ]);
-  }, [onToggleRow]);
+  }, [onToggleRow, signalsByOclID, spectra, hydrogenIDsByParent]);
+
+  function getHighlightIDs(row: AssignmentListRow): string[] {
+    return [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];
+  }
 
   return (
     <Container>
       <TanStackTable
         data={rows}
         columns={columns}
+        getHighlightIDs={getHighlightIDs}
+        highlightedSource="ASSIGNMENT_TABLE"
         style={{ flex: 1, minHeight: 0 }}
         rowStyle={({ original }) => ({
           base: {
diff --git a/src/component/panels/AssignmentListPanel/assignmentSignals.ts b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
new file mode 100644
index 000000000..14747a3f9
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
@@ -0,0 +1,187 @@
+import type { Range, Signal1D } from '@zakodium/nmr-types';
+import type {
+  ACSExportOptions,
+  Spectrum1D,
+  Spectrum,
+} from '@zakodium/nmrium-core';
+import { isSpectrum1D } from '@zakodium/nmrium-core';
+import { rangesToACS } from 'nmr-processing';
+
+import { getRangesToACSOptions } from '../../hooks/use_publication_strings.js';
+import { formatNumber } from '../../utility/formatNumber.js';
+
+import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
+
+interface AssignmentSpectrum {
+  id: string;
+  info: Pick<Spectrum1D['info'], 'nucleus' | 'originFrequency'>;
+}
+
+export interface AssignedSignal {
+  spectrum: AssignmentSpectrum;
+  range: Range;
+  signal: Signal1D;
+}
+
+export type SignalsByOclID = ReadonlyMap<string, readonly AssignedSignal[]>;
+
+/**
+ * Build a lookup of assigned 1D signals using the OCL IDs in `signal.diaIDs`.
+ *
+ * @returns A map from each OCL ID to its signals and original range references.
+ * Only the spectrum ID, nucleus, and frequency are retained in a shared metadata
+ * object.
+ *
+ * Notes:
+ * 1. Unassigned signals are omitted.
+ * 2. Repeated IDs within a signal occur once.
+ */
+export function getSignalsByOclID(spectra: Spectrum[]): SignalsByOclID {
+  const signalsByOclID = new Map<string, AssignedSignal[]>();
+  for (const spectrum of spectra) {
+    if (!isSpectrum1D(spectrum)) continue;
+    const assignmentSpectrum: AssignmentSpectrum = {
+      id: spectrum.id,
+      info: {
+        nucleus: spectrum.info.nucleus,
+        originFrequency: spectrum.info.originFrequency,
+      },
+    };
+    for (const range of spectrum.ranges.values) {
+      for (const signal of range.signals) {
+        const entry = { spectrum: assignmentSpectrum, range, signal };
+        for (const oclID of new Set(signal.diaIDs)) {
+          const entries = signalsByOclID.get(oclID);
+          if (entries) {
+            entries.push(entry);
+          } else {
+            signalsByOclID.set(oclID, [entry]);
+          }
+        }
+      }
+    }
+  }
+  return signalsByOclID;
+}
+
+export interface AssignmentSignals {
+  spectrum: AssignmentSpectrum;
+  entries: AssignedSignal[];
+}
+
+export interface GetAssignmentSignalsOptions {
+  row: AssignmentListRow;
+  signalsByOclID: SignalsByOclID;
+  hydrogenIDsByParent: ReadonlyMap<string, readonly string[]>;
+  spectrumId?: string;
+}
+
+/**
+ * Collect a row's signals and those of its attached hydrogen groups.
+ *
+ * @param options - The row (`row.id` is its OCL ID), signal lookup, precomputed
+ * parent-to-hydrogen lookup, and optional spectrum ID to restrict the results.
+ * @returns One group per matching spectrum, with duplicate entries removed when
+ * the same signal matches several OCL IDs.
+ */
+export function getAssignmentSignals(
+  options: GetAssignmentSignalsOptions,
+): AssignmentSignals[] {
+  const { row, signalsByOclID, hydrogenIDsByParent, spectrumId } = options;
+  const oclIDs = [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];
+  const signalsBySpectrum = new Map<
+    string,
+    { spectrum: AssignmentSpectrum; signals: Set<AssignedSignal> }
+  >();
+
+  for (const oclID of oclIDs) {
+    for (const entry of signalsByOclID.get(oclID) ?? []) {
+      if (spectrumId !== undefined && entry.spectrum.id !== spectrumId) {
+        continue;
+      }
+      let group = signalsBySpectrum.get(entry.spectrum.id);
+
+      if (!group) {
+        group = { spectrum: entry.spectrum, signals: new Set() };
+        signalsBySpectrum.set(entry.spectrum.id, group);
+      }
+      group.signals.add(entry);
+    }
+  }
+
+  return Array.from(signalsBySpectrum.values(), (group) => {
+    const entries = Array.from(group.signals);
+    return {
+      spectrum: group.spectrum,
+      entries,
+    };
+  });
+}
+
+interface FormatAssignmentSignalsOptions {
+  assignment: AssignmentSignals;
+  acs: ACSExportOptions;
+  format: 'shifts' | 'acs';
+}
+
+/**
+ * Format one spectrum's collected assignments for a chemical-shift cell.
+ *
+ * @returns A comma-separated shift string without units, or the HTML returned by
+ * `rangesToACS`
+ *
+ */
+export function formatAssignmentSignals(
+  options: FormatAssignmentSignalsOptions,
+): string {
+  const { assignment, acs, format } = options;
+  const { spectrum, entries } = assignment;
+  if (format === 'shifts') {
+    return formatChemicalShifts({ entries, acs });
+  }
+
+  return rangesToACS(getAssignedRanges(entries), {
+    ...getRangesToACSOptions(spectrum.info, acs),
+    filter: false,
+  });
+}
+
+interface formatChemicalShiftsOptions extends Pick<
+  AssignmentSignals,
+  'entries'
+> {
+  acs: ACSExportOptions;
+}
+
+/**
+ * Sort and format signal deltas without adding spectrum details or units.
+ * @returns Shift values joined with ', '
+ */
+function formatChemicalShifts(options: formatChemicalShiftsOptions) {
+  const { entries, acs } = options;
+
+  return entries
+    .map(({ signal }) => signal.delta)
+    .toSorted((a, b) => (acs.ascending ? a - b : b - a))
+    .map((delta) => formatNumber(delta, acs.deltaFormat))
+    .join(', ');
+}
+
+/**
+ * Rebuild the selected ranges with only the collected signals.
+ */
+function getAssignedRanges(entries: AssignedSignal[]): Range[] {
+  const signalsByRange = new Map<Range, Signal1D[]>();
+  for (const { range, signal } of entries) {
+    const signals = signalsByRange.get(range);
+    if (signals) {
+      signals.push(signal);
+    } else {
+      signalsByRange.set(range, [signal]);
+    }
+  }
+  return Array.from(signalsByRange, ([range, signals]) => ({
+    ...range,
+    signals,
+  }));
+}
diff --git a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
index 6b93cbccb..9178a8d5e 100644
--- a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
+++ b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
@@ -12,7 +12,11 @@ import { sortAssignmentLabels } from '../MoleculesPanel/utilities/sortAssignment
 export type AssignmentExpansion = boolean | ReadonlySet<string>;
 
 export interface AssignmentListRow {
+  /**
+   * The atom group's oclID, used to look up signal assignments.
+   */
   id: string;
+  parentOclId?: string;
   atomLabel: string;
   atomNumbers: string;
   atomLabels: string;
@@ -30,6 +34,22 @@ interface AssignmentRowOptions {
   isExpanded?: boolean;
 }
 
+export function getHydrogenIDsByParent(
+  rows: readonly AssignmentListRow[],
+): ReadonlyMap<string, readonly string[]> {
+  const hydrogenIDsByParent = new Map<string, string[]>();
+  for (const row of rows) {
+    if (row.parentOclId === undefined) continue;
+    const hydrogenIDs = hydrogenIDsByParent.get(row.parentOclId);
+    if (hydrogenIDs) {
+      hydrogenIDs.push(row.id);
+    } else {
+      hydrogenIDsByParent.set(row.parentOclId, [row.id]);
+    }
+  }
+  return hydrogenIDsByParent;
+}
+
 interface HydrogenPartition {
   /**
    * The attached hydrogen groups to display beneath each atom group.
@@ -70,8 +90,8 @@ function toAssignmentRow(
   const { parentOclId, hasChildren = false, isExpanded = false } = options;
 
   return {
-    // Include the parent ID so the same hydrogen group can appear under different parents.
-    id: parentOclId ? `${parentOclId}:${group.oclID}` : group.oclID,
+    id: group.oclID,
+    parentOclId,
     atomLabel: group.atomLabel,
     atomNumbers: group.atoms.toSorted(compareNumbers).join(','),
     atomLabels: sortAssignmentLabels(group.customLabels).join(','),
@@ -175,7 +195,12 @@ export function atomGroupsToAssignmentRows(
     const isExpanded =
       hasChildren && isGroupExpanded(expansion, parentGroup.oclID);
 
-    rows.push(toAssignmentRow(parentGroup, { hasChildren, isExpanded }));
+    rows.push(
+      toAssignmentRow(parentGroup, {
+        hasChildren,
+        isExpanded,
+      }),
+    );
 
     if (isExpanded) {
       for (const hydrogenGroup of childHydrogens) {
diff --git a/src/component/panels/MoleculesPanel/hooks/useAtomAssignment.tsx b/src/component/panels/MoleculesPanel/hooks/useAtomAssignment.tsx
index 1a225492c..78d4b41ae 100644
--- a/src/component/panels/MoleculesPanel/hooks/useAtomAssignment.tsx
+++ b/src/component/panels/MoleculesPanel/hooks/useAtomAssignment.tsx
@@ -102,6 +102,10 @@ export default function useAtomAssignment() {
   const currentDiaIDsToHighlight = useMemo(() => {
     const { highlighted, sourceData } = highlightData.highlight;
 
+    if (sourceData?.type === 'ASSIGNMENT_TABLE') {
+      return highlighted;
+    }
+
     let currentSpectrum = spectrum;
 
     if (

From e87ce69243d88efbeb6744978e0d2558c592bfbc Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Tue, 20 Oct 2026 14:55:54 +0200
Subject: [PATCH 05/22] refactor: align assignment panel layout with other
 panels

- Replace molecule tabs with a dropdown shown only for multiple molecules
---
 .../AssignmentListPanel.tsx                   | 88 +++++++++----------
 .../MoleculeAssignmentTable.tsx               | 48 +++-------
 2 files changed, 57 insertions(+), 79 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
index 00d2bad65..d66d3da52 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
@@ -1,49 +1,49 @@
-import { Switch, Tab, Tabs } from '@blueprintjs/core';
+import { Switch } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { Molecule } from 'openchemlib';
 import type { GroupedDiaID } from 'openchemlib-utils';
 import { TopicMolecule } from 'openchemlib-utils';
-import { useId, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
+import { PanelHeader } from 'react-science/ui';
 
 import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
 import { useChartData } from '../../context/ChartContext.js';
 import { EmptyText } from '../../elements/EmptyText.js';
+import Select from '../../elements/Select.js';
+import { TablePanel } from '../extra/BasicPanelStyle.js';
 
 import { MoleculeAssignmentTable } from './MoleculeAssignmentTable.js';
 import { atomGroupsToAssignmentRows } from './atomGroupsToAssignmentRows.js';
 
-const Container = styled.div`
+const HeaderControls = styled.div`
   display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  box-sizing: border-box;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-start;
   gap: 8px;
-  padding: 8px;
-  overflow: hidden;
-
-  > :not(:last-child) {
-    flex-shrink: 0;
-  }
+  min-height: 0;
+  min-width: 0;
+  padding: 4px;
 
-  [role='tablist'] {
-    overflow-x: auto;
+  label {
     flex-shrink: 0;
+    white-space: nowrap;
   }
 `;
 
-const TableContainer = styled.div`
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-`;
-
 interface MoleculeAssignmentData {
   molecule: StateMoleculeExtended;
   groups: GroupedDiaID[];
   expandableGroupIds: string[];
 }
 
+function getMoleculeOptions(moleculeAssignments: MoleculeAssignmentData[]) {
+  return moleculeAssignments.map(({ molecule }) => ({
+    value: molecule.id,
+    label: molecule.label,
+  }));
+}
+
 function toggleExpandedRows(
   expandedRows: ReadonlySet<string>,
   keys: readonly string[],
@@ -134,7 +134,6 @@ function useAssignmentExpansion(
 
 export function AssignmentListPanel() {
   const { molecules } = useChartData();
-  const tabsId = useId();
   const { moleculeAssignments, activeAssignment, selectMolecule } =
     useMoleculeAssignments(molecules);
   const expansion = useAssignmentExpansion(activeAssignment);
@@ -146,35 +145,34 @@ export function AssignmentListPanel() {
   const { molecule } = activeAssignment;
 
   return (
-    <Container>
-      <Tabs
-        id={tabsId}
-        selectedTabId={molecule.id}
-        onChange={(id: string) => selectMolecule(id)}
-      >
-        {moleculeAssignments.map(({ molecule: tabMolecule }) => (
-          <Tab
-            key={tabMolecule.id}
-            id={tabMolecule.id}
-            title={tabMolecule.label}
+    <TablePanel>
+      <PanelHeader>
+        <HeaderControls>
+          {moleculeAssignments.length > 1 && (
+            <Select
+              items={getMoleculeOptions(moleculeAssignments)}
+              value={molecule.id}
+              onChange={selectMolecule}
+              style={{ width: 140 }}
+            />
+          )}
+          <Switch
+            label="Expand all"
+            checked={expansion.allExpanded}
+            disabled={!expansion.canExpand}
+            onChange={expansion.toggleAllRows}
+            style={{ marginBottom: 0 }}
           />
-        ))}
-      </Tabs>
-      <Switch
-        label="Expand all"
-        checked={expansion.allExpanded}
-        disabled={!expansion.canExpand}
-        onChange={expansion.toggleAllRows}
-        style={{ marginBottom: 0 }}
-      />
-      <TableContainer>
+        </HeaderControls>
+      </PanelHeader>
+      <div className="inner-container">
         <MoleculeAssignmentTable
           key={molecule.id}
           groups={activeAssignment.groups}
           expandedGroups={expansion.expandedGroups}
           onToggleRow={expansion.toggleRow}
         />
-      </TableContainer>
-    </Container>
+      </div>
+    </TablePanel>
   );
 }
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index d3eb55ca2..ed9e54513 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -66,25 +66,6 @@ const SpectrumColor = styled.span`
   border-radius: 50%;
 `;
 
-const Container = styled.section`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-
-  table {
-    border-top: 0;
-  }
-
-  table thead th {
-    background-color: #e0e0e0;
-    color: #333;
-    border-bottom-color: #bdbdbd;
-    box-shadow: inset 0 1px 0 #bdbdbd;
-    z-index: 1;
-  }
-`;
-
 interface SpectrumColumnHeaderProps {
   spectrum: Spectrum1D;
 }
@@ -169,20 +150,19 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
   }
 
   return (
-    <Container>
-      <TanStackTable
-        data={rows}
-        columns={columns}
-        getHighlightIDs={getHighlightIDs}
-        highlightedSource="ASSIGNMENT_TABLE"
-        style={{ flex: 1, minHeight: 0 }}
-        rowStyle={({ original }) => ({
-          base: {
-            backgroundColor: original.isExpanded ? '#f2f2f2' : 'white',
-          },
-        })}
-        emptyDataRowText="No atom groups to display"
-      />
-    </Container>
+    <TanStackTable
+      data={rows}
+      columns={columns}
+      getHighlightIDs={getHighlightIDs}
+      highlightedSource="ASSIGNMENT_TABLE"
+      style={{ height: '100%' }}
+      rowStyle={({ original }) => ({
+        base: {
+          backgroundColor:
+            !original.isHydrogen && original.isExpanded ? '#f2f2f2' : 'white',
+        },
+      })}
+      emptyDataRowText="No atom groups to display"
+    />
   );
 }

From ff669937762dd4e76c1fb8d8ea655e771dd7e1ef Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Tue, 20 Oct 2026 14:58:08 +0200
Subject: [PATCH 06/22] chore: remove useless export

---
 .../panels/AssignmentListPanel/MoleculeAssignmentTable.tsx      | 2 +-
 src/component/panels/AssignmentListPanel/assignmentSignals.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index ed9e54513..e04553447 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -33,7 +33,7 @@ const columnHelper = createTanStackColumnHelper<AssignmentListRow>();
  * Select visible rows from the complete hierarchy and update expansion flags.
  * rows with no parent or whose parent is expanded remain visible.
  */
-export function getVisibleAssignmentRows(
+function getVisibleAssignmentRows(
   allRows: readonly AssignmentListRow[],
   expandedGroups: ReadonlySet<string>,
 ): AssignmentListRow[] {
diff --git a/src/component/panels/AssignmentListPanel/assignmentSignals.ts b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
index 14747a3f9..bc9de98d9 100644
--- a/src/component/panels/AssignmentListPanel/assignmentSignals.ts
+++ b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
@@ -17,7 +17,7 @@ interface AssignmentSpectrum {
   info: Pick<Spectrum1D['info'], 'nucleus' | 'originFrequency'>;
 }
 
-export interface AssignedSignal {
+interface AssignedSignal {
   spectrum: AssignmentSpectrum;
   range: Range;
   signal: Signal1D;

From b9ed0435f0860e114fb390174a05ba839a1193b7 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Tue, 20 Oct 2026 15:23:33 +0200
Subject: [PATCH 07/22] fix: remove spectrum header and trailing period from
 assignment ACS cells

---
 .../panels/AssignmentListPanel/assignmentSignals.ts      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/assignmentSignals.ts b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
index bc9de98d9..93858f48e 100644
--- a/src/component/panels/AssignmentListPanel/assignmentSignals.ts
+++ b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
@@ -127,8 +127,8 @@ interface FormatAssignmentSignalsOptions {
 /**
  * Format one spectrum's collected assignments for a chemical-shift cell.
  *
- * @returns A comma-separated shift string without units, or the HTML returned by
- * `rangesToACS`
+ * @returns A comma-separated shift string without units, or ACS HTML without
+ * the spectrum header and final period.
  *
  */
 export function formatAssignmentSignals(
@@ -140,10 +140,13 @@ export function formatAssignmentSignals(
     return formatChemicalShifts({ entries, acs });
   }
 
-  return rangesToACS(getAssignedRanges(entries), {
+  const acsString = rangesToACS(getAssignedRanges(entries), {
     ...getRangesToACSOptions(spectrum.info, acs),
     filter: false,
   });
+
+  // "1H NMR (600 MHz): δ 4.04 (d)." becomes "δ 4.04 (d)".
+  return acsString.replaceAll(/^[^:]*:\s*|\.$/g, '');
 }
 
 interface formatChemicalShiftsOptions extends Pick<

From 8aae653ebe44ae8bc81c8db25a09cda91206397a Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Wed, 21 Oct 2026 09:07:36 +0200
Subject: [PATCH 08/22] refactor: apply default ACS options to assignment
 shifts

---
 .../AssignmentChemicalShiftCell.tsx            | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
index 0ab7102f9..4ec72215f 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
@@ -1,3 +1,5 @@
+import type { ACSExportOptions } from '@zakodium/nmrium-core';
+
 import { useACSSettings } from '../../hooks/use_acs_settings.js';
 
 import type {
@@ -14,13 +16,23 @@ interface AssignmentShiftLineProps {
   shiftsOnly: boolean;
 }
 
-function AssignmentShiftLine(options: AssignmentShiftLineProps) {
+const acsOptions: Partial<ACSExportOptions> = {
+  signalKind: 'signal',
+  ascending: true,
+  format: 'IMJ',
+  textStyle: {},
+};
+
+function AssignmentShift(options: AssignmentShiftLineProps) {
   const { assignment, shiftsOnly } = options;
   const { spectrum } = assignment;
   const acs = useACSSettings(spectrum.info.nucleus);
   const value = formatAssignmentSignals({
     assignment,
-    acs,
+    acs: {
+      ...acs,
+      ...acsOptions,
+    },
     format: shiftsOnly ? 'shifts' : 'acs',
   });
 
@@ -47,7 +59,7 @@ export function AssignmentChemicalShiftCell(
   const assignments = getAssignmentSignals(options);
 
   return assignments.map((assignment) => (
-    <AssignmentShiftLine
+    <AssignmentShift
       key={assignment.spectrum.id}
       assignment={assignment}
       shiftsOnly={options.row.isHydrogen}

From 5dfd4f73ed71f8912d09aa9387db01e23dee939b Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Wed, 21 Oct 2026 11:11:08 +0200
Subject: [PATCH 09/22] refactor: combine assignment spectra by nucleus

Index signals by nucleus and atom group, and display spectra values comma separated in one column per nucleus.
---
 .../AssignmentChemicalShiftCell.tsx           | 22 +++++----
 .../MoleculeAssignmentTable.tsx               | 45 +++++++------------
 .../AssignmentListPanel/assignmentSignals.ts  | 36 ++++++++++++---
 3 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
index 4ec72215f..f89933848 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
@@ -1,4 +1,5 @@
 import type { ACSExportOptions } from '@zakodium/nmrium-core';
+import { Fragment } from 'react';
 
 import { useACSSettings } from '../../hooks/use_acs_settings.js';
 
@@ -37,14 +38,14 @@ function AssignmentShift(options: AssignmentShiftLineProps) {
   });
 
   return (
-    <div>
+    <span>
       {shiftsOnly ? (
         <span>{value} ppm</span>
       ) : (
         // eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml
-        <div dangerouslySetInnerHTML={{ __html: value }} />
+        <span dangerouslySetInnerHTML={{ __html: value }} />
       )}
-    </div>
+    </span>
   );
 }
 
@@ -58,11 +59,14 @@ export function AssignmentChemicalShiftCell(
   const { options } = props;
   const assignments = getAssignmentSignals(options);
 
-  return assignments.map((assignment) => (
-    <AssignmentShift
-      key={assignment.spectrum.id}
-      assignment={assignment}
-      shiftsOnly={options.row.isHydrogen}
-    />
+  // Separate spectra's values with commas while retaining per-spectrum formatting.
+  return assignments.map((assignment, index) => (
+    <Fragment key={assignment.spectrum.id}>
+      {index > 0 && ', '}
+      <AssignmentShift
+        assignment={assignment}
+        shiftsOnly={options.row.isHydrogen}
+      />
+    </Fragment>
   ));
 }
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index e04553447..6a71be655 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -1,7 +1,4 @@
-import { Tooltip } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import type { Spectrum1D } from '@zakodium/nmrium-core';
-import { isSpectrum1D } from '@zakodium/nmrium-core';
 import type { GroupedDiaID } from 'openchemlib-utils';
 import { useMemo } from 'react';
 
@@ -14,7 +11,7 @@ import {
 
 import { AssignmentAtomCell } from './AssignmentAtomCell.js';
 import { AssignmentChemicalShiftCell } from './AssignmentChemicalShiftCell.js';
-import { getSignalsByOclID } from './assignmentSignals.js';
+import { getSignalsByNucleus } from './assignmentSignals.js';
 import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
 import {
   atomGroupsToAssignmentRows,
@@ -59,37 +56,25 @@ const SpectrumHeader = styled.div`
   white-space: nowrap;
 `;
 
-const SpectrumColor = styled.span`
-  width: 10px;
-  height: 10px;
-  flex-shrink: 0;
-  border-radius: 50%;
-`;
-
 interface SpectrumColumnHeaderProps {
-  spectrum: Spectrum1D;
+  nucleus: string;
 }
 
-function SpectrumColumnHeader({ spectrum }: SpectrumColumnHeaderProps) {
+function SpectrumColumnHeader({ nucleus }: SpectrumColumnHeaderProps) {
   return (
-    <Tooltip
-      content={spectrum.info.name || spectrum.id}
-      renderTarget={({ isOpen, ...targetProps }) => (
-        <SpectrumHeader {...targetProps}>
-          <SpectrumColor style={{ backgroundColor: spectrum.display.color }} />
-          <IsotopesViewer value={spectrum.info.nucleus} />
-          <span>&delta;</span>
-        </SpectrumHeader>
-      )}
-    />
+    <SpectrumHeader>
+      <IsotopesViewer value={nucleus} />
+      <span>&delta;</span>
+    </SpectrumHeader>
   );
 }
 
 export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
   const { groups, expandedGroups, onToggleRow } = props;
   const { data } = useChartData();
-  const spectra = useMemo(() => data.filter(isSpectrum1D), [data]);
-  const signalsByOclID = useMemo(() => getSignalsByOclID(spectra), [spectra]);
+  // Build once per data change; headers and cells share the same nucleus lookup.
+  const signalsByNucleus = useMemo(() => getSignalsByNucleus(data), [data]);
+  // Keep the complete hierarchy for assignments; expansion only hides rows.
   const allRows = useMemo(
     () => atomGroupsToAssignmentRows(groups, true),
     [groups],
@@ -123,11 +108,12 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
         accessorKey: 'atomLabels',
         enableSorting: false,
       },
-      ...spectra.flatMap((spectrum) =>
+      // One column per nucleus, combining assignments from all of its spectra.
+      ...Array.from(signalsByNucleus).flatMap(([nucleus, signalsByOclID]) =>
         columnHelper.columns([
           {
-            header: () => <SpectrumColumnHeader spectrum={spectrum} />,
-            id: spectrum.id,
+            header: () => <SpectrumColumnHeader nucleus={nucleus} />,
+            id: nucleus,
             enableSorting: false,
             cell: ({ row }) => (
               <AssignmentChemicalShiftCell
@@ -135,7 +121,6 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
                   row: row.original,
                   hydrogenIDsByParent,
                   signalsByOclID,
-                  spectrumId: spectrum.id,
                 }}
               />
             ),
@@ -143,7 +128,7 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
         ]),
       ),
     ]);
-  }, [onToggleRow, signalsByOclID, spectra, hydrogenIDsByParent]);
+  }, [onToggleRow, signalsByNucleus, hydrogenIDsByParent]);
 
   function getHighlightIDs(row: AssignmentListRow): string[] {
     return [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];
diff --git a/src/component/panels/AssignmentListPanel/assignmentSignals.ts b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
index 93858f48e..23cdcbe5d 100644
--- a/src/component/panels/AssignmentListPanel/assignmentSignals.ts
+++ b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
@@ -26,9 +26,17 @@ interface AssignedSignal {
 export type SignalsByOclID = ReadonlyMap<string, readonly AssignedSignal[]>;
 
 /**
- * Build a lookup of assigned 1D signals using the OCL IDs in `signal.diaIDs`.
+ * Index signals by nucleus, then OCL ID, so each column can directly look up
+ * assignments across all spectra of its nucleus without filtering other nuclei.
+ * Entries retain spectrum metadata because ACS formatting needs its frequency.
+ */
+export type SignalsByNucleus = ReadonlyMap<string, SignalsByOclID>;
+
+/**
+ * Build a nucleus-to-OCL-ID lookup of assigned 1D signals.
  *
- * @returns A map from each OCL ID to its signals and original range references.
+ * @returns A map containing an OCL ID lookup for each 1D nucleus, including
+ * nuclei without assignments so their columns remain visible.
  * Only the spectrum ID, nucleus, and frequency are retained in a shared metadata
  * object.
  *
@@ -36,10 +44,21 @@ export type SignalsByOclID = ReadonlyMap<string, readonly AssignedSignal[]>;
  * 1. Unassigned signals are omitted.
  * 2. Repeated IDs within a signal occur once.
  */
-export function getSignalsByOclID(spectra: Spectrum[]): SignalsByOclID {
-  const signalsByOclID = new Map<string, AssignedSignal[]>();
+export function getSignalsByNucleus(spectra: Spectrum[]): SignalsByNucleus {
+  const signalsByNucleus = new Map<string, Map<string, AssignedSignal[]>>();
   for (const spectrum of spectra) {
     if (!isSpectrum1D(spectrum)) continue;
+
+    // Share one atom-group lookup across all 1D spectra of the same nucleus.
+    // Create it even without assignments so the nucleus column stays visible.
+    const nucleus = spectrum.info.nucleus;
+    let signalsByOclID = signalsByNucleus.get(nucleus);
+
+    if (!signalsByOclID) {
+      signalsByOclID = new Map();
+      signalsByNucleus.set(nucleus, signalsByOclID);
+    }
+    // Keep each spectrum's frequency for formatting its own coupling values.
     const assignmentSpectrum: AssignmentSpectrum = {
       id: spectrum.id,
       info: {
@@ -50,6 +69,7 @@ export function getSignalsByOclID(spectra: Spectrum[]): SignalsByOclID {
     for (const range of spectrum.ranges.values) {
       for (const signal of range.signals) {
         const entry = { spectrum: assignmentSpectrum, range, signal };
+        // Index a signal under every linked group, without repeating a link.
         for (const oclID of new Set(signal.diaIDs)) {
           const entries = signalsByOclID.get(oclID);
           if (entries) {
@@ -61,7 +81,7 @@ export function getSignalsByOclID(spectra: Spectrum[]): SignalsByOclID {
       }
     }
   }
-  return signalsByOclID;
+  return signalsByNucleus;
 }
 
 export interface AssignmentSignals {
@@ -79,8 +99,8 @@ export interface GetAssignmentSignalsOptions {
 /**
  * Collect a row's signals and those of its attached hydrogen groups.
  *
- * @param options - The row (`row.id` is its OCL ID), signal lookup, precomputed
- * parent-to-hydrogen lookup, and optional spectrum ID to restrict the results.
+ * @param options - The row (`row.id` is its OCL ID), nucleus-specific signal
+ * lookup, precomputed parent-to-hydrogen lookup, and optional spectrum ID.
  * @returns One group per matching spectrum, with duplicate entries removed when
  * the same signal matches several OCL IDs.
  */
@@ -88,6 +108,7 @@ export function getAssignmentSignals(
   options: GetAssignmentSignalsOptions,
 ): AssignmentSignals[] {
   const { row, signalsByOclID, hydrogenIDsByParent, spectrumId } = options;
+  // Include attached H assignments on the parent row even when H rows are hidden.
   const oclIDs = [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];
   const signalsBySpectrum = new Map<
     string,
@@ -105,6 +126,7 @@ export function getAssignmentSignals(
         group = { spectrum: entry.spectrum, signals: new Set() };
         signalsBySpectrum.set(entry.spectrum.id, group);
       }
+      // A signal linked to several of this row's groups should appear only once.
       group.signals.add(entry);
     }
   }

From 9ba340e7c8e2ca1891ffa96e7cdf5c46544326db Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Wed, 21 Oct 2026 11:12:13 +0200
Subject: [PATCH 10/22] feat: show assignment coverage badges by nucleus

Count assigned atoms once across spectra and show assigned/total badges in green for complete coverage and red otherwise.
---
 .../MoleculeAssignmentTable.tsx               | 50 ++++++++++++++++---
 .../AssignmentListPanel/assignmentSignals.ts  | 35 +++++++++++++
 2 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index 6a71be655..5712bc72f 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -1,3 +1,4 @@
+import { Tag, Tooltip } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type { GroupedDiaID } from 'openchemlib-utils';
 import { useMemo } from 'react';
@@ -11,7 +12,11 @@ import {
 
 import { AssignmentAtomCell } from './AssignmentAtomCell.js';
 import { AssignmentChemicalShiftCell } from './AssignmentChemicalShiftCell.js';
-import { getSignalsByNucleus } from './assignmentSignals.js';
+import type { SignalsByOclID } from './assignmentSignals.js';
+import {
+  getAssignedAtomCounts,
+  getSignalsByNucleus,
+} from './assignmentSignals.js';
 import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
 import {
   atomGroupsToAssignmentRows,
@@ -58,14 +63,37 @@ const SpectrumHeader = styled.div`
 
 interface SpectrumColumnHeaderProps {
   nucleus: string;
+  groups: GroupedDiaID[];
+  signalsByOclID: SignalsByOclID;
 }
 
-function SpectrumColumnHeader({ nucleus }: SpectrumColumnHeaderProps) {
+function SpectrumColumnHeader({
+  nucleus,
+  groups,
+  signalsByOclID,
+}: SpectrumColumnHeaderProps) {
+  const counts = getAssignedAtomCounts(groups, signalsByOclID, nucleus);
+  const atomLabel = nucleus.replace(/^\d+/, '');
+  const tooltip = `${counts.assigned} of ${counts.total} ${atomLabel} atoms assigned.`;
+  // Green means every atom has an assignment link, not a verified assignment.
+  const isFullyAssigned = counts.total > 0 && counts.assigned === counts.total;
   return (
-    <SpectrumHeader>
-      <IsotopesViewer value={nucleus} />
-      <span>&delta;</span>
-    </SpectrumHeader>
+    <Tooltip
+      content={tooltip}
+      renderTarget={({ isOpen, ...targetProps }) => (
+        <SpectrumHeader {...targetProps}>
+          <IsotopesViewer value={nucleus} />
+          <span>&delta;</span>
+          <Tag
+            minimal
+            intent={isFullyAssigned ? 'success' : 'danger'}
+            title={tooltip}
+          >
+            {counts.assigned}/{counts.total}
+          </Tag>
+        </SpectrumHeader>
+      )}
+    />
   );
 }
 
@@ -112,7 +140,13 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
       ...Array.from(signalsByNucleus).flatMap(([nucleus, signalsByOclID]) =>
         columnHelper.columns([
           {
-            header: () => <SpectrumColumnHeader nucleus={nucleus} />,
+            header: () => (
+              <SpectrumColumnHeader
+                nucleus={nucleus}
+                groups={groups}
+                signalsByOclID={signalsByOclID}
+              />
+            ),
             id: nucleus,
             enableSorting: false,
             cell: ({ row }) => (
@@ -128,7 +162,7 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
         ]),
       ),
     ]);
-  }, [onToggleRow, signalsByNucleus, hydrogenIDsByParent]);
+  }, [groups, onToggleRow, signalsByNucleus, hydrogenIDsByParent]);
 
   function getHighlightIDs(row: AssignmentListRow): string[] {
     return [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];
diff --git a/src/component/panels/AssignmentListPanel/assignmentSignals.ts b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
index 23cdcbe5d..2a5d52475 100644
--- a/src/component/panels/AssignmentListPanel/assignmentSignals.ts
+++ b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
@@ -6,6 +6,7 @@ import type {
 } from '@zakodium/nmrium-core';
 import { isSpectrum1D } from '@zakodium/nmrium-core';
 import { rangesToACS } from 'nmr-processing';
+import type { GroupedDiaID } from 'openchemlib-utils';
 
 import { getRangesToACSOptions } from '../../hooks/use_publication_strings.js';
 import { formatNumber } from '../../utility/formatNumber.js';
@@ -32,6 +33,40 @@ export type SignalsByOclID = ReadonlyMap<string, readonly AssignedSignal[]>;
  */
 export type SignalsByNucleus = ReadonlyMap<string, SignalsByOclID>;
 
+export interface AssignedAtomCounts {
+  assigned: number;
+  total: number;
+}
+
+/**
+ * Count atoms of the nucleus's element in the selected molecule.
+ * The lookup must belong to that nucleus. Counts measure assignment coverage,
+ * not the number of signals or whether the assignments have been verified.
+ */
+export function getAssignedAtomCounts(
+  groups: GroupedDiaID[],
+  signalsByOclID: SignalsByOclID,
+  nucleus: string,
+): AssignedAtomCounts {
+  let assigned = 0;
+  let total = 0;
+  const atomLabel = nucleus.replace(/^\d+/, '');
+
+  for (const group of groups) {
+    if (group.atomLabel !== atomLabel) continue;
+
+    // Count individual equivalent atoms (for example, 3 H in a methyl group),
+    // not one atom per group. The total is independent of observed signals.
+    total += group.atoms.length;
+    // A group counts once if assigned in any spectrum of this nucleus.
+    if (signalsByOclID.has(group.oclID)) {
+      assigned += group.atoms.length;
+    }
+  }
+
+  return { assigned, total };
+}
+
 /**
  * Build a nucleus-to-OCL-ID lookup of assigned 1D signals.
  *

From baae589114c33d370e4a9c64a2ddf3da97b4cab1 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Wed, 21 Oct 2026 11:31:56 +0200
Subject: [PATCH 11/22] refactor: remove tooltip wrapper from assignment column
 header

---
 .../MoleculeAssignmentTable.tsx               | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index 5712bc72f..c8d031b8e 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -1,4 +1,4 @@
-import { Tag, Tooltip } from '@blueprintjs/core';
+import { Tag } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type { GroupedDiaID } from 'openchemlib-utils';
 import { useMemo } from 'react';
@@ -78,22 +78,17 @@ function SpectrumColumnHeader({
   // Green means every atom has an assignment link, not a verified assignment.
   const isFullyAssigned = counts.total > 0 && counts.assigned === counts.total;
   return (
-    <Tooltip
-      content={tooltip}
-      renderTarget={({ isOpen, ...targetProps }) => (
-        <SpectrumHeader {...targetProps}>
-          <IsotopesViewer value={nucleus} />
-          <span>&delta;</span>
-          <Tag
-            minimal
-            intent={isFullyAssigned ? 'success' : 'danger'}
-            title={tooltip}
-          >
-            {counts.assigned}/{counts.total}
-          </Tag>
-        </SpectrumHeader>
-      )}
-    />
+    <SpectrumHeader>
+      <IsotopesViewer value={nucleus} />
+      <span>&delta;</span>
+      <Tag
+        minimal
+        intent={isFullyAssigned ? 'success' : 'danger'}
+        title={tooltip}
+      >
+        {counts.assigned}/{counts.total}
+      </Tag>
+    </SpectrumHeader>
   );
 }
 

From dfba9a96787385f92b1d71b6f1701a0e75353630 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Wed, 21 Oct 2026 11:47:16 +0200
Subject: [PATCH 12/22] refactor: replace "Expand all" switch with
 expand/collapse menu

---
 .../AssignmentListPanel.tsx                   | 106 +++++++++++++-----
 1 file changed, 76 insertions(+), 30 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
index d66d3da52..806a50d0a 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
@@ -1,15 +1,16 @@
-import { Switch } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { Molecule } from 'openchemlib';
 import type { GroupedDiaID } from 'openchemlib-utils';
 import { TopicMolecule } from 'openchemlib-utils';
 import { useMemo, useState } from 'react';
-import { PanelHeader } from 'react-science/ui';
+import { PanelHeader, Toolbar } from 'react-science/ui';
 
 import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
 import { useChartData } from '../../context/ChartContext.js';
 import { EmptyText } from '../../elements/EmptyText.js';
 import Select from '../../elements/Select.js';
+import type { ToolbarPopoverMenuItem } from '../../elements/ToolbarPopoverItem.js';
+import { ToolbarPopoverItem } from '../../elements/ToolbarPopoverItem.js';
 import { TablePanel } from '../extra/BasicPanelStyle.js';
 
 import { MoleculeAssignmentTable } from './MoleculeAssignmentTable.js';
@@ -87,24 +88,16 @@ function useMoleculeAssignments(molecules: StateMoleculeExtended[]) {
   return { moleculeAssignments, activeAssignment, selectMolecule };
 }
 
-function useAssignmentExpansion(
-  activeAssignment: MoleculeAssignmentData | undefined,
-) {
+function useAssignmentExpansion(activeAssignment: MoleculeAssignmentData) {
   const [expandedGroupsByMolecule, setExpandedGroupsByMolecule] = useState<
     ReadonlyMap<string, ReadonlySet<string>>
   >(() => new Map());
-  const moleculeId = activeAssignment?.molecule.id;
-  const expandableGroupIds = activeAssignment?.expandableGroupIds ?? [];
+  const moleculeId = activeAssignment.molecule.id;
+  const { expandableGroupIds } = activeAssignment;
   const expandedGroups =
-    moleculeId === undefined
-      ? new Set<string>()
-      : (expandedGroupsByMolecule.get(moleculeId) ?? new Set<string>());
-  const allExpanded =
-    expandableGroupIds.length > 0 &&
-    expandableGroupIds.every((id) => expandedGroups.has(id));
+    expandedGroupsByMolecule.get(moleculeId) ?? new Set<string>();
 
   function toggleRows(groupIds: readonly string[]) {
-    if (moleculeId === undefined) return;
     setExpandedGroupsByMolecule((previous) => {
       const next = new Map(previous);
       next.set(
@@ -115,54 +108,107 @@ function useAssignmentExpansion(
     });
   }
 
-  function toggleRow(groupId: string) {
-    toggleRows([groupId]);
+  function setAllRows(expanded: boolean) {
+    setExpandedGroupsByMolecule((previous) => {
+      const next = new Map(previous);
+      next.set(moleculeId, new Set(expanded ? expandableGroupIds : []));
+      return next;
+    });
   }
 
-  function toggleAllRows() {
-    toggleRows(expandableGroupIds);
+  function toggleRow(groupId: string) {
+    toggleRows([groupId]);
   }
 
   return {
     expandedGroups,
-    allExpanded,
-    canExpand: expandableGroupIds.length > 0,
+    canExpand: expandableGroupIds.some((id) => !expandedGroups.has(id)),
+    canCollapse: expandableGroupIds.some((id) => expandedGroups.has(id)),
     toggleRow,
-    toggleAllRows,
+    setAllRows,
   };
 }
 
+type ExpansionAction = 'expand' | 'collapse';
+
+const EXPANSION_MENU: Array<ToolbarPopoverMenuItem<ExpansionAction>> = [
+  { text: 'Expand all', icon: 'expand-all', data: 'expand' },
+  { text: 'Collapse all', icon: 'collapse-all', data: 'collapse' },
+];
+
+interface ExpansionMenuProps {
+  canExpand: boolean;
+  canCollapse: boolean;
+  onSelect: (expanded: boolean) => void;
+}
+
+function ExpansionMenu(props: ExpansionMenuProps) {
+  const { canExpand, canCollapse, onSelect } = props;
+  const options = EXPANSION_MENU.map((option) => ({
+    ...option,
+    disabled: option.data === 'expand' ? !canExpand : !canCollapse,
+  }));
+
+  return (
+    <Toolbar>
+      <ToolbarPopoverItem<ExpansionAction>
+        icon="expand-all"
+        tooltip="Expand / collapse rows"
+        tooltipProps={{ minimal: true }}
+        options={options}
+        onClick={(action) => onSelect(action === 'expand')}
+      />
+    </Toolbar>
+  );
+}
+
 export function AssignmentListPanel() {
   const { molecules } = useChartData();
   const { moleculeAssignments, activeAssignment, selectMolecule } =
     useMoleculeAssignments(molecules);
-  const expansion = useAssignmentExpansion(activeAssignment);
 
   if (!activeAssignment) {
     return <EmptyText text="No molecules available" />;
   }
 
+  return (
+    <AssignmentList
+      moleculeAssignments={moleculeAssignments}
+      activeAssignment={activeAssignment}
+      onSelectMolecule={selectMolecule}
+    />
+  );
+}
+
+interface AssignmentListProps {
+  moleculeAssignments: MoleculeAssignmentData[];
+  activeAssignment: MoleculeAssignmentData;
+  onSelectMolecule: (moleculeId: string) => void;
+}
+
+// Rendered only when a molecule exists, so the expansion hook never sees undefined.
+function AssignmentList(props: AssignmentListProps) {
+  const { moleculeAssignments, activeAssignment, onSelectMolecule } = props;
+  const expansion = useAssignmentExpansion(activeAssignment);
   const { molecule } = activeAssignment;
 
   return (
     <TablePanel>
       <PanelHeader>
+        <ExpansionMenu
+          canExpand={expansion.canExpand}
+          canCollapse={expansion.canCollapse}
+          onSelect={expansion.setAllRows}
+        />
         <HeaderControls>
           {moleculeAssignments.length > 1 && (
             <Select
               items={getMoleculeOptions(moleculeAssignments)}
               value={molecule.id}
-              onChange={selectMolecule}
+              onChange={onSelectMolecule}
               style={{ width: 140 }}
             />
           )}
-          <Switch
-            label="Expand all"
-            checked={expansion.allExpanded}
-            disabled={!expansion.canExpand}
-            onChange={expansion.toggleAllRows}
-            style={{ marginBottom: 0 }}
-          />
         </HeaderControls>
       </PanelHeader>
       <div className="inner-container">

From 1031e01977ba91c9a97d56ef9b494d8cd82055d3 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Wed, 21 Oct 2026 15:03:44 +0200
Subject: [PATCH 13/22] feat: show hydrogen labels on collapsed assignment rows

---
 .../AssignmentListPanel/AssignmentLabelCell.tsx   | 13 +++++++++++++
 .../MoleculeAssignmentTable.tsx                   | 15 +++++++++++++++
 .../atomGroupsToAssignmentRows.ts                 | 11 ++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx

diff --git a/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx b/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx
new file mode 100644
index 000000000..2ce592bfc
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx
@@ -0,0 +1,13 @@
+interface AssignmentLabelCellProps {
+  value: string;
+  hydrogenValue: string;
+  isExpanded: boolean;
+}
+
+export function AssignmentLabelCell(props: AssignmentLabelCellProps) {
+  const { value, hydrogenValue, isExpanded } = props;
+
+  if (isExpanded || !hydrogenValue) return value;
+
+  return value ? `${value} (${hydrogenValue})` : `(${hydrogenValue})`;
+}
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index c8d031b8e..f8b507a04 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -12,6 +12,7 @@ import {
 
 import { AssignmentAtomCell } from './AssignmentAtomCell.js';
 import { AssignmentChemicalShiftCell } from './AssignmentChemicalShiftCell.js';
+import { AssignmentLabelCell } from './AssignmentLabelCell.js';
 import type { SignalsByOclID } from './assignmentSignals.js';
 import {
   getAssignedAtomCounts,
@@ -125,11 +126,25 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
         header: 'Atom numbers',
         accessorKey: 'atomNumbers',
         enableSorting: false,
+        cell: ({ row }) => (
+          <AssignmentLabelCell
+            value={row.original.atomNumbers}
+            hydrogenValue={row.original.hydrogenAtomNumbers}
+            isExpanded={row.original.isExpanded}
+          />
+        ),
       },
       {
         header: 'Atom labels',
         accessorKey: 'atomLabels',
         enableSorting: false,
+        cell: ({ row }) => (
+          <AssignmentLabelCell
+            value={row.original.atomLabels}
+            hydrogenValue={row.original.hydrogenAtomLabels}
+            isExpanded={row.original.isExpanded}
+          />
+        ),
       },
       // One column per nucleus, combining assignments from all of its spectra.
       ...Array.from(signalsByNucleus).flatMap(([nucleus, signalsByOclID]) =>
diff --git a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
index 9178a8d5e..f357246d9 100644
--- a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
+++ b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
@@ -20,6 +20,8 @@ export interface AssignmentListRow {
   atomLabel: string;
   atomNumbers: string;
   atomLabels: string;
+  hydrogenAtomNumbers: string;
+  hydrogenAtomLabels: string;
   isHydrogen: boolean;
   hasChildren: boolean;
   isExpanded: boolean;
@@ -95,6 +97,13 @@ function toAssignmentRow(
     atomLabel: group.atomLabel,
     atomNumbers: group.atoms.toSorted(compareNumbers).join(','),
     atomLabels: sortAssignmentLabels(group.customLabels).join(','),
+    // The molecule already provides attached H values; keep them separate from the parent's.
+    hydrogenAtomNumbers: group.attachedHydrogens
+      .toSorted(compareNumbers)
+      .join(','),
+    hydrogenAtomLabels: sortAssignmentLabels(
+      group.attachedHydrogensCustomLabels,
+    ).join(','),
     isHydrogen: isHydrogenGroup(group),
     hasChildren,
     isExpanded,
@@ -161,7 +170,7 @@ function partitionHydrogenGroups(
  * - `heavyAtoms`: for hydrogens, the numbers of the atoms they are attached to.
  *
  * The table lists each heavy-atom group, followed by its hydrogen groups when
- * expanded.
+ * expanded. Parents retain their attached hydrogen values for collapsed cells.
  * for example:
  *   Input: carbon c1 contains atom 0, carbon c2 contains atom 1, and hydrogen group h1 contains atoms 2, 3, 4 attached to atom 0.
  *   atomGroupsToAssignmentRows(groups, new Set(['c1']));

From 3b49740282f269894d5f02920d01f80cbf6b9184 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 08:47:05 +0200
Subject: [PATCH 14/22] feat: copy to clipboard and export assignments to CSV

---
 .../AssignmentChemicalShiftCell.tsx           |  22 +-
 .../AssignmentLabelCell.tsx                   |   5 +-
 .../AssignmentListPanel.tsx                   |  35 +--
 .../AssignmentsExportAsCSVModal.tsx           | 234 ++++++++++++++++++
 .../MoleculeAssignmentTable.tsx               |  23 +-
 .../AssignmentListPanel/assignmentSignals.ts  |  41 ++-
 .../AssignmentListPanel/assignmentsToCSV.ts   | 115 +++++++++
 .../atomGroupsToAssignmentRows.ts             |  22 ++
 8 files changed, 419 insertions(+), 78 deletions(-)
 create mode 100644 src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
 create mode 100644 src/component/panels/AssignmentListPanel/assignmentsToCSV.ts

diff --git a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
index f89933848..7640210a3 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
@@ -1,4 +1,3 @@
-import type { ACSExportOptions } from '@zakodium/nmrium-core';
 import { Fragment } from 'react';
 
 import { useACSSettings } from '../../hooks/use_acs_settings.js';
@@ -8,7 +7,8 @@ import type {
   GetAssignmentSignalsOptions,
 } from './assignmentSignals.js';
 import {
-  formatAssignmentSignals,
+  formatAssignmentACS,
+  formatAssignmentShifts,
   getAssignmentSignals,
 } from './assignmentSignals.js';
 
@@ -17,25 +17,13 @@ interface AssignmentShiftLineProps {
   shiftsOnly: boolean;
 }
 
-const acsOptions: Partial<ACSExportOptions> = {
-  signalKind: 'signal',
-  ascending: true,
-  format: 'IMJ',
-  textStyle: {},
-};
-
 function AssignmentShift(options: AssignmentShiftLineProps) {
   const { assignment, shiftsOnly } = options;
   const { spectrum } = assignment;
   const acs = useACSSettings(spectrum.info.nucleus);
-  const value = formatAssignmentSignals({
-    assignment,
-    acs: {
-      ...acs,
-      ...acsOptions,
-    },
-    format: shiftsOnly ? 'shifts' : 'acs',
-  });
+  const value = shiftsOnly
+    ? formatAssignmentShifts({ assignment, acs })
+    : formatAssignmentACS({ assignment, acs });
 
   return (
     <span>
diff --git a/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx b/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx
index 2ce592bfc..30c80aa9c 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx
@@ -5,8 +5,11 @@ interface AssignmentLabelCellProps {
 }
 
 export function AssignmentLabelCell(props: AssignmentLabelCellProps) {
-  const { value, hydrogenValue, isExpanded } = props;
+  return formatAssignmentLabel(props);
+}
 
+export function formatAssignmentLabel(options: AssignmentLabelCellProps) {
+  const { value, hydrogenValue, isExpanded } = options;
   if (isExpanded || !hydrogenValue) return value;
 
   return value ? `${value} (${hydrogenValue})` : `(${hydrogenValue})`;
diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
index 806a50d0a..0df6739fb 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
@@ -13,6 +13,7 @@ import type { ToolbarPopoverMenuItem } from '../../elements/ToolbarPopoverItem.j
 import { ToolbarPopoverItem } from '../../elements/ToolbarPopoverItem.js';
 import { TablePanel } from '../extra/BasicPanelStyle.js';
 
+import { AssignmentsExportAsCSVModal } from './AssignmentsExportAsCSVModal.js';
 import { MoleculeAssignmentTable } from './MoleculeAssignmentTable.js';
 import { atomGroupsToAssignmentRows } from './atomGroupsToAssignmentRows.js';
 
@@ -150,15 +151,13 @@ function ExpansionMenu(props: ExpansionMenuProps) {
   }));
 
   return (
-    <Toolbar>
-      <ToolbarPopoverItem<ExpansionAction>
-        icon="expand-all"
-        tooltip="Expand / collapse rows"
-        tooltipProps={{ minimal: true }}
-        options={options}
-        onClick={(action) => onSelect(action === 'expand')}
-      />
-    </Toolbar>
+    <ToolbarPopoverItem<ExpansionAction>
+      icon="expand-all"
+      tooltip="Expand / collapse rows"
+      tooltipProps={{ minimal: true }}
+      options={options}
+      onClick={(action) => onSelect(action === 'expand')}
+    />
   );
 }
 
@@ -186,7 +185,6 @@ interface AssignmentListProps {
   onSelectMolecule: (moleculeId: string) => void;
 }
 
-// Rendered only when a molecule exists, so the expansion hook never sees undefined.
 function AssignmentList(props: AssignmentListProps) {
   const { moleculeAssignments, activeAssignment, onSelectMolecule } = props;
   const expansion = useAssignmentExpansion(activeAssignment);
@@ -195,11 +193,18 @@ function AssignmentList(props: AssignmentListProps) {
   return (
     <TablePanel>
       <PanelHeader>
-        <ExpansionMenu
-          canExpand={expansion.canExpand}
-          canCollapse={expansion.canCollapse}
-          onSelect={expansion.setAllRows}
-        />
+        <Toolbar>
+          <AssignmentsExportAsCSVModal
+            groups={activeAssignment.groups}
+            expandedGroups={expansion.expandedGroups}
+            moleculeLabel={molecule.label}
+          />
+          <ExpansionMenu
+            canExpand={expansion.canExpand}
+            canCollapse={expansion.canCollapse}
+            onSelect={expansion.setAllRows}
+          />
+        </Toolbar>
         <HeaderControls>
           {moleculeAssignments.length > 1 && (
             <Select
diff --git a/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx b/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
new file mode 100644
index 000000000..4014b014c
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
@@ -0,0 +1,234 @@
+import { Classes, DialogFooter, RadioCard } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { GroupedDiaID } from 'openchemlib-utils';
+import { useState } from 'react';
+import { FaCopy, FaDownload, FaFileExport } from 'react-icons/fa';
+import { AppForm, Button, useForm } from 'react-science/ui';
+
+import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../../utils/clipboard/clipboardHooks.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { StandardDialog } from '../../elements/StandardDialog.js';
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
+import type { ToolbarPopoverMenuItem } from '../../elements/ToolbarPopoverItem.js';
+import { ToolbarPopoverItem } from '../../elements/ToolbarPopoverItem.js';
+import { useDialogToggle } from '../../hooks/useDialogToggle.js';
+import { useACSSettings } from '../../hooks/use_acs_settings.js';
+import { saveAs } from '../../utility/save_as.js';
+
+import type { AssignmentExportRowMode } from './assignmentsToCSV.js';
+import { exportAssignmentsToCSV } from './assignmentsToCSV.js';
+
+type ExportAction = 'copy' | 'export';
+interface RowOption {
+  label: string;
+  description: string;
+  value: AssignmentExportRowMode;
+}
+
+const EXPORT_MENU = [
+  { text: 'Copy as CSV', icon: <FaCopy />, data: 'copy' },
+  { text: 'Export as CSV', icon: <FaDownload />, data: 'export' },
+] satisfies Array<ToolbarPopoverMenuItem<ExportAction>>;
+
+const ROW_OPTIONS: RowOption[] = [
+  {
+    label: 'Current table view',
+    description: 'Keep the rows exactly as they are currently shown.',
+    value: 'current',
+  },
+  {
+    label: 'Expanded view',
+    description:
+      'Show each hydrogen group on a separate row below its parent atom.',
+    value: 'expanded',
+  },
+  {
+    label: 'Collapsed view',
+    description:
+      'Include hydrogen numbers and labels in parentheses on the parent row.',
+    value: 'collapsed',
+  },
+];
+
+const INITIAL_VALUES: { rows: AssignmentExportRowMode } = { rows: 'current' };
+
+interface AssignmentsExportAsCSVModalProps {
+  groups: GroupedDiaID[];
+  expandedGroups: ReadonlySet<string>;
+  moleculeLabel: string;
+}
+
+export function AssignmentsExportAsCSVModal(
+  props: AssignmentsExportAsCSVModalProps,
+) {
+  const { groups, expandedGroups, moleculeLabel } = props;
+  const { data } = useChartData();
+  const { current } = usePreferences();
+  const defaultACSOptions = useACSSettings(undefined);
+  const toaster = useToaster();
+  const [action, setAction] = useState<ExportAction>('copy');
+  const { dialog, openDialog, closeDialog } = useDialogToggle({
+    exportAsCSV: false,
+  });
+  const { rawWriteWithType, shouldFallback, cleanShouldFallback, text } =
+    useClipboard();
+
+  const exportMenu = EXPORT_MENU.map((option) => ({
+    ...option,
+    onClick: () => handleOpenDialog(option.data),
+  }));
+
+  function handleOpenDialog(exportAction: ExportAction) {
+    setAction(exportAction);
+    openDialog('exportAsCSV');
+  }
+
+  async function handleExport(
+    exportAction: ExportAction,
+    rowMode: AssignmentExportRowMode,
+  ) {
+    try {
+      const csv = exportAssignmentsToCSV({
+        groups,
+        spectra: data,
+        expandedGroups,
+        rowMode,
+        acsExportSettings: current.acsExportSettings,
+        defaultACSOptions,
+      });
+
+      if (exportAction === 'copy') {
+        await rawWriteWithType(csv, 'text/plain');
+        return closeDialog();
+      }
+
+      saveAs({
+        blob: new Blob([csv], { type: 'text/csv;charset=utf-8' }),
+        name: `${moleculeLabel}-assignments`,
+        extension: '.csv',
+      });
+
+      closeDialog();
+    } catch (error: unknown) {
+      toaster.show({
+        message: `Could not ${exportAction} assignments as CSV: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+        intent: 'danger',
+      });
+    }
+  }
+
+  return (
+    <>
+      <ToolbarPopoverItem<ExportAction>
+        id="assignment-export"
+        icon={<FaFileExport />}
+        tooltip="Export"
+        options={exportMenu}
+        disabled={groups.length === 0}
+      />
+      {dialog.exportAsCSV && (
+        <AssignmentsExportAsCSVModalContent
+          action={action}
+          onClose={closeDialog}
+          onSubmit={(rowMode) => handleExport(action, rowMode)}
+        />
+      )}
+      <ClipboardFallbackModal
+        mode={shouldFallback}
+        onDismiss={cleanShouldFallback}
+        text={text}
+        label="Assignments as CSV"
+      />
+    </>
+  );
+}
+
+const ExportDialogBody = styled(StyledDialogBody)`
+  .${Classes.FORM_GROUP} > div {
+    width: 100%;
+  }
+
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Description = styled.p`
+  margin: 4px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+`;
+
+interface AssignmentsExportAsCSVModalContentProps {
+  action: ExportAction;
+  onClose: () => void;
+  onSubmit: (rowMode: AssignmentExportRowMode) => Promise<void>;
+}
+
+function AssignmentsExportAsCSVModalContent(
+  props: AssignmentsExportAsCSVModalContentProps,
+) {
+  const { action, onClose, onSubmit } = props;
+  const isCopy = action === 'copy';
+  const form = useForm({
+    defaultValues: INITIAL_VALUES,
+    onSubmit: ({ value }) => onSubmit(value.rows),
+  });
+
+  return (
+    <StandardDialog
+      isOpen
+      title={`${isCopy ? 'Copy' : 'Export'} assignment table as CSV`}
+      icon={isCopy ? 'clipboard' : 'export'}
+      onClose={onClose}
+      style={{ width: 520 }}
+    >
+      <AppForm form={form}>
+        <ExportDialogBody>
+          <form.AppField name="rows">
+            {(field) => (
+              <field.RadioGroup
+                label="CSV layout"
+                style={{ display: 'grid', gap: 10 }}
+              >
+                {ROW_OPTIONS.map((option) => (
+                  <RadioCard
+                    key={option.value}
+                    value={option.value}
+                    alignIndicator="start"
+                  >
+                    <strong>{option.label}</strong>
+                    <Description className={Classes.TEXT_MUTED}>
+                      {option.description}
+                    </Description>
+                  </RadioCard>
+                ))}
+              </field.RadioGroup>
+            )}
+          </form.AppField>
+        </ExportDialogBody>
+        <DialogFooter
+          actions={
+            <>
+              <Button variant="outlined" onClick={onClose}>
+                Cancel
+              </Button>
+              <form.SubmitButton
+                intent="primary"
+                icon={isCopy ? <FaCopy /> : <FaDownload />}
+              >
+                {isCopy ? 'Copy CSV' : 'Download CSV'}
+              </form.SubmitButton>
+            </>
+          }
+        />
+      </AppForm>
+    </StandardDialog>
+  );
+}
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index f8b507a04..f6ce1a5c8 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -22,6 +22,7 @@ import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
 import {
   atomGroupsToAssignmentRows,
   getHydrogenIDsByParent,
+  getVisibleAssignmentRows,
 } from './atomGroupsToAssignmentRows.js';
 
 interface MoleculeAssignmentTableProps {
@@ -32,28 +33,6 @@ interface MoleculeAssignmentTableProps {
 
 const columnHelper = createTanStackColumnHelper<AssignmentListRow>();
 
-/**
- * Select visible rows from the complete hierarchy and update expansion flags.
- * rows with no parent or whose parent is expanded remain visible.
- */
-function getVisibleAssignmentRows(
-  allRows: readonly AssignmentListRow[],
-  expandedGroups: ReadonlySet<string>,
-): AssignmentListRow[] {
-  const rows: AssignmentListRow[] = [];
-  for (const row of allRows) {
-    if (row.parentOclId !== undefined && !expandedGroups.has(row.parentOclId)) {
-      continue;
-    }
-    rows.push(
-      row.hasChildren
-        ? { ...row, isExpanded: expandedGroups.has(row.id) }
-        : row,
-    );
-  }
-  return rows;
-}
-
 const SpectrumHeader = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/component/panels/AssignmentListPanel/assignmentSignals.ts b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
index 2a5d52475..358592935 100644
--- a/src/component/panels/AssignmentListPanel/assignmentSignals.ts
+++ b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
@@ -175,27 +175,26 @@ export function getAssignmentSignals(
   });
 }
 
-interface FormatAssignmentSignalsOptions {
+const assignmentACSOptions: Partial<ACSExportOptions> = {
+  signalKind: 'signal',
+  ascending: true,
+  format: 'IMJ',
+  textStyle: {},
+};
+
+interface FormatAssignmentOptions {
   assignment: AssignmentSignals;
   acs: ACSExportOptions;
-  format: 'shifts' | 'acs';
 }
 
 /**
- * Format one spectrum's collected assignments for a chemical-shift cell.
- *
- * @returns A comma-separated shift string without units, or ACS HTML without
- * the spectrum header and final period.
- *
+ * Format one spectrum's assignments as ACS HTML without the spectrum header
+ * or final period.
  */
-export function formatAssignmentSignals(
-  options: FormatAssignmentSignalsOptions,
-): string {
-  const { assignment, acs, format } = options;
+export function formatAssignmentACS(options: FormatAssignmentOptions): string {
+  const { assignment } = options;
+  const acs = { ...options.acs, ...assignmentACSOptions };
   const { spectrum, entries } = assignment;
-  if (format === 'shifts') {
-    return formatChemicalShifts({ entries, acs });
-  }
 
   const acsString = rangesToACS(getAssignedRanges(entries), {
     ...getRangesToACSOptions(spectrum.info, acs),
@@ -206,19 +205,15 @@ export function formatAssignmentSignals(
   return acsString.replaceAll(/^[^:]*:\s*|\.$/g, '');
 }
 
-interface formatChemicalShiftsOptions extends Pick<
-  AssignmentSignals,
-  'entries'
-> {
-  acs: ACSExportOptions;
-}
-
 /**
  * Sort and format signal deltas without adding spectrum details or units.
  * @returns Shift values joined with ', '
  */
-function formatChemicalShifts(options: formatChemicalShiftsOptions) {
-  const { entries, acs } = options;
+export function formatAssignmentShifts(
+  options: FormatAssignmentOptions,
+): string {
+  const { entries } = options.assignment;
+  const acs = { ...options.acs, ...assignmentACSOptions };
 
   return entries
     .map(({ signal }) => signal.delta)
diff --git a/src/component/panels/AssignmentListPanel/assignmentsToCSV.ts b/src/component/panels/AssignmentListPanel/assignmentsToCSV.ts
new file mode 100644
index 000000000..f5d0f8f20
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/assignmentsToCSV.ts
@@ -0,0 +1,115 @@
+import type { ACSExportOptions, Spectrum } from '@zakodium/nmrium-core';
+import type { GroupedDiaID } from 'openchemlib-utils';
+import papa from 'papaparse';
+
+import { formatAssignmentLabel } from './AssignmentLabelCell.js';
+import type { GetAssignmentSignalsOptions } from './assignmentSignals.js';
+import {
+  formatAssignmentACS,
+  formatAssignmentShifts,
+  getAssignmentSignals,
+  getSignalsByNucleus,
+} from './assignmentSignals.js';
+import {
+  atomGroupsToAssignmentRows,
+  getHydrogenIDsByParent,
+  getVisibleAssignmentRows,
+} from './atomGroupsToAssignmentRows.js';
+
+export type AssignmentExportRowMode = 'current' | 'expanded' | 'collapsed';
+
+interface ExportAssignmentsToCSVOptions {
+  groups: readonly GroupedDiaID[];
+  spectra: Spectrum[];
+  expandedGroups: ReadonlySet<string>;
+  rowMode: AssignmentExportRowMode;
+  acsExportSettings: Record<string, ACSExportOptions>;
+  defaultACSOptions: ACSExportOptions;
+}
+
+/**
+ * Export the selected molecule using the table's row and formatting rules.
+ */
+export function exportAssignmentsToCSV(
+  options: ExportAssignmentsToCSVOptions,
+): string {
+  const {
+    groups,
+    spectra,
+    expandedGroups,
+    rowMode,
+    acsExportSettings,
+    defaultACSOptions,
+  } = options;
+  const allRows = atomGroupsToAssignmentRows(groups, true);
+  const rows =
+    rowMode === 'expanded'
+      ? allRows
+      : getVisibleAssignmentRows(
+          allRows,
+          rowMode === 'current' ? expandedGroups : new Set<string>(),
+        );
+  const hydrogenIDsByParent = getHydrogenIDsByParent(allRows);
+  const nuclei = Array.from(
+    getSignalsByNucleus(spectra),
+    ([nucleus, signals]) => ({
+      nucleus,
+      signalsByOclID: signals,
+      acs: acsExportSettings[nucleus] ?? defaultACSOptions,
+    }),
+  );
+
+  const fields = [
+    'Atom',
+    'Atom numbers',
+    'Atom labels',
+    ...nuclei.map(({ nucleus }) => `${nucleus} \u{03B4}`),
+  ];
+  const data = rows.map((row) => [
+    row.atomLabel,
+    formatAssignmentLabel({
+      value: row.atomNumbers,
+      hydrogenValue: row.hydrogenAtomNumbers,
+      isExpanded: row.isExpanded,
+    }),
+    formatAssignmentLabel({
+      value: row.atomLabels,
+      hydrogenValue: row.hydrogenAtomLabels,
+      isExpanded: row.isExpanded,
+    }),
+    ...nuclei.map(({ signalsByOclID, acs }) =>
+      formatAssignmentCSVCell({
+        row,
+        signalsByOclID,
+        hydrogenIDsByParent,
+        acs,
+      }),
+    ),
+  ]);
+
+  return papa.unparse({ fields, data }, { escapeFormulae: true });
+}
+
+interface FormatAssignmentCSVCellOptions extends GetAssignmentSignalsOptions {
+  acs: ACSExportOptions;
+}
+
+function formatAssignmentCSVCell(
+  options: FormatAssignmentCSVCellOptions,
+): string {
+  const { row, acs } = options;
+
+  return getAssignmentSignals(options)
+    .map((assignment) => {
+      if (row.isHydrogen) {
+        return `${formatAssignmentShifts({ assignment, acs })} ppm`;
+      }
+      // The ACS formatter emits <i>J</i> for couplings
+      // Strip HTML tags so spreadsheet cells contain plain text.
+      return formatAssignmentACS({ assignment, acs }).replaceAll(
+        /<[^>]+>/g,
+        '',
+      );
+    })
+    .join(', ');
+}
diff --git a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
index f357246d9..ed6500c86 100644
--- a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
+++ b/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
@@ -36,6 +36,28 @@ interface AssignmentRowOptions {
   isExpanded?: boolean;
 }
 
+/**
+ * Select visible rows from the complete hierarchy and update expansion flags.
+ * Rows with no parent or whose parent is expanded remain visible.
+ */
+export function getVisibleAssignmentRows(
+  allRows: readonly AssignmentListRow[],
+  expandedGroups: ReadonlySet<string>,
+): AssignmentListRow[] {
+  const rows: AssignmentListRow[] = [];
+  for (const row of allRows) {
+    if (row.parentOclId !== undefined && !expandedGroups.has(row.parentOclId)) {
+      continue;
+    }
+    rows.push(
+      row.hasChildren
+        ? { ...row, isExpanded: expandedGroups.has(row.id) }
+        : row,
+    );
+  }
+  return rows;
+}
+
 export function getHydrogenIDsByParent(
   rows: readonly AssignmentListRow[],
 ): ReadonlyMap<string, readonly string[]> {

From b65d24d447adad3db583d1ff0abc692d5c15a24f Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 09:03:07 +0200
Subject: [PATCH 15/22] refactor: assignment panel utilities and table cells

---
 .../AssignmentListPanel.tsx                   |   2 +-
 .../AssignmentsExportAsCSVModal.tsx           |   4 +-
 .../MoleculeAssignmentTable.tsx               |  24 +-
 .../AssignmentListPanel/assignmentSignals.ts  | 242 ------------------
 .../{ => table-cells}/AssignmentAtomCell.tsx  |   2 +-
 .../AssignmentChemicalShiftCell.tsx           |  13 +-
 .../{ => table-cells}/AssignmentLabelCell.tsx |   0
 .../utilities/assignmentACSOptions.ts         |   8 +
 .../{ => utilities}/assignmentsToCSV.ts       |  15 +-
 .../atomGroupsToAssignmentRows.ts             |   2 +-
 .../utilities/formatAssignmentACS.ts          |  44 ++++
 .../utilities/formatAssignmentShifts.ts       |  21 ++
 .../utilities/getAssignedAtomCounts.ts        |  32 +++
 .../utilities/getAssignmentSignals.ts         |  50 ++++
 .../utilities/getSignalsByNucleus.ts          |  60 +++++
 .../AssignmentListPanel/utilities/types.ts    |  46 ++++
 16 files changed, 290 insertions(+), 275 deletions(-)
 delete mode 100644 src/component/panels/AssignmentListPanel/assignmentSignals.ts
 rename src/component/panels/AssignmentListPanel/{ => table-cells}/AssignmentAtomCell.tsx (90%)
 rename src/component/panels/AssignmentListPanel/{ => table-cells}/AssignmentChemicalShiftCell.tsx (80%)
 rename src/component/panels/AssignmentListPanel/{ => table-cells}/AssignmentLabelCell.tsx (100%)
 create mode 100644 src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts
 rename src/component/panels/AssignmentListPanel/{ => utilities}/assignmentsToCSV.ts (87%)
 rename src/component/panels/AssignmentListPanel/{ => utilities}/atomGroupsToAssignmentRows.ts (98%)
 create mode 100644 src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
 create mode 100644 src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts
 create mode 100644 src/component/panels/AssignmentListPanel/utilities/getAssignedAtomCounts.ts
 create mode 100644 src/component/panels/AssignmentListPanel/utilities/getAssignmentSignals.ts
 create mode 100644 src/component/panels/AssignmentListPanel/utilities/getSignalsByNucleus.ts
 create mode 100644 src/component/panels/AssignmentListPanel/utilities/types.ts

diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
index 0df6739fb..fb52da3f3 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
@@ -15,7 +15,7 @@ import { TablePanel } from '../extra/BasicPanelStyle.js';
 
 import { AssignmentsExportAsCSVModal } from './AssignmentsExportAsCSVModal.js';
 import { MoleculeAssignmentTable } from './MoleculeAssignmentTable.js';
-import { atomGroupsToAssignmentRows } from './atomGroupsToAssignmentRows.js';
+import { atomGroupsToAssignmentRows } from './utilities/atomGroupsToAssignmentRows.js';
 
 const HeaderControls = styled.div`
   display: flex;
diff --git a/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx b/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
index 4014b014c..27b43da00 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
@@ -18,8 +18,8 @@ import { useDialogToggle } from '../../hooks/useDialogToggle.js';
 import { useACSSettings } from '../../hooks/use_acs_settings.js';
 import { saveAs } from '../../utility/save_as.js';
 
-import type { AssignmentExportRowMode } from './assignmentsToCSV.js';
-import { exportAssignmentsToCSV } from './assignmentsToCSV.js';
+import type { AssignmentExportRowMode } from './utilities/assignmentsToCSV.js';
+import { exportAssignmentsToCSV } from './utilities/assignmentsToCSV.js';
 
 type ExportAction = 'copy' | 'export';
 interface RowOption {
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index f6ce1a5c8..83f574d5d 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -10,20 +10,18 @@ import {
   createTanStackColumnHelper,
 } from '../../elements/tanstack_table/index.js';
 
-import { AssignmentAtomCell } from './AssignmentAtomCell.js';
-import { AssignmentChemicalShiftCell } from './AssignmentChemicalShiftCell.js';
-import { AssignmentLabelCell } from './AssignmentLabelCell.js';
-import type { SignalsByOclID } from './assignmentSignals.js';
-import {
-  getAssignedAtomCounts,
-  getSignalsByNucleus,
-} from './assignmentSignals.js';
-import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
+import { AssignmentAtomCell } from './table-cells/AssignmentAtomCell.js';
+import { AssignmentChemicalShiftCell } from './table-cells/AssignmentChemicalShiftCell.js';
+import { AssignmentLabelCell } from './table-cells/AssignmentLabelCell.js';
+import type { AssignmentListRow } from './utilities/atomGroupsToAssignmentRows.js';
 import {
   atomGroupsToAssignmentRows,
   getHydrogenIDsByParent,
   getVisibleAssignmentRows,
-} from './atomGroupsToAssignmentRows.js';
+} from './utilities/atomGroupsToAssignmentRows.js';
+import { getAssignedAtomCounts } from './utilities/getAssignedAtomCounts.js';
+import { getSignalsByNucleus } from './utilities/getSignalsByNucleus.js';
+import type { SignalsByOclID } from './utilities/types.js';
 
 interface MoleculeAssignmentTableProps {
   groups: GroupedDiaID[];
@@ -75,9 +73,11 @@ function SpectrumColumnHeader({
 export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
   const { groups, expandedGroups, onToggleRow } = props;
   const { data } = useChartData();
-  // Build once per data change; headers and cells share the same nucleus lookup.
+  // Build once per data change.
+  // headers and cells share the same nucleus lookup.
   const signalsByNucleus = useMemo(() => getSignalsByNucleus(data), [data]);
-  // Keep the complete hierarchy for assignments; expansion only hides rows.
+  // Keep the complete hierarchy for assignments.
+  // Expansion Only hides rows.
   const allRows = useMemo(
     () => atomGroupsToAssignmentRows(groups, true),
     [groups],
diff --git a/src/component/panels/AssignmentListPanel/assignmentSignals.ts b/src/component/panels/AssignmentListPanel/assignmentSignals.ts
deleted file mode 100644
index 358592935..000000000
--- a/src/component/panels/AssignmentListPanel/assignmentSignals.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-import type { Range, Signal1D } from '@zakodium/nmr-types';
-import type {
-  ACSExportOptions,
-  Spectrum1D,
-  Spectrum,
-} from '@zakodium/nmrium-core';
-import { isSpectrum1D } from '@zakodium/nmrium-core';
-import { rangesToACS } from 'nmr-processing';
-import type { GroupedDiaID } from 'openchemlib-utils';
-
-import { getRangesToACSOptions } from '../../hooks/use_publication_strings.js';
-import { formatNumber } from '../../utility/formatNumber.js';
-
-import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
-
-interface AssignmentSpectrum {
-  id: string;
-  info: Pick<Spectrum1D['info'], 'nucleus' | 'originFrequency'>;
-}
-
-interface AssignedSignal {
-  spectrum: AssignmentSpectrum;
-  range: Range;
-  signal: Signal1D;
-}
-
-export type SignalsByOclID = ReadonlyMap<string, readonly AssignedSignal[]>;
-
-/**
- * Index signals by nucleus, then OCL ID, so each column can directly look up
- * assignments across all spectra of its nucleus without filtering other nuclei.
- * Entries retain spectrum metadata because ACS formatting needs its frequency.
- */
-export type SignalsByNucleus = ReadonlyMap<string, SignalsByOclID>;
-
-export interface AssignedAtomCounts {
-  assigned: number;
-  total: number;
-}
-
-/**
- * Count atoms of the nucleus's element in the selected molecule.
- * The lookup must belong to that nucleus. Counts measure assignment coverage,
- * not the number of signals or whether the assignments have been verified.
- */
-export function getAssignedAtomCounts(
-  groups: GroupedDiaID[],
-  signalsByOclID: SignalsByOclID,
-  nucleus: string,
-): AssignedAtomCounts {
-  let assigned = 0;
-  let total = 0;
-  const atomLabel = nucleus.replace(/^\d+/, '');
-
-  for (const group of groups) {
-    if (group.atomLabel !== atomLabel) continue;
-
-    // Count individual equivalent atoms (for example, 3 H in a methyl group),
-    // not one atom per group. The total is independent of observed signals.
-    total += group.atoms.length;
-    // A group counts once if assigned in any spectrum of this nucleus.
-    if (signalsByOclID.has(group.oclID)) {
-      assigned += group.atoms.length;
-    }
-  }
-
-  return { assigned, total };
-}
-
-/**
- * Build a nucleus-to-OCL-ID lookup of assigned 1D signals.
- *
- * @returns A map containing an OCL ID lookup for each 1D nucleus, including
- * nuclei without assignments so their columns remain visible.
- * Only the spectrum ID, nucleus, and frequency are retained in a shared metadata
- * object.
- *
- * Notes:
- * 1. Unassigned signals are omitted.
- * 2. Repeated IDs within a signal occur once.
- */
-export function getSignalsByNucleus(spectra: Spectrum[]): SignalsByNucleus {
-  const signalsByNucleus = new Map<string, Map<string, AssignedSignal[]>>();
-  for (const spectrum of spectra) {
-    if (!isSpectrum1D(spectrum)) continue;
-
-    // Share one atom-group lookup across all 1D spectra of the same nucleus.
-    // Create it even without assignments so the nucleus column stays visible.
-    const nucleus = spectrum.info.nucleus;
-    let signalsByOclID = signalsByNucleus.get(nucleus);
-
-    if (!signalsByOclID) {
-      signalsByOclID = new Map();
-      signalsByNucleus.set(nucleus, signalsByOclID);
-    }
-    // Keep each spectrum's frequency for formatting its own coupling values.
-    const assignmentSpectrum: AssignmentSpectrum = {
-      id: spectrum.id,
-      info: {
-        nucleus: spectrum.info.nucleus,
-        originFrequency: spectrum.info.originFrequency,
-      },
-    };
-    for (const range of spectrum.ranges.values) {
-      for (const signal of range.signals) {
-        const entry = { spectrum: assignmentSpectrum, range, signal };
-        // Index a signal under every linked group, without repeating a link.
-        for (const oclID of new Set(signal.diaIDs)) {
-          const entries = signalsByOclID.get(oclID);
-          if (entries) {
-            entries.push(entry);
-          } else {
-            signalsByOclID.set(oclID, [entry]);
-          }
-        }
-      }
-    }
-  }
-  return signalsByNucleus;
-}
-
-export interface AssignmentSignals {
-  spectrum: AssignmentSpectrum;
-  entries: AssignedSignal[];
-}
-
-export interface GetAssignmentSignalsOptions {
-  row: AssignmentListRow;
-  signalsByOclID: SignalsByOclID;
-  hydrogenIDsByParent: ReadonlyMap<string, readonly string[]>;
-  spectrumId?: string;
-}
-
-/**
- * Collect a row's signals and those of its attached hydrogen groups.
- *
- * @param options - The row (`row.id` is its OCL ID), nucleus-specific signal
- * lookup, precomputed parent-to-hydrogen lookup, and optional spectrum ID.
- * @returns One group per matching spectrum, with duplicate entries removed when
- * the same signal matches several OCL IDs.
- */
-export function getAssignmentSignals(
-  options: GetAssignmentSignalsOptions,
-): AssignmentSignals[] {
-  const { row, signalsByOclID, hydrogenIDsByParent, spectrumId } = options;
-  // Include attached H assignments on the parent row even when H rows are hidden.
-  const oclIDs = [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];
-  const signalsBySpectrum = new Map<
-    string,
-    { spectrum: AssignmentSpectrum; signals: Set<AssignedSignal> }
-  >();
-
-  for (const oclID of oclIDs) {
-    for (const entry of signalsByOclID.get(oclID) ?? []) {
-      if (spectrumId !== undefined && entry.spectrum.id !== spectrumId) {
-        continue;
-      }
-      let group = signalsBySpectrum.get(entry.spectrum.id);
-
-      if (!group) {
-        group = { spectrum: entry.spectrum, signals: new Set() };
-        signalsBySpectrum.set(entry.spectrum.id, group);
-      }
-      // A signal linked to several of this row's groups should appear only once.
-      group.signals.add(entry);
-    }
-  }
-
-  return Array.from(signalsBySpectrum.values(), (group) => {
-    const entries = Array.from(group.signals);
-    return {
-      spectrum: group.spectrum,
-      entries,
-    };
-  });
-}
-
-const assignmentACSOptions: Partial<ACSExportOptions> = {
-  signalKind: 'signal',
-  ascending: true,
-  format: 'IMJ',
-  textStyle: {},
-};
-
-interface FormatAssignmentOptions {
-  assignment: AssignmentSignals;
-  acs: ACSExportOptions;
-}
-
-/**
- * Format one spectrum's assignments as ACS HTML without the spectrum header
- * or final period.
- */
-export function formatAssignmentACS(options: FormatAssignmentOptions): string {
-  const { assignment } = options;
-  const acs = { ...options.acs, ...assignmentACSOptions };
-  const { spectrum, entries } = assignment;
-
-  const acsString = rangesToACS(getAssignedRanges(entries), {
-    ...getRangesToACSOptions(spectrum.info, acs),
-    filter: false,
-  });
-
-  // "1H NMR (600 MHz): δ 4.04 (d)." becomes "δ 4.04 (d)".
-  return acsString.replaceAll(/^[^:]*:\s*|\.$/g, '');
-}
-
-/**
- * Sort and format signal deltas without adding spectrum details or units.
- * @returns Shift values joined with ', '
- */
-export function formatAssignmentShifts(
-  options: FormatAssignmentOptions,
-): string {
-  const { entries } = options.assignment;
-  const acs = { ...options.acs, ...assignmentACSOptions };
-
-  return entries
-    .map(({ signal }) => signal.delta)
-    .toSorted((a, b) => (acs.ascending ? a - b : b - a))
-    .map((delta) => formatNumber(delta, acs.deltaFormat))
-    .join(', ');
-}
-
-/**
- * Rebuild the selected ranges with only the collected signals.
- */
-function getAssignedRanges(entries: AssignedSignal[]): Range[] {
-  const signalsByRange = new Map<Range, Signal1D[]>();
-  for (const { range, signal } of entries) {
-    const signals = signalsByRange.get(range);
-    if (signals) {
-      signals.push(signal);
-    } else {
-      signalsByRange.set(range, [signal]);
-    }
-  }
-  return Array.from(signalsByRange, ([range, signals]) => ({
-    ...range,
-    signals,
-  }));
-}
diff --git a/src/component/panels/AssignmentListPanel/AssignmentAtomCell.tsx b/src/component/panels/AssignmentListPanel/table-cells/AssignmentAtomCell.tsx
similarity index 90%
rename from src/component/panels/AssignmentListPanel/AssignmentAtomCell.tsx
rename to src/component/panels/AssignmentListPanel/table-cells/AssignmentAtomCell.tsx
index 4006ca70d..5fab00d0e 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentAtomCell.tsx
+++ b/src/component/panels/AssignmentListPanel/table-cells/AssignmentAtomCell.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
-import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
+import type { AssignmentListRow } from '../utilities/atomGroupsToAssignmentRows.js';
 
 interface AssignmentAtomCellProps {
   row: AssignmentListRow;
diff --git a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx b/src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx
similarity index 80%
rename from src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
rename to src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx
index 7640210a3..61e59346d 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentChemicalShiftCell.tsx
+++ b/src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx
@@ -1,16 +1,13 @@
 import { Fragment } from 'react';
 
-import { useACSSettings } from '../../hooks/use_acs_settings.js';
-
+import { useACSSettings } from '../../../hooks/use_acs_settings.js';
+import { formatAssignmentACS } from '../utilities/formatAssignmentACS.js';
+import { formatAssignmentShifts } from '../utilities/formatAssignmentShifts.js';
+import { getAssignmentSignals } from '../utilities/getAssignmentSignals.js';
 import type {
   AssignmentSignals,
   GetAssignmentSignalsOptions,
-} from './assignmentSignals.js';
-import {
-  formatAssignmentACS,
-  formatAssignmentShifts,
-  getAssignmentSignals,
-} from './assignmentSignals.js';
+} from '../utilities/types.js';
 
 interface AssignmentShiftLineProps {
   assignment: AssignmentSignals;
diff --git a/src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx b/src/component/panels/AssignmentListPanel/table-cells/AssignmentLabelCell.tsx
similarity index 100%
rename from src/component/panels/AssignmentListPanel/AssignmentLabelCell.tsx
rename to src/component/panels/AssignmentListPanel/table-cells/AssignmentLabelCell.tsx
diff --git a/src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts b/src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts
new file mode 100644
index 000000000..3e72e52a9
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts
@@ -0,0 +1,8 @@
+import type { ACSExportOptions } from '@zakodium/nmrium-core';
+
+export const assignmentACSOptions: Partial<ACSExportOptions> = {
+  signalKind: 'signal',
+  ascending: true,
+  format: 'IMJ',
+  textStyle: {},
+};
diff --git a/src/component/panels/AssignmentListPanel/assignmentsToCSV.ts b/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
similarity index 87%
rename from src/component/panels/AssignmentListPanel/assignmentsToCSV.ts
rename to src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
index f5d0f8f20..36aa0187e 100644
--- a/src/component/panels/AssignmentListPanel/assignmentsToCSV.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
@@ -2,19 +2,18 @@ import type { ACSExportOptions, Spectrum } from '@zakodium/nmrium-core';
 import type { GroupedDiaID } from 'openchemlib-utils';
 import papa from 'papaparse';
 
-import { formatAssignmentLabel } from './AssignmentLabelCell.js';
-import type { GetAssignmentSignalsOptions } from './assignmentSignals.js';
-import {
-  formatAssignmentACS,
-  formatAssignmentShifts,
-  getAssignmentSignals,
-  getSignalsByNucleus,
-} from './assignmentSignals.js';
+import { formatAssignmentLabel } from '../table-cells/AssignmentLabelCell.js';
+
 import {
   atomGroupsToAssignmentRows,
   getHydrogenIDsByParent,
   getVisibleAssignmentRows,
 } from './atomGroupsToAssignmentRows.js';
+import { formatAssignmentACS } from './formatAssignmentACS.js';
+import { formatAssignmentShifts } from './formatAssignmentShifts.js';
+import { getAssignmentSignals } from './getAssignmentSignals.js';
+import { getSignalsByNucleus } from './getSignalsByNucleus.js';
+import type { GetAssignmentSignalsOptions } from './types.js';
 
 export type AssignmentExportRowMode = 'current' | 'expanded' | 'collapsed';
 
diff --git a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts b/src/component/panels/AssignmentListPanel/utilities/atomGroupsToAssignmentRows.ts
similarity index 98%
rename from src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
rename to src/component/panels/AssignmentListPanel/utilities/atomGroupsToAssignmentRows.ts
index ed6500c86..4ce80b374 100644
--- a/src/component/panels/AssignmentListPanel/atomGroupsToAssignmentRows.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/atomGroupsToAssignmentRows.ts
@@ -1,6 +1,6 @@
 import type { GroupedDiaID } from 'openchemlib-utils';
 
-import { sortAssignmentLabels } from '../MoleculesPanel/utilities/sortAssignmentLabels.js';
+import { sortAssignmentLabels } from '../../MoleculesPanel/utilities/sortAssignmentLabels.js';
 
 /**
  * Controls which atoms show their attached hydrogens in the table.
diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
new file mode 100644
index 000000000..5d9b04e2a
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
@@ -0,0 +1,44 @@
+import type { Range, Signal1D } from '@zakodium/nmr-types';
+import { rangesToACS } from 'nmr-processing';
+
+import { getRangesToACSOptions } from '../../../hooks/use_publication_strings.js';
+
+import { assignmentACSOptions } from './assignmentACSOptions.js';
+import type { AssignedSignal, FormatAssignmentOptions } from './types.js';
+
+/**
+ * Format one spectrum's assignments as ACS HTML without the spectrum header
+ * or final period.
+ */
+export function formatAssignmentACS(options: FormatAssignmentOptions): string {
+  const { assignment } = options;
+  const acs = { ...options.acs, ...assignmentACSOptions };
+  const { spectrum, entries } = assignment;
+
+  const acsString = rangesToACS(getAssignedRanges(entries), {
+    ...getRangesToACSOptions(spectrum.info, acs),
+    filter: false,
+  });
+
+  // "1H NMR (600 MHz): δ 4.04 (d)." becomes "δ 4.04 (d)".
+  return acsString.replaceAll(/^[^:]*:\s*|\.$/g, '');
+}
+
+/**
+ * Rebuild the selected ranges with only the collected signals.
+ */
+function getAssignedRanges(entries: AssignedSignal[]): Range[] {
+  const signalsByRange = new Map<Range, Signal1D[]>();
+  for (const { range, signal } of entries) {
+    const signals = signalsByRange.get(range);
+    if (signals) {
+      signals.push(signal);
+    } else {
+      signalsByRange.set(range, [signal]);
+    }
+  }
+  return Array.from(signalsByRange, ([range, signals]) => ({
+    ...range,
+    signals,
+  }));
+}
diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts
new file mode 100644
index 000000000..53db74091
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts
@@ -0,0 +1,21 @@
+import { formatNumber } from '../../../utility/formatNumber.js';
+
+import { assignmentACSOptions } from './assignmentACSOptions.js';
+import type { FormatAssignmentOptions } from './types.js';
+
+/**
+ * Sort and format signal deltas without adding spectrum details or units.
+ * @returns Shift values joined with ', '
+ */
+export function formatAssignmentShifts(
+  options: FormatAssignmentOptions,
+): string {
+  const { entries } = options.assignment;
+  const acs = { ...options.acs, ...assignmentACSOptions };
+
+  return entries
+    .map(({ signal }) => signal.delta)
+    .toSorted((a, b) => (acs.ascending ? a - b : b - a))
+    .map((delta) => formatNumber(delta, acs.deltaFormat))
+    .join(', ');
+}
diff --git a/src/component/panels/AssignmentListPanel/utilities/getAssignedAtomCounts.ts b/src/component/panels/AssignmentListPanel/utilities/getAssignedAtomCounts.ts
new file mode 100644
index 000000000..14d51811a
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/utilities/getAssignedAtomCounts.ts
@@ -0,0 +1,32 @@
+import type { GroupedDiaID } from 'openchemlib-utils';
+
+import type { AssignedAtomCounts, SignalsByOclID } from './types.js';
+
+/**
+ * Count atoms of the nucleus's element in the selected molecule.
+ * The lookup must belong to that nucleus. Counts measure assignment coverage,
+ * not the number of signals or whether the assignments have been verified.
+ */
+export function getAssignedAtomCounts(
+  groups: GroupedDiaID[],
+  signalsByOclID: SignalsByOclID,
+  nucleus: string,
+): AssignedAtomCounts {
+  let assigned = 0;
+  let total = 0;
+  const atomLabel = nucleus.replace(/^\d+/, '');
+
+  for (const group of groups) {
+    if (group.atomLabel !== atomLabel) continue;
+
+    // Count individual equivalent atoms (for example, 3 H in a methyl group),
+    // not one atom per group. The total is independent of observed signals.
+    total += group.atoms.length;
+    // A group counts once if assigned in any spectrum of this nucleus.
+    if (signalsByOclID.has(group.oclID)) {
+      assigned += group.atoms.length;
+    }
+  }
+
+  return { assigned, total };
+}
diff --git a/src/component/panels/AssignmentListPanel/utilities/getAssignmentSignals.ts b/src/component/panels/AssignmentListPanel/utilities/getAssignmentSignals.ts
new file mode 100644
index 000000000..b08bb8020
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/utilities/getAssignmentSignals.ts
@@ -0,0 +1,50 @@
+import type {
+  AssignedSignal,
+  AssignmentSignals,
+  AssignmentSpectrum,
+  GetAssignmentSignalsOptions,
+} from './types.js';
+
+/**
+ * Collect a row's signals and those of its attached hydrogen groups.
+ *
+ * @param options - The row (`row.id` is its OCL ID), nucleus-specific signal
+ * lookup, precomputed parent-to-hydrogen lookup, and optional spectrum ID.
+ * @returns One group per matching spectrum, with duplicate entries removed when
+ * the same signal matches several OCL IDs.
+ */
+export function getAssignmentSignals(
+  options: GetAssignmentSignalsOptions,
+): AssignmentSignals[] {
+  const { row, signalsByOclID, hydrogenIDsByParent, spectrumId } = options;
+  // Include attached H assignments on the parent row even when H rows are hidden.
+  const oclIDs = [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];
+  const signalsBySpectrum = new Map<
+    string,
+    { spectrum: AssignmentSpectrum; signals: Set<AssignedSignal> }
+  >();
+
+  for (const oclID of oclIDs) {
+    for (const entry of signalsByOclID.get(oclID) ?? []) {
+      if (spectrumId !== undefined && entry.spectrum.id !== spectrumId) {
+        continue;
+      }
+      let group = signalsBySpectrum.get(entry.spectrum.id);
+
+      if (!group) {
+        group = { spectrum: entry.spectrum, signals: new Set() };
+        signalsBySpectrum.set(entry.spectrum.id, group);
+      }
+      // A signal linked to several of this row's groups should appear only once.
+      group.signals.add(entry);
+    }
+  }
+
+  return Array.from(signalsBySpectrum.values(), (group) => {
+    const entries = Array.from(group.signals);
+    return {
+      spectrum: group.spectrum,
+      entries,
+    };
+  });
+}
diff --git a/src/component/panels/AssignmentListPanel/utilities/getSignalsByNucleus.ts b/src/component/panels/AssignmentListPanel/utilities/getSignalsByNucleus.ts
new file mode 100644
index 000000000..3254980b9
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/utilities/getSignalsByNucleus.ts
@@ -0,0 +1,60 @@
+import type { Spectrum } from '@zakodium/nmrium-core';
+import { isSpectrum1D } from '@zakodium/nmrium-core';
+
+import type {
+  AssignedSignal,
+  AssignmentSpectrum,
+  SignalsByNucleus,
+} from './types.js';
+
+/**
+ * Build a nucleus to oclIDs lookup of assigned 1D signals.
+ *
+ * @returns A map containing an OCL ID lookup for each 1D nucleus, including
+ * nuclei without assignments so their columns remain visible.
+ * Only the spectrum ID, nucleus, and frequency are retained in a shared metadata
+ * object.
+ *
+ * Notes:
+ * 1. Unassigned signals are omitted.
+ * 2. Repeated IDs within a signal occur once.
+ */
+export function getSignalsByNucleus(spectra: Spectrum[]): SignalsByNucleus {
+  const signalsByNucleus = new Map<string, Map<string, AssignedSignal[]>>();
+  for (const spectrum of spectra) {
+    if (!isSpectrum1D(spectrum)) continue;
+
+    // Share one atom-group lookup across all 1D spectra of the same nucleus.
+    // Create it even without assignments so the nucleus column stays visible.
+    const nucleus = spectrum.info.nucleus;
+    let signalsByOclID = signalsByNucleus.get(nucleus);
+
+    if (!signalsByOclID) {
+      signalsByOclID = new Map();
+      signalsByNucleus.set(nucleus, signalsByOclID);
+    }
+    // Keep each spectrum's frequency for formatting its own coupling values.
+    const assignmentSpectrum: AssignmentSpectrum = {
+      id: spectrum.id,
+      info: {
+        nucleus: spectrum.info.nucleus,
+        originFrequency: spectrum.info.originFrequency,
+      },
+    };
+    for (const range of spectrum.ranges.values) {
+      for (const signal of range.signals) {
+        const entry = { spectrum: assignmentSpectrum, range, signal };
+        // Index a signal under every linked group, without repeating a link.
+        for (const oclID of new Set(signal.diaIDs)) {
+          const entries = signalsByOclID.get(oclID);
+          if (entries) {
+            entries.push(entry);
+          } else {
+            signalsByOclID.set(oclID, [entry]);
+          }
+        }
+      }
+    }
+  }
+  return signalsByNucleus;
+}
diff --git a/src/component/panels/AssignmentListPanel/utilities/types.ts b/src/component/panels/AssignmentListPanel/utilities/types.ts
new file mode 100644
index 000000000..df733758d
--- /dev/null
+++ b/src/component/panels/AssignmentListPanel/utilities/types.ts
@@ -0,0 +1,46 @@
+import type { Range, Signal1D } from '@zakodium/nmr-types';
+import type { ACSExportOptions, Spectrum1D } from '@zakodium/nmrium-core';
+
+import type { AssignmentListRow } from './atomGroupsToAssignmentRows.js';
+
+export interface AssignmentSpectrum {
+  id: string;
+  info: Pick<Spectrum1D['info'], 'nucleus' | 'originFrequency'>;
+}
+
+export interface AssignedSignal {
+  spectrum: AssignmentSpectrum;
+  range: Range;
+  signal: Signal1D;
+}
+
+export type SignalsByOclID = ReadonlyMap<string, readonly AssignedSignal[]>;
+
+/**
+ * Index signals by nucleus, then OCL ID, so each column can directly look up
+ * assignments across all spectra of its nucleus without filtering other nuclei.
+ * Entries retain spectrum metadata because ACS formatting needs its frequency.
+ */
+export type SignalsByNucleus = ReadonlyMap<string, SignalsByOclID>;
+
+export interface AssignedAtomCounts {
+  assigned: number;
+  total: number;
+}
+
+export interface AssignmentSignals {
+  spectrum: AssignmentSpectrum;
+  entries: AssignedSignal[];
+}
+
+export interface GetAssignmentSignalsOptions {
+  row: AssignmentListRow;
+  signalsByOclID: SignalsByOclID;
+  hydrogenIDsByParent: ReadonlyMap<string, readonly string[]>;
+  spectrumId?: string;
+}
+
+export interface FormatAssignmentOptions {
+  assignment: AssignmentSignals;
+  acs: ACSExportOptions;
+}

From 68f99f2ef6fb8fdf476033c9d8d254ca75661202 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 09:08:03 +0200
Subject: [PATCH 16/22] refactor: remove delta symbol from assignment values
 and headers

---
 .../AssignmentListPanel/MoleculeAssignmentTable.tsx       | 1 -
 .../AssignmentListPanel/utilities/assignmentsToCSV.ts     | 2 +-
 .../AssignmentListPanel/utilities/formatAssignmentACS.ts  | 8 ++++----
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index 83f574d5d..566ba53bc 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -58,7 +58,6 @@ function SpectrumColumnHeader({
   return (
     <SpectrumHeader>
       <IsotopesViewer value={nucleus} />
-      <span>&delta;</span>
       <Tag
         minimal
         intent={isFullyAssigned ? 'success' : 'danger'}
diff --git a/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts b/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
index 36aa0187e..c5599d2eb 100644
--- a/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
@@ -62,7 +62,7 @@ export function exportAssignmentsToCSV(
     'Atom',
     'Atom numbers',
     'Atom labels',
-    ...nuclei.map(({ nucleus }) => `${nucleus} \u{03B4}`),
+    ...nuclei.map(({ nucleus }) => nucleus),
   ];
   const data = rows.map((row) => [
     row.atomLabel,
diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
index 5d9b04e2a..677def620 100644
--- a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
@@ -7,8 +7,8 @@ import { assignmentACSOptions } from './assignmentACSOptions.js';
 import type { AssignedSignal, FormatAssignmentOptions } from './types.js';
 
 /**
- * Format one spectrum's assignments as ACS HTML without the spectrum header
- * or final period.
+ * Format one spectrum's assignments as ACS HTML without the spectrum header,
+ * delta prefix, or final period.
  */
 export function formatAssignmentACS(options: FormatAssignmentOptions): string {
   const { assignment } = options;
@@ -20,8 +20,8 @@ export function formatAssignmentACS(options: FormatAssignmentOptions): string {
     filter: false,
   });
 
-  // "1H NMR (600 MHz): δ 4.04 (d)." becomes "δ 4.04 (d)".
-  return acsString.replaceAll(/^[^:]*:\s*|\.$/g, '');
+  // "1H NMR (600 MHz): δ 4.04 (d)." becomes "4.04 (d)".
+  return acsString.replaceAll(/^(?:[^:]*:\s*)?\u{03B4}\s*|\.$/gu, '');
 }
 
 /**

From a8acf282e7958ff79ede7d9995e71c61b576bafe Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 09:09:58 +0200
Subject: [PATCH 17/22] refactor: reduce column width for atom labels to 50px

---
 .../panels/AssignmentListPanel/MoleculeAssignmentTable.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
index 566ba53bc..7cb258ba1 100644
--- a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
@@ -94,7 +94,7 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
       {
         header: 'Atom',
         accessorKey: 'atomLabel',
-        meta: { style: { width: '80px' } },
+        meta: { style: { width: '50px' } },
         enableSorting: false,
         cell: ({ row }) => (
           <AssignmentAtomCell row={row.original} onToggle={onToggleRow} />

From c0580998fc57b46e0ed4ac56581bf1406b6234a4 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 09:17:33 +0200
Subject: [PATCH 18/22] refactor: use shift only (D) formatting for carbon
 assignments

---
 .../AssignmentListPanel/utilities/formatAssignmentACS.ts    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
index 677def620..9ffe9cfc8 100644
--- a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
@@ -12,8 +12,12 @@ import type { AssignedSignal, FormatAssignmentOptions } from './types.js';
  */
 export function formatAssignmentACS(options: FormatAssignmentOptions): string {
   const { assignment } = options;
-  const acs = { ...options.acs, ...assignmentACSOptions };
   const { spectrum, entries } = assignment;
+  const acs = {
+    ...options.acs,
+    ...assignmentACSOptions,
+    ...(spectrum.info.nucleus === '13C' && { format: 'D' }),
+  };
 
   const acsString = rangesToACS(getAssignedRanges(entries), {
     ...getRangesToACSOptions(spectrum.info, acs),

From 29a6b09670f2d3cd8c4d3a16e166bc665add6ee9 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 09:23:00 +0200
Subject: [PATCH 19/22] refactor: simplify assignment shift formatting

---
 .../AssignmentChemicalShiftCell.tsx            |  2 +-
 .../utilities/assignmentACSOptions.ts          |  8 --------
 .../utilities/assignmentsToCSV.ts              |  2 +-
 .../utilities/formatAssignmentACS.ts           |  9 ++++++++-
 .../utilities/formatAssignmentShifts.ts        | 18 +++++++++++-------
 5 files changed, 21 insertions(+), 18 deletions(-)
 delete mode 100644 src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts

diff --git a/src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx b/src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx
index 61e59346d..6c391d3a3 100644
--- a/src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx
+++ b/src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx
@@ -19,7 +19,7 @@ function AssignmentShift(options: AssignmentShiftLineProps) {
   const { spectrum } = assignment;
   const acs = useACSSettings(spectrum.info.nucleus);
   const value = shiftsOnly
-    ? formatAssignmentShifts({ assignment, acs })
+    ? formatAssignmentShifts({ assignment, deltaFormat: acs.deltaFormat })
     : formatAssignmentACS({ assignment, acs });
 
   return (
diff --git a/src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts b/src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts
deleted file mode 100644
index 3e72e52a9..000000000
--- a/src/component/panels/AssignmentListPanel/utilities/assignmentACSOptions.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ACSExportOptions } from '@zakodium/nmrium-core';
-
-export const assignmentACSOptions: Partial<ACSExportOptions> = {
-  signalKind: 'signal',
-  ascending: true,
-  format: 'IMJ',
-  textStyle: {},
-};
diff --git a/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts b/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
index c5599d2eb..a2202bbb2 100644
--- a/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
@@ -101,7 +101,7 @@ function formatAssignmentCSVCell(
   return getAssignmentSignals(options)
     .map((assignment) => {
       if (row.isHydrogen) {
-        return `${formatAssignmentShifts({ assignment, acs })} ppm`;
+        return `${formatAssignmentShifts({ assignment, deltaFormat: acs.deltaFormat })} ppm`;
       }
       // The ACS formatter emits <i>J</i> for couplings
       // Strip HTML tags so spreadsheet cells contain plain text.
diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
index 9ffe9cfc8..d7605a429 100644
--- a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
@@ -1,11 +1,18 @@
 import type { Range, Signal1D } from '@zakodium/nmr-types';
+import type { ACSExportOptions } from '@zakodium/nmrium-core';
 import { rangesToACS } from 'nmr-processing';
 
 import { getRangesToACSOptions } from '../../../hooks/use_publication_strings.js';
 
-import { assignmentACSOptions } from './assignmentACSOptions.js';
 import type { AssignedSignal, FormatAssignmentOptions } from './types.js';
 
+const assignmentACSOptions: Partial<ACSExportOptions> = {
+  signalKind: 'signal',
+  ascending: true,
+  format: 'IMJ',
+  textStyle: {},
+};
+
 /**
  * Format one spectrum's assignments as ACS HTML without the spectrum header,
  * delta prefix, or final period.
diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts
index 53db74091..60b5f18cb 100644
--- a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts
@@ -1,21 +1,25 @@
 import { formatNumber } from '../../../utility/formatNumber.js';
 
-import { assignmentACSOptions } from './assignmentACSOptions.js';
-import type { FormatAssignmentOptions } from './types.js';
+import type { AssignmentSignals } from './types.js';
+
+interface FormatAssignmentShiftsOptions {
+  assignment: AssignmentSignals;
+  deltaFormat: string;
+}
 
 /**
  * Sort and format signal deltas without adding spectrum details or units.
  * @returns Shift values joined with ', '
  */
 export function formatAssignmentShifts(
-  options: FormatAssignmentOptions,
+  options: FormatAssignmentShiftsOptions,
 ): string {
-  const { entries } = options.assignment;
-  const acs = { ...options.acs, ...assignmentACSOptions };
+  const { assignment, deltaFormat } = options;
+  const { entries } = assignment;
 
   return entries
     .map(({ signal }) => signal.delta)
-    .toSorted((a, b) => (acs.ascending ? a - b : b - a))
-    .map((delta) => formatNumber(delta, acs.deltaFormat))
+    .toSorted((a, b) => a - b)
+    .map((delta) => formatNumber(delta, deltaFormat))
     .join(', ');
 }

From 6174362e2c7b6eff43e0135557365a03db099a0c Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 10:11:43 +0200
Subject: [PATCH 20/22] refactor: copy assignments as TSV while keeping export
 as CSV

---
 .../AssignmentListPanel.tsx                   |  4 +-
 ...SVModal.tsx => AssignmentsExportModal.tsx} | 52 ++++++++++---------
 ...signmentsToCSV.ts => exportAssignments.ts} | 20 ++++---
 3 files changed, 38 insertions(+), 38 deletions(-)
 rename src/component/panels/AssignmentListPanel/{AssignmentsExportAsCSVModal.tsx => AssignmentsExportModal.tsx} (80%)
 rename src/component/panels/AssignmentListPanel/utilities/{assignmentsToCSV.ts => exportAssignments.ts} (84%)

diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
index fb52da3f3..6222029e7 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
@@ -13,7 +13,7 @@ import type { ToolbarPopoverMenuItem } from '../../elements/ToolbarPopoverItem.j
 import { ToolbarPopoverItem } from '../../elements/ToolbarPopoverItem.js';
 import { TablePanel } from '../extra/BasicPanelStyle.js';
 
-import { AssignmentsExportAsCSVModal } from './AssignmentsExportAsCSVModal.js';
+import { AssignmentsExportModal } from './AssignmentsExportModal.js';
 import { MoleculeAssignmentTable } from './MoleculeAssignmentTable.js';
 import { atomGroupsToAssignmentRows } from './utilities/atomGroupsToAssignmentRows.js';
 
@@ -194,7 +194,7 @@ function AssignmentList(props: AssignmentListProps) {
     <TablePanel>
       <PanelHeader>
         <Toolbar>
-          <AssignmentsExportAsCSVModal
+          <AssignmentsExportModal
             groups={activeAssignment.groups}
             expandedGroups={expansion.expandedGroups}
             moleculeLabel={molecule.label}
diff --git a/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx b/src/component/panels/AssignmentListPanel/AssignmentsExportModal.tsx
similarity index 80%
rename from src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
rename to src/component/panels/AssignmentListPanel/AssignmentsExportModal.tsx
index 27b43da00..e824deffd 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentsExportAsCSVModal.tsx
+++ b/src/component/panels/AssignmentListPanel/AssignmentsExportModal.tsx
@@ -18,10 +18,11 @@ import { useDialogToggle } from '../../hooks/useDialogToggle.js';
 import { useACSSettings } from '../../hooks/use_acs_settings.js';
 import { saveAs } from '../../utility/save_as.js';
 
-import type { AssignmentExportRowMode } from './utilities/assignmentsToCSV.js';
-import { exportAssignmentsToCSV } from './utilities/assignmentsToCSV.js';
+import type { AssignmentExportRowMode } from './utilities/exportAssignments.js';
+import { exportAssignments } from './utilities/exportAssignments.js';
 
 type ExportAction = 'copy' | 'export';
+
 interface RowOption {
   label: string;
   description: string;
@@ -29,7 +30,7 @@ interface RowOption {
 }
 
 const EXPORT_MENU = [
-  { text: 'Copy as CSV', icon: <FaCopy />, data: 'copy' },
+  { text: 'Copy as TSV', icon: <FaCopy />, data: 'copy' },
   { text: 'Export as CSV', icon: <FaDownload />, data: 'export' },
 ] satisfies Array<ToolbarPopoverMenuItem<ExportAction>>;
 
@@ -55,15 +56,13 @@ const ROW_OPTIONS: RowOption[] = [
 
 const INITIAL_VALUES: { rows: AssignmentExportRowMode } = { rows: 'current' };
 
-interface AssignmentsExportAsCSVModalProps {
+interface AssignmentsExportModalProps {
   groups: GroupedDiaID[];
   expandedGroups: ReadonlySet<string>;
   moleculeLabel: string;
 }
 
-export function AssignmentsExportAsCSVModal(
-  props: AssignmentsExportAsCSVModalProps,
-) {
+export function AssignmentsExportModal(props: AssignmentsExportModalProps) {
   const { groups, expandedGroups, moleculeLabel } = props;
   const { data } = useChartData();
   const { current } = usePreferences();
@@ -71,7 +70,7 @@ export function AssignmentsExportAsCSVModal(
   const toaster = useToaster();
   const [action, setAction] = useState<ExportAction>('copy');
   const { dialog, openDialog, closeDialog } = useDialogToggle({
-    exportAsCSV: false,
+    exportAssignments: false,
   });
   const { rawWriteWithType, shouldFallback, cleanShouldFallback, text } =
     useClipboard();
@@ -83,30 +82,32 @@ export function AssignmentsExportAsCSVModal(
 
   function handleOpenDialog(exportAction: ExportAction) {
     setAction(exportAction);
-    openDialog('exportAsCSV');
+    openDialog('exportAssignments');
   }
 
   async function handleExport(
     exportAction: ExportAction,
     rowMode: AssignmentExportRowMode,
   ) {
+    const isCopy = exportAction === 'copy';
     try {
-      const csv = exportAssignmentsToCSV({
+      const delimitedText = exportAssignments({
         groups,
         spectra: data,
         expandedGroups,
         rowMode,
         acsExportSettings: current.acsExportSettings,
         defaultACSOptions,
+        delimiter: isCopy ? '\t' : ',',
       });
 
-      if (exportAction === 'copy') {
-        await rawWriteWithType(csv, 'text/plain');
+      if (isCopy) {
+        await rawWriteWithType(delimitedText, 'text/plain');
         return closeDialog();
       }
 
       saveAs({
-        blob: new Blob([csv], { type: 'text/csv;charset=utf-8' }),
+        blob: new Blob([delimitedText], { type: 'text/csv;charset=utf-8' }),
         name: `${moleculeLabel}-assignments`,
         extension: '.csv',
       });
@@ -114,9 +115,8 @@ export function AssignmentsExportAsCSVModal(
       closeDialog();
     } catch (error: unknown) {
       toaster.show({
-        message: `Could not ${exportAction} assignments as CSV: ${
-          error instanceof Error ? error.message : String(error)
-        }`,
+        message: `Could not ${exportAction} assignments as ${isCopy ? 'TSV' : 'CSV'}: ${error instanceof Error ? error.message : String(error)
+          }`,
         intent: 'danger',
       });
     }
@@ -131,8 +131,8 @@ export function AssignmentsExportAsCSVModal(
         options={exportMenu}
         disabled={groups.length === 0}
       />
-      {dialog.exportAsCSV && (
-        <AssignmentsExportAsCSVModalContent
+      {dialog.exportAssignments && (
+        <AssignmentsExportModalContent
           action={action}
           onClose={closeDialog}
           onSubmit={(rowMode) => handleExport(action, rowMode)}
@@ -142,7 +142,7 @@ export function AssignmentsExportAsCSVModal(
         mode={shouldFallback}
         onDismiss={cleanShouldFallback}
         text={text}
-        label="Assignments as CSV"
+        label="Assignments as TSV"
       />
     </>
   );
@@ -165,17 +165,19 @@ const Description = styled.p`
   line-height: 1.5;
 `;
 
-interface AssignmentsExportAsCSVModalContentProps {
+interface AssignmentsExportModalContentProps {
   action: ExportAction;
   onClose: () => void;
   onSubmit: (rowMode: AssignmentExportRowMode) => Promise<void>;
 }
 
-function AssignmentsExportAsCSVModalContent(
-  props: AssignmentsExportAsCSVModalContentProps,
+function AssignmentsExportModalContent(
+  props: AssignmentsExportModalContentProps,
 ) {
   const { action, onClose, onSubmit } = props;
   const isCopy = action === 'copy';
+  const actionLabel = isCopy ? 'Copy' : 'Export';
+  const formatLabel = isCopy ? 'TSV' : 'CSV';
   const form = useForm({
     defaultValues: INITIAL_VALUES,
     onSubmit: ({ value }) => onSubmit(value.rows),
@@ -184,7 +186,7 @@ function AssignmentsExportAsCSVModalContent(
   return (
     <StandardDialog
       isOpen
-      title={`${isCopy ? 'Copy' : 'Export'} assignment table as CSV`}
+      title={`${actionLabel} assignment table as ${formatLabel}`}
       icon={isCopy ? 'clipboard' : 'export'}
       onClose={onClose}
       style={{ width: 520 }}
@@ -194,7 +196,7 @@ function AssignmentsExportAsCSVModalContent(
           <form.AppField name="rows">
             {(field) => (
               <field.RadioGroup
-                label="CSV layout"
+                label={`${formatLabel} layout`}
                 style={{ display: 'grid', gap: 10 }}
               >
                 {ROW_OPTIONS.map((option) => (
@@ -223,7 +225,7 @@ function AssignmentsExportAsCSVModalContent(
                 intent="primary"
                 icon={isCopy ? <FaCopy /> : <FaDownload />}
               >
-                {isCopy ? 'Copy CSV' : 'Download CSV'}
+                {`${isCopy ? 'Copy' : 'Download'} ${formatLabel}`}
               </form.SubmitButton>
             </>
           }
diff --git a/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts b/src/component/panels/AssignmentListPanel/utilities/exportAssignments.ts
similarity index 84%
rename from src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
rename to src/component/panels/AssignmentListPanel/utilities/exportAssignments.ts
index a2202bbb2..a0c70bf2c 100644
--- a/src/component/panels/AssignmentListPanel/utilities/assignmentsToCSV.ts
+++ b/src/component/panels/AssignmentListPanel/utilities/exportAssignments.ts
@@ -17,21 +17,20 @@ import type { GetAssignmentSignalsOptions } from './types.js';
 
 export type AssignmentExportRowMode = 'current' | 'expanded' | 'collapsed';
 
-interface ExportAssignmentsToCSVOptions {
+interface ExportAssignmentsOptions {
   groups: readonly GroupedDiaID[];
   spectra: Spectrum[];
   expandedGroups: ReadonlySet<string>;
   rowMode: AssignmentExportRowMode;
   acsExportSettings: Record<string, ACSExportOptions>;
   defaultACSOptions: ACSExportOptions;
+  delimiter: ',' | '\t';
 }
 
 /**
- * Export the selected molecule using the table's row and formatting rules.
+ * Export the selected molecule as CSV or TSV using the table's formatting rules.
  */
-export function exportAssignmentsToCSV(
-  options: ExportAssignmentsToCSVOptions,
-): string {
+export function exportAssignments(options: ExportAssignmentsOptions): string {
   const {
     groups,
     spectra,
@@ -39,6 +38,7 @@ export function exportAssignmentsToCSV(
     rowMode,
     acsExportSettings,
     defaultACSOptions,
+    delimiter,
   } = options;
   const allRows = atomGroupsToAssignmentRows(groups, true);
   const rows =
@@ -77,7 +77,7 @@ export function exportAssignmentsToCSV(
       isExpanded: row.isExpanded,
     }),
     ...nuclei.map(({ signalsByOclID, acs }) =>
-      formatAssignmentCSVCell({
+      formatAssignmentCell({
         row,
         signalsByOclID,
         hydrogenIDsByParent,
@@ -86,16 +86,14 @@ export function exportAssignmentsToCSV(
     ),
   ]);
 
-  return papa.unparse({ fields, data }, { escapeFormulae: true });
+  return papa.unparse({ fields, data }, { delimiter, escapeFormulae: true });
 }
 
-interface FormatAssignmentCSVCellOptions extends GetAssignmentSignalsOptions {
+interface FormatAssignmentCellOptions extends GetAssignmentSignalsOptions {
   acs: ACSExportOptions;
 }
 
-function formatAssignmentCSVCell(
-  options: FormatAssignmentCSVCellOptions,
-): string {
+function formatAssignmentCell(options: FormatAssignmentCellOptions): string {
   const { row, acs } = options;
 
   return getAssignmentSignals(options)

From cc9d7b33239b3a059ecf02468061bed31add63a4 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 10:32:57 +0200
Subject: [PATCH 21/22] refactor: rename 'assignment list' panel to 'assignment
 summary'

---
 src/component/panels/Panels.tsx                        | 10 +++++-----
 .../AssignmentSummaryPanel.tsx}                        |  8 ++++----
 .../AssignmentsExportModal.tsx                         |  0
 .../MoleculeAssignmentTable.tsx                        |  0
 .../table-cells/AssignmentAtomCell.tsx                 |  0
 .../table-cells/AssignmentChemicalShiftCell.tsx        |  0
 .../table-cells/AssignmentLabelCell.tsx                |  0
 .../utilities/atomGroupsToAssignmentRows.ts            |  0
 .../utilities/exportAssignments.ts                     |  0
 .../utilities/formatAssignmentACS.ts                   |  0
 .../utilities/formatAssignmentShifts.ts                |  0
 .../utilities/getAssignedAtomCounts.ts                 |  0
 .../utilities/getAssignmentSignals.ts                  |  0
 .../utilities/getSignalsByNucleus.ts                   |  0
 .../utilities/types.ts                                 |  0
 15 files changed, 9 insertions(+), 9 deletions(-)
 rename src/component/panels/{AssignmentListPanel/AssignmentListPanel.tsx => assignment-summary/AssignmentSummaryPanel.tsx} (97%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/AssignmentsExportModal.tsx (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/MoleculeAssignmentTable.tsx (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/table-cells/AssignmentAtomCell.tsx (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/table-cells/AssignmentChemicalShiftCell.tsx (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/table-cells/AssignmentLabelCell.tsx (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/atomGroupsToAssignmentRows.ts (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/exportAssignments.ts (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/formatAssignmentACS.ts (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/formatAssignmentShifts.ts (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/getAssignedAtomCounts.ts (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/getAssignmentSignals.ts (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/getSignalsByNucleus.ts (100%)
 rename src/component/panels/{AssignmentListPanel => assignment-summary}/utilities/types.ts (100%)

diff --git a/src/component/panels/Panels.tsx b/src/component/panels/Panels.tsx
index 2a6e4964b..1bc1eb00c 100644
--- a/src/component/panels/Panels.tsx
+++ b/src/component/panels/Panels.tsx
@@ -7,8 +7,8 @@ import { Accordion, Toolbar } from 'react-science/ui';
 import { usePreferences } from '../context/PreferencesContext.js';
 import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.js';
 
-import { AssignmentListPanel } from './AssignmentListPanel/AssignmentListPanel.js';
 import type { AccordionItem } from './accordionItems.js';
+import { AssignmentSummaryPanel } from './assignment-summary/AssignmentSummaryPanel.js';
 import { useAccordionItems } from './hooks/useAccordionItems.js';
 import { useGetPanelOptions } from './hooks/useGetPanelOptions.js';
 import { useTogglePanel } from './hooks/useTogglePanel.js';
@@ -66,12 +66,12 @@ function PanelsInner() {
           ...(isExperimental
             ? [
                 <Accordion.Item
-                  key="assignment-list"
-                  id="assignment-list"
-                  title="Assignment list"
+                  key="assignment-summary"
+                  id="assignment-summary"
+                  title="Assignment summary"
                   unmountChildren
                 >
-                  <AssignmentListPanel />
+                  <AssignmentSummaryPanel />
                 </Accordion.Item>,
               ]
             : []),
diff --git a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx b/src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx
similarity index 97%
rename from src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
rename to src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx
index 6222029e7..60ad99153 100644
--- a/src/component/panels/AssignmentListPanel/AssignmentListPanel.tsx
+++ b/src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx
@@ -161,7 +161,7 @@ function ExpansionMenu(props: ExpansionMenuProps) {
   );
 }
 
-export function AssignmentListPanel() {
+export function AssignmentSummaryPanel() {
   const { molecules } = useChartData();
   const { moleculeAssignments, activeAssignment, selectMolecule } =
     useMoleculeAssignments(molecules);
@@ -171,7 +171,7 @@ export function AssignmentListPanel() {
   }
 
   return (
-    <AssignmentList
+    <AssignmentSummary
       moleculeAssignments={moleculeAssignments}
       activeAssignment={activeAssignment}
       onSelectMolecule={selectMolecule}
@@ -179,13 +179,13 @@ export function AssignmentListPanel() {
   );
 }
 
-interface AssignmentListProps {
+interface AssignmentSummaryProps {
   moleculeAssignments: MoleculeAssignmentData[];
   activeAssignment: MoleculeAssignmentData;
   onSelectMolecule: (moleculeId: string) => void;
 }
 
-function AssignmentList(props: AssignmentListProps) {
+function AssignmentSummary(props: AssignmentSummaryProps) {
   const { moleculeAssignments, activeAssignment, onSelectMolecule } = props;
   const expansion = useAssignmentExpansion(activeAssignment);
   const { molecule } = activeAssignment;
diff --git a/src/component/panels/AssignmentListPanel/AssignmentsExportModal.tsx b/src/component/panels/assignment-summary/AssignmentsExportModal.tsx
similarity index 100%
rename from src/component/panels/AssignmentListPanel/AssignmentsExportModal.tsx
rename to src/component/panels/assignment-summary/AssignmentsExportModal.tsx
diff --git a/src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx b/src/component/panels/assignment-summary/MoleculeAssignmentTable.tsx
similarity index 100%
rename from src/component/panels/AssignmentListPanel/MoleculeAssignmentTable.tsx
rename to src/component/panels/assignment-summary/MoleculeAssignmentTable.tsx
diff --git a/src/component/panels/AssignmentListPanel/table-cells/AssignmentAtomCell.tsx b/src/component/panels/assignment-summary/table-cells/AssignmentAtomCell.tsx
similarity index 100%
rename from src/component/panels/AssignmentListPanel/table-cells/AssignmentAtomCell.tsx
rename to src/component/panels/assignment-summary/table-cells/AssignmentAtomCell.tsx
diff --git a/src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx b/src/component/panels/assignment-summary/table-cells/AssignmentChemicalShiftCell.tsx
similarity index 100%
rename from src/component/panels/AssignmentListPanel/table-cells/AssignmentChemicalShiftCell.tsx
rename to src/component/panels/assignment-summary/table-cells/AssignmentChemicalShiftCell.tsx
diff --git a/src/component/panels/AssignmentListPanel/table-cells/AssignmentLabelCell.tsx b/src/component/panels/assignment-summary/table-cells/AssignmentLabelCell.tsx
similarity index 100%
rename from src/component/panels/AssignmentListPanel/table-cells/AssignmentLabelCell.tsx
rename to src/component/panels/assignment-summary/table-cells/AssignmentLabelCell.tsx
diff --git a/src/component/panels/AssignmentListPanel/utilities/atomGroupsToAssignmentRows.ts b/src/component/panels/assignment-summary/utilities/atomGroupsToAssignmentRows.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/atomGroupsToAssignmentRows.ts
rename to src/component/panels/assignment-summary/utilities/atomGroupsToAssignmentRows.ts
diff --git a/src/component/panels/AssignmentListPanel/utilities/exportAssignments.ts b/src/component/panels/assignment-summary/utilities/exportAssignments.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/exportAssignments.ts
rename to src/component/panels/assignment-summary/utilities/exportAssignments.ts
diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts b/src/component/panels/assignment-summary/utilities/formatAssignmentACS.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/formatAssignmentACS.ts
rename to src/component/panels/assignment-summary/utilities/formatAssignmentACS.ts
diff --git a/src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts b/src/component/panels/assignment-summary/utilities/formatAssignmentShifts.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/formatAssignmentShifts.ts
rename to src/component/panels/assignment-summary/utilities/formatAssignmentShifts.ts
diff --git a/src/component/panels/AssignmentListPanel/utilities/getAssignedAtomCounts.ts b/src/component/panels/assignment-summary/utilities/getAssignedAtomCounts.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/getAssignedAtomCounts.ts
rename to src/component/panels/assignment-summary/utilities/getAssignedAtomCounts.ts
diff --git a/src/component/panels/AssignmentListPanel/utilities/getAssignmentSignals.ts b/src/component/panels/assignment-summary/utilities/getAssignmentSignals.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/getAssignmentSignals.ts
rename to src/component/panels/assignment-summary/utilities/getAssignmentSignals.ts
diff --git a/src/component/panels/AssignmentListPanel/utilities/getSignalsByNucleus.ts b/src/component/panels/assignment-summary/utilities/getSignalsByNucleus.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/getSignalsByNucleus.ts
rename to src/component/panels/assignment-summary/utilities/getSignalsByNucleus.ts
diff --git a/src/component/panels/AssignmentListPanel/utilities/types.ts b/src/component/panels/assignment-summary/utilities/types.ts
similarity index 100%
rename from src/component/panels/AssignmentListPanel/utilities/types.ts
rename to src/component/panels/assignment-summary/utilities/types.ts

From c31b219c0fc0572a6cb6c37e1ef92e1fc73cd878 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 22 Oct 2026 10:40:46 +0200
Subject: [PATCH 22/22] chore: fix prettier

---
 .../panels/assignment-summary/AssignmentsExportModal.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/component/panels/assignment-summary/AssignmentsExportModal.tsx b/src/component/panels/assignment-summary/AssignmentsExportModal.tsx
index e824deffd..67d074163 100644
--- a/src/component/panels/assignment-summary/AssignmentsExportModal.tsx
+++ b/src/component/panels/assignment-summary/AssignmentsExportModal.tsx
@@ -115,8 +115,9 @@ export function AssignmentsExportModal(props: AssignmentsExportModalProps) {
       closeDialog();
     } catch (error: unknown) {
       toaster.show({
-        message: `Could not ${exportAction} assignments as ${isCopy ? 'TSV' : 'CSV'}: ${error instanceof Error ? error.message : String(error)
-          }`,
+        message: `Could not ${exportAction} assignments as ${isCopy ? 'TSV' : 'CSV'}: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
         intent: 'danger',
       });
     }