Not able generate graph when glspSelectModule module is added

[sathya-1994]

I am using GLSP server with GLSP's vscode extension(https://github.com/eclipse-glsp/glsp-vscode-integration).

Instead of of using "@eclipse-glsp-examples/workflow-glsp" npm module, I copied it from https://github.com/eclipse-glsp/glsp-client/tree/master/examples/workflow-glsp (into packages folder) and added glspSelectModule(which is exported from '@eclipse-glsp/client' module). But I was not able to generate graphs.

Screenshot:

Code changes:

So, select functionality is not working. How fix this issue?

[planger]

createClientContainer() already binds the module glspSelectModule so you end up performing all its binding twice, such as the SelectionService. Thus, you have an ambiguous match for SelectionService.
See https://github.com/eclipse-glsp/glsp-client/blob/b58dd470b10f74847856f9775d0db7d3250f909f/packages/client/src/base/container-modules.ts#L68

Either you don't add the glspSelectModule again, or you need to unload it first and then load your customized version of it.

[sathya-1994]

createClientContainer() already binds the module glspSelectModule so you end up performing all its binding twice, such as the SelectionService. Thus, you have an ambiguous match for SelectionService. See https://github.com/eclipse-glsp/glsp-client/blob/b58dd470b10f74847856f9775d0db7d3250f909f/packages/client/src/base/container-modules.ts#L68

Either you don't add the glspSelectModule again, or you need to unload it first and then load your customized version of it.

@planger ,

I tried without adding glspSelectModule and SelectAction(id:elementSelected) action will not triggered from client side(But Graph will be loaded without any issues).

Any other configuration needed at client side to enable SelectAction?

[planger]

No, not that I can think of. Probably it is best to debug into the SelectMouseListener (from sprotty) and see why it doesn't send a select action.

[sathya-1994]

@planger ,
I checked above example but I was not able implement new custom action.

This is my new module,
import { SelectAction } from '@eclipse-glsp/protocol';
import { ContainerModule } from 'inversify';

import { CustomSelector } from './CustomSelector';
import { configureActionHandler,TYPES } from 'sprotty';

export const customSelectorModule = new ContainerModule((bind, _unbind, isBound) => {
bind(TYPES.IUIExtension).toService(CustomSelector);
configureActionHandler({ bind, isBound }, SelectAction.KIND, CustomSelector);
});

And this is CustomSelector:
import { SelectAction } from '@eclipse-glsp/protocol';
import {
Action,
GLSPActionDispatcher,AbstractUIExtension,IActionHandler,ICommand} from '@eclipse-glsp/client';
import { inject, injectable } from 'inversify';
import { TYPES } from 'sprotty/lib';

@Injectable()
export class CustomSelectAction implements Action {
static readonly KIND = 'customElementSelected';
readonly kind = CustomSelectAction.KIND;
constructor(public readonly selectedElementsIDs: string[] = [],
public readonly deselectedElementsIDs: string[] = []) {
}
}

@Injectable()
export class CustomSelector extends AbstractUIExtension implements IActionHandler {
static readonly ID = 'task-123';
id(): string {
return CustomSelector.ID;
}
containerClass(): string {
return 'command-palettess';
}
protected initializeContents(containerElement: HTMLElement): void {
return ;
}
@Inject(TYPES.IActionDispatcher)
protected actionDispatcher: GLSPActionDispatcher;
handle(action: Action): ICommand | Action | void {
console.log("Entered");
if (action.kind === SelectAction.KIND) {
// Sending custom action to server
const customAction = new CustomSelectAction([],[]);
this.actionDispatcher.dispatch(customAction);
}
}
}

And I registered new module using createClientContainer() but still I I did not get new custom action at server side.
( const container = createClientContainer(diagramModule, customSelectorModule ); )

I went through documentation of inversify. But I did not get any idea to implement custom action.
I am very new to GLSP. Please help to fix this issue.

How we can register new custom action similar to select action(we should get new custom at server side when node/edge is selected).

Is we have to re-write GLSP's select module? or Invoke new Action(Custom Action) when Selection is from Client?

[planger]

Was your custom action dispatched on the client (best to debug into the action-dispatcher.ts)?
Did you register a handler on the server for the same action kind id? It will only be forwarded to the server, if there is a handler registered for that action on the server.

[sathya-1994]

@planger ,

In the above code newly added module's handle() method it is not called(CustomSelector class's handle method).

But I tried one more approach without using new module.
When SelectAction is received from the client then change the action's kind to customSelectElement which will be forwarded to server and we have to register new action at server side with kind customSelectElement. So my problem is solved with this approach.

Any reason why newly added module's handle method is not triggered when Selection is invoked at client side?

[planger]

I just tried this out real quick and it works as expected.
My module contains the following binding:

configureActionHandler(context, SelectAction.KIND, MySelectActionHandler);

The MySelectActionHandler:

@injectable()
export class MySelectActionHandler implements IActionHandler {
    handle(action: Action): void | Action | ICommand {
        console.log('received select action');
    }
}

I'm not sure as I can't debug your code, but it is a bit strange that you first bind your CustomSelector as a UI extension to service and then use it as an action handler too. Could still work, but it is certainly uncommon.

[sathya-1994]

@planger ,

Thank you,
I tried your code and it worked.

But if we invoke SelectAction from CustomSelectAction's handler(from server side to highlight connected node) again we will face infinite loop. Currently it is not our requirement and my current issue is resolved.