point-assignment.component.html

<div class="sxplr-m-2" *ngIf="busy$ | async">
    <spinner-cmp class="sxplr-d-inline-block"></spinner-cmp>
    <span>
        Loading assignment ...
    </span>
</div>

<ng-template [ngIf]="df$ | async" let-df>
    <button mat-raised-button
        class="sxplr-m-2"
        (click)="openDialog(datatableTmpl)">
        Show Full Assignment ({{ df.data.length }})
    </button>

    <!-- simple table -->
    <table mat-table [dataSource]="df | dfToDs" class="sxplr-w-100">
        <ng-container matColumnDef="region">
            <th mat-header-cell *matHeaderCellDef>
                region
            </th>
            <td mat-cell *matCellDef="let element">
                <!-- {{ element | json }} -->
                <button mat-button (click)="selectRegion(element['region'], $event)">
                    {{ element['region'].name }}
                </button>
            </td>
        </ng-container>
        <ng-container matColumnDef="intersection over union">
            <th mat-header-cell *matHeaderCellDef>
                intersection over union
            </th>
            <td mat-cell *matCellDef="let element">
                {{ element['intersection over union'] | prettyPresent }}
            </td>
        </ng-container>
        
        <tr mat-header-row *matHeaderRowDef="SIMPLE_COLUMNS"></tr>
        <tr mat-row *matRowDef="let row; columns: SIMPLE_COLUMNS;"></tr>
    </table>
</ng-template>

<ng-template #datatableTmpl>
    <h2 mat-dialog-title>Assignment</h2>
    <mat-dialog-content>
        <table mat-table [dataSource]="df$ | async | dfToDs">
            <ng-container *ngFor="let column of columns$ | async"
                [matColumnDef]="column">
                <th mat-header-cell *matHeaderCellDef>
                    {{ column }}
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element[column] | prettyPresent }}
                </td>
            </ng-container>
        
            <tr mat-header-row *matHeaderRowDef="columns$ | async"></tr>
            <tr mat-row *matRowDef="let row; columns: columns$ | async;"></tr>
        </table>
    </mat-dialog-content>
    <mat-dialog-actions align="center">
        <button mat-button mat-dialog-close>Close</button>
      </mat-dialog-actions>
</ng-template>