feat: add point assignment for simple table

src/atlasComponents/sapiViews/volumes/point-assignment/point-assignment.component.html

@@ -9,8 +9,34 @@
     <button mat-raised-button
         class="sxplr-m-2"
         (click)="openDialog(datatableTmpl)">
-        Show Assignment ({{ df.data.length }})
+        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>

src/atlasComponents/sapiViews/volumes/point-assignment/point-assignment.component.ts

-import { Component, Input, OnDestroy, TemplateRef } from '@angular/core';
+import { Component, Input, OnDestroy, Output, TemplateRef, EventEmitter } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { BehaviorSubject, EMPTY, Subscription, combineLatest } from 'rxjs';
+import { BehaviorSubject, EMPTY, Subscription, combineLatest, concat, of } from 'rxjs';
 import { map, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { SAPI } from 'src/atlasComponents/sapi/sapi.service';
-import { SxplrParcellation, SxplrTemplate } from 'src/atlasComponents/sapi/sxplrTypes';
+import { SxplrParcellation, SxplrRegion, SxplrTemplate } from 'src/atlasComponents/sapi/sxplrTypes';
+import { translateV3Entities } from 'src/atlasComponents/sapi/translateV3';
+import { PathReturn } from 'src/atlasComponents/sapi/typeV3';
 import { TSandsPoint } from 'src/util/types';
 
 @Component({
@@ -13,6 +15,11 @@ import { TSandsPoint } from 'src/util/types';
 })
 export class PointAssignmentComponent implements OnDestroy {
 
+  SIMPLE_COLUMNS = [
+    "region",
+    "intersection over union",
+  ]
+  
   #busy$ = new BehaviorSubject(false)
   busy$ = this.#busy$.asObservable()
 
@@ -34,6 +41,9 @@ export class PointAssignmentComponent implements OnDestroy {
     this.#parcellation.next(val)
   }
 
+  @Output()
+  clickOnRegion = new EventEmitter<{ target: SxplrRegion, event: MouseEvent }>()
+
   df$ = combineLatest([
     this.#point,
     this.#parcellation,
@@ -49,15 +59,19 @@ export class PointAssignmentComponent implements OnDestroy {
         return EMPTY
       }
       this.#busy$.next(true)
-      return this.sapi.v3Get("/map/assign", {
-        query: {
-          parcellation_id: parcellation.id,
-          point: point.coordinates.map(v => `${v.value/1e6}mm`).join(','),
-          space_id: template.id,
-          sigma_mm: 3.0
-        }
-      }).pipe(
-        tap(() => this.#busy$.next(false)),
+      return concat(
+        of(null),
+        this.sapi.v3Get("/map/assign", {
+          query: {
+            parcellation_id: parcellation.id,
+            point: point.coordinates.map(v => `${v.value/1e6}mm`).join(','),
+            space_id: template.id,
+            sigma_mm: 3.0
+          }
+        }).pipe(
+          tap(() => this.#busy$.next(false)),
+        )
+      ).pipe(
         shareReplay(1),
       )
     })
@@ -77,4 +91,8 @@ export class PointAssignmentComponent implements OnDestroy {
   ngOnDestroy(): void {
     while (this.#sub.length > 0) this.#sub.pop().unsubscribe()
   }
+  async selectRegion(region: PathReturn<"/regions/{region_id}">, event: MouseEvent){
+    const sxplrReg = await translateV3Entities.translateRegion(region)
+    this.clickOnRegion.emit({ target: sxplrReg, event })
+  }
 }

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -206,13 +206,16 @@
     </ng-template>
 
     <!-- if selected feature and selected point are both null, show default (selected region) -->
-    <ng-template [ngIf]="!view.selectedFeature && !view.selectedPoint"
-      [ngTemplateOutlet]="sidenavRegionTmpl"
-      [ngTemplateOutletContext]="{
-        view: view,
-        showFullSidenavSwitch: showFullSidenavSwitch
-      }">
+    <!-- ngIf and ngtemplateoutlet is required when ngIf changes too quickly, it seems -->
+    <ng-template  [ngIf]="!view.selectedFeature && !view.selectedPoint">
+      <ng-template
+        [ngTemplateOutlet]="sidenavRegionTmpl"
+        [ngTemplateOutletContext]="{
+          view: view,
+          showFullSidenavSwitch: showFullSidenavSwitch
+        }">
 
+      </ng-template>
     </ng-template>
   </ng-template>
 </ng-template>
@@ -1077,7 +1080,8 @@
   <sxplr-point-assignment
     [point]="view.selectedPoint"
     [template]="view.selectedTemplate"
-    [parcellation]="view.selectedParcellation">
+    [parcellation]="view.selectedParcellation"
+    (clickOnRegion)="$event.event.ctrlKey ? toggleRoi($event.target) : selectRoi($event.target)">
   </sxplr-point-assignment>
 </ng-template>