annotation list style changes

src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.component.ts

@@ -248,9 +248,11 @@ export class EditAnnotationComponent implements OnInit, OnDestroy {
     }
 
     removeLoadingAnnotation() {
-      const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations').layer
-      const annotations = annotationLayer.localAnnotations.toJSON()
-      annotationLayer.localAnnotations.restoreState(annotations.filter(a => a.id !== 'adding'))
+      const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations')?.layer
+      if (annotationLayer) {
+        const annotations = annotationLayer.localAnnotations.toJSON()
+        annotationLayer.localAnnotations.restoreState(annotations.filter(a => a.id !== 'adding'))
+      }
     }
 
     submitForm() {

src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.template.html

@@ -37,7 +37,8 @@
             <div class="d-flex flex-column align-items-center w-100">
                 <mat-form-field class="w-100 annotation-editing-body"
                     [ngStyle]="{border: cursorOut && selecting === 'position1'? '2px solid' : null}">
-                    <mat-label>position {{selectedType.twoCoordinates && ' 1'}} in mm (curr. voxel)</mat-label>
+                    <mat-label *ngIf="selectedType.name !== 'Ellipsoid'">position {{selectedType.twoCoordinates && ' 1'}}</mat-label>
+                    <mat-label *ngIf="selectedType.name === 'Ellipsoid'">center (vox)</mat-label>
                     <div>
                     <input type="text" name="position1"
                            placeholder="0,0,0"
@@ -45,7 +46,7 @@
                            formControlName="position1" matInput
                            (focusin)="position1Selected = false; changeSelectingPoint('position1')"
                            (focusout)="position1CursorOut()">
-                        <i *ngIf="cursorOut && selecting === 'position1'" class="fas fa-edit" style="margin-left: -20px;"></i>
+                        <i *ngIf="selecting === 'position1'" class="fas fa-crosshairs" style="margin-left: -20px;"></i>
                         <i *ngIf="position1Selected && !(cursorOut && selecting === 'position1')" class="fas fa-check-circle" style="margin-left: -20px;"></i>
                     </div>
                 </mat-form-field>
@@ -55,14 +56,15 @@
             <div class="d-flex flex-column align-items-center w-100" *ngIf="selectedType.twoCoordinates">
                 <mat-form-field class="w-100 annotation-editing-body"
                                 [ngStyle]="{border: cursorOut && selecting === 'position2'? '2px solid' : null}">
-                    <mat-label>position 2 in mm (curr. voxel)</mat-label>
+                    <mat-label *ngIf="selectedType.name !== 'Ellipsoid'">position 2 (vox)</mat-label>
+                    <mat-label *ngIf="selectedType.name === 'Ellipsoid'">radii</mat-label>
                     <input type="text" name="position2"
                            class="pr-4"
                            placeholder="0,0,0"
                            formControlName="position2" matInput
                            (focusin)="position2Selected = false; changeSelectingPoint('position2')"
                            (focusout)="position2CursorOut()">
-                    <i *ngIf="cursorOut && selecting === 'position2'" class="fas fa-edit" style="margin-left: -20px;"></i>
+                    <i *ngIf="selecting === 'position2'" class="fas fa-crosshairs" style="margin-left: -20px;"></i>
                     <i *ngIf="position2Selected && !(cursorOut && selecting === 'position2')" class="fas fa-check-circle" style="margin-left: -20px;"></i>
                 </mat-form-field>
                 <small *ngIf="cursorOut && selecting === 'position2'" style="margin-top: -20px;">selecting</small>

src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.components.ts

@@ -33,8 +33,11 @@ export class UserAnnotationsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.viewer?.layerManager.removeManagedLayer(
-        this.viewer.layerManager.getLayerByName('user_annotations'))
+    const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations')
+    if (annotationLayer) {
+      this.viewer?.layerManager.removeManagedLayer(
+          this.viewer.layerManager.getLayerByName('user_annotations'))
+    }
   }
 
   ngOnInit(): void {
@@ -142,10 +145,12 @@ export class UserAnnotationsComponent implements OnInit, OnDestroy {
   }
 
   removeAnnotationFromViewer(id) {
-    const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations').layer
-    let annotations = annotationLayer.localAnnotations.toJSON()
-    annotations = annotations.filter(a => a.id !== id)
-    annotationLayer.localAnnotations.restoreState(annotations)
+    const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations')?.layer
+    if (annotationLayer) {
+      let annotations = annotationLayer.localAnnotations.toJSON()
+      annotations = annotations.filter(a => a.id !== id)
+      annotationLayer.localAnnotations.restoreState(annotations)
+    }
   }
 
   // navigate(coord) {

src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.style.css

@@ -14,22 +14,6 @@
     max-height: 400px;
 }
 
-.anno-item {
-    background: #424242;
-    box-shadow:  5px 5px 10px #383838,
-    -5px -5px 10px #4c4c4c;
-}
-.hovering-border {
-    background: linear-gradient(145deg, #3b3b3b, #474747);
-    box-shadow:  5px 5px 10px #383838,
-    -5px -5px 10px #4c4c4c;
-}
-.selected-border {
-    background: #424242;
-    box-shadow: inset 5px 5px 10px #383838,
-    inset -5px -5px 10px #4c4c4c;
-}
-
 .minimize-icon {
     position: absolute;
     top: 10px;

src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.template.html

@@ -23,7 +23,7 @@
              aria-label="user annotations list"
              class="annotation-list d-flex flex-column overflow-auto mb-2">
             <div *ngFor="let annotation of annotations; let i = index;"
-                      [ngClass]="expanded === i? 'selected-border' : hovering === i? 'hovering-border' : 'anno-item'"
+                      [ngClass]="expanded === i? 'mat-elevation-z6' : hovering === i? 'mat-elevation-z8' : 'mat-elevation-z2'"
                       (mouseenter)="hovering = i"
                       (mouseleave)="hovering = -1"
                  class="p-2 pr-4 pl-4 m-2">

src/ui/topMenu/topMenuCmp/topMenu.template.html

@@ -133,7 +133,7 @@
 <!-- User annotations btn -->
 <ng-template #userAnnotationsBtnTmpl>
   <div class="btnWrapper"
-    (click)="bottomSheet.open(userAnnotations, {hasBackdrop: false})"
+    (click)="bottomSheet.open(userAnnotations, {hasBackdrop: false, disableClose: true})"
     matTooltip="My annotations">
     <iav-dynamic-mat-button
       [attr.pinned-datasets-length]="(favDataEntries$ | async)?.length"