diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
index 2331ae50b..b909cb7f7 100644
--- a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
+++ b/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: ,
+ icon: ,
title: `${booleanToString(!isActiveAnnotation('atom-numbers'))} atom number`,
onClick: () => toggleAtomAnnotation('atom-numbers'),
active: isActiveAnnotation('atom-numbers'),
diff --git a/src/component/hooks/usePanelPreferences.ts b/src/component/hooks/usePanelPreferences.ts
index b66025078..1b459cec2 100644
--- a/src/component/hooks/usePanelPreferences.ts
+++ b/src/component/hooks/usePanelPreferences.ts
@@ -11,6 +11,7 @@ import { useMemo } from 'react';
import { getDefaultPredictionOptions } from '../../data/PredictionManager.js';
import { usePreferences } from '../context/PreferencesContext.js';
import {
+ assignmentSummaryDefaultValues,
databaseDefaultValues,
getIntegralDefaultValues,
getMatrixGenerationDefaultValues,
@@ -31,7 +32,8 @@ type Panel =
| 'database'
| 'multipleSpectraAnalysis'
| 'matrixGeneration'
- | 'prediction';
+ | 'prediction'
+ | 'assignmentSummary';
function getDefaultPreferences(panelKey: Panel, nucleus?: string) {
switch (panelKey) {
@@ -53,6 +55,8 @@ function getDefaultPreferences(panelKey: Panel, nucleus?: string) {
return getDefaultPredictionOptions();
case 'matrixGeneration':
return getMatrixGenerationDefaultValues(nucleus);
+ case 'assignmentSummary':
+ return assignmentSummaryDefaultValues;
default:
return {};
@@ -62,7 +66,11 @@ function getDefaultPreferences(panelKey: Panel, nucleus?: string) {
function joinWithNucleusPreferences(
data: PanelsPreferences[Exclude<
Panel,
- 'database' | 'matrixGeneration' | 'multipleSpectraAnalysis' | 'prediction'
+ | 'assignmentSummary'
+ | 'database'
+ | 'matrixGeneration'
+ | 'multipleSpectraAnalysis'
+ | 'prediction'
>],
nucleus: string,
returnOnlyNucleusPreferences = false,
@@ -110,6 +118,8 @@ function getPanelPreferences(
case 'database':
case 'prediction':
return panelPreferences;
+ case 'assignmentSummary':
+ return { ...assignmentSummaryDefaultValues, ...panelPreferences };
default:
return nucleus
? joinWithNucleusPreferences(
@@ -129,9 +139,9 @@ export function usePanelPreferences(
: T extends 'multipleSpectraAnalysis'
? MultipleSpectraAnalysisPreferences
: WorkspacePanelPreferences[T];
-export function usePanelPreferences(
- panelKey: T,
-): WorkspacePanelPreferences[T];
+export function usePanelPreferences<
+ T extends 'database' | 'prediction' | 'assignmentSummary',
+>(panelKey: T): WorkspacePanelPreferences[T];
export function usePanelPreferences(
panelKey: T,
diff --git a/src/component/modal/setting/tanstack_general_settings/tabs/panels_tab.tsx b/src/component/modal/setting/tanstack_general_settings/tabs/panels_tab.tsx
index 21348d44f..14e981252 100644
--- a/src/component/modal/setting/tanstack_general_settings/tabs/panels_tab.tsx
+++ b/src/component/modal/setting/tanstack_general_settings/tabs/panels_tab.tsx
@@ -124,11 +124,17 @@ const ChemicalSettings = withFieldGroup({
)}
+
+ {({ Select }) => (
+
+ )}
+
{({ Select }) => (
)}
+
{({ Select }) => (
diff --git a/src/component/modal/setting/tanstack_general_settings/validation/panels_tab_validation.ts b/src/component/modal/setting/tanstack_general_settings/validation/panels_tab_validation.ts
index af3b78b50..9d75cf2a6 100644
--- a/src/component/modal/setting/tanstack_general_settings/validation/panels_tab_validation.ts
+++ b/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,
diff --git a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
index 56a896283..3be2082cc 100644
--- a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
+++ b/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) {
}
+ icon={}
onClick={() => toggleAtomAnnotation('atom-numbers')}
active={isActiveAnnotation('atom-numbers')}
disabled={!hasMolecules}
diff --git a/src/component/panels/Panels.tsx b/src/component/panels/Panels.tsx
index 1bc1eb00c..f68c09392 100644
--- a/src/component/panels/Panels.tsx
+++ b/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 (
- {[
- ...displayedPanels.map((item) => {
- const { title, component, id } = item;
- return (
- {
- dispatch({
- type: 'TOGGLE_PANEL',
- payload: { id, options: { open: isOpened } },
- });
- }}
- renderToolbar={() => }
- >
- {component}
-
- );
- }),
- ...(isExperimental
- ? [
-
-
- ,
- ]
- : []),
- ]}
+ {displayedPanels.map((item) => {
+ const { title, component, id } = item;
+ return (
+ {
+ dispatch({
+ type: 'TOGGLE_PANEL',
+ payload: { id, options: { open: isOpened } },
+ });
+ }}
+ renderToolbar={() => }
+ >
+ {component}
+
+ );
+ })}
);
diff --git a/src/component/panels/accordionItems.tsx b/src/component/panels/accordionItems.tsx
index e6bdcafe2..5f8441ceb 100644
--- a/src/component/panels/accordionItems.tsx
+++ b/src/component/panels/accordionItems.tsx
@@ -23,6 +23,7 @@ import RangesPanel from './RangesPanel/RangesPanel.js';
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 @@ const accordions: Record<
mode: null,
icon: 'document',
},
+ assignmentSummaryPanel: {
+ title: 'Assignment summary',
+ component: ,
+ mode: null,
+ icon: ,
+ },
structuresPanel: {
title: 'Chemical structures',
component: ,
diff --git a/src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx b/src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx
index 60ad99153..f74d5043e 100644
--- a/src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx
+++ b/src/component/panels/assignment-summary/AssignmentSummaryPanel.tsx
@@ -3,14 +3,18 @@ import { Molecule } from 'openchemlib';
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 @@ function ExpansionMenu(props: ExpansionMenuProps) {
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 ;
}
@@ -175,6 +191,8 @@ export function AssignmentSummaryPanel() {
moleculeAssignments={moleculeAssignments}
activeAssignment={activeAssignment}
onSelectMolecule={selectMolecule}
+ showAtomNumbers={showAtomNumbers}
+ onToggleAtomNumbers={toggleAtomNumbers}
/>
);
}
@@ -183,10 +201,18 @@ interface AssignmentSummaryProps {
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;
@@ -194,6 +220,12 @@ function AssignmentSummary(props: AssignmentSummaryProps) {
+ }
+ tooltip={`${booleanToString(!showAtomNumbers)} atom numbers column`}
+ active={showAtomNumbers}
+ onClick={onToggleAtomNumbers}
+ />
diff --git a/src/component/panels/assignment-summary/MoleculeAssignmentTable.tsx b/src/component/panels/assignment-summary/MoleculeAssignmentTable.tsx
index 7cb258ba1..eb4518b66 100644
--- a/src/component/panels/assignment-summary/MoleculeAssignmentTable.tsx
+++ b/src/component/panels/assignment-summary/MoleculeAssignmentTable.tsx
@@ -27,6 +27,7 @@ interface MoleculeAssignmentTableProps {
groups: GroupedDiaID[];
expandedGroups: ReadonlySet;
onToggleRow: (id: string) => void;
+ showAtomNumbers: boolean;
}
const columnHelper = createTanStackColumnHelper();
@@ -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) {
),
},
- {
- header: 'Atom numbers',
- accessorKey: 'atomNumbers',
- enableSorting: false,
- cell: ({ row }) => (
-
- ),
- },
+ ...(showAtomNumbers
+ ? columnHelper.columns([
+ {
+ header: 'Atom numbers',
+ accessorKey: 'atomNumbers',
+ enableSorting: false,
+ cell: ({ row }) => (
+
+ ),
+ },
+ ])
+ : []),
{
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) ?? [])];
diff --git a/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts b/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts
index 58859ee8e..ca70faa94 100644
--- a/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts
+++ b/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts
@@ -1,4 +1,5 @@
import type {
+ AssignmentSummaryPreferences,
BaseNucleus1DPreferences,
BaseNucleus2DPreferences,
FloatingRangesTablePreferences,
@@ -200,6 +201,11 @@ const databaseDefaultValues: PanelsPreferences['database'] = {
minHeight: 100,
},
};
+
+const assignmentSummaryDefaultValues: AssignmentSummaryPreferences = {
+ showAtomNumbers: false,
+};
+
const getMultipleSpectraAnalysisDefaultValues = (
nucleus?: string,
): PanelsPreferences['multipleSpectraAnalysis'] => {
@@ -241,6 +247,7 @@ const getMatrixGenerationDefaultValues = (
};
export {
+ assignmentSummaryDefaultValues,
databaseDefaultValues,
getIntegralDefaultValues,
getMatrixGenerationDefaultOptions,
diff --git a/src/component/workspaces/workspaceDefaultProperties.ts b/src/component/workspaces/workspaceDefaultProperties.ts
index 0039ab505..1d3a91111 100644
--- a/src/component/workspaces/workspaceDefaultProperties.ts
+++ b/src/component/workspaces/workspaceDefaultProperties.ts
@@ -38,6 +38,7 @@ export const workspaceDefaultProperties: RequiredWorkspacePreferences = {
peaksPanel: { display: false, visible: false, open: false },
predictionPanel: { display: false, visible: false, open: false },
summaryPanel: { display: false, visible: false, open: false },
+ assignmentSummaryPanel: { display: false, visible: false, open: false },
simulationPanel: { display: false, visible: false, open: false },
matrixGenerationPanel: { display: false, visible: false, open: false },
} satisfies Required,