draggin recangles

frontend/src/components/map/MapViewer.tsx

@@ -71,68 +71,84 @@ function BoxSelector({ onSelect, locked, active }: {
   active: boolean
 }) {
   const map = useMap();
-  const [start, setStart] = useState<L.LatLng | null>(null);
-  const [end, setEnd] = useState<L.LatLng | null>(null);
+  const [visualBounds, setVisualBounds] = useState<L.LatLngBounds | null>(null);
+  const startLatLngRef = useRef<L.LatLng | null>(null);
 
   useEffect(() => {
     if (!active) {
-      setStart(null);
-      setEnd(null);
+      setVisualBounds(null);
+      startLatLngRef.current = null;
       return;
     }
 
     const container = map.getContainer();
 
-    const onMouseDown = (e: MouseEvent) => {
-      // Ignore if clicking a button, control, marker, or bubble
-      if (
-        (e.target as HTMLElement).closest('.leaflet-control') || 
-        (e.target as HTMLElement).closest('.pa-map-toolbar') ||
-        (e.target as HTMLElement).closest('.leaflet-marker-icon') ||
-        (e.target as HTMLElement).closest('.stream-bubble')
-      ) {
+    const onDown = (e: MouseEvent) => {
+      // 1. Only left click
+      if (e.button !== 0) return;
+
+      // 2. Ignore UI
+      const target = e.target as HTMLElement;
+      if (target.closest('.leaflet-control') || target.closest('.pa-map-toolbar') || target.closest('.leaflet-marker-icon')) {
         return;
       }
-      
-      e.stopPropagation();
+
+      // 3. Start selection
       const latlng = map.mouseEventToLatLng(e);
-      setStart(latlng);
-      setEnd(latlng);
+      startLatLngRef.current = latlng;
+      setVisualBounds(null);
+      
+      // Prevent map panning
       map.dragging.disable();
     };
 
-    const onMouseMove = (e: MouseEvent) => {
-      if (!start) return;
-      const latlng = map.mouseEventToLatLng(e);
-      setEnd(latlng);
+    const onMove = (e: MouseEvent) => {
+      if (!startLatLngRef.current) return;
+      
+      const currentLatLng = map.mouseEventToLatLng(e);
+      const bounds = L.latLngBounds(startLatLngRef.current, currentLatLng);
+      setVisualBounds(bounds);
     };
 
-    const onMouseUp = () => {
-      if (start && end) {
-        const bounds = L.latLngBounds(start, end);
-        // Minimum drag distance to prevent misfires on clicks
-        if (bounds.getNorthEast().distanceTo(bounds.getSouthWest()) > 0.5) {
-          onSelect(bounds);
-        }
+    const onUp = (e: MouseEvent) => {
+      if (!startLatLngRef.current) {
+        map.dragging.enable();
+        return;
+      }
+
+      const currentLatLng = map.mouseEventToLatLng(e);
+      const bounds = L.latLngBounds(startLatLngRef.current, currentLatLng);
+      
+      // Clean up state immediately
+      startLatLngRef.current = null;
+      setVisualBounds(null);
+      map.dragging.enable();
+
+      // Trigger selection if meaningful distance
+      if (bounds.getNorthEast().distanceTo(bounds.getSouthWest()) > 1.0) {
+        onSelect(bounds);
       }
-      setStart(null);
-      setEnd(null);
-      if (!locked) map.dragging.enable();
     };
 
-    container.addEventListener('mousedown', onMouseDown, true);
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
+    L.DomEvent.on(container, 'mousedown', onDown);
+    L.DomEvent.on(window as any, 'mousemove', onMove);
+    L.DomEvent.on(window as any, 'mouseup', onUp);
 
     return () => {
-      container.removeEventListener('mousedown', onMouseDown, true);
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
+      L.DomEvent.off(container, 'mousedown', onDown);
+      L.DomEvent.off(window as any, 'mousemove', onMove);
+      L.DomEvent.off(window as any, 'mouseup', onUp);
+      map.dragging.enable();
     };
-  }, [active, map, start, end, locked, onSelect]);
+  }, [active, map, onSelect]);
 
-  if (!start || !end || !active) return null;
-  return <Rectangle bounds={L.latLngBounds(start, end)} pathOptions={{ color: '#3498db', weight: 2, dashArray: '6, 8', fillOpacity: 0.15, interactive: false }} />;
+  if (!visualBounds) return null;
+  return (
+    <Rectangle 
+      bounds={visualBounds} 
+      pathOptions={{ color: '#3498db', weight: 2, dashArray: '6, 8', fillOpacity: 0.15, interactive: false }} 
+    />
+  );
 }
 
 const TILE_URLS: Record<string, string> = {
@@ -780,6 +796,7 @@ export default function MapViewer({
   onSelectionToggle,
   selectionActive,
   className,
+  allowMultiMove = false,
 }: Props) {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
@@ -789,10 +806,12 @@ export default function MapViewer({
   const handleMapClick = (lat: number, lon: number) => {
     if (_onClick) _onClick(lat, lon);
     
-    // If we just finished a box selection in the last 200ms, don't clear it
-    if (Date.now() - lastSelectionTime.current < 200) return;
+    // Tiny 100ms guard for the box selector
+    if (Date.now() - lastSelectionTime.current < 100) return;
     
-    if (selectedIds.size > 0) setSelectedIds(new Set());
+    if (selectedIds.size > 0) {
+      setSelectedIds(new Set());
+    }
   };
 
   useEffect(() => {
@@ -812,7 +831,7 @@ export default function MapViewer({
     let dLat = 0;
     let dLon = 0;
 
-    if (selectedIds.has(markerKey)) {
+    if (allowMultiMove && selectedIds.has(markerKey)) {
       // Find original position to calc delta
       let oldLat = 0;
       let oldLon = 0;
@@ -838,7 +857,7 @@ export default function MapViewer({
     let changedProc = false;
 
     // Apply to selected set or just this marker
-    const targets = selectedIds.has(markerKey) ? Array.from(selectedIds) : [markerKey];
+    const targets = (allowMultiMove && selectedIds.has(markerKey)) ? Array.from(selectedIds) : [markerKey];
 
     targets.forEach(key => {
       const [tType, tId] = key.split('-') as ['group' | 'sub' | 'child', string];
@@ -971,7 +990,16 @@ export default function MapViewer({
                     },
                     dragend: (e) => handleDragEnd(e, 'group', String(gIdx))
                   }}
-                  icon={createDivIcon('', groupNames[gIdx] || `Process ${gIdx + 1}`, '', gScale, isAnySelected, selectedIds.has(`group-${gIdx}`), 'group', String(gIdx))}
+                  icon={createDivIcon(
+                    '', 
+                    groupNames[gIdx] || `Process ${gIdx + 1}`, 
+                    '', 
+                    gScale, 
+                    isAnySelected, 
+                    allowMultiMove && selectedIds.has(`group-${gIdx}`),
+                    'group', 
+                    String(gIdx)
+                  )}
                 />
               );
             }
@@ -1008,14 +1036,23 @@ export default function MapViewer({
                   position={[lat, lon]}
                   draggable={true}
                   pane="expandedContentPane"
-                  eventHandlers={{
-                    click: () => {
-                      if (onProcessesSelect) onProcessesSelect([si], !isSubSelected);
-                    },
-                    dragend: (e) => handleDragEnd(e, 'sub', String(si))
-                  }}
-                  icon={createDivIcon('', p.name, '', p.box_scale ? parseFloat(String(p.box_scale)) : 1.2, isSubSelected, selectedIds.has(`sub-${si}`), 'sub', String(si))}
-                />
+                    eventHandlers={{
+                      click: () => {
+                        if (onProcessesSelect) onProcessesSelect([si], !isSubSelected);
+                      },
+                      dragend: (e) => handleDragEnd(e, 'sub', String(si))
+                    }}
+                    icon={createDivIcon(
+                      '', 
+                      p.name, 
+                      '', 
+                      p.box_scale ? parseFloat(String(p.box_scale)) : 1.2, 
+                      isSubSelected, 
+                      allowMultiMove && selectedIds.has(`sub-${si}`),
+                      'sub', 
+                      String(si)
+                    )}
+                  />
               );
             });
           })}
@@ -1039,7 +1076,16 @@ export default function MapViewer({
                   eventHandlers={{
                     dragend: (e) => handleDragEnd(e, 'child', `${si}-${ci}`)
                   }}
-                  icon={createDivIcon('', child.name, '', child.box_scale ? parseFloat(String(child.box_scale)) : 0.9, isChildSelected, selectedIds.has(`child-${si}-${ci}`), 'child', `${si}-${ci}`)}
+                  icon={createDivIcon(
+                    '', 
+                    child.name, 
+                    '', 
+                    child.box_scale ? parseFloat(String(child.box_scale)) : 0.9, 
+                    isChildSelected, 
+                    allowMultiMove && selectedIds.has(`child-${si}-${ci}`),
+                    'child', 
+                    `${si}-${ci}`
+                  )}
                 />
               );
             });
@@ -1067,9 +1113,9 @@ export default function MapViewer({
           active={locked} // Always active when map is locked
           locked={locked}
           onSelect={(bounds) => {
-            const newSelected = new Set<string>();
             lastSelectionTime.current = Date.now();
             const idxsInBox: number[] = [];
+            const newSelected = new Set<string>();
 
             // 1. Check groups
             groups.forEach((subIdxs, gIdx) => {
@@ -1078,8 +1124,8 @@ export default function MapViewer({
                 const lat = parseFloat(String(gc.lat));
                 const lon = parseFloat(String(gc.lon));
                 if (bounds.contains([lat, lon])) {
-                  newSelected.add(`group-${gIdx}`);
                   idxsInBox.push(...subIdxs);
+                  if (allowMultiMove) newSelected.add(`group-${gIdx}`);
                 }
               }
             });
@@ -1090,20 +1136,18 @@ export default function MapViewer({
                 const lat = parseFloat(String(p.lat));
                 const lon = parseFloat(String(p.lon));
                 if (bounds.contains([lat, lon])) {
-                  newSelected.add(`sub-${pi}`);
                   idxsInBox.push(pi);
+                  if (allowMultiMove) newSelected.add(`sub-${pi}`);
                 }
               }
             });
 
-            setSelectedIds(newSelected);
+            if (allowMultiMove) setSelectedIds(newSelected);
 
             // 3. Smart Toggle for Analysis Streams
             if (onProcessesSelect && idxsInBox.length > 0) {
               const uniqueIdxs = Array.from(new Set(idxsInBox));
               
-              // If ALL streams in the box are ALREADY fully selected, then DESELECT them all.
-              // Otherwise, SELECT them all.
               const allInBoxSelected = uniqueIdxs.every(pi => {
                 const p = processes[pi];
                 return (p.streams || []).every((_: any, si: number) => selectedStreams?.[`stream_${pi}_${si}`] !== false);

frontend/src/pages/DataCollectionPage.tsx

@@ -390,6 +390,7 @@ export default function DataCollectionPage() {
               });
               setSelectedStreams(next);
             }}
+            allowMultiMove={true}
           />
 
           {/* Legend — directly below the map — VERY COMPACT */}