feat: add external link and copy icons, implement node and link click handlers in dashboard

Author: williamluke4

components/icons.tsx

@@ -141,3 +141,41 @@ export function PauseIconSmall(props: { className?: string }) {
     </svg>
   );
 }
+
+export function ExternalLinkIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={props.className || "w-4 h-4"}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+      />
+    </svg>
+  );
+}
+
+export function CopyIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={props.className || "w-4 h-4"}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+      />
+    </svg>
+  );
+}

components/network-graph/network-graph-2d.tsx

@@ -45,6 +45,8 @@ export const NetworkGraph2d = React.memo(function NetworkGraph2d({
   linkDistance = DEFAULT_PHYSICS.linkDistance,
   centerGravity = DEFAULT_PHYSICS.centerGravity,
   animate = true,
+  onNodeClick,
+  onLinkClick,
 }: GraphComponentProps) {
   const [ForceGraph2D, setForceGraph2D] = useState<any>(null);
   const graphRef = useRef<any>(null);
@@ -80,9 +82,17 @@ export const NetworkGraph2d = React.memo(function NetworkGraph2d({
     cleanupPulses();
   }, [configureForces, cleanupPulses]);
 
-  const handleClick = useCallback((node: Nodes[0]) => {
-    navigator.clipboard.writeText(node.id);
-  }, []);
+  const handleNodeClick = useCallback((node: Nodes[0]) => {
+    if (onNodeClick) {
+      onNodeClick(node);
+    }
+  }, [onNodeClick]);
+
+  const handleLinkClick = useCallback((link: Link) => {
+    if (onLinkClick) {
+      onLinkClick(link);
+    }
+  }, [onLinkClick]);
 
   const nodeCanvasObject = useCallback(
     (node: any, ctx: CanvasRenderingContext2D, _globalScale: number) => {
@@ -186,7 +196,8 @@ export const NetworkGraph2d = React.memo(function NetworkGraph2d({
       nodeAutoColorBy={(n: Nodes[0]) => Object.keys(n.usedVouchers)[0]}
       backgroundColor={GRAPH_CONFIG.backgroundColor}
       graphData={displayedData}
-      onNodeClick={handleClick}
+      onNodeClick={handleNodeClick}
+      onLinkClick={handleLinkClick}
       onEngineTick={handleEngineTick}
       linkAutoColorBy="contract_address"
       nodeCanvasObject={nodeCanvasObject}