Migration to Vite

[palagdan]

Resolves #51 Resolves #58

[palagdan]

@blcham

After updating the extension from .js to .jsx for all the components, I encountered an issue with loading a pipeline. Specifically, after initializing a graph, the node state is empty. I tried to investigate it using debugging, but I couldn't figure out the problem. Everything else is working fine with Vite, including static images.

I encountered an error with WebSockets in Dagre.jsx: ReferenceError: Buffer is not defined. I investigated and found that this error occurs because the Buffer class is a global object in Node.js but not in browser environments. The solution is to use the nodePolyfills plugin, which provides browser-compatible versions of Node.js core modules and globals. This allows libraries designed for Node.js environments to function correctly in the browser. We can discuss the possibility of removing this plugin and WebSocket from the Dagree component, as I don't see a strong reason to keep it.

[palagdan]

To Do After Migration to Vite

1. Refactor Class Components to Functional Components
   Functional components are recommended for better performance and simplicity.

2. Refactor main.css
   Refactor main.css into separate files

3. Fix Script Execution Issues
   Fix problems related to script execution.

4. Migrate from TreeBeard to MUI Material for Script Tree Generation
   TreeBeard is outdated and causing warnings. Switch to MUI Material for generating the script tree due to the following warnings:

   
   TreeBeard2: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
   
   Warning: Transition2 uses the legacy childContextTypes API, which is no longer supported and will be removed in the next major release. Use React.createContext() instead.
   
   ...

[palagdan]

@blcham I fixed a bug related to Dagre state management. It is a magic to me how it worked before and why it stopped working after I changed the file extension from .js to .jsx (I am sure this issue was caused by this change).

I discovered that setState() is an asynchronous function but does not return a promise, making its behavior somewhat unpredictable. The only way to ensure state updates are processed before taking action is to use a callback function as the second parameter of setState(). Unfortunately, you cannot await setState() directly.

The problem was that setState() was called multiple times within processGraph() and addNodes(), leading to an empty state. Additionally, this.renderCytoscapeElement() should be called after processGraph() has updated the nodes and edges state. However, since setState() is asynchronous, it didn't update the state in time, resulting in renderCytoscapeElement() receiving empty nodes and edges arrays. This is why the pipeline wasn’t rendered as shown in the picture I sent earlier.

   Rest.getScript(this.state.file, this.state.transformation).then((response) => {
        this._processGraph(response);
        this.renderCytoscapeElement();
      });

[palagdan]

@blcham

I am completely stuck with this ticket. Yesterday, after fixing a bug that I described earlier, I attempted to test it in Docker (production mode). When I tried to load the scripts, the page wouldn't load due to a polyfill issue with process. The external library undici uses Node.js libraries that are not supported by the browser, which is causing this error: The undici library tries to access a Node.js version with the process variable: Since the browser does not support Node.js libraries, process is undefined, and Vite does not support it either. For reference, see: https://github.com/vitejs/vite/issues/7384.

I attempted to use the vite-plugin-node-polyfills library, but it did not resolve the issue and instead introduced new problems, such as memory leaks during the build and strange conflicts:

11.73 error during build:
11.73 [commonjs--resolver] Could not load /app/node_modules/stream-browserify/web: ENOENT: no such file or directory, open '/app/node_modules/stream-browserify/web'
11.73 file: /app/node_modules/jsonld/lib/index.js
11.73 Error: Could not load /app/node_modules/stream-browserify/web: ENOENT: no such file or directory, open '/app/node_modules/stream-browserify/web'

I don't know how to resolve this, as there is limited information available, and nothing seems to work.

I find out that using vite.js gives a different result between dev and build environment, that is why it works totally fine in a dev mode.

I tried to define process myself with

import Process from "process";
globalThis.process = Process;

But It is also undefined in production: