0

I'm trying to add functionality to the noflo ui, I'd like to be able to select groups and display a panel showing the group name and description. (The panel would show up in the same place as the help panel.) I'm trying to do this as the first step to extending the groups paradigm. (I'd like to be able to add more group metadata and allow the user to edit that metadata.)

The Problem

I can't find where to put the hooks for the selected groups collection. (Or selected group property). I've looked at the way the selected nodes collection is implemented but the connection between the selectedNodes property in theGraph/thegraph-editor.html connects to the nodes property of the node-inspector (in elements/noflo-node-inspector.html and elements/noflo-context.html)

I've looked at the application/fbp scripts in index.html but none of them seems to corrospond to the selected nodes property.

The Question

How can I create a property in theGraph and watch that property in noflo-ui?

cwohlman
  • 763
  • 6
  • 21

2 Answers2

1

Implementing selectedGroups was more complicated than a simple selectedNodes search. Specifically I had to find and write equivilent code for:

  1. onNodeSelection (the-graph-group.js, the-graph-graph.js)
  2. event handler (the-graph-group.js)
  3. nodes event (the-graph.html)

    //This is where things get confusing
    this.fire('nodes', this.selectedNodes)
    // Note the transition from the selectedNodes property to the nodes event
    
  4. nodes property of noflo-context.html

  5. nodesChanged property/event handler of noflo-context.html
  6. nodes inports attribute of noflo-context and the-graph-editor polymers (index.html)
  7. fbp link between GraphEditor NODES -> NODES Context (index.html)
  8. nodes outport GraphEditor.NODES:NODES
  9. nodes property declaration as an attribute of the-graph-editor polymer (the-graph-editor.html)
cwohlman
  • 763
  • 6
  • 21
0

The answer would be the same way that selectedNodes and selectedEdges work. The binding between the-graph (React) and noflo-ui (Polymer) happens there.

I added a feature request for a group inspector: https://github.com/noflo/noflo-ui/issues/217

forresto
  • 12,078
  • 7
  • 45
  • 64
  • Thanks for the answer, I posted this question after trying unsuccessfully to search for and implement all the links in the chain between selectedNodes on the graph (the search you linked to) and context.nodes property. See my answer for the other steps I had to take to get this working. – cwohlman May 08 '14 at 01:11