Skip to content

Commit

Permalink
Stop removing query parameters when persisting application state to t…
Browse files Browse the repository at this point in the history
…he url
  • Loading branch information
rileyajones committed Jul 11, 2022
1 parent 0334a6c commit 3524927
Show file tree
Hide file tree
Showing 8 changed files with 379 additions and 97 deletions.
22 changes: 22 additions & 0 deletions tensorboard/webapp/routes/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ tf_ts_library(
],
deps = [
":dashboard_deeplink_provider_types",
":feature_flag_serializer",
"//tensorboard/webapp:app_state",
"//tensorboard/webapp:selectors",
"//tensorboard/webapp/app_routing:deep_link_provider",
Expand All @@ -53,6 +54,24 @@ tf_ts_library(
],
)

tf_ts_library(
name = "feature_flag_serializer",
srcs = [
"feature_flag_serializer.ts",
],
deps = [
"//tensorboard/webapp:app_state",
"//tensorboard/webapp:selectors",
"//tensorboard/webapp/app_routing:location",
"//tensorboard/webapp/app_routing:types",
"//tensorboard/webapp/webapp_data_source:feature_flag_query_parameters",
"//tensorboard/webapp/webapp_data_source:feature_flag_types",
"@npm//@angular/core",
"@npm//@ngrx/store",
"@npm//rxjs",
],
)

