<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="tf-tooltip-coordinator.html">
<link rel="import" href="tf-run-selector.html">
<link rel="import" href="tf-x-type-selector.html">
<link rel="import" href="tf-color-scale.html">
<link rel="import" href="../tf-dashboard-common/tf-dashboard-layout.html">
<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
<link rel="import" href="../tf-dashboard-common/dashboard-style.html">
<link rel="import" href="../tf-dashboard-common/tf-downloader.html">
<link rel="import" href="../tf-categorizer/tf-categorizer.html">
<link rel="import" href="tf-chart.html">
<link rel="import" href="../tf-collapsable-pane/tf-collapsable-pane.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../tf-imports/lodash.html">
<link rel="import" href="../tf-dashboard-common/tf-no-data-warning.html">
<link rel="import" href="../tf-backend/tf-backend.html">

<!--
tf-event-dashboard is a complete frontend that loads runs from a backend,
and creates chart panes that display data for those runs.

It provides a categorizer, run selector, and x type selector, by which the user
can customize how data is organized and displayed.

Each chart has a button that can toggle whether it is "selected"; selectedRuns
charts are larger.

Organizationally, the #plumbing div contains components that have no concrete
manifestation and just effect data bindings or data loading. The #sidebar contains
shared controls like the tf-categorizer, tf-run-selector, and tf-x-type-selector.
The #center div contains tf-charts embedded inside tf-collapsable-panes.
-->
<dom-module id="tf-event-dashboard">
  <template>
    <div id="plumbing">
      <tf-color-scale
        id="colorScale"
        runs="[[runs]]"
        out-color-scale="{{colorScale}}"
        out-class-scale="{{classScale}}"
      ></tf-color-scale>

      <tf-tooltip-coordinator
        id="tooltipCoordinator"
        out-tooltip-updater="{{tooltipUpdater}}"
        out-tooltip-map="{{tooltipMap}}"
        out-x-value="{{tooltipXValue}}"
        out-closest-run="{{closestRun}}"
      ></tf-tooltip-coordinator>

    </div>

    <tf-dashboard-layout>
      <div class="sidebar">
        <div class="sidebar-section">
          <tf-categorizer
            id="categorizer"
            tags="[[_visibleTags]]"
            categories="{{categories}}"
          ></tf-categorizer>
          <paper-checkbox
            id="download-option"
            checked="{{_show_download_links}}"
          >Data download links</paper-checkbox>
        </div>
        <div class="sidebar-section">
          <tf-x-type-selector
            id="xTypeSelector"
            out-x-type="{{xType}}"
          ></tf-x-type-selector>
        </div>
        <div class="sidebar-section">
          <tf-run-selector
            id="runSelector"
            runs="[[runs]]"
            class-scale="[[classScale]]"
            out-selected="{{selectedRuns}}"
            tooltips="[[tooltipMap]]"
            closest-run="[[closestRun]]"
            x-value="[[tooltipXValue]]"
            x-type="[[xType]]"
          ></tf-run-selector>
        </div>
      </div>
      <div class="center">
        <tf-no-data-warning
          data-type="scalar"
          show-warning="[[dataNotFound]]"
        ></tf-no-data-warning>
        <template is="dom-repeat" items="[[categories]]">
          <tf-collapsable-pane name="[[item.name]]" count="[[item.tags.length]]">
            <div class="layout horizontal wrap">
              <template is="dom-repeat" items="[[item.tags]]" as="tag">
                <div class="card">
                  <span class="card-title">[[tag]]</span>
                  <div class="card-content">
                    <tf-chart
                      tag="[[tag]]"
                      data-provider="[[dataProvider]]"
                      type="scalar"
                      id="chart"
                      selected-runs="[[validRuns(tag, selectedRuns.*, run2tag.*)]]"
                      x-type="[[xType]]"
                      color-scale="[[colorScale]]"
                      on-keyup="toggleSelected"
                      tabindex="2"
                      tooltip-updater="[[tooltipUpdater]]"
                    ></tf-chart>
                    <paper-icon-button
                      class="expand-button"
                      shift$="[[_show_download_links]]"
                      icon="fullscreen"
                      on-tap="toggleSelected"
                    ></paper-icon-button>
                  </div>
                  <template is="dom-if" if="[[_show_download_links]]">
                    <div class="card-bottom-row">
                      <tf-downloader
                        selected-runs="[[selectedRuns]]"
                        tag="[[tag]]"
                        url-fn="[[scalarUrl]]"
                        run-to-tag="[[run2tag]]"
                      >
                      </tf-downloader>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </tf-collapsable-pane>
        </template>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>

  </template>

  <script>
    Polymer({
      is: "tf-event-dashboard",
      behaviors: [TF.Backend.Behavior],
      properties: {
        dataType: {value: "scalar"},
        router: Object,
        scalarUrl: {
          type: Function,
          computed: "_getScalarUrl(router)",
        },
        _visibleTags: {
          type: Array,
          computed: "_getVisibleTags(selectedRuns.*, run2tag.*)"
        },
        _show_download_links: Boolean,
      },
      attached: function() {
        this.async(function() {
          this.fire("rendered");
        });
      },
      observers: ['redraw(_show_download_links)'],
      redraw: function(_show_download_links) {
        var els = this.getElementsByTagName("tf-chart");
        for (var i=0; i<els.length; i++) {
          els[i].redraw();
        }
      },
      _getVisibleTags: function() {
        var keys = this.selectedRuns;
        var dict = this.run2tag;
        return _.union.apply(null, keys.map(function(k) {return dict[k]}));
      },
      _getScalarUrl: function() {
        return this.router.scalars;
      },
      toggleSelected: function(e) {
        var currentTarget = Polymer.dom(e.currentTarget);
        var parentDiv = currentTarget.parentNode.parentNode;
        parentDiv.classList.toggle("selected");
        var chart = currentTarget.previousElementSibling;
        if (chart) {
          chart.redraw();
        }
      },
      validRuns: function(tag, runsChange, run2tagChange) {
        var _this = this;
        var result = this.selectedRuns.filter(function(r) {
          return _this.run2tag[r] && _this.run2tag[r].indexOf(tag) !== -1;
        });
        return result;
      },
    });
  </script>
</dom-module>
