Update: plexus to use @viz-js/viz v3 (#2568)

Resolves #339 

## Description of the changes
- Bumped viz.js 1.8.1 to @viz-js/viz 3.11.0
- Removed typing files that supported the older viz

## How was this change tested?
- `npm run test` in root. Currently, there're no tests for `plexus`.

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [ ] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `npm run lint` and `npm run test`

---------

Signed-off-by: Kaung Zin Hein <[email protected]>

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",

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) {

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);