BUG: Specifying "Org Chart" layout with "Org Chart Type: Fishbone 1" in CSV import

[yaroslav-gwit]

Hi all, I hope you are doing well ;)
I am trying to import this CSV file:

## Hello World
# label: %step%<br>%ip_address%
# style: shape=%shape%;fillColor=%fill%;strokeColor=%stroke%;html=1
# namespace: csvimport-
# connect: {"from":"refs", "to":"id", "invert":true, "style":"curved=0;endArrow=blockThin;endFill=1;"}
# width: auto
# height: auto
# padding: 15
# ignore: id,shape,fill,stroke,refs
# nodespacing: 40
# levelspacing: 40
# edgespacing: 40
# layout: orgchart
## CSV starts under this line
id,step,ip_address,fill,stroke,shape,refs
100,Company 1,Cluster,#d5e8d4,#82b366,process,,

1,Hoster Test 0102,10.0.10.1,#dae8fc,#6c8ebf,rectangle,100
11,haproxy-manager-hst-0101,192.168.199.1,#fff2cc,#d6b656,rectangle,1
12,nebula-control-plane,192.168.199.3,#fff2cc,#d6b656,rectangle,1
13,vaultwarden-prod,192.168.199.2,#fff2cc,#d6b656,rectangle,1
13,vscode-server,192.168.199.2,#fff2cc,#d6b656,rectangle,1
13,wiki-js,192.168.199.2,#fff2cc,#d6b656,rectangle,1
13,wp-project,192.168.199.2,#fff2cc,#d6b656,rectangle,1

2,Hoster Test 0101,10.0.10.2,#dae8fc,#6c8ebf,rectangle,100
21,VM Name 1,192.168.198.1,#fff2cc,#d6b656,rectangle,2
22,VM Name 2,192.168.198.3,#fff2cc,#d6b656,rectangle,2
23,VM Name 3,192.168.198.2,#fff2cc,#d6b656,rectangle,2
24,VM Name 4,192.168.198.4,#fff2cc,#d6b656,rectangle,2
25,VM Name 5,192.168.198.5,#fff2cc,#d6b656,rectangle,2
26,VM Name 6,192.168.198.6,#fff2cc,#d6b656,rectangle,2

3,Hoster 1,10.0.10.1,#dae8fc,#6c8ebf,rectangle,100
31,VM Name 1,192.168.199.1,#fff2cc,#d6b656,rectangle,3
32,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,3
33,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,3

4,Hoster 2,10.0.10.1,#dae8fc,#6c8ebf,rectangle,100
41,Test VM 1,192.168.199.1,#fff2cc,#d6b656,rectangle,4
42,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,4
43,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,4
41,Test VM 1,192.168.199.1,#fff2cc,#d6b656,rectangle,4
42,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,4
43,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,4
41,Test VM 1,192.168.199.1,#fff2cc,#d6b656,rectangle,4
42,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,4
43,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,4
41,Test VM 1,192.168.199.1,#fff2cc,#d6b656,rectangle,4
42,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,4
43,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,4

200,Company 2,Cluster,#d5e8d4,#82b366,process,,

5,Hoster Test 0102,10.0.10.1,#dae8fc,#6c8ebf,rectangle,200
51,VM Name 1,192.168.199.1,#fff2cc,#d6b656,rectangle,5
52,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,5
52,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,5
53,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,5

6,Hoster Test 0101,10.0.10.2,#dae8fc,#6c8ebf,rectangle,200
61,VM Name 1,192.168.198.1,#fff2cc,#d6b656,rectangle,6
62,VM Name 2,192.168.198.3,#fff2cc,#d6b656,rectangle,6
63,VM Name 3,192.168.198.2,#fff2cc,#d6b656,rectangle,6

7,Hoster 1,10.0.10.1,#dae8fc,#6c8ebf,rectangle,200
71,VM Name 1,192.168.199.1,#fff2cc,#d6b656,rectangle,7
72,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,7
73,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,7
73,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,7
73,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,7

8,Hoster 2,10.0.10.1,#dae8fc,#6c8ebf,rectangle,200
81,Test VM 1,192.168.199.1,#fff2cc,#d6b656,rectangle,8
82,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,8
83,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,8
81,Test VM 1,192.168.199.1,#fff2cc,#d6b656,rectangle,8
82,VM Name 2,192.168.199.3,#fff2cc,#d6b656,rectangle,8
83,VM Name 3,192.168.199.2,#fff2cc,#d6b656,rectangle,8
81,Test VM 1,192.168.199.1,#fff2cc,#d6b656,rectangle,8

And everything goes well, but I would like to apply Org Chart Type: Fishbone 1 layout, instead of the generic Org Chart.
Could anyone please help me out?

[yaroslav-gwit]

This must be a bug, because when I import the file above with # layout: [{"layout": "mxOrgChartLayout","config": {"branchOptimizer": "branchOptimizerAllFishbone1","parentChildSpacing": 40,"siblingSpacing": 40, "correctY": true}}] I get this error:

Invalid Call: mxOrgChartLayout not found

But once I add mxOrgChartLayout to the list of layouts from the browser console it works just fine:

Graph.layoutNames = ['mxHierarchicalLayout', 'mxCircleLayout',
	'mxCompactTreeLayout', 'mxEdgeLabelLayout', 'mxFastOrganicLayout',
	'mxParallelEdgeLayout', 'mxPartitionLayout', 'mxRadialTreeLayout',
	'mxStackLayout', 'mxOrgChartLayout'];

The list is specified in this file: Graph.js, at line 1357.

[yaroslav-gwit]

In the Desktop App you can still open the developer tools: Help -> Open Developer Tools

[yaroslav-gwit]

First off your \ escape lines may be messing the CSV formatting (but I haven't dealt with CSV+Dia.net enough to know for sure). Secondly, if I replace your line # layout: [{"layout": "mxOrgChartLayout","config": {"branchOptimizer": "branchOptimizerAllSingleRightColumn","parentChildSpacing": 15,"siblingSpacing": 15, "correctY": true}}] with my # layout: [{"layout": "mxOrgChartLayout","config": {"branchOptimizer": "branchOptimizerAllFishbone1","parentChildSpacing": 40,"siblingSpacing": 40, "correctY": true}}] it works perfectly

[tojeffraymond]

Found my mistake.
Wasn't branchOptimizerAllSingleRightColumn but branchOptimizerAllSingleColumnRight. Dumb error...

And as for the missing "mxOrgChartLayout", it's clear with the following excerpt. It seems to explain why we need to add it through the console.

Don't know yet how I could (or would) create an issue for that.
Thanks anyway for the help provided here. Greatly appreciated. :-)

[yaroslav-gwit]

I am glad you've been able to sort it out.
I have opened up an issue for it, but no one ever replied.

[exwhyz]

I second (or third) this as it seems this issue was introduced from version 18.1.3 onwards - prior versions work fine. Of note I had first noticed this 'hidden' mxOrgChartLayout parameter which I reported in my issue # 2028 and I did not get a response however after some trial/error those settings worked until we hit version 18.1.3. I have not been able to find any official information on setting custom layout options via CSV.