ct_pixel_diff/frontend/res/imp/diff-details-sk.html

<!--
  The <diff-details-sk> custom element declaration.

  Displays the details about a diff result, which includes website information,
  the nopatch image, withpatch image, diff image, and calculated diff metrics.

  Attributes:
    url - The url of the web page that was screenshotted.
    rank - The site popularity rank of the web page.
    left - The nopatch screenshot of the page.
    right - The withpatch screenshot of the page.
    diffmetrics - The serialized DynamicDiffMetrics object that contains the
                  values of the diff results between the two screenshots.
    index - The index of the diff details on the results page.

  Methods:
    None

  Events:
    None
-->

<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/iron-icon/iron-icon.html">

<link rel="import" href="/res/imp/shared-styles.html">

<dom-module id="diff-details-sk">
  <template>
    <style include="iron-flex iron-flex-alignment shared-styles" >
      .preview {
        margin: 5px;
        border: solid 2px lightgray;
        display: block;
        width: 400px;
        height: 287px;
      }

      .preview img {
        display: block;
        max-width: 400px;
        max-height: 287px;
        width: auto;
        height: auto;
      }

      .imgtext {
        padding-left: 0.5em;
        font-weight: bold;
      }

      table {
        border: 0px;
        border-spacing: 5px;
        table-layout: fixed;
      }

      tr:nth-child(even) {
        background-color: #f2f2f2;
      }

      th {
        text-align: left;
        padding: 5px;
      }

      td {
        width: 200px;
        padding: 5px;
      }

      h1 {
        padding-left: 0.5em;
      }
    </style>
    <div class="horizontal layout wrap">
      <div class="vertical layout wrap">
        <div hidden$="{{_noIndex(index)}}">
          <h1>Result Number: [[_addOne(index)]]</h1>
        </div>
        <table>
          <tr><th>Website Information</th><th></th></tr>
          <tr><td>URL</td><td><a target="_blank" href$="[[url]]">[[url]]</a></td></tr>
          <tr><td>Popularity Rank</td><td>[[rank]]</td></tr>
        </table>
      </div>
      <div class="vertical layout wrap">
        <div class="horizontal layout wrap">
          <div class="imgtext">Without Patch Image</div>
          <a target="_blank" rel="noopener" href$="[[_imageHref(left)]]"><iron-icon icon="open-in-new"></iron-icon></a>
        </div>
        <div class="preview">
          <img src$="[[_imageHref(left)]]">
        </div>
      </div>
      <div class="vertical layout wrap">
        <div class="horizontal layout wrap">
          <div class="imgtext">With Patch Image</div>
          <a target="_blank" rel="noopener" href$="[[_imageHref(right)]]"><iron-icon icon="open-in-new"></iron-icon></a>
        </div>
        <div class="preview">
          <img src$="[[_imageHref(right)]]">
        </div>
      </div>
      <div class="vertical layout wrap">
        <div class="horizontal layout wrap">
          <div class="imgtext">Diff Image</div>
          <a target="_blank" rel="noopener" href$="[[_diffImageHref(left, right)]]"><iron-icon icon="open-in-new"></iron-icon></a>
        </div>
        <div class="preview">
          <img src$="[[_diffImageHref(left, right)]]">
        </div>
      </div>
      <table>
        <tr><th>Diff Metric</th><th>Value</th></tr>
        <tr><td>Percentage of Different Pixels</td><td>[[diffmetrics.pixelDiffPercent]]</td></tr>
        <tr><td>Number of Different Pixels</td><td>[[diffmetrics.numDiffPixels]]</td></tr>
        <tr><td>Max Red Difference</td><td>[[diffmetrics.maxRGBDiffs.0]]</td></tr>
        <tr><td>Max Green Difference</td><td>[[diffmetrics.maxRGBDiffs.1]]</td></tr>
        <tr><td>Max Blue Difference</td><td>[[diffmetrics.maxRGBDiffs.2]]</td></tr>
        <tr><td>Number of Static Pixels</td><td>[[diffmetrics.numStaticPixels]]</td></tr>
        <tr><td>Number of Dynamic Pixels</td><td>[[diffmetrics.numDynamicPixels]]</td></tr>
      </table>
    </div>
  </template>
  <script>
    Polymer({
      is: 'diff-details-sk',

      properties: {
        url: {
          type: String,
          value: ""
        },

        rank: {
          type: Number,
          value: 0
        },

        left: {
          type: String,
          value: ""
        },

        right: {
          type: String,
          value: ""
        },

        diffmetrics: {
          type: Object,
          value: null
        },

        index: {
          type: Number,
          value: -1
        }
      },

      _imageHref: function(image) {
        if (image != "") {
          return '/img/images/' + image + '.png'
        }
      },

      // Returns the local file path for the diff image by first verifying that
      // the runID and  URL filename for the nopatch and withpatch images are
      // the same, then constructing the path in the same fashion as the
      // PixelDiffIDPathMapper in DiffStore.
      // Example:
      //   left: lchoi-20170717123456/nopatch/1/http___www_google_com
      //   right: lchoi-20170717123456/withpatch/1/http___www_google_com
      //   output: /img/diffs/lchoi-20170717123456/http___www_google_com.png
      _diffImageHref: function(left, right) {
        var leftPath = left.split("/");
        var rightPath = right.split("/");
        if (leftPath[0] == rightPath[0] && leftPath[3] == rightPath[3]) {
          return '/img/diffs/' + leftPath[0] + '/' + leftPath[3] + '.png'
        }
      },

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

      _noIndex: function(index) {
        return index < 0;
      }
    })
  </script>
</dom-module>