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

Some early users of margin plots noticed a bug. If data associated with
a tag for any run was missing, an error message appeared noting that
data was missing for that tag. The error message gave no indication of
which runs were missing information. Sometimes, the behavior is
intended. For instance, some run might not log a certain scalar value.

This change now offers users a more nuanced message when margin plot
logic is missing information for certain tags within a run. The message
notes specific runs and then lists the specific tags without data for
those runs. The message is placed under a collapsible so that the user
can chose to not see the message if the behavior is intended. Messages
are only shown if a run is missing data for some but not all tags.

Author: chihuahua

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>