Q/Idea - How to streamline adding visjs's vis-network configurator to dashboard?

[matt555]

Short Version - What is the best way to add vis-network's "configure" options at dashboard creation? (Mostly answered on my own, but requires regex and injecting javascript which i'd like to avoid... perhaps this is better resolved as feature request?)

https://visjs.github.io/vis-network/docs/network/configure.html

Background

I spend a lot of time generating diagrams over and over, trying to achieve that perfect layout. Typically i'll bounce between vscode, online JS IDEs and the various "Configurator/Configure" examples here: https://visjs.github.io/vis-network/examples/

Configurator demos i frequent the most:

• https://visjs.github.io/vis-network/examples/network/physics/physicsConfiguration.html
• https://visjs.github.io/vis-network/examples/network/layout/hierarchicalLayoutWithoutPhysics.html
• https://visjs.github.io/vis-network/examples/network/other/configuration.html

So I figured I could save a ton of time if i added the Configurator panel to my diagrams...

Progress so far

I've discovered that a vanilla diagram will work without container: document.getElementById("Config"). But, once you add panels or sections, it doesnt get rendered. Hence the need for a single panel with AnchorName set to "Config".

The sample below is a hierarchical diagram with obfuscated data. I've also simplified my original code as much as possible.

The part that i dont like is the regex replace which currently works, but would prefer to use something in the PSWriteHTML module. Add-HTMLScript -ReplaceData seemed relevant, but i couldnt figure out how to use it.

$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;
        },
        showButton: true,
        container: document.getElementById("Config"),
    },
}, options);
network.setOptions(options);
'@

