Hide elements and cause re-layout of parent elements

[gee4vee]

We have a diagram that consists of elements within other elements (stack parent and members). Each parent or member has inputs and outputs represented by ports. We have a +/- button for each parent/member to hide inputs and outputs past a certain threshold.

Here we see all expanded.

Here we see a certain number collapsed.

This is the CSS class we apply to the ports and edges to hide them.

.hidden-element {
  fill-opacity: 0;
  opacity: 0;
  visibility: hidden;
}

So a couple of issues:

1. We want to hide the associated edges connected to the ports that are now hidden. I have tried to add the same hidden-element CSS class using addCssClass to the associated edge component but it does not hide it. Only the ports get hidden. Should that CSS work for edges?
2. We would also like the surrounding parent box to resize automatically based on the reduced size given there are fewer inputs/outputs. Can this be done with CSS or do we have to do something in the model?

A couple alternative approaches I am thinking of:

1. Send the client a modified model state that removes the input/output ports that have been hidden while preserving the full model state when saving the model to storage in the server. Is it possible to do this?
2. Could we use a different graphical element type for hidden elements? Something that won't draw anything but still affect the layout of parent boxes automatically.

[tortmayr]

Hi @gee4vee,

before we continue this discussion could you please provide some more information about your GLSP integration?

• What version are you using?
• Which integration (standalone, theia, vscode ....)
• Are you using a Java or Node/TS backend?
• What are you using as your source model (JSON, EMF, XML, directly serialized GModel etc.)?

In general, you have two approaches to solve the Conditional hiding of partial diagram elements requirements:

• A) Client-side: The server sends the complete graphical model to the client. The client is the responsible for triggering a relayout/rerendering if diagram elements should be hidden. (i.e the button is clicked). I recently implemented a variation of this approach do enable Semantic Zooming i.e. render different content for a node based on the current Zoom level.
  This approach is quite challenging and requires a lot of customization on the client side. Therefore for your use case I would rather go with option B).
• B) Server-side: The server has a special GModelFactory that creates a GModel that only contains the currently visible elements. Whenever the visibility changes (i.e. button click) an action/operation is sent from the client that triggers a model update. This action needs to contain the information about hidden elements i.e. collapsed nodes in you case. The server then updates the GModel accordingly and sends an update. The underlying source model remains untouched so you still preserve all information when saving the model.

Once we have more information about GLSP integration, we can outline a more detailed approach tailored to you application.

[gee4vee]

2.3.0 with VS Code integration. Node backend. We have our own json-based model.

[gee4vee]

We are actually interested in semantic zooming at some point, so I will take a look at your implementation later. However, more guidance on the server-side approach would be appreciated for now. Thank you!