Interactive organisation structure Tree chart diagram

[slscustom.ru]

Hi, everyone! I hope you’re fine! I’m trying to create organisation structure Tree chart diagram.
At first looks very simple:

1. Use “apexcharts” library.
2. Create an HTML
3. Inject JSON data to HTML body.
4. Use Glide HTML to URL column to create a link
5. Show link in Glide Web Embed component.
   Main difficulty for me is to craft an JSON data, because “apexcharts” require each child component must include they Children. This one became to loop dependency error in Glide. I can solve it by creating independent computed column for each layers, but how to craft JSON without independent computed column for each layer(i mean infinity layers). Yes it can be solved in a flow of data creating(on every data inputs - is to run update), but if data already there, how i can do it?
   My basically data structure is:
   Staff Table:
   Staff_id, Staff_Name
   Parent to children table:
   ParentStaff_id, ChildrenStaff_id
   Sample JSON:

{
        id: 'ms',
        data: {
          imageURL: 'https://i.pravatar.cc/300?img=68',
          name: 'Margret Swanson',
        },
        options: {
          nodeBGColor: '#cdb4db',
          nodeBGColorHover: '#cdb4db',
        },
        children: [
          {
            id: 'mh',
            data: {
              imageURL: 'https://i.pravatar.cc/300?img=69',
              name: 'Mark Hudson',
            },
            options: {
              nodeBGColor: '#ffafcc',
              nodeBGColorHover: '#ffafcc',
            },
            children: [
              {
                id: 'kb',
                data: {
                  imageURL: 'https://i.pravatar.cc/300?img=65',
                  name: 'Karyn Borbas',
                },
                options: {
                  nodeBGColor: '#f8ad9d',
                  nodeBGColorHover: '#f8ad9d',
                },
              },
              {
                id: 'cr',
                data: {
                  imageURL: 'https://i.pravatar.cc/300?img=60',
                  name: 'Chris Rup',
                },
                options: {
                  nodeBGColor: '#c9cba3',
                  nodeBGColorHover: '#c9cba3',
                },
              },
            ],
          },
          {
            id: 'cs',
            data: {
              imageURL: 'https://i.pravatar.cc/300?img=59',
              name: 'Chris Lysek',
            },
            options: {
              nodeBGColor: '#00afb9',
              nodeBGColorHover: '#00afb9',
            },
            children: [
              {
                id: 'Noah_Chandler',
                data: {
                  imageURL: 'https://i.pravatar.cc/300?img=57',
                  name: 'Noah Chandler',
                },
                options: {
                  nodeBGColor: '#84a59d',
                  nodeBGColorHover: '#84a59d',
                },
              },
              {
                id: 'Felix_Wagner',
                data: {
                  imageURL: 'https://i.pravatar.cc/300?img=52',
                  name: 'Felix Wagner',
                },
                options: {
                  nodeBGColor: '#0081a7',
                  nodeBGColorHover: '#0081a7',
                },
              },
            ],
          },
        ],
      }

May be it is very simple to solve but I stupid there for now.
Thanks for any suggestions!

[nathanaelb]

I think a very similar topic was discussed a few weeks ago. If you do an advanced search you could see what was discussed.

Have you tried with the custom AI component?

[slscustom.ru]

My question, mostly not about visualisation, but most about how to craft data for structure where each children must contain they children and whole chain is nested.
If @nathanaelb can please point me for topic, i will check it.
Thanks for income!

[ThinhDinh]

Great stuff, thanks for sharing.

[slscustom.ru]

Okay! For now i fined simple solution, simple but may be not perfect:
Use data table with Staff_id, Parent_id
And craft JSON data in JS column.
It is interesting how many layers and nodes JS column can handle? Will investigate
https://www.vidline.com/share/V014HZ8594/56f3a099dd7ca70e07cadb8253ecc10c
Some one asked for a guide, later i will craft some video with step by stet guide.
For now see the html and Java script

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/apextree"></script>
  </head>
  <body>
    <div id="svg-tree" style="display: flex; justify-content: center"></div>
    <script>
      const data = {{DATA}};
      const options = {
        contentKey: 'data',
        width: {{W}},
        height: {{H}},
        nodeWidth: 150,
        nodeHeight: 100,
        fontColor: '#fff',
        borderColor: '#333',
        childrenSpacing: 50,
        siblingSpacing: 20,
        direction: 'top',
        enableExpandCollapse: true,
        nodeTemplate: (content) =>
          `<div style='display: flex;flex-direction: column;gap: 10px;justify-content: center;align-items: center;height: 100%;'>
          <img style='width: 50px;height: 50px;border-radius: 50%;' src='${content.imageURL}' alt='' />
          <div style="font-weight: bold; font-family: Arial; font-size: 14px">${content.name}</div>
         </div>`,
        canvasStyle: 'border: 1px solid black;background: #f6f6f6;',
        enableToolbar: true,
      };
      const tree = new ApexTree(document.getElementById('svg-tree'), options);
      tree.render(data);
    </script>
  </body>
</html>

const nodes = [{{NODES}}];

const options = [
    {{OPTIONS}}
];

// Create a lookup map for options by id for easier access
const optionsMap = options.reduce((acc, opt) => {
    acc[opt.id] = opt;
    return acc;
}, {});

// Function to create a node with its options and children
function createNode(node) {
    return {
        id: node.id,
        data: {
            imageURL: node.imageURL,
            name: node.name
        },
        options: {
            nodeBGColor: optionsMap[node.id]?.nodeBGColor || '',
            nodeBGColorHover: optionsMap[node.id]?.nodeBGColorHover || ''
        },
        children: []
    };
}

// Build hierarchical structure
function buildTree(nodes) {
    const nodeMap = {}; // To store references to each node by id
    let root = null;

    // First, create all nodes as empty objects and store them in the map
    nodes.forEach(node => {
        nodeMap[node.id] = createNode(node);
    });

    // Link nodes to form the tree structure
    nodes.forEach(node => {
        if (node.parent_id) {
            // Attach to the parent's children array
            nodeMap[node.parent_id].children.push(nodeMap[node.id]);
        } else {
            // No parent_id means this is the root
            root = nodeMap[node.id];
        }
    });

    return root; // The root node represents the entire tree
}

// Generate the hierarchical JSON from the nodes data
const jsonTree = buildTree(nodes);

return(JSON.stringify(jsonTree, null, 2));

Nodes is a [Joined]

{ 'id': $ID, 'parent_id': $PARENTID, 'name': $NAME, 'imageURL': $IMAGEURL }

Options is [joined]

{ 'id': $ID, 'nodeBGColor': '#cdb4db', 'nodeBGColorHover': '#cdb4db' }

Offcourse this is not stepby step tutorial but may be it can helps for some one.

Interctive Tree chart in Glide Apps

Also explore template:

ORG Chart