glsp diagram is not rendered

[Adem-Kri]

I added a button to my glsp view to switch views (you already answered me)
but after developing the switch button and binding what was injected, the view isn't rendered. I have no errors.

by the way, I haven't tested my work yet, so please your feedback is appreciated concerning the developing.

button.ts

@injectable()
export class ButtonOverlay extends AbstractUIExtension {
  @inject(TYPES.IActionDispatcher)
  protected readonly actionDispatcher: IActionDispatcher;

  @inject(OpenerService)
  protected readonly openerService: OpenerService;

  static readonly ID = "button-overlay";

  protected initializeContents(containerElement: HTMLElement): void {
    containerElement.appendChild(
        this.createButton(
          "btn_switch_view",
          "Switch to table view",
          "arrow-both",
          SwitchViewAction.create('my-view-uri', {})
        )
      );
  }
  
  protected createButton(
    id: string,
    label: string,
    codiconId: string,
    action: SwitchViewAction
  ): HTMLElement {
    const baseDiv = document.getElementById(this.options.baseDiv);
    if (baseDiv) {
      const button = document.createElement("div");
      const insertedDiv = baseDiv.insertBefore(button, baseDiv.firstChild);
      button.id = id;
      button.classList.add("overlay-button");
      const icon = this.createIcon(codiconId);
      insertedDiv.appendChild(icon);
      insertedDiv.onclick = () => {
        const uri = new URI(action.uri);
        open(this.openerService, uri, action.openerOptions);
      }
        insertedDiv.insertAdjacentText("beforeend", label);
      return button;
    }
    return document.createElement("div");
  }

  protected createIcon(codiconId: string): HTMLElement {
    const icon = document.createElement("i");
    icon.classList.add(...codiconCSSClasses(codiconId), "overlay-icon");
    return icon;
  }
}
export interface SwitchViewAction {
  readonly kind: string;
  readonly uri: string;
  readonly openerOptions?: object;
}

export class SwitchViewAction implements SwitchViewAction {
  static readonly KIND = "switchView";

  constructor(readonly uri: string, readonly openerOptions?: object) { }

  // get kind() {
  //   return SwitchViewAction.KIND;
  // }

  static create(uri: string, openerOptions?: object): SwitchViewAction {
    return new SwitchViewAction(uri, openerOptions);
  }
}

and inside di.config.ts:

bind(ButtonOverlay).toSelf().inSingletonScope();
bind(TYPES.IUIExtension).toService(ButtonOverlay);
bind(OpenerService).to(ButtonOverlay).inSingletonScope();

[planger]

On a first glance, your code looks reasonable, however there are a few things to consider:

UI Extension Enablement

UI extensions aren't enabled by default. They need to be enabled by sending a SetUIExtensionVisibilityAction with your UI extension ID

this.actionDispatcher.dispatch(
  SetUIExtensionVisibilityAction.create({ extensionId: ButtonOverlay.ID, visible: true })
);

If you want to enable UI extensions on open in the context of a Theia editor, you typically do that in your custom subclass of the GLSPDiagramManager by overriding and extending the doOpen method. Please see the default implementation of doOpen to see how it e.g. dispatches the actions it computes for the navigations.
There, you could send the SetUIExtensionVisibilityAction mentioned above in a similar way after calling super.doOpen in your subclass.

In order to register your custom diagram manager, you typically overwrite configureDiagramManager() in your subclass of GLSPTheiaFrontendModule.

Dependency injection modules of GLSP and Theia

Looking at your di.config.ts:

bind(ButtonOverlay).toSelf().inSingletonScope();
bind(TYPES.IUIExtension).toService(ButtonOverlay);
bind(OpenerService).to(ButtonOverlay).inSingletonScope();

You create ButtonOverlay as a singleton and bind it to TYPES.IUIExtension. That's fine!
But then you bind the same class again to OpenerService, which in turn is injected again in the implementation of ButtonOverlay. There are a few odd things about that:

1. It seems wrong to bind a class (ButtonOverlay) to a symbol (OpenerService), which in turn is supposed to be injected in the very same class (ButtonOverlay).
2. It is surprising to first create an instance of ButtonOverlay as a singleton, but then again bind the class not as a singleton. In line 3 above, I'd have suspected toService(ButtonOverlay), otherwise you'll have multiple instances of ButtonOverlay.
3. What is OpenerService? Is this a custom symbol or is it the one from Theia? If it is the one from Theia: you shouldn't use Theia types in the Theia-independent GLSP module as this breaks the reusability of this module outside of Theia (e.g. in VS Code or standalone)

[Adem-Kri]

Hello @planger, thank you for your response.
yes the binding was incorrect and I made many mistakes, So I rewrote my code as follows:

import { AbstractUIExtension } from '@eclipse-glsp/client';

import { inject, injectable } from 'inversify';
import { commandinterface } from './coomand-interface';




@injectable()
export class MenuBar extends AbstractUIExtension {

    @inject(commandinterface)
    readonly service:commandinterface

 
    static readonly ID = 'config-menu-bar-ui-extension';
    id(): string {
       return MenuBar.ID
    }
    containerClass(): string {
        return MenuBar.ID
    }
    protected initializeContents(containerElement: HTMLElement): void {
        const toolDiv = document.createElement('div');
        toolDiv.style.position = 'absolute';
    
        const tableViewButton = document.createElement('button');
        tableViewButton.innerText = 'Table View';
        tableViewButton.onclick = async (_) => {
         console.log('clickon button');
        // this.commandRegistry.executeCommand('Contribution:command', 'projectName', 'projectPath');
        this.service.openCommand()
        };
        toolDiv.appendChild(tableViewButton);
    
        containerElement.appendChild(toolDiv);
    }
}

export const commandinterface = Symbol.for('commandinterface');
export interface commandinterface {
    openCommand(): void;
 
}

I also corrected the binding and it works fine.

And for the moment I will try to do the opposite way from the table view to the glsp one, can you give me some hints depending on my functional code.
thanks