How to render the details of a node upon zooming in?

[atejshee-tibco]

I want to create a project using Node-JSON-Theia with the following feature:

1. The diagram is initially just a couple of nodes connected by edges
2. When the user zooms-in on a specific node, then the zoomed version of that node should show the children nodes contained inside that parent node
3. When the user zooms out, then the diagram should again show just the parent node as an abstract node without the details of the children nodes

Something similar to the pictures shown ahead:

1. Initial diagram
   

---

2. Zoomed in diagram
   

---

Is it currently possible to do this action in the GLSP?
If yes, then could I get some help on how/what changes need to be done ?

Thanks in advance.

[atejshee-tibco]

Hi @planger, any suggestions on this topic would be of great help.
Thanks in advance.

[tortmayr]

Hi @atejshee-tibco,
I recently also worked this topic (conditional level-of-detail based on zoom level) and also implemented a small PoC/Demo based on the tasklist example.
Unfortunately, I'm busy right now but I will look into this later today and follow up with an detailed answer/suggestions.

[atejshee-tibco]

Hi @tortmayr, was wondering if we could have some details over the PoC mentioned above or some insights around the query.

[tortmayr]

Hi @atejshee-tibco,
sorry for the late response. The past few days have been quite busy.

Here is the link to the PoC for the tasklist example:
https://github.com/eclipse-glsp/glsp-examples/tree/semantic-zoom-demo

In a nutshell, this extends the tasklist example with a compartment for details that is only visible in a certain zoom state.
In addition, the label size is adopted via css based on the zoom level.

Here is a short demo:

semantic-zoom.mp4

To break it down:

• First we grouped the zoom range into different level of details
• Then we implemented a handler that can react to viewport changes, derive the current level and applies it to the model
• Next we implemented specific lod-aware model elements that are only visible in certain lods. For this we also had to configure a custom view.
• Finally we updated the gmodel factory for the task list example to add an additional compartment with some details that is only visible in detail lod (i.e. quite zoomed in)

I hope this helps in getting you started with you usecase.

[atejshee-tibco]

Thanks a lot @tortmayr, really appreciate it. I will have a look at this semantic zoom demo, this should definitely help me.