Setup web worker for ELK

Author: mcheshkov

rust/cubesql/cubesql/egraph-debug-template/package.json

@@ -23,7 +23,8 @@
     "@types/react-dom": "18.0.11",
     "prettier": "3.3.3",
     "react-scripts": "5.0.1",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "web-worker": "1.3.0"
   },
   "eslintConfig": {
     "extends": [

rust/cubesql/cubesql/egraph-debug-template/src/index.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import ELK from 'elkjs/lib/elk.bundled.js';
+import ELK from 'elkjs';
 import type { ElkNode, LayoutOptions } from 'elkjs';
 import { useCallback, useState, useEffect, useMemo } from 'react';
 import ReactFlow, {
@@ -97,6 +97,18 @@ const initialNodes = data.combos
     .concat(data.nodes.map(toRegularNode));
 const initialEdges = data.edges.map(toEdge);
 
+const elk = new ELK({
+    workerFactory: function (_url) {
+        // TODO something is broken with bundling and web-worker
+        return new Worker(
+            new URL(
+                '../node_modules/elkjs/lib/elk-worker.min.js',
+                import.meta.url,
+            ),
+        );
+    },
+});
+
 async function layout(
     options: LayoutOptions,
     nodes: Array<Node>,
@@ -200,7 +212,8 @@ async function layout(
         });
     }
 
-    const elk = new ELK();
+    // TODO add throbber while waiting for layout
+    // TODO add queue to be able to cancel request before sending it to worker
     const { children } = await elk.layout(graph);
 
     if (abortSignal.aborted) {