Group nodes base on meta

[adriaand007]

Hi
Awsome project
Would it be posible to group nodes base on meta of the node

    { "name": "192.168.3.63", "icon": "./images/server.png", "meta": { "grouping": "GRP1" } },
    { "name": "192.168.35.72", "icon": "./images/server.png", "meta": { "grouping": "GRP1" } },
    { "name": "192.168.18.78", "icon": "./images/server.png", "meta": { "grouping": "GRP1" } },
    { "name": "192.168.18.79", "icon": "./images/server.png", "meta": { "grouping": "GRP1" } },
    { "name": "192.168.35.71", "icon": "./images/server.png", "meta": { "grouping": "GRP1" } },
    { "name": "192.168.35.120", "icon": "./images/server.png", "meta": { "grouping": "GRP1" } },
    { "name": "192.168.32.142", "icon": "./images/server.png", "meta": { "grouping": "GRP2" } },
    { "name": "192.168.3.177", "icon": "./images/server.png", "meta": { "grouping": "GRP2" } },
    { "name": "192.168.3.176", "icon": "./images/server.png", "meta": { "grouping": "GRP2" } },
    { "name": "192.168.3.175", "icon": "./images/server.png", "meta": { "grouping": "GRP2" } },

Thank you

[codeout]

Hi, it could be done but not supported for now. Let me try. (or your PR would be greatly appreciated)

[adriaand007]

Hi
I'm no java developer but instead of using the options.pop regex to dfine grouping
Maybe used the meta tag or tags as grouping.
in src/node.js you already hanle the meta data surely you could then use it in the grouping
like options.group_pattern = node.meta

[codeout]

Just pushed a newer version. Cloud you try it with the data below?

    { "name": "192.168.3.63", "icon": "./images/server.png", "group": "GRP1" },
    { "name": "192.168.35.72", "icon": "./images/server.png", "group": "GRP1" },
    { "name": "192.168.18.78", "icon": "./images/server.png", "group": "GRP1" },
    { "name": "192.168.18.79", "icon": "./images/server.png", "group": "GRP1" },
    { "name": "192.168.35.71", "icon": "./images/server.png", "group": "GRP1" },
    { "name": "192.168.35.120", "icon": "./images/server.png", "group": "GRP1" },
    { "name": "192.168.32.142", "icon": "./images/server.png", "group": "GRP2" },
    { "name": "192.168.3.177", "icon": "./images/server.png", "group": "GRP2" },
    { "name": "192.168.3.176", "icon": "./images/server.png", "group": "GRP2" },
    { "name": "192.168.3.175", "icon": "./images/server.png", "group": "GRP2" },

We use meta especially for labeling and not good for grouping. Please use group instead.

Ref: https://github.com/codeout/inet-henge/#internal-groups

[adriaand007]

Hi
How do you get the icons scattered
Mine is all in line ...

Below is some of my code

<script> var data = { "nodes": [ { "name": "10.5.35.230", "group": "SRC", "icon": "./images/server.png", "meta": { "pop": "INV" } }, { "name": "10.5.35.231", "group": "INV", "icon": "./images/server.png", "meta": { "pop": "INV" } }, { "name": "10.5.35.232", "group": "INV", "icon": "./images/server.png", "meta": { "pop": "INV" } }, { "name": "10.25.1.200", "group": "INV", "icon": "./images/server.png", "meta": { "pop": "INV" } }, { "name": "10.25.1.201", "group": "INV", "icon": "./images/server.png", "meta": { "pop": "INV" } }, { "name": "10.5.35.18", "group": "INV", "icon": "./images/server.png", "meta": { "pop": "INV" } }, { "name": "10.5.35.209", "group": "INV", "icon": "./images/server.png", "meta": { "pop": "INV" } }, { "name": "10.25.35.119", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.25.3.62", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.25.3.63", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.5.35.72", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.25.18.78", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.25.18.79", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.5.35.71", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.25.35.120", "group": "MET", "icon": "./images/server.png", "meta": { "pop": "MET" } }, { "name": "10.25.32.142", "group": "CES", "icon": "./images/server.png", "meta": { "pop": "CES" } }, { "name": "10.25.3.177", "group": "CES", "icon": "./images/server.png", "meta": { "pop": "CES" } }, { "name": "10.25.3.176", "group": "CES", "icon": "./images/server.png", "meta": { "pop": "CES" } }, { "name": "10.25.3.175", "group": "CES", "icon": "./images/server.png", "meta": { "pop": "CES" } }, { "name": "10.25.18.141", "group": "CES", "icon": "./images/server.png", "meta": { "pop": "CES" } }, { "name": "10.25.18.140", "group": "CES", "icon": "./images/server.png", "meta": { "pop": "CES" } }, { "name": "10.25.18.139", "group": "CES", "icon": "./images/server.png", "meta": { "pop": "CES" } }, { "name": "10.25.35.112", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.25.3.60", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.25.3.64", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.5.35.73", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.25.18.77", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.25.18.191", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.5.35.74", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.25.35.113", "group": "RET", "icon": "./images/server.png", "meta": { "pop": "RET" } }, { "name": "10.25.34.29", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.25.34.30", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.25.34.31", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.25.2.25", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.25.2.26", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.5.35.175", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.25.17.121", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.25.17.122", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, { "name": "10.25.17.123", "group": "BTS", "icon": "./images/server.png", "meta": { "pop": "BTS" } }, ] }; // new Diagram('#diagram', data).init('interface'); var distance = function(force) { force.jaccardLinkLengths(70, 5.0); } var diagram = new Diagram('#diagram', data, { // pop: /(\.[^\s.]+)$/, bundle: true, distance: distance, width: 1200, height: 900 }); diagram.init('interface', 'pop'); diagram.on('rendered', () => { document.querySelectorAll('.node tspan').forEach((name) => { name.textContent = name.textContent.replace(/(\.[^\s.]+)$/, ''); }); }); </script>

[codeout]

Scattered manually.
That inline layout is the initial state before calculation. If you add some links, inet-henge calculates them before rendering and diagram should be different.