Card View with on _CLICK events

[qwerp]

Is there any way we can include the "card view" (dialog window) as we can see in/used in the Memgraph Lab playground?

or what would be a recommendation to archive the same functionality, so that we can further explore the graph when using orb.

[tonilastre]

Orb probably won't go that way to have that because the whole HTML experience should be out of the library for it to keep its generic usage.

But this should be fairly simple to do with the current API that Orb has: On each event, you have globalPoint that has x, y which is left and top margin of the click within the container where the orb is initialized. With those, you are able to show a modal or any custom component at that position. That is also how Lab/Playground does it. In pseudocode, it looks like this:

card-view = HTML component with absolute position, hidden by default, in the same container where graph will be drawn by the orb so they both share the same x-y positioning.

orb.events.on(Orb.OrbEventType.MOUSE_CLICK, (event) => {
  // Canvas click
  if (!event.subject) {
     hide card-view
     return;
  }

  // Otherwise, it is a Node or edge click
  fill out card-view with event.subject information (e.g. properties, title, id)
  set card-view.top = `${event.globalPoint.y}px`
  set card-view.left = `${event.globalPoint.x}px`
  show card-view
});

[katarinasupe]

Hi @qwerp, did @tonilastre's suggestion help you implement card view?