Feature Request: a href clickable

[mafar]

Is it possible to add list of links as node label
considering node is a rectangular shape , and text is inside it
which is clickable ?

 <ul>
  <li><a href="#1">Coffee</a></li>
  <li><a href="#1">Tea</a></li>
  <li><a href="#1">Milk</a></li>
</ul>

[stalniy]

the only thing which blocks clicking on links is pointer-events: none on the parent div.
I created a PR which allows to disable this behavior

[stalniy]

implemented in my fork https://github.com/stalniy/cytoscape-node-html-label

[karlludwigweise]

I still can't get this to work with enablePointerEvents: true on version 1.2.0.

[mgaebler]

Actually the click itself works if the label isn't stacked on a node, for instance if it's centered over a node. But if it does, the click event won't be fired.

[aledwassell]

I've been having a look at using event.stopPropagation(); on the anchor tag but I'm having no luck with that, another solution to this is to somehow introduce another overlay where hyperlinks can be stored and then prevent tap events on the note behind it.

[josejulio]

Or maybe attaching a click handler on the node itself to forward the click to the html element?
The downsides are that we could possibly lose the ability to click the node itself.

PRs that solve this issue are welcome :)

[aledwassell]

I wonder if we could detect mouseover on the anchor/button and tell Cytoscape to ignore tap/tapselect on the node. Not sure how to implement this cleanly.

[josejulio]

I wonder if we could detect mouseover on the anchor/button and tell Cytoscape to ignore tap/tapselect on the node. Not sure how to implement this cleanly.

I did the other way around in Kiali, as the node gets the event:

cy.on('tap', (event: Cy.EventObject) => {
      // Check if we clicked a label, if so stop processing the event right away.
      if (event.originalEvent) {
        const element = document.elementFromPoint(event.originalEvent.clientX, event.originalEvent.clientY);
        const realTargetId = findRelatedNode(element);
        if (realTargetId) {
          const realTarget = cy.$id(realTargetId);
          if (realTarget) {
            event.preventDefault();
            realTarget.trigger('tap');
            return;
          }
        }
      }

IIRC, the findRelatedNode gets the id of my html element container. It could probably be changed to having the lib itself adds in the cy.scratch the related DOM element of the html label.

https://github.com/kiali/kiali-ui/blob/master/src/components/CytoscapeGraph/CytoscapeGraph.tsx#L326-L338