<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-graph-board/tf-graph-board.html">
<link rel="import" href="../tf-graph-loader/tf-graph-loader.html">
<link rel="import" href="../tf-graph/tf-graph-controls.html">
<!-- Stand alone element of tf-graph for embedding.

Example

<tf-graph-app pbtxt="[[pbtxt]]"></tf-graph-app>

-->

<dom-module id="tf-graph-app">
<template>
<style>

:host /deep/ {
  font-family: 'Roboto', sans-serif;
}

.main {
  position: absolute;
  right: 0;
  left: 250px;
  height: 100%;
}

.side {
  position: absolute;
  left: 0;
  width: 250px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.all {
  position: relative;
  width: 100%;
  height: 100%
}

.container {
  height: 650px;
}

</style>
<div class="container">
  <div class="all">
    <div class="side">
      <tf-graph-controls
          color-by-params="[[colorByParams]]"
          stats="[[stats]]"
          color-by="{{colorBy}}"
      ></tf-graph-controls>
      <tf-graph-loader id="loader"
          out-graph-hierarchy="{{graphHierarchy}}"
          out-graph="{{graph}}"
          out-stats="{{stats}}"
          progress="{{_progress}}"
      ></tf-graph-loader>
    </div>
    <div class="main">
      <tf-graph-board id="graphboard"
          graph-hierarchy="[[graphHierarchy]]"
          graph="[[graph]]"
          stats="[[stats]]"
          progress="[[_progress]]"
          color-by="[[colorBy]]"
          color-by-params="{{colorByParams}}"
      ></tf-graph-board>
    </div>
  </div>
</div>
</template>
</dom-module>

<script>
(function(){

Polymer({
  is: 'tf-graph-app',
  properties: {
    stats: Object,
    pbtxt: {
      type: String,
      observer: '_updateGraph',
    },
    _progress: Object
  },
  _updateGraph: function() {
    var blob = new Blob([this.pbtxt]);
    this.$.loader._parseAndConstructHierarchicalGraph(null, blob);
  }
});
})();
</script>
