Use paginated views in all dashboards (#172)

Test Plan: Run `git grep -A 4 '<tf-collapsable-pane'` and note that each non-demo occurrence of a collapsable-pane immediately wraps a paginated-view. wchargin-branch: pagination-everywhere
tensorflow · Jul 5, 2017 · d0b3304 · d0b3304
1 parent 8e19b0a
commit d0b3304
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 52 deletions.
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/BUILD b/tensorboard/plugins/audio/tf_audio_dashboard/BUILD
@@ -17,11 +17,12 @@ ts_web_library(
         "//tensorboard/components/tf_card_heading",
         "//tensorboard/components/tf_categorization_utils",
         "//tensorboard/components/tf_color_scale",
-        "//tensorboard/components/tf_runs_selector",
         "//tensorboard/components/tf_dashboard_common",
         "//tensorboard/components/tf_imports:d3",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:polymer",
+        "//tensorboard/components/tf_paginated_view",
+        "//tensorboard/components/tf_runs_selector",
         "@org_polymer_paper_icon_button",
         "@org_polymer_paper_slider",
         "@org_polymer_paper_spinner",

diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html
@@ -21,6 +21,7 @@
 <link rel="import" href="../tf-dashboard-common/dashboard-style.html">
 <link rel="import" href="../tf-dashboard-common/tf-collapsable-pane.html">
 <link rel="import" href="../tf-dashboard-common/tf-dashboard-layout.html">
+<link rel="import" href="../tf-paginated-view/tf-paginated-view.html">
 <link rel="import" href="../tf-runs-selector/tf-runs-selector.html">
 <link rel="import" href="tf-audio-loader.html">
 
@@ -67,19 +68,24 @@ <h3>No audio data was found.</h3>
             name="[[category.name]]"
             count="[[category.count]]"
           >
-            <div class="layout horizontal wrap">
-              <template
-                is="dom-repeat"
-                items="[[category.items]]"
-              >
-                <tf-audio-loader
-                  run="[[item.run]]"
-                  tag="[[item.tag]]"
-                  request-manager="[[_requestManager]]"
-                  show-actual-size="[[_showActualSize]]"
-                ></tf-audio-loader>
+            <tf-paginated-view
+              items="[[category.items]]"
+              pages="{{category._pages}}"
+            >
+              <template is="dom-repeat" items="[[category._pages]]" as="page">
+                <template is="dom-if" if="[[page.active]]">
+                  <div class="layout horizontal wrap">
+                    <template is="dom-repeat" items="[[page.items]]">
+                      <tf-audio-loader
+                        run="[[item.run]]"
+                        tag="[[item.tag]]"
+                        request-manager="[[_requestManager]]"
+                        show-actual-size="[[_showActualSize]]"
+                      ></tf-audio-loader>
+                  </div>
+                </template>
               </template>
-            </div>
+            </tf-paginated-view>
           </tf-collapsable-pane>
         </template>
       </div>

diff --git a/tensorboard/plugins/distribution/tf_distribution_dashboard/BUILD b/tensorboard/plugins/distribution/tf_distribution_dashboard/BUILD
@@ -19,6 +19,7 @@ ts_web_library(
         "//tensorboard/components/tf_dashboard_common",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:polymer",
+        "//tensorboard/components/tf_paginated_view",
         "//tensorboard/components/tf_runs_selector",
         "//tensorboard/plugins/distribution/vz_distribution_chart",
         "@org_polymer_iron_collapse",

diff --git a/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-dashboard.html b/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-dashboard.html
@@ -25,6 +25,7 @@
 <link rel="import" href="../tf-dashboard-common/tf-option-selector.html">
 <link rel="import" href="../tf-dashboard-common/tf-regex-group.html">
 <link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../tf-paginated-view/tf-paginated-view.html">
 <link rel="import" href="../tf-runs-selector/tf-runs-selector.html">
 <link rel="import" href="tf-distribution-loader.html">
 
@@ -90,16 +91,25 @@ <h3>No distribution data was found.</h3>
             name="[[category.name]]"
             count="[[category.count]]"
           >
-            <div class="layout horizontal wrap">
-              <template is="dom-repeat" items="[[category.items]]">
-                <tf-distribution-loader
-                  run="[[item.run]]"
-                  tag="[[item.tag]]"
-                  x-type="[[_xType]]"
-                  request-manager="[[_requestManager]]"
-                ></tf-distribution-loader>
+            <tf-paginated-view
+              items="[[category.items]]"
+              pages="{{category._pages}}"
+            >
+              <template is="dom-repeat" items="[[category._pages]]" as="page">
+                <template is="dom-if" if="[[page.active]]">
+                  <div class="layout horizontal wrap">
+                    <template is="dom-repeat" items="[[page.items]]">
+                      <tf-distribution-loader
+                        run="[[item.run]]"
+                        tag="[[item.tag]]"
+                        x-type="[[_xType]]"
+                        request-manager="[[_requestManager]]"
+                      ></tf-distribution-loader>
+                    </template>
+                  </div>
+                </template>
               </template>
-            </div>
+            </tf-paginated-view>
           </tf-collapsable-pane>
         </template>
       </div>

diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/BUILD b/tensorboard/plugins/histogram/tf_histogram_dashboard/BUILD
@@ -21,6 +21,7 @@ ts_web_library(
         "//tensorboard/components/tf_imports:d3",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:polymer",
+        "//tensorboard/components/tf_paginated_view",
         "//tensorboard/components/tf_runs_selector",
         "//tensorboard/plugins/histogram/vz_histogram_timeseries",
         "@org_polymer_iron_collapse",

diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html b/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html
@@ -24,6 +24,7 @@
 <link rel="import" href="../tf-dashboard-common/tf-dashboard-layout.html">
 <link rel="import" href="../tf-dashboard-common/tf-option-selector.html">
 <link rel="import" href="../tf-dashboard-common/tf-regex-group.html">
+<link rel="import" href="../tf-paginated-view/tf-paginated-view.html">
 <link rel="import" href="../tf-runs-selector/tf-runs-selector.html">
 <link rel="import" href="tf-histogram-loader.html">
 
@@ -97,17 +98,26 @@ <h3>No histogram data was found.</h3>
             name="[[category.name]]"
             count="[[category.count]]"
           >
-            <div class="layout horizontal wrap">
-              <template is="dom-repeat" items="[[category.items]]">
-                <tf-histogram-loader
-                  run="[[item.run]]"
-                  tag="[[item.tag]]"
-                  time-property="[[_timeProperty]]"
-                  histogram-mode="[[_histogramMode]]"
-                  request-manager="[[_requestManager]]"
-                  ></tf-histogram-loader>
+            <tf-paginated-view
+              items="[[category.items]]"
+              pages="{{category._pages}}"
+            >
+              <template is="dom-repeat" items="[[category._pages]]" as="page">
+                <template is="dom-if" if="[[page.active]]">
+                  <div class="layout horizontal wrap">
+                    <template is="dom-repeat" items="[[page.items]]">
+                      <tf-histogram-loader
+                        run="[[item.run]]"
+                        tag="[[item.tag]]"
+                        time-property="[[_timeProperty]]"
+                        histogram-mode="[[_histogramMode]]"
+                        request-manager="[[_requestManager]]"
+                        ></tf-histogram-loader>
+                    </template>
+                  </div>
+                </template>
               </template>
-            </div>
+            </tf-paginated-view>
           </tf-collapsable-pane>
         </template>
       </div>

diff --git a/tensorboard/plugins/image/tf_image_dashboard/BUILD b/tensorboard/plugins/image/tf_image_dashboard/BUILD
@@ -20,6 +20,7 @@ ts_web_library(
         "//tensorboard/components/tf_imports:d3",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:polymer",
+        "//tensorboard/components/tf_paginated_view",
         "//tensorboard/components/tf_runs_selector",
         "@org_polymer_paper_dialog",
         "@org_polymer_paper_icon_button",

diff --git a/tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html b/tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html
@@ -23,6 +23,7 @@
 <link rel="import" href="../tf-dashboard-common/tf-collapsable-pane.html">
 <link rel="import" href="../tf-dashboard-common/tf-dashboard-layout.html">
 <link rel="import" href="../tf-dashboard-common/tf-regex-group.html">
+<link rel="import" href="../tf-paginated-view/tf-paginated-view.html">
 <link rel="import" href="../tf-runs-selector/tf-runs-selector.html">
 <link rel="import" href="tf-image-loader.html">
 
@@ -71,19 +72,25 @@ <h3>No image data was found.</h3>
             name="[[category.name]]"
             count="[[category.count]]"
           >
-            <div class="layout horizontal wrap">
-              <template
-                is="dom-repeat"
-                items="[[category.items]]"
-              >
-                <tf-image-loader
-                  run="[[item.run]]"
-                  tag="[[item.tag]]"
-                  request-manager="[[_requestManager]]"
-                  show-actual-size="[[_showActualSize]]"
-                ></tf-image-loader>
+            <tf-paginated-view
+              items="[[category.items]]"
+              pages="{{category._pages}}"
+            >
+              <template is="dom-repeat" items="[[category._pages]]" as="page">
+                <template is="dom-if" if="[[page.active]]">
+                  <div class="layout horizontal wrap">
+                    <template is="dom-repeat" items="[[page.items]]">
+                      <tf-image-loader
+                        run="[[item.run]]"
+                        tag="[[item.tag]]"
+                        request-manager="[[_requestManager]]"
+                        show-actual-size="[[_showActualSize]]"
+                      ></tf-image-loader>
+                    </template>
+                  </div>
+                </template>
               </template>
-            </div>
+            </tf-paginated-view>
           </tf-collapsable-pane>
         </template>
       </div>

diff --git a/tensorboard/plugins/text/tf_text_dashboard/BUILD b/tensorboard/plugins/text/tf_text_dashboard/BUILD
@@ -20,6 +20,7 @@ ts_web_library(
         "//tensorboard/components/tf_imports:d3",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:polymer",
+        "//tensorboard/components/tf_paginated_view",
         "//tensorboard/components/tf_runs_selector",
         "@org_polymer_paper_dialog",
         "@org_polymer_paper_icon_button",

diff --git a/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html b/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html
@@ -22,6 +22,7 @@
 <link rel="import" href="../tf-dashboard-common/tf-collapsable-pane.html">
 <link rel="import" href="../tf-dashboard-common/tf-dashboard-layout.html">
 <link rel="import" href="../tf-dashboard-common/tf-regex-group.html">
+<link rel="import" href="../tf-paginated-view/tf-paginated-view.html">
 <link rel="import" href="../tf-runs-selector/tf-runs-selector.html">
 <link rel="import" href="tf-text-loader.html">
 
@@ -70,15 +71,24 @@ <h3>No text data was found.</h3>
             name="[[category.name]]"
             count="[[category.count]]"
           >
-            <div class="layout horizontal wrap">
-              <template is="dom-repeat" items="[[category.items]]">
-                <tf-text-loader
-                  tag="[[item.tag]]"
-                  run="[[item.run]]"
-                  request-manager="[[_requestManager]]"
-                ></tf-text-loader>
+            <tf-paginated-view
+              items="[[category.items]]"
+              pages="{{category._pages}}"
+            >
+              <template is="dom-repeat" items="[[category._pages]]" as="page">
+                <template is="dom-if" if="[[page.active]]">
+                  <div class="layout horizontal wrap">
+                    <template is="dom-repeat" items="[[page.items]]">
+                      <tf-text-loader
+                        tag="[[item.tag]]"
+                        run="[[item.run]]"
+                        request-manager="[[_requestManager]]"
+                      ></tf-text-loader>
+                    </template>
+                  </div>
+                </template>
               </template>
-            </div>
+            </tf-paginated-view>
           </tf-collapsable-pane>
         </template>
       </div>