Add a way to identify which run by a border on the left of the card's name

This works for all dashboards that have only one run per card. Also, the ugly
image border on the image dashboard was removed.
Change: 132106109

7 files changed, 28 insertions, 10 deletions

diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-panes-helper.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-panes-helper.html
index 4e095e93f8..6c5d680f7b 100644
--- a/tensorflow/tensorboard/components/tf-dashboard-common/tf-panes-helper.html
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-panes-helper.html
@@ -69,10 +69,12 @@ downloadLinkUrlFunction property to an appropriate value.
         <div class="layout horizontal wrap">
           <template is="dom-repeat" items="[[_categoryCards(category, selectedRuns.*, run2tag.*)]]">
               <div class="card">
-                <span class="card-title">[[item.tag]]</span>
-                <template is="dom-if" if="[[repeatForRuns]]">
-                  <span class="card-subtitle">[[item.run]]</span>
-                </template>
+                <div class="card-title-container" style="border-color: [[_titleBorderColor(item.run)]]">
+                  <span class="card-title">[[item.tag]]</span>
+                  <template is="dom-if" if="[[repeatForRuns]]">
+                    <span class="card-subtitle">[[item.run]]</span>
+                  </template>
+                </div>
                 <div class="card-content">
                   <tf-chart-scaffold
                     tag="[[item.tag]]"
@@ -130,6 +132,10 @@ downloadLinkUrlFunction property to an appropriate value.
         overflow: hidden;
       }
 
+      .card-title {
+        display: block;
+      }
+
       .card-subtitle {
         font-size: 12px;
       }
@@ -152,6 +158,11 @@ downloadLinkUrlFunction property to an appropriate value.
         pointer-events: none;
       }
 
+      .card-title-container {
+        border-left: 4px solid;
+        padding-left: 5px;
+      }
+
       .expand-button {
         color: #2196F3;
         width: 32px;
@@ -184,6 +195,11 @@ downloadLinkUrlFunction property to an appropriate value.
         categories: Array,
 
         /**
+         * Input of the colors that are used for the user's runs.
+         */
+        colorScale: Object,
+
+        /**
          * The name of the data type that is used by this dashboard. This will
          * be used to display what is missing when there is no data available.
          */
@@ -309,6 +325,9 @@ downloadLinkUrlFunction property to an appropriate value.
 
         return cards;
       },
+      _titleBorderColor: function(run) {
+        return this.repeatForRuns ? this.colorScale.scale(run) : 'white';
+      },
 
       /*
        * Polymer data binding forwarding functions. Check the
diff --git a/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html b/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html
index e92586626e..6500271c87 100644
--- a/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html
@@ -78,6 +78,7 @@ contains tf-distribution-charts embedded inside tf-panes-helper's.
       <div class="center">
         <tf-panes-helper
           categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
           data-type="[[dataType]]"
           data-provider="[[dataProvider]]"
           run2tag="[[run2tag]]"
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
index e9b65744f1..9ebae5dfe6 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
@@ -108,6 +108,7 @@ contains vz-line-charts embedded inside tf-panes-helper's.
       <div class="center">
         <tf-panes-helper
           categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
           data-type="[[dataType]]"
           data-provider="[[dataProvider]]"
           run2tag="[[run2tag]]"
diff --git a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
index c50f0553ee..ff6d3fd68e 100644
--- a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
@@ -91,6 +91,7 @@ contains vz-histogram-timeseries embedded inside tf-panes-helper's.
       <div class="center">
         <tf-panes-helper
           categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
           data-type="[[dataType]]"
           data-provider="[[dataProvider]]"
           run2tag="[[run2tag]]"
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
index 8cfc3dd1a1..2f38f54c42 100644
--- a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
@@ -50,6 +50,7 @@ tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
       <div class="center">
         <tf-panes-helper
           categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
           data-type="[[dataType]]"
           data-provider="[[dataProvider]]"
           run2tag="[[run2tag]]"
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html
index 04ac3846f0..b2e86bc672 100644
--- a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html
@@ -41,7 +41,6 @@ future for loading older images.
 
       img {
         image-rendering: pixelated;
-        border: 2px solid;
         display: block;
         width: 100%;
         height: auto;
@@ -60,10 +59,6 @@ future for loading older images.
       },
       setSeriesData: function(run, data) {
         var last = _.last(data);
-
-        d3.select(this.$.img)
-          .style('border-color', this.colorScale.scale(run));
-
         this.redraw(last.url);
       },
       redraw: function(newUrl) {
diff --git a/tensorflow/tensorboard/components/vz-line-chart/vz-line-chart.html b/tensorflow/tensorboard/components/vz-line-chart/vz-line-chart.html
index 48a7723f82..0963d126e9 100644
--- a/tensorflow/tensorboard/components/vz-line-chart/vz-line-chart.html
+++ b/tensorflow/tensorboard/components/vz-line-chart/vz-line-chart.html
@@ -87,7 +87,7 @@ such as different X scales (linear and temporal), tooltips and smoothing.
         padding: 8px;
         z-index: 5;
         cursor: none;
-        margin-top: 5px;
+        margin-top: 10px;
       }
       .swatch {
         border-radius: 50%;