Issue recreating the ExpandButtonView example from docs

[rileydanejohnston]

Hello, I'm having trouble recreating the ExpandButtonView example in the docs. I followed the steps/code example in the docs, and it appears the ExpandableCompartment expands when the ExpandButton is clicked, but the outer node is not changing its size. Here is what it looks like:

It looks to me like the outer node should adjust its size when the compartment expands, per this example from the docs:

[ndoschek]

Hi @rileydanejohnston,

Thanks for your interest in the GLSP examples and for pointing out that glitch in the implementation example.
Indeed you are right, on expanding the node it also should adjust its size.
There are different approaches to do this:
If we stick to the simple implementation example, we would adjust the node's height on the client if the status expanded = true. To showcase this, I updated the example implementation on the GLSP website (please see PR eclipse-glsp/glsp-website-source#68 and the preview of the website here: https://deploy-preview-68--glsp.netlify.app/documentation/rendering/#default-views).
Edit: In the meantime it was merged and the website was updated: https://www.eclipse.org/glsp/documentation/rendering/#default-views

Another approach could be to store the information of the expansion state in the model directly and solve it on the server to avoid bound manipulation on the client.

HTH and best regards from Vienna,
Nina

[rileydanejohnston]

Hi @ndoschek, thank you for the response. Everything is working now!

I have a similar question regarding the button overlay UI extension example. I've completed all of the steps except I don't understand how/where to activate the extension as my project doesn't have a DiagramWidget file. How/where do I activate the extension if I'm using VSCode integration rather than Theia?

Here is a photo of the step in the example I'm referencing:

o.

[tortmayr]

Hi @rileydanejohnston,
for the vscode integration dispatching custom action is not as straight forward (I have opened #778 to track this).

For the moment your can use this approach:
Create a new class that extends from GLSPVscodeDiagramWidget in the webview part of your project and override
the initializeSprotty method:

import { GLSPVscodeDiagramWidget } from '@eclipse-glsp/vscode-integration-webview/lib/glsp-vscode-diagram-widget';

@injectable()
export class MyGlspDiagramWidget extends GLSPVscodeDiagramWidget {
    protected override initializeSprotty(): void {
        super.initializeSprotty();
        setTimeout(() => {
            this.actionDispatcher.dispatch(SetUIExtensionVisibilityAction.create({ extensionId: 'button-overlay', visible: true }));
        }, 50);
    }
}

The you have to customize your GLSP starter by overriding the addVscodeBindingsMethod:

class TaskListStarter extends GLSPStarter {
   ...

    protected override addVscodeBindings(container: Container, diagramIdentifier: GLSPDiagramIdentifier): void {
        super.addVscodeBindings(container, diagramIdentifier);
        container.rebind(GLSPVscodeDiagramWidget).to(MyGlspDiagramWidget).inSingletonScope();
    }
}

This should activate the ButtonOverlay extension on startup.

[rileydanejohnston]

Hi @tortmayr, this works great! Thank you for your help!

[rileydanejohnston]

Hello @tortmayr / @ndoschek,

I'm also having trouble with the GIssueMarkerView example found here. When I try to create the GIssueMarker in my gmodel-factory, I get an error saying "builder() does not exist on type GIssueMarker". I went to the definition of the class and sure enough there is no builder() or build().

Is it supposed to be like that? I can get the icon to render but nothing happens with the message I pass to it.

[tortmayr]

Hi @rileydanejohnston,

it looks like the static builder() method for the GissueMarker was missing in the 1.0.0 release and and just been added recently. So it's currently only available in 1.1.0 Release Candiate versions)

Nevertheless, the builder() method is just a utility method that returns a new GIssueMarkerBuilder with the default type configured.
This updated snippet should work for the 1.0.0 release:

GNode.builder()
  .type(DefaultTypes.NODE_RECTANGLE)
  .position(point ?? Point.ORIGIN)
  .size(50, 35)
  .add(
     new GIssueMarkerBuilder(GIssueMarker)
      .type(DefaultTypes.ISSUE_MARKER)
      .addIssue({ message: "Information message", severity: "info" })
      .position(-8, -8)
      .build()
  )
  .build();

[rileydanejohnston]

Hello @tortmayr, thank you for the response. What is the purpose of the issues message property? I see how the severity property can change the appearance of the issue, but I don't see where the message gets used.

[tortmayr]

The issue message should be displayed in a pop-up if you hover over the issue marker:

[rileydanejohnston]

Hi @tortmayr, the issue was my popup factory was looking for other classes, not for GIssuesMarkers. I updated the popup factory to look for GIssueMarkers and it works great! Thanks!