diff --git a/src/component/1d/peaks/Peaks.tsx b/src/component/1d/peaks/Peaks.tsx index 49300d0029..64c89a9d95 100644 --- a/src/component/1d/peaks/Peaks.tsx +++ b/src/component/1d/peaks/Peaks.tsx @@ -188,9 +188,12 @@ export default function Peaks(props: PeaksProps) { const spectrum = useSpectrum(emptyData) as Spectrum1D; const peaksViewState = useActiveSpectrumPeaksViewState(); const rangesViewState = useActiveSpectrumRangesViewState(); + const { tablePreferences } = usePanelPreferences( + peaksSource === 'peaks' ? 'peaks' : 'ranges', + nucleus, + ); const { deltaPPM: { format: peakFormat } = { format: '0.0' } } = - usePanelPreferences(peaksSource === 'peaks' ? 'peaks' : 'ranges', nucleus); - + tablePreferences; const canDisplaySpectrumPeaks = !spectrum.display.isVisible || spectrum.info?.isFid; let mode: PeaksMode = 'spread'; diff --git a/src/component/1d/peaks/usePeakShapesPath.ts b/src/component/1d/peaks/usePeakShapesPath.ts index 6c935f8971..18e9f71f0e 100644 --- a/src/component/1d/peaks/usePeakShapesPath.ts +++ b/src/component/1d/peaks/usePeakShapesPath.ts @@ -9,13 +9,13 @@ import { PathBuilder } from '../../utility/PathBuilder.js'; type PeaksShapesOptions = | { - target: 'peakShape'; - peak: Peak1D; - } + target: 'peakShape'; + peak: Peak1D; + } | { - target: 'peaksSum'; - peaks: Peak1D[]; - }; + target: 'peaksSum'; + peaks: Peak1D[]; + }; export function usePeakShapesPath(spectrum: Spectrum1D) { const { scaleX, scaleY } = useScaleChecked(); @@ -29,7 +29,6 @@ export function usePeakShapesPath(spectrum: Spectrum1D) { const frequency = spectrum.info.originFrequency; let pathSeries: DataXY | null = null; - switch (target) { case 'peakShape': { const { peak } = options; diff --git a/src/component/1d/ranges/FloatingRangeTablePreferencesModal.tsx b/src/component/1d/ranges/FloatingRangeTablePreferencesModal.tsx new file mode 100644 index 0000000000..71f9b4559f --- /dev/null +++ b/src/component/1d/ranges/FloatingRangeTablePreferencesModal.tsx @@ -0,0 +1,167 @@ +import { DialogBody, DialogFooter } from '@blueprintjs/core'; +import { useMemo } from 'react'; +import { useForm } from 'react-hook-form'; +import { Button } from 'react-science/ui'; + +import { usePreferences } from '../../context/PreferencesContext.js'; +import { StandardDialog } from '../../elements/StandardDialog.tsx'; +import useNucleus from '../../hooks/useNucleus.js'; +import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js'; +import type { NucleusPreferenceField } from '../../panels/extra/preferences/NucleusPreferences.tsx'; +import { NucleusPreferences } from '../../panels/extra/preferences/NucleusPreferences.tsx'; +import { getUniqueNuclei } from '../../utility/getUniqueNuclei.js'; + + + + +const formatFields: NucleusPreferenceField[] = [ + { + id: 1, + label: 'Serial number :', + checkFieldName: 'floatingTablePreferences.showSerialNumber', + hideFormatField: true, + }, + { + id: 2, + label: 'Assignment label :', + checkFieldName: 'floatingTablePreferences.showAssignmentLabel', + hideFormatField: true, + }, + { + id: 3, + label: 'From (ppm) :', + checkFieldName: 'floatingTablePreferences.from.show', + formatFieldName: 'floatingTablePreferences.from.format', + }, + { + id: 4, + label: 'To (ppm) :', + checkFieldName: 'floatingTablePreferences.to.show', + formatFieldName: 'floatingTablePreferences.to.format', + }, + { + id: 5, + label: 'Absolute integration :', + checkFieldName: 'floatingTablePreferences.absolute.show', + formatFieldName: 'floatingTablePreferences.absolute.format', + }, + { + id: 6, + label: 'Relative integration :', + checkFieldName: 'floatingTablePreferences.relative.show', + formatFieldName: 'floatingTablePreferences.relative.format', + }, + { + id: 7, + label: 'δ (ppm) :', + checkFieldName: 'floatingTablePreferences.deltaPPM.show', + formatFieldName: 'floatingTablePreferences.deltaPPM.format', + }, + { + id: 8, + label: 'δ (Hz) :', + checkFieldName: 'floatingTablePreferences.deltaHz.show', + formatFieldName: 'floatingTablePreferences.deltaHz.format', + }, + { + id: 9, + label: 'Coupling (Hz) :', + checkFieldName: 'floatingTablePreferences.coupling.show', + formatFieldName: 'floatingTablePreferences.coupling.format', + }, + { + id: 10, + label: 'Kind :', + checkFieldName: 'floatingTablePreferences.showKind', + hideFormatField: true, + }, + { + id: 11, + label: 'Multiplicity :', + checkFieldName: 'floatingTablePreferences.showMultiplicity', + hideFormatField: true, + }, + { + id: 12, + label: 'Assignment links :', + checkFieldName: 'floatingTablePreferences.showAssignment', + hideFormatField: true, + }, +]; + +interface InnerFloatingRangeTablePreferencesModalProps { + onCloseDialog: () => void; +} + +interface FloatingRangeTablePreferencesModalProps extends InnerFloatingRangeTablePreferencesModalProps { + isOpen: boolean; +} + +export function FloatingRangeTablePreferencesModal(props: FloatingRangeTablePreferencesModalProps) { + const { onCloseDialog, isOpen } = props; + + if (!isOpen) return; + + + + return + + +} + +function InnerFloatingRangeTablePreferencesModal(props: InnerFloatingRangeTablePreferencesModalProps) { + const { onCloseDialog } = props; + const preferences = usePreferences(); + const nucleus = useNucleus(); + const nuclei = useMemo(() => getUniqueNuclei(nucleus), [nucleus]); + const preferencesByNuclei = usePanelPreferencesByNuclei('ranges', nuclei); + + + + const { handleSubmit, control } = useForm({ + defaultValues: preferencesByNuclei, + }); + function saveHandler() { + void handleSubmit((values) => { + preferences.dispatch({ + type: 'SET_PANELS_PREFERENCES', + payload: { key: 'ranges', value: values }, + }); + onCloseDialog(); + })(); + + } + + + return ( + <> + + {nuclei?.map((n) => ( + + ))} + + +
+ +
+ + + + ); +} + diff --git a/src/component/1d/FloatingRanges.tsx b/src/component/1d/ranges/FloatingRanges.tsx similarity index 70% rename from src/component/1d/FloatingRanges.tsx rename to src/component/1d/ranges/FloatingRanges.tsx index 601c651a1d..5f6f7a934e 100644 --- a/src/component/1d/FloatingRanges.tsx +++ b/src/component/1d/ranges/FloatingRanges.tsx @@ -4,25 +4,28 @@ import type { BoundingBox } from '@zakodium/nmrium-core'; import { checkMultiplicity } from 'nmr-processing'; import { memo, useEffect, useState } from 'react'; import { BsArrowsMove } from 'react-icons/bs'; -import { FaTimes } from 'react-icons/fa'; +import { FaCog, FaTimes } from 'react-icons/fa'; import { Rnd } from 'react-rnd'; -import { isSpectrum1D } from '../../data/data1d/Spectrum1D/index.js'; -import { isSignalRange } from '../../data/utilities/RangeUtilities.js'; -import type { SVGTableColumn } from '../SVGTable.js'; -import { SVGTable } from '../SVGTable.js'; -import { useChartData } from '../context/ChartContext.js'; -import { useDispatch } from '../context/DispatchContext.js'; -import { useGlobal } from '../context/GlobalContext.js'; -import type { ActionsButtonsPopoverProps } from '../elements/ActionsButtonsPopover.js'; -import { ActionsButtonsPopover } from '../elements/ActionsButtonsPopover.js'; -import { useActiveNucleusTab } from '../hooks/useActiveNucleusTab.js'; -import { usePanelPreferences } from '../hooks/usePanelPreferences.js'; -import { useSVGUnitConverter } from '../hooks/useSVGUnitConverter.js'; -import useSpectraByActiveNucleus from '../hooks/useSpectraPerNucleus.js'; -import { useCheckExportStatus } from '../hooks/useViewportSize.js'; -import { extractChemicalElement } from '../utility/extractChemicalElement.js'; -import { formatNumber } from '../utility/formatNumber.js'; +import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js'; +import { isSignalRange } from '../../../data/utilities/RangeUtilities.js'; +import type { SVGTableColumn } from '../../SVGTable.js'; +import { SVGTable } from '../../SVGTable.js'; +import { useChartData } from '../../context/ChartContext.js'; +import { useDispatch } from '../../context/DispatchContext.js'; +import { useGlobal } from '../../context/GlobalContext.js'; +import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js'; +import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js'; +import { useActiveNucleusTab } from '../../hooks/useActiveNucleusTab.js'; +import { useDialogToggle } from '../../hooks/useDialogToggle.ts'; +import { usePanelPreferences } from '../../hooks/usePanelPreferences.js'; +import { useSVGUnitConverter } from '../../hooks/useSVGUnitConverter.js'; +import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js'; +import { useCheckExportStatus } from '../../hooks/useViewportSize.js'; +import { extractChemicalElement } from '../../utility/extractChemicalElement.js'; +import { formatNumber } from '../../utility/formatNumber.js'; + +import { FloatingRangeTablePreferencesModal } from './FloatingRangeTablePreferencesModal.tsx'; const ReactRnd = styled(Rnd)` border: 1px solid transparent; @@ -52,21 +55,21 @@ interface RangeItem { function useMapRanges(ranges: Ranges['values']) { const output: RangeItem[] = []; const activeTab = useActiveNucleusTab(); - const preferences = usePanelPreferences('ranges', activeTab); + const { tablePreferences } = usePanelPreferences('ranges', activeTab); for (const range of ranges) { const { id, from, to, integration, signals = [] } = range; const relativeFlag = isSignalRange(range); const formattedValue = formatNumber( integration, - preferences.relative.format, + tablePreferences.relative.format, ); const integrationValue = relativeFlag ? formattedValue : `[ ${formattedValue} ]`; - const rangeText = `${formatNumber(from, preferences.from.format)} - ${formatNumber( + const rangeText = `${formatNumber(from, tablePreferences.from.format)} - ${formatNumber( to, - preferences.to.format, + tablePreferences.to.format, )}`; if (signals.length > 0) { for (const signal of signals) { @@ -74,13 +77,13 @@ function useMapRanges(ranges: Ranges['values']) { const coupling = js .map((jsItem) => !Number.isNaN(jsItem.coupling) - ? formatNumber(jsItem.coupling, preferences.coupling.format) + ? formatNumber(jsItem.coupling, tablePreferences.coupling.format) : '', ) .join(','); const signalDelta = !checkMultiplicity(multiplicity, ['m']) ? rangeText - : formatNumber(delta, preferences.deltaPPM.format); + : formatNumber(delta, tablePreferences.deltaPPM.format); output.push({ id, delta: signalDelta, @@ -171,6 +174,7 @@ function DraggableRanges(props: DraggablePublicationStringProps) { const [isMoveActive, setIsMoveActive] = useState(false); const { percentToPixel, pixelToPercent } = useSVGUnitConverter(); const isExportProcessStart = useCheckExportStatus(); + const { dialog, closeDialog, openDialog } = useDialogToggle({ settingModal: false }) useEffect(() => { setBounding({ ...externalBounding }); @@ -263,12 +267,20 @@ function DraggableRanges(props: DraggablePublicationStringProps) { const actionButtons: ActionsButtonsPopoverProps['buttons'] = [ { icon: , - intent: 'none', title: 'Move ranges table', style: { cursor: 'move' }, className: 'handle', }, + { + icon: , + intent: 'none', + title: 'Table preferences', + onClick: () => { + openDialog('settingModal') + }, + + }, { icon: , intent: 'danger', @@ -292,45 +304,49 @@ function DraggableRanges(props: DraggablePublicationStringProps) { } return ( - setIsMoveActive(true)} - onResize={(e, dir, eRef, size, position) => - handleResize({ ...size, ...position }) - } - onResizeStop={(e, dir, eRef, size, position) => - handleChangeInsetBounding({ ...size, ...position }) - } - onDrag={(e, { x, y }) => { - handleDrag({ x, y }); - }} - onDragStop={(e, { x, y }) => { - handleChangeInsetBounding({ x, y }); - setIsMoveActive(false); - }} - resizeHandleWrapperStyle={{ backgroundColor: 'white' }} - > - + + setIsMoveActive(true)} + onResize={(e, dir, eRef, size, position) => + handleResize({ ...size, ...position }) + } + onResizeStop={(e, dir, eRef, size, position) => + handleChangeInsetBounding({ ...size, ...position }) + } + onDrag={(e, { x, y }) => { + handleDrag({ x, y }); + }} + onDragStop={(e, { x, y }) => { + handleChangeInsetBounding({ x, y }); + setIsMoveActive(false); + }} + resizeHandleWrapperStyle={{ backgroundColor: 'white' }} > - - - + + + + + + ); } diff --git a/src/component/1d/ranges/Ranges.tsx b/src/component/1d/ranges/Ranges.tsx index 3f9258c681..6a7e2f8cf9 100644 --- a/src/component/1d/ranges/Ranges.tsx +++ b/src/component/1d/ranges/Ranges.tsx @@ -100,7 +100,7 @@ export default function Ranges() { toolOptions: { selectedTool }, } = useChartData(); const spectrum = useSpectrum(emptyData) as Spectrum1D; - const rangesPreferences = usePanelPreferences('ranges', activeTab); + const { tablePreferences } = usePanelPreferences('ranges', activeTab); if ( !spectrum.ranges?.values || @@ -114,7 +114,7 @@ export default function Ranges() { ); } diff --git a/src/component/main/NMRiumViewer.tsx b/src/component/main/NMRiumViewer.tsx index 303ebfa8fd..5795f34ad7 100644 --- a/src/component/main/NMRiumViewer.tsx +++ b/src/component/main/NMRiumViewer.tsx @@ -2,9 +2,9 @@ import type { CSSProperties, RefObject } from 'react'; import { useDeferredValue, useEffect } from 'react'; import { FloatPublicationString } from '../1d/FloatPublicationString.js'; -import { FloatingRanges } from '../1d/FloatingRanges.js'; import { Viewer1D } from '../1d/Viewer1D.js'; import { SpectraInsets } from '../1d/inset/SpectraInsets.js'; +import { FloatingRanges } from '../1d/ranges/FloatingRanges.tsx'; import { FloatMolecules } from '../1d-2d/components/FloatMoleculeStructures/FloatMolecules.js'; import { SVGRootContainer } from '../1d-2d/components/SVGRootContainer.js'; import Viewer2D from '../2d/Viewer2D.js'; diff --git a/src/component/modal/EditPeakShapeModal.tsx b/src/component/modal/EditPeakShapeModal.tsx index d0fd7e9abb..7f8f319697 100644 --- a/src/component/modal/EditPeakShapeModal.tsx +++ b/src/component/modal/EditPeakShapeModal.tsx @@ -97,7 +97,7 @@ function InnerEditPeakShapeModal(props: Required) { const { peak, onCloseDialog } = props; const dispatch = useDispatch(); const activeTab = useActiveNucleusTab(); - const peaksPreferences = usePanelPreferences('peaks', activeTab); + const { tablePreferences } = usePanelPreferences('peaks', activeTab); const [kind, setKind] = useState(peak.shape?.kind || 'gaussian'); const { handleSubmit, control, reset } = useForm({ @@ -125,7 +125,7 @@ function InnerEditPeakShapeModal(props: Required) { setKind(value); } - const valuePPM = formatNumber(peak.x, peaksPreferences.deltaPPM.format); + const valuePPM = formatNumber(peak.x, tablePreferences.deltaPPM.format); return ( diff --git a/src/component/modal/editRange/forms/components/NewSignalTab.tsx b/src/component/modal/editRange/forms/components/NewSignalTab.tsx index acecf27469..3d728c32bd 100644 --- a/src/component/modal/editRange/forms/components/NewSignalTab.tsx +++ b/src/component/modal/editRange/forms/components/NewSignalTab.tsx @@ -42,7 +42,7 @@ export function NewSignalTab(props: NewSignalTabProps) { const { selectedTabId: signalIndex, selectTab } = useTabsController(); const { signals } = useWatch(); const activeTab = useActiveNucleusTab(); - const rangesPreferences = usePanelPreferences('ranges', activeTab); + const { tablePreferences } = usePanelPreferences('ranges', activeTab); function saveHandler(val: any) { const newSignal = { @@ -95,8 +95,8 @@ export function NewSignalTab(props: NewSignalTabProps) { Edit or select a delta value of new signal in range [ {`${formatNumber( range.from, - rangesPreferences.from.format, - )} ppm - ${formatNumber(range.to, rangesPreferences.to.format)} ppm`} + tablePreferences.from.format, + )} ppm - ${formatNumber(range.to, tablePreferences.to.format)} ppm`} ]:

(); const deletePeakHandler = useCallback( @@ -64,7 +64,7 @@ export function usePeaksTableColumns(activeTab: string) { saveDeltaPPMRefsHandler(value, row.original)} type="number" @@ -78,7 +78,7 @@ export function usePeaksTableColumns(activeTab: string) { Header: 'δ (Hz)', accessor: 'xHz', Cell: ({ row }: CellProps) => - formatNumber(row.original.xHz, peaksPreferences.deltaHz.format), + formatNumber(row.original.xHz, tablePreferences.deltaHz.format), }, { showWhen: 'intensity.show', @@ -87,7 +87,7 @@ export function usePeaksTableColumns(activeTab: string) { style: { maxWidth: '80px' }, accessor: 'y', Cell: ({ row }: CellProps) => - formatNumber(row.original.y, peaksPreferences.intensity.format), + formatNumber(row.original.y, tablePreferences.intensity.format), }, { showWhen: 'peakWidth.show', @@ -95,7 +95,7 @@ export function usePeaksTableColumns(activeTab: string) { Header: 'Width (Hz)', accessor: 'width', Cell: ({ row }: CellProps) => - formatNumber(row.original.width, peaksPreferences.peakWidth.format), + formatNumber(row.original.width, tablePreferences.peakWidth.format), }, { showWhen: 'showKind', @@ -111,7 +111,7 @@ export function usePeaksTableColumns(activeTab: string) { Cell: ({ row }: CellProps) => { const fwhm = row.original?.shape?.fwhm; if (fwhm) { - return formatNumber(fwhm, peaksPreferences.fwhm.format); + return formatNumber(fwhm, tablePreferences.fwhm.format); } return ''; }, @@ -127,7 +127,7 @@ export function usePeaksTableColumns(activeTab: string) { row.original?.shape?.kind === 'pseudoVoigt' && row.original?.shape?.mu; if (mu) { - return formatNumber(mu, peaksPreferences.mu.format); + return formatNumber(mu, tablePreferences.mu.format); } return ''; }, @@ -144,7 +144,7 @@ export function usePeaksTableColumns(activeTab: string) { row.original?.shape?.kind === 'generalizedLorentzian' && row.original?.shape?.gamma; if (gamma) { - return formatNumber(gamma, peaksPreferences.gamma.format); + return formatNumber(gamma, tablePreferences.gamma.format); } return ''; }, @@ -170,7 +170,7 @@ export function usePeaksTableColumns(activeTab: string) { }, ], [ - peaksPreferences, + tablePreferences, saveDeltaPPMRefsHandler, deletePeakHandler, editPeakHandler, @@ -181,14 +181,14 @@ export function usePeaksTableColumns(activeTab: string) { const columns: Array> = []; for (const col of COLUMNS) { const { showWhen, ...colParams } = col; - if (dlv(peaksPreferences, showWhen)) { + if (dlv(tablePreferences, showWhen)) { addCustomColumn(columns, colParams); } } columns.sort((object1, object2) => object1.index - object2.index); return columns; - }, [COLUMNS, peaksPreferences]); + }, [COLUMNS, tablePreferences]); return { tableColumns, peak, setEditedPeak }; } diff --git a/src/component/panels/RangesPanel/RangesPreferences.tsx b/src/component/panels/RangesPanel/RangesPreferences.tsx index 85e2c09a5c..90f80dca1e 100644 --- a/src/component/panels/RangesPanel/RangesPreferences.tsx +++ b/src/component/panels/RangesPanel/RangesPreferences.tsx @@ -18,91 +18,91 @@ const formatFields: NucleusPreferenceField[] = [ { id: 1, label: 'Serial number :', - checkFieldName: 'showSerialNumber', + checkFieldName: 'tablePreferences.showSerialNumber', hideFormatField: true, }, { id: 2, label: 'Assignment label :', - checkFieldName: 'showAssignmentLabel', + checkFieldName: 'tablePreferences.showAssignmentLabel', hideFormatField: true, }, { id: 3, label: 'From (ppm) :', - checkFieldName: 'from.show', - formatFieldName: 'from.format', + checkFieldName: 'tablePreferences.from.show', + formatFieldName: 'tablePreferences.from.format', }, { id: 4, label: 'To (ppm) :', - checkFieldName: 'to.show', - formatFieldName: 'to.format', + checkFieldName: 'tablePreferences.to.show', + formatFieldName: 'tablePreferences.to.format', }, { id: 5, label: 'Absolute integration :', - checkFieldName: 'absolute.show', - formatFieldName: 'absolute.format', + checkFieldName: 'tablePreferences.absolute.show', + formatFieldName: 'tablePreferences.absolute.format', }, { id: 6, label: 'Relative integration :', - checkFieldName: 'relative.show', - formatFieldName: 'relative.format', + checkFieldName: 'tablePreferences.relative.show', + formatFieldName: 'tablePreferences.relative.format', }, { id: 7, label: 'δ (ppm) :', - checkFieldName: 'deltaPPM.show', - formatFieldName: 'deltaPPM.format', + checkFieldName: 'tablePreferences.deltaPPM.show', + formatFieldName: 'tablePreferences.deltaPPM.format', }, { id: 8, label: 'δ (Hz) :', - checkFieldName: 'deltaHz.show', - formatFieldName: 'deltaHz.format', + checkFieldName: 'tablePreferences.deltaHz.show', + formatFieldName: 'tablePreferences.deltaHz.format', }, { id: 9, label: 'Coupling (Hz) :', - checkFieldName: 'coupling.show', - formatFieldName: 'coupling.format', + checkFieldName: 'tablePreferences.coupling.show', + formatFieldName: 'tablePreferences.coupling.format', }, { id: 10, label: 'Kind :', - checkFieldName: 'showKind', + checkFieldName: 'tablePreferences.showKind', hideFormatField: true, }, { id: 11, label: 'Multiplicity :', - checkFieldName: 'showMultiplicity', + checkFieldName: 'tablePreferences.showMultiplicity', hideFormatField: true, }, { id: 12, label: 'Assignment links :', - checkFieldName: 'showAssignment', + checkFieldName: 'tablePreferences.showAssignment', hideFormatField: true, }, { id: 13, label: 'Delete action :', - checkFieldName: 'showDeleteAction', + checkFieldName: 'tablePreferences.showDeleteAction', hideFormatField: true, }, { id: 14, label: 'Zoom action :', - checkFieldName: 'showZoomAction', + checkFieldName: 'tablePreferences.showZoomAction', hideFormatField: true, }, { id: 15, label: 'Edit action :', - checkFieldName: 'showEditAction', + checkFieldName: 'tablePreferences.showEditAction', hideFormatField: true, }, ]; diff --git a/src/component/panels/RangesPanel/RangesTable.tsx b/src/component/panels/RangesPanel/RangesTable.tsx index 25a43bcc2a..022ed517d2 100644 --- a/src/component/panels/RangesPanel/RangesTable.tsx +++ b/src/component/panels/RangesPanel/RangesTable.tsx @@ -79,6 +79,8 @@ export default function RangesTable(props: RangesTableProps) { info, } = props; + const { tablePreferences } = preferences; + const element = extractChemicalElement(activeTab); const { items: sortedData, isSortedDesc, onSort } = useTableSortBy(tableData); const data = useMapRanges(sortedData); @@ -92,9 +94,9 @@ export default function RangesTable(props: RangesTableProps) { } const showActions = - preferences.showDeleteAction || - preferences.showEditAction || - preferences.showZoomAction; + tablePreferences.showDeleteAction || + tablePreferences.showEditAction || + tablePreferences.showZoomAction; return ( <> @@ -102,43 +104,43 @@ export default function RangesTable(props: RangesTableProps) { - {preferences.showSerialNumber && } - {preferences.showAssignmentLabel && ( + {tablePreferences.showSerialNumber && } + {tablePreferences.showAssignmentLabel && ( )} - {preferences.from.show && ( + {tablePreferences.from.show && ( )} - {preferences.to.show && ( + {tablePreferences.to.show && ( )} - {preferences.deltaPPM.show && ( + {tablePreferences.deltaPPM.show && ( )} - {preferences.deltaHz.show && } + {tablePreferences.deltaHz.show && } - {preferences.relative.show && ( + {tablePreferences.relative.show && ( )} - {preferences.absolute.show && } - {preferences.showMultiplicity && } - {preferences.coupling.show && } + {tablePreferences.absolute.show && } + {tablePreferences.showMultiplicity && } + {tablePreferences.coupling.show && } - {preferences.showAssignment && ( + {tablePreferences.showAssignment && ( )} - {preferences.showKind && } + {tablePreferences.showKind && } {showActions && } diff --git a/src/component/panels/RangesPanel/RangesTableRow.tsx b/src/component/panels/RangesPanel/RangesTableRow.tsx index f11ac95a5a..01471d5a01 100644 --- a/src/component/panels/RangesPanel/RangesTableRow.tsx +++ b/src/component/panels/RangesPanel/RangesTableRow.tsx @@ -67,7 +67,7 @@ export default function RangesTableRow(props: RangesTableRowProps) { rowData, onContextMenuSelect, contextMenu = [], - preferences, + preferences: { tablePreferences }, info, } = props; const dispatch = useDispatch(); @@ -181,12 +181,12 @@ export default function RangesTableRow(props: RangesTableRowProps) { as="tr" style={trStyle} > - {preferences.showSerialNumber && ( + {tablePreferences.showSerialNumber && ( )} - {preferences.showAssignmentLabel && ( + {tablePreferences.showAssignmentLabel && ( )} - {preferences.from.show && ( + {tablePreferences.from.show && ( )} - {preferences.to.show && ( + {tablePreferences.to.show && ( )} - {preferences.deltaPPM.show && ( + {tablePreferences.deltaPPM.show && ( )} - {preferences.deltaHz.show && ( + {tablePreferences.deltaHz.show && ( )} - {preferences.relative.show && ( + {tablePreferences.relative.show && ( )} - {preferences.absolute.show && ( + {tablePreferences.absolute.show && ( )} - {preferences.showMultiplicity && ( + {tablePreferences.showMultiplicity && ( )} - {preferences.coupling.show && ( + {tablePreferences.coupling.show && ( )} - {preferences.showAssignment && ( + {tablePreferences.showAssignment && ( ); diff --git a/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts b/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts index 4bb5f7d31e..d420752518 100644 --- a/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts +++ b/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts @@ -1,10 +1,12 @@ import type { BaseNucleus1DPreferences, BaseNucleus2DPreferences, + BaseRangesTablePreferences, MatrixGenerationOptions, MultipleSpectraAnalysisPreferences, PanelsPreferences, PeaksNucleusPreferences, + RangesNucleusPreferences, SpectraPreferences, Zones1DNucleusPreferences, Zones2DNucleusPreferences, @@ -124,26 +126,33 @@ const getZoneDefaultValues = (nucleus?: string): PanelsPreferences['zones'] => { } }; +const createBaseRangesTablePreferences = (): BaseRangesTablePreferences => ({ + showSerialNumber: true, + from: { show: false, format: '0.00' }, + to: { show: false, format: '0.00' }, + absolute: { show: false, format: '0.00' }, + relative: { show: true, format: '0.00' }, + deltaPPM: { show: true, format: '0.00' }, + deltaHz: { show: false, format: '0.00' }, + coupling: { show: true, format: '0.00' }, + showKind: true, + showMultiplicity: true, + showAssignment: true, + showAssignmentLabel: true, +}); + const getRangeDefaultValues = ( nucleus?: string, ): PanelsPreferences['ranges'] => { - const preferences = { - showSerialNumber: true, - from: { show: false, format: '0.00' }, - to: { show: false, format: '0.00' }, - absolute: { show: false, format: '0.00' }, - relative: { show: true, format: '0.00' }, - deltaPPM: { show: true, format: '0.00' }, - deltaHz: { show: false, format: '0.00' }, - coupling: { show: true, format: '0.00' }, + const preferences: RangesNucleusPreferences = { + floatingTablePreferences: createBaseRangesTablePreferences(), + tablePreferences: { + ...createBaseRangesTablePreferences(), + showDeleteAction: true, + showZoomAction: true, + showEditAction: true, + }, jGraphTolerance: isProton(nucleus || '') ? 0.2 : nucleus === '13C' ? 2 : 0, //J Graph tolerance for: 1H: 0.2Hz 13C: 2Hz - showKind: true, - showMultiplicity: true, - showAssignment: true, - showDeleteAction: true, - showZoomAction: true, - showEditAction: true, - showAssignmentLabel: true, isSumConstant: true, }; @@ -154,17 +163,19 @@ const getPeaksDefaultValues = ( nucleus?: string, ): PanelsPreferences['peaks'] => { const preferences: PeaksNucleusPreferences = { - showSerialNumber: true, - deltaPPM: { show: true, format: '0.00' }, - deltaHz: { show: false, format: '0.00' }, - peakWidth: { show: false, format: '0.00' }, - intensity: { show: true, format: '0.00' }, - fwhm: { show: true, format: '0.00000' }, - mu: { show: false, format: '0.00000' }, - gamma: { show: false, format: '0.000' }, - showDeleteAction: true, - showEditPeakShapeAction: true, - showKind: true, + tablePreferences: { + showSerialNumber: true, + deltaPPM: { show: true, format: '0.00' }, + deltaHz: { show: false, format: '0.00' }, + peakWidth: { show: false, format: '0.00' }, + intensity: { show: true, format: '0.00' }, + fwhm: { show: true, format: '0.00000' }, + mu: { show: false, format: '0.00000' }, + gamma: { show: false, format: '0.000' }, + showKind: true, + showDeleteAction: true, + showEditPeakShapeAction: true, + }, defaultPeakShape: DEFAULT_PEAK_SHAPE, }; return getPreferences(preferences, nucleus); diff --git a/src/demo/views/SnapshotView.tsx b/src/demo/views/SnapshotView.tsx index 7bd5188fbe..3a2619583c 100644 --- a/src/demo/views/SnapshotView.tsx +++ b/src/demo/views/SnapshotView.tsx @@ -329,84 +329,159 @@ const customWorkspaces: CustomWorkspaces = { ranges: { nuclei: { '1H': { - isSumConstant: false, - showAssignment: false, - showAssignmentLabel: false, - showSerialNumber: false, - showDeleteAction: false, - showEditAction: false, - showMultiplicity: false, - showZoomAction: false, - from: { - show: false, - format: '0.00', - }, - to: { - show: false, - format: '0.00', - }, - absolute: { - show: false, - format: '0.00', - }, - relative: { - show: true, - format: '0.00', - }, - deltaPPM: { - show: true, - format: '0.00', - }, - deltaHz: { - show: false, - format: '0.00', + tablePreferences: { + showAssignment: false, + showAssignmentLabel: false, + showSerialNumber: false, + showMultiplicity: false, + from: { + show: false, + format: '0.00', + }, + to: { + show: false, + format: '0.00', + }, + absolute: { + show: false, + format: '0.00', + }, + relative: { + show: true, + format: '0.00', + }, + deltaPPM: { + show: true, + format: '0.00', + }, + deltaHz: { + show: false, + format: '0.00', + }, + coupling: { + show: false, + format: '0.00', + }, + showKind: false, + showDeleteAction: false, + showEditAction: false, + showZoomAction: false, }, - coupling: { - show: false, - format: '0.00', + floatingTablePreferences: { + showAssignment: false, + showAssignmentLabel: false, + showSerialNumber: false, + showMultiplicity: false, + from: { + show: false, + format: '0.00', + }, + to: { + show: false, + format: '0.00', + }, + absolute: { + show: false, + format: '0.00', + }, + relative: { + show: true, + format: '0.00', + }, + deltaPPM: { + show: true, + format: '0.00', + }, + deltaHz: { + show: false, + format: '0.00', + }, + coupling: { + show: false, + format: '0.00', + }, + showKind: false, }, + isSumConstant: false, jGraphTolerance: 0.2, - showKind: false, }, '13C': { - isSumConstant: false, - showAssignment: false, - showAssignmentLabel: false, - showSerialNumber: false, - showDeleteAction: false, - showEditAction: false, - showMultiplicity: false, - showZoomAction: false, - from: { - show: false, - format: '0.00', - }, - to: { - show: false, - format: '0.00', - }, - absolute: { - show: false, - format: '0.00', - }, - relative: { - show: true, - format: '0.00', - }, - deltaPPM: { - show: true, - format: '0.00', - }, - deltaHz: { - show: false, - format: '0.00', + tablePreferences: { + showAssignment: false, + showAssignmentLabel: false, + showSerialNumber: false, + showMultiplicity: false, + from: { + show: false, + format: '0.00', + }, + to: { + show: false, + format: '0.00', + }, + absolute: { + show: false, + format: '0.00', + }, + relative: { + show: true, + format: '0.00', + }, + deltaPPM: { + show: true, + format: '0.00', + }, + deltaHz: { + show: false, + format: '0.00', + }, + coupling: { + show: true, + format: '0.00', + }, + showKind: true, + + showDeleteAction: false, + showEditAction: false, + showZoomAction: false, }, - coupling: { - show: true, - format: '0.00', + floatingTablePreferences: { + showAssignment: false, + showAssignmentLabel: false, + showSerialNumber: false, + showMultiplicity: false, + from: { + show: false, + format: '0.00', + }, + to: { + show: false, + format: '0.00', + }, + absolute: { + show: false, + format: '0.00', + }, + relative: { + show: true, + format: '0.00', + }, + deltaPPM: { + show: true, + format: '0.00', + }, + deltaHz: { + show: false, + format: '0.00', + }, + coupling: { + show: true, + format: '0.00', + }, + showKind: true, }, + isSumConstant: false, jGraphTolerance: 2, - showKind: true, }, }, },
##Assignment From {isSortedDesc('from').content} To {isSortedDesc('to').content} δ (ppm) {isSortedDesc('from').content} δ (Hz) δ (Hz) Rel. {element} {isSortedDesc('integration').content} AbsoluteMult.J (Hz)AbsoluteMult.J (Hz) KindKind{''}
{rowData.tableMetaInfo.rowIndex + 1} {rowData.tableMetaInfo.signal?.multiplicity ?? 'm'}