Nodes overlapping in Hierarchical layout diagram

[h00jraq]

Hey,

So I'm trying to build an group membership diagram which will basically show group membership for all Azure AD groups in the company.
I builds and csv file which holds the relations and I'm trying to build a diagram and it works.. kinda :)
The issue is, there are many groups that are member of for example one particular group that is it almost impossible to read the diagram... The nodes are overlapping so the cover each other so you can't see group names etc.
The diagram in the ends looks like below:

I've was playing with different option and I just can't fix it. Tried to use Physics and make it work but I guess there is just to many nodes?
I will appreciate any tips for fixing this....

Here is the code I'm using to print the diagram:

New-HTML -TitleText 'Enhanced Group Relationships' -Online -FilePath $outputHtmlPath {
    New-HTMLSection -HeaderText 'Enhanced Diagram - Group Relationships' -CanCollapse {
        New-HTMLPanel {
            New-HTMLDiagram -Height '2500px' -Width '4000px' {
                New-DiagramOptionsLayout -ImprovedLayout $true -HierarchicalEnabled $true -HierarchicalDirection FromDownToUp -HierarchicalShakeTowards roots -HierarchicalSortMethod directed
                New-DiagramOptionsNodes -WidthConstraintMaximum 200 -Margin 200 
                New-DiagramOptionsLinks -FontSize 12 -WidthConstraint 90 -Length 200
                New-DiagramOptionsEdges -ArrowsToEnabled $true


                foreach ($relationship in $groupRelationships) {
                    $childGroupName = $relationship.ChildGroupName
                    $parentGroupName = $relationship.ParentGroupName
                    New-DiagramNode -Label $childGroupName -To $parentGroupName
                    New-DiagramNode -Label $parentGroupName
                }
            }
        }
    }
} -ShowHTML

[PrzemyslawKlys]

Maybe try using new search functionality?

[matt555]

@h00jraq
Short answer: you might want to try playing with -HierarchicalNodeSpacing Ex:

New-DiagramOptionsLayout -ImprovedLayout $true -HierarchicalEnabled $true -HierarchicalDirection FromUpToDown -HierarchicalShakeTowards leaves -HierarchicalSortMethod directed -HierarchicalNodeSpacing 280
New-DiagramOptionsPhysics -Enabled $false

Another setting to try is:

New-DiagramOptionsPhysics -Enabled $true -HierarchicalRepulsionAvoidOverlap 1.00

Long answer:
A while back i got tired of trying to figure out what options worked best for my diagrams. Then I realized i can add a panel in my PSWriteHTML code to add the vis-network options/config panel in the same way they have them enabled in some of the Vis Network examples:
Vis Network | Physics | Playing with Physics

First make sure you're using PSWriteHTML 1.22.0 or higher.
Reason is that it uses VisNetwork 9.1.9, which i have found create MUCH better hierarchy diagrams.

here's an example of how to add in the VisNetwork config panel in PSWriteHTML:
NOTE: If this doesn't work, try the second method at the bottom (old versions of PSWriteHTML)

Import-Module PSWriteHTML

# data mimicking "Vis Network | Layouts | Hierarchical Layout Overlap Avoidance"
$nodes = 0..46 | ForEach-Object { [PSCustomObject]@{
        id = $_
        label = [string]$(if ($_ % 3 -eq 0) { "|{0} $_ {0}|" -f ('-' * $_) } else { $_ })
}}

$f = 0
$edges = foreach ($e in 1..46) {
    if ($e -le 30) { [PSCustomObject]@{ from = $f ; to = $e }
        if ($e % 2 -eq 0) { $f++ }
    } else         { [PSCustomObject]@{ from = $f ; to = $e }
        $f++
    }
}

