Orgchart: Version Update (to 3.8.0) #1182

jxmai · 2023-05-12T02:52:37Z

We updated orgchart to the latest v2 in this ticket: #1017

However, it was discovered that font awesome icons were no longer working after the upgrade (#1050). I applied the workaround to apply default icons (jxmai@c1a84ab).

Most recently, we were notified by orgchart maintainer that the issue was addressed in v3.7.0, so we have to upgrade orgchart to the same version before we can properly address the icon issues.

The text was updated successfully, but these errors were encountered:

…s to version 3.8.0

jxmai · 2023-07-02T15:53:52Z

Note: after we update the orgchart lib to the latest version: v3.8.0, jxmai@f3c44af, the orgchart layout is mis-aligned. Previously I have discovered the same issue in v3 so that I migrated the orgchart version up to v2 only.

To isolate the issue, I put the orgchart.js and orchart.css into a separate pure HTML, Javascript test project and see if they have the same problem. Screenshot and comment are posted under a commit: jxmai/orgchart_testing@ff0968d#commitcomment-120372388. Interestingly, this issue only happens in our JSF integration but not in the test project.
To isolate the issue further in case it is JQuery issue, I load the exact Jquery version from PF jxmai/orgchart_testing@e2862a1, but the same issue occur in the local showcase.
To isolate the potential if there's any incorrect API call in the new version from PFE JS options, I hardcode the orgchart invocation in PFE show case using from orgchart demo. However, the following demo works in the test project but not in our showcase.

var datascource = {
	      'name': 'Lao Lao',
	      'title': 'general manager',
	      'children': [
	        { 'name': 'Bo Miao', 'title': 'department manager' },
	        { 'name': 'Su Miao', 'title': 'department manager',
	          'children': [
	            { 'name': 'Tie Hua', 'title': 'senior engineer' },
	            { 'name': 'Hei Hei', 'title': 'senior engineer',
	              'children': [
	                { 'name': 'Pang Pang', 'title': 'engineer' },
	                { 'name': 'Dan Dan', 'title': 'UE engineer' ,
	                'children': [
	                  { 'name': 'Er Dan', 'title': 'engineer' },
	                  { 'name': 'San Dan', 'title': 'engineer',
	                    'children': [
	                      { 'name': 'Si Dan', 'title': 'intern' },
	                      { 'name': 'Wu Dan', 'title': 'intern' }
	                    ]
	                  }
	                ]}
	              ]
	            }
	          ]
	        },
	        { 'name': 'Hong Miao', 'title': 'department manager' },
	        { 'name': 'Chun Miao', 'title': 'department manager',
	          'children': [
	            { 'name': 'Bing Qin', 'title': 'senior engineer' },
	            { 'name': 'Yue Yue', 'title': 'senior engineer',
	              'children': [
	                { 'name': 'Er Yue', 'title': 'engineer' },
	                { 'name': 'San Yue', 'title': 'UE engineer' }
	              ]
	            }
	          ]
	        }
	      ]
	    };
        
        
        //opts['data'] = JSON.parse(opts['data'])
        opts['data'] = datascource

        // this.orgchart = this.jq.orgchart(opts);
        this.orgchart = this.jq.orgchart({
	      'data' : datascource,
	      'nodeContent': 'title',
	    });

I isolate the commit from orgchart that causes the behavior differences: dabeng/OrgChart@8c5427e. However, the question still remains about why it only causes issue in our JSF integration but not on the demo. The orgchart commit is relative large and it is not immediately obvious about the impact as many files have been changed.

melloware · 2023-07-02T18:10:17Z

I wonder if it is the order the CSS is loaded is different?

jxmai · 2023-07-02T20:02:50Z

That's a good idea. Thanks for the hints.

I compared the CSS being used by showcase vs the one used by the demo app from orgchart

showcase:

/*! CSS Used from: http://localhost:8090/showcase-ext/javax.faces.resource/theme.css.jsf?ln=primefaces-arya&v=13.0.0-RC2&e=13.0.0-SNAPSHOT */
*{box-sizing:border-box;}
/*! CSS Used from: http://localhost:8090/showcase-ext/javax.faces.resource/orgchart/orgchart.css.jsf?ln=primefaces-extensions&v=13.0.0-RC2&e=13.0.0-SNAPSHOT */
.orgchart .node:not(:only-child)::after{content:"";position:absolute;bottom:-11px;left:calc(50% - 1px);width:2px;height:9px;background-color:rgba(217, 83, 79, 0.8);}
.orgchart ul li .node:hover{background-color:rgba(238, 217, 54, 0.5);}
.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center;}
.orgchart .node:hover{background-color:rgba(238, 217, 54, 0.5);transition:.5s;cursor:default;z-index:20;}
.orgchart .node .title{box-sizing:border-box;padding:2px;width:130px;text-align:center;font-size:0.75rem;font-weight:bold;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217, 83, 79, 0.8);color:#fff;border-radius:4px 4px 0 0;}
.orgchart .node .content{box-sizing:border-box;padding:2px;height:20px;font-size:0.625rem;border:1px solid rgba(217, 83, 79, 0.8);border-radius:0 0 4px 4px;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap;}
.orgchart .node .edge{position:absolute;cursor:default;transition:.2s;}
.orgchart .node .edge::before{border-color:rgba(68, 157, 68, 0.5);}
.orgchart .node .edge:hover{cursor:pointer;}
.orgchart .edge:hover::before{border-color:#449d44;}
.orgchart .node .verticalEdge{width:calc(100% - 6px);width:-webkit-calc(100% - 6px);width:-moz-calc(100% - 6px);height:10px;left:3px;}
.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - 0.3125rem);}
.orgchart .node .bottomEdge{bottom:-2px;}
.orgchart .node{transition:transform 0.3s, opacity 0.3s;}
.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial;}
/*! CSS Used from: http://localhost:8090/showcase-ext/javax.faces.resource/global.css.jsf?ln=css */
*{font-size:12px;}


