Update plexus to use @viz-js/viz v3

Signed-off-by: Kaung Zin Hein <[email protected]>
jaegertracing · Jan 9, 2025 · 157d66a · 157d66a
1 parent c28adbb
commit 157d66a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/plexus/package.json b/packages/plexus/package.json
@@ -49,11 +49,11 @@
     "react-dom": "^18.x"
   },
   "dependencies": {
+    "@viz-js/viz": "^3.11.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "memoize-one": "6.0.0",
-    "react-icons": "^5.0.1",
-    "viz.js": "1.8.1"
+    "react-icons": "^5.0.1"
   },
   "scripts": {
     "_tasks/build/lib/js": "babel src --extensions '.tsx,.js' --out-dir lib",

diff --git a/packages/plexus/src/LayoutManager/getLayout.tsx b/packages/plexus/src/LayoutManager/getLayout.tsx
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import viz from 'viz.js/viz.js';
+import { instance } from '@viz-js/viz';
 
 import convPlain from './dot/convPlain';
 import toDot from './dot/toDot';
@@ -98,7 +98,7 @@ function getVerticesValidity(
   return warn;
 }
 
-export default function getLayout(
+export default async function getLayout(
   phase: EWorkerPhase,
   inEdges: TEdge[],
   inVertices: TSizeVertex[] | TLayoutVertex[],
@@ -107,7 +107,10 @@ export default function getLayout(
   const dot = toDot(inEdges, inVertices, layoutOptions);
   const { totalMemory = undefined } = layoutOptions || {};
   const options = { totalMemory, engine: phase === EWorkerPhase.Edges ? 'neato' : 'dot', format: 'plain' };
-  const plainOut = viz(dot, options);
+
+  const viz = await instance();
+  const plainOut = viz.renderString(dot, options);
+
   const { edges, graph, vertices } = convPlain(plainOut, phase !== EWorkerPhase.Positions);
   const result = getVerticesValidity(inVertices, vertices);
   if (result.validity === EValidity.Error) {

diff --git a/packages/plexus/src/LayoutManager/layout.worker.tsx b/packages/plexus/src/LayoutManager/layout.worker.tsx
@@ -32,10 +32,10 @@ const ctx: Worker & TMessageErrorTarget = self as any;
 
 let currentMeta: TLayoutWorkerMeta | null;
 
-function handleMessage(event: MessageEvent) {
+async function handleMessage(event: MessageEvent) {
   const { edges, meta, options, vertices } = event.data as TWorkerInputMessage;
   currentMeta = meta;
-  const { layoutError, ...result } = getLayout(meta.phase, edges, vertices, options);
+  const { layoutError, ...result } = await getLayout(meta.phase, edges, vertices, options);
   const type = layoutError ? EWorkerErrorType.LayoutError : meta.phase;
   const message: TWorkerOutputMessage = { meta, type, ...result };
   ctx.postMessage(message);

diff --git a/packages/plexus/typings/custom.d.ts b/packages/plexus/typings/custom.d.ts
diff --git a/packages/plexus/typings/index.d.ts b/packages/plexus/typings/index.d.ts