meemoo / dataflow Goto Github PK

for scrolling awesome

cards have weight to sort when multiple are shown

backbone model / view

In the NoFlo UI it will be possible for users to write new components. It would be important to have the nodes appear in the library when they're registered to the nodes property of the dataflow instance

I have been working on the Meemoo graph editor for a year or so, and I'm pretty happy with it. I have been thinking that it would benefit my project if I abstracted out all of the graph editing code from the Meemoo-specific code. Then I was thinking that all of the dataflow js projects could potentially benefit from working on a common editor.

Things that I would keep:

1. JSON graph format
2. Save to localStorage / gist
3. Selectable, draggable, droppable, resizable
4. Cut, copy, paste, with x,c,v keyboard shortcuts
5. Module library

Things to add:

1. Polishing touchscreen UX (lots of potential and room for improvement here)
2. Cleaning CSS, making it possible to look like Pure Data, Meemoo, or beyond using mostly CSS (+ some JS for SVG edge drawing)
3. Abstracting all data flow stuff from the views
4. Testing (:flushed:)
5. Abstract out save local/gist as optional plugins, to make it easy to extend to other services, implement auth, etc.

Questions:

1. Macros / subgraphs. How to represent this in the graph JSON?
2. Stick with Backbone.js?
3. Stick with jQueryUI?
4. Best interface to define how the different versions of source.connect(destination) is called from the GUI.
   • Named inputs/outputs

What do you think? Would this benefit your JS dataflow projects? Would you contribute to a common kickass graph editor?

@forresto - https://github.com/meemoo/iframework
@sebpiq - https://github.com/sebpiq/WebPd
@oampo - https://github.com/oampo/Audiolet
@brianchirls - https://github.com/brianchirls/Seriously.js
@dashersw - https://github.com/dashersw/pedalboard.js
@cwilso - https://github.com/cwilso/WebAudio
@bergie - https://github.com/bergie/noflo
@idflood - https://github.com/idflood/ThreeNodes.js
@daeken - https://github.com/daeken/Qtzweb

(Feel free to tag other related projects to this conversation.)

Port hole color.
Named routes.
Manually change edge color.

save zoom level, open cards, etc

google maps zooms on scroll, but i'll start with panning on scroll

also, preventDefault() chrome's annoying history nav

We need a persistent search card on the graph. Each dataflow module should be able to be a search provider, but initially the results should come from:

1. Node names of the current graph
2. Node names of the other graphs in the project (subgraphs, etc)
3. Component names and descriptions in the library
4. Uninstalled components in the larger component ecosystem on FBP environments that have one

and ⌘-A, X, C, V key bindings

