<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">
<!-- Element for tf-graph demo page

Example

<tf-graph-demo></tf-graph-demo>

-->

<dom-module id="tf-graph-demo">
<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%
}

</style>
<div class="all">
  <div class="side">
    <tf-graph-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="main">
    <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>
</div>
</template>
</dom-module>

<script>
(function(){

var datasets = [
  {
    name: "Mnist Eval",
    path: "mnist_eval.pbtxt",
  },
  {
    name: "Mnist with summaries (+stats)",
    path: "mnist_with_summaries.pbtxt",
    runMetadata: [
      {
        tag: "step100",
        path: "mnist_with_summaries_step100.pbtxt"
      },
      {
        tag: "step1000",
        path: "mnist_with_summaries_step1000.pbtxt"
      }
    ]
  },
  {
    name: "Mnist Train (with shapes)",
    path: "mnist_train_shapes.pbtxt",
  },
  {
    name: "Inception Train (huge)",
    path: "inception_train.pbtxt",
  },
  {
    name: "Inception Train Eval",
    path: "inception_train_eval.pbtxt",
  },
  {
    name: "Inception Test",
    path: "inception_test_eval.pbtxt",
  },
  {
    name: "PTB Word LSTM Train",
    path: "ptb_word_lstm_train.pbtxt",
  },
  {
    name: "PTB Word LSTM Train Eval",
    path: "ptb_word_lstm_train_eval.pbtxt",
  },
  {
    name: "PTB Word LSTM Test",
    path: "ptb_word_lstm_test_eval.pbtxt",
  },
  {
    name: "Cifar10 Train (+stats)",
    path: "cifar10_train.pbtxt",
    runMetadata: [
      {
        tag: "step0",
        path: "cifar10_train_step0.pbtxt"
      },
      {
        tag: "step100",
        path: "cifar10_train_step100.pbtxt"
      },
      {
        tag: "step200",
        path: "cifar10_train_step200.pbtxt"
      },
      {
        tag: "step300",
        path: "cifar10_train_step300.pbtxt"
      }
    ]
  },
  {
    name: "Cifar10 Multi-GPU Train",
    path: "cifar10_multi_gpu_train.pbtxt",
  },
  {
    name: "Cifar10 Eval (+stats)",
    path: "cifar10_eval.pbtxt",
    runMetadata: [
      {
        tag: "step0",
        path: "cifar10_eval_step0.pbtxt"
      },
      {
        tag: "step10",
        path: "cifar10_eval_step10.pbtxt"
      },
      {
        tag: "step20",
        path: "cifar10_eval_step20.pbtxt"
      },
    ]
  },
  {
    name: "Fatcat LSTM",
    path: "fatcat_lstm.pbtxt",
  },
  {
    name: "Legacy Inception Renamed",
    path: "legacy_inception_renamed.pbtxt",
  },
  {
    name: "Wolfe (Broken)",
    path: "wolfe1.pbtxt",
  },
  {
    name: "Wolfe (Fixed)",
    path: "wolfe2.pbtxt",
  },
  {
    name: "AlexNet",
    path: "alexnet.pbtxt",
  },
  {
    name: "TestError404",
    path: "nofile"
  }
];

Polymer({
  is: 'tf-graph-demo',
  properties: {
    datasets: {
      type: Object,
      value: function() {
        return this._getDatasets();
      }
    },
    selectedDataset: {
      type: Number,
      value: 1 // Mnist with metadata info.
    },
    _progress: Object
  },
  _normalizePath: function(path) {
    return this.resolveUrl('tf_model_zoo/' + path)
      .replace('tf_model_zoo', DEMO_DIR_PREFIX + 'tf_model_zoo');
  },
  _getDatasets: function() {
    if(typeof DEMO_DIR_PREFIX === 'undefined') {
      DEMO_DIR_PREFIX = '';
    }
    _.each(datasets, function(dataset) {
      dataset.path = this._normalizePath(dataset.path);
      if (dataset.runMetadata != null) {
        _.each(dataset.runMetadata, function(metadata) {
          metadata.path = this._normalizePath(metadata.path);
        }, this);
      }
    }, this);
    return datasets;
  }
});
})();
</script>
