only show selected regions if lengh > 0

update bookmark confirm icon

src/components/dialog/dialog.component.ts

@@ -15,6 +15,8 @@ import { filter, share } from "rxjs/operators";
 export class DialogComponent implements OnInit, OnDestroy {
 
   private subscrptions: Subscription[] = []
+
+  @Input() iconClass: string = `fas fa-save`
   
   @Input() title: string = 'Message'
   @Input() placeholder: string = "Type your response here"
@@ -29,11 +31,12 @@ export class DialogComponent implements OnInit, OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data:any,
     private dialogRef: MatDialogRef<DialogComponent>
   ){
-    const { title, placeholder, defaultValue, message } = this.data
+    const { title, placeholder, defaultValue, message, iconClass = null } = this.data
     if (title) this.title = title
     if (placeholder) this.placeholder = placeholder
     if (defaultValue) this.value = defaultValue
     if (message) this.message = message
+    if (typeof iconClass !== 'undefined') this.iconClass = iconClass
   }
 
   ngOnInit(){

src/components/dialog/dialog.template.html

@@ -32,7 +32,7 @@
     class="ml-1"
     mat-raised-button
     color="primary">
-    <i class="fas fa-save mr-1"></i>
+    <i *ngIf="iconClass" [ngClass]="iconClass" class="mr-1"></i>
     Confirm
   </button>
 </div>
\ No newline at end of file

src/plugin_examples/plugin_api.md

@@ -155,6 +155,7 @@ window.interactiveViewer
     "message":"Message to be seen by the user.", // default: ""
     "placeholder": "Start typing here", // default: "Type your response here"
     "defaultValue": "42" // default: ""
+    "iconClass":"fas fa-save" // default fas fa-save, set to falsy value to disable
   }
   ```
   - *getUserConfirmation(config)* returns a Promise, resolves when user confirms, rejects when user cancels. expects config object object with the following structure:

src/services/dialogService.service.ts

@@ -31,13 +31,20 @@ export class DialogService{
   }
 
   public getUserInput(config: Partial<DialogConfig> = {}):Promise<string>{
-    const { defaultValue = '', placeholder = 'Type your response here', title = 'Message', message = '' } = config
+    const {
+      defaultValue = '',
+      placeholder = 'Type your response here',
+      title = 'Message',
+      message = '',
+      iconClass
+    } = config
     this.dialogRef = this.dialog.open(DialogComponent, {
       data: {
         title,
         placeholder,
         defaultValue,
-        message
+        message,
+        iconClass
       }
     })
     return new Promise((resolve, reject) => {
@@ -59,4 +66,5 @@ export interface DialogConfig{
   placeholder: string
   defaultValue: string
   message: string
+  iconClass: string
 }
\ No newline at end of file

src/ui/viewerStateController/viewerState.component.ts

@@ -132,7 +132,8 @@ export class ViewerStateController implements OnInit{
     this.dialogService.getUserInput({
       defaultValue: savedRegionsSelection.name,
       placeholder: `Enter new name`,
-      title: 'Edit name'
+      title: 'Edit name',
+      iconClass: null
     }).then(name => {
       if (!name) throw new Error('user cancelled')
       this.store$.dispatch({
@@ -186,7 +187,8 @@ export class ViewerStateController implements OnInit{
     this.dialogService.getUserInput({
       defaultValue: `Saved Region`,
       placeholder: `Name the selection`,
-      title: 'Save region selection'
+      title: 'Save region selection',
+      iconClass: 'far fa-bookmark'
     })
       .then(name => {
         if (!name) throw new Error('User cancelled')

src/ui/viewerStateController/viewerState.template.html

@@ -135,7 +135,7 @@
 
   <!-- selected regions -->
   <mat-card-content>
-    <mat-chip-list>
+    <mat-chip-list *ngIf="(regionsSelected$ | async)?.length > 0 ">
       <cdk-virtual-scroll-viewport
         class="w-100 h-10em overflow-x-hidden"
         [itemSize]="32">