$test_num = "configTest_7" 
$fullHTML = New-HTML -TitleText "ESXi to Datastore $test_num" {
    New-HTMLSection -HeaderText 'ESXi to Datastore' -HeaderTextSize 20 {
        # Diagram Panel
        New-HTMLPanel {
            New-HTMLDiagram -Height "1024px" {
                New-DiagramOptionsLayout -HierarchicalEnabled $true -HierarchicalDirection FromLeftToRight
                New-DiagramOptionsPhysics -Enabled $false
                New-DiagramOptionsNodes -ColorBackground None -ColorBorder None
                # create datacenter
                New-DiagramNode -Label "DataCenterA"             -Level 1 -IconSolid building
                # create vCenter clusters
                New-DiagramNode -Label "DCA-A3-STANDARD-001"     -Level 2 -IconSolid th -IconColor MintGreen -To "DataCenterA"
                New-DiagramNode -Label "DCA-B5-STANDARD-002"     -Level 2 -IconSolid th -IconColor MintGreen -To "DataCenterA" 
                # create esxi nodes
                New-DiagramNode -Label "dca-pvrt-vi008"          -Level 3 -IconSolid server -IconColor RadicalRed -To "DCA-A3-STANDARD-001" 
                New-DiagramNode -Label "dca-pvrt-vi007"          -Level 3 -IconSolid server -IconColor RadicalRed -To "DCA-A3-STANDARD-001" 
                New-DiagramNode -Label "dca-pvrt-vi009"          -Level 3 -IconSolid server -IconColor RadicalRed -To "DCA-A3-STANDARD-001" 
                New-DiagramNode -Label "dca-pvrt-vi004"          -Level 3 -IconSolid server -IconColor RadicalRed -To "DCA-B5-STANDARD-002" 
                New-DiagramNode -Label "dca-pvrt-vi006"          -Level 3 -IconSolid server -IconColor RadicalRed -To "DCA-B5-STANDARD-002" 
                New-DiagramNode -Label "dca-pvrt-vi005"          -Level 3 -IconSolid server -IconColor RadicalRed -To "DCA-B5-STANDARD-002" 
                # create each datastore (dont link yet)
                New-DiagramNode -Label "DCA-A3-NFS-DS0002"       -Level 4 -IconSolid database -IconColor DeepSkyBlue
                New-DiagramNode -Label "DCA-A3-NFS-DS0001"       -Level 4 -IconSolid database -IconColor DeepSkyBlue
                New-DiagramNode -Label "DCA-ESX-NFS-SATA-DS0002" -Level 4 -IconSolid database -IconColor DeepSkyBlue
                New-DiagramNode -Label "DCA-ESX-NFS-SATA-DS0004" -Level 4 -IconSolid database -IconColor DeepSkyBlue
                New-DiagramNode -Label "DCA-ESX-NFS-SATA-DS0003" -Level 4 -IconSolid database -IconColor DeepSkyBlue
                New-DiagramNode -Label "DCA-ESX-NFS-SATA-DS0001" -Level 4 -IconSolid database -IconColor DeepSkyBlue
                # link datastore to each host
                New-DiagramLink -From "dca-pvrt-vi008" -To "DCA-A3-NFS-DS0002"
                New-DiagramLink -From "dca-pvrt-vi008" -To "DCA-A3-NFS-DS0001"
                New-DiagramLink -From "dca-pvrt-vi007" -To "DCA-A3-NFS-DS0002"
                New-DiagramLink -From "dca-pvrt-vi007" -To "DCA-A3-NFS-DS0001"
                New-DiagramLink -From "dca-pvrt-vi009" -To "DCA-A3-NFS-DS0002"
                New-DiagramLink -From "dca-pvrt-vi009" -To "DCA-A3-NFS-DS0001"
                New-DiagramLink -From "dca-pvrt-vi004" -To "DCA-A3-NFS-DS0002"
                New-DiagramLink -From "dca-pvrt-vi004" -To "DCA-A3-NFS-DS0001"
                New-DiagramLink -From "dca-pvrt-vi004" -To "DCA-ESX-NFS-SATA-DS0002"
                New-DiagramLink -From "dca-pvrt-vi004" -To "DCA-ESX-NFS-SATA-DS0004"
                New-DiagramLink -From "dca-pvrt-vi004" -To "DCA-ESX-NFS-SATA-DS0003"
                New-DiagramLink -From "dca-pvrt-vi004" -To "DCA-ESX-NFS-SATA-DS0001"
                New-DiagramLink -From "dca-pvrt-vi006" -To "DCA-A3-NFS-DS0002"
                New-DiagramLink -From "dca-pvrt-vi006" -To "DCA-A3-NFS-DS0001"
                New-DiagramLink -From "dca-pvrt-vi006" -To "DCA-ESX-NFS-SATA-DS0002"
                New-DiagramLink -From "dca-pvrt-vi006" -To "DCA-ESX-NFS-SATA-DS0004"
                New-DiagramLink -From "dca-pvrt-vi006" -To "DCA-ESX-NFS-SATA-DS0003"
                New-DiagramLink -From "dca-pvrt-vi006" -To "DCA-ESX-NFS-SATA-DS0001"
                New-DiagramLink -From "dca-pvrt-vi005" -To "DCA-A3-NFS-DS0002"
                New-DiagramLink -From "dca-pvrt-vi005" -To "DCA-A3-NFS-DS0001"
                New-DiagramLink -From "dca-pvrt-vi005" -To "DCA-ESX-NFS-SATA-DS0002"
                New-DiagramLink -From "dca-pvrt-vi005" -To "DCA-ESX-NFS-SATA-DS0004"
                New-DiagramLink -From "dca-pvrt-vi005" -To "DCA-ESX-NFS-SATA-DS0003"
                New-DiagramLink -From "dca-pvrt-vi005" -To "DCA-ESX-NFS-SATA-DS0001"
            }
        }
        # Config Panel - -AnchorName 'Config' is required and case sensitive!
        New-HTMLPanel -AnchorName 'Config' -Width '40%' {
        }
    }
} -Online
# Inject the options > configure js code.
$fullHtml = $fullHTML -replace '(?!network;\n).+(?=\n<\/script>)', $js_options_config_str
Save-HTML -HTML $fullHTML -ShowHTML

#   note: both https://regex101.com and https://regexr.com say that '.*' should work but instead replaces with duplicate entries.
#           I was only able to get this to work by using '.+'...?
#   should work regex: '(?!network;\n).*(?=\n<\/script>)'

Also, I sincerely appreciate all the years of work put into this module.
Thank you!!!
Matt

[PrzemyslawKlys]

This is actually pretty good idea. You could build New-HTMLDiagramConfigurator option that would do this for others.

If I were you I would go to:

• https://visjs.github.io/vis-network/examples/

Find the examples you mention above and if you click on those icons you get html/js code they use

Now it's just a matter of "merging" this with PSWriteHTML