ember-object-inheritance-graph

components.class-tree.js

import Ember from 'ember';

const {
  computed,
  Component,
  observer,
  get
} = Ember;

export default Component.extend({
  showPrivate: true,
  filterValues: '',
  showEmberData: true,
  _run() {
    var g = new dagreD3.Digraph();
    var rootNode = {
      name: 'Object',
      namespace: 'Ember',
      children: []
    };
    var layout = dagreD3.layout().nodeSep(5).rankSep(60);
    var renderer = new dagreD3.Renderer();

    this.set('counter', 0);
    this.findChildNodes(rootNode);
    this.drawTree(rootNode, g);

    renderer.layout(layout).run(g, d3.select("svg g")); 
  },
  
  run: observer(
    'showPrivate',
    'showEmberData',
    'filterValues',
    function() { this._run(); }
  ),
  didInsertElement() { this._run(); },

  drawTree(node, parentNode, g) {
    var self = this;

    if (!g) {
      g = parentNode;
      parentNode = null;
    }

    if (node.draw) {
      g.addNode(
        node.namespace+'.'+node.name,
        {
          label: this.renderLink(node.name, node.namespace)
        }
      );

      if (parentNode) {
        g.addEdge(
          null,
          parentNode.namespace+'.'+parentNode.name,
          node.namespace+'.'+node.name
        );
      }

      node.children.forEach(function(childNode) {
        self.drawTree(childNode, node, g);
      });
    }
  },

  renderLink(name, namespace) {
    var filepath = '';

    if (namespace === 'DS') {
      filepath = 'data/';
    }

    filepath = filepath + 'classes/' + namespace + '.' + name + '.html';
    
    return "<div><a href='http://emberjs.com/api/" + filepath +
      "' target='_blank'>" + namespace + "." + name + "</a></div>";
  },

  findClasses(namespace) {
    var self = this;
    
    return Object.keys(window[namespace])
      .filter(function(key) {
      	return (window[namespace][key] &&
                window[namespace][key].superclass &&
                (self.get('showPrivate') || key[0] != '_'));
    	}).map(function(key) {
      	return namespace + '.' + key;
    	});
  },

  findChildNodes(parentNode, g) {
    var self = this;
    
    this.get('classes')
      .filter(
      function(key) {
      	return get(window, key).superclass === get(window, parentNode.namespace + '.' + parentNode.name);
    	})
      .forEach(function(key) {
      	var namespace = key.split('.')[0];
      	var name = key.split('.')[1];
        var newNode = {
          name,
          namespace,
          children: []
        };
        if (Ember.isEmpty(self.get('filterValues')) ||
            self.get('filterValues')
            	.split(',').join(' ').split(' ')
            	.any(
          function(filterValue) {
          	if (Ember.isEmpty(filterValue)) {
              return false;
            } else {
              return (namespace+'.'+name)
                 .match(new RegExp(filterValue, 'i'));
           }
          })) {
        newNode.draw = true;
        self.incrementProperty('counter');
      }
      self.findChildNodes(newNode);
      if (newNode.draw && !parentNode.draw) {
        parentNode.draw = true;
        self.incrementProperty('counter');
      }
      parentNode.children.push(newNode);
    });
  },

  'classes': computed('showEmberData', 'showPrivate', function() {
    var classes = Ember.A();

     if (this.get('showEmberData')) {
      classes = classes.concat(this.findClasses('DS'));
    }

    return classes.sort();
  })
});

controllers.application.js

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  emberVersion: Ember.VERSION,
  dsVersion: DS.VERSION
});

styles.app.css

/* Put your CSS here */
html, body {
    margin: 20px;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: underline;
}

span.small {
  font-size: 12px;
}

label:hover {
  cursor: pointer;
}

svg {
    overflow: hidden;
}

.node rect {
    stroke: #333;
    stroke-width: 1.5px;
    fill: #fff;
}

/* Use a css selector to set up padding */
.node div {
  padding: 3px;
}

.edgeLabel rect {
    fill: #fff;
}

.edgePath {
    stroke: #333;
    stroke-width: 1.5px;
    fill: none;
}

templates.application.hbs

<h2>Ember.Object Ancestor Tree</h2>
<span class="small">(Click and drag the graph)</span>
<h4>Ember.VERSION {{emberVersion}}</h4>
<h4>DS.VERSION {{dsVersion}}</h4>
{{class-tree}}

templates.components.class-tree.hbs

<h5>Total Classes: {{counter}}</h5>
<div>
  {{input value=filterValues placeholder="Filter by name"}}
</div>
<div>
  <label>Ember Data {{input checked=showEmberData type="checkbox"}}</label>
</div>

<svg width=4850 height=780>
  <g transform="translate(21,20)"/>
</svg>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0",
    "d3": "https://d3js.org/d3.v3.min.js",
    "dagre": "https://cpettitt.github.io/project/dagre-d3/v0.2.9/dagre-d3.min.js"
  },
  "addons": {}
}