fix: correctly position zone assignment popup

Author: hamed-musallam

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

@@ -7,8 +7,6 @@ import { useHighlight, useHighlightData } from '../../highlight/index.js';
 import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState.js';
 import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
-import SignalCrosshair from './SignalCrosshair.js';
-
 interface SignalProps {
   signal: Signal2D;
 }
@@ -52,24 +50,21 @@ function Signal({ signal }: SignalProps) {
   return (
     <g className="zone-signal">
       {showSignals && (
-        <g>
-          <SignalCrosshair signal={signal} />
-          <circle
-            onMouseEnter={() => {
-              assignment?.highlight();
-              highlight.show();
-            }}
-            onMouseLeave={() => {
-              assignment?.clearHighlight();
-              highlight.hide();
-            }}
-            key={signal.id}
-            cx={scaleX(signal.x.delta || 0)}
-            cy={scaleY(signal.y.delta || 0)}
-            r={isHighlighted ? 6 : 4}
-            fill={isHighlighted ? 'green' : 'darkgreen'}
-          />
-        </g>
+        <circle
+          onMouseEnter={() => {
+            assignment?.highlight();
+            highlight.show();
+          }}
+          onMouseLeave={() => {
+            assignment?.clearHighlight();
+            highlight.hide();
+          }}
+          key={signal.id}
+          cx={scaleX(signal.x.delta || 0)}
+          cy={scaleY(signal.y.delta || 0)}
+          r={isHighlighted ? 6 : 4}
+          fill={isHighlighted ? 'green' : 'darkgreen'}
+        />
       )}
       <g className="zone-signal-peak" style={{ pointerEvents: 'none' }}>
         {showPeaks &&

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

@@ -9,7 +9,7 @@ interface SignalCrosshairProps {
   signal: Signal2D;
 }
 
-function SignalCrosshair({ signal }: SignalCrosshairProps) {
+export function SignalCrosshair({ signal }: SignalCrosshairProps) {
   const highlightIDsX = useMemo(() => {
     return [buildID(signal.id, 'Crosshair'), buildID(signal.id, 'Crosshair_X')];
   }, [signal.id]);
@@ -39,5 +39,3 @@ function SignalCrosshair({ signal }: SignalCrosshairProps) {
     </g>
   );
 }
-
-export default SignalCrosshair;

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

@@ -12,6 +12,7 @@ import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZo
 import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
 import Signal from './Signal.js';
+import { SignalCrosshair } from './SignalCrosshair.tsx';
 
 interface ZoneProps {
   zoneData: ZoneType;
@@ -54,21 +55,25 @@ function Zone({ zoneData }: ZoneProps) {
   ];
 
   return (
-    <ActionsButtonsPopover
-      buttons={actionButtons}
-      targetTagName="g"
-      {...(assignment && { isOpen: false })}
+    <g
+      key={id}
+      onMouseEnter={() => {
+        assignmentZone.highlight();
+        highlightZone.show();
+      }}
+      onMouseLeave={() => {
+        assignmentZone.clearHighlight();
+        highlightZone.hide();
+      }}
     >
-      <g
-        key={id}
-        onMouseEnter={() => {
-          assignmentZone.highlight();
-          highlightZone.show();
-        }}
-        onMouseLeave={() => {
-          assignmentZone.clearHighlight();
-          highlightZone.hide();
-        }}
+      {signals.map((signal) => (
+        <SignalCrosshair key={signal.id} signal={signal} />
+      ))}
+
+      <ActionsButtonsPopover
+        buttons={actionButtons}
+        targetTagName="g"
+        {...(assignment && { isOpen: false })}
       >
         {showZones && (
           <g transform={`translate(${scaleX(x2)},${scaleY(y1)})`}>
@@ -87,8 +92,8 @@ function Zone({ zoneData }: ZoneProps) {
           // eslint-disable-next-line react/no-array-index-key
           <Signal key={id + i} signal={_signal} />
         ))}
-      </g>
-    </ActionsButtonsPopover>
+      </ActionsButtonsPopover>
+    </g>
   );
 }