Using htmltextbox to display info about an object in a graph

[adamswbrown]

Hi All,

I'm working on a project that uses the PSWriteHTML module to create graphs of VMs grouped by Service. such as below

I would like to be able to click on one of the nodes in a group and display information about that node pulled from a CSV file (that is generating the graph currently)

I notice that there is a htmltextbox option on the new-diagram node option, but I don't see how to use it?

Id also like to know why on large groups of machines, the nodes seem to be constantly movingAround?

Current code below:

New-HTML -TitleText 'Enviroment' -Online -FilePath $PSScriptRoot\Example-TP.html {
    New-HTMLSection -HeaderText 'Diagram - My Network' -CanCollapse {
        $Devicelist = Import-Csv ".\DataMAP.csv"
        
        New-HTMLPanel {

            New-HTMLDiagram -Height 1024 {
                New-DiagramOptionsInteraction -Hover $false -DragNodes $true 
                #New-DiagramOptionsManipulation
                New-DiagramOptionsPhysics -Enabled $true -StabilizationEnabled $true -RepulsionNodeDistance 150 -Solver 
                New-DiagramOptionsInteraction -Hover $true
            
            foreach ($machine in $Devicelist)
         
{
 Write-Host "Creating Service Tag Node $($machine.Tag)" -ForegroundColor Green
   New-DiagramNode -Label $machine.tag -ColorBackground Azure 

if($machine.Type -like "Server"){
Write-Host -ForegroundColor Yellow "Creating Node for $($machine.'Device Name') Windows OS"
#$info = New-htmltext -TextBlock $machine.'Device Name'
 New-DiagramNode -Label $machine.'Device Name' -IconBrands Windows
 }
 elseif ($machine.Type -like "Linux*") {
 Write-Host -ForegroundColor Red "Creating Node for $($machine.'Device Name') Linux OS"
  New-DiagramNode -Label $machine.'Device Name' -IconBrands Linux 
 }
elseif ($machine.Type -like "SQL*") {
 Write-Host -ForegroundColor Cyan "Creating Node for $($machine.'Device Name') SQL Server OS"
  New-DiagramNode -Label $machine.'Device Name' -Image 'http://code.benco.io/icon-collection/azure-icons/SQL-Server.svg'

}

New-DiagramLink -From $machine.Tag -To $machine.'Device Name'


}
            } #-BundleImages

        }
       #New-HTMLPanel {
          #  New-HTMLTable -DataTable $DeviceList -AllProperties }
    }
 Write-Host "Creating Output" -ForegroundColor Yellow
} -ShowHTML 

Thank you in advance

`

[PrzemyslawKlys]

To stop moving - disable physics.

For CSV input consider using Table? And new-diagramevent?

https://evotec.xyz/nested-tabs-diagram-updates-diagram-events-calendar-object-and-more-in-pswritehtml/

This way put all data from CSV in the table, build diagram next to it, on click on diagram it would search/highlight for entries in the table.

[adamswbrown]

No dice, the first action works fine (VM event), but the second one (service), doesn't. - I take it I would need to apply a -ID flag To the Service node? - but I don't think I can specify which event to use?

Current Code added

New-HTML -TitleText 'Enviroment' -Online -FilePath $PSScriptRoot\Example-TP.html {
    New-HTMLSection -HeaderText 'Diagram - My Network' -CanCollapse {
        $Devicelist = Import-Csv ".\DataMAP.csv"
        $TableID = Get-Random -Minimum 100000 -Maximum 2000000
        New-HTMLPanel {

            New-HTMLDiagram -Height 1024 {
             New-DiagramEvent -ID $TableID -ColumnID 2
             New-DiagramEvent -ID $TableID -ColumnID 15
                New-DiagramOptionsInteraction -Hover $false -DragNodes $true 
                #New-DiagramOptionsManipulation
                New-DiagramOptionsPhysics -Enabled $true -StabilizationEnabled $true -RepulsionNodeDistance 150 -Solver repulsion
                New-DiagramOptionsInteraction -Hover $true
            
            foreach ($machine in $Devicelist)
         
{
 Write-Host "Creating Service Tag Node $($machine.Tag)" -ForegroundColor Green
   New-DiagramNode -Label $machine.tag -ColorBackground Azure -Id $_.Id

if($machine.Type -like "Server"){
Write-Host -ForegroundColor Yellow "Creating Node for $($machine.'Device Name') Windows OS" 
 New-DiagramNode -Label $machine.'Device Name' -Id $_.Id -IconBrands Windows -To $machine.Tag
 }
 elseif ($machine.Type -like "Linux*") {
 Write-Host -ForegroundColor Red "Creating Node for $($machine.'Device Name') Linux OS"
  New-DiagramNode -Label $machine.'Device Name' -Id $_.Id -IconBrands Linux  -To $machine.Tag
 }
elseif ($machine.Type -like "SQL*") {
 Write-Host -ForegroundColor Cyan "Creating Node for $($machine.'Device Name') SQL Server OS"
  New-DiagramNode -Label $machine.'Device Name' -Id $_.Id -Image 'http://code.benco.io/icon-collection/azure-icons/SQL-Server.svg' -To $machine.Tag 

}


}
            } #-BundleImages

        }
       New-HTMLPanel {
            New-HTMLTable -DataTable $DeviceList -DataTableID $TableID -ExcludeProperty 'Domain','Platform','Current VM Cluster','Current VM Host','Environment','Description','Total Storage (GB)','Used Storage (GB)','Total RAM (GB)','Scan Needed','ARC Scaned','Software Tags','SQL Edtion','SQL Version','Service Pack','SQL Deviation','Azure Region' }
    }
 Write-Host "Creating Output" -ForegroundColor Yellow
} -ShowHTML 

[PrzemyslawKlys]

Id is set to name if you dont use it. That means you just need to specify new-diagramevent and point it to tag column. On e that is done you can probably add another event working on different column.

[adamswbrown]

       $machineevent = New-DiagramEvent -ID $TableID -ColumnID 1
             $tagevent = New-DiagramEvent -ID $TableID -ColumnID 3

Like this?
Where 1 is the Device name and 3 is the Tag name?

 New-DiagramNode -Label $machine.'Device Name' -Id $machineevent.ColumnID -IconBrands Windows -To $machine.Tag
   New-DiagramNode -Label $machine.tag -ColorBackground Azure -Id $tagevent.ID

[PrzemyslawKlys]

Ye, just i am not sure this can be achieved - as in not overwritng each other - i have not played with dual events for same table - but maybe should work.

[adamswbrown]

Ok thats cool,

will work with what I've got so far.

If you do manage to figure it out, it would be great to see.

Thank you for your help