title: Cytoscape add custom image to node with clickable items on it
body: <p>I am building a charting tool in ember using cytoscape js and I can render chart data however I do not know how to set each node to display with a image that has other images/buttons that function within it. Basically I want it to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/DZ067.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DZ067.png" alt="enter image description here"></a></p>
  
  <p>In the image there are two buttons (I will most likely add icons as well) and also there are labels that exist within the node which I don't know how to do either.</p>
  
  <p>Here is the code I currently have.</p>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;div class="container" &gt;
    &lt;div id="cy"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component JS:</strong></p>
  
  <pre><code>import Ember from 'ember';
  
  
  export default Ember.Component.extend({
  tagName: '',
  
  map: Ember.computed('model.map_data', function()
  {
   if(this.get('model.map_data')){
     return JSON.parse(this.get('model.map_data').data)
    } else {
     return {};
    }
   }),
  cytoscape_data: Ember.computed('model.sub_apps.[]',function() {
  var ret = {
          nodes: [],
          edges: []
  };
  var red = 50;//replace with threshold
  var green = 25;//replace with threshold
  var _this = this;
  this.get("model").map_data.forEach(function(node) {
    var y= 0;
    var x = 0;
    var color = 'green';
    if(node.value &gt;= red ){
      color = 'red';
    }else {
      if(node.value &gt; green){
        color = 'orange';
      }
    }
    var position = _this.get("map")["app" + node.id];
    if(position){
      x = parseInt(position.split(',')[0]);
      y = parseInt(position.split(',')[1]);
    }
    ret["nodes"].push({
            data: {
                    id: node.id,
                    label: node.name,
                    node_type: 'app',
                    tooltip: node.description,
                    color: color
            },
            position: {
                    x: x,
                    y: y
            }
    });
    if(node.relations) {
      node.relations.forEach(function(parent) {
  
        ret["edges"].push({
          data: {
            source: node.id,
            target: parent.app_to_id
          }
        });
      });
    }
  });
  
   return ret;
  }),
  
  didInsertElement: function() {
   this._super();
   var cy = cytoscape({
   container: Ember.$('#cy')[0],
   elements: this.get("cytoscape_data"),
   zoom: 1,
   pan: { x: 0, y: 0 },
   fit: true,
   randomize: false,
   layout: {
        name: 'preset'
      },
    style: [
      {
        selector: 'node',
        style: {
          'content': 'data(label)',
          'text-opacity': 0.8,
          'text-valign': 'center',
          'text-halign': 'right',
          'width': '200px',
          'height': '200px',
          'border-color': 'green',
          'border-width': 3,
          'border-opacity': 0.5,
          'background-image': 'url(../assets/images/base_node_image.svg)'
          // 'background-color': 'data(color)'
        }
      },
      {
        selector: 'edge',
        style: {
          'width': 6,
          'border-color': 'green',
          'target-arrow-shape': 'triangle',
          'target-arrow-color': 'red',
          'opacity': 1,
          'curve-style': 'bezier'
        }
      },
  
      {
        selector: ':selected',
        style: {
          'background-color': 'orange',
          'opacity': 1
        }
      },
  
      {
        selector: '.faded',
        style: {
          'opacity': 0.0,
          'text-opacity': 0
        }
      },
    ],
  
  });
  Ember.run.scheduleOnce('afterRender', this, function(){
    cy;
  });
  cy.on('click', 'node', function(evt){
    var node = evt.target;
    console.log( 'clicked ' + node.data('label') );
     });
    },
  });
  </code></pre>
  
  <p>The chart this code renders looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/27hWX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/27hWX.png" alt="enter image description here"></a></p>
  
  <p>I can display a background-image however it displays in a circle which I dont know how to get rid of. The color of the circle is determined by some logic above which was a test to see if it works and that is fine (going to use that for one of the icons on the node later). I can also display the label for the node but I don't know how to display that within the node itself.</p>
  
  <p>Any help is appreciated, thanks!</p>