From c5d6bb95f9c5dd607e9eb8f3fb4665198315c7fd Mon Sep 17 00:00:00 2001
From: Brey Rivera <breyr2021@gmail.com>
Date: Mon, 31 Mar 2025 19:05:59 -0400
Subject: [PATCH] Enhance context menu and link creation modal to display
 available ports for devices

---
 .../reactflow/overlayui/ContextMenu.tsx       | 12 ++++++--
 .../reactflow/overlayui/CreateLinkModal.tsx   | 30 ++++++++++++-------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/reactflow/overlayui/ContextMenu.tsx b/frontend/src/components/reactflow/overlayui/ContextMenu.tsx
index 731eb62..71c72a2 100644
--- a/frontend/src/components/reactflow/overlayui/ContextMenu.tsx
+++ b/frontend/src/components/reactflow/overlayui/ContextMenu.tsx
@@ -84,11 +84,17 @@ export default function ContextMenu({
             onClick(); // close the context menu
             setDisableDelete(true);
             // Check if the device has any edges
-            const edgesForDevice = edges.filter(e => e.source === node?.data.deviceData?.name || e.target === node?.data.deviceData?.name);
-            console.log(edgesForDevice);
+            const edgesForDevice = edges.filter(e => e.source === node?.data.deviceData?.name || e.target === node?.data.deviceData?.name).map(e => ({
+                value: e.id,
+                label: `(${e.source}) ${e.data?.sourcePort ?? ''} -> (${e.target}) ${e.data?.targetPort ?? ''}`,
+                firstLabDevice: e.source,
+                firstLabDevicePort: e.data?.sourcePort ?? '',
+                secondLabDevice: e.target,
+                secondLabDevicePort: e.data?.targetPort ?? '',
+            }));
             if (edgesForDevice.length > 0) {
                 // attempt to delete all links
-                const numFailures = await deleteLinkBulk(new Set(currentEdges));
+                const numFailures = await deleteLinkBulk(new Set(edgesForDevice));
 
                 // only remove the node if all links were successfully deleted
                 if (numFailures === 0) {
diff --git a/frontend/src/components/reactflow/overlayui/CreateLinkModal.tsx b/frontend/src/components/reactflow/overlayui/CreateLinkModal.tsx
index 7de1fbe..d77faf1 100644
--- a/frontend/src/components/reactflow/overlayui/CreateLinkModal.tsx
+++ b/frontend/src/components/reactflow/overlayui/CreateLinkModal.tsx
@@ -109,11 +109,16 @@ export default function CreateLinkModal({ deviceData, currentDevicePorts, labDev
                                 disabled={!!deviceData?.name}
                             >
                                 <option value="">Select a Device</option>
-                                {labDevices.filter((device) => device.userId == null || device.userId == user?.id).map((device) => (
-                                    <option key={device.id} value={device.name} disabled={device.name === selectedSecondDevice}>
-                                        {device.name}
-                                    </option>
-                                ))}
+                                {labDevices.filter((device) => device.userId == null || device.userId == user?.id).map((device) => {
+                                    const portsArray = device.ports.split(',');
+                                    const generatedPorts = portsArray.flatMap(portDef => generatePorts(portDef));
+                                    const hasAvailablePorts = generatedPorts.some(port => !firstDeviceOccupiedPorts.includes(port));
+                                    return (
+                                        <option key={device.id} value={device.name} disabled={!hasAvailablePorts || device.name === selectedSecondDevice}>
+                                            {device.name} {!hasAvailablePorts ? '(no available ports)' : ''}
+                                        </option>
+                                    );
+                                })}
                             </select>
                         </div>
                         <div className="pb-2 border-b">
@@ -139,11 +144,16 @@ export default function CreateLinkModal({ deviceData, currentDevicePorts, labDev
                                 className="block w-full mt-1 rounded-md bg-[#ffffff] focus:outline-none"
                             >
                                 <option value="">Select a Device</option>
-                                {filteredLabDevices.filter((device) => (device.userId == null || device.userId == user?.id) && currentNodesInTopology.has(device.name)).map((device) => (
-                                    <option key={device.id} value={device.name} disabled={device.name === selectedFirstDevice}>
-                                        {device.name}
-                                    </option>
-                                ))}
+                                {filteredLabDevices.filter((device) => (device.userId == null || device.userId == user?.id) && currentNodesInTopology.has(device.name)).map((device) => {
+                                    const portsArray = device.ports.split(',');
+                                    const generatedPorts = portsArray.flatMap(portDef => generatePorts(portDef));
+                                    const hasAvailablePorts = generatedPorts.some(port => !secondDeviceOccupiedPorts.includes(port));
+                                    return (
+                                        <option key={device.id} value={device.name} disabled={!hasAvailablePorts || device.name === selectedFirstDevice}>
+                                            {device.name} {!hasAvailablePorts ? '(no available ports)' : ''}
+                                        </option>
+                                    );
+                                })}
                             </select>
                         </div>
                         <div className="pb-2 border-b">