debounce indicators to prevent ridiculous flashing

jwetzell · Aug 9, 2023 · 0b5c7b2 · 0b5c7b2
1 parent 885beb8
commit 0b5c7b2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/webui/src/app/components/action/action.component.ts b/webui/src/app/components/action/action.component.ts
@@ -1,5 +1,6 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { tap, debounceTime } from 'rxjs';
 import { Action } from 'src/app/models/action.model';
 import { Transform } from 'src/app/models/transform.model';
 import { EventService } from 'src/app/services/event.service';
@@ -27,11 +28,19 @@ export class ActionComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.path) {
-      this.eventService.getActionEventsForPath(this.path).subscribe((actionEvent) => {
-        if (actionEvent.data.fired) {
-          this.flashIndicator();
-        }
-      });
+      this.eventService
+        .getActionEventsForPath(this.path)
+        .pipe(
+          tap((actionEvent) => {
+            if (actionEvent.data.fired) {
+              this.indicatorColor = 'greenyellow';
+            }
+          }),
+          debounceTime(200)
+        )
+        .subscribe((actionEvent) => {
+          this.indicatorColor = 'gray';
+        });
     }
   }
 
@@ -109,13 +118,6 @@ export class ActionComponent implements OnInit {
     this.updated.emit(this.pendingUpdate);
   }
 
-  flashIndicator() {
-    this.indicatorColor = 'greenyellow';
-    setTimeout(() => {
-      this.indicatorColor = 'gray';
-    }, 200);
-  }
-
   drop(event: CdkDragDrop<string[]>) {
     if (this.action?.transforms !== undefined) {
       moveItemInArray(this.action?.transforms, event.previousIndex, event.currentIndex);

diff --git a/webui/src/app/components/transform/transform.component.ts b/webui/src/app/components/transform/transform.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { tap, debounceTime } from 'rxjs';
 import { Transform } from 'src/app/models/transform.model';
 import { EventService } from 'src/app/services/event.service';
 
@@ -21,11 +22,19 @@ export class TransformComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.path) {
-      this.eventService.getTransformEventsForPath(this.path).subscribe((transformEvent) => {
-        if (transformEvent.data.fired) {
-          this.flashIndicator();
-        }
-      });
+      this.eventService
+        .getTransformEventsForPath(this.path)
+        .pipe(
+          tap((transformEvent) => {
+            if (transformEvent.data.fired) {
+              this.indicatorColor = 'greenyellow';
+            }
+          }),
+          debounceTime(200)
+        )
+        .subscribe((transformEvent) => {
+          this.indicatorColor = 'gray';
+        });
     }
   }
 
@@ -47,11 +56,4 @@ export class TransformComponent implements OnInit {
     };
     this.updated.emit(this.pendingUpdate);
   }
-
-  flashIndicator() {
-    this.indicatorColor = 'greenyellow';
-    setTimeout(() => {
-      this.indicatorColor = 'gray';
-    }, 200);
-  }
 }
diff --git a/webui/src/app/components/trigger/trigger.component.ts b/webui/src/app/components/trigger/trigger.component.ts
@@ -1,5 +1,6 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { debounceTime, tap } from 'rxjs';
 import { Action } from 'src/app/models/action.model';
 import { Trigger } from 'src/app/models/trigger.model';
 import { EventService } from 'src/app/services/event.service';
@@ -25,11 +26,19 @@ export class TriggerComponent implements OnInit {
 
   ngOnInit() {
     if (this.path) {
-      this.eventService.getTriggerEventsForPath(this.path).subscribe((triggerEvent) => {
-        if (triggerEvent.data.fired) {
-          this.flashIndicator();
-        }
-      });
+      this.eventService
+        .getTriggerEventsForPath(this.path)
+        .pipe(
+          tap((triggerEvent) => {
+            if (triggerEvent.data.fired) {
+              this.indicatorColor = 'greenyellow';
+            }
+          }),
+          debounceTime(200)
+        )
+        .subscribe((triggerEvent) => {
+          this.indicatorColor = 'gray';
+        });
     }
   }
 
@@ -108,13 +117,6 @@ export class TriggerComponent implements OnInit {
     this.updated.next(this.pendingUpdate);
   }
 
-  flashIndicator() {
-    this.indicatorColor = 'greenyellow';
-    setTimeout(() => {
-      this.indicatorColor = 'gray';
-    }, 200);
-  }
-
   drop(event: CdkDragDrop<string[]>) {
     if (this.trigger?.actions !== undefined) {
       moveItemInArray(this.trigger?.actions, event.previousIndex, event.currentIndex);