Using the-graph as a React component in a webpack environment

[ruippeixotog]

(Dev without much front-end experience here, sorry for any imprecision)

I read through the existing issues and saw there is the intention of stripping this project of noflo-specific dependencies and Polymer. But I have one question: as it is now, can the-graph be used as a React component in a Webpack/CommonJS modules environment at all?

I tried creating a simple project just to see if I could use one of the React components, but just rendering this:

import React from "react";
import TheGraph from "the-graph/dist/the-graph";

console.log(TheGraph);

const TestComponent = () => (
  <h1>Hello world!</h1>
);

export default TestComponent;

Causes an Uncaught ReferenceError: React is not defined here. Does this happen because you are still in the process of migrating the code base to use CommonJS modules? Or am I doing something wrong? If it's the former reason, is there any hack I can do to make this work?

Thanks for your work until now on this project, these graphs surely look great!

[jonnor]

Currently the-graph expects React to exist as a global, and yes this is due to pre-CommonJS / pre-webpack history.

If you use Webpack to pull in React (as opposed to a script tag like examples do), then expose it yourself using window.React = React before importing TheGraph. Not that pretty but should do the trick.

[ruippeixotog]

I'm not sure I can do it in my project... I tried setting the modules directly in window and using imports-loader, but since webpack resolves requires at build time and links them statically window may not end up being populated before the-graph is loaded.

I'll try to work on the CommonJS tasks at #314 since I really wanted to use this as a standalone component.

[femans]

@ruippeixotog For my own project I forked this project and hacked it to be able to use in a Webpack+React 15.x environment: https://github.com/femans/the-graph

It is work in progress and as I need it in the long run, I will keep improving on it. Feel free to use it or fork it again. It is workable now, but a lot still needs to be done.

[bergie]

@femans would you like to submit that as a PR?

[femans]

Hi @bergie, yeah would love to, but I don't know if the current state is compatible. I would have to test that hypothesis. It has been quite a big refactor so far, jumping 15 versions of React at once, and making a dependency of a webpack bundler for the css. Also I intend to over time remove the deprecated stuff that is in there, so that it will be compatible with react v16. It works by itself as a react component and i made a small webpack/react example project based on the basic example. Once i am a bit further i will try to see if it can be integrated. It was not my main intention, I just needed it for my own project. But ok I will see what I can do.

[ruippeixotog]

@femans it's great to hear that someone was able to do it! I gave up after I had to deal with some messed up dependencies and usage of globals... I'll try your fork this week and give some feedback.

[femans]

Cool. It is work in progress though, not everything works 100% 'out of the box' yet, menus for example dont work yet, and fontawesome icons dont work yet either. I am sure there is more that i havent found out yet. Let me know if you use it so i will make sure not to push unstable code on master.

[femans]

@ruippeixotog did you ever try it out? I moved the project to https://github.com/digibio/the-graph

[kmannislands]

@bergie what are the odds of having something like this merged in?

Looking at depending on this package, but the super-old react and incompatibility with webpack/ js module systems are dealbreakers.

Can provide some resources to help this happen if it will be supported

[jonnor]

We really really want to make the-graph cleanly usable with standard webpack and React workflow. It is also desirable to update to latest React.
However rewrite-everything forks I don't consider mergeable, it has to be done in a couple of cleanish chunks - we need everything to continue working and currently don't have test coverage to just rely on that as a definition of 'it works'.

Any help along these lines is appreciated. If some is interested in paying for the work that can help enable us to prioritize it and get it done in a timely fashion.

[jonnor]

Most of the specific needs to get this to work are in #314
I completed some of them a while ago, but did not get around to all of it.

[kmannislands]

Glad to hear that this is a priority.
Sent an email, perhaps we can work together on this.

[KMontag42]

What is the status of this work? I am happy to contribute to an active PR for this issue.

Thanks!

[jonnor]

React 15 compatibility has been merged and released in the-graph 0.11. Everywhere inside the components should be using require() to get React, so I think this should just-work with webpack now.
If it does not work, a minimal example code+Webpack config that reproduces would help a lot.

[jonnor]

Here is an example App.js that works out-of-the-box with create-react-app:

import React, { Component } from 'react';

import './App.css';
import 'the-graph/themes/the-graph-dark.css';

import TheGraph from 'the-graph';
import fbpGraph from 'fbp-graph';

// Generate some graph contents programatically
function addNode(graph) {
  var id = Math.round(Math.random()*100000).toString(36);
  var component = Math.random() > 0.5 ? 'basic' : 'basic';
  var metadata = {
    label: component,
    x: Math.round(Math.random()*800),
    y: Math.round(Math.random()*600)
  };
  var newNode = graph.addNode(id, component, metadata);
  return newNode;
};
function addEdge(graph, outNodeID) {
  var nodes = graph.nodes;
  var len = nodes.length;
  if ( len<1 ) { return; }
  var node1 = outNodeID || nodes[Math.floor(Math.random()*len)].id;
  var node2 = nodes[Math.floor(Math.random()*len)].id;
  var port1 = 'out' + Math.floor(Math.random()*3);
  var port2 = 'in' + Math.floor(Math.random()*12);
  var meta = { route: Math.floor(Math.random()*10) };
  var newEdge = graph.addEdge(node1, port1, node2, port2, meta);
  return newEdge;
};
function populateGraph() {
    var graph = new fbpGraph.Graph();
    addNode(graph);
    addNode(graph);
    addNode(graph);
    addEdge(graph);
    return graph;
};

class App extends Component {
  render() {

    var componentLibrary = {
        basic: {
          name: 'basic',
          description: 'basic demo component',
          icon: 'eye',
          inports: [
            {'name': 'in0', 'type': 'all'},
            {'name': 'in1', 'type': 'all'},
            {'name': 'in2', 'type': 'all'}
          ],
          outports: [
            {'name': 'out', 'type': 'all'}
          ]
        },
    };

    var myGraph = populateGraph();

    return (
      <div className='the-graph-dark'>
        <TheGraph.App width={window.innerWidth} height={window.innerHeight} library={componentLibrary} graph={myGraph}/>
      </div>
    );
  }
}

export default App;

Closing this as fixed

[jonnor]

Screenshot of how above example should look:

The test app was actually using 16.2.0 (default in create-react-app). The very basics seems to work OK there, but React 15.6 will probably be the recommended/supported version for now. Compatibility fixes for React 16 that also works on 15.6 very welcomed!

[KMontag42]

Sweet! Thanks a ton everyone!

[Dragomir-Ivanov]

@jonnor Thanks a lot, just what I have need. Will try to send PRs for the the-graph component.

[Dragomir-Ivanov]

@jonnor I have an issue, accessing TheGraph.Graph, using this example.
I am using:

<TheGraph.App ref={ref => console.log(ref)} {...this.props} />

But ref is null every time. Now I want to have nodeSelected callback so I can put the selected node in selectedNodes array within TheGraph.Graph, which resides within TheGraph.App, however I can't get the .App ref so I can do

appView.refs.graph.setSelectedNodes(nodes);

Any idea is appreciated.