When an edge is selected, we should show an inspector for it (this probably requires #27).

The card should show live the events passing through the port. At least connect, disconnect, begingroup, endgroup, and actual data payloads (normalized via toJSON when needed).

The card should also allow filtering the data shown by a text search.

In our projects we have different ways that we are defining nodes. How do we extend the base model and view that I have now?

The dataflow UI should validate the graph it is handling for consistency. At least:

• No orphaned edges
• No orphaned IIPs

It might also be nice to show some sort of warning on unconnected nodes.

It might be useful for accessibility purposes (and maybe for the people living on keyboard) to be able to make quick changes to the graph via a command line.

This line could accept graph edits in the FBP syntax, allowing you to connect two nodes in the graph either by dragging the connection, or typing on the command line:

SomeNode OUT -> IN OtherNode

https://github.com/noflo/fbp can provide the necessary parser for this.

Things to design:

1. how to expose i/o ports to graphing ui?
2. attributes: number, string, boolean types?
3. on-demand element loading

@bergie

I'm using dataflow in http://funky.meteor.com/ and I had to change some things to make it work inside Meteor. I'm happy to adapt these changes and feed them back upstream so that dataflow will keep working for me (and others) inside Meteor.

see also guaka/funky-meteor#3

The graph should get simplified when zoomed out. Depending on level, here are some things we could be hiding/showing

• node component
• port names
• node's component-rendered details

Suggestions?

https://github.com/meemoo/dataflow/blob/master/grunt.js#L6

Shouldn't there be a "package.json" instead ?

API for cards...

Cards should be components?

At least in many NoFlo components there are ports that the component really has to have connected (or provided with an IIP), and there are ports that are entirely optional. It might be useful to visualize this somehow. And maybe warn on unconnected required ports with #49

Hi,

I am thinking of building a web app that would have a data flow component and I bumped into your library. I have to say I am quite impressed by the demos on your website.
So if I understand correctly, dataflow is a rewrite of your previous project (iframewor).

My question is : Is it already in a usable state (particularly by a third party) ? As the only think I can see now is a relatively small test page. If not, what still needs to be done ?

Keep up the good work,
GMouron

make macro/subgraph, define its ins/outs

if new nodes are loaded, update library.

panels will eventually be context-aware cards

It would be nice to be able to copy the JSON source of a graph effortlessly. Maybe something like Clippy could help here?

There is currently a regression in dataflow that causes newly inserted nodes to not be movable.

In the demo, I'm hooking into backbone events like:

Dataflow.graph.on("change", function(){
  $("#code").val( JSON.stringify(Dataflow.graph.toJSON(), null, " ") );
}); 

Seem reasonable?

@brianchirls

• new node
• deleted node
• node connected
• node disconnected
• input modified (maybe node connected/disconnected is included in this one)

@bergie

• node crashed
• packet transmitted in a connection

How to define?

@bergie had a good idea of doing color by route, like subway maps: http://bergie.iki.fi/blog/inspiration-for-fbp-ui/ ... a zoomed-out routing view like this would be great as well.

Currently DataFlow initializes itself and places itself to the DOM immediately when it is loaded, which prevents it from being used as a library in other applications.

Since I'm currently trying to integrate the tool into NoFlo UI, this is a big issue. I will look at fixing it and sending pull requests.

http://bergie.iki.fi/actionbar/ could be considered an example of a "Backbone widget".

Graph-editing functionality could be added as plugins, with UI loaded into panels. This will keep the core app clean.

• history and undo
• view source, apply
• make macro with selection
• save to localstorage
• save to gist
• module library

Make a basic panel system that can be extended as needed

Suggestions?

meta + click to select multiple edges, then change the route of all, refs #41

http://www.html5rocks.com/en/mobile/touchandmouse/

zoom-tiny
zoom-small
zoom-normal
zoom-big

some ports should only accept one wire

Need to replace:

• draggable()
• droppable()
• resizable()

with touch-friendlier versions

Compatible ports should highlight when a connection is being dragged into them

Dataflow.module() isn't offering much, and "importing" dependencies is weird. @sebpiq suggested a simpler pattern:

var Dataflow = {
  moduleFunc1: function() {},
  moduleVar1: "blabla",
  views: {},
  models: {},
  collections: {}
}

and

(function(Dataflow) {
  var Edge = Dataflow.models.Edge = Backbone.Model.extend({ /*blabla*/ });
})(Dataflow);

Currently the dataflow UI is hard to work with on touchscreen devices even when zoomed in. We should have a smarter way of dealing with the UI when users touch it.

Initial concept:

• When user touches a node, we should watch for the direction of the move
• Moving left or right means wanting to do a connection from one of the ports
• The ports of the direction of travel should be magnified, and user could easily choose between them by moving slightly up or down (highlight the currently selected port)
• When dragging finger to another node, the ports of the receiving end should be similarly magnified and selectable
• Dragging up or down instead "detaches" the node so that it can be moved around
• Canvas panning should only happen on touches outside any node

Doing custom handling of touch interaction would eventually help in #42 as well.

and listen for changes for highlighting and fading nodes and edges, multiple drag, etc

stop testing .hasClass("ui-selected")

and make build process to combine and min them

Currently graph editing can be a bit fiddly, as you need to play a lot with the positioning of nodes to make the graphs look nice.

A lot of this could be automated by the work done in the CS community on various autolayout algorithms, and especially the ones intended for solving metro map layouts, as mentioned in my post on NoFlo UI

dataflow needs to implement its own pinch zoom support. On touch screen devices, the ports are too small to hit on default zoom level, and if we allow browser to zoom, it zooms the rest of the chrome as well when we'd only want to zoom the canvas.

Quick solution:

• Detect pinch zoom gestures on JavaScript level (for example with hammer.js)
• Change the CSS zoom attribute of the .dataflow-graph element accordingly

For smoothness we should include a CSS transition for this as well.

Bonus points for detecting a zoom level that the whole graph fits into, and starting at that level.