feat: allow toggle off hemisphere

src/viewerModule/threeSurfer/module.ts

 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
 import { AngularMaterialModule } from "src/ui/sharedModules/angularMaterial.module";
+import { UtilModule } from "src/util";
 import { ThreeSurferGlueCmp } from "./threeSurferGlue/threeSurfer.component";
 import { ThreeSurferViewerConfig } from "./tsViewerConfig/tsViewerConfig.component";
 
@@ -8,6 +10,8 @@ import { ThreeSurferViewerConfig } from "./tsViewerConfig/tsViewerConfig.compone
   imports: [
     CommonModule,
     AngularMaterialModule,
+    UtilModule,
+    FormsModule,
   ],
   declarations: [
     ThreeSurferGlueCmp,

src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts

@@ -37,6 +37,8 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
   public modes: TThreeSurferMode[] = []
   public selectedMode: string
 
+  public allKeys: {name: string, checked: boolean}[] = []
+
   private regionMap: Map<string, Map<number, any>> = new Map()
   constructor(
     private el: ElementRef,
@@ -54,6 +56,7 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
   }[] = []
 
   private unloadAllMeshes() {
+    this.allKeys = []
     while(this.loadedMeshes.length > 0) {
       const m = this.loadedMeshes.pop()
       this.tsRef.unloadMesh(m.threeSurfer)
@@ -68,7 +71,8 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
     const { meshes } = mode
     for (const singleMesh of meshes) {
       const { mesh, colormap, hemisphere } = singleMesh
-      
+      this.allKeys.push({name: hemisphere, checked: true})
+
       const tsM = await this.tsRef.loadMesh(
         parseContext(mesh, [this.config['@context']])
       )
@@ -182,6 +186,13 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
       const found = this.loadedMeshes.find(({ threeSurfer }) => threeSurfer === evGeom)
       
       if (!found) return this.handleMouseoverEvent(custEv)
+      
+      /**
+       * check if the mesh is toggled off
+       * if so, do not proceed
+       */
+      const checkKey = this.allKeys.find(key => key.name === found.hemisphere)
+      if (checkKey && !checkKey.checked) return 
 
       const { hemisphere: key, vIdxArr } = found
 
@@ -254,6 +265,18 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
       ).join(' / ')
   }
 
+  public handleCheckBox(key: { name: string, checked: boolean }, flag: boolean){
+    const foundMesh = this.loadedMeshes.find(m => m.hemisphere === key.name)
+    if (!foundMesh) {
+      throw new Error(`Cannot find mesh with name: ${key.name}`)
+    }
+    const meshObj = this.tsRef.customColormap.get(foundMesh.threeSurfer)
+    if (!meshObj) {
+      throw new Error(`mesh obj not found!`)
+    }
+    meshObj.mesh.visible = flag
+  }
+
   private onDestroyCb: (() => void) [] = []
 
   ngOnDestroy() {

src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.style.css

@@ -5,19 +5,18 @@
   width: 100%;
 }
 
-:host > div
-{
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-button[mat-icon-button]
+.button-container
 {
   z-index: 1;
   position: fixed;
   bottom: 1rem;
   right: 1rem;
+  width: 0px;
+  height:0px;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 
 span.mouseover

src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html

@@ -2,13 +2,40 @@
   class="mouseover iv-custom-comp text">
   {{ mouseoverText }}
 </span>
-<button mat-icon-button
-  color="primary"
-  class="pe-all"
-  [matMenuTriggerFor]="fsModeSelMenu">
-  <i class="fas fa-bars"></i>
-</button>
 
+<div class="button-container">
+
+  <!-- configurator -->
+  <button mat-icon-button
+    color="primary"
+    [matMenuTriggerFor]="configMenu"
+    class="pe-all">
+    <i class="fas fa-cog"></i>
+  </button>
+
+  <!-- selector -->
+  <button mat-icon-button
+    color="primary"
+    class="pe-all"
+    [matMenuTriggerFor]="fsModeSelMenu">
+    <i class="fas fa-bars"></i>
+  </button>
+</div>
+
+<!-- config menu -->
+<mat-menu #configMenu="matMenu">
+  <div class="iv-custom-comp text p-2">
+    <mat-checkbox *ngFor="let key of allKeys"
+      class="d-block"
+      iav-stop="click"
+      (ngModelChange)="handleCheckBox(key, $event)"
+      [(ngModel)]="key.checked">
+      {{ key.name }}
+    </mat-checkbox>
+  </div>
+</mat-menu>
+
+<!-- selector menu -->
 <mat-menu #fsModeSelMenu="matMenu">
   <button *ngFor="let mode of modes"
     mat-menu-item