Don't allow node styler button to be clicked when the dialog is opened

PiperOrigin-RevId: 722847795
google-ai-edge · Feb 4, 2025 · bd03aef · bd03aef
1 parent cd30a09
commit bd03aef
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/ui/src/components/visualizer/node_styler.ng.html b/src/ui/src/components/visualizer/node_styler.ng.html
@@ -18,6 +18,7 @@
 
 <button mat-icon-button aria-label="node-styler"
     matTooltip="Style nodes with custom rules"
+    [class.disabled]="dialogOpened()"
     (click)="handleClickOpenDialog()">
   <mat-icon [class.highlight]="hasNonEmptyNodeStylerRules()">palette</mat-icon>
 </button>
diff --git a/src/ui/src/components/visualizer/node_styler.scss b/src/ui/src/components/visualizer/node_styler.scss
@@ -17,6 +17,10 @@
  */
 
 button {
+  &.disabled {
+    pointer-events: none;
+  }
+
   mat-icon.highlight {
     background: linear-gradient(45deg, #0089ff 0 30%, #f1af00 70% 100%);
     background-clip: text;

diff --git a/src/ui/src/components/visualizer/node_styler.ts b/src/ui/src/components/visualizer/node_styler.ts
@@ -21,6 +21,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ViewContainerRef,
+  signal,
 } from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialog, MatDialogModule} from '@angular/material/dialog';
@@ -48,6 +49,7 @@ import {NodeStylerService} from './node_styler_service';
 })
 export class NodeStyler {
   readonly hasNonEmptyNodeStylerRules;
+  readonly dialogOpened = signal<boolean>(false);
 
   constructor(
     private readonly dialog: MatDialog,
@@ -59,7 +61,9 @@ export class NodeStyler {
   }
 
   handleClickOpenDialog() {
-    this.dialog.open(NodeStylerDialog, {
+    this.dialogOpened.set(true);
+
+    const dialogRef = this.dialog.open(NodeStylerDialog, {
       width: '800px',
       height: '600px',
 
@@ -69,5 +73,9 @@ export class NodeStyler {
       hasBackdrop: false,
       autoFocus: false,
     });
+
+    dialogRef.afterClosed().subscribe(() => {
+      this.dialogOpened.set(false);
+    });
   }
 }