Only open first two panes by default

This will prevent TensorBoard from using too many resources for anyone with a
large number of tags. In the near future we might want to solve this in a
smarter way, possibly by not rendering things outside the viewport.

See also #728

Author: jart

Diff for: tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html

@@ -72,7 +72,7 @@ <h3>No audio data was found.</h3>
             <iron-icon prefix icon="search"></iron-icon>
           </paper-input>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]">
+            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -160,6 +160,10 @@ <h3>No audio data was found.</h3>
         });
       },
 
+      _shouldOpen(index) {
+        return index <= 2;
+      },
+
       _makeCategories(runToTagInfo, selectedRuns, tagFilter) {
         const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
         const baseCategories =

Diff for: tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-dashboard.html

@@ -84,7 +84,7 @@ <h3>No distribution data was found.</h3>
         <template is="dom-if" if="[[!_dataNotFound]]">
           <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]">
+            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -184,6 +184,10 @@ <h3>No distribution data was found.</h3>
         });
       },
 
+      _shouldOpen(index) {
+        return index <= 2;
+      },
+
       _makeCategories(runToTag, selectedRuns, tagFilter, categoriesDomReady) {
         return tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
       },

Diff for: tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html

@@ -91,7 +91,7 @@ <h3>No histogram data was found.</h3>
         <template is="dom-if" if="[[!_dataNotFound]]">
           <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]">
+            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -197,6 +197,10 @@ <h3>No histogram data was found.</h3>
         });
       },
 
+      _shouldOpen(index) {
+        return index <= 2;
+      },
+
       _makeCategories(runToTag, selectedRuns, tagFilter, categoriesDomReady) {
         return tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
       },

Diff for: tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html

@@ -115,7 +115,7 @@ <h3>No image data was found.</h3>
         <template is="dom-if" if="[[!_dataNotFound]]">
           <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]">
+            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -270,6 +270,10 @@ <h3>No image data was found.</h3>
         });
       },
 
+      _shouldOpen(index) {
+        return index <= 2;
+      },
+
       _resetBrightness() {
         this._brightnessAdjustment = this._defaultBrightnessAdjustment;
       },

Diff for: tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard.html

@@ -92,7 +92,7 @@ <h3>No precision–recall curve data was found.</h3>
         <template is="dom-if" if="[[!_dataNotFound]]">
           <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]">
+            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -194,6 +194,9 @@ <h3>No precision–recall curve data was found.</h3>
         this._reloadCards();
       });
     },
+    _shouldOpen(index) {
+      return index <= 2;
+    },
     _fetchTags() {
       const url = tf_backend.getRouter().pluginRoute('pr_curves', '/tags');
       return this._requestManager.request(url).then(runToTagInfo => {

Diff for: tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html

@@ -121,7 +121,7 @@ <h3>No scalar data was found.</h3>
         <template is="dom-if" if="[[!_dataNotFound]]">
           <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]">
+            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -245,6 +245,10 @@ <h3>No scalar data was found.</h3>
         return _smoothingWeight > 0;
       },
 
+      _shouldOpen(index) {
+        return index <= 2;
+      },
+
       ready() {
         this.reload();
       },

Diff for: tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html

@@ -64,7 +64,7 @@ <h3>No text data was found.</h3>
         <template is="dom-if" if="[[!_dataNotFound]]">
           <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]">
+            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -128,6 +128,9 @@ <h3>No text data was found.</h3>
           this._reloadTexts();
         });
       },
+      _shouldOpen(index) {
+        return index <= 2;
+      },
       _fetchTags() {
         const url = tf_backend.getRouter().pluginRoute('text', '/tags');
         return this._requestManager.request(url).then(runToTag => {