Super-imposed plots card width

tensorbored/webapp/metrics/views/main_view/superimposed_cards_view_component.ts

@@ -12,7 +12,13 @@ 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 {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs';
 import {State} from '../../../app_state';
@@ -21,6 +27,9 @@ import {SuperimposedCardMetadata} from '../../types';
 import {superimposedCardFullWidthChanged} from '../../actions';
 import {getFullWidthSuperimposedCards} from '../../store';
 
+const MIN_CARD_MIN_WIDTH_IN_PX = 335;
+const MAX_CARD_MIN_WIDTH_IN_PX = 735;
+
 @Component({
   standalone: false,
   selector: 'superimposed-cards-view-component',
@@ -39,7 +48,10 @@ import {getFullWidthSuperimposedCards} from '../../store';
           </span>
         </div>
       </div>
-      <div class="superimposed-cards-grid">
+      <div
+        class="superimposed-cards-grid"
+        [style.grid-template-columns]="gridTemplateColumn"
+      >
         <div
           *ngFor="let card of superimposedCards; trackBy: trackByCard"
           class="card-wrapper"
@@ -58,9 +70,12 @@ import {getFullWidthSuperimposedCards} from '../../store';
   styleUrls: ['superimposed_cards_view_component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SuperimposedCardsViewComponent {
+export class SuperimposedCardsViewComponent implements OnChanges {
   @Input() cardObserver!: CardObserver;
   @Input() superimposedCards: SuperimposedCardMetadata[] = [];
+  @Input() cardMinWidth: number | null = null;
+
+  gridTemplateColumn = '';
 
   readonly cardsAtFullWidth$: Observable<Set<string>>;
   cardsAtFullHeight = new Set<string>();
@@ -69,6 +84,21 @@ export class SuperimposedCardsViewComponent {
     this.cardsAtFullWidth$ = this.store.select(getFullWidthSuperimposedCards);
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['cardMinWidth']) {
+      const width = changes['cardMinWidth'].currentValue;
+      if (
+        width &&
+        width >= MIN_CARD_MIN_WIDTH_IN_PX &&
+        width <= MAX_CARD_MIN_WIDTH_IN_PX
+      ) {
+        this.gridTemplateColumn = `repeat(auto-fill, minmax(${width}px, 1fr))`;
+      } else {
+        this.gridTemplateColumn = '';
+      }
+    }
+  }
+
   trackByCard(index: number, card: SuperimposedCardMetadata): string {
     return card.id;
   }

tensorbored/webapp/metrics/views/main_view/superimposed_cards_view_container.ts

@@ -17,6 +17,7 @@ import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 import {State} from '../../../app_state';
+import {getMetricsCardMinWidth} from '../../../selectors';
 import {getSuperimposedCardsWithMetadata} from '../../store';
 import {SuperimposedCardMetadata} from '../../types';
 import {CardObserver} from '../card_renderer/card_lazy_loader';
@@ -28,18 +29,21 @@ import {CardObserver} from '../card_renderer/card_lazy_loader';
     <superimposed-cards-view-component
       [superimposedCards]="superimposedCards$ | async"
       [cardObserver]="cardObserver"
+      [cardMinWidth]="cardMinWidth$ | async"
     ></superimposed-cards-view-component>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SuperimposedCardsViewContainer {
   @Input() cardObserver!: CardObserver;
 
+  readonly superimposedCards$: Observable<SuperimposedCardMetadata[]>;
+  readonly cardMinWidth$: Observable<number | null>;
+
   constructor(private readonly store: Store<State>) {
     this.superimposedCards$ = this.store
       .select(getSuperimposedCardsWithMetadata)
       .pipe(startWith([]));
+    this.cardMinWidth$ = this.store.select(getMetricsCardMinWidth);
   }
-
-  readonly superimposedCards$: Observable<SuperimposedCardMetadata[]>;
 }

tensorbored/webapp/widgets/line_chart_v2/line_chart_component.ts

@@ -250,6 +250,17 @@ export class LineChartComponent
       this.setIsViewBoxOverridden(false);
     }
 
+    // When the chart transitions from disabled to enabled, the container may
+    // have been resized while updates were suppressed (e.g. persistResize
+    // restoring a height, or a full-width toggle applied asynchronously).
+    // The ResizeDetectorDirective's skip(1) can swallow the only
+    // ResizeObserver event in that window, leaving the renderer and the
+    // interactive overlay with stale dimensions.  Re-read and apply now.
+    if (changes['disableUpdate'] && !this.disableUpdate && this.lineChart) {
+      this.readAndUpdateDomDimensions();
+      this.lineChart.resize(this.domDimensions.main);
+    }
+
     this.isViewBoxChanged =
       this.isViewBoxChanged ||
       this.userViewBoxUpdated ||