tf_ts_library(
name = "testing",
testonly = True,
Expand All @@ -69,10 +88,13 @@ tf_ts_library(
testonly = True,
srcs = [
"dashboard_deeplink_provider_test.ts",
"feature_flag_serializer_test.ts",
],
deps = [
":dashboard_deeplink_provider",
":feature_flag_serializer",
":testing",
"//tensorboard/webapp/app_routing:location",
"//tensorboard/webapp:app_state",
"//tensorboard/webapp:selectors",
"//tensorboard/webapp/angular:expect_angular_core_testing",
Expand Down
38 changes: 2 additions & 36 deletions tensorboard/webapp/routes/dashboard_deeplink_provider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,6 @@ import {
import {CardUniqueInfo} from '../metrics/types';
import {GroupBy, GroupByKey} from '../runs/types';
import * as selectors from '../selectors';
import {
ENABLE_COLOR_GROUP_BY_REGEX_QUERY_PARAM_KEY,
ENABLE_COLOR_GROUP_QUERY_PARAM_KEY,
EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY,
} from '../webapp_data_source/tb_feature_flag_data_source_types';
import {
DeserializedState,
PINNED_CARDS_KEY,
Expand All @@ -40,6 +35,7 @@ import {
SMOOTHING_KEY,
TAG_FILTER_KEY,
} from './dashboard_deeplink_provider_types';
import {getFeatureFlagStates} from './feature_flag_serializer';

const COLOR_GROUP_REGEX_VALUE_PREFIX = 'regex:';

Expand Down Expand Up @@ -83,36 +79,6 @@ export class DashboardDeepLinkProvider extends DeepLinkProvider {
);
}

private getFeatureFlagStates(
store: Store<State>
): Observable<SerializableQueryParams> {
return combineLatest([
store.select(selectors.getEnabledExperimentalPlugins),
store.select(selectors.getOverriddenFeatureFlags),
]).pipe(
map(([experimentalPlugins, overriddenFeatureFlags]) => {
const queryParams = experimentalPlugins.map((pluginId) => {
return {key: EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY, value: pluginId};
});
if (typeof overriddenFeatureFlags.enabledColorGroup === 'boolean') {
queryParams.push({
key: ENABLE_COLOR_GROUP_QUERY_PARAM_KEY,
value: String(overriddenFeatureFlags.enabledColorGroup),
});
}
if (
typeof overriddenFeatureFlags.enabledColorGroupByRegex === 'boolean'
) {
queryParams.push({
key: ENABLE_COLOR_GROUP_BY_REGEX_QUERY_PARAM_KEY,
value: String(overriddenFeatureFlags.enabledColorGroupByRegex),
});
}
return queryParams;
})
);
}

serializeStateToQueryParams(
store: Store<State>
): Observable<SerializableQueryParams> {
Expand All @@ -126,7 +92,7 @@ export class DashboardDeepLinkProvider extends DeepLinkProvider {
return [{key: TAG_FILTER_KEY, value: filterText}];
})
),
this.getFeatureFlagStates(store),
getFeatureFlagStates(store),
store.select(selectors.getMetricsSettingOverrides).pipe(
map((settingOverrides) => {
if (Number.isFinite(settingOverrides.scalarSmoothing)) {
Expand Down
57 changes: 57 additions & 0 deletions tensorboard/webapp/routes/feature_flag_serializer.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
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 {Store} from '@ngrx/store';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';

import {Location} from '../app_routing/location';
import {SerializableQueryParams} from '../app_routing/types';
import {State} from '../app_state';
import * as selectors from '../selectors';
import {EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY} from '../webapp_data_source/tb_feature_flag_data_source_types';
import {FeatureFlagMetadata, FeatureFlagQueryParameters,} from '../webapp_data_source/tb_feature_flag_query_parameters';

export function getFeatureFlagStates(store: Store<State>):
Observable<SerializableQueryParams> {
return store.select(selectors.getEnabledExperimentalPlugins)
.pipe(map((experimentalPlugins) => {
const queryParams = experimentalPlugins.map((pluginId) => {
return {key: EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY, value: pluginId};
});

const currentQueryParams = Object.fromEntries(
serializableQueryParamsToEntries(new Location().getSearch() || []));

Object.values(FeatureFlagQueryParameters)
.forEach((overriddenFeatureFlag: FeatureFlagMetadata) => {
const queryParamOverride =
overriddenFeatureFlag.queryParamOverride;
if (queryParamOverride &&
queryParamOverride in currentQueryParams) {
queryParams.push({
key: queryParamOverride,
value: currentQueryParams[queryParamOverride],
});
}
});

return queryParams;

function serializableQueryParamsToEntries(
params: SerializableQueryParams): [string, string][] {
return params.map(({key, value}) => [key, value]);
}
}));
}
85 changes: 85 additions & 0 deletions tensorboard/webapp/routes/feature_flag_serializer_test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
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 {TestBed} from '@angular/core/testing';
import {Store} from '@ngrx/store';
import {MockStore, provideMockStore} from '@ngrx/store/testing';

import {Location} from '../app_routing/location';
import {SerializableQueryParams} from '../app_routing/types';
import {State} from '../app_state';
import {appStateFromMetricsState, buildMetricsState} from '../metrics/testing';
import * as selectors from '../selectors';

import {getFeatureFlagStates} from './feature_flag_serializer';

describe('feature flag serializer', () => {
let store: MockStore<State>;
let location: Location;
let getSearchSpy: jasmine.Spy;

beforeEach(async () => {
await TestBed
.configureTestingModule({
providers: [
provideMockStore({
initialState: {
...appStateFromMetricsState(buildMetricsState()),
},
}),
],
})
.compileComponents();

store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
store.overrideSelector(selectors.getEnabledExperimentalPlugins, []);

location = TestBed.inject(Location);
getSearchSpy = spyOn(location, 'getSearch').and.returnValue([]);
});

describe('getFeatureFlagStates', () => {
it('returns empty list when no feature flags are active', async () => {
const queryParams = await promiseGetFeatureFlagStates(store);
expect(queryParams.length).toEqual(0);
});

it('persists values of enabled experimental plugins', () => {});

it('persists flag states overridden by query params', async () => {
store.overrideSelector(selectors.getEnabledExperimentalPlugins, []);
getSearchSpy = spyOn(location, 'getSearch').and.returnValue([
{
key: 'defaultEnableDarkMode',
value: 'true',
},
]);
const queryParams = await promiseGetFeatureFlagStates(store);
expect(queryParams.length).toEqual(1);
expect(queryParams[0].key).toEqual('defaultEnableDarkMode');
expect(queryParams[0].value).toEqual('true');
});
});
});

function promiseGetFeatureFlagStates(store: Store<State>):
Promise<SerializableQueryParams> {
return new Promise<SerializableQueryParams>((resolve) => {
getFeatureFlagStates(store)
.subscribe((queryParams) => {
resolve(queryParams);
})
.unsubscribe();
});
}
15 changes: 15 additions & 0 deletions tensorboard/webapp/webapp_data_source/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,18 @@ tf_ng_module(
],
)

tf_ng_module(
name = "feature_flag_query_parameters",
srcs = [
"tb_feature_flag_query_parameters.ts",
],
deps = [
":feature_flag_types",
"//tensorboard/webapp/feature_flag:types",
"@npm//@angular/core",
],
)

tf_ng_module(
name = "feature_flag_types",
srcs = [
Expand All @@ -96,6 +108,7 @@ tf_ng_module(
"tb_feature_flag_module.ts",
],
deps = [
":feature_flag_query_parameters",
":feature_flag_types",
"//tensorboard/webapp/feature_flag:types",
"//tensorboard/webapp/types",
Expand Down Expand Up @@ -124,9 +137,11 @@ tf_ng_module(
testonly = True,
srcs = [
"tb_feature_flag_data_source_test.ts",
"tb_feature_flag_query_parameters_test.ts",
],
deps = [
":feature_flag",
":feature_flag_query_parameters",
"//tensorboard/webapp/angular:expect_angular_core_testing",
"@npm//@angular/core",
"@npm//@types/jasmine",
Expand Down

0 comments on commit 3524927

Please sign in to comment.