Skip to content

Commit 9470005

Browse files
DemonstrandumDemonstrandum
authored
Merge pull request #61 from Demonstrandum/cursor/run-selection-persistence-348f
Cursor/run selection persistence 348f
2 parents 3b3248a + cc29d64 commit 9470005

9 files changed

Lines changed: 302 additions & 23 deletions

File tree

‎tensorbored/components/tf_color_scale/colorScale.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import {experimentsStore} from '../tf_backend/experimentsStore';
1818
import {runsStore} from '../tf_backend/runsStore';
1919
import {standard} from './palettes';
2020

21+
export const RUN_COLOR_MAP_CHANGED_EVENT = 'tb-run-color-map-changed';
22+
2123
/**
2224
* Read the run-name → hex-color map seeded on window by the NgRx
2325
* RunsEffects syncPolymerRunColorMap$ effect. Returns null before the
@@ -77,7 +79,7 @@ function createAutoUpdateColorScale(
7779
}
7880
store.addListener(update);
7981
// Re-read colors when the NgRx store subscription updates them.
80-
window.addEventListener('tb-run-color-map-changed', update);
82+
window.addEventListener(RUN_COLOR_MAP_CHANGED_EVENT, update);
8183
update();
8284
return (runName) => colorScale.getColor(runName);
8385
}

‎tensorbored/components/tf_line_chart_data_loader/tf-line-chart-data-loader.ts‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ import * as Plottable from 'plottable';
1919
import '../polymer/irons_and_papers';
2020
import {LegacyElementMixin} from '../polymer/legacy_element_mixin';
2121
import {RequestManager} from '../tf_backend/requestManager';
22-
import {runsColorScale} from '../tf_color_scale/colorScale';
22+
import {
23+
RUN_COLOR_MAP_CHANGED_EVENT,
24+
runsColorScale,
25+
} from '../tf_color_scale/colorScale';
2326
import {DataLoaderBehavior} from '../tf_dashboard_common/data-loader-behavior';
2427
import {
2528
AxisScaleType,
@@ -55,7 +58,7 @@ const cascadingRedraw = _.throttle(function internalRedraw() {
5558
x._maybeRenderedInBadState = false;
5659
}
5760
window.cancelAnimationFrame(redrawRaf);
58-
window.requestAnimationFrame(internalRedraw);
61+
redrawRaf = window.requestAnimationFrame(internalRedraw);
5962
}, 100);
6063

6164
// A component that fetches data from the TensorBoard server and renders it into
@@ -140,6 +143,53 @@ class _TfLineChartDataLoader<ScalarMetadata>
140143
`;
141144

142145
private _redrawRaf: number | null = null;
146+
private _resizeObserver: ResizeObserver | null = null;
147+
private _runColorMapChangedListener: (() => void) | null = null;
148+
private _lastObservedWidth = -1;
149+
private _lastObservedHeight = -1;
150+
151+
override connectedCallback() {
152+
super.connectedCallback();
153+
this._runColorMapChangedListener = () => {
154+
if (this.active) {
155+
if (!redrawQueue.includes(this)) {
156+
redrawQueue.push(this);
157+
}
158+
cascadingRedraw();
159+
} else {
160+
this._maybeRenderedInBadState = true;
161+
}
162+
};
163+
window.addEventListener(
164+
RUN_COLOR_MAP_CHANGED_EVENT,
165+
this._runColorMapChangedListener
166+
);
167+
this._resizeObserver = new ResizeObserver((entries) => {
168+
if (entries.length === 0) return;
169+
const {width, height} = entries[0].contentRect;
170+
const roundedWidth = Math.round(width);
171+
const roundedHeight = Math.round(height);
172+
if (
173+
roundedWidth === this._lastObservedWidth &&
174+
roundedHeight === this._lastObservedHeight
175+
) {
176+
return;
177+
}
178+
this._lastObservedWidth = roundedWidth;
179+
this._lastObservedHeight = roundedHeight;
180+
181+
if (roundedWidth <= 0 || roundedHeight <= 0 || !this.active) {
182+
this._maybeRenderedInBadState = true;
183+
return;
184+
}
185+
186+
if (!redrawQueue.includes(this)) {
187+
redrawQueue.push(this);
188+
}
189+
cascadingRedraw();
190+
});
191+
this._resizeObserver.observe(this);
192+
}
143193

144194
@property({
145195
type: Boolean,
@@ -231,6 +281,17 @@ class _TfLineChartDataLoader<ScalarMetadata>
231281
}
232282

233283
override disconnectedCallback() {
284+
if (this._runColorMapChangedListener !== null) {
285+
window.removeEventListener(
286+
RUN_COLOR_MAP_CHANGED_EVENT,
287+
this._runColorMapChangedListener
288+
);
289+
this._runColorMapChangedListener = null;
290+
}
291+
if (this._resizeObserver !== null) {
292+
this._resizeObserver.disconnect();
293+
this._resizeObserver = null;
294+
}
234295
super.disconnectedCallback();
235296
if (this._redrawRaf !== null) cancelAnimationFrame(this._redrawRaf);
236297
}

‎tensorbored/components/tf_runs_selector/tf-runs-selector.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ import {LegacyElementMixin} from '../polymer/legacy_element_mixin';
2020
import * as baseStore from '../tf_backend/baseStore';
2121
import {environmentStore} from '../tf_backend/environmentStore';
2222
import {runsStore} from '../tf_backend/runsStore';
23-
import {runsColorScale} from '../tf_color_scale/colorScale';
23+
import {
24+
RUN_COLOR_MAP_CHANGED_EVENT,
25+
runsColorScale,
26+
} from '../tf_color_scale/colorScale';
2427
import '../tf_dashboard_common/tf-multi-checkbox';
2528
import '../tf_wbr_string/tf-wbr-string';
2629

@@ -245,6 +248,7 @@ class TfRunsSelector extends LegacyElementMixin(PolymerElement) {
245248
_envStoreListener: baseStore.ListenKey;
246249

247250
private _selectionChangedListener: (() => void) | null = null;
251+
private _runColorMapChangedListener: (() => void) | null = null;
248252
private _syncingFromStorage = false;
249253

250254
override attached() {
@@ -264,6 +268,15 @@ class TfRunsSelector extends LegacyElementMixin(PolymerElement) {
264268
'tb-run-selection-changed',
265269
this._selectionChangedListener
266270
);
271+
272+
this._runColorMapChangedListener = () => {
273+
this.set('coloring', {getColor: runsColorScale});
274+
(this.$.multiCheckbox as any).synchronizeColors();
275+
};
276+
window.addEventListener(
277+
RUN_COLOR_MAP_CHANGED_EVENT,
278+
this._runColorMapChangedListener
279+
);
267280
}
268281

269282
private _syncFromStorage() {
@@ -282,6 +295,13 @@ class TfRunsSelector extends LegacyElementMixin(PolymerElement) {
282295
);
283296
this._selectionChangedListener = null;
284297
}
298+
if (this._runColorMapChangedListener) {
299+
window.removeEventListener(
300+
RUN_COLOR_MAP_CHANGED_EVENT,
301+
this._runColorMapChangedListener
302+
);
303+
this._runColorMapChangedListener = null;
304+
}
285305
}
286306

287307
_toggleAll() {

‎tensorbored/plugins/audio/tf_audio_dashboard/tf-audio-loader.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ import {getRouter} from '../../../components/tf_backend/router';
2323
import '../../../components/tf_card_heading/tf-card-heading';
2424
import '../../../components/tf_card_heading/tf-card-heading-style';
2525
import {formatDate} from '../../../components/tf_card_heading/util';
26-
import {runsColorScale} from '../../../components/tf_color_scale/colorScale';
26+
import {
27+
RUN_COLOR_MAP_CHANGED_EVENT,
28+
runsColorScale,
29+
} from '../../../components/tf_color_scale/colorScale';
2730
import '../../../components/tf_dashboard_common/tensorboard-color';
2831
import '../../../components/tf_markdown_view/tf-markdown-view';
2932

@@ -171,8 +174,11 @@ class _TfAudioLoader
171174
_stepIndex: number;
172175

173176
_attached: boolean = false;
177+
@property({type: Number})
178+
_runColorVersion = 0;
179+
private _runColorMapChangedListener: (() => void) | null = null;
174180

175-
@computed('run')
181+
@computed('run', '_runColorVersion')
176182
get _runColor(): string {
177183
var run = this.run;
178184
return runsColorScale(run);
@@ -216,10 +222,27 @@ class _TfAudioLoader
216222
}
217223

218224
override attached() {
225+
this._runColorMapChangedListener = () => {
226+
this._runColorVersion += 1;
227+
};
228+
window.addEventListener(
229+
RUN_COLOR_MAP_CHANGED_EVENT,
230+
this._runColorMapChangedListener
231+
);
219232
this._attached = true;
220233
this.reload();
221234
}
222235

236+
override detached() {
237+
if (this._runColorMapChangedListener) {
238+
window.removeEventListener(
239+
RUN_COLOR_MAP_CHANGED_EVENT,
240+
this._runColorMapChangedListener
241+
);
242+
this._runColorMapChangedListener = null;
243+
}
244+
}
245+
223246
@observe('run', 'tag')
224247
_reloadOnRunTagChange() {
225248
this.reload();

‎tensorbored/plugins/image/tf_image_dashboard/tf-image-loader.ts‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ import {getRouter} from '../../../components/tf_backend/router';
2323
import '../../../components/tf_card_heading/tf-card-heading';
2424
import '../../../components/tf_card_heading/tf-card-heading-style';
2525
import {formatDate} from '../../../components/tf_card_heading/util';
26-
import {runsColorScale} from '../../../components/tf_color_scale/colorScale';
26+
import {
27+
RUN_COLOR_MAP_CHANGED_EVENT,
28+
runsColorScale,
29+
} from '../../../components/tf_color_scale/colorScale';
2730
import '../../../components/tf_dashboard_common/tensorboard-color';
2831

2932
@customElement('tf-image-loader')
@@ -232,7 +235,10 @@ class TfImageLoader extends LegacyElementMixin(PolymerElement) {
232235
type: Boolean,
233236
})
234237
_isImageLoading: boolean = false;
235-
@computed('run')
238+
@property({type: Number})
239+
_runColorVersion = 0;
240+
private _runColorMapChangedListener: (() => void) | null = null;
241+
@computed('run', '_runColorVersion')
236242
get _runColor(): string {
237243
var run = this.run;
238244
return runsColorScale(run);
@@ -284,8 +290,24 @@ class TfImageLoader extends LegacyElementMixin(PolymerElement) {
284290
return this.actualSize ? 'true' : 'false';
285291
}
286292
override attached() {
293+
this._runColorMapChangedListener = () => {
294+
this._runColorVersion += 1;
295+
};
296+
window.addEventListener(
297+
RUN_COLOR_MAP_CHANGED_EVENT,
298+
this._runColorMapChangedListener
299+
);
287300
this.reload();
288301
}
302+
override detached() {
303+
if (this._runColorMapChangedListener) {
304+
window.removeEventListener(
305+
RUN_COLOR_MAP_CHANGED_EVENT,
306+
this._runColorMapChangedListener
307+
);
308+
this._runColorMapChangedListener = null;
309+
}
310+
}
289311
@observe('run', 'tag')
290312
reload() {
291313
if (!this.isAttached) {

‎tensorbored/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-card.ts‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ import {RequestManager} from '../../../components/tf_backend/requestManager';
2323
import {getRouter} from '../../../components/tf_backend/router';
2424
import {addParams} from '../../../components/tf_backend/urlPathHelpers';
2525
import '../../../components/tf_card_heading/tf-card-heading';
26-
import {runsColorScale} from '../../../components/tf_color_scale/colorScale';
26+
import {
27+
RUN_COLOR_MAP_CHANGED_EVENT,
28+
runsColorScale,
29+
} from '../../../components/tf_color_scale/colorScale';
2730
import {RequestDataCallback} from '../../../components/tf_dashboard_common/data-loader-behavior';
2831
import '../../../components/tf_line_chart_data_loader/tf-line-chart-data-loader';
2932
import * as vz_chart_helpers from '../../../components/vz_chart_helpers/vz-chart-helpers';
@@ -81,7 +84,7 @@ export class TfPrCurveCard extends PolymerElement {
8184
<div class="legend-row">
8285
<div
8386
class="color-box"
84-
style="background: [[_computeRunColor(run)]];"
87+
style="background: [[_computeRunColor(run, _runColorVersion)]];"
8588
></div>
8689
[[run]] is at
8790
<span class="step-label-text">
@@ -198,6 +201,9 @@ export class TfPrCurveCard extends PolymerElement {
198201

199202
@property({type: Boolean})
200203
_attached: boolean;
204+
@property({type: Number})
205+
_runColorVersion = 0;
206+
private _runColorMapChangedListener: (() => void) | null = null;
201207

202208
@property({type: Object})
203209
_xComponentsCreationMethod = () => {
@@ -306,19 +312,37 @@ export class TfPrCurveCard extends PolymerElement {
306312
};
307313
}
308314

309-
_computeRunColor(run) {
315+
_computeRunColor(run, _) {
310316
return runsColorScale(run);
311317
}
312318

313319
connectedCallback() {
314320
super.connectedCallback();
321+
this._runColorMapChangedListener = () => {
322+
this._runColorVersion += 1;
323+
};
324+
window.addEventListener(
325+
RUN_COLOR_MAP_CHANGED_EVENT,
326+
this._runColorMapChangedListener
327+
);
315328
// Defer reloading until after we're attached, because that ensures that
316329
// the requestManager has been set from above. (Polymer is tricky
317330
// sometimes)
318331
this._attached = true;
319332
this.reload();
320333
}
321334

335+
disconnectedCallback() {
336+
if (this._runColorMapChangedListener) {
337+
window.removeEventListener(
338+
RUN_COLOR_MAP_CHANGED_EVENT,
339+
this._runColorMapChangedListener
340+
);
341+
this._runColorMapChangedListener = null;
342+
}
343+
super.disconnectedCallback();
344+
}
345+
322346
_getChartDataLoader() {
323347
// tslint:disable-next-line:no-unnecessary-type-assertion
324348
return this.shadowRoot?.querySelector('tf-line-chart-data-loader') as any; // TfLineChartDataLoader

‎tensorbored/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-steps-selector.ts‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import {computed, customElement, observe, property} from '@polymer/decorators';
1717
import {html, PolymerElement} from '@polymer/polymer';
1818
import * as _ from 'lodash';
1919
import '../../../components/polymer/irons_and_papers';
20-
import {runsColorScale} from '../../../components/tf_color_scale/colorScale';
20+
import {
21+
RUN_COLOR_MAP_CHANGED_EVENT,
22+
runsColorScale,
23+
} from '../../../components/tf_color_scale/colorScale';
2124

2225
@customElement('tf-pr-curve-steps-selector')
2326
// tslint:disable-next-line:no-unused-variable
@@ -28,7 +31,7 @@ class TfPrCurveStepsSelector extends PolymerElement {
2831
<div class="run-display-container">
2932
<div
3033
class="run-color-box"
31-
style="background:[[_computeColorForRun(run)]];"
34+
style="background:[[_computeColorForRun(run, _runColorVersion)]];"
3235
></div>
3336
<div class="run-text">[[run]]</div>
3437
</div>
@@ -89,8 +92,33 @@ class TfPrCurveStepsSelector extends PolymerElement {
8992

9093
@property({type: Object})
9194
_runToStepIndex: object = {};
95+
@property({type: Number})
96+
_runColorVersion = 0;
97+
private _runColorMapChangedListener: (() => void) | null = null;
98+
99+
connectedCallback() {
100+
super.connectedCallback();
101+
this._runColorMapChangedListener = () => {
102+
this._runColorVersion += 1;
103+
};
104+
window.addEventListener(
105+
RUN_COLOR_MAP_CHANGED_EVENT,
106+
this._runColorMapChangedListener
107+
);
108+
}
109+
110+
disconnectedCallback() {
111+
if (this._runColorMapChangedListener) {
112+
window.removeEventListener(
113+
RUN_COLOR_MAP_CHANGED_EVENT,
114+
this._runColorMapChangedListener
115+
);
116+
this._runColorMapChangedListener = null;
117+
}
118+
super.disconnectedCallback();
119+
}
92120

93-
_computeColorForRun(run) {
121+
_computeColorForRun(run, _) {
94122
return runsColorScale(run);
95123
}
96124

0 commit comments

Comments
 (0)