grid layout support

[n-bes]

Hi. I don't want to manually calculate location of nodes with Precalculated layout. Is it possible to add Grid layout to the graph?

The goal is to visualize c4 arch models and provide way to put nodes on different mixed layouts (Horisontal / Vertical)

Or it can be achieved with ELK?

[n-bes]

Or it can be achieved with ELK?

I tried, but it didn't work:

import { useCallback, useMemo } from 'react'
import { VisSingleContainer, VisGraph } from '@unovis/react'
import { GraphLayoutType, GraphNodeShape } from '@unovis/ts'

import { data, NodeDatum, LinkDatum, panels } from './data'


export default function ForceLayoutGraph (): JSX.Element {
    const cfg = (groupName: string) => {
        switch (groupName) {
            case 'root': return {
                'elk.direction': 'RIGHT',
            }
            case 'us-east-2a': return {
                'elk.direction': 'DOWN',
            }
            case 'subnets': return {
                'elk.direction': 'DOWN',
            }
        }
    };

    return (
        <div className='chart'>
            <VisSingleContainer data={data} height={'99vh'}>
                <VisGraph<NodeDatum, LinkDatum>
                    nodeLabelTrim={false}
                    layoutType={GraphLayoutType.Elk}
                    layoutElkSettings={cfg}
                    nodeLabel={useCallback((n: NodeDatum) => n.id, [])}
                    nodeShape={GraphNodeShape.Square}
                    nodeStrokeWidth={1.5}
                    nodeStroke={useCallback((n: NodeDatum) => n.color, [])}
                    layoutElkNodeGroups={useMemo(() => [
                        (d: NodeDatum): string | null => d.group ?? null,
                        (d: NodeDatum): string | null => d.subGroup ?? null,
                    ], [])}
                    panels={panels}
                    disableZoom
                />
            </VisSingleContainer>
        </div>
    )
}

import {GraphNodeShape, Position} from "@unovis/ts";

export type NodeDatum = {
    id: string;
    group?: string;
    subGroup?: string;
    shape?: string;
    color?: string;
}

export type LinkDatum = {
    source: string;
    target: string;
    color: string;
}

export const data = {
    nodes: [
        {
            id: 'vpc',
        },
        {
            id: '192.168.0.0/25',
            group: 'us-east-2a',
            subGroup: 'subnets',
        },
        {
            id: '192.168.3.192/26',
            group: 'us-east-2a',
            subGroup: 'subnets',
        },
        {
            id: '192.8.3.191/33',
            group: 'us-east-2a',
            subGroup: 'subnets',
        },

        {
            id: 'master-0',
            group: 'us-east-2a',
            subGroup: 'nodes',
        },
        {
            id: 'workload-name',
            group: 'us-east-2a',
            subGroup: 'nodes',
        },
    ],
    links: [
        {
            source: 'vpc',
            target: '192.168.0.0/25'
        },
        {
            source: 'vpc',
            target: '192.168.3.192/26'
        },
        {
            source: 'vpc',
            target: '192.8.3.191/33'
        },

        {
            source: '192.168.0.0/25',
            target: 'master-0'
        },
        {
            source: '192.168.3.192/26',
            target: 'master-0'
        },
        {
            source: '192.8.3.191/33',
            target: 'workload-name'
        },
    ],
}

export const panels = [
    {
        label: 'us-east-2a',
        labelPosition: Position.Bottom,

        nodes: ['192.168.0.0/25', '192.168.3.192/26', '192.8.3.191/33', 'master-0', 'workload-name'],

        dashedOutline: true,
        padding: { top: 50, right: 50, bottom: 50, left: 50 },
    },
    {
        nodes: ['192.168.0.0/25', '192.168.3.192/26', '192.8.3.191/33'],
        label: 'subnets',
    },
    {
        nodes: ['master-0', 'workload-name'],
        label: 'workload',
    },
]

[rokotyan]

I'm sure Elk can do it, but configuring it can be a struggle. I would suggest that you first try to achieve the desired result in their interactive editor https://rtsys.informatik.uni-kiel.de/elklive/examples.html and then migrate that configuration to Unovis.

[n-bes]

