feat: improving and simplifying the 1D assignment

package.json

@@ -68,9 +68,9 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hookform/resolvers": "^5.2.2",
-    "@zakodium/nmr-types": "^0.4.5",
-    "@zakodium/nmrium-core": "^0.4.13",
-    "@zakodium/nmrium-core-plugins": "^0.6.17",
+    "@zakodium/nmr-types": "^0.5.0",
+    "@zakodium/nmrium-core": "^0.5.0",
+    "@zakodium/nmrium-core-plugins": "^0.6.18",
     "@zakodium/pdnd-esm": "^1.0.2",
     "@zip.js/zip.js": "^2.8.11",
     "cheminfo-font": "^1.13.1",
@@ -96,7 +96,7 @@
     "ml-spectra-processing": "^14.18.1",
     "ml-tree-similarity": "^2.2.0",
     "nmr-correlation": "2.3.3",
-    "nmr-processing": "^21.2.4",
+    "nmr-processing": "^22.0.0",
     "numeral": "^2.0.6",
     "openchemlib": "^9.18.2",
     "openchemlib-utils": "^8.8.1",

src/component/1d/SVGContent1D.tsx

@@ -1,5 +1,6 @@
 import { ClipPathContainer } from '../1d-2d/components/ClipPathContainer.js';
 import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock.js';
+import { ShareDataProvider } from '../context/ShareDataContext.tsx';
 
 import { ApodizationLine } from './ApodizationLine.js';
 import ExclusionZonesAnnotations from './ExclusionZonesAnnotations.js';
@@ -30,9 +31,12 @@ export function SVGContent1D() {
         <IntegralsSeries />
         <Peaks peaksSource="peaks" />
         <RangesIntegrals />
-        <Ranges />
+        <ShareDataProvider>
+          <Ranges />
+          <MultiplicityTrees />
+        </ShareDataProvider>
+
         <Peaks peaksSource="ranges" />
-        <MultiplicityTrees />
         <MultiAnalysisRanges />
         <BaseLineZones />
         <ExclusionZonesAnnotations />

src/component/1d/multiplicityTree/MultiplicityTree.tsx

@@ -3,20 +3,19 @@
 import type { Spectrum1D } from '@zakodium/nmrium-core';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import { useRef } from 'react';
-import { LuLink, LuUnlink } from 'react-icons/lu';
 
 import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
 import type { AssignmentsData } from '../../assignment/AssignmentsContext.js';
 import { useAssignment } from '../../assignment/AssignmentsContext.js';
 import { useChartData } from '../../context/ChartContext.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
-import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js';
 import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js';
 import { useHighlight } from '../../highlight/index.js';
 import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.ts';
 import useSpectrum from '../../hooks/useSpectrum.js';
 import { useIsInset } from '../inset/InsetProvider.js';
+import { useAssignmentsPopoverActionsButtons } from '../ranges/useAssignmentsPopoverActionsButtons.tsx';
 
 import type { TreeNodes } from './generateTreeNodes.js';
 import { generateTreeNodes } from './generateTreeNodes.js';
@@ -76,7 +75,15 @@
     signalIndex,
     range,
     startY: originStartY,
-    treeNodes: { multiplicity = '', nodes, min, max, signalKey, diaIDs },
+    treeNodes: {
+      multiplicity = '',
+      nodes,
+      min,
+      max,
+      signalKey,
+      diaIDs,
+      assignment: assignmentLabel,
+    },
   } = props;
   const { from, to } = range;
   const { width } = useChartData();
@@ -118,6 +125,18 @@
     startY,
   });
 
