feat: edit range peaks

src/component/1d/Viewer1D.tsx

@@ -305,12 +305,11 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
 
       const xPPM = scaleState.scaleX().invert(event.x);
 
-      const propagateEvent = () => {
-        Events.emit('mouseClick', {
-          ...event,
-          xPPM,
-        });
-      };
+      Events.emit('mouseClick', {
+        ...event,
+        xPPM,
+      });
+
       const keyModifiers = getModifiersKey(event as unknown as MouseEvent);
 
       switch (keyModifiers) {
@@ -322,9 +321,7 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
                 payload: event,
               });
               break;
-            case options.editRange.id:
-              propagateEvent();
-              break;
+
             case options.integral.id:
               dispatch({
                 type: 'CUT_INTEGRAL',

src/component/EventsTrackers/BrushTracker.tsx

@@ -75,11 +75,13 @@ export function useBrushTracker() {
   return useContext(BrushContext);
 }
 
-interface Position {
+export interface Position {
   x: number;
   y: number;
 }
-export type OnClick = (element: React.MouseEvent & Position) => void;
+
+export type ClickOptions = React.MouseEvent & Position;
+export type OnClick = (element: ClickOptions) => void;
 export type { OnClick as OnDoubleClick };
 export type OnZoom = (
   event: Pick<React.WheelEvent, 'deltaY' | 'shiftKey' | 'deltaMode'> & Position,

src/component/elements/Select.tsx

@@ -66,6 +66,7 @@ const Select = forwardRef(function Select(
     itemTextField = 'label',
     returnValue = true,
     textRender,
+    ...otherProps
   } = props;
 
   const handleOnChanged = useCallback(
@@ -87,6 +88,7 @@ const Select = forwardRef(function Select(
       className={className}
       style={style}
       required
+      {...otherProps}
     >
       {placeholder && (
         <option value="" disabled>

src/component/modal/editRange/EditRangeModal.tsx

@@ -18,7 +18,7 @@ import useSpectrum from '../../hooks/useSpectrum';
 import { hasCouplingConstant } from '../../panels/extra/utilities/MultiplicityUtilities';
 import { formatNumber } from '../../utility/formatNumber';
 
-import SignalsForm from './forms/components/SignalsForm';
+import SignalsContent from './forms/components/SignalsContent';
 import editRangeFormValidation from './forms/validation/EditRangeValidation';
 
 const styles = css`
@@ -242,7 +242,7 @@ function EditRangeModal({
         onSubmit={handleOnSave}
       >
         <>
-          <SignalsForm range={range} preferences={rangesPreferences} />
+          <SignalsContent range={range} />
           <FormikOnChange onChange={changeHandler} />
         </>
       </Formik>