I checked example Mixed Directions

node outsideTopToBottom {
    elk.direction: DOWN
    nodeLabels.placement: "H_LEFT V_TOP OUTSIDE"
    label "topToBottom"
    
    node leftToRight {
        elk.direction: RIGHT
        nodeLabels.placement: "H_LEFT V_BOTTOM OUTSIDE"
        node n1
        node n2
        edge n1->n2
        label "leftToRight"
    }
    node bottomToTop {
        elk.direction: UP
        nodeLabels.placement: "H_LEFT V_TOP OUTSIDE"
        node n1
        node n2
        edge n1->n2
        label "bottomToTop"
    }
    
    edge bottomToTop -> leftToRight
}

It looks like what i need, but in elk.direction do not passed to unovis correctly (i already provided example). Could you help me with it?

[rokotyan]

@n-bes I'll try to take a look after the holidays, around the second week of January

[n-bes]

but configuring it can be a struggle.

Yeah 💯

I found this config and played little bit with examples:

unovis/packages/ts/src/components/graph/modules/layout-helpers.ts

Lines 12 to 19 in 9399c4c

	export const DEFAULT_ELK_SETTINGS = {
	hierarchyHandling: 'INCLUDE_CHILDREN',
	'nodePlacement.strategy': 'NETWORK_SIMPLEX',
	'elk.padding': '[top=15.0,left=15.0,bottom=15.0,right=15.0]',
	'spacing.nodeNodeBetweenLayers': '50',
	'spacing.edgeNodeBetweenLayers': '50',
	'spacing.nodeNode': '10',
	}

// elk.hierarchyHandling: "INCLUDE_CHILDREN"
// elk.direction: LEFT

node outsideTopToBottom {
   elk.direction: DOWN
   nodeLabels.placement: "H_LEFT V_TOP OUTSIDE"
   label "topToBottom"
   
   node leftToRight {
       elk.direction: RIGHT
       nodeLabels.placement: "H_LEFT V_BOTTOM OUTSIDE"
       node n1
       node n2
       edge n1->n2
       label "leftToRight"
   }
   node bottomToTop {
       elk.direction: UP
       nodeLabels.placement: "H_LEFT V_TOP OUTSIDE"
       node n1
       node n2
       edge n1->n2
       label "bottomToTop"
   }
   
   edge bottomToTop.n1 -> leftToRight.n1
}

With the "hierarchyHandling" value overwritten, the behavior changes, but the problems persist with the subgroup:

    const cfg = (groupName: string) => {
        switch (groupName) {
            case 'us-east-2a': {
                return {
                    'elk.direction': 'DOWN'
                }
            }
            case 'root': {
                return {
                    'elk.hierarchyHandling': "INHERIT",
                }
            }
        }
    };

[n-bes]

dc-1/ dc-2 layout can be controlled
cloud layout cant be controlled

export type NodeDatum = {
    id: string;
    group?: string;
    subGroup?: string;
    shape?: string;
}

export type LinkDatum = {
    source: string;
    target: string;
}

export const data = {
    nodes: [
        { id: 'random-device'},

        { id: '192.168.1.0/24', group: 'dc-1', subGroup: 'subnets'},
        { id: '192.168.2.0/24', group: 'dc-1', subGroup: 'subnets'},
        { id: 'node-1',         group: 'dc-1', subGroup: 'workload' },
        { id: 'node-2',         group: 'dc-1', subGroup: 'workload' },

        { id: '192.168.3.0/24', group: 'dc-2', subGroup: 'subnets'},
        { id: '192.168.4.0/24', group: 'dc-2', subGroup: 'subnets'},
        { id: 'node-3',         group: 'dc-2', subGroup: 'workload' },
        { id: 'node-4',         group: 'dc-2', subGroup: 'workload' },

    ],
    links: [
        { source: 'random-device', target: '192.168.1.0/24' },
        { source: 'random-device', target: '192.168.2.0/24' },
        { source: 'random-device', target: '192.168.3.0/24' },
        { source: 'random-device', target: '192.168.4.0/24' },

        { source: '192.168.1.0/24', target: 'node-1' },
        { source: '192.168.1.0/24', target: 'node-2' },
        { source: '192.168.2.0/24', target: 'node-1' },
        { source: '192.168.2.0/24', target: 'node-2' },

        { source: '192.168.3.0/24', target: 'node-3' },
        { source: '192.168.3.0/24', target: 'node-4' },
        { source: '192.168.4.0/24', target: 'node-3' },
        { source: '192.168.4.0/24', target: 'node-4' },
    ],
}

