diff --git a/package-lock.json b/package-lock.json
index 76bd09c39f..9f26d3412e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -106,8 +106,7 @@
"source-map-explorer": "^2.5.3",
"stylelint": "^16.20.0",
"ts-jest": "^29.2.5",
- "typescript": "^5.8.3",
- "workerize-loader": "^2.0.2"
+ "typescript": "^5.8.3"
},
"peerDependencies": {
"monaco-yql-languages": ">=1.3.0",
@@ -29476,19 +29475,6 @@
"workbox-core": "6.6.0"
}
},
- "node_modules/workerize-loader": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/workerize-loader/-/workerize-loader-2.0.2.tgz",
- "integrity": "sha512-HoZ6XY4sHWxA2w0WpzgBwUiR3dv1oo7bS+oCwIpb6n54MclQ/7KXdXsVIChTCygyuHtVuGBO1+i3HzTt699UJQ==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "loader-utils": "^2.0.0"
- },
- "peerDependencies": {
- "webpack": "*"
- }
- },
"node_modules/wrap-ansi": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
diff --git a/package.json b/package.json
index b3d96a1875..12ecf1c413 100644
--- a/package.json
+++ b/package.json
@@ -169,8 +169,7 @@
"source-map-explorer": "^2.5.3",
"stylelint": "^16.20.0",
"ts-jest": "^29.2.5",
- "typescript": "^5.8.3",
- "workerize-loader": "^2.0.2"
+ "typescript": "^5.8.3"
},
"peerDependencies": {
"monaco-yql-languages": ">=1.3.0",
diff --git a/src/components/Graph/BlockComponents/StageBlockComponent.tsx b/src/components/Graph/BlockComponents/StageBlockComponent.tsx
index a6c4404c26..3150130194 100644
--- a/src/components/Graph/BlockComponents/StageBlockComponent.tsx
+++ b/src/components/Graph/BlockComponents/StageBlockComponent.tsx
@@ -16,7 +16,7 @@ export const StageBlockComponent = ({className, block}: Props) => {
? block.operators.map((item) =>
{item}
)
: block.name}
{block.tables ? (
-
+
{i18n('label_tables')}:
{block.tables.join(', ')}
diff --git a/src/components/Graph/GravityGraph.tsx b/src/components/Graph/GravityGraph.tsx
index 1eef4609b2..64e7078519 100644
--- a/src/components/Graph/GravityGraph.tsx
+++ b/src/components/Graph/GravityGraph.tsx
@@ -3,8 +3,6 @@ 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';
@@ -68,21 +66,25 @@ export function GravityGraph
({data, theme}: Props) {
const {graph, start} = useGraph(config);
React.useEffect(() => {
- // 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);
+ // 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,
});
+ };
+
+ worker.onerror = (err) => {
+ console.error(err);
+ };
return () => {
worker.terminate();
diff --git a/src/components/Graph/treeLayout.worker.ts b/src/components/Graph/treeLayout.ts
similarity index 99%
rename from src/components/Graph/treeLayout.worker.ts
rename to src/components/Graph/treeLayout.ts
index d3739a88eb..df78f52aa9 100644
--- a/src/components/Graph/treeLayout.worker.ts
+++ b/src/components/Graph/treeLayout.ts
@@ -359,15 +359,15 @@ function calculateTreeEdges(layoutResult: ExtendedTBlock[], connections: TConnec
return connectionPaths;
}
-// Export function for workerize-loader
-export function calculateLayout(nodes: any[], links: any[]) {
+onmessage = function (e) {
+ const {nodes, links} = e.data;
const blocks = prepareBlocks(nodes);
const connections = prepareConnections(links);
const layout = calculateTreeLayout(blocks, connections);
const edges = calculateTreeEdges(layout, connections);
- return {
+ postMessage({
layout,
edges,
- };
-}
+ });
+};