Desired cleanups

[jonnor]

Right now the code has a couple of warts

• Business logic intermixed with rendering
• State is kept spread across in many different places
• Cross-element dependencies (the-graph-nav gets an the-graph-editor)
• No separation of state which affects the underlying graph, and what just affects the presentation/view
• Pulls in all of NoFlo (incl the FBP runtime). Right now quite fat, and confusing becuase the-graph is not NoFlo-specific

Also, we need to get rid of Polymer, see #222

TODO

Concrete things

General cleanups

• [x] Split out the Graph things from NoFlo.
• [x] Use Graph library instead of NoFlo
• [x] Make usable via NPM (no Bower needed)
• [x] Remove dependency in the-graph-nav on editor element
• [x] Remove registerComponent() and getComponent(), in favor plain library property

Use CommonJS modules instead of communicating via TheGraph global

• [x] CommonJS build setup
• [x] Thumbnail and Nav use only CommonJS
• [x] Move .mixins to module, require() where used
• [x] Move .arcs to module, require() where used
• [x] Move geometry utilities TheGraph.find... out of the-graph.js
• [x] Move default/config out of the-graph.js
• [ ] Change factories to be local to module, required when needed. Expose as TheGraph.$module.factories for overriding, probably with legacy mappping in place

React modernizaton

• [ ] Remove React.createFactory() usage, in favor of exposing the class and using React.createElement()

Polymer-removal

• [x] Move loading of FBP graph out of the-graph-editor
• [x] Make the-graph-thumb usable without Polymer wrapping
• [x] Make the-graph-nav usable without Polymer wrapping
• [x] Remove use of PolymerGestures in favor of HammerJS
• [x] Make the-graph-editor usable without any Polymer wrapping
• [x] Move the Polymer elements over to noflo-ui, remove the dependency
• [x] Kill unused the-graph Polymer element, use React directly in the-graph-editor

Later

• [ ] Remove setState use for setSelectedEdges etc, just use props

Loose guidelines

Generally how to approach things

• Add tests before making changes. #313
• Move logic from Polymer .HTML components down into .JS files.
• Document responsibility of each module/class
• Minimize area of public APIs
• Ensure that interactivity is only done in -nav and -editor (not -thumb and the-graph)
• Introduce a dedicated "ViewState" for keeping track of state which affects View. Pan/zoom/scroll, selection
• Introduce a dedicated "State". Contains primarily the NoFlo/FBP graph
• Move the library/component code into part of State

[jonnor]

An open question is how to do gestures without Polymer.

[forresto]

noflo-ui does use the-graph-thumb: https://github.com/noflo/noflo-ui/blob/1ddb399017ecb2da99c4033f9ecfc1e4deedc9b5/elements/noflo-main.html#L199

[forresto]

the-graph-editor / the-graph was supposed to be like the-graph-nav / the-graph-thumb, with navigation separated from rendering. Good idea to make those separate (React) components.

[jonnor]

Fair points. Keeping interactivity away from rendering is good. Updated description.

[forresto]

Reason for including noflo originally was to listen to changes from elsewhere (p2p) -- https://github.com/flowhub/the-graph/blob/c3b6a15eb41d079c625e07359d212c9ebb84f0f4/the-graph/the-graph-graph.js#L102-L116

[jonnor]

Yes, and that is still legit. Its just that this functionality should move outside of NoFlo so it can be shared more nicely.

[jonnor]

the-graph 0.5.x no longer depends on NoFlo, using new fbp-graph library instead #316

[jonnor]

#320 has a lot of cleanups that reduces dependency on Polymer elements a lot.

[jonnor]

Things that still are a bit unclear:

• component library handling
• event handling
• selection (nodes, edges) handling