How to render RxJS component in GoJS node

As shown in the above mockup, we have a rxJS component (shown in image with “vertical three ellipsis dot”). When user left click on it (not on mouse right click), a custom context menu opens with 3 options(shown in image). We want our three dot icon react component on each node.
How to render this RxJS component inside the GoJS node?

I suggest that you render the three dots as a GoJS Shape, or as a GoJS Picture, that you have in your node template.

Then define a click event handler on that object to show your component.

That’s basically how HTML context menus and tooltips are implemented, except using different mechanisms for responding to input events and how to handle various situations.

One possibility is that you implement your own HTML context menu and set your Shape or Picture’s contextMenu property to your instance of HTMLInfo. This is described at https://gojs.net/latest/intro/HTMLInteraction.html#HTMLInfoClass and demonstrated at https://gojs.net/latest/samples/customContextMenu.html and other samples.

Then you can implement your click event handler, to capture left click events, as:

{
  click: function(e, shapeOrPicture) {
    e.diagram.commandHandler.showContextMenu(shapeOrPicture);
  }
}

Thanks @walter, we are able to display our own context menu on left click, using your click event handler.
But, still on right-click of diagram background, context menu is appearing(as shown in the screenshot below). Can you please suggest some way to disable context-menu on right click?

Ah, did I forget to consider your requirement about disabling context menu clicks? Sorry about that.

The solution is the same for both GraphObjects as well as for the Diagram background, and should apply to context menus whether implemented using Adornment or HTMLInfo.

  $(go.Diagram, . . .,
    {
      contextMenu: $("ContextMenu",
        $("ContextMenuButton", $(go.TextBlock, "First"), . . .),
        $("ContextMenuButton", $(go.TextBlock, "Second"), . . .)
      ),
      click: function(e) { e.diagram.commandHandler.showContextMenu(e.diagram); },
      contextClick: function(e) { e.handled = true; },
      . . .
  $(go.Node, . . . ,
    {
      contextMenu: $("ContextMenu",
        $("ContextMenuButton", $(go.TextBlock, "Command One"), . . .),
        $("ContextMenuButton", $(go.TextBlock, "Command Two"), . . .)
      ),
      click: function(e, node) { e.diagram.commandHandler.showContextMenu(node); },
      contextClick: function(e, node) { e.handled = true; }
    },
    . . .