chore: unify custom css class

feat: region accent in region hierarchy
chore: removed unused functions
refactor: enable threesurfer
chore: slight optimization of atlas selection store

src/atlasComponents/sapi/core/sapiRegion.ts

@@ -4,7 +4,7 @@ import { strToRgb, hexToRgb } from 'common/util'
 
 export class SAPIRegion{
 
-  static GetDisplayColor(region: SapiRegionModel){
+  static GetDisplayColor(region: SapiRegionModel): [number, number, number]{
     if (!region) {
       throw new Error(`region must be provided!`)
     }

src/atlasComponents/sapiViews/core/parcellation/tile/parcellation.tile.template.html

@@ -11,7 +11,7 @@
           *ngFor="let parc of subParcellations">
 
           <tile-cmp *ngIf="parc"
-            class="iv-custom-comp text"
+            class="sxplr-custom-cmp text"
             [tile-text]="parc.name"
             [tile-image-src]="parc | previewParcellationUrl"
             [tile-selected]="selected"

src/atlasComponents/sapiViews/core/region/region/chip/region.chip.template.html

@@ -23,7 +23,7 @@
   }">
   <mat-chip
     (click)="onClick($event)"
-    class="iv-custom-comp text"
+    class="sxplr-custom-cmp text"
     [style.backgroundColor]="regionRgbString"
     >
     <ng-template [ngTemplateOutlet]="prefixTmpl"></ng-template>

src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html

@@ -23,7 +23,7 @@
 
     <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
 
-    <mat-card-title class="iv-custom-comp text">
+    <mat-card-title class="sxplr-custom-cmp text">
       {{ region.name }}
     </mat-card-title>
 

src/atlasComponents/sapiViews/core/rich/regionsHierarchy/regionsHierarchy.component.ts

@@ -36,6 +36,9 @@ export class SapiViewsCoreRichRegionsHierarchy {
     )
   }
 
+  @Input('sxplr-sapiviews-core-rich-regionshierarchy-accent-regions')
+  accentedRegions: SapiRegionModel[] = []
+
   @Input('sxplr-sapiviews-core-rich-regionshierarchy-placeholder')
   placeholderText: string = 'Search all regions'
 

src/atlasComponents/sapiViews/core/rich/regionsHierarchy/regionsHierarchy.template.html

-<form class="iv-custom-comp text sxplr-w-100">
+<form class="sxplr-custom-cmp text sxplr-w-100">
   <mat-form-field class="sxplr-w-100">
     <input
       [placeholder]="placeholderText"
@@ -18,6 +18,9 @@
 
 <ng-template #tmplRef let-region>
   <div class="mat-body sxplr-d-flex sxplr-align-items-center sxplr-h-100 region-tmpl"
+    [ngClass]="{
+      'sxplr-custom-cmp accent': accentedRegions | includes : region
+    }"
     [innerHTML]="region.name | hightlightPipe : searchTerm">
   </div>
 </ng-template>
@@ -27,5 +30,6 @@
   [sxplr-flat-hierarchy-is-parent]="isParent"
   [sxplr-flat-hierarchy-render-node-tmpl]="tmplRef"
   [sxplr-flat-hierarchy-tree-view-expand-on-init]="true"
+  sxplr-flat-hierarchy-tree-view-lineheight="24"
   (sxplr-flat-hierarchy-tree-view-node-clicked)="nodeClicked.emit($event)">
 </sxplr-flat-hierarchy-tree-view>
\ No newline at end of file

src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.component.ts

@@ -70,10 +70,6 @@ export class SapiViewsCoreRichRegionListSearch {
     return region?.name || ''
   }
 
