Building the React Flow Bundle

The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

This guide explains how to build the React Flow JavaScript bundle that powers the visualization component of dplyneage.

Note for Users: The bundle should be pre-built when you install the package. You typically only need to build it if:

Prerequisites

Node.js (v18 or higher): Download from nodejs.org
npm (comes with Node.js)

Build Steps

Option 1: Using R (from a source checkout)

With your working directory at the root of the dplyneage repository:

# Check if bundle already exists
dplyneage::has_bundle()

# Build (or force-rebuild) the bundle - internal developer helper
dplyneage:::build_bundle()
dplyneage:::build_bundle(force = TRUE)

Option 2: Using the build script

From the package source directory in a terminal:

chmod +x build_bundle.sh
./build_bundle.sh

Option 3: Manual build

cd srcjs
npm install
npm run build

What Gets Built

The build process creates:

inst/htmlwidgets/lib/reactflow/reactflow-bundle.min.js - Complete React Flow bundle

This bundle includes:

React 18.2.0
ReactDOM 18.2.0
@xyflow/react (React Flow) 12.10.0
All necessary CSS (injected automatically)

Development Mode

For active development with auto-rebuild:

cd srcjs
npm run dev

This will watch for changes and rebuild automatically.

Testing After Build

devtools::load_all()

lineage_flow(
  nodes = list(
    list(id = "1", position = list(x = 0, y = 0), 
         data = list(label = "Source")),
    list(id = "2", position = list(x = 250, y = 100), 
         data = list(label = "Transform")),
    list(id = "3", position = list(x = 500, y = 0), 
         data = list(label = "Output"))
  ),
  edges = list(
    list(id = "e1-2", source = "1", target = "2"),
    list(id = "e2-3", source = "2", target = "3")
  )
)

If the bundle loads successfully, you’ll see an interactive React Flow diagram with draggable nodes, pan/zoom controls, and a grid background.

If the bundle doesn’t load, it will fallback to the SVG visualization.

Troubleshooting

Bundle not found: Make sure the build completed successfully and check that inst/htmlwidgets/lib/reactflow/reactflow-bundle.min.js exists.

Build fails:

Check Node.js version: node --version (should be v18+)
Clear node_modules and rebuild: cd srcjs && rm -rf node_modules && npm install && npm run build

Widget shows SVG instead of React Flow: Check browser console for errors. The widget will fallback to SVG if React Flow fails to load.

Development Workflow

If you’re modifying the React Flow bundle:

Make changes to srcjs/src/index.js
Run npm run dev in the srcjs directory
Reload the R package with devtools::load_all()
Test your changes

The webpack configuration in srcjs/webpack.config.js handles bundling all dependencies into a single minified file.

Bundle Contents

The bundle is created using webpack and includes:

React Flow: The main visualization library
React & ReactDOM: Required for React Flow
CSS: All styling bundled inline
Source maps: For debugging (in development mode)

The bundle is optimized for production with minification and tree-shaking to reduce file size.

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.