Skip to content

Fix initializer of instance members that reference identifiers declar… #6883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+697 −573
Open

Fix initializer of instance members that reference identifiers declar… #6883

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
003fa6a
Fix initializer of instance members that reference identifiers declar…
frost-cy Jul 17, 2024
2c1934c
Fix initializer of instance members that reference identifiers declar…
frost-cy Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 94 additions & 77 deletions ...lugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_container.ts
View file
Original file line number Diff line number Diff line change
@@ -37,87 +37,104 @@ export class ExecutionDataContainer {
@Input()
focusedExecutionIndex!: number;

readonly focusedExecutionData$ = this.store.pipe(
select(getFocusedExecutionData)
);
readonly focusedExecutionData$;

readonly tensorDebugMode$ = this.store.pipe(
select(
createSelector(getFocusedExecutionData, (execution: Execution | null) => {
if (execution === null) {
return TensorDebugMode.UNSPECIFIED;
} else {
return execution.tensor_debug_mode;
}
})
)
);
readonly tensorDebugMode$;

readonly hasDebugTensorValues$ = this.store.pipe(
select(
createSelector(getFocusedExecutionData, (execution: Execution | null) => {
if (execution === null || execution.debug_tensor_values === null) {
return false;
} else {
for (const singleDebugTensorValues of execution.debug_tensor_values) {
if (
singleDebugTensorValues !== null &&
singleDebugTensorValues.length > 0
) {
return true;
}
}
return false;
}
})
)
);
readonly hasDebugTensorValues$;

readonly debugTensorValues$;

readonly debugTensorValues$ = this.store.pipe(
select(
createSelector(getFocusedExecutionData, (execution: Execution | null) => {
if (execution === null) {
return null;
} else {
return execution.debug_tensor_values;
}
})
)
);
readonly debugTensorDtypes$;

readonly debugTensorDtypes$ = this.store.pipe(
select(
createSelector(
getFocusedExecutionData,
(execution: Execution | null): string[] | null => {
if (execution === null || execution.debug_tensor_values === null) {
return null;
}
if (
execution.tensor_debug_mode !== TensorDebugMode.FULL_HEALTH &&
execution.tensor_debug_mode !== TensorDebugMode.SHAPE
) {
// TODO(cais): Add logic for other TensorDebugModes with dtype info.
return null;
}
const dtypes: string[] = [];
for (const tensorValue of execution.debug_tensor_values) {
if (tensorValue === null) {
dtypes.push(UNKNOWN_DTYPE_NAME);
constructor(private readonly store: Store<State>) {
this.focusedExecutionData$ = this.store.pipe(
select(getFocusedExecutionData),
);
this.tensorDebugMode$ = this.store.pipe(
select(
createSelector(
getFocusedExecutionData,
(execution: Execution | null) => {
if (execution === null) {
return TensorDebugMode.UNSPECIFIED;
} else {
const dtypeEnum = String(
execution.tensor_debug_mode === TensorDebugMode.FULL_HEALTH
? tensorValue[2] // tensor_debug_mode: FULL_HEALTH
: tensorValue[1] // tensor_debug_mode: SHAPE
);
dtypes.push(DTYPE_ENUM_TO_NAME[dtypeEnum] || UNKNOWN_DTYPE_NAME);
return execution.tensor_debug_mode;
}
}
return dtypes;
}
)
)
);

constructor(private readonly store: Store<State>) {}
},
),
),
);
this.hasDebugTensorValues$ = this.store.pipe(
select(
createSelector(
getFocusedExecutionData,
(execution: Execution | null) => {
if (execution === null || execution.debug_tensor_values === null) {
return false;
} else {
for (const singleDebugTensorValues of execution.debug_tensor_values) {
if (
singleDebugTensorValues !== null &&
singleDebugTensorValues.length > 0
) {
return true;
}
}
return false;
}
},
),
),
);
this.debugTensorValues$ = this.store.pipe(
select(
createSelector(
getFocusedExecutionData,
(execution: Execution | null) => {
if (execution === null) {
return null;
} else {
return execution.debug_tensor_values;
}
},
),
),
);
this.debugTensorDtypes$ = this.store.pipe(
select(
createSelector(
getFocusedExecutionData,
(execution: Execution | null): string[] | null => {
if (execution === null || execution.debug_tensor_values === null) {
return null;
}
if (
execution.tensor_debug_mode !== TensorDebugMode.FULL_HEALTH &&
execution.tensor_debug_mode !== TensorDebugMode.SHAPE
) {
// TODO(cais): Add logic for other TensorDebugModes with dtype info.
return null;
}
const dtypes: string[] = [];
for (const tensorValue of execution.debug_tensor_values) {
if (tensorValue === null) {
dtypes.push(UNKNOWN_DTYPE_NAME);
} else {
const dtypeEnum = String(
execution.tensor_debug_mode === TensorDebugMode.FULL_HEALTH
? tensorValue[2] // tensor_debug_mode: FULL_HEALTH
: tensorValue[1], // tensor_debug_mode: SHAPE
);
dtypes.push(
DTYPE_ENUM_TO_NAME[dtypeEnum] || UNKNOWN_DTYPE_NAME,
);
}
}
return dtypes;
},
),
),
);
}
}
12 changes: 8 additions & 4 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_container.ts
View file
Original file line number Diff line number Diff line change
@@ -34,15 +34,19 @@ import {State} from '../../store/debugger_types';
`,
})
export class GraphContainer {
readonly opInfo$ = this.store.pipe(select(getFocusedGraphOpInfo));
readonly opInfo$;

readonly inputOps$ = this.store.pipe(select(getFocusedGraphOpInputs));
readonly inputOps$;

readonly consumerOps$ = this.store.pipe(select(getFocusedGraphOpConsumers));
readonly consumerOps$;

onGraphOpNavigate(event: {graph_id: string; op_name: string}) {
this.store.dispatch(graphOpFocused(event));
}

constructor(private readonly store: Store<State>) {}
constructor(private readonly store: Store<State>) {
this.opInfo$ = this.store.pipe(select(getFocusedGraphOpInfo));
this.inputOps$ = this.store.pipe(select(getFocusedGraphOpInputs));
this.consumerOps$ = this.store.pipe(select(getFocusedGraphOpConsumers));
}
}
17 changes: 10 additions & 7 deletions ...rd/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_container.ts
View file
Original file line number Diff line number Diff line change
@@ -34,14 +34,17 @@ import {State as DebuggerState} from '../../store/debugger_types';
`,
})
export class SourceFilesContainer {
constructor(private readonly store: Store<DebuggerState & OtherAppState>) {}
constructor(private readonly store: Store<DebuggerState & OtherAppState>) {
this.focusedSourceFileContent$ = this.store.select(
getFocusedSourceFileContent,
);
this.focusedSourceLineSpec$ = this.store.select(getFocusedSourceLineSpec);
this.useDarkMode$ = this.store.select(getDarkModeEnabled);
}

readonly focusedSourceFileContent$ = this.store.select(
getFocusedSourceFileContent
);
readonly focusedSourceFileContent$;

readonly focusedSourceLineSpec$ = this.store.select(getFocusedSourceLineSpec);
readonly focusedSourceLineSpec$;

readonly useDarkMode$: Observable<boolean> =
this.store.select(getDarkModeEnabled);
readonly useDarkMode$: Observable<boolean>;
}
162 changes: 91 additions & 71 deletions ...oard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_container.ts
View file
Original file line number Diff line number Diff line change
@@ -52,84 +52,104 @@ export class StackTraceContainer {
)
);

