SVG Popover troubleshooting

components.vehicle-body.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  // Simulate data coming in from API via an actioncable every 2 seconds
  // Essentially just causes the SVG to redraw
  dataFromAPI: Ember.observer('', function() {
    var _that = this;
    
    setInterval(function() {

      _that.set('trailer', {tyres:[
        {id: 1, name:Math.random(1), x:0, y:100},
        {id: 2, name:Math.random(1), x:50, y:50},
        {id: 3, name:Math.random(1), x:100, y:100},
        {id: 4, name:Math.random(1), x:150, y:50},
        {id: 5, name:Math.random(1), x:200, y:100},
        {id: 6, name:Math.random(1), x:250, y:50},
        {id: 7, name:Math.random(1), x:300, y:100},
        {id: 8, name:Math.random(1), x:350, y:50},
        {id: 9, name:Math.random(1), x:400, y:100}
      ]});
      
      // Update the hovered tyre data in the popover
      var hovTyre = _that.get('hoveredTyre');
      if(hovTyre) {
      _that.get('trailer.tyres').forEach((tyre) => {
        if(tyre.id === hovTyre.id) {
           _that.set('hoveredTyre', tyre);
        }
      });
      }

    }, 2000);
  }).on('init'),
  
  visiblePopover: false,
  visiblePopoverComputed: Ember.computed('visiblePopover', function() {
    return this.get('visiblePopover');
  }),
  
  hoveredTyre: undefined,
  hoveredTyreComputed: Ember.computed('hoveredTyre',function() {
    return this.get('hoveredTyre');
  }),
  
  actions: {
      hoverAction: function(tyre) {
        	this.set('visiblePopover', true);
          this.set('hoveredTyre',tyre);
      },
      leaveAction: function() {
        	this.set('visiblePopover', false);
      }
  }
});

components.vehicle-tyre.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'g'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',

});

templates.application.hbs

<h1>Demo for SVG Popover troubleshooting</h1>
<br>
<br>
{{vehicle-body}}
<br>
<br>

templates.components.vehicle-body.hbs

<svg id="svg-vehicle" viewBox="0 0 500 200">
    {{#each trailer.tyres as |tyre|}}
        {{vehicle-tyre id=(concat 'tyre-' tyre.id) tyre=tyre mouseEnter=(action 'hoverAction' tyre) mouseLeave=(action 'leaveAction')}}
    {{/each}}
</svg>

<div id="someotherelement" style=""></div>

{{#bs-popover visible=visiblePopoverComputed
							triggerElement=(if hoveredTyreComputed (concat '#tyre-' hoveredTyreComputed.id) '#someotherelement')
              viewportSelector="#root"
              renderInPlace=false }}
    {{hoveredTyreComputed.name}}
{{/bs-popover}}

templates.components.vehicle-tyre.hbs

<rect style="fill:#000;stroke:#000;" x="{{tyre.x}}" y="{{tyre.y}}" rx="3" ry="5" width="50" height="50" />

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-bootstrap": "1.0.0-beta.2",
    "ember-truth-helpers": "1.3.0"
  }
}