feat: improve zone assignment label addition and editing functionality (

#3034)

* feat: improve zone assignment label addition and editing functionality

* refactor: display the add button when there are no assignment

* refactor: truncate the link angle value to one decimal

* refactor: apply 'bold' font weight to labels when the mouse is over the zone

src/component/1d-2d/FieldEdition.tsx

@@ -0,0 +1,88 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { Popover, PopoverProps } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { ReactNode, useState } from 'react';
+import * as Yup from 'yup';
+
+import FormikInput from '../elements/formik/FormikInput';
+
+type InputType = 'number' | 'text';
+
+interface FieldEditionsProps {
+  value: number | string;
+  inputType?: InputType;
+  onChange: (value: any) => void;
+  children: ReactNode;
+  PopoverProps?: PopoverProps;
+}
+const InputDimension = { height: 28, width: 100 };
+
+const validationSchema = (inputType: 'number' | 'text') =>
+  Yup.object({
+    value: (inputType === 'number' ? Yup.number() : Yup.string()).required(),
+  });
+
+function stopPropagation(e) {
+  e.stopPropagation();
+}
+
+function keyDownCheck(event: React.KeyboardEvent<HTMLInputElement>) {
+  if (event.key === 'Enter') {
+    return true;
+  } else if (event.key === 'Escape') {
+    return false;
+  }
+}
+
+export function FieldEdition(props: FieldEditionsProps) {
+  const { value, inputType = 'text', onChange, children, PopoverProps } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  function handleOnSubmit({ value: newValue }) {
+    onChange(newValue);
+    setIsOpen(false);
+  }
+
+  return (
+    <Popover
+      css={css`
+        .field-edition-popover {
+          border-radius: 5px;
+        }
+      `}
+      popoverClassName="field-edition-popover"
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      onInteraction={() => setIsOpen(true)}
+      content={
+        <Formik
+          initialValues={{ value }}
+          onSubmit={handleOnSubmit}
+          validationSchema={validationSchema(inputType)}
+        >
+          {({ submitForm }) => (
+            <FormikInput
+              type={inputType}
+              style={{
+                input: {
+                  height: `${InputDimension.height}px`,
+                  padding: '5px',
+                  outline: 'none',
+                },
+              }}
+              name="value"
+              autoSelect
+              onKeyDown={(e) => keyDownCheck(e) && submitForm()}
+              onClick={stopPropagation}
+              onMouseDown={stopPropagation}
+            />
+          )}
+        </Formik>
+      }
+      {...PopoverProps}
+    >
+      {children}
+    </Popover>
+  );
+}

src/component/2d/Chart2D.tsx

@@ -13,6 +13,7 @@ import { FTContainer } from './ft/FTContainer';
 import IndicationLines from './zones/IndicationLines';
 import Zones from './zones/Zones';
 import ZonesAssignmentsLabels from './zones/ZonesAssignmentsLabels';
+import { ShareDataProvider } from '../context/ShareDataContext';
 
 interface Chart2DProps {
   spectra?: Spectrum1D[];
@@ -26,7 +27,7 @@ interface Chart2DInnerProps extends Chart2DProps {
   spectraRendering: SpectraRendering;
 }
 
-function chart2DInner({
+function Chart2DInner({
   spectra,
   width,
   height,
@@ -67,8 +68,10 @@ function chart2DInner({
       />
       <FTContainer spectra={spectra} />
       <FidContainer />
-      <Zones />
-      <ZonesAssignmentsLabels />
+      <ShareDataProvider>
+        <Zones />
+        <ZonesAssignmentsLabels />
+      </ShareDataProvider>
       <IndicationLines axis="X" show />
       <IndicationLines axis="Y" show />
       <SpectrumInfoBlock />
@@ -80,7 +83,7 @@ function chart2DInner({
   );
 }
 
-const MemoizedChart2D = memo(chart2DInner);
+const MemoizedChart2D = memo(Chart2DInner);
 
 export default function Chart2D({ spectra }: Chart2DProps) {
   const { width, height, margin, displayerKey } = useChartData();

src/component/2d/zones/Zone.tsx

@@ -1,10 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Zone as ZoneType } from 'nmr-processing';
 import { useState, useEffect } from 'react';
 
 import { checkZoneKind } from '../../../data/utilities/ZoneUtilities';
 import { useAssignment } from '../../assignment/AssignmentsContext';
+import { useShareData } from '../../context/ShareDataContext';
+import { SVGButton } from '../../elements/SVGButton';
 import { HighlightEventSource, useHighlight } from '../../highlight';
 import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState';
 import { useScale2DX, useScale2DY } from '../utilities/scale';
@@ -42,12 +45,25 @@ const stylesHighlighted = css`
   }
 `;
 
+const GroupContainer = styled.g`
+  .target {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .target {
+      visibility: visible;
+    }
+  }
+`;
+
 interface ZoneProps {
   zoneData: ZoneType;
 }
 
 function Zone({ zoneData }: ZoneProps) {
-  const { x, y, id, signals } = zoneData;
+  const { x, y, id, signals, assignment } = zoneData;
+  const { setData } = useShareData<{ id: string }>();
   const assignmentZone = useAssignment(id);
   const { showZones } = useActiveSpectrumZonesViewState();
   const highlightZone = useHighlight([assignmentZone.id], {
@@ -84,7 +100,22 @@ function Zone({ zoneData }: ZoneProps) {
       }}
     >
       {showZones && (
-        <g transform={`translate(${scaleX(x2)},${scaleY(y1)})`}>
+        <GroupContainer transform={`translate(${scaleX(x2)},${scaleY(y1)})`}>
+          <g
+            data-no-export="true"
+            transform="translate(-16 -16)"
+            className="target"
+          >
+            {!assignment && (
+              <SVGButton
+                icon="plus"
+                backgroundColor="green"
+                title="Add assignment label"
+                style={{ cursor: 'hand' }}
+                onClick={() => setData({ id })}
+              />
+            )}
+          </g>
           <rect
             x="0"
             width={scaleX(x1) - scaleX(x2)}
@@ -94,7 +125,7 @@ function Zone({ zoneData }: ZoneProps) {
             stroke={reduceOpacity ? '#343a40' : 'darkgreen'}
             strokeWidth={reduceOpacity ? '0' : '1'}
           />
-        </g>
+        </GroupContainer>
       )}
       {signals.map((_signal, i) => (
         <Signal key={String(id + i)} signal={_signal} />