Figure out what `yarn start` in plexus is supposed to do

[yurishkuro]

In packages/plexus/package.json there is a start command. It does not work currently unless the changes below are applied (committed in #2094 for easier reuse). However, even with these changes a web server is started that doesn't seem to do anything, a request to http://localhost:5000/ only shows Cannot GET /.

What is supposed to happen with this command? Is it perhaps just a remnant of auto-generated webpack before Plexus was a separate module? This ticket is to figure this out and post findings (e.g. look through the history of commits to see the original intent).

diff --git a/packages/plexus/webpack-factory.js b/packages/plexus/webpack-factory.js
index 89538c5f..c5120d27 100644
--- a/packages/plexus/webpack-factory.js
+++ b/packages/plexus/webpack-factory.js
@@ -72,27 +72,22 @@ function makeDevConfig() {
   const config = {
     entry,
     mode: 'development',
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'cheap-module-source-map',
     output: {
       path: join(__dirname, 'build'),
       publicPath: '/',
       filename: 'assets/[name].js',
     },
+    stats: 'normal',
     devServer: {
       port: 5000,
       hot: false,
       historyApiFallback: true,
-      overlay: true,
-      index: 'index',
-      contentBase: join(__dirname, 'build'),
-      staticOptions: {
-        extensions: ['.htm', '.html'],
+      client: {
+        overlay: true,
       },
-      stats: {
-        all: false,
-        errors: true,
-        timings: true,
-        warnings: true,
+      static: {
+        directory: join(__dirname, 'build'),
       },
     },

[Wise-Wizard]

Started going through this issue about an hour ago and my understanding so far is yarn start performs the following functions in sequence:

1. Task Clean: Removes the lib and dist directories, effectively cleaning up any previously generated files.
2. Task Bundle Worker: Uses Webpack to generate the UMD bundle for the layout.worker module. The configuration is specified in webpack.layout-worker.config.js.
3. Task Dev Server: Uses webpack-dev-server to start a development server. The configuration is specified in webpack.dev.config.js (localhost:5000). The configuration of both web.layout and web.dev makes use of original webpack-factory file itself and I presume the reason for Cannot Get / being shown up is due to a missing index.html file whch would serve as entry point for React projects I guess.

[yurishkuro]

@Wise-Wizard I understand what it does mechanically, but what was it intended to do? The resulting web site it starts is blank.

[Wise-Wizard]

Yes, according to the ReadMe I believe that if configured properly it should display a Demo Directed Graph on that URL (plexus/demo) and the user can experiment around with the Vertex and Edges to create their own Graph.

[Wise-Wizard]

Started going through this issue about an hour ago and my understanding so far is yarn start performs the following functions in sequence:

1. Task Clean: Removes the lib and dist directories, effectively cleaning up any previously generated files.
2. Task Bundle Worker: Uses Webpack to generate the UMD bundle for the layout.worker module. The configuration is specified in webpack.layout-worker.config.js.
3. Task Dev Server: Uses webpack-dev-server to start a development server. The configuration is specified in webpack.dev.config.js (localhost:5000). The configuration of both web.layout and web.dev makes use of original webpack-factory file itself and I presume the reason for Cannot Get / being shown up is due to a missing index.html file whch would serve as entry point for React projects I guess.

@yurishkuro , like I mentioned above the reason for it showing Cannot Get / is a missing index.html file, i made some changes in webpack and added a test index.html file and it is rendering the webpage.

[yurishkuro]

the demo has a bunch of graph examples in it, can you get it to work?

[Wise-Wizard]

the demo has a bunch of graph examples in it, can you get it to work?

Sure, will look into this. Though, I am not 100% sure that this is the actual purpose of Web server. My approach will be to resolve it according to my assumption, if it serves a different purpose I will let you know accordingly.

[yurishkuro]

My advice would be to look in git history when it was introduced, maybe checkout those old versions and try to run to see what it was doing.

[Wise-Wizard]

My advice would be to look in git history when it was introduced, maybe checkout those old versions and try to run to see what it was doing.

Got it, will look into that

[Wise-Wizard]

Hi @yurishkuro , looked through the previous commits. There was a commit 5 years ago, where yarn start's original purpose was to create a React App using "start": "nwb serve-react-demo" command. Main purpose according to readme was viz.js was used, in a WebWorker, to generate GraphViz as plain-text output which is then parsed and provided to a React component which does the rendering.

[georgreen]

@yurishkuro Is this related to this error?

13:33:08 [vite] Internal server error: Failed to resolve import "./layout.worker.bundled" from "..\plexus\src\LayoutManager\Coordinator.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/dev/jaeger-ui/packages/plexus/src/LayoutManager/Coordinator.tsx:20:25
  1  |  import * as convCoord from "./dot/conv-coord";
  2  |  import convInputs from "./convInputs";
  3  |  import LayoutWorker from "./layout.worker.bundled";
     |                            ^
  4  |  import {
  5  |    ECoordinatorPhase,
      at formatError (file:///C:/dev/jaeger-ui/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:63410:46)

This happens when, I run yarn start fresh pull from the latest main branch.