-  onInputFocus(){
-    this.regions[0].name.includes('left')
-  }
-
   optionSelected(opt: MatAutocompleteSelectedEvent) {
     const selectedRegion = opt.option.value as SapiRegionModel
     this.onOptionSelected.emit(selectedRegion)

src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html

-<form class="iv-custom-comp text sxplr-w-100">
+<form class="sxplr-custom-cmp text sxplr-w-100">
   <mat-form-field
     class="sxplr-w-100"
     floatLabel="never">
@@ -7,7 +7,6 @@
       [value]="currentSearch"
       #trigger="matAutocompleteTrigger"
       type="text"
-      (focus)="onInputFocus()"
       matInput
       name="searchTerm"
       [attr.aria-label]="ARIA_LABELS.TEXT_INPUT_SEARCH_REGION"

src/atlasComponents/userAnnotations/tools/line/line.template.html

@@ -36,10 +36,10 @@
 </div>
 
 <mat-menu #exportMenu="matMenu" xPosition="before">
-  <div class="iv-custom-comp card text"
+  <div class="sxplr-custom-cmp card text"
     iav-stop="click">
 
-    <div class="iv-custom-comp text">
+    <div class="sxplr-custom-cmp text">
       <textarea-copy-export
         [textarea-copy-export-label]="useFormat"
         [textarea-copy-export-text]="updateAnnotation.updateSignal$ | async | toFormattedStringPipe : updateAnnotation : useFormat"

src/atlasComponents/userAnnotations/tools/point/point.template.html

@@ -35,10 +35,10 @@
 </div>
 
 <mat-menu #exportMenu="matMenu" xPosition="before">
-  <div class="iv-custom-comp card text"
+  <div class="sxplr-custom-cmp card text"
     iav-stop="click">
 
-    <div class="iv-custom-comp text">
+    <div class="sxplr-custom-cmp text">
 
       <textarea-copy-export
         [textarea-copy-export-label]="useFormat"

src/atlasComponents/userAnnotations/tools/poly/poly.template.html

@@ -36,10 +36,10 @@
 </div>
 
 <mat-menu #exportMenu="matMenu" xPosition="before">
-  <div class="iv-custom-comp card text"
+  <div class="sxplr-custom-cmp card text"
     iav-stop="click">
 
-    <div class="iv-custom-comp text">
+    <div class="sxplr-custom-cmp text">
       <textarea-copy-export
         [textarea-copy-export-label]="useFormat"
         [textarea-copy-export-text]="updateAnnotation.updateSignal$ | async | toFormattedStringPipe : updateAnnotation : useFormat"

src/components/flatHierarchy/treeView/treeView.component.ts

@@ -15,7 +15,7 @@ import { TreeNode } from "../const"
 
 export class SxplrFlatHierarchyTreeView<T extends object> implements OnChanges{
   @HostBinding('class')
-  class = 'iv-custom-comp'
+  class = 'sxplr-custom-cmp'
 
   @Input('sxplr-flat-hierarchy-nodes')
   nodes: T[] = []

src/components/tile/tile.template.html

@@ -9,7 +9,7 @@
         backgroundColor: darktheme ? 'white' : 'black',
         color: darktheme ? 'black': 'white'
       }"
-      class="mat-elevation-z2 iv-custom-comp info-button">
+      class="mat-elevation-z2 sxplr-custom-cmp info-button">
       <small>
         <i class="fas fa-info"></i>
       </small>
@@ -23,7 +23,7 @@
       'darktheme': darktheme,
       'lighttheme': !darktheme
     }">
-    <i class="fas fa-folder folder-container fa-2x iv-custom-comp text"></i>
+    <i class="fas fa-folder folder-container fa-2x sxplr-custom-cmp text"></i>
   </div>
 
   <img [src]="tileImgSrc"

src/components/vButton/vButton.component.ts

@@ -19,7 +19,7 @@ export class IAVVerticalButton{
   private color$ = new Subject<TIVBColor>()
   public class$ = this.color$.pipe(
     startWith('default'),
-    map(colorCls => `d-flex flex-column align-items-center iv-custom-comp ${colorCls} h-100`)
+    map(colorCls => `d-flex flex-column align-items-center sxplr-custom-cmp ${colorCls} h-100`)
   )
 
   @Input()

src/overwrite.scss

@@ -244,3 +244,16 @@ $flex-wrap-vars: nowrap, wrap, wrap-reverse;
     flex-wrap: $flex-wrap-var;
   }
 }
+$flex-directions: row,column;
+@each $flex-direction in $flex-directions {
+  .#{$nsp}-flex-#{$flex-direction} {
+    flex-direction: $flex-direction;
+  }
+}
+.#{$nsp}-flex-var {
+  flex: 1 1 0px;
+}
+
+.#{$nsp}-flex-static {
+  flex: 0 0 auto;
+}
\ No newline at end of file

src/screenshot/screenshotCmp/screenshot.template.html

@@ -2,7 +2,7 @@
 <ng-template #placeholderTmpl>
 
   <div class="d-flex align-items-center justify-content-center w-100 h-100 cover">
-    <span class="iv-custom-comp text">
+    <span class="sxplr-custom-cmp text">
       <h2 class="mat-h2 text-center">
         <span>
           Drag a box to take a screenshot or

src/sharedModules/angularMaterial.module.ts

@@ -97,7 +97,6 @@ const defaultDialogOption: MatDialogConfig = new MatDialogConfig()
     provide: MAT_DIALOG_DEFAULT_OPTIONS,
     useValue: {
       ...defaultDialogOption,
-      panelClass: 'iav-dialog-class',
     },
   }],
 })

src/state/atlasAppearance/const.ts

