How to display Tree diagram at dashboard

[BartButenaers]

@natanel

this tree is very specific to the example data

Thanks for the info! I wasn't aware that it was only usable for specific data. That is a pitty. Unfortunately I have no time to create a generic solution, since I'm busy with other Node-RED stuff at the moment...

But I see that already a lot of ingenius minds are already involved in this discussion. Perhaps they can create a more reusable version of it

Fingers crossed...

[natanel]

Hi
Andrei - I already moved forward with adding code computeSvgSizeFromData
to make the size change as functions of tree size, so meanwhile keeping my SVG creation.
took your the color node "black" solution.
tree.txt (13.6 KB)

Bart
I made the tree much more general
with ability to read incoming msg
and changing SVG size as tree size (input data)

I am totally new to javascript , so I googled for those changes
if there is a better way, you are welcome

usage
function nodes "prepare tree data" - two nodes, simulating my mesh network data and preparing it for template node "tree schem"

template node "tree schem" - the one actually doing the tree (the one you asked in generic )
the msg.payload input should follow this example

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ]
  }
];

fill free to use

still will be nice to have

1. add scrolling bar abilities
2. tree options from up/down/left/right
3. correct way to pass to the SVG element to use the id of the TAB/group,
   getting it from the node properties of the template node

[zenofmud]

@natanel - I just imported your latest flow and noticed that if I click on one of the children nodes (ID 11, VRN 1), the whole tree collapses and the remaining node moves to the top left with text overlaying itself

If I click that node, it moves down but nothing else is shown

If I click again the tree expands but 'ID 11, VRN 1' is colapsed

and when I click it, the whole tree colapses again only this time the node is green and clicking it does nothing.

Hope this is helpful....

[natanel]

fix it

tree.txt (13.7 KB)

also added the "lime" color for node with hidden children

please write me any other bugs

[Andrei]

@natanel

also added the "lime" color for node with hidden children

It is working pretty well. Nice touch adding the lime color to show a collapsed node.

All in all it is very impressive what you have achieved.

I am curious, what is your use case ? How do you use this solution and what kind of problem it solves for you ? You mentioned eeprom data... is this some kind of network monitoring ?