Flow Viewer on Flow Inspector Page

[joepavitt]

Closes https://github.com/node-red/flow-library/issues/2

Utilises a local variation of https://github.com/gorenje/node-red-flowviewer-js in order to render the flow.json. Added extra functionality to switch between tabs & subflows.

Example: Flow with Group & Subflow

Example: Viewing the Subflow

TODO:

• ZoomPan for flows that exceed the window size

[linux-foundation-easycla[bot]]

The committers listed above are authorized under a signed CLA.

• :white_check_mark: login: joepavitt / name: Joe Pavitt (2d8fe134bf783ea331b8a3a056c6fb415fcec500, 42c4a028df12f405382005604f3334f4586fc26f, 99b296967dc2b49f616abd1a63b24bb7f8d4e92a, 34c0777c893376f13f8663e0f4fd71d798dae40a, 0777df8191bde0bf94910f94c49b941aff13076a, 22f0650eddbfc1cfca93596a833e99955dc1fa24, 0a2786e8379b43e53d714c67bff2a298a3db2ebc, 880cfbf040016f3570e28a7fdd45f3c2a6651416)

[joepavitt]

Just tried a few more nodes:

Work:

• Switch (multiple outputs) -
• Comment Node
• Link Nodes

Not Working (currently):

• Config Nodes - cause the addition of an extra "Tab" to the window which isn't required
• Complete Node - needs styling
• Dashboard 2.0 Node - needs styling, but also improved catch all for non-core nodes that don't clash with Function Node

[joepavitt]

• Added the styling for the "Complete" node
• Made the default/backup styling for third-party nodes plain white
• Added a note about styling of third-party nodes

[joepavitt]

Also just fixed the port positioning for "Link" nodes:

[joepavitt]

@knolleary the only outstanding item left here is pan/zoom. It was recommended to just use d3 for this, but thought I'd check with you before I build, as that's a heavy inclusion for the page, just for pan/zoom. I'm happy to try and implement manually if you'd prefer.

[gorenje]

On the pan/zoom thing, I finally got something working that seems to work on all devices:

       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) )

        var svg = d3.select("#flowdatacontainer .svg-container-noderedjson svg");

        svg.html("<g>" + svg.html() + "</g>");
        var inner = svg.select("g");

        window.__flowZoom = d3.zoom().on("zoom", function(event) {
            inner.attr("transform", event.transform);
        });

        window.__flowZoomElem = svg.call(window.__flowZoom);

My problem was that the svg had width & height that was completely wrong, I had to set width & height to match that of the container. Then I set the viewBox of the svg to the bounding box of the content. Finally I use d3 to handle the zoom. It took me a while to get it right but now it works now on mobile and desktop.

I have a semi-plan to tryout timmywil/panzoom, it seems promising...

[joepavitt]

Junction test:

[joepavitt]

pan/zoom added (with zoom in/out, and pan left/up limits):

[knolleary]

@joepavitt great! Do we think this is ready to review to push out live?

[gorenje]

@joepavitt can I ask how pan/zoom came to be? did you end up using d3 or something else?

[joepavitt]

can I ask how pan/zoom came to be? did you end up using d3 or something else?

This is the function I've added, it extends the idea you shared here. It also adds dragging CSS class for cursor control, and also places zoom/pan limits so that you don't go beyond the top-left (0,0) where there will never be flow defined anyway due to NR's own limits in place.

function addPanZoom () {
    var svgs = d3.selectAll('.flowviewer svg');
    svgs.each(function() {
        var svg = d3.select(this);

        svg.html('<g>' + svg.html() + '</g>');
        var inner = svg.select('g');
        var zoom = d3.zoom()
            .translateExtent([[0, 0], [3000, 3000]])
            .scaleExtent([0.5, 1])
            .on("start", function () {
                svg.classed("dragging", true);
            })
            .on('zoom', function(event) {
                inner.attr('transform', event.transform);
            })
            .on("end", function () {
                svg.classed("dragging", false);
            });
            svg.call(zoom);
    });
}

[joepavitt]

Do we think this is ready to review to push out live?

I would say yes

[gorenje]

can I ask how pan/zoom came to be? did you end up using d3 or something else?

This is the function I've added, it extends the idea you shared here. It also adds dragging CSS class for cursor control, and also places zoom/pan limits so that you don't go beyond the top-left (0,0) where there will never be flow defined anyway due to NR's own limits in place.

Wow, cool! :large-eye-smiley: - can I "borrow" that code ;)

[joepavitt]

can I "borrow" that code ;)

Of course

[marcus-j-davies]

I have been watching this closely... Let me introduce you to my box that belongs to Pandora

Wouldn't the examples folder also benefit massively here? This will give a true sense of connection between the Info page and the Examples that can be packaged with Nodes?

I'd guess this will require some work and isn't something that will happen soon - but possible right?

[joepavitt]

I'd guess this will require some work and isn't something that will happen soon - but possible right?

This is definitely a "Step 1". Our next step would be to npm-ise the JS/CSS into a node module such that the viewer is easier to port into other applications and use-cases.