Integration between Che and diagram drawing library JointJS

[alortsoc]

Hi.

I am trying to build a simple graphic modelling editor integrated with Che, and in order to do that, I am using JavaScript libraries and integrating them as shown in the sample che-sample-plugin-embedjs-ide (exposed in Che documentation) or in this EMF plugin implemented by EclipseSource.

The library selected to do that was JointJS a JS library with an easy way to draw several kind of diagrams (in particular I am focused in UML diagrams). So, I have built a small Che extension that draws a static UML diagram through an action (as in the sample che-sample-plugin-embedjs-ide). Code of this extension is attached.

But when doing the integration with Che, I am finding issues. The diagram is not drawn and an error indicating that a basic object is not defined is raised.

JointJS (version 1.0.3) depends on other 3 JavaScript libraries:

• jQuery(version 2.2.4)
• Backbone(version 1.3.3)
• Lodash(version 3.10.1)

In the code supplied, JS dependencies are included in the same JavaScript file (to ease its loading with GWT). As shown in the Expected behavior section, they work fine.

My main idea with this issue is to discard "easy" things that perhaps I am missing...

Reproduction Steps:

1. Compile Che 5.0.0-M7 assembly with the attached extension added
2. Start Che as a native server (as documented here)
3. Create a new workspace with a sample project or start an available one.
4. When the workspace is started, right-click over any project and click on the new option Graphic modeling editor located in the menu.
5. The diagram should be drawn

Expected behavior:

An UML diagram is drawn. An example of this behavior can be watched in:

• Running the HTML page testUML.html contained in the folder src/main/resources/com/nopsar/che/extension/jointeditor/public
• Using GoJS instead of JointJS. To do that:
  1.Replace the value of the constant JS_RESOURCE in Java interface JavaScriptResource by the commented value
  2.In the Java class JointEditorViewOverlay, replace the JavaScript invocation for JointJS by the one for GoJS (available in the comment located above class definition). The result can be seen in the attached snapshot

Observed behavior:

Nothing is drawn and following error can be seen in browser logs:

joint is not defined from drawUMLJointInChe@http://127.17.0.1:8080/_app/jointjs.full.js:39324:7
_.Xl@_app-0.js:903:353
vya/a.onload<@_app-0.js:174:253
Kv/<@_app-0.js:6701:249

The error indicates that the basic object of JointJS library is not defined. Typically, this suggests that some dependency is missing but as shown in the HTML page testUML.html pointed above, the Javascript provided apparently is working fine.

Che version: 5.0.0-M7
OS and version: Ubuntu 16.04 (Linux kernel 4.4.0-57-generic)
Docker version: 1.12.5
Che install: Native server from Eclipse Che version 5.0.0-M7 compilation (as explained here)

Additional information:

• Problem started happening recently, didn't happen in an older version of Che: No
• Problem can be reliably reproduced, doesn't happen randomly: Yes

Attachments

• Code of the extension tested in a tar.gz file, including JavaScript libraries (they are not compressed) located in the folder src/main/resources/com/nopsar/che/extension/jointeditor/public
• Snapshot of a successful usage of the extension using GoJS

Thank you very much for your help,
Best Regards,
Alberto.

che-graphic-editor-extension.tar.gz

[TylerJewell]

@alortsoc - very helpful description. @vzhukovskii @dkuleshov - would be nice for you to investigate.

[ghost]

@TylerJewell the issue must have been lost in a pile of kind/questions. Do you want this to be investigated?
@alortsoc anything new that you can add to the original description?

[TylerJewell]

Let's see if Alberto still wants this pursued. It is over a month old.

[alortsoc]

Hi all.

I have moved to version 5.2.2 of Che. Same issue, reproducible in the same way described in my previous comment

Although for my proof of concept I have moved on with GoJS instead of JointJS, I still feel this issue is topical because the following reasons:

1. It would be relevant to know where the problem is located: addressing if it affects just JointJS library or if it is in any of its dependencies (jQuery, Backbone, Lodash) which could potentially affect more JS components which use this libraries.

2. IMHO, JointJS provides a simpler and easier API than GoJS.

Related with the proof of concept I am developing, I have a question related with the LanguageServer editor provided by Che: issue #4188

Thanks,
Best Regards,
Alberto.

[TylerJewell]

@eivantsov - let's ask a support engineer to perform formal investigation for this issue.

[ghost]

@alortsoc can you share source code of your assembly?

[alortsoc]

Source code of my extension is available in my first comment.

Assembly code has not been changed (only pom files & IDE.gwt.xml to add the extension as explained in Che documentation), I attach those source files too.

Thanks,
Best Regards,
Alberto.

assembly.tar.gz

[vitaliy-guliy]

Hi @alortsoc
I have built your che-graphic-editor-extension and played with it.
I got the same error

joint is not defined from drawUMLJointInChe@http://127.17.0.1:8080/_app/jointjs.full.js

Considering jointjs.full.js works properly in testUML.html and there are no errors in browser console when injecting jointjs.full.js I tried to add an empty iframe to the bottom panel and inject the script in frame directly.
The result you can see at the screenshot.

It looks like your script doesn't want to work with IDE javascipt, so it is can not be loaded in the main frame. Now I'm still playing with your extension. There is a little problem with accessing javascript in iframe from the parent frame. I will solve this problem and give you the result.

[alortsoc]

@vitaliy-guliy Thank you very much 👍

I need to access javascript from my GWT code because I am interested in the library events (which would cause GWT invocation from javascript).

So, I will look forward to hearing from you!

[Bihlou]

Hi @vitaliy-guliy , I've a similar problem (with che 5.2.2), have you already find a solution ?

[19yak]

Hi @vitaliy-guliy , I tried to integrate the extension che-graphic-editor-extension.tar.gz.
I notice that javascript libraries are not loaded in my browser.

log file :
:8080/app/jointjs.full.js:39336 joint is not defined from ReferenceError: joint is not defined
at drawUMLJointInChe (http://localhost:8080/_app/jointjs.full.js:39334:15)
at und..mm (_app-0.js:5976:355)
at HTMLScriptElement.eval (_app-0.js:179:255)
at HTMLScriptElement.eval (_app-0.js:6975:251)
app-0.js:505 Tue Mar 21 13:55:33 GMT+100 2017 com.google.gwt.logging.client.LogConfiguration
SEVERE: (ReferenceError) : joint is not definedcom.google.gwt.core.client.JavaScriptException: (ReferenceError) : joint is not defined
at Unknown..qm(_app-0.js)
at Unknown.by(_app-0.js)
at Unknown.eval(_app-0.js)

_.Cn @ _app-0.js:505