feat: persist fastChart feature flag to url (#4348)

This change builds on top of already existing feature of deep linking to
persist a state in the feature flag reducer for convenience of a user.

With this change, when launching tensorboard with `?fastChart=true`, it
will stay in the URL across navigations.

Author: stephanwlee

tensorboard/webapp/routes/core_deeplink_provider.ts

@@ -27,7 +27,10 @@ import {
 } from '../metrics/data_source/types';
 import {CardUniqueInfo} from '../metrics/types';
 import * as selectors from '../selectors';
-import {EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY} from '../webapp_data_source/tb_feature_flag_data_source_types';
+import {
+  EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY,
+  GPU_LINE_CHART_QUERY_PARAM_KEY,
+} from '../webapp_data_source/tb_feature_flag_data_source_types';
 import {DeserializedState} from './core_deeplink_provider_types';
 
 /**
@@ -70,14 +73,24 @@ export class CoreDeepLinkProvider extends DeepLinkProvider {
     );
   }
 
-  private getExperimentalPluginList(
+  private getFeatureFlagStates(
     store: Store<State>
   ): Observable<SerializableQueryParams> {
-    return store.select(selectors.getEnabledExperimentalPlugins).pipe(
-      map((experimentalPlugins) => {
-        return experimentalPlugins.map((pluginId) => {
+    return combineLatest([
+      store.select(selectors.getEnabledExperimentalPlugins),
+      store.select(selectors.getIsGpuChartEnabled),
+    ]).pipe(
+      map(([experimentalPlugins, isGpuChartEnabled]) => {
+        const queryParams = experimentalPlugins.map((pluginId) => {
           return {key: EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY, value: pluginId};
         });
+        if (isGpuChartEnabled) {
+          queryParams.push({
+            key: GPU_LINE_CHART_QUERY_PARAM_KEY,
+            value: 'true',
+          });
+        }
+        return queryParams;
       })
     );
   }
@@ -87,7 +100,7 @@ export class CoreDeepLinkProvider extends DeepLinkProvider {
   ): Observable<SerializableQueryParams> {
     return combineLatest([
       this.getMetricsPinnedCards(store),
-      this.getExperimentalPluginList(store),
+      this.getFeatureFlagStates(store),
     ]).pipe(
       map((queryParamList) => {
         return queryParamList.flat();

tensorboard/webapp/routes/core_deeplink_provider_test.ts

@@ -44,6 +44,7 @@ describe('core deeplink provider', () => {
     store.overrideSelector(selectors.getPinnedCardsWithMetadata, []);
     store.overrideSelector(selectors.getUnresolvedImportedPinnedCards, []);
     store.overrideSelector(selectors.getEnabledExperimentalPlugins, []);
+    store.overrideSelector(selectors.getIsGpuChartEnabled, false);
 
     queryParamsSerialized = [];
 
@@ -249,5 +250,14 @@ describe('core deeplink provider', () => {
         {key: 'experimentalPlugin', value: 'baz'},
       ]);
     });
+
+    it('serializes enabled fast chart state', () => {
+      store.overrideSelector(selectors.getIsGpuChartEnabled, true);
+      store.refreshState();
+
+      expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual([
+        {key: 'fastChart', value: 'true'},
+      ]);
+    });
   });
 });

tensorboard/webapp/webapp_data_source/tb_feature_flag_data_source.ts

@@ -16,6 +16,7 @@ import {Injectable} from '@angular/core';
 
 import {
   EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY,
+  GPU_LINE_CHART_QUERY_PARAM_KEY,
   TBFeatureFlagDataSource,
 } from './tb_feature_flag_data_source_types';
 
@@ -39,7 +40,7 @@ export class QueryParamsFeatureFlagDataSource extends TBFeatureFlagDataSource {
         EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY
       ),
       inColab: params.get('tensorboardColab') === 'true',
-      enableGpuChart: params.get('fastChart') === 'true',
+      enableGpuChart: params.get(GPU_LINE_CHART_QUERY_PARAM_KEY) === 'true',
     };
   }
 }

tensorboard/webapp/webapp_data_source/tb_feature_flag_data_source_types.ts

@@ -29,3 +29,5 @@ export abstract class TBFeatureFlagDataSource {
 }
 
 export const EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY = 'experimentalPlugin';
+
+export const GPU_LINE_CHART_QUERY_PARAM_KEY = 'fastChart';