demo

/*! CSS Used from: http://localhost:8080/orchart_testing/css/jquery.orgchart.css */
.orgchart .node:not(:only-child)::after{content:"";position:absolute;bottom:-12px;left:calc(50% - 1px);width:2px;height:10px;background-color:rgba(217, 83, 79, 0.8);}
.orgchart ul li .node:hover{background-color:rgba(238, 217, 54, 0.5);}
.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center;}
.orgchart .node:hover{background-color:rgba(238, 217, 54, 0.5);transition:.5s;cursor:default;z-index:20;}
.orgchart .node .title{box-sizing:border-box;width:130px;text-align:center;font-size:12px;font-weight:bold;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217, 83, 79, 0.8);color:#fff;border-radius:4px 4px 0 0;}
.orgchart .node .title .parentNodeSymbol{float:left;}
.orgchart .node .title .parentNodeSymbol::before{color:#fff;}
.orgchart .node .title .parentNodeSymbol::after{background-color:#fff;}
.orgchart .node .content{box-sizing:border-box;width:130px;height:20px;line-height:20px;font-size:10px;border:1px solid rgba(217, 83, 79, 0.8);border-width:0 1px 1px 1px;border-radius:0 0 0.25rem 0.25rem;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap;}
.orgchart .node .edge{position:absolute;cursor:default;transition:.2s;}
.orgchart .node .edge::before{border-color:rgba(68, 157, 68, 0.5);}
.orgchart .node .edge:hover{cursor:pointer;}
.orgchart .edge:hover::before{border-color:#449d44;}
.orgchart .node .verticalEdge{width:calc(100% - 6px);height:10px;left:3px;}
.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - 5px);}
.orgchart .node .bottomEdge{bottom:-2px;}
.orgchart .node{transition:transform 0.3s, opacity 0.3s;}
.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial;}
.oci-menu::before{content:"â‰¡";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;color:#000;font-size:1rem;}

I can only spot the extra *{box-sizing:border-box;} so that I went ahead to apply the same css in the demo app and see if that's the issue, and it isn't.

jxmai/orgchart_testing@da492df

The effort isn't wasted however, since while I was checking the CSS load order, I discovered an important detail.

dabeng/OrgChart@8c5427e#diff-3c27afa5de1c62016dceb22b5c538f347eb638664109c31024d3b17caef2c590

without this CSS, the demo app would mis-align as well. In this case, I may already know what to do to fix this issue in our integration.

jxmai · 2023-07-03T16:34:45Z

The style issue is caused by the additional style is required by the new version(text-align: center is the key among the styles). Refer to:

https://github.com/dabeng/OrgChart/blob/c8357892eb6079813bdcf5e3a1b0b3d519fa7cd7/demo/css/style.css#L14-L21

Note: the style is looking good overall after we apply the similar css. However, I noticed the export button isn't functional anymore. I will review https://dabeng.github.io/OrgChart/export-chart-pdf.html and investigate what has changed before pushing this version.

jxmai · 2023-07-03T16:50:42Z

Okay, the export button is working. It takes some time to export only. One issue is down

The drag and drop isn't working however.

@melloware not sure if that's only me. Can you please verify as well if drag and drop is working on the orgchart demo page?

https://dabeng.github.io/OrgChart/drag-drop.html

I open a ticket in the meantime in the orgchart repo.

dabeng/OrgChart#712

melloware · 2023-07-03T16:51:46Z

Nope its not working for me on his demo page.

jxmai · 2023-07-03T16:54:54Z

Thanks @melloware for verfication! This is one of the most cruical features of orgchart. Let's see if the orgchart maintainer can reply to us. or else we need to check the orgchart codebase and see what's going on.

jxmai · 2023-08-26T16:39:18Z

It has been a while, so I investigated a bit of the orgchart codebase. dabeng/OrgChart#712 (comment). The npm build works fine and all the unit tests passed. It looks like orgchart demo issues.

The next step is to integrate the missing lib in the demo but in npm local: json-digger.js and will move on and see how it goes.

jxmai · 2023-08-26T19:22:52Z

The json-digger.js is Node specific javascript file: https://raw.githubusercontent.com/dabeng/json-digger/master/dist/json-digger.js, which won't run on non-Node env.

dabeng/OrgChart@28f797a#diff-4a4e83a28dfac8398f4b94c34ed7f15533336f899314d7765efc34bbb0a49327R19

The dependency was introduced in 3.5.0 which made orgchart drag and drop feature be runnable in NodeJS only environment.

I wrote a note to the orgchart maintainer: dabeng/OrgChart#712 (comment)

melloware · 2023-08-27T13:53:08Z

Excellent work @jxmai !

jxmai added the enhancement Improve an existing component label May 12, 2023

jxmai self-assigned this May 12, 2023

jxmai changed the title ~~Orgchart: Version Update (to 3.7.0)~~ Orgchart: Version Update (to 3.8.0) Jul 1, 2023

jxmai added a commit to jxmai/primefaces-extensions that referenced this issue Jul 1, 2023

primefaces-extensions#1182 - upgrade both orgchart.js and orgchart.cs…

f3c44af

…s to version 3.8.0

jxmai added a commit to jxmai/primefaces-extensions that referenced this issue Jul 3, 2023

primefaces-extensions#1182: Orgchart upgrade: style alignment

49a15fe

jxmai mentioned this issue Jul 3, 2023

Regression: Drag and Drop is not functional in the demo page dabeng/OrgChart#712

Closed

jxmai added the third-party Issue is tracked in 3rd party library label Aug 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Orgchart: Version Update (to 3.8.0) #1182

Orgchart: Version Update (to 3.8.0) #1182

jxmai commented May 12, 2023 •

edited

Loading

jxmai commented Jul 2, 2023 •

edited

Loading

melloware commented Jul 2, 2023

jxmai commented Jul 2, 2023

jxmai commented Jul 3, 2023 •

edited

Loading

jxmai commented Jul 3, 2023 •

edited

Loading

melloware commented Jul 3, 2023

jxmai commented Jul 3, 2023 •

edited

Loading

jxmai commented Aug 26, 2023

jxmai commented Aug 26, 2023 •

edited

Loading

melloware commented Aug 27, 2023

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!

Orgchart: Version Update (to 3.8.0) #1182

Orgchart: Version Update (to 3.8.0) #1182

Comments

jxmai commented May 12, 2023 • edited Loading

jxmai commented Jul 2, 2023 • edited Loading

melloware commented Jul 2, 2023

jxmai commented Jul 2, 2023

jxmai commented Jul 3, 2023 • edited Loading

jxmai commented Jul 3, 2023 • edited Loading

melloware commented Jul 3, 2023

jxmai commented Jul 3, 2023 • edited Loading

jxmai commented Aug 26, 2023

jxmai commented Aug 26, 2023 • edited Loading

melloware commented Aug 27, 2023

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!

jxmai commented May 12, 2023 •

edited

Loading

jxmai commented Jul 2, 2023 •

edited

Loading

jxmai commented Jul 3, 2023 •

edited

Loading

jxmai commented Jul 3, 2023 •

edited

Loading

jxmai commented Jul 3, 2023 •

edited

Loading

jxmai commented Aug 26, 2023 •

edited

Loading