<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-graph-loader/tf-graph-loader.html">
<link rel="import" href="../tf-graph-board/tf-graph-board.html">
<link rel="import" href="../tf-graph/tf-graph-controls.html">
<link rel="import" href="../tf-dashboard-common/tf-no-data-warning.html">
<link rel="import" href="../tf-backend/tf-backend.html">

<!--
tf-graph-dashboard displays a graph from a TensorFlow run.

It has simple behavior: Creates a url-generator and run-generator
to talk to the backend, and then passes the runsWithGraph (list of runs with
associated graphs) along with the url generator into tf-graph-board for display.

If there are multiple runs with graphs, the first run's graph is shown
by default. The user can select a different run from a dropdown menu.
-->

<dom-module id="tf-graph-dashboard">
<template>
<tf-no-data-warning
  data-type="graph"
  show-warning="[[_datasetsEmpty(_datasets)]]"
></tf-no-data-warning>
<template is="dom-if" if="[[!_datasetsEmpty(_datasets)]]">
<tf-dashboard-layout>
<div class="sidebar">
  <tf-graph-controls id="controls"
      color-by-params="[[_colorByParams]]"
      stats="[[_stats]]"
      color-by="{{_colorBy}}",
      datasets="[[_datasets]]",
      selected-dataset="{{_selectedDataset}}"
      selected-file="{{_selectedFile}}"
      selected-metadata-tag="{{_selectedMetadataTag}}"
  ></tf-graph-controls>
  <tf-graph-loader id="loader"
          datasets="[[_datasets]]",
          selected-dataset="[[_selectedDataset]]"
          selected-metadata-tag="[[_selectedMetadataTag]]"
          selected-file="[[_selectedFile]]"
          out-graph-hierarchy="{{_graphHierarchy}}"
          out-graph="{{_graph}}"
          out-stats="{{_stats}}"
          progress="{{_progress}}"
          out-hierarchy-params="{{_hierarchyParams}}"
  ></tf-graph-loader>
</div>
<div class="center">
    <tf-graph-board id="graphboard"
                graph-hierarchy="[[_graphHierarchy]]"
                graph="[[_graph]]"
                stats="[[_stats]]"
                progress="[[_progress]]"
                color-by="[[_colorBy]]"
                color-by-params="{{_colorByParams}}"
                hierarchy-params="[[_hierarchyParams]]">
    </tf-graph-board>
</div>
</tf-dashboard-layout>
</template>
<style>

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

.center {
  position: relative;
  height: 100%;
}

</style>
</template>
</dom-module>

<script>
(function() {
Polymer({
  is: 'tf-graph-dashboard',
  properties: {
    _datasets: Object,
    backend: {type: Object, observer: 'reload'},
    router: {type: Object},
    runs: Array,
  },
  reload: function() {
    Promise.all([this.backend.graphRuns(), this.backend.runMetadataRuns()])
    .then(function(result) {
      var runsWithGraph = result[0];
      var runToMetadata = result[1];
      var datasets = _.map(runsWithGraph, function(runName) {
        return {
          name: runName,
          path: this.router.graph(runName, tf.graph.LIMIT_ATTR_SIZE,
            tf.graph.LARGE_ATTRS_KEY),
          runMetadata: _.map(runToMetadata[runName], function(tag) {
            return {
              tag: tag,
              path: this.router.runMetadata(tag, runName)
            };
          }, this)
        };
      }, this);
      this.set('_datasets', datasets);
    }.bind(this));
  },
  _datasetsEmpty: function(datasets) {
    return !datasets || !datasets.length;
  }
});
})();
</script>
