fix: workers should be inline to work in other apps (#3003)

Author: Raubzeug

package-lock.json

@@ -169,7 +169,8 @@
     "source-map-explorer": "^2.5.3",
     "stylelint": "^16.20.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "workerize-loader": "^2.0.2"
   },
   "peerDependencies": {
     "monaco-yql-languages": ">=1.3.0",

package.json

@@ -16,7 +16,7 @@ export const StageBlockComponent = ({className, block}: Props) => {
                 ? block.operators.map((item) => <div key={item}>{item}</div>)
                 : block.name}
             {block.tables ? (
-                <div>
+                <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
                     <Text color="secondary">{i18n('label_tables')}: </Text>
                     {block.tables.join(', ')}
                 </div>

src/components/Graph/BlockComponents/StageBlockComponent.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {GraphState} from '@gravity-ui/graph';
 import type {HookGraphParams} from '@gravity-ui/graph/react';
 import {GraphBlock, GraphCanvas, useGraph, useGraphEvent} from '@gravity-ui/graph/react';
+// @ts-ignore - workerize-loader syntax
+import createWorker from 'workerize-loader!./treeLayout.worker';
 
 import {cn} from '../../utils/cn';
 
@@ -66,25 +68,21 @@ export function GravityGraph<T>({data, theme}: Props<T>) {
     const {graph, start} = useGraph(config);
 
     React.useEffect(() => {
-        // Just in case, although mounting takes more time than calculation
-        const worker = new Worker(new URL('./treeLayout', import.meta.url));
-        worker.postMessage({
-            nodes: data.nodes,
-            links: data.links,
-        });
-
-        worker.onmessage = function (e) {
-            const {layout, edges} = e.data;
-
-            graph.setEntities({
-                blocks: layout,
-                connections: edges,
+        // Using workerize-loader to inline the worker and avoid CORS issues
+        const worker = createWorker();
+
+        // Call the exported function from the worker
+        worker
+            .calculateLayout(data.nodes, data.links)
+            .then((result: {layout: any; edges: any}) => {
+                graph.setEntities({
+                    blocks: result.layout,
+                    connections: result.edges,
+                });
+            })
+            .catch((err: Error) => {
+                console.error('Worker error:', err);
             });
-        };
-
-        worker.onerror = (err) => {
-            console.error(err);
-        };
 
         return () => {
             worker.terminate();

src/components/Graph/GravityGraph.tsx

@@ -359,15 +359,15 @@ function calculateTreeEdges(layoutResult: ExtendedTBlock[], connections: TConnec
     return connectionPaths;
 }
 
-onmessage = function (e) {
-    const {nodes, links} = e.data;
+// Export function for workerize-loader
+export function calculateLayout(nodes: any[], links: any[]) {
     const blocks = prepareBlocks(nodes);
     const connections = prepareConnections(links);
     const layout = calculateTreeLayout(blocks, connections);
     const edges = calculateTreeEdges(layout, connections);
 
-    postMessage({
+    return {
         layout,
         edges,
-    });
-};
+    };
+}