feat: expose assignment summary panel in settings

src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx

@@ -3,8 +3,8 @@ import type { MoleculeView } from '@zakodium/nmrium-core';
 import { useEffect, useState } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import { BsArrowsMove } from 'react-icons/bs';
-import { FaRegBookmark, FaTimes } from 'react-icons/fa';
-import { MdFormatColorText, MdNumbers } from 'react-icons/md';
+import { FaHashtag, FaRegBookmark, FaTimes } from 'react-icons/fa';
+import { MdFormatColorText } from 'react-icons/md';
 import { Rnd } from 'react-rnd';
 
 import type {
@@ -135,7 +135,7 @@ export function DraggableStructure(props: DraggableStructureProps) {
       elementType: 'separator',
     },
     {
-      icon: <MdNumbers />,
+      icon: <FaHashtag />,
       title: `${booleanToString(!isActiveAnnotation('atom-numbers'))} atom number`,
       onClick: () => toggleAtomAnnotation('atom-numbers'),
       active: isActiveAnnotation('atom-numbers'),

src/component/hooks/usePanelPreferences.ts

@@ -11,6 +11,7 @@
 import { getDefaultPredictionOptions } from '../../data/PredictionManager.js';
 import { usePreferences } from '../context/PreferencesContext.js';
 import {
+  assignmentSummaryDefaultValues,
   databaseDefaultValues,
   getIntegralDefaultValues,
   getMatrixGenerationDefaultValues,
@@ -31,7 +32,8 @@
   | 'database'
   | 'multipleSpectraAnalysis'
   | 'matrixGeneration'
-  | 'prediction';
+  | 'prediction'
+  | 'assignmentSummary';
 
 function getDefaultPreferences(panelKey: Panel, nucleus?: string) {
   switch (panelKey) {
@@ -53,6 +55,8 @@
       return getDefaultPredictionOptions();
     case 'matrixGeneration':
       return getMatrixGenerationDefaultValues(nucleus);
+    case 'assignmentSummary':
+      return assignmentSummaryDefaultValues;
 
     default:
       return {};
@@ -62,7 +66,11 @@
 function joinWithNucleusPreferences(
   data: PanelsPreferences[Exclude<
     Panel,
-    'database' | 'matrixGeneration' | 'multipleSpectraAnalysis' | 'prediction'
+    | 'assignmentSummary'
+    | 'database'
+    | 'matrixGeneration'
+    | 'multipleSpectraAnalysis'
+    | 'prediction'
   >],
   nucleus: string,
   returnOnlyNucleusPreferences = false,
@@ -110,6 +118,8 @@
     case 'database':
     case 'prediction':
       return panelPreferences;
+    case 'assignmentSummary':
+      return { ...assignmentSummaryDefaultValues, ...panelPreferences };
     default:
       return nucleus
         ? joinWithNucleusPreferences(
@@ -128,15 +138,15 @@
   ? MatrixGenerationOptions
   : T extends 'multipleSpectraAnalysis'
     ? MultipleSpectraAnalysisPreferences
     : WorkspacePanelPreferences[T];
-export function usePanelPreferences<T extends 'database' | 'prediction'>(
-  panelKey: T,
-): WorkspacePanelPreferences[T];
+export function usePanelPreferences<
+  T extends 'database' | 'prediction' | 'assignmentSummary',
+>(panelKey: T): WorkspacePanelPreferences[T];
 
 export function usePanelPreferences<T extends Panel>(
   panelKey: T,
   nucleus?: string,
 ): WorkspacePanelPreferences[T] {
   const { current } = usePreferences();
   return useMemo(() => {
     return getPanelPreferences(current, panelKey, nucleus);

src/component/modal/setting/tanstack_general_settings/tabs/panels_tab.tsx

@@ -124,11 +124,17 @@ const ChemicalSettings = withFieldGroup({
             <Select label="Chemical structures" items={displayPanelsStatus} />
           )}
         </AppField>
+        <AppField name="assignmentSummaryPanel">
+          {({ Select }) => (
+            <Select label="Assignment summary" items={displayPanelsStatus} />
+          )}
+        </AppField>
         <AppField name="summaryPanel">
           {({ Select }) => (
             <Select label="Summary" items={displayPanelsStatus} />
           )}
         </AppField>
+
         <AppField name="databasePanel">
           {({ Select }) => (
             <Select label="Databases" items={displayPanelsStatus} />

src/component/modal/setting/tanstack_general_settings/validation/panels_tab_validation.ts

@@ -75,6 +75,7 @@ export const displayPanelsValidation = z
     processingsPanel: panelCodec,
     zonesPanel: panelCodec,
     summaryPanel: panelCodec,
+    assignmentSummaryPanel: panelCodec,
     multipleSpectraAnalysisPanel: panelCodec,
     databasePanel: panelCodec,
     predictionPanel: panelCodec,

src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx

@@ -8,6 +8,7 @@ import {
   FaDownload,
   FaFileExport,
   FaFileImage,
+  FaHashtag,
   FaMinusSquare,
   FaPaste,
   FaPlus,
@@ -17,7 +18,7 @@ import {
 } from 'react-icons/fa';
 import { FaMaximize, FaMinimize } from 'react-icons/fa6';
 import { IoOpenOutline } from 'react-icons/io5';
-import { MdFlashAuto, MdNumbers, MdOutlineLabelOff } from 'react-icons/md';
+import { MdFlashAuto, MdOutlineLabelOff } from 'react-icons/md';
 import { PanelHeader, Toolbar, TooltipHelpContent } from 'react-science/ui';
 
 import type {
@@ -456,7 +457,7 @@ export default function MoleculePanelHeader(props: MoleculePanelHeaderProps) {
 
             <Toolbar.Item
               tooltip={`${booleanToString(!isActiveAnnotation('atom-numbers'))} atom number`}
-              icon={<MdNumbers />}
+              icon={<FaHashtag />}
               onClick={() => toggleAtomAnnotation('atom-numbers')}
               active={isActiveAnnotation('atom-numbers')}
               disabled={!hasMolecules}

src/component/panels/Panels.tsx

@@ -5,10 +5,8 @@ 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';
@@ -20,7 +18,6 @@ const Container = styled.div`
 `;
 
 function PanelsInner() {
-  const isExperimental = useCheckExperimentalFeature();
   const getPanelPreferences = useGetPanelOptions();
 
   const { dispatch } = usePreferences();
@@ -41,41 +38,27 @@ 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>
-            );
-          }),
-          ...(isExperimental
-            ? [
-                <Accordion.Item
-                  key="assignment-summary"
-                  id="assignment-summary"
-                  title="Assignment summary"
-                  unmountChildren
-                >
-                  <AssignmentSummaryPanel />
-                </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>
+          );
+        })}
       </Accordion>
     </Container>
   );

src/component/panels/accordionItems.tsx

@@ -23,6 +23,7 @@
 import SpectrumListPanel from './SpectraPanel/SpectrumListPanel.js';
 import SummaryPanel from './SummaryPanel/SummaryPanel.js';
 import ZonesPanel from './ZonesPanel/ZonesPanel.js';
+import { AssignmentSummaryPanel } from './assignment-summary/AssignmentSummaryPanel.js';
 import DatabasePanel from './databasePanel/DatabasePanel.js';
 import FilterPanel from './filtersPanel/FilterPanel.js';
 import { InformationPanel } from './informationPanel/InformationPanel.js';
@@ -114,6 +115,12 @@
     mode: null,
     icon: 'document',
   },
+  assignmentSummaryPanel: {
+    title: 'Assignment summary',
+    component: <AssignmentSummaryPanel />,
+    mode: null,
+    icon: <SvgNmrAssignment2 />,
+  },
   structuresPanel: {
     title: 'Chemical structures',
     component: <MoleculePanel />,

src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx

@@ -3,14 +3,18 @@
 import type { GroupedDiaID } from 'openchemlib-utils';
 import { TopicMolecule } from 'openchemlib-utils';
 import { useMemo, useState } from 'react';
+import { FaHashtag } from 'react-icons/fa';
 import { PanelHeader, Toolbar } from 'react-science/ui';
 
 import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
 import { useChartData } from '../../context/ChartContext.js';
+import { usePreferences } from '../../context/PreferencesContext.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 { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { booleanToString } from '../../utility/booleanToString.js';
 import { TablePanel } from '../extra/BasicPanelStyle.js';
 
 import { AssignmentsExportModal } from './AssignmentsExportModal.js';
@@ -163,9 +167,21 @@
 
 export function AssignmentSummaryPanel() {
   const { molecules } = useChartData();
+  const { dispatch } = usePreferences();
+  const { showAtomNumbers } = usePanelPreferences('assignmentSummary');
   const { moleculeAssignments, activeAssignment, selectMolecule } =
     useMoleculeAssignments(molecules);
 
+  function toggleAtomNumbers() {
+    dispatch({
+      type: 'SET_PANELS_PREFERENCES',
+      payload: {
+        key: 'assignmentSummary',
+        value: { showAtomNumbers: !showAtomNumbers },
+      },
+    });
+  }
+
   if (!activeAssignment) {
     return <EmptyText text="No molecules available" />;
   }
@@ -175,6 +191,8 @@
       moleculeAssignments={moleculeAssignments}
       activeAssignment={activeAssignment}
       onSelectMolecule={selectMolecule}
+      showAtomNumbers={showAtomNumbers}
+      onToggleAtomNumbers={toggleAtomNumbers}
     />
   );
 }
@@ -183,17 +201,31 @@
   moleculeAssignments: MoleculeAssignmentData[];
   activeAssignment: MoleculeAssignmentData;
   onSelectMolecule: (moleculeId: string) => void;
+  showAtomNumbers: boolean;
+  onToggleAtomNumbers: () => void;
 }
 
 function AssignmentSummary(props: AssignmentSummaryProps) {
-  const { moleculeAssignments, activeAssignment, onSelectMolecule } = props;
+  const {
+    moleculeAssignments,
+    activeAssignment,
+    onSelectMolecule,
+    showAtomNumbers,
+    onToggleAtomNumbers,
+  } = props;
   const expansion = useAssignmentExpansion(activeAssignment);
   const { molecule } = activeAssignment;
 
   return (
     <TablePanel>
       <PanelHeader>
         <Toolbar>
+          <Toolbar.Item
+            icon={<FaHashtag />}
+            tooltip={`${booleanToString(!showAtomNumbers)} atom numbers column`}
+            active={showAtomNumbers}
+            onClick={onToggleAtomNumbers}
+          />
           <AssignmentsExportModal
             groups={activeAssignment.groups}
             expandedGroups={expansion.expandedGroups}
@@ -222,6 +254,7 @@
           groups={activeAssignment.groups}
           expandedGroups={expansion.expandedGroups}
           onToggleRow={expansion.toggleRow}
+          showAtomNumbers={showAtomNumbers}
         />
       </div>
     </TablePanel>

src/component/panels/assignment-summary/MoleculeAssignmentTable.tsx

@@ -27,6 +27,7 @@ interface MoleculeAssignmentTableProps {
   groups: GroupedDiaID[];
   expandedGroups: ReadonlySet<string>;
   onToggleRow: (id: string) => void;
+  showAtomNumbers: boolean;
 }
 
 const columnHelper = createTanStackColumnHelper<AssignmentListRow>();
@@ -70,7 +71,7 @@ function SpectrumColumnHeader({
 }
 
 export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
-  const { groups, expandedGroups, onToggleRow } = props;
+  const { groups, expandedGroups, onToggleRow, showAtomNumbers } = props;
   const { data } = useChartData();
   // Build once per data change.
   // headers and cells share the same nucleus lookup.
@@ -100,18 +101,22 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
           <AssignmentAtomCell row={row.original} onToggle={onToggleRow} />
         ),
       },
-      {
-        header: 'Atom numbers',
-        accessorKey: 'atomNumbers',
-        enableSorting: false,
-        cell: ({ row }) => (
-          <AssignmentLabelCell
-            value={row.original.atomNumbers}
-            hydrogenValue={row.original.hydrogenAtomNumbers}
-            isExpanded={row.original.isExpanded}
-          />
-        ),
-      },
+      ...(showAtomNumbers
+        ? columnHelper.columns([
+            {
+              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',
@@ -150,7 +155,13 @@ export function MoleculeAssignmentTable(props: MoleculeAssignmentTableProps) {
         ]),
       ),
     ]);
-  }, [groups, onToggleRow, signalsByNucleus, hydrogenIDsByParent]);
+  }, [
+    groups,
+    onToggleRow,
+    showAtomNumbers,
+    signalsByNucleus,
+    hydrogenIDsByParent,
+  ]);
 
   function getHighlightIDs(row: AssignmentListRow): string[] {
     return [row.id, ...(hydrogenIDsByParent.get(row.id) ?? [])];