-import { SAPIRegion } from "src/atlasComponents/sapi/core"
+import { SapiRegionModel } from "src/atlasComponents/sapi"
 export const nameSpace = `[state.atlasAppearance]`
 
 type CustomLayerBase = {
@@ -7,7 +7,20 @@ type CustomLayerBase = {
 
 export type ColorMapCustomLayer = {
   clType: 'customlayer/colormap' | 'baselayer/colormap'
-  colormap: WeakMap<SAPIRegion, number[]>
+  colormap: WeakMap<SapiRegionModel, number[]>
+} & CustomLayerBase
+
+export type ThreeSurferCustomLayer = {
+  clType: 'baselayer/threesurfer'
+  source: string
+  laterality: 'left' | 'right'
+  name: string
+} & CustomLayerBase
+
+export type ThreeSurferCustomLabelLayer = {
+  clType: 'baselayer/threesurfer-label'
+  source: string
+  laterality: 'left' | 'right'
 } & CustomLayerBase
 
 export type NgLayerCustomLayer = {
@@ -36,4 +49,4 @@ export type NgLayerCustomLayer = {
  * - clType facilitates viewer on how to interprete the custom layer
  * - id allows custom layer to be removed, if necessary
  */
-export type CustomLayer = ColorMapCustomLayer | NgLayerCustomLayer
+export type CustomLayer = ColorMapCustomLayer | NgLayerCustomLayer | ThreeSurferCustomLayer | ThreeSurferCustomLabelLayer

src/state/atlasSelection/actions.ts

@@ -30,8 +30,15 @@ export const setSelectedParcellationAllRegions = createAction(
   }>()
 )
 
-export const selectRegions = createAction(
-  `${nameSpace} selectRegions`,
+export const selectRegion = createAction(
+  `${nameSpace} selectRegion`,
+  props<{
+    region: SapiRegionModel
+  }>()
+)
+
+export const setSelectedRegions = createAction(
+  `${nameSpace} setSelectedRegions`,
   props<{
     regions: SapiRegionModel[]
   }>()

src/state/atlasSelection/effects.ts

 import { Injectable } from "@angular/core";
 import { Actions, createEffect, ofType } from "@ngrx/effects";
-import { forkJoin, from, merge, of } from "rxjs";
+import { forkJoin, merge, of } from "rxjs";
 import { filter, map, mapTo, switchMap, switchMapTo, withLatestFrom } from "rxjs/operators";
-import { SAPI } from "src/atlasComponents/sapi";
+import { SAPI, SAPIRegion, SapiRegionModel } from "src/atlasComponents/sapi";
 import * as mainActions from "../actions"
 import { select, Store } from "@ngrx/store";
 import { selectors, actions } from '.'
 import { fromRootStore } from "./util";
 import { ParcellationIsBaseLayer } from "src/atlasComponents/sapiViews/core/parcellation/parcellationIsBaseLayer.pipe";
 import { OrderParcellationByVersionPipe } from "src/atlasComponents/sapiViews/core/parcellation/parcellationVersion.pipe";
+import { atlasAppearance } from "..";
 
 @Injectable()
 export class Effect {
@@ -62,6 +63,38 @@ export class Effect {
     )
   ))
 
+  onATPSelectionClearBaseLayerColorMap = createEffect(() => this.store.pipe(
+    select(selectors.selectedParcAllRegions),
+    withLatestFrom(
+      this.store.pipe(
+        select(atlasAppearance.selectors.customLayers),
+        map(layers => layers.filter(l => l.clType === "baselayer/colormap"))
+      )
+    ),
+    switchMap(([regions, layers]) => {
+      const map = new WeakMap<SapiRegionModel, number[]>()
+      for (const region of regions) {
+        map.set(region, SAPIRegion.GetDisplayColor(region))
+      }
+      const actions = [
+        ...layers.map(({ id }) =>
+          atlasAppearance.actions.removeCustomLayer({
+            id
+          })
+        ),
+        atlasAppearance.actions.addCustomLayer({
+          customLayer: {
+            clType: "baselayer/colormap",
+            id: 'base-colormap-id',
+            colormap: map
+          }
+        })
+      ]
+      return of(...actions)
+    })
+  ))
+
+
   onAtlasSelClearStandAloneVolumes = createEffect(() => this.action.pipe(
     ofType(actions.selectAtlas),
     mapTo(actions.setStandAloneVolumes({
@@ -71,7 +104,7 @@ export class Effect {
 
   onClearRegion = createEffect(() => this.action.pipe(
     ofType(actions.clearSelectedRegions),
-    mapTo(actions.selectRegions({
+    mapTo(actions.setSelectedRegions({
       regions: []
     }))
   ))
@@ -146,7 +179,7 @@ export class Effect {
   ).pipe(
     switchMapTo(
       of(
-        actions.selectRegions({
+        actions.setSelectedRegions({
           regions: []
         }),
         actions.setSelectedParcellationAllRegions({
@@ -166,7 +199,7 @@ export class Effect {
     map(([ { region }, regions ]) => {
       const selectedRegionsIndicies = regions.map(r => r["@id"])
       const roiIndex = selectedRegionsIndicies.indexOf(region["@id"])
-      return actions.selectRegions({
+      return actions.setSelectedRegions({
         regions: roiIndex >= 0
           ? [...regions.slice(0, roiIndex), ...regions.slice(roiIndex + 1)]
           : [...regions, region]