Include feature flags for all plugins using src attributes (#6304)

Updates individual HTML elements to include client feature flags as
query parameters on their src attributes.

Validated via a local tensorboard that the requests generated from these
elements include the client feature flags as query parameters.

Author: groszewn

tensorboard/components/tf_backend/router.ts

@@ -12,6 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+import {FEATURE_FLAGS_QUERY_STRING_NAME} from '../../webapp/feature_flag/http/const';
+import {getFeatureFlagsToSendToServer} from '../tf_feature_flags/feature-flags';
 import {ExperimentId} from './type';
 import {QueryParams} from './urlPathHelpers';
 
@@ -25,6 +27,11 @@ export interface Router {
     route: string,
     params?: URLSearchParams
   ) => string;
+  pluginRouteForSrc: (
+    pluginName: string,
+    route: string,
+    params?: URLSearchParams
+  ) => string;
   pluginsListing: () => string;
   runs: () => string;
   runsForExperiment: (id: ExperimentId) => string;
@@ -64,6 +71,24 @@ export function createRouter(
         params
       );
     },
+    pluginRouteForSrc: (
+      pluginName: string,
+      route: string,
+      params: URLSearchParams = new URLSearchParams()
+    ): string => {
+      const featureFlags = getFeatureFlagsToSendToServer();
+      if (Object.keys(featureFlags).length > 0) {
+        params.append(
+          FEATURE_FLAGS_QUERY_STRING_NAME,
+          JSON.stringify(featureFlags)
+        );
+      }
+      return createDataPath(
+        dataDir + '/plugin',
+        `/${pluginName}${route}`,
+        params
+      );
+    },
     pluginsListing: () =>
       createDataPath(
         dataDir,

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

@@ -261,7 +261,7 @@ class _TfAudioLoader
     // the browser to reload the audio when the URL changes. The
     // backend doesn't care about the value.
     searchParam.append('ts', String(audioMetadata.wall_time));
-    const url = getRouter().pluginRoute(
+    const url = getRouter().pluginRouteForSrc(
       'audio',
       '/individualAudio',
       searchParam

tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-margin-chart-card.ts

@@ -469,12 +469,13 @@ class _TfCustomScalarMarginChartCard
   }
   _downloadDataUrl(_nameToDataSeries, dataSeriesName) {
     const dataSeries = _nameToDataSeries[dataSeriesName];
-    const getVars = {
+    const getVars = new URLSearchParams({
       tag: dataSeries.getTag(),
       run: dataSeries.getRun(),
-    };
-    return addParams(
-      getRouter().pluginRoute('custom_scalars', '/download_data'),
+    });
+    return getRouter().pluginRouteForSrc(
+      'custom_scalars',
+      '/download_data',
       getVars
     );
   }

tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-multi-line-chart-card.ts

@@ -306,12 +306,13 @@ class _TfCustomScalarMultiLineChartCard
 
   _downloadDataUrl(nameToSeries, dataSeriesName) {
     const dataSeries = nameToSeries[dataSeriesName];
-    const getVars = {
+    const getVars = new URLSearchParams({
       tag: dataSeries.getTag(),
       run: dataSeries.getRun(),
-    };
-    return addParams(
-      getRouter().pluginRoute('custom_scalars', '/download_data'),
+    });
+    return getRouter().pluginRouteForSrc(
+      'custom_scalars',
+      '/download_data',
       getVars
     );
   }

tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts

@@ -394,7 +394,7 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) {
     );
   }
   _graphUrl(run, limitAttrSize, largeAttrsKey) {
-    return getRouter().pluginRoute(
+    return getRouter().pluginRouteForSrc(
       'graphs',
       '/graph',
       new URLSearchParams({

tensorboard/plugins/graph/tf_graph_loader/tf-graph-dashboard-loader.ts

@@ -122,7 +122,11 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) {
           )
         );
         if (tag) params.set('tag', tag);
-        const graphPath = getRouter().pluginRoute('graphs', '/graph', params);
+        const graphPath = getRouter().pluginRouteForSrc(
+          'graphs',
+          '/graph',
+          params
+        );
         return this._fetchAndConstructHierarchicalGraph(graphPath).then(() => {
           this._graphRunTag = {run, tag};
         });
@@ -151,7 +155,7 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) {
         const params = new URLSearchParams();
         params.set('tag', tag!);
         params.set('run', run);
-        const metadataPath = getRouter().pluginRoute(
+        const metadataPath = getRouter().pluginRouteForSrc(
           'graphs',
           '/run_metadata',
           params

tensorboard/plugins/hparams/tf_hparams_backend/tf-hparams-backend.ts

@@ -16,38 +16,36 @@ import {
   HttpMethodType,
   RequestOptions,
 } from '../../../components/tf_backend/requestManager';
+import {getRouter} from '../../../components/tf_backend/router';
 
 /* A 'tf-hparams-backend' encapsulates sending HParams API requests to the
    backend.
    Any implementation with the same public interface can be passed to
    tf-hparams-main as the 'backend' property.
 */
 export class Backend {
-  private _apiUrl: any;
   private _requestManager: any;
   private _useHttpGet: any;
 
   // Constructs a backend that uses the given tf_backend.requestManager to
-  // send requests. The apiUrl parameter should denote the base
-  // url to use. If useHttpGet is true uses HTTP GET to send a request
+  // send requests. If useHttpGet is true uses HTTP GET to send a request
   // otherwise uses HTTP POST. See tensorboard/plugins/hparams/http_api.md
   // for details on how the requests and responses are encoded in each
   // scheme (GET or POST).
-  constructor(apiUrl, requestManager, useHttpGet = true) {
-    this._apiUrl = apiUrl;
+  constructor(requestManager, useHttpGet = true) {
     this._requestManager = requestManager;
     this._useHttpGet = useHttpGet;
   }
   // In the API methods below, 'request' should be a JSON translated request
   // protocol buffer and the response is a JSON translated response protocol
   // buffer. See api.proto for the details.
   getExperiment(experimentRequest) {
-    return this._sendRequest('experiment', experimentRequest);
+    return this._sendRequest('/experiment', experimentRequest);
   }
   getDownloadUrl(format, listSessionGroupsRequest, columnsVisibility) {
-    return (
-      this._apiUrl +
-      '/download_data?' +
+    return getRouter().pluginRouteForSrc(
+      'hparams',
+      '/download_data',
       new URLSearchParams({
         format: format,
         columnsVisibility: JSON.stringify(columnsVisibility),
@@ -56,17 +54,21 @@ export class Backend {
     );
   }
   listSessionGroups(listSessionGroupsRequest) {
-    return this._sendRequest('session_groups', listSessionGroupsRequest);
+    return this._sendRequest('/session_groups', listSessionGroupsRequest);
   }
   listMetricEvals(listMetricEvalsRequest) {
-    return this._sendRequest('metric_evals', listMetricEvalsRequest);
+    return this._sendRequest('/metric_evals', listMetricEvalsRequest);
   }
   // ---- Private methods below -------------------------------------------
   _sendRequest(methodName, request_proto) {
     if (this._useHttpGet) {
-      const encodedRequest = encodeURIComponent(JSON.stringify(request_proto));
-      const url =
-        this._apiUrl + '/' + methodName + '?request=' + encodedRequest;
+      const url = getRouter().pluginRoute(
+        'hparams',
+        methodName,
+        new URLSearchParams({
+          request: JSON.stringify(request_proto),
+        })
+      );
       return this._requestManager.request(url);
     }
     /* Use POST */
@@ -75,7 +77,7 @@ export class Backend {
     requestOptions.methodType = HttpMethodType.POST;
     requestOptions.contentType = 'text/plain';
     requestOptions.body = JSON.stringify(request_proto);
-    const url = this._apiUrl + '/' + methodName;
+    const url = getRouter().pluginRoute('hparams', methodName);
     return this._requestManager.requestWithOptions(url, requestOptions);
   }
 }

tensorboard/plugins/hparams/tf_hparams_dashboard/tf-hparams-dashboard.ts

@@ -25,7 +25,6 @@ const inColab =
   new URLSearchParams(window.location.search).get('tensorboardColab') ===
   'true';
 
-const PLUGIN_NAME = 'hparams';
 @customElement('tf-hparams-dashboard')
 class TfHparamsDashboard extends LegacyElementMixin(PolymerElement) {
   static readonly template = html`
@@ -42,9 +41,6 @@ class TfHparamsDashboard extends LegacyElementMixin(PolymerElement) {
     type: Object,
   })
   _backend = new tf_hparams_backend.Backend(
-    /* apiUrl= */ tf_backend
-      .getRouter()
-      .pluginRoute(/* pluginName= */ PLUGIN_NAME, /* route= */ ''),
     new tf_backend.RequestManager(),
     /* Use GETs if we're running in colab (due to b/126387106).
           Otherwise use POSTs. */

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

@@ -20,7 +20,6 @@ import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mix
 import {Canceller} from '../../../components/tf_backend/canceller';
 import {RequestManager} from '../../../components/tf_backend/requestManager';
 import {getRouter} from '../../../components/tf_backend/router';
-import {addParams} from '../../../components/tf_backend/urlPathHelpers';
 import '../../../components/tf_card_heading/tf-card-heading';
 import '../../../components/tf_card_heading/tf-card-heading-style';
 import {formatDate} from '../../../components/tf_card_heading/util';
@@ -293,12 +292,12 @@ class TfImageLoader extends LegacyElementMixin(PolymerElement) {
       return;
     }
     this._metadataCanceller.cancelAll();
-    const router = getRouter();
-    const url = addParams(router.pluginRoute('images', '/images'), {
+    const searchParams = new URLSearchParams({
       tag: this.tag,
       run: this.run,
       sample: this.sample as any,
     });
+    const url = getRouter().pluginRoute('images', '/images', searchParams);
     const updateSteps = this._metadataCanceller.cancellable((result) => {
       if (result.cancelled) {
         return;
@@ -311,12 +310,16 @@ class TfImageLoader extends LegacyElementMixin(PolymerElement) {
     this.requestManager.request(url).then(updateSteps);
   }
   _createStepDatum(imageMetadata) {
-    let url = getRouter().pluginRoute('images', '/individualImage');
+    const searchParams = new URLSearchParams(imageMetadata.query);
     // 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.
-    url = addParams(url, {ts: imageMetadata.wall_time});
-    url += '&' + imageMetadata.query;
+    searchParams.append('ts', imageMetadata.wall_time);
+    let url = getRouter().pluginRouteForSrc(
+      'images',
+      '/individualImage',
+      searchParams
+    );
     return {
       // The wall time within the metadata is in seconds. The Date
       // constructor accepts a time in milliseconds, so we multiply by 1000.

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

@@ -267,7 +267,7 @@ export class TfScalarCard extends PolymerElement {
 
   @property({type: Object})
   getDataLoadUrl: Function = ({tag, run}) => {
-    return getRouter().pluginRoute(
+    return getRouter().pluginRouteForSrc(
       'scalars',
       '/scalars',
       new URLSearchParams({tag, run})