Use addParams where it would improve code

Summary:
This commit replaces uses like `base + "?things"` (when `base` is not
known to not already contain a query component), or that fail to call
`encodeURIComponent` on the `things`, with uses of `addParams`.

I generated this commit by running `git grep '[&?].*='` and
investigating each occurrence. I ignored all occurrences in the graph
and projector plugins, as they have their own mini-ecosystems. I also
ignored the unique occurrence in the profile plugin, because (a) I can’t
test it, and (b) its inputs are hard-coded such that this change
provably would not fix any bugs.

Test Plan:
I verified the behavior of all existing plugins.

wchargin-branch: use-add-params

Author: wchargin

tensorboard/components/tf_dashboard_common/tf-downloader.html

@@ -74,6 +74,7 @@
     </style>
   </template>
   <script>
+    import {addParams} from "../tf-backend/urlPathHelpers.js";
     Polymer({
       is: "tf-downloader",
       properties: {
@@ -83,7 +84,7 @@
         urlFn: Function,
       },
       _csvUrl: function(_run, urlFn) {
-        return urlFn(this.tag, _run) + "&format=csv";
+        return addParams(urlFn(this.tag, _run), {format: "csv"});
       },
       _jsonUrl: function(_run, urlFn) {
         return urlFn(this.tag, _run);

tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html

@@ -114,6 +114,7 @@
   </template>
   <script>
     "use strict";
+    import {addParams} from "../tf-backend/urlPathHelpers.js";
     import {Canceller} from "../tf-backend/canceller.js";
     import {getRouter} from "../tf-backend/router.js";
     import {formatDate} from '../tf-card-heading/util.js';
@@ -210,9 +211,11 @@
         }
         this._metadataCanceller.cancelAll();
         const router = getRouter();
-        const route = router.pluginRunTagRoute("audio", "/audio")(
-            this.tag, this.run);
-        const url = `${route}&sample=${this.sample}`;
+        const url = addParams(router.pluginRoute('audio', '/audio'), {
+            tag: this.tag,
+            run: this.run,
+            sample: this.sample,
+        });
         const updateSteps = this._metadataCanceller.cancellable(result => {
           if (result.cancelled) {
             return;
@@ -225,27 +228,19 @@
         this.requestManager.request(url).then(updateSteps);
       },
       _createStepDatum(audioMetadata) {
-        const route = getRouter().pluginRoute('audio', '/individualAudio');
-        let query = audioMetadata.query;
-        if (route.indexOf('?') > -1) {
-          // The route already has GET parameters. Append ours.
-          query = '&' + query;
-        } else {
-          // The route lacks GET parameters. Just use ours.
-          query = '?' + query;
-        }
-
+        let url = getRouter().pluginRoute('audio', '/individualAudio');
         // Include wall_time just to disambiguate the URL and force
         // the browser to reload the audio when the URL changes. The
         // backend doesn't care about the value.
-        const individualAudioURL = `${route}${query}&ts=${audioMetadata.wall_time}`;
+        url = addParams(url, {ts: audioMetadata.wall_time});
+        url += '&' + audioMetadata.query;
 
         return {
           wall_time: formatDate(new Date(audioMetadata.wall_time * 1000)),
           step: audioMetadata.step,
           label: audioMetadata.label,
           contentType: audioMetadata.contentType,
-          url: individualAudioURL,
+          url,
         };
       },
     });

tensorboard/plugins/image/tf_image_dashboard/tf-image-loader.html

@@ -181,6 +181,7 @@
   </template>
   <script>
     "use strict";
+    import {addParams} from '../tf-backend/urlPathHelpers.js';
     import {Canceller} from "../tf-backend/canceller.js";
     import {getRouter} from "../tf-backend/router.js";
     import {formatDate} from '../tf-card-heading/util.js';
@@ -305,9 +306,11 @@
         }
         this._metadataCanceller.cancelAll();
         const router = getRouter();
-        const route = router.pluginRunTagRoute("images", "/images")(
-            this.tag, this.run);
-        const url = `${route}&sample=${this.sample}`;
+        const url = addParams(router.pluginRoute('images', '/images'), {
+            tag: this.tag,
+            run: this.run,
+            sample: this.sample,
+        });
         const updateSteps = this._metadataCanceller.cancellable(result => {
           if (result.cancelled) {
             return;
@@ -320,20 +323,12 @@
         this.requestManager.request(url).then(updateSteps);
       },
       _createStepDatum(imageMetadata) {
-        const route = getRouter().pluginRoute('images', '/individualImage');
-        let query = imageMetadata.query;
-        if (route.indexOf('?') > -1) {
-          // The route already has GET parameters. Append ours.
-          query = '&' + query;
-        } else {
-          // The route lacks GET parameters. Just use ours.
-          query = '?' + query;
-        }
-
+        let url = getRouter().pluginRoute('images', '/individualImage');
         // Include wall_time just to disambiguate the URL and force
         // the browser to reload the image when the URL changes. The
         // backend doesn't care about the value.
-        const individualImageUrl = `${route}${query}&ts=${imageMetadata.wall_time}`;
+        url = addParams(url, {ts: imageMetadata.wall_time});
+        url += '&' + imageMetadata.query;
 
         return {
           width: imageMetadata.width,
@@ -342,7 +337,7 @@
           // constructor accepts a time in milliseconds, so we multiply by 1000.
           wall_time: new Date(imageMetadata.wall_time * 1000),
           step: imageMetadata.step,
-          url: individualImageUrl,
+          url,
         };
       },
       _updateImageUrl(steps, stepIndex) {

tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-card.html

@@ -154,6 +154,7 @@
     </style>
   </template>
   <script>
+    import {addParams} from "../tf-backend/urlPathHelpers.js";
     import {Canceller} from "../tf-backend/canceller.js";
     import {getRouter} from "../tf-backend/router.js";
     import {runsColorScale} from "../tf-color-scale/colorScale.js";
@@ -293,10 +294,10 @@
         this._canceller.cancelAll();
         const router = getRouter();
 
-        let url = router.pluginRoute('pr_curves', '/pr_curves');
-        url += url.indexOf('?') > -1 ? '&' : '?';
-        url += `tag=${encodeURIComponent(this.tag)}`;
-        url += this.runs.map(r => `&run=${encodeURIComponent(r)}`).join('');
+        const url = addParams(router.pluginRoute('pr_curves', '/pr_curves'), {
+            tag: this.tag,
+            run: this.runs,  // repeated URL parameter
+        });
 
         const updateData = this._canceller.cancellable(result => {
           if (result.cancelled) {

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

@@ -171,6 +171,7 @@
     </style>
   </template>
   <script>
+    import {addParams} from '../tf-backend/urlPathHelpers.js';
     import {Canceller} from '../tf-backend/canceller.js';
     import {getRouter} from '../tf-backend/router.js';
     import {runsColorScale} from '../tf-color-scale/colorScale.js';
@@ -486,7 +487,7 @@
       },
 
       _csvUrl(run) {
-        return this._scalarUrl(this.tag, run) + '&format=csv';
+        return addParams(this._scalarUrl(this.tag, run), {format: 'csv'});
       },
       _jsonUrl(run) {
         return this._scalarUrl(this.tag, run);