Previewing flows on the Flow Library

[knolleary]

Building on the great work done by @gregorius, and thanks to @joepavitt efforts, we've now got previews of flows in the Flow Library.

This lets you see the flow without having to import its JSON.

What's even more cool is the 'Share flow' link in the sidebar that will give you some html you can copy and paste to embed the flow viewer in another site... including in this forum...

There's more work to do to improve the overall experience. For example, it doesn't know about the icons/colours of contrib nodes so they all get a very generic appearance - but this is a great starting point.

Let us know what you think!

[dceejay]

That’s really nice. Great work all.
Could you also drag / drop the flow across ?

[softy2k]

Nice job. I hope that the project will continue

[gregorius]

Thanks to @joepavitt for the feedback

Great idea with embedding of flows, I hope it takes off!

I had a quick play around with this flow

And noticed the subflows weren't connected. I began zooming around and switching between tabs and somewhere along the lines, I was zoomed out and couldn't zoom in again:

that was maximum zoomed in'ness - perhaps the zoom needs to be reset between switching between subflows and main flow?

Sorry for being pedantic

EDIT:

And noticed the subflows weren't connected.

That seems to be because some obj has no wires attribute and then obj.wires.length breaks ... it's a bug in the flowviewer unfortunately ...

EDIT2:

Turns out it was config node in the subflow that broke it, fixed with this commit

[TotallyInformation]

Brilliant! Kudos all round. A great addition. Many thanks.

---

Minor thing, not sure that the frame/zoom is always quite correct?

Examples of uibuilder's uib-tag node (flow) - Node-RED (nodered.org)

Top is an included img and the bottom is the flow visualisation, the 3rd flow is out of view.

I've checked a few and many of the visualisations are out of sight.

Also, some where the content seems to be misinterpreted completely

Test sql lite (flow) - Node-RED (nodered.org)

[joepavitt]

@TotallyInformation

Top is an included img and the bottom is the flow visualisation, the 3rd flow is out of view.

We haven't implemented auto-framing at the moment, but if you're open to contributing, it would be a welcome addition.

For now, it just defaults to zoom level "1", equivalent of the Node-RED Editor.

[joepavitt]

@TotallyInformation

Also, some where the content seems to be misinterpreted completely

Test sql lite (flow) - Node-RED (nodered.org)

The viewer on that page seems to work fine?

[E1cid]

Preview displays fine but the extra duplicate JSON is huge and overwrites other elements
On Android Chrome

Then 7 plus full screens down

[gregorius]

@joepavitt

We haven't implemented auto-framing at the moment, but if you're open to contributing, it would be a welcome addition.

I think d3 isn't capable of doing framing content into the viewable area (or at least I didn't find it), what I did therefore was to readjust the size of the svg to be the same size as the containing div and then setting the viewBox of the svg to the bounding box of the content:

var svg = $("#flowdatacontainer .svg-container-noderedjson svg");
svg.attr('width','');
svg.attr('height','');
svg.css('width', $('#flowdatacontainer').width() + "px");
svg.css('height', $('#flowdatacontainer').height() + "px");
var bbx = $("#flowdatacontainer .svg-container-noderedjson svg .containerGroup")[0].getBBox();
svg.attr('viewBox', bbx.x + " " + bbx.y + " " + (bbx.width * 1.1) + " " + (bbx.height * 1.1) )

[gregorius]

@TotallyInformation

Also, some where the content seems to be misinterpreted completely

Test sql lite (flow) - Node-RED (nodered.org)

that seems to be a flow where someone has included the flow.json into the description field when creating the flow - instead of writing a description of the flow

EDIT:

viewing the gist it does seem so ...

[TotallyInformation]

A couple of my old contributions were also strange which I don't remember seeing before. But I haven't had a chance to go check the GISTs yet.

[joepavitt]

@gregorius

I think d3 isn't capable of doing framing content into the viewable area (or at least I didn't find it), what I did therefore was to readjust the size of the svg to be the same size as the containing div and then setting the viewBox of the svg to the bounding box of the content:

Have dropped some thoughts here: Flowviewer - Auto Frame Content · Issue #106 · node-red/flow-library · GitHub

[HaroldPetersInskipp]

Love the new change. I wasn't anticipating it to be integrated so quickly! You guys are awesome.