wit-inference-viewer.html

<!--
@license
Copyright 2018 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../iron-icons/iron-icons.html" />
<link rel="import" href="../tf-imports/polymer.html" />

<!-- Displays the results of inferences in the what-if tool side panel. -->
<dom-module id="wit-inference-viewer">
  <template>
    <style>
      :host {
        display: block;
      }
      .runs-holder {
        padding: 0;
        display: flex;
        flex-direction: column-reverse;
        overflow-y: auto;
        max-height: 200px;
      }
      .row {
        display: flex;
        color: #3c4043;
        font-size: 12px;
      }
      .header {
        color: #80868b;
        font-size: 12px;
        padding: 4px 0;
        border-bottom: solid 1px #dadce0;
        border-top: solid 1px #dadce0;
      }
      .dark-row-one {
        background: #cbf0f8;
      }
      .dark-row-two {
        background: #fff3e0;
      }
      .white-row {
        background: white;
      }
      .marker {
        flex: 0.5;
        margin-right: 5px;
      }
      .marker.mark-one {
        background: #007b83;
        padding-left: 1px;
      }
      .marker.mark-two {
        background: #ff9800;
        padding-left: 1px;
      }
      .run {
        flex: 10;
      }
      .multi-model {
        flex: 10;
      }
      .one-model {
        display: none;
      }
      .show-label {
        flex: 20;
        display: flex;
        overflow: hidden;
      }
      .no-label {
        display: none;
      }
      .score {
        flex: 10;
      }
      .arrow {
        flex: 2;
      }
      .delta {
        flex: 10;
      }
      .text {
        margin-top: 4px;
      }
      .green {
        color: green;
      }
      .red {
        color: red;
      }
    </style>
    <div class="row header">
      <div class="marker"></div>
      <div class="run">Run</div>
      <div class$="[[getModelHeaderClass(inferences)]]">Model</div>
      <div class$="[[getLabelHeaderClass(modelType)]]">Label</div>
      <div class="score">[[getScoreLabel(modelType)]]</div>
      <div class="arrow"></div>
      <div class="delta">Delta</div>
    </div>
    <div class="runs-holder">
      <template
        is="dom-repeat"
        items="[[inferences]]"
        as="modelsInference"
        index-as="runindex"
      >
        <div class="rows-for-run">
          <template
            is="dom-repeat"
            items="[[modelsInference]]"
            as="inference"
            index-as="modelindex"
          >
            <template
              is="dom-repeat"
              items="[[getInferenceList(inference, maxEntriesPerRun)]]"
            >
              <div class$="[[getRowClass(runindex, inferences, modelindex)]]">
                <div
                  class$="[[getMarkerClass(runindex, inferences, modelindex)]]"
                ></div>
                <div class="run text">[[getRunNumber(runindex)]]</div>
                <div class$="[[getModelClass(inferences)]]">
                  <div>[[getModelName(modelNames, modelindex)]]</div>
                </div>
                <div class$="[[getLabelClass(modelType)]]">
                  <div>[[getLabel(item)]]</div>
                </div>
                <div class="score text">[[getPrintableScore(item.score)]]</div>
                <div class="arrow">
                  <iron-icon
                    icon="[[getIcon(runindex, index, modelindex)]]"
                    class$="[[getIconClass(runindex, index, modelindex)]]"
                  >
                  </iron-icon>
                </div>
                <div class="delta text">
                  [[getPrintableDelta(runindex, index, modelindex)]]
                </div>
              </div>
            </template>
          </template>
        </div>
      </template>
    </div>
  </template>

  <script>
    Polymer({
      is: 'wit-inference-viewer',
      properties: {
        inferences: Array,
        // Possible modelType values currently 'regression and 'classification'.
        modelType: String,
        modelNames: Array,
        maxEntriesPerRun: {
          type: Number,
          value: 5,
        },
      },

      getLabel: function(item) {
        let label = item.label;
        if (item.vocabLabel) {
          label += ' (' + item.vocabLabel + ')';
        }
        return label;
      },

      getLabelClass: function(modelType) {
        return modelType == 'classification' ? 'show-label text' : 'no-label';
      },

      getLabelHeaderClass: function(modelType) {
        return modelType == 'classification' ? 'show-label' : 'no-label';
      },

      getModelClass: function(inferences) {
        return inferences && inferences[0].length > 1
          ? 'multi-model text'
          : 'one-model';
      },

      getModelHeaderClass: function(inferences) {
        return inferences && inferences[0].length > 1
          ? 'multi-model'
          : 'one-model';
      },

      getScoreLabel: function(modelType) {
        return modelType == 'classification' ? 'Score' : 'Value';
      },

      getIconClass: function(runIndex, labelIndex, modelIndex) {
        return this.getIconDecision(
          runIndex,
          labelIndex,
          modelIndex,
          'green',
          'red'
        );
      },

      getIcon: function(runIndex, labelIndex, modelIndex) {
        return this.getIconDecision(
          runIndex,
          labelIndex,
          modelIndex,
          'icons:arrow-upward',
          'icons:arrow-downward'
        );
      },

      /**
       * Returns upVal or downVal depending on if value from latest inference
       * is higher or lower than from previous inference.
       */
      getIconDecision: function(
        runIndex,
        labelIndex,
        modelIndex,
        upVal,
        downVal
      ) {
        // No up or down on first run.
        if (runIndex == 0) {
          return '';
        }
        const inferenceIndex = runIndex;
        const label = this.inferences[inferenceIndex][modelIndex][labelIndex]
          .label;
        const score = this.inferences[inferenceIndex][modelIndex][labelIndex]
          .score;
        const previousInference = this.inferences[inferenceIndex - 1][
          modelIndex
        ];
        for (let i = 0; i < previousInference.length; i++) {
          if (previousInference[i].label == label) {
            if (previousInference[i].score > score) {
              return downVal;
            }
            if (previousInference[i].score < score) {
              return upVal;
            }
            return '';
          }
        }
        return upVal;
      },

      getRunNumber: function(index) {
        return index + 1;
      },

      getModelName: function(names, index) {
        return names[index];
      },

      getMarkerClass: function(index, inferences, modelIndex) {
        return (
          'marker' +
          (inferences != null && index == inferences.length - 1
            ? modelIndex == 0
              ? ' mark-one'
              : ' mark-two'
            : '')
        );
      },

      getRowClass: function(index, inferences, modelIndex) {
        let str = 'row ';
        if (inferences != null && index == inferences.length - 1) {
          str += modelIndex == 0 ? 'dark-row-one' : 'dark-row-two';
        } else {
          str += 'white-row';
        }
        return str;
      },

      getInference: function(inference, index) {
        return inference;
      },

      getPrintableScore: function(score) {
        return score.toFixed(3);
      },

      getPrintableDelta: function(runIndex, labelIndex, modelIndex) {
        if (runIndex == 0) {
          return '';
        }
        const inferenceIndex = runIndex;
        const label = this.inferences[inferenceIndex][modelIndex][labelIndex]
          .label;
        const score = this.inferences[inferenceIndex][modelIndex][labelIndex]
          .score;
        const previousInference = this.inferences[inferenceIndex - 1][
          modelIndex
        ];
        for (let i = 0; i < previousInference.length; i++) {
          if (previousInference[i].label == label) {
            return (score - previousInference[i].score).toFixed(6);
          }
        }
        return '';
      },

      getInferenceList: function(inferenceList, maxEntries) {
        return inferenceList.slice(0, maxEntries);
      },
    });
  </script>
</dom-module>