fix: expand/collapse subgardens

Author: coopbri

app/src/app/page.tsx

@@ -111,7 +111,7 @@ const HomePage = () => (
               key={feature.title}
               className={cn(
                 "group relative flex flex-col items-center space-y-4 text-center",
-                "rounded-lg border bg-background p-6 shadow-lg transition-shadow hover:shadow-xl"
+                "rounded-lg border bg-background p-6 shadow-lg transition-shadow hover:shadow-xl",
               )}
             >
               <div className="rounded-full bg-primary/10 p-4 text-primary">

app/src/components/core/OptionsPanel/OptionsPanel.tsx

@@ -41,7 +41,8 @@ const OptionsPanel = ({
   expandSubgardens,
   setExpandSubgardens,
 }: Props) => {
-  const [minimized, setMinimized] = useState(true);
+  // TODO local storage
+  const [minimized, setMinimized] = useState(false);
   const [moving, setMoving] = useState(false);
   const [position, setPosition] = useState({ x: 0, y: 0 });
 
@@ -54,7 +55,7 @@ const OptionsPanel = ({
   const store = useStoreApi();
   const { isInteractive, minZoomReached, maxZoomReached } = useStore(
     selector,
-    shallow
+    shallow,
   );
   const { zoomIn, zoomOut, fitView } = useReactFlow();
 
@@ -104,9 +105,10 @@ const OptionsPanel = ({
     () => [
       {
         id: "expand-subgardens",
-        label: expandSubgardens ? "Expand subgardens" : "Condense subgardens",
+        label: expandSubgardens ? "Condense subgardens" : "Expand subgardens",
         onClick: () => {
           setExpandSubgardens(!expandSubgardens);
+
           // force re-layout
           setInitialized(false);
         },
@@ -164,14 +166,14 @@ const OptionsPanel = ({
       expandSubgardens,
       setExpandSubgardens,
       setInitialized,
-    ]
+    ],
   );
 
   return (
     <div
       ref={panelRef}
       className={cn(
-        "absolute top-0 left-0 z-50 m-4 flex flex-col overflow-hidden rounded-lg border border-border bg-card shadow-xl transition-all"
+        "absolute top-0 left-0 z-50 m-4 flex flex-col overflow-hidden rounded-lg border border-border bg-card shadow-xl transition-all",
       )}
       style={{
         width: 200,
@@ -182,7 +184,7 @@ const OptionsPanel = ({
       <div
         className={cn(
           "group z-50 flex items-center justify-between border-b px-4 py-2",
-          moving ? "cursor-move" : "cursor-grab"
+          moving ? "cursor-move" : "cursor-grab",
         )}
         onMouseDown={(e) => {
           e.preventDefault();

app/src/components/visualizer/EditorActions/EditorActions.tsx

@@ -32,7 +32,7 @@ const EditorActions = ({ schemaText, setSchemaText, setError }: Props) => {
         !Array.isArray(parsedJson.categories)
       ) {
         throw new Error(
-          "Invalid schema: missing required fields (name, version, or categories)"
+          "Invalid schema: missing required fields (name, version, or categories)",
         );
       }
 

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

@@ -91,7 +91,7 @@ const GardenFlowInner = ({ gardens }: Props) => {
       const { nodes: initialNodes, edges: initialEdges } = gardenToFlow(
         activeGarden,
         containerWidth,
-        { expandSubgardens }
+        { expandSubgardens },
       );
 
       if (!initialized && initialNodes.length > 0 && initialEdges.length > 0) {
@@ -182,7 +182,7 @@ const GardenFlowInner = ({ gardens }: Props) => {
     if (clickedNode.data?.isExpandedSubgardenLabel) {
       gardenName = (clickedNode.data?.label as string).replace(
         " (Expanded)",
-        ""
+        "",
       );
     }
 

app/src/components/visualizer/Visualizer/Visualizer.tsx

@@ -30,6 +30,13 @@ interface Props {
 const Visualizer = ({ gardens }: Props) => {
   const { setActiveGarden } = useGardenStore();
 
+  // Make garden data available globally for subgarden expansion
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.gardenData = gardens;
+    }
+  }, [gardens]);
+
   // load garden from local storage on initial render
   useEffect(() => {
     if (typeof window !== "undefined") {

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

@@ -37,19 +37,19 @@ const NodeTypes = () => ({
   default: ({ data }: { data: NodeData }) => {
     // check if there are any connections
     const hasTopTargets = data.targetConnections?.some(
-      (id) => id.includes("top") || !id.includes("position")
+      (id) => id.includes("top") || !id.includes("position"),
     );
     const hasBottomTargets = data.targetConnections?.some((id) =>
-      id.includes("bottom")
+      id.includes("bottom"),
     );
     const hasLeftTargets = data.targetConnections?.some((id) =>
-      id.includes("left")
+      id.includes("left"),
     );
     const hasTopSources = data.sourceConnections?.some((id) =>
-      id.includes("top")
+      id.includes("top"),
     );
     const hasBottomSources = data.sourceConnections?.some(
-      (id) => id.includes("bottom") || !id.includes("position")
+      (id) => id.includes("bottom") || !id.includes("position"),
     );
 
     return (

app/src/lib/util/flow.ts

@@ -36,7 +36,7 @@ const generateId = (type: string, name: string): string => {
 };
 
 const getNodePositions = (
-  type: string
+  type: string,
 ): { sourcePosition?: Position; targetPosition?: Position } => {
   return match(type)
     .with(NODE_TYPES.GARDEN, () => ({
@@ -69,7 +69,7 @@ interface FlowOptions {
 export const gardenToFlow = (
   garden: GardenTypes,
   width = 1600,
-  options: FlowOptions = {}
+  options: FlowOptions = {},
 ): { nodes: Node[]; edges: Edge[] } => {
   // create a shallow copy to prevent reference issues
   const gardenCopy = { ...garden };
@@ -109,7 +109,7 @@ export const gardenToFlow = (
     gardenCopy.supergardens.forEach((supergarden: any, index: number) => {
       const supergardenId = generateId(
         NODE_TYPES.SUPERGARDEN,
-        supergarden.name
+        supergarden.name,
       );
       const xOffset = -400 + index * 150; // Position supergardens to the left and above
 
@@ -350,13 +350,13 @@ export const gardenToFlow = (
     supergardenId: string,
     depth = 0,
     indexInSupergarden = 0,
-    xPosition: number = centerX
+    xPosition: number = centerX,
   ) => {
     if (!category || !category.name) return;
 
     const categoryId = generateId(
       NODE_TYPES.CATEGORY,
-      `${supergardenId}-${category.name}`
+      `${supergardenId}-${category.name}`,
     );
 
     const yPosition = 200 + depth * 200 + indexInSupergarden * 150;
@@ -415,7 +415,7 @@ export const gardenToFlow = (
 
         const itemId = generateId(
           NODE_TYPES.ITEM,
-          `${categoryId}-${item.name}`
+          `${categoryId}-${item.name}`,
         );
         const itemYPosition = yPosition + (itemIndex + 1) * 100;
 
@@ -474,7 +474,7 @@ export const gardenToFlow = (
 
         const refId = generateId(
           NODE_TYPES.GARDEN_REF,
-          `${categoryId}-${gardenRef.name}`
+          `${categoryId}-${gardenRef.name}`,
         );
         // Position garden refs to the right of the category
         const refXPosition = xPosition + 250;
@@ -536,9 +536,9 @@ export const gardenToFlow = (
             categoryId,
             depth + 1,
             subcategoryIndex,
-            xPosition + (subcategoryIndex % 2 === 0 ? -150 : 150) // Alternately offset to avoid overlap
+            xPosition + (subcategoryIndex % 2 === 0 ? -150 : 150), // Alternately offset to avoid overlap
           );
-        }
+        },
       );
     }
   };
@@ -590,7 +590,7 @@ export const gardenToFlow = (
 
 export const autoLayout = async (
   nodes: Node[],
-  edges: Edge[]
+  edges: Edge[],
 ): Promise<{ nodes: Node[]; edges: Edge[] }> => {
   if (!nodes?.length || !edges?.length) {
     return { nodes: nodes || [], edges: edges || [] };