fix: draw lines from supergarden/root nodes to subgarden nodes and vice versa

Author: coopbri

app/src/components/visualizer/GardenFlowInner/GardenFlowInner.tsx

@@ -221,7 +221,7 @@ const GardenFlowInner = ({ gardens }: Props) => {
   };
 
   // handle node mouse enter/leave for hover effects
-  const onNodeMouseEnter: NodeMouseHandler = useCallback((event, node) => {
+  const onNodeMouseEnter: NodeMouseHandler = useCallback((_event, node) => {
     if (
       node.type === "supergarden" ||
       node.type === "subgarden" ||
@@ -239,6 +239,18 @@ const GardenFlowInner = ({ gardens }: Props) => {
     document.body.style.cursor = "default";
   }, []);
 
+  const renderedEdges = edges.map((edge) => ({
+    ...edge,
+    // TODO toggle this via settings
+    // type: "default",
+    animated: true,
+    style: {
+      ...edge.style,
+      strokeWidth: 2,
+      stroke: "gray",
+    },
+  }));
+
   return (
     <ReactFlow
       className="relative"
@@ -264,7 +276,7 @@ const GardenFlowInner = ({ gardens }: Props) => {
               : undefined,
         },
       }))}
-      edges={edges}
+      edges={renderedEdges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}
@@ -290,8 +302,6 @@ const GardenFlowInner = ({ gardens }: Props) => {
       defaultEdgeOptions={{
         type: "smoothstep",
         animated: true,
-        // style: { stroke: "#999", strokeWidth: 1.5 },
-        // markerEnd: { type: MarkerType.ArrowClosed },
       }}
       connectionLineType={ConnectionLineType.SmoothStep}
     >

app/src/components/visualizer/customNodes/GardenNode/GardenNode.tsx

@@ -15,7 +15,8 @@ const GardenNode = ({ data }: Props) => {
     data.targetConnections && data.targetConnections.length > 0;
   const hasBottomSources =
     data.sourceConnections && data.sourceConnections.length > 0;
-  const hasRightSources = false; // optional: set this based on specific connection types
+  // optional: set this based on specific connection types
+  const hasRightSources = false;
 
   return (
     <Card className="w-[200px] border-2 shadow-lg">

app/src/components/visualizer/customNodes/SubgardenNode/SubgardenNode.tsx

@@ -16,7 +16,7 @@ const SubgardenNode = ({ data }: Props) => {
 
   return (
     <Card className="w-[200px] border-2 shadow-lg transition-transform hover:scale-105">
-      {hasTargets && <Handle type="target" position={Position.Top} />}
+      <Handle type="target" position={Position.Top} />
 
       <div className="flex cursor-pointer flex-col items-center gap-4 rounded-lg px-2 py-2 text-center">
         <div className="flex w-full justify-between">

app/src/components/visualizer/customNodes/SupergardenNode/SupergardenNode.tsx

@@ -38,19 +38,6 @@ const SupergardenNode = ({ data }: Props) => {
             <h4 className="line-clamp-2 text-sm">{data.description}</h4>
           )}
         </div>
-
-        <Button
-          variant="secondary"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation();
-            window.open(data.url, "_blank");
-          }}
-          className="w-full"
-        >
-          <ExternalLinkIcon size={14} className="mr-1" />
-          View
-        </Button>
       </div>
     </Card>
   );