readonly opType$ = this.store.pipe(
select(
createSelector(getCodeLocationOrigin, (originInfo): string | null => {
return originInfo === null ? null : originInfo.opType;
})
)
);
readonly opType$;

readonly opName$ = this.store.pipe(
select(
createSelector(getCodeLocationOrigin, (originInfo): string | null => {
if (
originInfo === null ||
originInfo.codeLocationType !== CodeLocationType.GRAPH_OP_CREATION
) {
return null;
}
return originInfo.opName;
})
)
);
readonly opName$;

readonly executionIndex$ = this.store.pipe(
select(
createSelector(getCodeLocationOrigin, (originInfo): number | null => {
if (
originInfo === null ||
originInfo.codeLocationType !== CodeLocationType.EXECUTION
) {
return null;
}
return originInfo.executionIndex;
})
)
);
readonly executionIndex$;

readonly stickToBottommostFrameInFocusedFile$ = this.store.pipe(
select(getStickToBottommostFrameInFocusedFile)
);
readonly stickToBottommostFrameInFocusedFile$;

readonly stackFramesForDisplay$ = this.store.pipe(
select(
createSelector(
getFocusedStackFrames,
getFocusedSourceLineSpec,
(stackFrames, focusedSourceLineSpec): StackFrameForDisplay[] | null => {
if (stackFrames === null) {
readonly stackFramesForDisplay$;

constructor(private readonly store: Store<State>) {
this.codeLocationType$ = this.store.pipe(
select(
createSelector(
getCodeLocationOrigin,
(originInfo): CodeLocationType | null => {
return originInfo === null ? null : originInfo.codeLocationType;
},
),
),
);
this.opType$ = this.store.pipe(
select(
createSelector(getCodeLocationOrigin, (originInfo): string | null => {
return originInfo === null ? null : originInfo.opType;
}),
),
);
this.opName$ = this.store.pipe(
select(
createSelector(getCodeLocationOrigin, (originInfo): string | null => {
if (
originInfo === null ||
originInfo.codeLocationType !== CodeLocationType.GRAPH_OP_CREATION
) {
return null;
}
const output: StackFrameForDisplay[] = [];
// Correctly label all the stack frames for display.
for (const stackFrame of stackFrames) {
const {host_name, file_path, lineno, function_name} = stackFrame;
const pathItems = file_path.split('/');
const concise_file_path = pathItems[pathItems.length - 1];
const belongsToFocusedFile =
focusedSourceLineSpec !== null &&
host_name === focusedSourceLineSpec.host_name &&
file_path === focusedSourceLineSpec.file_path;
const focused =
belongsToFocusedFile && lineno === focusedSourceLineSpec!.lineno;
output.push({
host_name,
file_path,
concise_file_path,
lineno,
function_name,
belongsToFocusedFile,
focused,
});
return originInfo.opName;
}),
),
);
this.executionIndex$ = this.store.pipe(
select(
createSelector(getCodeLocationOrigin, (originInfo): number | null => {
if (
originInfo === null ||
originInfo.codeLocationType !== CodeLocationType.EXECUTION
) {
return null;
}
return output;
}
)
)
);

constructor(private readonly store: Store<State>) {}
return originInfo.executionIndex;
}),
),
);
this.stickToBottommostFrameInFocusedFile$ = this.store.pipe(
select(getStickToBottommostFrameInFocusedFile),
);
this.stackFramesForDisplay$ = this.store.pipe(
select(
createSelector(
getFocusedStackFrames,
getFocusedSourceLineSpec,
(
stackFrames,
focusedSourceLineSpec,
): StackFrameForDisplay[] | null => {
if (stackFrames === null) {
return null;
}
const output: StackFrameForDisplay[] = [];
// Correctly label all the stack frames for display.
for (const stackFrame of stackFrames) {
const {host_name, file_path, lineno, function_name} = stackFrame;
const pathItems = file_path.split('/');
const concise_file_path = pathItems[pathItems.length - 1];
const belongsToFocusedFile =
focusedSourceLineSpec !== null &&
host_name === focusedSourceLineSpec.host_name &&
file_path === focusedSourceLineSpec.file_path;
const focused =
belongsToFocusedFile &&
lineno === focusedSourceLineSpec!.lineno;
output.push({
host_name,
file_path,
concise_file_path,
lineno,
function_name,
belongsToFocusedFile,
focused,
});
}
return output;
},
),
),
);
}

onSourceLineClicked(args: StackFrameForDisplay) {
const {host_name, file_path, lineno, function_name} = args;
102 changes: 57 additions & 45 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_container.ts
View file
Original file line number Diff line number Diff line change
@@ -108,61 +108,73 @@ function getExecutionDigestForDisplay(
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TimelineContainer {
readonly activeRunId$ = this.store.pipe(select(getActiveRunId));

readonly loadingNumExecutions$ = this.store.pipe(
select(
createSelector(getNumExecutionsLoaded, (loaded) => {
return loaded.state == DataLoadState.LOADING;
})
)
);
readonly activeRunId$;

readonly scrollBeginIndex$ = this.store.pipe(
select(getExecutionScrollBeginIndex)
);
readonly loadingNumExecutions$;

readonly scrollBeginIndexUpperLimit$ = this.store.pipe(
select(
createSelector(
getNumExecutions,
getDisplayCount,
(numExecutions, displayCount) => {
return Math.max(0, numExecutions - displayCount);
}
)
)
);
readonly scrollBeginIndex$;

readonly pageSize$ = this.store.pipe(select(getExecutionPageSize));
readonly scrollBeginIndexUpperLimit$;

readonly displayCount$ = this.store.pipe(select(getDisplayCount));
readonly pageSize$;

readonly displayExecutionDigests$ = this.store.pipe(
select(
createSelector(getVisibleExecutionDigests, (visibleDigests) => {
return visibleDigests.map((digest) =>
getExecutionDigestForDisplay(digest)
);
})
)
);
readonly displayCount$;

readonly displayFocusedAlertTypes$ = this.store.pipe(
select(getFocusAlertTypesOfVisibleExecutionDigests)
);
readonly displayExecutionDigests$;

readonly focusedExecutionIndex$ = this.store.pipe(
select(getFocusedExecutionIndex)
);
readonly displayFocusedAlertTypes$;

readonly focusedExecutionDisplayIndex$ = this.store.pipe(
select(getFocusedExecutionDisplayIndex)
);
readonly focusedExecutionIndex$;

readonly focusedExecutionDisplayIndex$;

readonly numExecutions$ = this.store.pipe(select(getNumExecutions));
readonly numExecutions$;

constructor(private readonly store: Store<State>) {}
constructor(private readonly store: Store<State>) {
this.activeRunId$ = this.store.pipe(select(getActiveRunId));
this.loadingNumExecutions$ = this.store.pipe(
select(
createSelector(getNumExecutionsLoaded, (loaded) => {
return loaded.state == DataLoadState.LOADING;
}),
),
);
this.scrollBeginIndex$ = this.store.pipe(
select(getExecutionScrollBeginIndex),
);
this.scrollBeginIndexUpperLimit$ = this.store.pipe(
select(
createSelector(
getNumExecutions,
getDisplayCount,
(numExecutions, displayCount) => {
return Math.max(0, numExecutions - displayCount);
},
),
),
);
this.pageSize$ = this.store.pipe(select(getExecutionPageSize));
this.displayCount$ = this.store.pipe(select(getDisplayCount));
this.displayExecutionDigests$ = this.store.pipe(
select(
createSelector(getVisibleExecutionDigests, (visibleDigests) => {
return visibleDigests.map((digest) =>
getExecutionDigestForDisplay(digest),
);
}),
),
);
this.displayFocusedAlertTypes$ = this.store.pipe(
select(getFocusAlertTypesOfVisibleExecutionDigests),
);
this.focusedExecutionIndex$ = this.store.pipe(
select(getFocusedExecutionIndex),
);
this.focusedExecutionDisplayIndex$ = this.store.pipe(
select(getFocusedExecutionDisplayIndex),
);
this.numExecutions$ = this.store.pipe(select(getNumExecutions));
}

onNavigateLeft() {
this.store.dispatch(executionScrollLeft());
6 changes: 4 additions & 2 deletions tensorboard/webapp/core/views/hash_storage_container.ts
View file
Original file line number Diff line number Diff line change
@@ -38,9 +38,11 @@ import {ChangedProp} from './hash_storage_component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HashStorageContainer {
readonly activePluginId$ = this.store.pipe(select(getActivePlugin));
readonly activePluginId$;

constructor(private readonly store: Store<State>) {}
constructor(private readonly store: Store<State>) {
this.activePluginId$ = this.store.pipe(select(getActivePlugin));
}

onValueChanged(change: {prop: ChangedProp; value: string}) {
switch (change.prop) {
70 changes: 36 additions & 34 deletions tensorboard/webapp/core/views/page_title_container.ts
View file
Original file line number Diff line number Diff line change
@@ -57,46 +57,48 @@ const DEFAULT_BRAND_NAME = 'TensorBoard';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageTitleContainer {
private readonly getExperimentId$ = this.store
.select(getExperimentIdsFromRoute)
.pipe(
map((experimentIds) => {
return experimentIds?.[0];
})
);
private readonly getExperimentId$;

private readonly experimentName$ = this.getExperimentId$.pipe(
filter(Boolean),
mergeMap((experimentId) => {
// Selectors with props are deprecated (getExperiment):
// https://github.com/ngrx/platform/issues/2980
// tslint:disable-next-line:deprecation
return this.store.select(getExperiment, {experimentId});
}),
map((experiment) => (experiment ? experiment.name : null))
);
private readonly experimentName$;

readonly title$ = this.store.select(getEnvironment).pipe(
combineLatestWith(this.store.select(getRouteKind), this.experimentName$),
map(([env, routeKind, experimentName]) => {
const tbBrandName = this.customBrandName || DEFAULT_BRAND_NAME;
if (env.window_title) {
// (it's an empty string when the `--window_title` flag is not set)
return env.window_title;
}
if (routeKind === RouteKind.EXPERIMENT && experimentName) {
return `${experimentName} - ${tbBrandName}`;
}
return tbBrandName;
}),
startWith(this.customBrandName || DEFAULT_BRAND_NAME),
distinctUntilChanged()
);
readonly title$;

constructor(
private readonly store: Store<State>,
@Optional()
@Inject(TB_BRAND_NAME)
private readonly customBrandName: string | null
) {}
) {
this.getExperimentId$ = this.store.select(getExperimentIdsFromRoute).pipe(
map((experimentIds) => {
return experimentIds?.[0];
}),
);
this.experimentName$ = this.getExperimentId$.pipe(
filter(Boolean),
mergeMap((experimentId) => {
// Selectors with props are deprecated (getExperiment):
// https://github.com/ngrx/platform/issues/2980
// tslint:disable-next-line:deprecation
return this.store.select(getExperiment, {experimentId});
}),
map((experiment) => (experiment ? experiment.name : null)),
);
this.title$ = this.store.select(getEnvironment).pipe(
combineLatestWith(this.store.select(getRouteKind), this.experimentName$),
map(([env, routeKind, experimentName]) => {
const tbBrandName = this.customBrandName || DEFAULT_BRAND_NAME;
if (env.window_title) {
// (it's an empty string when the `--window_title` flag is not set)
return env.window_title;
}
if (routeKind === RouteKind.EXPERIMENT && experimentName) {
return `${experimentName} - ${tbBrandName}`;
}
return tbBrandName;
}),
startWith(this.customBrandName || DEFAULT_BRAND_NAME),
distinctUntilChanged(),
);
}
}
6 changes: 4 additions & 2 deletions tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
View file
Original file line number Diff line number Diff line change
@@ -38,14 +38,16 @@ export class FeatureFlagModalTriggerContainer implements OnInit, OnDestroy {
// Allow the dialog component type to be overridden for testing purposes.
featureFlagDialogType: ComponentType<any> = FeatureFlagDialogContainer;

readonly showFeatureFlags$ = this.store.select(getShowFlagsEnabled);
readonly showFeatureFlags$;
private featureFlagsDialog?: MatDialogRef<FeatureFlagDialogContainer>;
private ngUnsubscribe = new Subject<void>();

constructor(
private readonly store: Store<State>,
private dialog: MatDialog
) {}
) {
this.showFeatureFlags$ = this.store.select(getShowFlagsEnabled);
}

ngOnInit() {
this.showFeatureFlags$
12 changes: 6 additions & 6 deletions tensorboard/webapp/header/dark_mode_toggle_container.ts
View file
Original file line number Diff line number Diff line change
@@ -33,18 +33,18 @@ import {DarkModeOverride} from './dark_mode_toggle_component';
`,
})
export class DarkModeToggleContainer {
readonly darkModeOverride$: Observable<DarkModeOverride> = this.store
.select(getEnableDarkModeOverride)
.pipe(
readonly darkModeOverride$: Observable<DarkModeOverride>;

constructor(private readonly store: Store<CoreState & FeatureFlagState>) {
this.darkModeOverride$ = this.store.select(getEnableDarkModeOverride).pipe(
map((override: boolean | null): DarkModeOverride => {
if (override === null) return DarkModeOverride.DEFAULT;
return override
? DarkModeOverride.DARK_MODE_ON
: DarkModeOverride.DARK_MODE_OFF;
})
}),
);

constructor(private readonly store: Store<CoreState & FeatureFlagState>) {}
}

changeDarkMode(newOverride: DarkModeOverride) {
let enableDarkMode: boolean | null = null;
14 changes: 9 additions & 5 deletions tensorboard/webapp/header/plugin_selector_container.ts
View file
Original file line number Diff line number Diff line change
@@ -40,11 +40,15 @@ const getDisabledPlugins = createSelector(
`,
})
export class PluginSelectorContainer {
readonly activePlugin$ = this.store.pipe(select(getActivePlugin));
readonly plugins$ = this.store.pipe(select(getUiPlugins));
readonly disabledPlugins$ = this.store.pipe(select(getDisabledPlugins));

constructor(private readonly store: Store<State>) {}
readonly activePlugin$;
readonly plugins$;
readonly disabledPlugins$;

constructor(private readonly store: Store<State>) {
this.activePlugin$ = this.store.pipe(select(getActivePlugin));
this.plugins$ = this.store.pipe(select(getUiPlugins));
this.disabledPlugins$ = this.store.pipe(select(getDisabledPlugins));
}

onPluginSelectionChange(pluginId: PluginId) {
this.store.dispatch(changePlugin({plugin: pluginId}));
24 changes: 11 additions & 13 deletions tensorboard/webapp/header/reload_container.ts
View file
Original file line number Diff line number Diff line change
@@ -77,24 +77,22 @@ const isReloadDisabledByPlugin = createSelector(
],
})
export class ReloadContainer {
readonly reloadDisabled$: Observable<boolean> = this.store.select(
isReloadDisabledByPlugin
);
readonly reloadDisabled$: Observable<boolean>;

isReloading$: Observable<boolean> = this.store
.select(getCoreDataLoadedState)
.pipe(
isReloading$: Observable<boolean>;

lastLoadedTimeInMs$: Observable<number | null>;

constructor(private readonly store: Store<State>) {
this.reloadDisabled$ = this.store.select(isReloadDisabledByPlugin);
this.isReloading$ = this.store.select(getCoreDataLoadedState).pipe(
combineLatestWith(this.reloadDisabled$),
map(([loadState, reloadDisabled]) => {
return !reloadDisabled && loadState === DataLoadState.LOADING;
})
}),
);

lastLoadedTimeInMs$: Observable<number | null> = this.store.select(
getAppLastLoadedTimeInMs
);

constructor(private readonly store: Store<State>) {}
this.lastLoadedTimeInMs$ = this.store.select(getAppLastLoadedTimeInMs);
}

triggerReload() {
this.store.dispatch(manualReload());
429 changes: 221 additions & 208 deletions tensorboard/webapp/metrics/effects/index.ts
View file

Large diffs are not rendered by default.

16 changes: 10 additions & 6 deletions tensorboard/webapp/metrics/views/card_renderer/histogram_card_container.ts
View file
Original file line number Diff line number Diff line change
@@ -98,7 +98,13 @@ type HistogramCardMetadata = CardMetadata & {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HistogramCardContainer implements CardRenderer, OnInit {
constructor(private readonly store: Store<State>) {}
constructor(private readonly store: Store<State>) {
this.mode$ = this.store.select(getMetricsHistogramMode);
this.xAxisType$ = this.store.select(getMetricsXAxisType);
this.showFullWidth$ = this.store
.select(getCardStateMap)
.pipe(map((map) => map[this.cardId]?.fullWidth));
}

@Input() cardId!: CardId;
@Input() groupName!: string | null;
@@ -110,11 +116,9 @@ export class HistogramCardContainer implements CardRenderer, OnInit {
tag$?: Observable<string>;
runId$?: Observable<string>;
data$?: Observable<HistogramDatum[]>;
mode$ = this.store.select(getMetricsHistogramMode);
xAxisType$ = this.store.select(getMetricsXAxisType);
readonly showFullWidth$ = this.store
.select(getCardStateMap)
.pipe(map((map) => map[this.cardId]?.fullWidth));
mode$;
xAxisType$;
readonly showFullWidth$;
isPinned$?: Observable<boolean>;
linkedTimeSelection$?: Observable<TimeSelectionView | null>;
isClosestStepHighlighted$?: Observable<boolean | null>;
16 changes: 12 additions & 4 deletions tensorboard/webapp/metrics/views/card_renderer/image_card_container.ts
View file
Original file line number Diff line number Diff line change
@@ -109,7 +109,15 @@ export class ImageCardContainer implements CardRenderer, OnInit, OnDestroy {
constructor(
private readonly store: Store<State>,
private readonly dataSource: MetricsDataSource
) {}
) {
this.brightnessInMilli$ = this.store.select(
getMetricsImageBrightnessInMilli,
);
this.contrastInMilli$ = this.store.select(getMetricsImageContrastInMilli);
this.actualSizeGlobalSetting$ = this.store.select(
getMetricsImageShowActualSize,
);
}

@Input() cardId!: CardId;
@Input() groupName!: string | null;
@@ -139,9 +147,9 @@ export class ImageCardContainer implements CardRenderer, OnInit, OnDestroy {
isPinned$?: Observable<boolean>;
linkedTimeSelection$?: Observable<TimeSelectionView | null>;
selectedSteps$?: Observable<number[]>;
brightnessInMilli$ = this.store.select(getMetricsImageBrightnessInMilli);
contrastInMilli$ = this.store.select(getMetricsImageContrastInMilli);
actualSizeGlobalSetting$ = this.store.select(getMetricsImageShowActualSize);
brightnessInMilli$;
contrastInMilli$;
actualSizeGlobalSetting$;
showActualSize = false;

// The UI toggle is overridden by the global setting.
95 changes: 55 additions & 40 deletions tensorboard/webapp/metrics/views/card_renderer/scalar_card_container.ts
View file
Original file line number Diff line number Diff line change
@@ -225,7 +225,47 @@ function areSeriesEqual(
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
constructor(private readonly store: Store<State>) {}
constructor(private readonly store: Store<State>) {
this.columnFilters$ = this.store.select(getCurrentColumnFilters);
this.numColumnsLoaded$ = this.store.select(
hparamsSelectors.getNumDashboardHparamsLoaded,
);
this.numColumnsToLoad$ = this.store.select(
hparamsSelectors.getNumDashboardHparamsToLoad,
);
this.useDarkMode$ = this.store.select(getDarkModeEnabled);
this.ignoreOutliers$ = this.store.select(getMetricsIgnoreOutliers);
this.tooltipSort$ = this.store.select(getMetricsTooltipSort);
this.xAxisType$ = this.store.select(getMetricsXAxisType);
this.forceSvg$ = this.store.select(getForceSvgFeatureFlag);
this.columnCustomizationEnabled$ = this.store.select(
getIsScalarColumnCustomizationEnabled,
);
this.columnContextMenusEnabled$ = this.store.select(
getIsScalarColumnContextMenusEnabled,
);
this.xScaleType$ = this.store.select(getMetricsXAxisType).pipe(
map((xAxisType) => {
switch (xAxisType) {
case XAxisType.STEP:
case XAxisType.RELATIVE:
return ScaleType.LINEAR;
case XAxisType.WALL_TIME:
return ScaleType.TIME;
default:
const neverType = xAxisType as never;
throw new Error(`Invalid xAxisType for line chart. ${neverType}`);
}
}),
);
this.scalarSmoothing$ = this.store.select(getMetricsScalarSmoothing);
this.smoothingEnabled$ = this.store
.select(getMetricsScalarSmoothing)
.pipe(map((smoothing) => smoothing > 0));
this.showFullWidth$ = this.store
.select(getCardStateMap)
.pipe(map((map) => map[this.cardId]?.fullWidth));
}

// Angular Component constructor for DataDownload dialog. It is customizable for
// testability, without mocking out data for the component's internals, but defaults to
@@ -251,54 +291,29 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
cardState$?: Observable<Partial<CardState>>;
rangeEnabled$?: Observable<boolean>;
hparamsEnabled$?: Observable<boolean>;
columnFilters$ = this.store.select(getCurrentColumnFilters);
columnFilters$;
runToHparamMap$?: Observable<RunToHparamMap>;
selectableColumns$?: Observable<ColumnHeader[]>;
numColumnsLoaded$ = this.store.select(
hparamsSelectors.getNumDashboardHparamsLoaded
);
numColumnsToLoad$ = this.store.select(
hparamsSelectors.getNumDashboardHparamsToLoad
);
numColumnsLoaded$;
numColumnsToLoad$;

onVisibilityChange({visible}: {visible: boolean}) {
this.isVisible = visible;
}

readonly useDarkMode$ = this.store.select(getDarkModeEnabled);
readonly ignoreOutliers$ = this.store.select(getMetricsIgnoreOutliers);
readonly tooltipSort$ = this.store.select(getMetricsTooltipSort);
readonly xAxisType$ = this.store.select(getMetricsXAxisType);
readonly forceSvg$ = this.store.select(getForceSvgFeatureFlag);
readonly columnCustomizationEnabled$ = this.store.select(
getIsScalarColumnCustomizationEnabled
);
readonly columnContextMenusEnabled$ = this.store.select(
getIsScalarColumnContextMenusEnabled
);
readonly xScaleType$ = this.store.select(getMetricsXAxisType).pipe(
map((xAxisType) => {
switch (xAxisType) {
case XAxisType.STEP:
case XAxisType.RELATIVE:
return ScaleType.LINEAR;
case XAxisType.WALL_TIME:
return ScaleType.TIME;
default:
const neverType = xAxisType as never;
throw new Error(`Invalid xAxisType for line chart. ${neverType}`);
}
})
);
readonly useDarkMode$;
readonly ignoreOutliers$;
readonly tooltipSort$;
readonly xAxisType$;
readonly forceSvg$;
readonly columnCustomizationEnabled$;
readonly columnContextMenusEnabled$;
readonly xScaleType$;

readonly scalarSmoothing$ = this.store.select(getMetricsScalarSmoothing);
readonly smoothingEnabled$ = this.store
.select(getMetricsScalarSmoothing)
.pipe(map((smoothing) => smoothing > 0));
readonly scalarSmoothing$;
readonly smoothingEnabled$;

readonly showFullWidth$ = this.store
.select(getCardStateMap)
.pipe(map((map) => map[this.cardId]?.fullWidth));
readonly showFullWidth$;

private readonly ngUnsubscribe = new Subject<void>();

17 changes: 10 additions & 7 deletions tensorboard/webapp/reloader/reloader_component.ts
View file
Original file line number Diff line number Diff line change
@@ -27,20 +27,23 @@ import {selectors as settingsSelectors, State} from '../settings';
})
export class ReloaderComponent {
private readonly onVisibilityChange = this.onVisibilityChangeImpl.bind(this);
private readonly reloadEnabled$ = this.store.pipe(
select(settingsSelectors.getReloadEnabled)
);
private readonly reloadPeriodInMs$ = this.store.pipe(
select(settingsSelectors.getReloadPeriodInMs)
);
private readonly reloadEnabled$;
private readonly reloadPeriodInMs$;
private reloadTimerId: ReturnType<typeof setTimeout> | null = null;
private missedAutoReload: boolean = false;
private ngUnsubscribe = new Subject<void>();

constructor(
private store: Store<State>,
@Inject(DOCUMENT) private readonly document: Document
) {}
) {
this.reloadEnabled$ = this.store.pipe(
select(settingsSelectors.getReloadEnabled),
);
this.reloadPeriodInMs$ = this.store.pipe(
select(settingsSelectors.getReloadPeriodInMs),
);
}

ngOnInit() {
this.document.addEventListener('visibilitychange', this.onVisibilityChange);
31 changes: 17 additions & 14 deletions tensorboard/webapp/runs/views/runs_selector/runs_selector_container.ts
View file
Original file line number Diff line number Diff line change
@@ -30,19 +30,22 @@ import {RunsTableColumn} from '../runs_table/types';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RunsSelectorContainer {
readonly experimentIds$ = this.store
.select(getExperimentIdsFromRoute)
.pipe(map((experimentIdsOrNull) => experimentIdsOrNull ?? []));
readonly columns$ = this.store.select(getExperimentIdsFromRoute).pipe(
map((ids) => {
return [
RunsTableColumn.CHECKBOX,
RunsTableColumn.RUN_NAME,
ids && ids.length > 1 ? RunsTableColumn.EXPERIMENT_NAME : null,
RunsTableColumn.RUN_COLOR,
].filter((col) => col !== null) as RunsTableColumn[];
})
);
readonly experimentIds$;
readonly columns$;

constructor(private readonly store: Store<State>) {}
constructor(private readonly store: Store<State>) {
this.experimentIds$ = this.store
.select(getExperimentIdsFromRoute)
.pipe(map((experimentIdsOrNull) => experimentIdsOrNull ?? []));
this.columns$ = this.store.select(getExperimentIdsFromRoute).pipe(
map((ids) => {
return [
RunsTableColumn.CHECKBOX,
RunsTableColumn.RUN_NAME,
ids && ids.length > 1 ? RunsTableColumn.EXPERIMENT_NAME : null,
RunsTableColumn.RUN_COLOR,
].filter((col) => col !== null) as RunsTableColumn[];
}),
);
}
}
8 changes: 6 additions & 2 deletions tensorboard/webapp/runs/views/runs_table/filterbar_container.ts
View file
Original file line number Diff line number Diff line change
@@ -34,11 +34,15 @@ import {FilterAddedEvent} from '../../../widgets/data_table/types';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FilterbarContainer implements OnDestroy {
filters$ = this.store.select(hparamsSelectors.getDashboardHparamFilterMap);
filters$;

private readonly ngUnsubscribe = new Subject<void>();

constructor(private readonly store: Store<State>) {}
constructor(private readonly store: Store<State>) {
this.filters$ = this.store.select(
hparamsSelectors.getDashboardHparamFilterMap,
);
}

addHparamFilter(event: FilterAddedEvent) {
this.store.dispatch(
38 changes: 20 additions & 18 deletions tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
View file
Original file line number Diff line number Diff line change
@@ -71,11 +71,8 @@ export class RegexEditDialogContainer {
private readonly experimentIds: string[];
private readonly runIdToEid$: Observable<Record<string, string>>;
private readonly allRuns$: Observable<Run[]>;
private readonly expNameByExpId$: Observable<Record<string, string>> =
this.store.select(getDashboardExperimentNames);
readonly enableColorByExperiment$: Observable<boolean> = this.store.select(
getEnableColorByExperiment
);
private readonly expNameByExpId$: Observable<Record<string, string>>;
readonly enableColorByExperiment$: Observable<boolean>;

// Tentative regex string and type are used because we don't want to change the state
// every time we type in or select the dropdown option.
@@ -91,19 +88,7 @@ export class RegexEditDialogContainer {
);
}).pipe(startWith(''), shareReplay(1));

readonly groupByRegexType$: Observable<GroupByKey> = merge(
this.store.select(getRunGroupBy).pipe(
take(1),
map((group) => group.key)
),
this.tentativeRegexType$
).pipe(
startWith(GroupByKey.REGEX),
filter(
(key) => key === GroupByKey.REGEX || key === GroupByKey.REGEX_BY_EXP
),
shareReplay(1)
);
readonly groupByRegexType$: Observable<GroupByKey>;

readonly colorRunPairList$: Observable<ColorGroup[]> = defer(() => {
return this.groupByRegexString$.pipe(
@@ -174,6 +159,23 @@ export class RegexEditDialogContainer {
experimentIds: string[];
}
) {
this.expNameByExpId$ = this.store.select(getDashboardExperimentNames);
this.enableColorByExperiment$ = this.store.select(
getEnableColorByExperiment,
);
this.groupByRegexType$ = merge(
this.store.select(getRunGroupBy).pipe(
take(1),
map((group) => group.key),
),
this.tentativeRegexType$,
).pipe(
startWith(GroupByKey.REGEX),
filter(
(key) => key === GroupByKey.REGEX || key === GroupByKey.REGEX_BY_EXP,
),
shareReplay(1),
);
this.experimentIds = data.experimentIds;

this.runIdToEid$ = combineLatest(
6 changes: 4 additions & 2 deletions tensorboard/webapp/settings/_views/polymer_interop_container.ts
View file
Original file line number Diff line number Diff line change
@@ -36,12 +36,14 @@ import {State} from '../_redux/settings_types';
})
export class SettingsPolymerInteropContainer {
private readonly ngUnsubscribe = new Subject<void>();
private readonly getPageSize$ = this.store.pipe(select(getPageSize));
private readonly getPageSize$;
private readonly paginatedViewStore = document.createElement(
'tf-paginated-view-store'
).tf_paginated_view;

constructor(private store: Store<State>) {}
constructor(private store: Store<State>) {
this.getPageSize$ = this.store.pipe(select(getPageSize));
}

ngOnInit() {
this.getPageSize$
6 changes: 4 additions & 2 deletions tensorboard/webapp/settings/_views/settings_button_container.ts
View file
Original file line number Diff line number Diff line change
@@ -26,7 +26,9 @@ import {State} from '../_redux/settings_types';
`,
})
export class SettingsButtonContainer {
readonly settingsLoadState$ = this.store.select(getSettingsLoadState);
readonly settingsLoadState$;

constructor(private store: Store<State>) {}
constructor(private store: Store<State>) {
this.settingsLoadState$ = this.store.select(getSettingsLoadState);
}
}
12 changes: 8 additions & 4 deletions tensorboard/webapp/settings/_views/settings_dialog_container.ts
View file
Original file line number Diff line number Diff line change
@@ -40,11 +40,15 @@ import {State} from '../_redux/settings_types';
`,
})
export class SettingsDialogContainer {
readonly reloadEnabled$ = this.store.select(getReloadEnabled);
readonly reloadPeriodInMs$ = this.store.select(getReloadPeriodInMs);
readonly pageSize$ = this.store.select(getPageSize);
readonly reloadEnabled$;
readonly reloadPeriodInMs$;
readonly pageSize$;

constructor(private store: Store<State>) {}
constructor(private store: Store<State>) {
this.reloadEnabled$ = this.store.select(getReloadEnabled);
this.reloadPeriodInMs$ = this.store.select(getReloadPeriodInMs);
this.pageSize$ = this.store.select(getPageSize);
}

onReloadToggled(): void {
this.store.dispatch(toggleReloadEnabled());