# js string to insert into the html
$js_options_config_str = @'
options = Object.assign({
    configure: {
        filter: function (option, path) {
            if (path.indexOf("hierarchical") !== -1) {
                return true;
            }
            if (path.indexOf("physics") !== -1) {
                return true;
            }
            if (path.indexOf("smooth") !== -1 || option === "smooth") {
                return true;
            }
            return false;  // set to true to see ALL options
        },
        showButton: true,  // true enables the "generate options" button
        container: document.getElementById("Config"),
    },
}, options);
network.setOptions(options);
'@

New-HTML -TitleText 'Vis Network | Hierarchical Layout | Config Panel' -Online -Temporary -ShowHTML {
    New-HTMLSection -HeaderText 'Vis Network | Hierarchical Layout | Config Panel' -HeaderTextSize 20 -CanCollapse {
        New-HTMLPanel {
            New-HTMLDiagram -Height '1500px' {
                New-DiagramOptionsLayout -ImprovedLayout $true -HierarchicalEnabled $true -HierarchicalDirection FromUpToDown -HierarchicalShakeTowards leaves -HierarchicalSortMethod directed -HierarchicalNodeSpacing 280
                New-DiagramOptionsPhysics -Enabled $false #-HierarchicalRepulsionAvoidOverlap 1.00
                # New-DiagramOptionsNodes -WidthConstraintMaximum 200 -Margin 200 
                New-DiagramOptionsLinks -FontSize 12 #-WidthConstraint 90 -Length 200
                New-DiagramOptionsEdges -ArrowsToEnabled $true

                foreach ($node in $nodes) {
                    New-DiagramNode -Id $node.id -Label $node.label
                }
                foreach ($edge in $edges) {
                    New-DiagramLink -From $edge.from -To $edge.to
                }
            }
        }
        # Config Panel - -AnchorName 'Config' is required and case sensitive!
        New-HTMLPanel -AnchorName 'Config' -Width '40%' {
            Add-HTMLScript -Placement Footer -Content $js_options_config_str 
        }
    }
}

The above method to inject will not work in older versions of PSWriteHTML (before 1.22 i believe). If you can't upgrade, you'll need to save the HTML to a variable and manually inject the string:

$fullHtml = New-HTML -TitleText 'Vis Network | Hierarchical Layout | Config Panel' -Online  {
    New-HTMLSection -HeaderText 'Vis Network | Hierarchical Layout | Config Panel' -HeaderTextSize 20 -CanCollapse {
        New-HTMLPanel {
            New-HTMLDiagram -Height '1500px' {
                New-DiagramOptionsLayout -ImprovedLayout $true -HierarchicalEnabled $true -HierarchicalDirection FromUpToDown -HierarchicalShakeTowards leaves -HierarchicalSortMethod directed -HierarchicalNodeSpacing 280
                New-DiagramOptionsPhysics -Enabled $false #-HierarchicalRepulsionAvoidOverlap 1.00
                # New-DiagramOptionsNodes -WidthConstraintMaximum 200 -Margin 200 
                New-DiagramOptionsLinks -FontSize 12 #-WidthConstraint 90 -Length 200
                New-DiagramOptionsEdges -ArrowsToEnabled $true

                foreach ($node in $nodes) {
                    New-DiagramNode -Id $node.id -Label $node.label
                }
                foreach ($edge in $edges) {
                    New-DiagramLink -From $edge.from -To $edge.to
                }
            }
        }
        # Config Panel - -AnchorName 'Config' is required and case sensitive!
        New-HTMLPanel -AnchorName 'Config' -Width '40%' {
            # just leave empty
        }
    }
}

$fullHtml = $fullHTML -replace '(?!network;\n).+(?=\n<\/script>)', $js_options_config_str
Save-HTML -HTML $fullHTML -ShowHTML 

Also, the options panel doesn't always modify the diagram like it does for vis network examples. Never really dug into it, but a the few i did review were caused by conflicting options.

Hope that helps,
Matt

[PrzemyslawKlys]

We should probably add this as an "debug option" for New-HTMLdiagram ;)