Debugger layout fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Monorepo for JavaScript libraries for SEDAP",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "workspaces": [
@@ -11,6 +11,7 @@
     "./vscode/ui"
   ],
   "scripts": {
-    "check-versions": "node ./scripts/checkVersion.cjs"
+    "check-versions": "node ./scripts/checkVersion.cjs",
+    "build": "npm run build --workspaces --if-present"
   }
 }

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React components for SEDAP",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "type": "module",
@@ -27,7 +27,7 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
-    "@gillianplatform/sedap-types": "0.0.1",
+    "@gillianplatform/sedap-types": "0.0.2",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",

react/src/components/TraceView/layout.ts

@@ -25,6 +25,7 @@ interface ElkNodeExt extends ElkNode {
   zIndex?: number;
   type: string;
   data: FlowNodeData;
+  isHidden?: boolean;
 }
 interface ElkEdgeExt extends ElkExtendedEdge {
   zIndex?: number;
@@ -49,6 +50,7 @@ export default async function computeLayout(
       return ix;
     };
 
+    const getSubmapRootId = (id: string) => `S_${parents.join("_")}_${id}`;
     const getNodeId = (id: string) => `N_${parents.join("_")}_${id}`;
     const getEdgeId = (ix: number, prev: NodePrev) => `E_${prev.id}_#${ix}`;
 
@@ -89,8 +91,7 @@ export default async function computeLayout(
     while (queue.length > 0) {
       const { id, prev, layer, ixInLayer, isEmpty } = queue.shift()!;
       const node = isEmpty ? undefined : nodes[id];
-      const subChildren: ElkNodeExt[] = [];
-      const subEdges: ElkEdgeExt[] = [];
+      const subgraphs: ElkNodeExt[] = [];
       let nodeKind = "empty";
       if (node) {
         switch (node.next.kind) {
@@ -110,10 +111,14 @@ export default async function computeLayout(
         }
 
         const submaps = (expandedNodes.has(id) && node.submaps) || [];
+        let priority = submaps.length;
         for (const submapId of submaps) {
           const subgraph = structureNodesAndEdges(submapId, [...parents, id]);
-          subChildren.push(...(subgraph.children || []));
-          subEdges.push(...(subgraph.edges || []));
+          subgraph.id = getSubmapRootId(submapId);
+          if (!subgraph.layoutOptions) subgraph.layoutOptions = {};
+          subgraph.layoutOptions["elk.priority"] = `${priority--}`;
+          subgraph.isHidden = true;
+          subgraphs.push(subgraph);
         }
 
         const kind = node.options.kind === "custom" ? node.options.customKind : node.options.kind;
@@ -123,8 +128,7 @@ export default async function computeLayout(
       children.push({
         id: getNodeId(id),
         data: { node, prev },
-        children: subChildren,
-        edges: subEdges,
+        children: subgraphs,
         type: nodeKind,
         ...nodeKinds[nodeKind].baseSize,
         zIndex: submapDepth,
@@ -163,10 +167,12 @@ export default async function computeLayout(
     for (const node of graph.children || []) {
       const x = node.x! + parentX;
       const y = node.y! + parentY;
-      nodes.push({
-        ...node,
-        position: { x, y },
-      });
+      if (!node.isHidden) {
+        nodes.push({
+          ...node,
+          position: { x, y },
+        });
+      }
       const [childNodes, childEdges] = flattenGraph(node, x, y);
       nodes.push(...childNodes);
       edges.push(...childEdges);

react/src/components/nodes/EmptyNode.tsx

@@ -34,7 +34,7 @@ const TraceViewEmptyNode = ({ data }: NodeComponentProps) => {
   const { componentOverrides } = useContext(TraceViewContext);
   const Button = componentOverrides.stepButton || componentOverrides.button || RoundButton;
   return (
-    <NodeBase nodeKind="empty" targetHandle>
+    <NodeBase nodeKind="empty" targetHandle={!!prev}>
       <NodeBox>
         <Button onClick={onStepButtonClick} className="sedap__stepButton">
           <VscPlay />

types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap-types",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "SEDAP types for TypeScript",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "types": "./src/index.d.ts",

vscode/ext/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap-vscode-ext",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "SEDAP-related utilities for VSCode extensions",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "type": "commonjs",
@@ -27,8 +27,8 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
-    "@gillianplatform/sedap-types": "0.0.1",
-    "@gillianplatform/sedap-vscode-types": "0.0.1",
+    "@gillianplatform/sedap-types": "0.0.2",
+    "@gillianplatform/sedap-vscode-types": "0.0.2",
     "@types/vscode": "^1.96.0",
     "@typescript-eslint/eslint-plugin": "^8.18.2",
     "@typescript-eslint/parser": "^8.18.2",

vscode/types/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@gillianplatform/sedap-vscode-types",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Types for SEDAP VSCode helper libraries",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "types": "./src/index.d.ts",
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@gillianplatform/sedap-types": "0.0.1",
+    "@gillianplatform/sedap-types": "0.0.2",
     "typescript": "^5.7.2"
   }
 }

vscode/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap-vscode-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "SEDAP-related utilities for webviews inside VSCode extensions",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "type": "module",
@@ -25,8 +25,8 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
-    "@gillianplatform/sedap-types": "0.0.1",
-    "@gillianplatform/sedap-vscode-types": "0.0.1",
+    "@gillianplatform/sedap-types": "0.0.2",
+    "@gillianplatform/sedap-vscode-types": "0.0.2",
     "@types/react": "^19.0.2",
     "@types/vscode-webview": "^1.57.5",
     "@typescript-eslint/eslint-plugin": "^8.18.2",
@@ -46,7 +46,7 @@
     "vite-plugin-dts": "^4.4.0"
   },
   "peerDependencies": {
-    "@gillianplatform/sedap-react": "0.0.1",
+    "@gillianplatform/sedap-react": "0.0.2",
     "react": "^19.0.0",
     "react-icons": "^5.4.0"
   },