Merge pull request #62 from zazuko/layout-box-size

Layout box size

Author: BenjaminHofstetter

.gitignore

@@ -33,4 +33,4 @@ coverage
 
 src-vscode/media/assets/main.js
 src-vscode/media/
-src-vscode/*.vsix
+*.vsix

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rdf-sketch",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "type": "module",
   "workspaces": [
@@ -21,11 +21,11 @@
     "@vue-flow/core": "^1.48.2",
     "@zazuko/env": "^3.0.1",
     "@zazuko/prefixes": "^2.6.1",
-    "elkjs": "^0.11.0",
+    "elkjs": "^0.11.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.5.4",
     "util": "^0.12.5",
-    "vue": "^3.5.29"
+    "vue": "^3.5.31"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -35,17 +35,17 @@
     "@tsconfig/node20": "^20.1.9",
     "@types/n3": "^1.26.1",
     "@types/node": "^25.3.3",
-    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue": "^6.0.5",
     "@vue/eslint-config-typescript": "^14.7.0",
-    "@vue/tsconfig": "^0.9.0",
-    "eslint": "^10.0.2",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.1.0",
     "eslint-plugin-vue": "^10.8.0",
     "npm-run-all2": "^8.0.4",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^4.0.1",
     "vite-plugin-pwa": "^1.2.0",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.6"
   }
 }

package.json

@@ -1,11 +1,16 @@
 <template>
-    <div style="height: 100%; width:100%">
+    <div style="height: 100%; width:100%; position: relative;">
+      <div v-if="isLoading" class="loading-overlay">
+        <div class="loader"></div>
+        <div style="margin-top: 1rem; font-family: sans-serif;">Rendering graph layout...</div>
+      </div>
     <VueFlow 
     :nodes="nodes" 
     :edges="edges" 
     :min-zoom="0.00005" 
     :max-zoom="10"
     :fit-view-on-init="true"
+    @nodes-initialized="onNodesInitialized"
     @node-drag="onNodeDrag"
     @edge-click="zoomToNode" 
     >
@@ -63,37 +68,74 @@ const links = computed(() => {
 
 const nodes = ref<CustomNode[]>([])
 const edges = ref<CustomEdge[]>([])
+const isLoading = ref<boolean>(true)
 
-watch(links, async (newLinks) => {
-  const nodesWithoutLayout = resources.value.map(resource => ({
+watch(links, (newLinks) => {
+  isLoading.value = true;
+  nodes.value = resources.value.map(resource => ({
     id: resource.id,
     type: 'custom',
     position: { x: 0, y: 0 },
-    data: {
-      resource
-    },
-  }));
+    data: { resource },
+    style: { opacity: 0 } // Hide nodes until layout is calculated
+  })) as CustomNode[];
 
-  const newEdges = newLinks.map(link => ({
+  edges.value = newLinks.map(link => ({
     id: `${link.source}-${link.sourceProperty}-${link.target}`,
     source: link.source,
     target: link.target,
     sourceHandle: `${link.source}-${link.sourceProperty}-right`,
     animated: false,
     data: link,
     type: 'custom',
-    markerEnd:  MarkerType.ArrowClosed
-  }));
-
-  const nodesWithLayout = await elkLayout(nodesWithoutLayout, newEdges);
-  nodes.value = (nodesWithLayout as any).nodes as unknown as CustomNode[];
-  edges.value = (nodesWithLayout as any).edges as unknown as CustomEdge[];
-
-  setTimeout(() => {
-    fitView({ padding: 0.1, duration: 800 })
-  }, 200);
+    markerEnd: MarkerType.ArrowClosed
+  })) as CustomEdge[];
 },{ immediate: true });
 
+async function onNodesInitialized() {
+  // Wait a moment for Vue Flow to fully apply CSS and typography rendering to DOM 
+  // so that node.dimensions gets accurately populated by the internal ResizeObserver.
+  setTimeout(async () => {
+    // Vue Flow stores actual DOM dimensions in its internal nodeLookup state!
+    // We must merge these dimensions into our node array before layout.
+    const nodesWithDimensions = nodes.value.map(n => {
+      const internalNode = nodeLookup.value.get(n.id)
+      return {
+        ...n,
+        dimensions: {
+          width: internalNode?.dimensions?.width || 500,
+          height: internalNode?.dimensions?.height || 200
+        }
+      }
+    });
+
+    const nodesWithLayout = await elkLayout(nodesWithDimensions, edges.value);
+    
+    nodes.value = (nodesWithLayout as any).nodes.map((n: CustomNode) => ({
+      ...n,
+      style: { opacity: 1 } // Show nodes once layout is applied
+    }));
+    edges.value = (nodesWithLayout as any).edges as CustomEdge[];
+
+    // Update edge handles based on computed positions
+    edges.value.forEach(e => {
+      const sourceNode = nodes.value.find(n => n.id === e.source);
+      const targetNode = nodes.value.find(n => n.id === e.target);
+      if (sourceNode && targetNode) {
+        const isTargetLeft = targetNode.position.x < sourceNode.position.x;
+        e.sourceHandle = `${sourceNode.id}-${e.data?.sourceProperty}-${isTargetLeft ? 'left' : 'right'}`;
+      }
+    });
+
+    setTimeout(() => {
+      fitView({ padding: 0.1, duration: 800 })
+      setTimeout(() => {
+        isLoading.value = false;
+      }, 800);
+    }, 200);
+  }, 50);
+}
+
 function onNodeDrag(nodeDragEvent: NodeDragEvent) {
   const focusNode = nodeDragEvent.node;
   
@@ -201,5 +243,34 @@ function onNodeDrag(nodeDragEvent: NodeDragEvent) {
   color: #8a9ba1;
 }
 
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vscode-editor-background, rgba(255, 255, 255, 0.7));
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+}
+
+.loader {
+  border: 4px solid var(--vscode-dropdown-border, #f3f3f3);
+  border-top: 4px solid var(--vscode-button-background, #3498db);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 </style>
 

packages/core-ui/src/components/GraphView.vue

@@ -86,16 +86,15 @@ function avoidNodeDrag(event: MouseEvent) {
 }
 .named-node:hover .node-text {
   text-decoration: underline;
-  color: blue;
+  color: var(--p-primary-color, #007acc);
 }
 
-
 .blank-node:hover .arrow {
   opacity: 1;
 }
 .blank-node:hover .node-text {
   text-decoration: underline;
-  color: blue;
+  color: var(--p-primary-color, #007acc);
 }
 
 .data-type {

packages/core-ui/src/components/RdfTerm.vue

@@ -7,8 +7,10 @@ v-if="spo"
  :value="spo" 
  :itemSize="itemSizeWithPadding" 
  scrollable 
- :scrollHeight="props.isVscode ? 'calc(40vh - 0px)' : 'calc(40vh - 42px)'" :virtualScrollerOptions="{ itemSize: itemSizeWithPadding }" 
+ scrollHeight="flex" 
+ :virtualScrollerOptions="{ itemSize: itemSizeWithPadding }" 
  class="spo-table"
+ style="height: 100%; display: flex; flex-direction: column;"
  tableStyle="table-layout: fixed">
     <Column field="subject" header="Subject"  :style="{ width: hasContext ? '25%' : '33.33%' }">  
         <template #filter="{ filterModel, filterCallback }">
@@ -155,6 +157,11 @@ span {
 
 .node-link {
     cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+}
+.node-link:hover {
+    color: var(--p-primary-color, #007acc);
     text-decoration: underline;
 }
 

packages/core-ui/src/components/SPOSearch.vue

@@ -84,8 +84,8 @@ function zoomToNode(term: Term) {
   background-color: white;
   box-shadow: 0 4px 6px rgba(107, 107, 107, 0.8);
   min-width: 500px;
-
-  
+  width: max-content;
+  max-width: max-content;
 }
 
 .resource-card-header {

packages/core-ui/src/components/graph/resource-node/ResourceNode.vue

@@ -11,42 +11,58 @@ const rowHeight = 52;
  */
 export function useLayout() {
 
-    async function elkLayout(nodes: Node[], edges: Edge[]) {
+    async function elkLayout(nodes: any[], edges: any[]) {
 
         const options = {
-            "algorithm": "mrtree",                                       // MRTREE algorithm for tree layout
-            "org.eclipse.elk.direction": "RIGHT",                         // Layout direction (can be UP, DOWN, LEFT, RIGHT)
-            "org.eclipse.elk.spacing.nodeNode": "400",                    // Space between nodes
-            "org.eclipse.elk.spacing.edgeEdge": "20",                    // Space between edges
-            "org.eclipse.elk.spacing.edgeNode": "30",                    // Space between nodes and edges
-            "org.eclipse.elk.mrtree.spacing.level": "500",                // Space between levels in the tree
-            "org.eclipse.elk.mrtree.compaction.strategy": "DOWN",        // Compaction strategy
-            "org.eclipse.elk.mrtree.nodePlacement.strategy": "SIMPLE",   // Simple node placement strategy
-            "org.eclipse.elk.mrtree.nodePlacement.bk.fixedAlignment": "BALANCED", // Balanced alignment for nodes
+            "algorithm": "layered",                                      // Best for directed graphs (RDF)
+            "org.eclipse.elk.direction": "RIGHT",                        // Subject on left -> Object on right
+            
+            // Layering strategies
+            "org.eclipse.elk.layered.layering.strategy": "NETWORK_SIMPLEX", // Groups nodes efficiently
+            "org.eclipse.elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+            
+            // Edge routing
+            "org.eclipse.elk.edgeRouting": "ORTHOGONAL",                 // Use clean right-angle lines
+            "org.eclipse.elk.layered.crossingMinimization.strategy": "LAYER_SWEEP", // Actively prevents tangled lines
+            
+            // Spacing
+            "org.eclipse.elk.spacing.nodeNode": "900",                   // Vertical space between nodes in the same layer
+            "org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "1200", // Horizontal space between layers
+            "org.eclipse.elk.spacing.edgeNode": "150",                   // Space between edges and nodes
+            "org.eclipse.elk.spacing.edgeEdge": "75",                   // Space between parallel edges
         };
 
         const elkNodes: any[] = nodes.map((node) => {
+            const elkW = node.dimensions?.width || 1000;
+            const elkH = node.dimensions?.height || (headerHeight + rowHeight * node.data.resource.properties.length);
             return {
                 id: node.id,
-                width: 1000,
-                height: headerHeight + rowHeight * node.data.resource.properties.length,
+                width: elkW,
+                height: elkH,
                 labels: [{ text: node.data.resource.name }],
-                properties: node.data.resource.properties.map((property) => {
+                // Map properties to ELK Ports so the routing algorithm knows the exact vertical origin
+                ports: node.data.resource.properties.map((property: any, index: number) => {
                     return {
-                        id: property.id,
-                        width: 1000,
-                        height: rowHeight,
-                        labels: [{ text: property.name }],
+                        id: `${node.id}-${property.id}`, // Unique port ID per node
+                        width: 1,
+                        height: 1,
+                        // Tell ELK this port is roughly at this vertical offset on the right side
+                        properties: {
+                            "org.eclipse.elk.port.side": "EAST",
+                            "org.eclipse.elk.port.index": index,
+                        }
                     }
                 }),
             }
         });
 
         const elkEdges = edges.map((edge) => {
             return {
-                id: `${edge.source}-${edge.target}`,
+                id: edge.id, // e.g. "source-prop-target"
                 sources: [edge.source],
                 targets: [edge.target],
+                // Tell elk exactly which port (property) on the source node this edge comes from
+                sourcePort: `${edge.source}-${edge.data?.sourceProperty}` 
             }
         });