Adding Html Buttons/Html Elements inside a Cytoscape node

Question

How Can I add an Html elements inside a Cytoscape node? E.g: I want to add to every node - 2 small buttons, so the user can click on each one of the buttons and the value inside this node will change.

Example of the graph I want to create

[IMG]http://i57.tinypic.com/1z1bp1l.jpg[/IMG]

Admixture

Did u find any alternative library that can render SVG graphs like the sample u shared? – Giliane

Answer 1

It's not possible to render HTML in a canvas, nor would you probably want to for performance. If you really want it on the node, I suggest creating an overlay -- though that has its own set of complications in its implementation. Otherwise, you're far better off placing interactive elements separately from a node (e.g. tooltip, sidebar, menu, etc...).

Flak

Answer 2

mxGraph seems to do it by using an SVG foreignObject tag, and within that HTML like so:

<g style="cursor: move;">
  <g>
    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%">
      <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 1212px; margin-left: 839px;">
        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
          <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
            <div>Some HTML inside SVG</div>
          </div>
        </div>
      </div>
    </foreignObject>
  </g>
</g>

Not sure I want to go there in Cytoscape as its API is too nice to start working round and you'd need to deal with the update event flow, but mxGraph is a fantastic toolkit worth knowing about in this space.

Cenobite