time series: show sample on image (#5250)

Image plugin has a notion of sample which was previously not visible to
user. This change shows sample, when it is relevant, in the image card.

Author: stephanwlee

tensorboard/webapp/metrics/internal_types.ts

@@ -43,6 +43,7 @@ export interface CardMetadata {
   plugin: PluginType;
   tag: string;
   sample?: number;
+  numSample?: number;
 
   /**
    * A `null` runId indicates all runs.

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -82,7 +82,13 @@ function buildCardMetadataList(tagMetadata: TagMetadata): CardMetadata[] {
           for (const runId of Object.keys(tagRunSampleInfo[tag])) {
             const {maxSamplesPerStep} = tagRunSampleInfo[tag][runId];
             for (let i = 0; i < maxSamplesPerStep; i++) {
-              results.push({plugin, tag, runId, sample: i});
+              results.push({
+                plugin,
+                tag,
+                runId,
+                sample: i,
+                numSample: maxSamplesPerStep,
+              });
             }
           }
         }

tensorboard/webapp/metrics/store/metrics_reducers_test.ts

@@ -202,9 +202,27 @@ describe('metrics reducers', () => {
       const expectedCardMetadataList = [
         {plugin: PluginType.SCALARS, tag: 'tagA', runId: null},
         {plugin: PluginType.HISTOGRAMS, tag: 'tagB', runId: 'run2'},
-        {plugin: PluginType.IMAGES, tag: 'tagC', runId: 'run3', sample: 0},
-        {plugin: PluginType.IMAGES, tag: 'tagC', runId: 'run3', sample: 1},
-        {plugin: PluginType.IMAGES, tag: 'tagC', runId: 'run3', sample: 2},
+        {
+          plugin: PluginType.IMAGES,
+          tag: 'tagC',
+          runId: 'run3',
+          sample: 0,
+          numSample: 3,
+        },
+        {
+          plugin: PluginType.IMAGES,
+          tag: 'tagC',
+          runId: 'run3',
+          sample: 1,
+          numSample: 3,
+        },
+        {
+          plugin: PluginType.IMAGES,
+          tag: 'tagC',
+          runId: 'run3',
+          sample: 2,
+          numSample: 3,
+        },
       ];
       const expectedCardMetadataMap: CardMetadataMap = {};
       for (const cardMetadata of expectedCardMetadataList) {

tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html

@@ -15,49 +15,61 @@
 limitations under the License.
 -->
 <div class="heading">
-  <tb-truncated-path
-    class="tag"
-    title="{{ tag }}"
-    value="{{ title }}"
-  ></tb-truncated-path>
-  <div class="run">
-    <span
-      class="dot"
-      [ngStyle]="{backgroundColor: runColorScale(runId)}"
-    ></span>
-    <card-run-name class="run-text" [runId]="runId"></card-run-name>
+  <div class="line">
+    <tb-truncated-path
+      class="tag"
+      title="{{ tag }}"
+      value="{{ title }}"
+    ></tb-truncated-path>
+    <span class="controls">
+      <button
+        mat-icon-button
+        class="pin-button"
+        i18n-aria-label="A button to pin a card."
+        aria-label="Pin card"
+        [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
+        (click)="onPinClicked.emit(!isPinned)"
+      >
+        <mat-icon
+          [svgIcon]="isPinned ? 'keep_24px' : 'keep_outline_24px'"
+        ></mat-icon>
+      </button>
+      <button
+        mat-icon-button
+        i18n-aria-label="A button on an image card that toggles actual image size."
+        aria-label="Toggle actual image size"
+        [disabled]="!allowToggleActualSize"
+        title="Toggle actual image size"
+        (click)="onActualSizeToggle.emit()"
+      >
+        <mat-icon svgIcon="image_search_24px"></mat-icon>
+      </button>
+    </span>
   </div>
-  <div class="step" *ngIf="stepIndex !== null && stepIndex < stepValues.length">
-    Step {{ stepValues[stepIndex] }}
-    <mat-spinner
-      diameter="18"
-      *ngIf="loadState === DataLoadState.LOADING"
-    ></mat-spinner>
+  <div class="line">
+    <span class="run">
+      <span
+        class="dot"
+        [ngStyle]="{backgroundColor: runColorScale(runId)}"
+      ></span>
+      <card-run-name class="run-text" [runId]="runId"></card-run-name>
+    </span>
+    <div class="metadata">
+      <span
+        class="step"
+        *ngIf="stepIndex !== null && stepIndex < stepValues.length"
+        >Step {{ stepValues[stepIndex] | number }}</span
+      >
+      <span class="sample" *ngIf="numSample > 1"
+        >Sample {{ sample + 1 | number }}/{{ numSample | number}}</span
+      >
+      <mat-spinner
+        class="loading"
+        diameter="18"
+        *ngIf="loadState === DataLoadState.LOADING"
+      ></mat-spinner>
+    </div>
   </div>
-  <span class="controls">
-    <button
-      mat-icon-button
-      class="pin-button"
-      i18n-aria-label="A button to pin a card."
-      aria-label="Pin card"
-      [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
-      (click)="onPinClicked.emit(!isPinned)"
-    >
-      <mat-icon
-        [svgIcon]="isPinned ? 'keep_24px' : 'keep_outline_24px'"
-      ></mat-icon>
-    </button>
-    <button
-      mat-icon-button
-      i18n-aria-label="A button on an image card that toggles actual image size."
-      aria-label="Toggle actual image size"
-      [disabled]="!allowToggleActualSize"
-      title="Toggle actual image size"
-      (click)="onActualSizeToggle.emit()"
-    >
-      <mat-icon svgIcon="image_search_24px"></mat-icon>
-    </button>
-  </span>
 </div>
 <ng-container
   *ngIf="stepIndex !== null && stepIndex < stepValues.length; else noImageData"

tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss

@@ -16,7 +16,6 @@ limitations under the License.
 @import '../common';
 
 $_title-to-heading-gap: 12px;
-$_second-row-height: 15px;
 
 :host {
   display: flex;
@@ -36,18 +35,27 @@ $_second-row-height: 15px;
   $heading-content-gap: 4px;
 
   align-items: center;
-  display: grid;
-  grid-template-areas:
-    'tag controls'
-    'run step';
-  grid-template-columns: 1fr auto;
   font-size: 14px;
   margin-bottom: $heading-content-gap;
   position: relative;
 }
 
+.line {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+}
+
+.metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: flex-end;
+  max-width: 175px; // When step or sample is too long, it makes content wrap.
+  text-align: end;
+}
+
 .tag {
-  grid-area: tag;
   overflow: hidden;
 }
 
@@ -56,8 +64,9 @@ $_second-row-height: 15px;
 }
 
 .run {
-  grid-area: run;
+  align-self: baseline;
   display: flex;
+  overflow: hidden;
   white-space: nowrap;
 
   .dot {
@@ -76,29 +85,16 @@ $_second-row-height: 15px;
   }
 }
 
-.step {
-  grid-area: step;
-  display: flex;
-
-  mat-spinner {
-    $mat-icon-button-diameter: 40px;
-    $spinner-diameter: 18px;
-
-    margin-left: 4px;
-    margin-right: 0;
-  }
-}
-
 .run,
+.sample,
 .step {
   @include tb-theme-foreground-prop(color, secondary-text);
   font-size: 13px;
-  height: $_second-row-height;
 }
 
 .controls {
   @include metrics-card-controls;
-  grid-area: controls;
+
   justify-self: flex-end;
   flex-shrink: 0;
   // TODO(psybuzz) do not use negative margin.

tensorboard/webapp/metrics/views/card_renderer/image_card_component.ts

@@ -39,7 +39,8 @@ export class ImageCardComponent {
   @Input() title!: string;
   @Input() tag!: string;
   @Input() runId!: string;
-  @Input() sample!: string;
+  @Input() sample!: number;
+  @Input() numSample!: number;
   @Input() imageUrl!: string | null;
   @Input() stepIndex!: number | null;
   @Input() stepValues!: number[];

tensorboard/webapp/metrics/views/card_renderer/image_card_container.ts

@@ -58,6 +58,7 @@ import {getTagDisplayName} from '../utils';
 type ImageCardMetadata = CardMetadata & {
   plugin: PluginType.IMAGES;
   sample: number;
+  numSample: number;
   runId: string;
 };
 
@@ -70,6 +71,7 @@ type ImageCardMetadata = CardMetadata & {
       [tag]="tag$ | async"
       [runId]="runId$ | async"
       [sample]="sample$ | async"
+      [numSample]="numSample$ | async"
       [imageUrl]="imageUrl$ | async"
       [stepIndex]="stepIndex$ | async"
       [stepValues]="stepValues$ | async"
@@ -112,6 +114,7 @@ export class ImageCardContainer implements CardRenderer, OnInit, OnDestroy {
   tag$?: Observable<string>;
   runId$?: Observable<string>;
   sample$?: Observable<number>;
+  numSample$?: Observable<number>;
   imageUrl$?: Observable<string | null>;
   stepIndex$?: Observable<number | null>;
   stepValues$?: Observable<number[]>;
@@ -232,6 +235,10 @@ export class ImageCardContainer implements CardRenderer, OnInit, OnDestroy {
       })
     );
 
+    this.numSample$ = cardMetadata$.pipe(
+      map((cardMetadata) => cardMetadata.numSample)
+    );
+
     this.imageUrl$ = stepDatum$.pipe(
       map((stepDatum: ImageStepDatum | null) => {
         if (!stepDatum) {

tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts

@@ -272,6 +272,26 @@ describe('image card', () => {
     expect(slider).not.toBeTruthy();
   });
 
+  it('renders sample when numSample is larger than 1', () => {
+    const timeSeries = [{wallTime: 100, imageId: 'ImageId1', step: 10}];
+    provideMockCardSeriesData(
+      selectSpy,
+      PluginType.IMAGES,
+      'card1',
+      {sample: 5, numSample: 1.2e4},
+      timeSeries,
+      0 /* stepIndex */
+    );
+
+    const fixture = createImageCardContainer('card1');
+    fixture.detectChanges();
+
+    const metadata = fixture.debugElement.query(By.css('.metadata'));
+    expect(metadata.nativeElement.textContent.trim()).toBe(
+      'Step 10Sample 6/12,000'
+    );
+  });
+
   it('dispatches event when step slider changes', () => {
     const timeSeries = [
       {wallTime: 100, imageId: 'ImageId1', step: 10},