Customizing Tree Structure in Coffee Editor with External JSON Data

[hoajie]

Hi there,

I am currently working with the Coffee Editor and I would like to use my own JSON data to create and display a custom tree structure, similar to how the superbrewer3000.coffee file showcases the machine structure in the editor.

I am interested in understanding how Coffee Editor fetches and displays the data in the tree. My goal is to modify or rewrite the existing methods to make requests to an external URL (e.g., http://localhost:8081/api/v2/models?modeluri=test.sysmlx) in order to retrieve the data I need for my custom model, and then display it as a hierarchical tree structure.

Could you guide me on how to:

Modify or extend the existing data-fetching method in Coffee Editor?
Display a custom hierarchical tree model using my own JSON data?
Integrate and bind the retrieved data to the tree structure effectively?
Any insights or resources you can provide would be greatly appreciated.

Thank you for your time!

Best regards,
hoajie

[eneufeld]

Hi @hoajie ,
You need to do two things:

• modify the modelserver to provide your custom model, you can find an example here: https://github.com/eclipse-emfcloud/emfcloud-modelserver/tree/master/examples or the coffee editor specific code here: https://github.com/eclipse-emfcloud/coffee-editor/tree/master/backend/plugins/org.eclipse.emfcloud.coffee.modelserver
• modify the frontend to adapt it to your data: https://github.com/eclipse-emfcloud/coffee-editor/tree/master/client/coffee-editor-extension/src/browser
  You find the call from the frontend to the backend to load data in https://github.com/eclipse-emfcloud/coffee-editor/blob/master/client/coffee-editor-extension/src/browser/coffee-tree/coffee-tree-editor-widget.tsx loadMOdel

[hoajie]

Hi,

I hope this message finds you well!
Thank you for your previous guidance on integrating custom data into the Coffee Editor. I’ve successfully modified the loadModel method to fetch my JSON data from an external endpoint (e.g., http://localhost:8081/api/v2/models?modeluri=test.sysmlx). However, I’m now facing challenges displaying the hierarchical structure of my custom model.
Context & Progress
Data Structure Differences: My JSON data follows a SysML-like structure (e.g., nested Namespace, Package, PartUsage), which differs significantly from the default Machine model.

Model Design: I’ve attempted to mirror the Machine model’s approach by defining custom interfaces and a childrenMapping (see snippet below).

Issue: Only the root node (Namespace) is displayed in the tree, and its child nodes (e.g., Package, PartUsage) are not rendered, despite being present in the data.

So I would like to ask you if there are other cases for me to compare with machine or are there other documents to learn how to design a custom model?
Any insights, references to examples (similar to the Machine model), or debugging strategies would be invaluable!

Thank you for your time and expertise.

Best regards,
hoajie

[eneufeld]

Hi @hoajie ,

did you adapt /coffee-editor-extension/src/browser/coffee-tree/coffee-node-factory.ts and for the details also coffee-editor-extension/src/browser/coffee-tree/coffee-schemas.ts ?

In general you should go through the whole coffee-editor-extension/src/browser/coffee-tree folder and check all files and make sure they fit your model.

Best