export const panels = [
    {
        nodes: [
            '192.168.1.0/24',
            '192.168.2.0/24',
            '192.168.3.0/24',
            '192.168.4.0/24',

            'node-1',
            'node-2',
            'node-3',
            'node-4',
        ],
        label: 'cloud',
        dashedOutline: true,
        padding: { top: 50, right: 50, bottom: 50, left: 50 },
    },
    {
        nodes: [
            '192.168.1.0/24',
            '192.168.2.0/24',

            'node-1',
            'node-2',
        ],
        label: 'dc-1',
    },
    {
        nodes: [
            '192.168.3.0/24',
            '192.168.4.0/24',

            'node-3',
            'node-4',
        ],
        label: 'dc-2',
    },
]

export default function ParallelGraph (): JSX.Element {
    const cfg = (groupName: string) => {
        switch (groupName) {
            case 'cloud':{
                return {
                    'elk.direction': 'LEFT'
                }
            }
            case 'dc-1': {
                return {
                    'elk.direction': 'DOWN'
                }
            }
            case 'dc-2': {
                return {
                    'elk.direction': 'RIGHT'
                }
            }
            case 'root': {
                return {
                    'elk.hierarchyHandling': "INHERIT", # SEPARATE_CHILDREN works too
                    'elk.direction': 'DOWN'
                }
            }
        }
    };


    return (
        <div className='chart'>
            <VisSingleContainer data={data} height={'99vh'}>
                <VisGraph<NodeDatum, LinkDatum>
                    nodeLabelTrim={false}
                    layoutType={GraphLayoutType.Elk}
                    layoutElkSettings={cfg}
                    nodeLabel={useCallback((n: NodeDatum) => n.id, [])}
                    nodeShape={GraphNodeShape.Square}
                    nodeStrokeWidth={1.5}
                    nodeStroke={useCallback((n: NodeDatum) => n.color, [])}
                    layoutElkNodeGroups={useMemo(() => [
                        (d: NodeDatum): string | null => d.group ?? null,
                        (d: NodeDatum): string | null => d.subGroup ?? null,
                    ], [])}
                    panels={panels}
                    disableZoom
                />
            </VisSingleContainer>
        </div>
    )
}

[rokotyan]

@n-bes Have you tried specifying a different layout algorithm for cloud?

[n-bes]

Have you tried specifying a different layout algorithm for cloud?

@rokotyan it's crashed

[n-bes]

I solved the original question with Precalculated layout and few functions. But I faced with two minor problems:

• Long title trimmed
• Can't control link start/end connection point

<VisSingleContainer data={data} height={'95vh'}>
    <VisGraph
        nodeLabelTrim={false}
        nodeSubLabelTrim={false}
        linkCurvature={1}
        layoutType={GraphLayoutType.Precalculated}
        nodeLabel={useCallback((n: NodeDatum) => n.id, [])}
        nodeStroke={useCallback((n: NodeDatum) => n.color??undefined, [])}
        nodeFill={useCallback((n: NodeDatum) => n.markedColor??undefined, [])}
        panels={panels}
    />
</VisSingleContainer>

export type NodeDatum = {
    id: string;
    x?: number;
    y?: number;
    group?: string;
    subGroup?: string;
    color?: string;
    markedColor?: string;
}

export type LinkDatum = {
    source: string;
    target: string;
}

function makeNode(name: string, x: number, y: number): NodeDatum {
    return {
        id: name,
        x: x * 125,
        y: y * 125,
    }
}

function makeLink(source: NodeDatum, target: NodeDatum): LinkDatum {
    return {
        source: source.id,
        target: target.id,
    }
}