+  const hasDiaIDs = Array.isArray(diaIDs) && diaIDs.length > 0;
+  const isAssignmentActive = assignment.isActive;
+
+  const actionsButtons = useAssignmentsPopoverActionsButtons({
+    isUnAssignButtonVisible: isAssignmentActive || hasDiaIDs,
+    isAssignLabelButtonVisible: !assignmentLabel,
+    isUnAssignLabelButtonVisible: !!assignmentLabel,
+    onAssign: assignHandler,
+    onUnAssign: unAssignHandler,
+    rangeId: range.id,
+  });
+
   if (!multiplicity) return null;
 
   function assignHandler() {
@@ -127,38 +146,20 @@
 
   function unAssignHandler() {
     dispatch({
-      type: 'UNLINK_RANGE',
+      type: 'UNASSIGN_1D_SIGNAL',
       payload: {
         rangeKey: range.id,
         signalIndex,
       },
     });
   }
-  const hasDiaIDs = Array.isArray(diaIDs) && diaIDs.length > 0;
-  const isAssignmentActive = assignment.isActive;
+
   const isHighlighted = highlight.isActive || isAssignmentActive;
   const padding = boxPadding * widthRatio;
   const x = scaleX()(max) - padding;
   const y = startY - headTextMargin - headerTextSize - padding;
   const boxWidth = treeWidth + padding * 2;
   const boxHeight = treeHeight + headTextMargin + headerTextSize + padding * 2;
-
-  const actionsButtons: ActionsButtonsPopoverProps['buttons'] = [
-    {
-      icon: <LuLink />,
-      onClick: assignHandler,
-      intent: 'success',
-      title: 'Assign range',
-    },
-    {
-      icon: <LuUnlink />,
-      onClick: () => unAssignHandler(),
-      intent: 'danger',
-      title: 'Unassign range',
-      visible: isAssignmentActive || hasDiaIDs,
-    },
-  ];
-
   const isOpen = isAssignBtnTrigged.current ? isAssignmentActive : undefined;
 
   return (
@@ -240,7 +241,7 @@
 
               return (
                 <text
                   key={index}
                   x={x1}
                   y={startY + y}
                   textAnchor="middle"

src/component/1d/multiplicityTree/generateTreeNodes.ts

@@ -19,12 +19,13 @@
   multiplicity?: string;
   nodes: TreeNode[];
   diaIDs?: string[];
+  assignment?: string;
   min: number;
   max: number;
 }
 
 export function generateTreeNodes(range: Range, spectrumData: Spectrum1D) {
   // TODO: make sure spectrumData is not a lie and remove the optional chaining.
   const frequency = spectrumData?.info?.originFrequency;
 
   const result: TreeNodes[] = [];
@@ -78,7 +79,14 @@
   for (const signal of signals || []) {
     nodes = [];
 
-    const { multiplicity, js, delta, id: signalKey, diaIDs } = signal;
+    const {
+      multiplicity,
+      js,
+      delta,
+      id: signalKey,
+      diaIDs,
+      assignment,
+    } = signal;
     const minMax = { min: delta, max: delta };
 
     nodes.push({
@@ -104,6 +112,7 @@
       rangeKey,
       signalKey,
       diaIDs,
+      assignment,
       multiplicity,
       nodes,
       ...minMax,

src/component/1d/ranges/AssignmentLabel.tsx

@@ -1,4 +1,4 @@
-import type { Range } from '@zakodium/nmr-types';
+import type { Range, Signal1D } from '@zakodium/nmr-types';
 import { useRef } from 'react';
 
 import { FieldEdition } from '../../1d-2d/FieldEdition.js';
@@ -11,31 +11,34 @@ const marginTop = 15;
 
 interface AssignmentLabelProps {
   range: Range;
+  signal: Signal1D;
   width: number;
   stackIndex: number;
 }
 
 export function AssignmentLabel(props: AssignmentLabelProps) {
-  const { range, width, stackIndex } = props;
-  const { id, assignment } = range;
+  const { range, width, stackIndex, signal } = props;
+  const { id } = range;
+  const { assignment } = signal;
   const { showAssignmentsLabels } = useActiveSpectrumRangesViewState();
   const dispatch = useDispatch();
   const textRef = useRef<SVGTextElement>(null);
   const { margin } = useChartData();
   const { isNewAssignment, dismissNewLabel } = useTriggerNewAssignmentLabel(id);
 
-  if ((!range.assignment || !showAssignmentsLabels) && !isNewAssignment) {
+  if ((!assignment || !showAssignmentsLabels) && !isNewAssignment) {
     return null;
   }
 
   function handleChange(value: string) {
     dismissNewLabel();
 
     dispatch({
-      type: 'CHANGE_RANGE_ASSIGNMENT_LABEL',
+      type: 'CHANGE_1D_SIGNAL_ASSIGNMENT_LABEL',
       payload: {
         value,
         rangeId: id,
+        signalId: signal.id,
       },
     });
   }

src/component/1d/ranges/Atoms.tsx

@@ -10,8 +10,8 @@ const fontSize = 12;
 const marginTop = 45;
 
 function getDiaIds(range: Range) {
-  const { diaIDs = [], signals } = range;
-  const ids = diaIDs.slice();
+  const { signals } = range;
+  const ids = [];
   for (const signal of signals) {
     if (signal?.diaIDs) {
       ids.push(...signal.diaIDs);