subgraph not linear

content/training/project-config/_index.md

@@ -4,4 +4,5 @@ sort_by = "weight"
 
 [extra]
 pos = [300, 50]
+size = [2, 4]
 +++

content/training/project-config/fast-compilation.md

@@ -1,4 +1,8 @@
 +++
 title = "Fast Compilation"
 weight = 2
+
+[extra]
+dependencies = ["/training/project-config/new-project/"]
+pos = [1, 1]
 +++

content/training/project-config/features.md

@@ -1,4 +1,8 @@
 +++
 title = "Bevy Features"
 weight = 1
+
+[extra]
+dependencies = ["/training/project-config/new-project/"]
+pos = [0, 1]
 +++

content/training/project-config/new-project.md

@@ -4,4 +4,5 @@ weight = 0
 
 [extra]
 dependencies = ["/training/rust/first-steps/"]
+pos = [0.5, 0]
 +++

content/training/project-config/release.md

@@ -1,4 +1,8 @@
 +++
 title = "Build for Release"
 weight = 3
+
+[extra]
+dependencies = ["/training/project-config/features/"]
+pos = [0, 2]
 +++

content/training/project-config/workspace.md

@@ -1,4 +1,8 @@
 +++
 title = "Workspace"
 weight = 4
+
+[extra]
+dependencies = ["/training/project-config/new-project/"]
+pos = [0.5, 3]
 +++

graph-ui/components/section.tsx

@@ -2,9 +2,11 @@ import React, { memo } from 'react';
 import { Handle, Position } from 'reactflow';
 
 function Section({ data }: any) {
-    let height = (data.children + 1) * 50;
+    let height = (data.children + 1) * 60;
     let height_class = `h-[${height}px]`;
-    let section_class = `w-60 ${height_class} px-4 py-1 shadow-lg rounded-lg bg-slate-800 border-4 border-stone-700`;
+    let width = (data.width * 200) + 40;
+    let width_class = `w-[${width}px]`;
+    let section_class = `${width_class} ${height_class} px-4 py-1 shadow-lg rounded-lg bg-slate-800 border-4 border-stone-700`;
     return (
         <div className={section_class}>
             <div className="flex">

graph-ui/pages/index.tsx

@@ -95,7 +95,7 @@ const NestedFlow = () => {
             nodesConnectable={false}
             nodesFocusable={false}
             nodeTypes={nodeTypes}
-            translateExtent={[[-500, -500], [1800, 1000]]}
+            translateExtent={[[-500, -500], [2000, 1500]]}
         >
             <MiniMap />
             <Controls />

graph-ui/tailwind.config.ts

@@ -17,16 +17,18 @@ const config: Config = {
     },
   },
   safelist: [
-    "h-[200px]",
-    "h-[250px]",
+    "h-[240px]",
     "h-[300px]",
-    "h-[350px]",
-    "h-[400px]",
-    "h-[450px]",
-    "h-[500px]",
-    "h-[550px]",
+    "h-[360px]",
+    "h-[420px]",
+    "h-[480px]",
+    "h-[540px]",
     "h-[600px]",
-    "h-[650px]",
+    "h-[660px]",
+    "h-[720px]",
+    "h-[780px]",
+    "w-[240px]",
+    "w-[440px]",
   ],
   plugins: [],
 };

templates/training/main.html

@@ -6,17 +6,29 @@
 {% set parent_index = loop.index -%}
 {
 id: '{{parent_index}}',
-data: { label: '{{subsection.title}}', children: {{ subsection.pages | length }} },
+{% if subsection.extra.size -%}
+data: { label: '{{subsection.title}}', children: {{ subsection.extra.size[1] }}, width : {{ subsection.extra.size[0] }}
+},
+{% else -%}
+data: { label: '{{subsection.title}}', children: {{ subsection.pages | length }}, width: 1 },
+{% endif -%}
 position: { x: {{subsection.extra.pos[0]}}, y: {{subsection.extra.pos[1]}} },
 className: 'light',
 draggable: false,
 type: 'section',
 },
 {% for page in subsection.pages -%}
+{% if page.extra.pos -%}
+{% set node_y = page.extra.pos[1] * 60 -%}
+{% set node_x = page.extra.pos[0] * 210 -%}
+{% else -%}
+{% set node_y = loop.index0 * 60 -%}
+{% set node_x = 0 -%}
+{% endif -%}
 {
 id: '{{parent_index}}-{{loop.index}}',
-data: { label: '{{page.title | safe}}', path: '{{page.path | safe}}' },
-position: { x: 20, y: {{loop.index0 * 50 + 50}} },
+data: { label: '{{page.title | safe}}', path: '{{page.path | safe}}', },
+position: { x: {{node_x + 20}}, y: {{node_y + 50}} },
 parentId: '{{parent_index}}',
 draggable: false,
 type: 'page',