function makePanel(name: string, with_padding: boolean, nodes: NodeDatum[]) {
    if (!with_padding) {
        return {
            nodes: nodes.map((node: NodeDatum) => {
                return node.id
            }),
            label: name,
            dashedOutline: true,
        }
    }else{
        return {
            nodes: nodes.map((node: NodeDatum) => {
                return node.id
            }),
            label: name,
            dashedOutline: true,
            padding: {top: 50, right: 50, bottom: 50, left: 50}
        }
    }
}


const nodes: NodeDatum[] =[
    makeNode("1,1", 1, 1), // 0
    makeNode("2,1", 2, 1), // 1
    makeNode("3,1", 3, 1), // 2

    makeNode("1,3", 1, 3), // 3
    makeNode("2,3", 2, 3), // 4
    makeNode("3,3", 3, 3), // 5

    makeNode("5,1", 5, 1), // 6
    makeNode("5,3", 5, 3), // 7
    makeNode("5,4", 5, 4), // 8
]

const links = [
    makeLink(nodes[0], nodes[8])
]

export const data = {
    nodes: nodes,
    links: links,
}

export const panels= [
    makePanel('Panel 1.1-3.1', false, [nodes[0], nodes[1], nodes[2]]),
    makePanel('Panel 3.1-3.3. Too long description', false, [nodes[3], nodes[4], nodes[5]]),
    makePanel('Panel 5.1-5.4', true, [nodes[6], nodes[7], nodes[8]]),
    makePanel('Panel 5.3-5.4', false, [nodes[7], nodes[8]]),
]

[rokotyan]

@n-bes Sweet!

Try updating to this Unovis beta version 1.5.1-exf.9 and:

Long title trimmed

• These two panel configuration parameters might help (not tested)

---

Can't control link start/end connection point

• Use these props to offset your link:

Usage example:

[n-bes]

Use these props to offset your link

Little bit later

These two panel configuration parameters might help (not tested)

Works

{
    label: 'Description',
    labelTrimLength: 100,
}

Full code:

export type NodeDatum = {
    id: string;
    x?: number;
    y?: number;
    group?: string;
    subGroup?: string;
    color?: string;
    markedColor?: string;
}

export type LinkDatum = {
    source: string;
    target: string;
}

function makeNode(name: string, x: number, y: number): NodeDatum {
    return {
        id: name,
        x: x * 125,
        y: y * 125,
    }
}

function makeLink(source: NodeDatum, target: NodeDatum): LinkDatum {
    return {
        source: source.id,
        target: target.id,
    }
}

function makePanel(name: string, with_padding: boolean, nodes: NodeDatum[]) {
    if (!with_padding) {
        return {
            nodes: nodes.map((node: NodeDatum) => {
                return node.id
            }),
            label: name,
            labelTrimLength: 100,
            dashedOutline: true,
        }
    }else{
        return {
            nodes: nodes.map((node: NodeDatum) => {
                return node.id
            }),
            label: name,
            labelTrimLength: 100,
            dashedOutline: true,
            padding: {top: 50, right: 50, bottom: 50, left: 50}
        }
    }
}


const nodes: NodeDatum[] =[
    makeNode("1,1", 1, 1), // 0
    makeNode("2,1", 2, 1), // 1
    makeNode("3,1", 3, 1), // 2

    makeNode("1,3", 1, 3), // 3
    makeNode("2,3", 2, 3), // 4
    makeNode("3,3", 3, 3), // 5

    makeNode("5,1", 5, 1), // 6
    makeNode("5,3", 5, 3), // 7
    makeNode("5,4", 5, 4), // 8
]

const links = [
    makeLink(nodes[0], nodes[8])
]

export const data = {
    nodes: nodes,
    links: links,
}

export const panels= [
    makePanel('Panel 1.1-3.1', false, [nodes[0], nodes[1], nodes[2]]),
    makePanel('Panel 3.1-3.3. Too long description', false, [nodes[3], nodes[4], nodes[5]]),
    makePanel('Panel 5.1-5.4', true, [nodes[6], nodes[7], nodes[8]]),
    makePanel('Panel 5.3-5.4', false, [nodes[7], nodes[8]]),
]

[rokotyan]

@n-bes Nice, thanks for testing