Cursor/run selection persistence 348f

tensorbored/components/tf_color_scale/colorScale.ts

@@ -18,6 +18,8 @@ import {experimentsStore} from '../tf_backend/experimentsStore';
 import {runsStore} from '../tf_backend/runsStore';
 import {standard} from './palettes';
 
+export const RUN_COLOR_MAP_CHANGED_EVENT = 'tb-run-color-map-changed';
+
 /**
  * Read the run-name → hex-color map seeded on window by the NgRx
  * RunsEffects syncPolymerRunColorMap$ effect. Returns null before the
@@ -77,7 +79,7 @@ function createAutoUpdateColorScale(
   }
   store.addListener(update);
   // Re-read colors when the NgRx store subscription updates them.
-  window.addEventListener('tb-run-color-map-changed', update);
+  window.addEventListener(RUN_COLOR_MAP_CHANGED_EVENT, update);
   update();
   return (runName) => colorScale.getColor(runName);
 }

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

@@ -19,7 +19,10 @@ import * as Plottable from 'plottable';
 import '../polymer/irons_and_papers';
 import {LegacyElementMixin} from '../polymer/legacy_element_mixin';
 import {RequestManager} from '../tf_backend/requestManager';
-import {runsColorScale} from '../tf_color_scale/colorScale';
+import {
+  RUN_COLOR_MAP_CHANGED_EVENT,
+  runsColorScale,
+} from '../tf_color_scale/colorScale';
 import {DataLoaderBehavior} from '../tf_dashboard_common/data-loader-behavior';
 import {
   AxisScaleType,
@@ -55,7 +58,7 @@ const cascadingRedraw = _.throttle(function internalRedraw() {
     x._maybeRenderedInBadState = false;
   }
   window.cancelAnimationFrame(redrawRaf);
-  window.requestAnimationFrame(internalRedraw);
+  redrawRaf = window.requestAnimationFrame(internalRedraw);
 }, 100);
 
 // A component that fetches data from the TensorBoard server and renders it into
@@ -140,6 +143,53 @@ class _TfLineChartDataLoader<ScalarMetadata>
   `;
 
   private _redrawRaf: number | null = null;
+  private _resizeObserver: ResizeObserver | null = null;
+  private _runColorMapChangedListener: (() => void) | null = null;
+  private _lastObservedWidth = -1;
+  private _lastObservedHeight = -1;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._runColorMapChangedListener = () => {
+      if (this.active) {
+        if (!redrawQueue.includes(this)) {
+          redrawQueue.push(this);
+        }
+        cascadingRedraw();
+      } else {
+        this._maybeRenderedInBadState = true;
+      }
+    };
+    window.addEventListener(
+      RUN_COLOR_MAP_CHANGED_EVENT,
+      this._runColorMapChangedListener
+    );
+    this._resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length === 0) return;
+      const {width, height} = entries[0].contentRect;
+      const roundedWidth = Math.round(width);
+      const roundedHeight = Math.round(height);
+      if (
+        roundedWidth === this._lastObservedWidth &&
+        roundedHeight === this._lastObservedHeight
+      ) {
+        return;
+      }
+      this._lastObservedWidth = roundedWidth;
+      this._lastObservedHeight = roundedHeight;
+
+      if (roundedWidth <= 0 || roundedHeight <= 0 || !this.active) {
+        this._maybeRenderedInBadState = true;
+        return;
+      }
+
+      if (!redrawQueue.includes(this)) {
+        redrawQueue.push(this);
+      }
+      cascadingRedraw();
+    });
+    this._resizeObserver.observe(this);
+  }
 
   @property({
     type: Boolean,
@@ -231,6 +281,17 @@ class _TfLineChartDataLoader<ScalarMetadata>
   }
 
   override disconnectedCallback() {
+    if (this._runColorMapChangedListener !== null) {
+      window.removeEventListener(
+        RUN_COLOR_MAP_CHANGED_EVENT,
+        this._runColorMapChangedListener
+      );
+      this._runColorMapChangedListener = null;
+    }
+    if (this._resizeObserver !== null) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
     super.disconnectedCallback();
     if (this._redrawRaf !== null) cancelAnimationFrame(this._redrawRaf);
   }

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

@@ -20,7 +20,10 @@ import {LegacyElementMixin} from '../polymer/legacy_element_mixin';
 import * as baseStore from '../tf_backend/baseStore';
 import {environmentStore} from '../tf_backend/environmentStore';
 import {runsStore} from '../tf_backend/runsStore';
-import {runsColorScale} from '../tf_color_scale/colorScale';
+import {
+  RUN_COLOR_MAP_CHANGED_EVENT,
+  runsColorScale,
+} from '../tf_color_scale/colorScale';
 import '../tf_dashboard_common/tf-multi-checkbox';
 import '../tf_wbr_string/tf-wbr-string';
 
@@ -245,6 +248,7 @@ class TfRunsSelector extends LegacyElementMixin(PolymerElement) {
   _envStoreListener: baseStore.ListenKey;
 
   private _selectionChangedListener: (() => void) | null = null;
+  private _runColorMapChangedListener: (() => void) | null = null;
   private _syncingFromStorage = false;
 
   override attached() {
@@ -264,6 +268,15 @@ class TfRunsSelector extends LegacyElementMixin(PolymerElement) {
       'tb-run-selection-changed',
       this._selectionChangedListener
     );
+
+    this._runColorMapChangedListener = () => {
+      this.set('coloring', {getColor: runsColorScale});
+      (this.$.multiCheckbox as any).synchronizeColors();
+    };
+    window.addEventListener(
+      RUN_COLOR_MAP_CHANGED_EVENT,
+      this._runColorMapChangedListener
+    );
   }
 
   private _syncFromStorage() {
@@ -282,6 +295,13 @@ class TfRunsSelector extends LegacyElementMixin(PolymerElement) {
       );
       this._selectionChangedListener = null;
     }
+    if (this._runColorMapChangedListener) {
+      window.removeEventListener(
+        RUN_COLOR_MAP_CHANGED_EVENT,
+        this._runColorMapChangedListener
+      );
+      this._runColorMapChangedListener = null;
+    }
   }
 
   _toggleAll() {

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

@@ -23,7 +23,10 @@ import {getRouter} from '../../../components/tf_backend/router';
 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';
-import {runsColorScale} from '../../../components/tf_color_scale/colorScale';
+import {
+  RUN_COLOR_MAP_CHANGED_EVENT,
+  runsColorScale,
+} from '../../../components/tf_color_scale/colorScale';
 import '../../../components/tf_dashboard_common/tensorboard-color';
 import '../../../components/tf_markdown_view/tf-markdown-view';
 
@@ -171,8 +174,11 @@ class _TfAudioLoader
   _stepIndex: number;
 
   _attached: boolean = false;
+  @property({type: Number})
+  _runColorVersion = 0;
+  private _runColorMapChangedListener: (() => void) | null = null;
 
-  @computed('run')
+  @computed('run', '_runColorVersion')
   get _runColor(): string {
     var run = this.run;
     return runsColorScale(run);
@@ -216,10 +222,27 @@ class _TfAudioLoader
   }
 
   override attached() {
+    this._runColorMapChangedListener = () => {
+      this._runColorVersion += 1;
+    };
+    window.addEventListener(
+      RUN_COLOR_MAP_CHANGED_EVENT,
+      this._runColorMapChangedListener
+    );
     this._attached = true;
     this.reload();
   }
 
+  override detached() {
+    if (this._runColorMapChangedListener) {
+      window.removeEventListener(
+        RUN_COLOR_MAP_CHANGED_EVENT,
+        this._runColorMapChangedListener
+      );
+      this._runColorMapChangedListener = null;
+    }
+  }
+
   @observe('run', 'tag')
   _reloadOnRunTagChange() {
     this.reload();

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

@@ -23,7 +23,10 @@ import {getRouter} from '../../../components/tf_backend/router';
 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';
-import {runsColorScale} from '../../../components/tf_color_scale/colorScale';
+import {
+  RUN_COLOR_MAP_CHANGED_EVENT,
+  runsColorScale,
+} from '../../../components/tf_color_scale/colorScale';
 import '../../../components/tf_dashboard_common/tensorboard-color';
 
 @customElement('tf-image-loader')
@@ -232,7 +235,10 @@ class TfImageLoader extends LegacyElementMixin(PolymerElement) {
     type: Boolean,
   })
   _isImageLoading: boolean = false;
-  @computed('run')
+  @property({type: Number})
+  _runColorVersion = 0;
+  private _runColorMapChangedListener: (() => void) | null = null;
+  @computed('run', '_runColorVersion')
   get _runColor(): string {
     var run = this.run;
     return runsColorScale(run);
@@ -284,8 +290,24 @@ class TfImageLoader extends LegacyElementMixin(PolymerElement) {
     return this.actualSize ? 'true' : 'false';
   }
   override attached() {
+    this._runColorMapChangedListener = () => {
+      this._runColorVersion += 1;
+    };
+    window.addEventListener(
+      RUN_COLOR_MAP_CHANGED_EVENT,
+      this._runColorMapChangedListener
+    );
     this.reload();
   }
+  override detached() {
+    if (this._runColorMapChangedListener) {
+      window.removeEventListener(
+        RUN_COLOR_MAP_CHANGED_EVENT,
+        this._runColorMapChangedListener
+      );
+      this._runColorMapChangedListener = null;
+    }
+  }
   @observe('run', 'tag')
   reload() {
     if (!this.isAttached) {

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

@@ -23,7 +23,10 @@ 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 {runsColorScale} from '../../../components/tf_color_scale/colorScale';
+import {
+  RUN_COLOR_MAP_CHANGED_EVENT,
+  runsColorScale,
+} from '../../../components/tf_color_scale/colorScale';
 import {RequestDataCallback} from '../../../components/tf_dashboard_common/data-loader-behavior';
 import '../../../components/tf_line_chart_data_loader/tf-line-chart-data-loader';
 import * as vz_chart_helpers from '../../../components/vz_chart_helpers/vz-chart-helpers';
@@ -81,7 +84,7 @@ export class TfPrCurveCard extends PolymerElement {
         <div class="legend-row">
           <div
             class="color-box"
-            style="background: [[_computeRunColor(run)]];"
+            style="background: [[_computeRunColor(run, _runColorVersion)]];"
           ></div>
           [[run]] is at
           <span class="step-label-text">
@@ -198,6 +201,9 @@ export class TfPrCurveCard extends PolymerElement {
 
   @property({type: Boolean})
   _attached: boolean;
+  @property({type: Number})
+  _runColorVersion = 0;
+  private _runColorMapChangedListener: (() => void) | null = null;
 
   @property({type: Object})
   _xComponentsCreationMethod = () => {
@@ -306,19 +312,37 @@ export class TfPrCurveCard extends PolymerElement {
     };
   }
 
-  _computeRunColor(run) {
+  _computeRunColor(run, _) {
     return runsColorScale(run);
   }
 
   connectedCallback() {
     super.connectedCallback();
+    this._runColorMapChangedListener = () => {
+      this._runColorVersion += 1;
+    };
+    window.addEventListener(
+      RUN_COLOR_MAP_CHANGED_EVENT,
+      this._runColorMapChangedListener
+    );
     // Defer reloading until after we're attached, because that ensures that
     // the requestManager has been set from above. (Polymer is tricky
     // sometimes)
     this._attached = true;
     this.reload();
   }
 
+  disconnectedCallback() {
+    if (this._runColorMapChangedListener) {
+      window.removeEventListener(
+        RUN_COLOR_MAP_CHANGED_EVENT,
+        this._runColorMapChangedListener
+      );
+      this._runColorMapChangedListener = null;
+    }
+    super.disconnectedCallback();
+  }
+
   _getChartDataLoader() {
     // tslint:disable-next-line:no-unnecessary-type-assertion
     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

@@ -17,7 +17,10 @@ import {computed, customElement, observe, property} from '@polymer/decorators';
 import {html, PolymerElement} from '@polymer/polymer';
 import * as _ from 'lodash';
 import '../../../components/polymer/irons_and_papers';
-import {runsColorScale} from '../../../components/tf_color_scale/colorScale';
+import {
+  RUN_COLOR_MAP_CHANGED_EVENT,
+  runsColorScale,
+} from '../../../components/tf_color_scale/colorScale';
 
 @customElement('tf-pr-curve-steps-selector')
 // tslint:disable-next-line:no-unused-variable
@@ -28,7 +31,7 @@ class TfPrCurveStepsSelector extends PolymerElement {
         <div class="run-display-container">
           <div
             class="run-color-box"
-            style="background:[[_computeColorForRun(run)]];"
+            style="background:[[_computeColorForRun(run, _runColorVersion)]];"
           ></div>
           <div class="run-text">[[run]]</div>
         </div>
@@ -89,8 +92,33 @@ class TfPrCurveStepsSelector extends PolymerElement {
 
   @property({type: Object})
   _runToStepIndex: object = {};
+  @property({type: Number})
+  _runColorVersion = 0;
+  private _runColorMapChangedListener: (() => void) | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._runColorMapChangedListener = () => {
+      this._runColorVersion += 1;
+    };
+    window.addEventListener(
+      RUN_COLOR_MAP_CHANGED_EVENT,
+      this._runColorMapChangedListener
+    );
+  }
+
+  disconnectedCallback() {
+    if (this._runColorMapChangedListener) {
+      window.removeEventListener(
+        RUN_COLOR_MAP_CHANGED_EVENT,
+        this._runColorMapChangedListener
+      );
+      this._runColorMapChangedListener = null;
+    }
+    super.disconnectedCallback();
+  }
 
-  _computeColorForRun(run) {
+  _computeColorForRun(run, _) {
     return runsColorScale(run);
   }