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 }) => ( 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,