scalars: use tf-downloader for download links

tensorboard/components/tf_dashboard_common/tf-downloader.html

@@ -33,27 +33,20 @@
         </template>
       </paper-menu>
     </paper-dropdown-menu>
-    <div class="center">
-      <span>
-        <a
-          download="[[_csvName(tag, _run)]]"
-          href="[[_csvUrl(tag, _run, urlFn)]]"
-          >CSV</a>
-        <a
-          download="[[_jsonName(tag, _run)]]"
-          href="[[_jsonUrl(tag, _run, urlFn)]]"
-          >JSON</a>
-      </span>
-    </div>
+    <a
+      download="[[_csvName(tag, _run)]]"
+      href="[[_csvUrl(tag, _run, urlFn)]]"
+    >CSV</a><!--
+    --><a
+      download="[[_jsonName(tag, _run)]]"
+      href="[[_jsonUrl(tag, _run, urlFn)]]"
+    >JSON</a>
     <style>
       :host {
         display: flex;
+        align-items: center;
         height: 32px;
       }
-      .center {
-        display: flex;
-        align-self: center;
-      }
       paper-dropdown-menu {
         width: 100px;
         --paper-input-container-label: {
@@ -65,8 +58,7 @@
       }
       a {
         font-size: 10px;
-        border-radius: 3px;
-        border: 1px solid #EEE;
+        margin: 0 0.2em;
       }
       paper-input {
         font-size: 22px;
@@ -78,8 +70,13 @@
       is: "tf-downloader",
       properties: {
         _run: String,
-        runs: Array,
+        runs: Array,  // Array<string>
         tag: String,
+        // Clients pass `urlFn: (tag: string, run: string) => string`,
+        // which should generate a URL to download data for a given
+        // run/tag combination. The data at the URL should be in JSON
+        // form, and the URL should be such that adding a query
+        // parameter `format=csv` instead yields CSV data.
         urlFn: Function,
       },
       _csvUrl(tag, run, urlFn) {
@@ -89,10 +86,10 @@
         return urlFn(tag, run);
       },
       _csvName(tag, run) {
-        return `run_${run},tag_${tag}.csv`;
+        return `run-${run}-tag-${tag}.csv`;
       },
       _jsonName(tag, run) {
-        return `run_${run},tag_${tag}.json`;
+        return `run-${run}-tag-${tag}.json`;
       },
     });
   </script>

tensorboard/plugins/scalar/tf_scalar_dashboard/BUILD

@@ -50,6 +50,7 @@ tf_web_library(
     deps = [
         "//tensorboard/components/tf_backend",
         "//tensorboard/components/tf_card_heading",
+        "//tensorboard/components/tf_dashboard_common",
         "//tensorboard/components/tf_imports:polymer",
         "//tensorboard/components/tf_line_chart_data_loader",
         "@org_polymer_paper_dropdown_menu",

tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html

@@ -25,6 +25,7 @@
 <link rel="import" href="../tf-backend/tf-backend.html">
 <link rel="import" href="../tf-line-chart-data-loader/tf-line-chart-data-loader.html">
 <link rel="import" href="../tf-card-heading/tf-card-heading.html">
+<link rel="import" href="../tf-dashboard-common/tf-downloader.html">
 
 <!--
   A card that handles loading data (at the right times), rendering a scalar
@@ -97,24 +98,11 @@
     <span style="flex-grow: 1"></span>
     <template is="dom-if" if="[[showDownloadLinks]]">
       <div class="download-links">
-        <paper-dropdown-menu
-          no-label-float="true"
-          label="run to download"
-          selected-item-label="{{_runToDownload}}"
-        >
-          <paper-menu class="dropdown-content" slot="dropdown-content">
-            <template is="dom-repeat" items="[[dataToLoad]]">
-              <paper-item no-label-float=true>[[item.run]]</paper-item>
-            </template>
-          </paper-menu>
-        </paper-dropdown-menu>
-        <a
-          download="run_[[_runToDownload]]-tag-[[tag]].csv"
-          href="[[_csvUrl(tag, _runToDownload)]]"
-        >CSV</a> <a
-          download="run_[[_runToDownload]]-tag-[[tag]].json"
-          href="[[_jsonUrl(tag, _runToDownload)]]"
-        >JSON</a>
+        <tf-downloader
+          runs="[[_runsFromData(dataToLoad)]]"
+          tag="[[tag]]"
+          url-fn="[[_downloadUrlFn]]"
+        ></tf-downloader>
       </div>
     </template>
   </div>
@@ -258,6 +246,14 @@
           },
         },
 
+        // To be provided as the `url-fn` property to `tf-downloader`.
+        _downloadUrlFn: {
+          type: Function,
+          value: function() {
+            return (tag, run) => this.getDataLoadUrl({tag, run});
+          },
+        },
+
         // A function called to fetch the scalars data from the backend.
         // Should receive a {tag, run, experiment} object and return
         // a promise resolving with the fetched scalars. The default
@@ -323,13 +319,8 @@
         // is okay.
         this.$$('#svgLink').href = `data:image/svg+xml;base64,${btoa(svgStr)}`;
       },
-      _csvUrl(tag, run) {
-        return tf_backend.addParams(
-            this.getDataLoadUrl({tag, run}),
-            {format: 'csv'});
-      },
-      _jsonUrl(tag, run) {
-        return this.getDataLoadUrl({tag, run});
+      _runsFromData(data) {
+        return data.map((datum) => datum.run);
       },
       _getDataSeries() {
         return this.dataToLoad.map(d => this._getSeriesNameFromDatum(d));