Merge pull request #1 from tensorflow/master

Let user know which tags are missing per run (tensorflow#967)

Author: brianwa84

tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-margin-chart-card.html

@@ -99,31 +99,47 @@ <h1>[[_titleDisplayString]]</h1>
     </template>
   </div>
 
-  <template is="dom-if" if="[[_tagsWithNoData]]">
-    <div id="error-content">
-      <iron-icon class="error-icon" icon="icons:error"></iron-icon>
-      No data found for these tags:
-      <ul>
-        <template is="dom-repeat" items="[[_tagsWithNoData]]">
-          <li>[[item]]</li>
-        </template>
-      </ul>
-      <br>
-      Tags for the value, lower, and upper bounds of margin charts in the Layout
-      proto must match tags in the SCALARS dashboard.
+  <!-- here -->
+  <template is="dom-if" if="[[_missingTags.length]]">
+    <div class="collapsible-list-title">
+      <paper-icon-button
+          icon="[[_getToggleCollapsibleIcon(_missingTagsCollapsibleOpened)]]"
+          on-click="_toggleMissingTagsCollapsibleOpen"
+          class="toggle-collapsible-button">
+      </paper-icon-button>
+      <span class="collapsible-title-text">
+        <iron-icon icon="icons:error"></iron-icon> Missing Tags
+      </span>
     </div>
+    <iron-collapse opened="[[_missingTagsCollapsibleOpened]]">
+      <div class="error-content">
+        <iron-icon class="error-icon" icon="icons:error"></iron-icon>
+        <template is="dom-repeat"
+                  items="[[_missingTags]]"
+                  as="missingEntry">
+          <div class="missing-tags-for-run-container">
+            Run "[[missingEntry.run]]" lacks data for tags
+            <ul>
+              <template is="dom-repeat" items="[[missingEntry.tags]]" as="tag">
+                <li>[[tag]]</li>
+              </template>
+            </ul>
+          </div>
+        </template>
+      </div>
+    </iron-collapse>
   </template>
 
   <template is="dom-if" if="[[_tagFilterInvalid]]">
-    <div id="error-content">
+    <div class="error-content">
       <iron-icon class="error-icon" icon="icons:error"></iron-icon>
       This regular expresion is invalid:<br>
       <span class="invalid-regex">[[_tagFilter]]</span>
     </div>
   </template>
 
   <template is="dom-if" if="[[_stepsMismatch]]">
-    <div id="error-content">
+    <div class="error-content">
       <iron-icon class="error-icon" icon="icons:error"></iron-icon>
       The steps for value, lower, and upper tags do not match:
       <ul>
@@ -144,16 +160,16 @@ <h1>[[_titleDisplayString]]</h1>
   </template>
 
   <div id="matches-container">
-    <div id="matches-list-title">
+    <div class="collapsible-list-title">
       <template is="dom-if" if="[[_dataSeriesStrings.length]]">
         <paper-icon-button
-          icon="[[_getToggleMatchesIcon(_matchesListOpened)]]"
+          icon="[[_getToggleCollapsibleIcon(_matchesListOpened)]]"
           on-click="_toggleMatchesOpen"
           class="toggle-matches-button">
         </paper-icon-button>
       </template>
 
-      <span class="matches-text">
+      <span class="collapsible-title-text">
         Matches ([[_dataSeriesStrings.length]])
       </span>
     </div>
@@ -179,7 +195,7 @@ <h1>[[_titleDisplayString]]</h1>
   </div>
   <style include="tf-custom-scalar-card-style"></style>
   <style>
-    #error-content {
+    .error-content {
       background: #f00;
       border-radius: 5px;
       color: #fff;
@@ -197,7 +213,7 @@ <h1>[[_titleDisplayString]]</h1>
       font-weight: bold;
     }
 
-    #error-content ul {
+    .error-content ul {
       margin: 1px 0 0 0;
       padding: 0 0 0 19px;
     }
@@ -206,10 +222,14 @@ <h1>[[_titleDisplayString]]</h1>
       font-weight: bold;
     }
 
-    #matches-list-title {
+    .collapsible-list-title {
       margin: 10px 0 5px 0;
     }
 
+    .collapsible-title-text {
+      vertical-align: middle;
+    }
+
     #matches-list {
       font-size: 0.8em;
       max-height: 200px;
@@ -226,8 +246,8 @@ <h1>[[_titleDisplayString]]</h1>
       width: 10px;
     }
 
-    .matches-text {
-      vertical-align: middle;
+    .missing-tags-for-run-container {
+      margin: 8px 0 0 0;
     }
   </style>
 </template>
@@ -381,7 +401,22 @@ <h1>[[_titleDisplayString]]</h1>
             ];
           }
         },
-        _tagsWithNoData: String,
+        /**
+         * A list of objects encapsulating missing tags. Each object within this
+         * list has the following properties:
+         * run: A string denoting the relevant run.
+         * tags: A non-empty list of tags (strings) missing for that run.
+         * A run only has an entry in this list if some (but not all) of its 3
+         * tags (value, lower, upper) are missing.
+         */
+        _missingTags: {
+          type: Array,
+          value: [],
+        },
+        _missingTagsCollapsibleOpened: {
+          type: Boolean,
+          value: false,
+        },
         /**
          * This field is only set if data retrieved from the server exhibits a
          * step mismatch: if the lists of values, lower bounds, and upper bounds
@@ -517,13 +552,28 @@ <h1>[[_titleDisplayString]]</h1>
                   run, tagsObject.value, seriesName, dataPoints);
             }
           });
+          this.set('_nameToDataSeries', newMapping);
 
-          if (tagsNotFound.length) {
-            // At least 1 tag could not be found. Show an error message.
-            this.set('_tagsWithNoData', tagsNotFound);
+          const entryIndex = _.findIndex(this._missingTags, (entry) => {
+            return entry.run === run;
+          });
+          if (tagsNotFound.length && tagsNotFound.length != 3) {
+            // Some but not all tags were found. Show a warning message.
+            const entry = {
+              run: run,
+              tags: tagsNotFound,
+            };
+            if (entryIndex >= 0) {
+              // Remove the previous entry. Insert the new one.
+              this.splice('_missingTags', entryIndex, 1, entry);
+            } else {
+              // Insert a new entry.
+              this.push('_missingTags', entry);
+            }
+          } else if (entryIndex >= 0) {
+            // Remove the previous entry if it exists.
+            this.splice('_missingTags', entryIndex, 1);
           }
-
-          this.set('_nameToDataSeries', newMapping);
         });
       },
       _findStepMismatch(tagsObject, valueSteps, lowerSteps, upperSteps) {
@@ -606,8 +656,8 @@ <h1>[[_titleDisplayString]]</h1>
       _escapeRegexCharacters(stringValue) {
         return stringValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
       },
-      _getToggleMatchesIcon(matchesListOpened) {
-        return matchesListOpened ? 'expand-less' : 'expand-more';
+      _getToggleCollapsibleIcon(listOpened) {
+        return listOpened ? 'expand-less' : 'expand-more';
       },
       _toggleMatchesOpen() {
         this.set('_matchesListOpened', !this._matchesListOpened);
@@ -620,6 +670,11 @@ <h1>[[_titleDisplayString]]</h1>
       _separateWithCommas(numbers) {
         return numbers.join(', ');
       },
+      _toggleMissingTagsCollapsibleOpen() {
+        this.set(
+            '_missingTagsCollapsibleOpened',
+            !this._missingTagsCollapsibleOpened);
+      },
   });
 </script>
 </dom-module>