feat: add an experimental assignment summary panel

src/component/elements/tanstack_table/elements/table_row.tsx

@@ -103,6 +103,7 @@
     table,
     highlightedSource = 'UNKNOWN',
     getHighlightExtra,
+    getHighlightIDs,
     onContextMenuSelect,
     contextMenu,
     onClick,
@@ -121,13 +122,16 @@
       }) as HighlightEventSource,
     [highlightedSource, row.original, getHighlightExtra],
   );
-  const highlight = useHighlight(getIDs(row), data);
+  const highlight = useHighlight(
+    getHighlightIDs?.(row.original) ?? getIDs(row),
+    data,
+  );
 
   useEffect(() => {
     return () => {
       highlight.hide();
     };
     // TODO: avoid this hack.
     // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, []);
 

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 (

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 }
     : {

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;
 }
 

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,17 +52,26 @@ 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,
     format: '',
   };
 
   if (format !== 'D') {
-    rangesToACSOptions.format = format;
-    rangesToACSOptions.couplingFormat = couplingFormat;
+    options.format = format;
+    options.couplingFormat = couplingFormat;
   }
 
-  return rangesToACS(ranges, rangesToACSOptions);
+  return options;
 }

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 (

src/component/panels/Panels.tsx

@@ -5,8 +5,10 @@ import { memo } from 'react';
 import { Accordion, Toolbar } from 'react-science/ui';
 
 import { usePreferences } from '../context/PreferencesContext.js';
+import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.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';
@@ -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-summary"
+                  id="assignment-summary"
+                  title="Assignment summary"
+                  unmountChildren
+                >
+                  <AssignmentSummaryPanel />
+                </Accordion.Item>,
+              ]
+            : []),
+        ]}
       </Accordion>
     </Container>
   );