Hoverable Label

[vibsid0986]

Hello Team,

Greetings of the day.

I am currently using GLSP to build a diagram editor and have encountered a challenge related to displaying label information.

In my use case, a node represents a method that takes a list of numbers as input and returns their sum in a variable named op. For example, numbers : [1, 2, 3, 4, 5, 6, 7] is displayed in one compartment, which is further divided into three sub-compartments: key, separator, and value.

The issue arises when the input parameter name (key) or value becomes too long. Due to space constraints, I truncate the label in the diagram. However, I would like to show the full label text when the user hovers over the corresponding GLabel element, and hide it again when the mouse leaves.

The backend already sends the full label text to the client.

Could you please guide me on how to implement this behaviour on label--either using a built-in GLSP mechanism or a custom solution?

Thank you in advance for your support.

[tortmayr]

Hi @vibsid0986,
if the full label text is already available on the client side the easiest/most straight forward solution for your requirement is probably a custom label + view.
The default GLabel does not support the hoverFeature so you first have to create a custom subclass that does:

export class HoverableLabel extends GLabel implements Hoverable {
    static override readonly DEFAULT_FEATURES = [...GLabel.DEFAULT_FEATURES, hoverFeedbackFeature];
    hoverFeedback = false;
}

Then you can create a custom view for that. A very basic approach could be to reuse the implementation
of the default GLabelView and just changed the text depending on the hover state:

@injectable()
export class HoverLabelView extends ShapeView {
    render(label: Readonly<HoverableLabel>, context: RenderingContext): VNode | undefined {
        if (!isEdgeLayoutable(label) && !this.isVisible(label, context)) {
            return undefined;
        }
        const text = label.hoverFeedback ? <useFullLabel> : <useTruncatedLabel>;
        const vnode = <text class-sprotty-label={true}>{text}</text>;
        const subType = getSubType(label);
        if (subType) {
            setAttr(vnode, 'class', subType);
        }
        return vnode;
    }
}

Finally you just have to configure the custom model elements your diagram module:

        configureModelElement(context, 'my:label', HoverableLabel, HoverLabelView);