Auto-update stats dialog and a button for it.

ndsev · Oct 24, 2024 · 3e2f6e0 · 3e2f6e0
1 parent 1a81fc8
commit 3e2f6e0
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 83 deletions.
diff --git a/erdblick_app/app/keyboard.service.ts b/erdblick_app/app/keyboard.service.ts
@@ -40,6 +40,10 @@ export class KeyboardService {
             const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
             const key = this.getKeyCombination(event);
 
+            // TODO: Ensure that tab and escape, when pressed in a text area,
+            //  result in a tab character/autocomplete cancelation rather than
+            //  focusing another control/closing the enclosing dialog.
+
             // Let non-ctrl key events or text editing shortcuts do their default things.
             if (isInput && (!key.includes("Ctrl") || ["ctrl+x", "ctrl+c", "ctrl+v"].includes(key.toLowerCase()))) {
                 return;

diff --git a/erdblick_app/app/map.service.ts b/erdblick_app/app/map.service.ts
@@ -599,6 +599,7 @@ export class MapService {
             this.removeTileLayer(this.loadedTileLayers.get(tileLayer.mapTileKey)!);
         }
         this.loadedTileLayers.set(tileLayer.mapTileKey, tileLayer);
+        this.statsDialogNeedsUpdate.next();
 
         // Schedule the visualization of the newly added tile layer,
         // but don't do it synchronously to avoid stalling the main thread.
@@ -633,6 +634,7 @@ export class MapService {
             return tileVisu.tile.mapTileKey !== tileLayer.mapTileKey;
         });
         this.loadedTileLayers.delete(tileLayer.mapTileKey);
+        this.statsDialogNeedsUpdate.next();
     }
 
     private renderTileLayer(tileLayer: FeatureTile, style: ErdblickStyle|FeatureLayerStyle, styleId: string = "") {

diff --git a/erdblick_app/app/preferences.component.ts b/erdblick_app/app/preferences.component.ts
@@ -17,22 +17,26 @@ import {MAX_NUM_TILES_TO_LOAD, MAX_NUM_TILES_TO_VISUALIZE, ParametersService} fr
                       pTooltip="Controls" tooltipPosition="right">
                 <span class="material-icons" style="font-size: 1.2em; margin: 0 auto;">keyboard</span>
             </p-button>
+            <p-button (click)="showStatsDialog()" label="" class="pref-button"
+                      pTooltip="Statistics" tooltipPosition="right">
+                <span class="material-icons" style="font-size: 1.2em; margin: 0 auto;">insights</span>
+            </p-button>
         </div>
         <p-dialog header="Preferences" [(visible)]="dialogVisible" [position]="'center'"
                   [resizable]="false" [modal]="true" #pref class="pref-dialog">
             <!-- Label and input field for MAX_NUM_TILES_TO_LOAD -->
             <div class="slider-container">
                 <label [for]="tilesToLoadInput">Max Tiles to Load:</label>
                 <div style="display: inline-block">
-                    <input class="tiles-input w-full" type="text" pInputText [(ngModel)]="tilesToLoadInput"/>
+                    <input class="tiles-input w-full" type="text" pInputText [(ngModel)]="tilesToLoadInput" (keydown.enter)="applyTileLimits()"/>
                     <p-slider [(ngModel)]="tilesToLoadInput" class="w-full" [min]="0" [max]="MAX_NUM_TILES_TO_LOAD"></p-slider>
                 </div>
             </div>
             <!-- Label and input field for MAX_NUM_TILES_TO_VISUALIZE -->
             <div class="slider-container">
                 <label [for]="tilesToVisualizeInput">Max Tiles to Visualize:</label>
                 <div style="display: inline-block">
-                    <input class="tiles-input w-full" type="text" pInputText [(ngModel)]="tilesToVisualizeInput"/>
+                    <input class="tiles-input w-full" type="text" pInputText [(ngModel)]="tilesToVisualizeInput" (keydown.enter)="applyTileLimits()"/>
                     <p-slider [(ngModel)]="tilesToVisualizeInput" class="w-full" [min]="0" [max]="MAX_NUM_TILES_TO_VISUALIZE"></p-slider>
                 </div>
             </div>
@@ -116,94 +120,95 @@ import {MAX_NUM_TILES_TO_LOAD, MAX_NUM_TILES_TO_VISUALIZE, ParametersService} fr
             <p-button (click)="controls.close($event)" label="Close" icon="pi pi-times"></p-button>
         </p-dialog>
     `,
-    styles: [`
-        .slider-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 30em;
-            margin: 1em 0;
-        }
-        
-        .tiles-input {
-            font-size: medium;
-            text-align: center;
-            width: 17em;
-            padding: 0.5em;
-        }
-        
-        .keyboard-dialog {
-            width: 25em;
-            text-align: center;
-            background-color: white;
-        }
+    styles: [
+        `
+            .slider-container {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 30em;
+                margin: 1em 0;
+            }
 
-        h2 {
-            font-size: 1.5em;
-            color: #333;
-            margin-bottom: 1em;
-            font-weight: bold;
-        }
+            .tiles-input {
+                font-size: medium;
+                text-align: center;
+                width: 17em;
+                padding: 0.5em;
+            }
 
-        .keyboard-list {
-            list-style-type: none;
-            padding: 0;
-        }
+            .keyboard-dialog {
+                width: 25em;
+                text-align: center;
+                background-color: white;
+            }
 
-        .keyboard-list li {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1em;
-        }
+            h2 {
+                font-size: 1.5em;
+                color: #333;
+                margin-bottom: 1em;
+                font-weight: bold;
+            }
 
-        .keyboard-list li span {
-            display: inline-block;
-            background-color: #eef1f7;
-            padding: 0.5em 0.75em;
-            border-radius: 0.5em;
-            color: #333;
-            font-weight: bold;
-            min-width: 4em;
-            text-align: center;
-        }
+            .keyboard-list {
+                list-style-type: none;
+                padding: 0;
+            }
 
-        .control-desc {
-            color: #666;
-            font-size: 0.9em;
-        }
+            .keyboard-list li {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 1em;
+            }
 
-        /* Keyboard key styling */
-        .key {
-            border-radius: 0.5em;
-            background-color: #ffcc00;
-            font-size: 1em;
-            padding: 0.5em 0.75em;
-            color: #333;
-        }
+            .keyboard-list li span {
+                display: inline-block;
+                background-color: #eef1f7;
+                padding: 0.5em 0.75em;
+                border-radius: 0.5em;
+                color: #333;
+                font-weight: bold;
+                min-width: 4em;
+                text-align: center;
+            }
 
-        .key-multi {
-            display: flex;
-            gap: 0.25em;
-        }
+            .control-desc {
+                color: #666;
+                font-size: 0.9em;
+            }
 
-        .key-multi .key {
-            background-color: #00bcd4;
-            padding: 0.3em 0.6em;
-        }
+            /* Keyboard key styling */
+            .key {
+                border-radius: 0.5em;
+                background-color: #ffcc00;
+                font-size: 1em;
+                padding: 0.5em 0.75em;
+                color: #333;
+            }
 
-        .highlight {
-            background-color: #ff5722;
-            color: white;
-        }
-        
-        @media only screen and (max-width: 56em) {
-            .elevated {
-                bottom: 3.5em;
-                padding-bottom: 0;
+            .key-multi {
+                display: flex;
+                gap: 0.25em;
             }
-        }
-    `]
+
+            .key-multi .key {
+                background-color: #00bcd4;
+                padding: 0.3em 0.6em;
+            }
+
+            .highlight {
+                background-color: #ff5722;
+                color: white;
+            }
+
+            @media only screen and (max-width: 56em) {
+                .elevated {
+                    bottom: 3.5em;
+                    padding-bottom: 0;
+                }
+            }
+        `]
 })
 export class PreferencesComponent {
 
@@ -246,6 +251,11 @@ export class PreferencesComponent {
         this.controlsDialogVisible = true;
     }
 
+    showStatsDialog() {
+        this.mapService.statsDialogVisible = true;
+        this.mapService.statsDialogNeedsUpdate.next();
+    }
+
     openHelp() {
         window.open("https://developer.nds.live/tools/the-new-mapviewer/user-guide", "_blank");
     }

diff --git a/erdblick_app/app/stats.component.ts b/erdblick_app/app/stats.component.ts
@@ -1,5 +1,6 @@
 import {Component} from "@angular/core";
 import {MapService} from "./map.service";
+import {debounceTime} from "rxjs";
 
 @Component({
     selector: 'stats-dialog',
@@ -17,7 +18,7 @@ import {MapService} from "./map.service";
                         [style]="{'width': '100%'}">
                 </p-multiSelect>
                 <p-checkbox label="Consider Empty Tiles" [(ngModel)]="considerEmptyTiles" [binary]="true" (ngModelChange)="update()"></p-checkbox>
-                <div>Total number of considered tiles: {{ consideredTilesCount }}</div>
+                <div>Total number of considered tile layers: {{ consideredTilesCount }}</div>
                 <table class="stats-table">
                     <thead>
                     <tr>
@@ -34,7 +35,7 @@ import {MapService} from "./map.service";
                     </tr>
                     </tbody>
                 </table>
-                <button pButton type="button" label="Update" icon="pi pi-refresh" (click)="update()"></button>
+                <button pButton type="button" [label]="needsUpdate ? 'Will update once tiles finished loading. Click to update now.' : 'Up to date.'" icon="pi pi-refresh" (click)="update()"></button>
             </div>
         </p-dialog>
     `,
@@ -67,10 +68,12 @@ export class StatsDialogComponent {
     public selectedMapLayers: { label: string }[] = [];
     public considerEmptyTiles: boolean = false;
     public consideredTilesCount: number = 0;
+    public needsUpdate: boolean = false;
 
     constructor(public mapService: MapService) {
         this.update();
-        this.mapService.statsDialogNeedsUpdate.subscribe(_ => this.update());
+        this.mapService.statsDialogNeedsUpdate.subscribe(_ => this.needsUpdate = true);
+        this.mapService.statsDialogNeedsUpdate.pipe(debounceTime(1000)).subscribe(_ => this.update());
     }
 
     update(): void {
@@ -116,5 +119,7 @@ export class StatsDialogComponent {
             const average = values.reduce((sum, val) => sum + val, 0) / values.length;
             return { name: statKey, peak, average };
         }).sort((a, b) => a.name.localeCompare(b.name));
+
+        this.needsUpdate = false;
     }
 }