+ You have to Select a spectrum and Add a molecule from the Structure
+ panel to select as a reference!
+
+ );
+ }
return (
-
-
-
-
-
-
Please type in a molecular formula!
-
-
-
-
OR
-
Select a molecule as reference!
-
+
+
Select a molecule as reference!
-
+
+ Set molecular formula
+
);
}
diff --git a/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx b/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
index 587dc6c61..c77b8800d 100644
--- a/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
+++ b/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
@@ -1,166 +1,138 @@
/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import { useEffect, useState } from 'react';
-
-import { CloseButton } from '../../elements/CloseButton';
-
-const modalContainer = css`
- width: 220px;
- height: 270px;
- padding: 5px;
- text-align: center;
-
- button {
- flex: 2;
- padding: 5px;
- border: 1px solid gray;
- border-radius: 5px;
- height: 30px;
- margin: 0 auto;
- margin-top: 15px;
- display: block;
- width: 20%;
- color: white;
- background-color: gray;
- }
-
- button:focus {
- outline: none;
- }
-
- .header {
- height: 24px;
- border-bottom: 1px solid #f0f0f0;
- display: flex;
- align-items: center;
-
- span {
- color: #464646;
- font-size: 15px;
- flex: 1;
- user-select: none;
- }
-
- button {
- height: 36px;
- margin: 2px;
- background-color: transparent;
- border: none;
+import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { Tolerance } from 'nmr-correlation';
+import { CSSProperties, useMemo } from 'react';
+import * as Yup from 'yup';
+
+import { useDispatch } from '../../context/DispatchContext';
+import Button from '../../elements/Button';
+import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
+import FormikInput from '../../elements/formik/FormikInput';
+import { useChartData } from '../../context/ChartContext';
+
+const styles: Record<'input' | 'column', CSSProperties> = {
+ input: {
+ padding: '0.25rem 0.5rem',
+ },
+ column: {
+ padding: '2px',
+ },
+};
+
+interface ToleranceItem {
+ atom: string;
+ value: number;
+}
- svg {
- height: 16px;
- }
- }
- }
+interface SetShiftToleranceModalProps extends InnerSetShiftToleranceModalProps {
+ isOpen: boolean;
+}
+interface InnerSetShiftToleranceModalProps {
+ onClose: () => void;
+}
- table {
- margin-top: 10px;
- width: 100%;
+const toleranceValidationSchema = Yup.array()
+ .of(Yup.object({ value: Yup.number().required() }))
+ .min(1);
- input::-webkit-outer-spin-button,
- input::-webkit-inner-spin-button {
- appearance: none;
- }
+export function SetShiftToleranceModal(props: SetShiftToleranceModalProps) {
+ const { isOpen, ...otherPros } = props;
- input {
- width: 100px;
- text-align: center;
- border-radius: 5px;
- border: 0.55px solid #c7c7c7;
- }
+ if (!isOpen) {
+ return;
}
-`;
-interface SetShiftToleranceModalProps {
- onClose: () => void;
- onSave?: (element: any) => void;
- previousTolerance: any;
+ return
;
}
-export default function SetShiftToleranceModal({
- onClose,
- onSave,
- previousTolerance,
-}: SetShiftToleranceModalProps) {
- const [tolerance, setTolerance] = useState
();
- const [isValid, setIsValid] = useState>({});
+function InnerSetShiftToleranceModal(props: InnerSetShiftToleranceModalProps) {
+ const { onClose } = props;
+ const { correlations } = useChartData();
+ const dispatch = useDispatch();
- useEffect(() => {
- if (previousTolerance) {
- setTolerance(previousTolerance);
-
- setIsValid(
- Object.fromEntries(
- Object.keys(previousTolerance).map((atomType) => [atomType, true]),
- ),
- );
- } else {
- setTolerance(undefined);
+ function onSaveHandler(data) {
+ const tolerance: Tolerance = {};
+ for (const { atom, value } of data) {
+ tolerance[atom] = value;
}
- }, [previousTolerance]);
-
- function onSaveHandler() {
- onSave?.(tolerance);
+ dispatch({
+ type: 'SET_CORRELATIONS_TOLERANCE',
+ payload: {
+ tolerance,
+ },
+ });
onClose?.();
}
- function onChangeHandler(e, atomType: string) {
- const value: string = e.target.value;
- if (value.trim().length > 0) {
- setTolerance({ ...tolerance, [atomType]: Number(value) });
- setIsValid({ ...isValid, [atomType]: true });
- } else {
- setIsValid({ ...isValid, [atomType]: false });
- }
- }
+ const COLUMNS: Array> = useMemo(
+ () => [
+ {
+ Header: '#',
+ style: { width: '25px', textAlign: 'center', ...styles.column },
+ accessor: (_, index) => index + 1,
+ },
+ {
+ Header: 'Atom',
+ style: { width: '25px', textAlign: 'center', ...styles.column },
+ accessor: 'atom',
+ },
+ {
+ Header: 'Value',
+ style: { padding: 0, ...styles.column },
+ Cell: ({ row }) => {
+ return (
+
+ );
+ },
+ },
+ ],
+ [],
+ );
- return (
-
-
- Set Shift Tolerances
-
-
+ const tolerances = correlations?.options?.tolerance || {};
-
-
-
- | Atom |
- Value |
-
-
-
-
-
-
-
-
- | {atomType} |
-
- onChange(e, atomType)}
- defaultValue={tolerance[atomType]}
- style={!isValid[atomType] ? { backgroundColor: 'orange' } : {}}
- />
- |
-
- );
- });
+ return (
+
+ );
}
diff --git a/src/component/panels/SummaryPanel/SummaryPanel.tsx b/src/component/panels/SummaryPanel/SummaryPanel.tsx
index 27dda87a3..e57da869a 100644
--- a/src/component/panels/SummaryPanel/SummaryPanel.tsx
+++ b/src/component/panels/SummaryPanel/SummaryPanel.tsx
@@ -23,13 +23,13 @@ import { useAssignmentData } from '../../assignment/AssignmentsContext';
import { useChartData } from '../../context/ChartContext';
import { useDispatch } from '../../context/DispatchContext';
import Select from '../../elements/Select';
-import { useModal } from '../../elements/popup/Modal';
+import { useDialogToggle } from '../../hooks/useDialogToggle';
import DefaultPanelHeader from '../header/DefaultPanelHeader';
import CorrelationTable from './CorrelationTable/CorrelationTable';
import Overview from './Overview';
-import SetMolecularFormulaModal from './SetMolecularFormulaModal';
-import SetShiftToleranceModal from './SetShiftTolerancesModal';
+import { SetMolecularFormulaModal } from './SetMolecularFormulaModal';
+import { SetShiftToleranceModal } from './SetShiftTolerancesModal';
import {
findSignalMatch1D,
findSignalMatch2D,
@@ -72,7 +72,6 @@ const panelStyle = css`
function SummaryPanel() {
const {
- molecules,
correlations: correlationsData,
data: spectraData,
xDomain,
@@ -84,8 +83,11 @@ function SummaryPanel() {
} = useChartData();
const dispatch = useDispatch();
- const modal = useModal();
const assignmentData = useAssignmentData();
+ const { dialog, openDialog, closeDialog } = useDialogToggle({
+ shiftToleranceModal: false,
+ molecularFormula: false,
+ });
const [additionalColumnData, setAdditionalColumnData] = useState([]);
const [
@@ -226,51 +228,6 @@ function SummaryPanel() {
yDomain,
]);
- const handleOnSetMolecularFormula = useCallback(
- (mf) => {
- dispatch({
- type: 'SET_CORRELATIONS_MF',
- payload: {
- mf,
- },
- });
- },
- [dispatch],
- );
-
- const handleOnSetShiftTolerance = useCallback(
- (tolerance) => {
- dispatch({
- type: 'SET_CORRELATIONS_TOLERANCE',
- payload: {
- tolerance,
- },
- });
- },
- [dispatch],
- );
-
- const showSetMolecularFormulaModal = useCallback(() => {
- modal.show(
- modal.close()}
- onSave={handleOnSetMolecularFormula}
- molecules={molecules}
- previousMF={correlationsData.options.mf}
- />,
- );
- }, [correlationsData, handleOnSetMolecularFormula, modal, molecules]);
-
- const showSetShiftToleranceModal = useCallback(() => {
- modal.show(
- modal.close()}
- onSave={handleOnSetShiftTolerance}
- previousTolerance={correlationsData.options.tolerance}
- />,
- );
- }, [correlationsData, handleOnSetShiftTolerance, modal]);
-
const additionalColumnTypes = useMemo(() => {
const columnTypes = ['H', 'H-H'].concat(
correlationsData
@@ -495,6 +452,14 @@ function SummaryPanel() {
const total = correlationsData ? correlationsData.values.length : 0;
return (
+
+
,
- title: `Set molecular formula (${correlationsData.options.mf})`,
- onClick: showSetMolecularFormulaModal,
+ title: `Set molecular formula (${correlationsData?.options?.mf || ''})`,
+ onClick: () => openDialog('molecularFormula'),
},
{
icon: ,
title: 'Set shift tolerance',
- onClick: showSetShiftToleranceModal,
+ onClick: () => openDialog('shiftToleranceModal'),
},
]}
>