tnt.tree/web-components/ensembl-species-tree/ensembl-species-tree.html

TnT tree display

<!-- TODO : Load via html-imports to ensure dedup -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="http://www.polymer-project.org/components/core-dropdown-menu/core-dropdown-menu.html">
<link rel="import" href="http://www.polymer-project.org/components/core-dropdown/core-dropdown.html">
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="http://www.polymer-project.org/components/core-selector/core-selector.html">

<!-- <link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html"> -->
<!-- <link rel="import" href="http://www.polymer-project.org/components/paper-dropdown-menu/paper-dropdown-menu.html"> -->
<!-- <link rel="import" href="http://www.polymer-project.org/components/paper-dropdown/paper-dropdown.html"> -->

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="../../build/tnt.tree.min.js"></script>
<script src="theme.js"></script>
<script src="pics.js"></script>

<polymer-element name="species-tree-toolbar" attributes="layout subtree subtrees">
  <template>
    <core-toolbar style="background: #EEEEEE;">

    <!-- Layout -->
      <core-dropdown-menu label="Layout..." style="background: #EEEEEE;">
	<core-dropdown class="dropdown">
	  <core-selector selected="0" on-core-select="{{layoutChange}}">
              <core-item label="Vertical" style="background: #EEEEEE;"></core-item>
              <core-item label="Radial" style="background: #EEEEEE;"></core-item>
          </core-selector>
	</core-dropdown>
      </core-dropdown-menu>

      <!-- Subtrees -->
      <core-dropdown-menu label="Tree..." style="background: #EEEEEE;">
	<core-dropdown class="dropdown">
	  <core-selector selected="0" on-core-select="{{subtreeChange}}">
	    <template repeat="{{ subtreesarray }}">
	      <core-item label="{{}}" style="background: #EEEEEE;"></core-item>
	    </template>
	  </core-selector>
	</core-dropdown>
      </core-dropdown-menu>

    </core-toolbar>
  </template>
  <script>
    Polymer({
      subtrees : "All",
      layoutChange : function (event, detail, sender) {
          if (detail.isSelected) {
            this.layout = detail.item.label;
          }
      },
      subtreeChange : function (event, detail, sender) {
          if (detail.isSelected) {
            this.subtree = detail.item.label;
          }
    },
    ready : function () {
    this.subtreesarray = this.subtrees.split(" ");
    console.log(this.subtreesarray);
    }
    });
  </script>
</polymer-element>

<polymer-element name="tnt-species-tree" attributes="layout width subtree">
  <template>
    <style>
      .tnt_zmenu_header {
        background: rgb(59,103,158); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
        color : white;
      }
      .tnt_tooltip_active {
        opacity : .94 !important;
        background-color : #eaeeff !important;
      }
    </style>
    <link rel="stylesheet" href="../../build/index.css" type="text/css" />
    <div id="mytree"></div>
  </template>
  <script>
    (function () {
    var tree_vis = tnt.tree();
    var theme = tnt_theme();

    Polymer("tnt-species-tree", {
      subtree : "All",
      layout : "Vertical",
      width : 1200,
      subtreeChanged : function () {
        var subtree_name = this.subtree;
        var original_root = theme.original_root();
        var subtree = original_root;
        if (subtree_name !== "All") {
          subtree = original_root.find_node (function (node) {
           return node.node_name() === subtree_name;
          });
        }
        tree_vis.data(subtree.data());
        tree_vis.update();
      },
      layoutChanged : function () {
        switch (this.layout) {
           case 'Vertical' :
              tree_vis.layout(tnt.tree.layout.vertical().width(this.width).scale(false)).duration(1000);
              tree_vis.update();
              break;
           case 'Radial' :
              tree_vis.layout(tnt.tree.layout.radial().width(this.width).scale(false)).duration(1000);
              tree_vis.update();
              break;
        }
      },
      ready : function () {
        tree_vis.layout(tree_vis.layout().width(this.width).scale(false));
        theme(tree_vis, this.shadowRoot.getElementById("mytree"));
      }
    })
    })();
  </script>
</polymer-element>

<polymer-element name="ensembl-species-tree" attributes="subtrees width">
  <template>
    <species-tree-toolbar layout="{{layout}}" subtree="{{subtree}}" subtrees="{{subtrees}}"></species-tree-toolbar>
    <tnt-species-tree layout="{{layout}}" subtree="{{subtree}}" width="{{width}}"></tnt-species-tree>
  </template>
  <script>
    Polymer("ensembl-species-tree", {});
  </script>
</polymer-element>