From 492bf58663dc11042088fc1d89d1fafc044db1af Mon Sep 17 00:00:00 2001 From: Jeffrey <54014102+TheJeffreyKuo@users.noreply.github.com> Date: Tue, 28 Apr 2026 17:49:52 -0400 Subject: [PATCH 1/4] Graph page topic selection preset --- .../select-dropdown.component.ts | 7 +- .../graph-sidebar-desktop.component.css | 13 ++ .../graph-sidebar-desktop.component.html | 13 ++ .../graph-sidebar-desktop.component.ts | 66 +++++- .../graph-sidebar-mobile.component.css | 11 + .../graph-sidebar-mobile.component.html | 13 ++ .../graph-sidebar-mobile.component.ts | 75 ++++++- .../preset-dialog/preset-dialog.component.css | 112 ++++++++++ .../preset-dialog.component.html | 98 +++++++++ .../preset-dialog/preset-dialog.component.ts | 207 +++++++++++++++++ .../src/services/graph-preset.service.spec.ts | 208 ++++++++++++++++++ .../src/services/graph-preset.service.ts | 150 +++++++++++++ angular-client/src/utils/dataTypes.utils.ts | 15 ++ 13 files changed, 976 insertions(+), 12 deletions(-) create mode 100644 angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.css create mode 100644 angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html create mode 100644 angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts create mode 100644 angular-client/src/services/graph-preset.service.spec.ts create mode 100644 angular-client/src/services/graph-preset.service.ts diff --git a/angular-client/src/components/select-dropdown/select-dropdown.component.ts b/angular-client/src/components/select-dropdown/select-dropdown.component.ts index b9c48577..3c310516 100644 --- a/angular-client/src/components/select-dropdown/select-dropdown.component.ts +++ b/angular-client/src/components/select-dropdown/select-dropdown.component.ts @@ -39,12 +39,7 @@ export class SelectDropdownComponent { constructor() { effect(() => { const val = this.defaultValue(); - if (val) { - const match = this.options().find((option) => option.name === val); - if (match) { - this.selectedOption = match; - } - } + this.selectedOption = val ? this.options().find((option) => option.name === val) : undefined; }); } diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.css b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.css index 5c9f47ea..2bb58350 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.css +++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.css @@ -5,6 +5,19 @@ margin-top: 10px; } +.presets-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-bottom: 8px; +} + +.preset-select { + flex: 1 1 auto; + min-width: 0; +} + .header-row { display: flex; align-items: center; diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html index 39f4bb55..ba40bd1a 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html +++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html @@ -1,4 +1,17 @@
+
+ + +
(() => ({ + placeholder: 'Apply Preset…', + options: this.presets().map( + (p): DropdownOption => ({ + name: p.name, + function: () => this.applyPreset(p) + }) + ) + })); + activePresetName = toSignal(this.presetService.getActivePresetName(), { initialValue: undefined }); + ngOnInit(): void { const nodes = dataTypesToNodes(this.dataTypes()); this.treeNodes = mapNodesToTreeNodes(nodes, this.storage, this.injector); @@ -68,6 +92,24 @@ export default class GraphSidebarDesktopComponent implements OnInit { this.selectedNodes = undefined; }; + openPresetsDialog = () => { + const ref = this.dialogService.open(PresetDialogComponent, { + header: 'Topic Presets', + width: '640px', + draggable: true, + closable: true, + closeAriaLabel: 'Close', + data: { + dataTypes: this.dataTypes() + } + }); + ref.onClose.pipe(take(1)).subscribe((matched: DataType[] | null) => { + if (matched) { + this.applyMatched(matched); + } + }); + }; + nodeSelect(event: TreeNodeSelectEvent) { const dt = event.node.data?.dataType; if (dt) { @@ -89,4 +131,22 @@ export default class GraphSidebarDesktopComponent implements OnInit { this.topicSelectionService.removeDataType(dt); } } + + private applyPreset(preset: Preset) { + const { matched, unknown } = partitionDataTypesByName(this.dataTypes(), preset.topicNames); + if (unknown.length > 0) { + this.messageService.add({ + severity: 'warn', + summary: 'Unknown Topics Skipped', + detail: unknown.join(', '), + life: 8000 + }); + } + this.applyMatched(matched); + } + + private applyMatched(matched: DataType[]) { + this.topicSelectionService.setSelectedDataTypes(matched); + this.selectedNodes = findSelectedTreeNodes(this.activeNodes(), this.topicSelectionService); + } } diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.css b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.css index 3a2b26b1..ed54d698 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.css +++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.css @@ -27,6 +27,17 @@ height: 100%; } +.presets-row { + display: flex; + align-items: center; + gap: 8px; +} + +.preset-select { + flex: 1 1 auto; + min-width: 0; +} + .toggle-group { display: inline-flex; align-items: center; diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.html b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.html index fe998c27..4f9cdff3 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.html +++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.html @@ -6,6 +6,19 @@
+
+ + +
(); private topicSelectionService = inject(TopicSelectionService); + private presetService = inject(GraphPresetService); + private dialogService = inject(DialogService); + private messageService = inject(MessageService); private storage = inject(Storage); private injector = inject(Injector); @@ -47,6 +68,18 @@ export default class GraphSidebarMobileComponent implements OnInit { return this.flattenMode() ? this.flatNodes : this.treeNodes; }); + private presets = toSignal(this.presetService.getPresets(), { initialValue: [] as Preset[] }); + presetSelectorConfig = computed(() => ({ + placeholder: 'Apply Preset…', + options: this.presets().map( + (p): DropdownOption => ({ + name: p.name, + function: () => this.applyPreset(p) + }) + ) + })); + activePresetName = toSignal(this.presetService.getActivePresetName(), { initialValue: undefined }); + ngOnInit(): void { const nodes = dataTypesToNodes(this.dataTypes()); this.treeNodes = mapNodesToTreeNodes(nodes, this.storage, this.injector); @@ -76,6 +109,24 @@ export default class GraphSidebarMobileComponent implements OnInit { this.selectedNodes = undefined; }; + openPresetsDialog = () => { + const ref = this.dialogService.open(PresetDialogComponent, { + header: 'Topic Presets', + width: '90vw', + draggable: true, + closable: true, + closeAriaLabel: 'Close', + data: { + dataTypes: this.dataTypes() + } + }); + ref.onClose.pipe(take(1)).subscribe((matched: DataType[] | null) => { + if (matched) { + this.applyMatched(matched); + } + }); + }; + nodeSelect(event: TreeNodeSelectEvent) { const dt = event.node.data?.dataType; if (dt) { @@ -97,4 +148,22 @@ export default class GraphSidebarMobileComponent implements OnInit { this.topicSelectionService.removeDataType(dt); } } + + private applyPreset(preset: Preset) { + const { matched, unknown } = partitionDataTypesByName(this.dataTypes(), preset.topicNames); + if (unknown.length > 0) { + this.messageService.add({ + severity: 'warn', + summary: 'Unknown Topics Skipped', + detail: unknown.join(', '), + life: 8000 + }); + } + this.applyMatched(matched); + } + + private applyMatched(matched: DataType[]) { + this.topicSelectionService.setSelectedDataTypes(matched); + this.selectedNodes = findSelectedTreeNodes(this.activeNodes(), this.topicSelectionService); + } } diff --git a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.css b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.css new file mode 100644 index 00000000..e99cf329 --- /dev/null +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.css @@ -0,0 +1,112 @@ +.dialog-content { + display: flex; + flex-direction: column; + gap: 16px; +} + +.hidden-file-input { + display: none; +} + +.save-section { + display: flex; + flex-direction: column; + gap: 4px; +} + +.actions-row { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} + +.save-form { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1 1 280px; +} + +.save-form label { + color: #ccc; + font-size: 0.85rem; + font-weight: 600; +} + +.save-form-controls { + display: flex; + gap: 8px; +} + +.save-form-controls input { + flex: 1 1 auto; + min-width: 0; +} + +.hint { + color: #888; + font-size: 0.8rem; +} + +.presets-list { + border-top: 1px solid #2a2a2a; + padding-top: 12px; +} + +.empty-state { + text-align: center; + padding: 24px 12px; + border: 1px dashed #444; + border-radius: 6px; + color: #aaa; +} + +.empty-state p { + margin: 0 0 4px; + color: #ddd; +} + +.preset-table { + width: 100%; + border-collapse: collapse; + color: #eee; +} + +.preset-table th, +.preset-table td { + text-align: left; + padding: 8px; + border-bottom: 1px solid #2a2a2a; + font-size: 0.9rem; +} + +.preset-table th { + color: #aaa; + font-weight: 600; +} + +.preset-table td.topic-count, +.preset-table th.topic-count { + text-align: right; + width: 70px; +} + +.preset-table td.actions, +.preset-table th.actions { + text-align: right; + width: 1%; + white-space: nowrap; +} + +.preset-table td.actions button { + margin-left: 6px; +} + +.footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 4px; +} diff --git a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html new file mode 100644 index 00000000..6584d58e --- /dev/null +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html @@ -0,0 +1,98 @@ +
+ + +
+
+
+ +
+ + +
+
+ + +
+ @if (!hasSelection()) { + Select a topic to save a preset + } +
+ +
+ @if (presets().length === 0) { +
+

No presets yet

+ + Save your current topic selection or upload a JSON of your preset + +
+ } @else { + + + + + + + + + + @for (preset of presets(); track preset.id) { + + + + + + } + +
NameTopicsActions
{{ preset.name }}{{ preset.topicNames.length }} + + + +
+ } +
+ +
+ + +
+
diff --git a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts new file mode 100644 index 00000000..10243fb8 --- /dev/null +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts @@ -0,0 +1,207 @@ +import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, signal, viewChild } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { FormsModule } from '@angular/forms'; +import { MessageService } from 'primeng/api'; +import { ButtonDirective } from 'primeng/button'; +import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { InputText } from 'primeng/inputtext'; +import { GraphPresetService, Preset, PresetSeed } from 'src/services/graph-preset.service'; +import { TopicSelectionService } from 'src/services/topic-selection.service'; +import { partitionDataTypesByName } from 'src/utils/dataTypes.utils'; +import { DataType } from 'src/utils/types.utils'; + +interface PresetDialogData { + dataTypes: DataType[]; +} + +@Component({ + selector: 'preset-dialog', + templateUrl: './preset-dialog.component.html', + styleUrls: ['./preset-dialog.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [FormsModule, InputText, ButtonDirective] +}) +export class PresetDialogComponent { + private ref = inject(DynamicDialogRef); + private config = inject(DynamicDialogConfig); + private presetService = inject(GraphPresetService); + private topicSelectionService = inject(TopicSelectionService); + private messageService = inject(MessageService); + + private data = this.config.data as PresetDialogData; + private dataTypes = this.data.dataTypes; + private currentSelection = toSignal(this.topicSelectionService.getSelectedDataTypes(), { + initialValue: [] as DataType[] + }); + + presets = toSignal(this.presetService.getPresets(), { initialValue: [] as Preset[] }); + newPresetName = signal(''); + hasSelection = computed(() => this.currentSelection().length > 0); + fileInput = viewChild>('fileInput'); + + onSaveCurrent(): void { + const name = this.newPresetName().trim(); + if (name.length === 0 || !this.hasSelection()) return; + + const topicNames = this.currentSelection().map((dt) => dt.name); + const existing = this.presetService.findByName(name); + if (existing) { + if (!confirm(`A preset named "${name}" already exists. Replace its topics?`)) return; + this.presetService.replacePreset(existing.id, { topicNames }); + this.messageService.add({ + severity: 'success', + summary: 'Preset Replaced', + detail: `"${name}" now contains ${topicNames.length} topic(s)` + }); + } else { + this.presetService.addPreset(name, topicNames); + this.messageService.add({ + severity: 'success', + summary: 'Preset Saved', + detail: `"${name}" with ${topicNames.length} topic(s)` + }); + } + this.newPresetName.set(''); + } + + onUploadClick(): void { + this.fileInput()?.nativeElement.click(); + } + + onFileSelected(event: Event): void { + const input = event.target as HTMLInputElement; + const file = input.files?.[0]; + if (!file) return; + + input.value = ''; + + if (!file.name.toLowerCase().endsWith('.json')) { + this.messageService.add({ severity: 'error', summary: 'Invalid File', detail: 'Please select a .json file' }); + return; + } + + const reader = new FileReader(); + reader.onload = () => { + const text = reader.result as string; + const parsed = this.parsePresetJson(text); + if (!parsed) return; + + const fallbackName = file.name.replace(/\.json$/i, '').trim() || 'Untitled Preset'; + const name = parsed.name?.trim() || fallbackName; + + const existing = this.presetService.findByName(name); + if (existing) { + if (!confirm(`A preset named "${name}" already exists. Replace its topics?`)) return; + this.presetService.replacePreset(existing.id, { topicNames: parsed.topicNames }); + } else { + this.presetService.addPreset(name, parsed.topicNames); + } + this.messageService.add({ + severity: 'success', + summary: 'Preset Imported', + detail: `"${name}" with ${parsed.topicNames.length} topic(s)` + }); + }; + reader.onerror = () => { + this.messageService.add({ severity: 'error', summary: 'Read Error', detail: 'Failed to read file' }); + }; + reader.readAsText(file); + } + + onApply(preset: Preset): void { + const { matched, unknown } = partitionDataTypesByName(this.dataTypes, preset.topicNames); + if (unknown.length > 0) { + this.messageService.add({ + severity: 'warn', + summary: 'Unknown Topics Skipped', + detail: unknown.join(', '), + life: 8000 + }); + } + this.ref.close(matched); + } + + onDownload(preset: Preset): void { + const exported: PresetSeed = { name: preset.name, topicNames: [...preset.topicNames] }; + const blob = new Blob([JSON.stringify(exported, null, 2)], { type: 'application/json;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + + const link = document.createElement('a'); + link.href = url; + link.download = `${this.sanitizeFilename(preset.name)}.json`; + link.click(); + + URL.revokeObjectURL(url); + } + + onDelete(preset: Preset): void { + if (!confirm(`Delete preset "${preset.name}"?`)) return; + this.presetService.deletePreset(preset.id); + this.messageService.add({ severity: 'success', summary: 'Preset Deleted', detail: preset.name }); + } + + onRestoreDefaults(): void { + const added = this.presetService.restoreDefaults(); + if (added === 0) { + this.messageService.add({ + severity: 'info', + summary: 'Defaults Already Present', + detail: 'All default presets are already in your list.' + }); + } else { + this.messageService.add({ + severity: 'success', + summary: 'Defaults Restored', + detail: `Added ${added} default preset${added === 1 ? '' : 's'}.` + }); + } + } + + onClose(): void { + this.ref.close(null); + } + + private parsePresetJson(text: string): { name?: string; topicNames: string[] } | null { + let parsed: unknown; + try { + parsed = JSON.parse(text); + } catch { + this.messageService.add({ severity: 'error', summary: 'Parse Error', detail: 'File is not valid JSON' }); + return null; + } + + if (Array.isArray(parsed)) { + const topics = parsed.filter((n): n is string => typeof n === 'string' && n.length > 0); + if (topics.length === 0) { + this.messageService.add({ severity: 'error', summary: 'Parse Error', detail: 'No topic names found' }); + return null; + } + return { topicNames: Array.from(new Set(topics)) }; + } + + if (typeof parsed === 'object' && parsed !== null) { + const { name, topicNames } = parsed as Record; + if ( + Array.isArray(topicNames) && + topicNames.every((n): n is string => typeof n === 'string') && + topicNames.length > 0 + ) { + return { + name: typeof name === 'string' ? name : undefined, + topicNames: Array.from(new Set(topicNames.filter((n) => n.length > 0))) + }; + } + } + + this.messageService.add({ + severity: 'error', + summary: 'Parse Error', + detail: 'Expected an object with a "topicNames" string array, or a bare array of topic names' + }); + return null; + } + + private sanitizeFilename(name: string): string { + return name.replace(/[\\/:*?"<>|]/g, '_').trim() || 'preset'; + } +} diff --git a/angular-client/src/services/graph-preset.service.spec.ts b/angular-client/src/services/graph-preset.service.spec.ts new file mode 100644 index 00000000..e298d9d8 --- /dev/null +++ b/angular-client/src/services/graph-preset.service.spec.ts @@ -0,0 +1,208 @@ +import { TestBed } from '@angular/core/testing'; +import { GraphPresetService, PRESET_SEEDS, Preset } from './graph-preset.service'; + +const STORAGE_KEY = 'argos.graphPresets'; + +function makeStoredPreset(overrides: Partial = {}): Preset { + return { + id: 'fixture-id', + name: 'Fixture', + topicNames: ['BMS/Pack/SOC'], + createdAt: 1700000000000, + ...overrides + }; +} + +describe('GraphPresetService', () => { + beforeEach(() => { + localStorage.clear(); + }); + + function build(): GraphPresetService { + TestBed.configureTestingModule({ providers: [GraphPresetService] }); + return TestBed.inject(GraphPresetService); + } + + it('seeds defaults when localStorage has never been written', () => { + expect(localStorage.getItem(STORAGE_KEY)).toBeNull(); + + const service = build(); + + const presets = service.getPresets().value; + expect(presets.map((p) => p.name)).toEqual(PRESET_SEEDS.map((s) => s.name)); + expect(presets.every((p) => p.id.length > 0)).toBe(true); + expect(presets.every((p) => p.createdAt > 0)).toBe(true); + + const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)!); + expect(stored).toEqual(presets); + }); + + it('does not seed when localStorage holds an empty array', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + + const service = build(); + + expect(service.getPresets().value).toEqual([]); + }); + + it('does not seed when localStorage already has user presets', () => { + const stored = makeStoredPreset({ id: 'user-1', name: 'My Preset' }); + localStorage.setItem(STORAGE_KEY, JSON.stringify([stored])); + + const service = build(); + + expect(service.getPresets().value).toEqual([stored]); + }); + + it('addPreset appends a preset and persists it', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + + const preset = service.addPreset('Vitals', ['BMS/Pack/SOC', 'MPU/State/Speed']); + + expect(preset.name).toBe('Vitals'); + expect(preset.topicNames).toEqual(['BMS/Pack/SOC', 'MPU/State/Speed']); + expect(preset.id).toBeTruthy(); + expect(service.getPresets().value).toEqual([preset]); + + const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)!); + expect(stored).toEqual([preset]); + }); + + it('addPreset trims whitespace from the name', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + + const preset = service.addPreset(' Race-day ', ['A']); + expect(preset.name).toBe('Race-day'); + }); + + it('addPreset throws on empty/whitespace-only names', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + + expect(() => service.addPreset('', ['A'])).toThrowError(/empty/i); + expect(() => service.addPreset(' ', ['A'])).toThrowError(/empty/i); + }); + + it('replacePreset updates fields without changing id or createdAt', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + const original = service.addPreset('Vitals', ['A']); + + service.replacePreset(original.id, { name: 'Vitals v2', topicNames: ['A', 'B'] }); + + const [updated] = service.getPresets().value; + expect(updated.id).toBe(original.id); + expect(updated.createdAt).toBe(original.createdAt); + expect(updated.name).toBe('Vitals v2'); + expect(updated.topicNames).toEqual(['A', 'B']); + }); + + it('deletePreset removes the entry by id', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + const a = service.addPreset('A', ['x']); + const b = service.addPreset('B', ['y']); + + service.deletePreset(a.id); + + expect(service.getPresets().value).toEqual([b]); + expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual([b]); + }); + + it('findByName matches case-sensitively', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + service.addPreset('Vitals', ['x']); + + expect(service.findByName('Vitals')).toBeDefined(); + expect(service.findByName('vitals')).toBeUndefined(); + }); + + it('clearAll empties the list and writes [] to localStorage', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + service.addPreset('A', ['x']); + service.addPreset('B', ['y']); + + service.clearAll(); + + expect(service.getPresets().value).toEqual([]); + expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual([]); + }); + + it('restoreDefaults adds only seed entries whose names are missing', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + const [firstSeed] = PRESET_SEEDS; + service.addPreset(firstSeed.name, ['existing-topic']); + + const added = service.restoreDefaults(); + + expect(added).toBe(PRESET_SEEDS.length - 1); + const namesNow = service.getPresets().value.map((p) => p.name); + expect(namesNow).toEqual(jasmine.arrayWithExactContents(PRESET_SEEDS.map((s) => s.name))); + const kept = service.findByName(firstSeed.name); + expect(kept!.topicNames).toEqual(['existing-topic']); + }); + + it('restoreDefaults assigns fresh ids and createdAt to new seeded entries', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + + const before = Date.now(); + service.restoreDefaults(); + const after = Date.now(); + + const presets = service.getPresets().value; + expect(presets.length).toBe(PRESET_SEEDS.length); + presets.forEach((p) => { + expect(p.id).toBeTruthy(); + expect(p.createdAt).toBeGreaterThanOrEqual(before); + expect(p.createdAt).toBeLessThanOrEqual(after); + }); + }); + + it('restoreDefaults returns 0 when all defaults are already present', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + service.restoreDefaults(); + + const added = service.restoreDefaults(); + + expect(added).toBe(0); + }); + + it('falls back to an empty list on corrupt JSON (no auto-seed)', () => { + localStorage.setItem(STORAGE_KEY, 'not json'); + + const service = build(); + + expect(service.getPresets().value).toEqual([]); + }); + + it('drops malformed entries but keeps valid ones', () => { + const valid = makeStoredPreset({ id: 'valid' }); + const malformed = [ + { id: 1, name: 'wrong-id-type', topicNames: ['x'], createdAt: 1 }, + { id: 'no-name', topicNames: ['x'], createdAt: 1 }, + { id: 'bad-topics', name: 'x', topicNames: ['ok', 7], createdAt: 1 }, + { id: 'bad-time', name: 'x', topicNames: ['x'], createdAt: 'not-a-number' }, + valid + ]; + localStorage.setItem(STORAGE_KEY, JSON.stringify(malformed)); + + const service = build(); + + expect(service.getPresets().value).toEqual([valid]); + }); + + it('falls back to an empty list when stored value is not an array', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify({ not: 'an array' })); + + const service = build(); + + expect(service.getPresets().value).toEqual([]); + }); +}); diff --git a/angular-client/src/services/graph-preset.service.ts b/angular-client/src/services/graph-preset.service.ts new file mode 100644 index 00000000..0be11ec2 --- /dev/null +++ b/angular-client/src/services/graph-preset.service.ts @@ -0,0 +1,150 @@ +import { Injectable, inject } from '@angular/core'; +import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs'; +import { v4 as uuidv4 } from 'uuid'; +import { TopicSelectionService } from './topic-selection.service'; + +export interface Preset { + id: string; + name: string; + topicNames: string[]; + createdAt: number; +} + +export interface PresetSeed { + name: string; + topicNames: string[]; +} + +const STORAGE_KEY = 'argos.graphPresets'; + +// Names that don't match the live schema in src/utils/topic.utils.ts get +// silently skipped on Apply (with a warn toast), not hard-errored. +export const PRESET_SEEDS: PresetSeed[] = [ + { + name: 'test preset', + topicNames: ['BMS/Pack/SOC'] + } +]; + +@Injectable({ providedIn: 'root' }) +export class GraphPresetService { + private topicSelectionService = inject(TopicSelectionService); + private subject = new BehaviorSubject([]); + private activePresetName$: Observable = combineLatest([ + this.subject, + this.topicSelectionService.getSelectedDataTypes() + ]).pipe( + map(([presets, selectedDataTypes]) => { + const selected = new Set(selectedDataTypes.map((dt) => dt.name)); + if (selected.size === 0) return undefined; + return presets.find( + (p) => p.topicNames.length === selected.size && p.topicNames.every((n) => selected.has(n)) + )?.name; + }) + ); + + constructor() { + this.subject.next(this.loadOrSeed()); + } + + getPresets = (): BehaviorSubject => this.subject; + + getActivePresetName = (): Observable => this.activePresetName$; + + addPreset = (name: string, topicNames: string[]): Preset => { + const trimmed = name.trim(); + if (trimmed.length === 0) { + throw new Error('Preset name cannot be empty'); + } + const preset: Preset = { + id: uuidv4(), + name: trimmed, + topicNames: [...topicNames], + createdAt: Date.now() + }; + this.subject.next([...this.subject.value, preset]); + this.save(); + return preset; + }; + + replacePreset = (id: string, patch: Partial>): void => { + const next = this.subject.value.map((p) => { + if (p.id !== id) return p; + return { + ...p, + ...(patch.name !== undefined ? { name: patch.name.trim() } : {}), + ...(patch.topicNames !== undefined ? { topicNames: [...patch.topicNames] } : {}) + }; + }); + this.subject.next(next); + this.save(); + }; + + deletePreset = (id: string): void => { + this.subject.next(this.subject.value.filter((p) => p.id !== id)); + this.save(); + }; + + findByName = (name: string): Preset | undefined => { + return this.subject.value.find((p) => p.name === name); + }; + + clearAll = (): void => { + this.subject.next([]); + this.save(); + }; + + restoreDefaults = (): number => { + const existingNames = new Set(this.subject.value.map((p) => p.name)); + const toAdd = PRESET_SEEDS.filter((s) => !existingNames.has(s.name)).map(seedToPreset); + if (toAdd.length === 0) return 0; + this.subject.next([...this.subject.value, ...toAdd]); + this.save(); + return toAdd.length; + }; + + private loadOrSeed(): Preset[] { + const raw = localStorage.getItem(STORAGE_KEY); + + // null = first visit (seed); '[]' = user cleared all (don't re-seed). + if (raw === null) { + const seeded = PRESET_SEEDS.map(seedToPreset); + this.save(seeded); + return seeded; + } + + try { + const parsed = JSON.parse(raw); + if (!Array.isArray(parsed)) return []; + return parsed.filter(isValidPreset); + } catch { + return []; + } + } + + private save(list: Preset[] = this.subject.value): void { + localStorage.setItem(STORAGE_KEY, JSON.stringify(list)); + } +} + +function seedToPreset(seed: PresetSeed): Preset { + return { + id: uuidv4(), + name: seed.name, + topicNames: [...seed.topicNames], + createdAt: Date.now() + }; +} + +function isValidPreset(value: unknown): value is Preset { + if (typeof value !== 'object' || value === null) return false; + const { id, name, topicNames, createdAt } = value as Record; + return ( + typeof id === 'string' && + typeof name === 'string' && + Array.isArray(topicNames) && + topicNames.every((n) => typeof n === 'string') && + typeof createdAt === 'number' && + Number.isFinite(createdAt) + ); +} diff --git a/angular-client/src/utils/dataTypes.utils.ts b/angular-client/src/utils/dataTypes.utils.ts index 57c49905..9aba9d22 100644 --- a/angular-client/src/utils/dataTypes.utils.ts +++ b/angular-client/src/utils/dataTypes.utils.ts @@ -64,3 +64,18 @@ export const dataTypeNamePipe = (dataTypeName: string) => { const updatedName = updatedNameArray.join('-'); return updatedName; }; + +export const partitionDataTypesByName = ( + dataTypes: DataType[], + names: string[] +): { matched: DataType[]; unknown: string[] } => { + const known = new Map(dataTypes.map((dt) => [dt.name, dt])); + const matched: DataType[] = []; + const unknown: string[] = []; + for (const name of names) { + const dt = known.get(name); + if (dt) matched.push(dt); + else unknown.push(name); + } + return { matched, unknown }; +}; From 6b7cccbe357abc487142e459f935df1698b4e1ec Mon Sep 17 00:00:00 2001 From: Jeffrey <54014102+TheJeffreyKuo@users.noreply.github.com> Date: Tue, 28 Apr 2026 19:42:20 -0400 Subject: [PATCH 2/4] clean up --- .../graph-page/preset-dialog/preset-dialog.component.html | 4 +--- angular-client/src/services/graph-preset.service.ts | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html index 6584d58e..837c1280 100644 --- a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html @@ -42,9 +42,7 @@ @if (presets().length === 0) {

No presets yet

- - Save your current topic selection or upload a JSON of your preset - + Save your current topic selection or upload a JSON of your preset
} @else { diff --git a/angular-client/src/services/graph-preset.service.ts b/angular-client/src/services/graph-preset.service.ts index 0be11ec2..00bdca09 100644 --- a/angular-client/src/services/graph-preset.service.ts +++ b/angular-client/src/services/graph-preset.service.ts @@ -37,9 +37,7 @@ export class GraphPresetService { map(([presets, selectedDataTypes]) => { const selected = new Set(selectedDataTypes.map((dt) => dt.name)); if (selected.size === 0) return undefined; - return presets.find( - (p) => p.topicNames.length === selected.size && p.topicNames.every((n) => selected.has(n)) - )?.name; + return presets.find((p) => p.topicNames.length === selected.size && p.topicNames.every((n) => selected.has(n)))?.name; }) ); From 19d196831e6b1562142eb1f7a547e63a79e64d4a Mon Sep 17 00:00:00 2001 From: Jeffrey <54014102+TheJeffreyKuo@users.noreply.github.com> Date: Wed, 29 Apr 2026 17:16:08 -0400 Subject: [PATCH 3/4] Update select-dropdown.component.ts --- .../select-dropdown/select-dropdown.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/angular-client/src/components/select-dropdown/select-dropdown.component.ts b/angular-client/src/components/select-dropdown/select-dropdown.component.ts index 1fab42f0..425571ff 100644 --- a/angular-client/src/components/select-dropdown/select-dropdown.component.ts +++ b/angular-client/src/components/select-dropdown/select-dropdown.component.ts @@ -45,7 +45,14 @@ export class SelectDropdownComponent { // callers that never unset `defaultValue` see no behavior change. effect(() => { const val = this.defaultValue(); - this.selectedOption = val ? this.options().find((option) => option.name === val) : undefined; + if (val) { + const match = this.options().find((option) => option.name === val); + if (match) { + this.selectedOption = match; + } + } else { + this.selectedOption = undefined; + } }); } From 7cd057334ceae4d2efd43de67f53379a486964c9 Mon Sep 17 00:00:00 2001 From: Jeffrey <54014102+TheJeffreyKuo@users.noreply.github.com> Date: Wed, 29 Apr 2026 17:28:01 -0400 Subject: [PATCH 4/4] clean up saving --- .../graph-sidebar-desktop.component.ts | 15 +-- .../graph-sidebar-mobile.component.ts | 15 +-- .../preset-dialog.component.html | 2 + .../preset-dialog/preset-dialog.component.ts | 125 ++++++++++-------- .../notification-rules-page.component.ts | 39 +++--- .../src/services/graph-preset.service.ts | 31 +++-- angular-client/src/utils/file.utils.ts | 38 ++++++ 7 files changed, 153 insertions(+), 112 deletions(-) create mode 100644 angular-client/src/utils/file.utils.ts diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts index 5dc6f8d5..9afe274d 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts +++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts @@ -1,7 +1,7 @@ import { Component, Injector, OnInit, computed, inject, input, signal } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; -import { MessageService, TreeNode, PrimeTemplate } from 'primeng/api'; +import { TreeNode, PrimeTemplate } from 'primeng/api'; import { DialogService } from 'primeng/dynamicdialog'; import { TreeNodeSelectEvent, TreeNodeUnSelectEvent, Tree } from 'primeng/tree'; import { ToggleSwitch } from 'primeng/toggleswitch'; @@ -13,7 +13,7 @@ import { } from 'src/components/select-dropdown/select-dropdown.component'; import { GraphPresetService, Preset } from 'src/services/graph-preset.service'; import Storage from 'src/services/storage.service'; -import { dataTypesToNodes, partitionDataTypesByName } from 'src/utils/dataTypes.utils'; +import { dataTypesToNodes } from 'src/utils/dataTypes.utils'; import { mapNodesToTreeNodes, findSelectedTreeNodes, @@ -37,7 +37,6 @@ export default class GraphSidebarDesktopComponent implements OnInit { private topicSelectionService = inject(TopicSelectionService); private presetService = inject(GraphPresetService); private dialogService = inject(DialogService); - private messageService = inject(MessageService); private storage = inject(Storage); private injector = inject(Injector); @@ -133,15 +132,7 @@ export default class GraphSidebarDesktopComponent implements OnInit { } private applyPreset(preset: Preset) { - const { matched, unknown } = partitionDataTypesByName(this.dataTypes(), preset.topicNames); - if (unknown.length > 0) { - this.messageService.add({ - severity: 'warn', - summary: 'Unknown Topics Skipped', - detail: unknown.join(', '), - life: 8000 - }); - } + const matched = this.presetService.resolvePresetTopics(preset, this.dataTypes()); this.applyMatched(matched); } diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts index 0b4cd65d..d8db8fff 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts +++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit, computed, inject, input, signal } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; -import { MessageService, TreeNode, PrimeTemplate } from 'primeng/api'; +import { TreeNode, PrimeTemplate } from 'primeng/api'; import { DialogService } from 'primeng/dynamicdialog'; import { TreeNodeSelectEvent, TreeNodeUnSelectEvent, Tree } from 'primeng/tree'; import { Sidebar } from 'primeng/sidebar'; @@ -14,7 +14,7 @@ import { } from 'src/components/select-dropdown/select-dropdown.component'; import { GraphPresetService, Preset } from 'src/services/graph-preset.service'; import Storage from 'src/services/storage.service'; -import { dataTypesToNodes, partitionDataTypesByName } from 'src/utils/dataTypes.utils'; +import { dataTypesToNodes } from 'src/utils/dataTypes.utils'; import { mapNodesToTreeNodes, findSelectedTreeNodes, @@ -50,7 +50,6 @@ export default class GraphSidebarMobileComponent implements OnInit { private topicSelectionService = inject(TopicSelectionService); private presetService = inject(GraphPresetService); private dialogService = inject(DialogService); - private messageService = inject(MessageService); private storage = inject(Storage); private injector = inject(Injector); @@ -150,15 +149,7 @@ export default class GraphSidebarMobileComponent implements OnInit { } private applyPreset(preset: Preset) { - const { matched, unknown } = partitionDataTypesByName(this.dataTypes(), preset.topicNames); - if (unknown.length > 0) { - this.messageService.add({ - severity: 'warn', - summary: 'Unknown Topics Skipped', - detail: unknown.join(', '), - life: 8000 - }); - } + const matched = this.presetService.resolvePresetTopics(preset, this.dataTypes()); this.applyMatched(matched); } diff --git a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html index 837c1280..b2ebf778 100644 --- a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html @@ -93,4 +93,6 @@ > + + diff --git a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts index 10243fb8..4bee006c 100644 --- a/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts @@ -1,13 +1,14 @@ import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, signal, viewChild } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; -import { MessageService } from 'primeng/api'; +import { ConfirmationService, MessageService } from 'primeng/api'; import { ButtonDirective } from 'primeng/button'; +import { ConfirmDialog } from 'primeng/confirmdialog'; import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; import { InputText } from 'primeng/inputtext'; import { GraphPresetService, Preset, PresetSeed } from 'src/services/graph-preset.service'; import { TopicSelectionService } from 'src/services/topic-selection.service'; -import { partitionDataTypesByName } from 'src/utils/dataTypes.utils'; +import { downloadAsFile, FileReadError, readTextFile } from 'src/utils/file.utils'; import { DataType } from 'src/utils/types.utils'; interface PresetDialogData { @@ -19,7 +20,8 @@ interface PresetDialogData { templateUrl: './preset-dialog.component.html', styleUrls: ['./preset-dialog.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, - imports: [FormsModule, InputText, ButtonDirective] + providers: [ConfirmationService], + imports: [FormsModule, InputText, ButtonDirective, ConfirmDialog] }) export class PresetDialogComponent { private ref = inject(DynamicDialogRef); @@ -27,6 +29,7 @@ export class PresetDialogComponent { private presetService = inject(GraphPresetService); private topicSelectionService = inject(TopicSelectionService); private messageService = inject(MessageService); + private confirmationService = inject(ConfirmationService); private data = this.config.data as PresetDialogData; private dataTypes = this.data.dataTypes; @@ -46,12 +49,14 @@ export class PresetDialogComponent { const topicNames = this.currentSelection().map((dt) => dt.name); const existing = this.presetService.findByName(name); if (existing) { - if (!confirm(`A preset named "${name}" already exists. Replace its topics?`)) return; - this.presetService.replacePreset(existing.id, { topicNames }); - this.messageService.add({ - severity: 'success', - summary: 'Preset Replaced', - detail: `"${name}" now contains ${topicNames.length} topic(s)` + this.confirmReplace(name, () => { + this.presetService.replacePreset(existing.id, { topicNames }); + this.messageService.add({ + severity: 'success', + summary: 'Preset Replaced', + detail: `"${name}" now contains ${topicNames.length} topic(s)` + }); + this.newPresetName.set(''); }); } else { this.presetService.addPreset(name, topicNames); @@ -60,84 +65,94 @@ export class PresetDialogComponent { summary: 'Preset Saved', detail: `"${name}" with ${topicNames.length} topic(s)` }); + this.newPresetName.set(''); } - this.newPresetName.set(''); } onUploadClick(): void { this.fileInput()?.nativeElement.click(); } - onFileSelected(event: Event): void { + async onFileSelected(event: Event): Promise { const input = event.target as HTMLInputElement; const file = input.files?.[0]; if (!file) return; input.value = ''; - if (!file.name.toLowerCase().endsWith('.json')) { - this.messageService.add({ severity: 'error', summary: 'Invalid File', detail: 'Please select a .json file' }); + let text: string; + try { + text = await readTextFile(file, '.json'); + } catch (err) { + if (err instanceof FileReadError && err.kind === 'invalid-extension') { + this.messageService.add({ severity: 'error', summary: 'Invalid File', detail: 'Please select a .json file' }); + } else { + this.messageService.add({ severity: 'error', summary: 'Read Error', detail: 'Failed to read file' }); + } return; } - const reader = new FileReader(); - reader.onload = () => { - const text = reader.result as string; - const parsed = this.parsePresetJson(text); - if (!parsed) return; + const parsed = this.parsePresetJson(text); + if (!parsed) return; - const fallbackName = file.name.replace(/\.json$/i, '').trim() || 'Untitled Preset'; - const name = parsed.name?.trim() || fallbackName; + const fallbackName = file.name.replace(/\.json$/i, '').trim() || 'Untitled Preset'; + const name = parsed.name?.trim() || fallbackName; - const existing = this.presetService.findByName(name); - if (existing) { - if (!confirm(`A preset named "${name}" already exists. Replace its topics?`)) return; + const existing = this.presetService.findByName(name); + if (existing) { + this.confirmReplace(name, () => { this.presetService.replacePreset(existing.id, { topicNames: parsed.topicNames }); - } else { - this.presetService.addPreset(name, parsed.topicNames); - } - this.messageService.add({ - severity: 'success', - summary: 'Preset Imported', - detail: `"${name}" with ${parsed.topicNames.length} topic(s)` + this.toastImported(name, parsed.topicNames.length); }); - }; - reader.onerror = () => { - this.messageService.add({ severity: 'error', summary: 'Read Error', detail: 'Failed to read file' }); - }; - reader.readAsText(file); + } else { + this.presetService.addPreset(name, parsed.topicNames); + this.toastImported(name, parsed.topicNames.length); + } } onApply(preset: Preset): void { - const { matched, unknown } = partitionDataTypesByName(this.dataTypes, preset.topicNames); - if (unknown.length > 0) { - this.messageService.add({ - severity: 'warn', - summary: 'Unknown Topics Skipped', - detail: unknown.join(', '), - life: 8000 - }); - } + const matched = this.presetService.resolvePresetTopics(preset, this.dataTypes); this.ref.close(matched); } onDownload(preset: Preset): void { const exported: PresetSeed = { name: preset.name, topicNames: [...preset.topicNames] }; - const blob = new Blob([JSON.stringify(exported, null, 2)], { type: 'application/json;charset=utf-8;' }); - const url = URL.createObjectURL(blob); + downloadAsFile( + `${this.sanitizeFilename(preset.name)}.json`, + JSON.stringify(exported, null, 2), + 'application/json;charset=utf-8;' + ); + } - const link = document.createElement('a'); - link.href = url; - link.download = `${this.sanitizeFilename(preset.name)}.json`; - link.click(); + onDelete(preset: Preset): void { + this.confirmationService.confirm({ + message: `Delete preset "${preset.name}"?`, + header: 'Delete Preset', + acceptLabel: 'Delete', + rejectLabel: 'Cancel', + accept: () => { + this.presetService.deletePreset(preset.id); + this.messageService.add({ severity: 'success', summary: 'Preset Deleted', detail: preset.name }); + } + }); + } - URL.revokeObjectURL(url); + private confirmReplace(name: string, onAccept: () => void): void { + this.confirmationService.confirm({ + message: `A preset named "${name}" already exists. Replace its topics?`, + header: 'Replace Preset', + acceptLabel: 'Replace', + rejectLabel: 'Cancel', + accept: onAccept + }); } - onDelete(preset: Preset): void { - if (!confirm(`Delete preset "${preset.name}"?`)) return; - this.presetService.deletePreset(preset.id); - this.messageService.add({ severity: 'success', summary: 'Preset Deleted', detail: preset.name }); + private toastImported(name: string, count: number): void { + this.messageService.add({ + severity: 'success', + summary: 'Preset Imported', + detail: `"${name}" with ${count} topic(s)` + }); } onRestoreDefaults(): void { diff --git a/angular-client/src/pages/notification-rules-page/notification-rules-page.component.ts b/angular-client/src/pages/notification-rules-page/notification-rules-page.component.ts index 78845b8a..3c9123db 100644 --- a/angular-client/src/pages/notification-rules-page/notification-rules-page.component.ts +++ b/angular-client/src/pages/notification-rules-page/notification-rules-page.component.ts @@ -21,6 +21,7 @@ import { UploadConfirmDialogComponent } from './upload-confirm-dialog/upload-con import { AddRuleDialogComponent } from './add-rule-dialog/add-rule-dialog.component'; import { RulesTableComponent } from './rules-table/rules-table.component'; import { NotificationListComponent } from 'src/components/notification-list/notification-list.component'; +import { downloadAsFile, FileReadError, readTextFile } from 'src/utils/file.utils'; const CLIENT_ID_KEY = 'notification_rules_client_id'; @@ -179,7 +180,7 @@ export default class NotificationRulesPageComponent implements OnInit { this.streamRailOpen.update((open) => !open); }; - onFileSelected(event: Event): void { + async onFileSelected(event: Event): Promise { const input = event.target as HTMLInputElement; const file = input.files?.[0]; if (!file) return; @@ -187,20 +188,16 @@ export default class NotificationRulesPageComponent implements OnInit { // Reset input so same file can be re-selected input.value = ''; - if (!file.name.endsWith('.csv')) { - this.messageService.add({ severity: 'error', summary: 'Invalid File', detail: 'Please select a .csv file' }); - return; - } - - const reader = new FileReader(); - reader.onload = () => { - const text = reader.result as string; + try { + const text = await readTextFile(file, '.csv'); this.parseCsvAndConfirm(text); - }; - reader.onerror = () => { - this.messageService.add({ severity: 'error', summary: 'Read Error', detail: 'Failed to read file' }); - }; - reader.readAsText(file); + } catch (err) { + if (err instanceof FileReadError && err.kind === 'invalid-extension') { + this.messageService.add({ severity: 'error', summary: 'Invalid File', detail: 'Please select a .csv file' }); + } else { + this.messageService.add({ severity: 'error', summary: 'Read Error', detail: 'Failed to read file' }); + } + } } private parseCsvAndConfirm(csv: string): void { @@ -397,15 +394,11 @@ export default class NotificationRulesPageComponent implements OnInit { ); const csvContent = [header, ...rows].join('\n'); - const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); - const url = URL.createObjectURL(blob); - - const link = document.createElement('a'); - link.href = url; - link.download = `notification-rules-${new Date().toISOString().slice(0, 10)}.csv`; - link.click(); - - URL.revokeObjectURL(url); + downloadAsFile( + `notification-rules-${new Date().toISOString().slice(0, 10)}.csv`, + csvContent, + 'text/csv;charset=utf-8;' + ); this.messageService.add({ severity: 'success', summary: 'Downloaded', detail: `Exported ${rules.length} rule(s)` }); } catch { this.messageService.add({ severity: 'error', summary: 'Download Error', detail: 'Failed to download rules' }); diff --git a/angular-client/src/services/graph-preset.service.ts b/angular-client/src/services/graph-preset.service.ts index 00bdca09..20bc8049 100644 --- a/angular-client/src/services/graph-preset.service.ts +++ b/angular-client/src/services/graph-preset.service.ts @@ -1,6 +1,9 @@ import { Injectable, inject } from '@angular/core'; +import { MessageService } from 'primeng/api'; import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs'; import { v4 as uuidv4 } from 'uuid'; +import { partitionDataTypesByName } from 'src/utils/dataTypes.utils'; +import { DataType } from 'src/utils/types.utils'; import { TopicSelectionService } from './topic-selection.service'; export interface Preset { @@ -17,19 +20,14 @@ export interface PresetSeed { const STORAGE_KEY = 'argos.graphPresets'; -// Names that don't match the live schema in src/utils/topic.utils.ts get -// silently skipped on Apply (with a warn toast), not hard-errored. -export const PRESET_SEEDS: PresetSeed[] = [ - { - name: 'test preset', - topicNames: ['BMS/Pack/SOC'] - } -]; +export const PRESET_SEEDS: PresetSeed[] = []; @Injectable({ providedIn: 'root' }) export class GraphPresetService { private topicSelectionService = inject(TopicSelectionService); + private messageService = inject(MessageService); private subject = new BehaviorSubject([]); + private presets$ = this.subject.asObservable(); private activePresetName$: Observable = combineLatest([ this.subject, this.topicSelectionService.getSelectedDataTypes() @@ -45,10 +43,23 @@ export class GraphPresetService { this.subject.next(this.loadOrSeed()); } - getPresets = (): BehaviorSubject => this.subject; + getPresets = (): Observable => this.presets$; getActivePresetName = (): Observable => this.activePresetName$; + resolvePresetTopics = (preset: Preset, dataTypes: DataType[]): DataType[] => { + const { matched, unknown } = partitionDataTypesByName(dataTypes, preset.topicNames); + if (unknown.length > 0) { + this.messageService.add({ + severity: 'warn', + summary: 'Unknown Topics Skipped', + detail: unknown.join(', '), + life: 8000 + }); + } + return matched; + }; + addPreset = (name: string, topicNames: string[]): Preset => { const trimmed = name.trim(); if (trimmed.length === 0) { @@ -104,7 +115,7 @@ export class GraphPresetService { private loadOrSeed(): Preset[] { const raw = localStorage.getItem(STORAGE_KEY); - // null = first visit (seed); '[]' = user cleared all (don't re-seed). + // null = first visit, seed; '[]' = user cleared, don't re-seed. if (raw === null) { const seeded = PRESET_SEEDS.map(seedToPreset); this.save(seeded); diff --git a/angular-client/src/utils/file.utils.ts b/angular-client/src/utils/file.utils.ts new file mode 100644 index 00000000..2724df0c --- /dev/null +++ b/angular-client/src/utils/file.utils.ts @@ -0,0 +1,38 @@ +export function downloadAsFile(filename: string, content: string, mimeType: string): void { + const blob = new Blob([content], { type: mimeType }); + const url = URL.createObjectURL(blob); + + const link = document.createElement('a'); + link.href = url; + link.download = filename; + link.click(); + + URL.revokeObjectURL(url); +} + +export type FileReadErrorKind = 'invalid-extension' | 'read-error'; + +export class FileReadError extends Error { + constructor( + public readonly kind: FileReadErrorKind, + message: string + ) { + super(message); + this.name = 'FileReadError'; + } +} + +export function readTextFile(file: File, allowedExt: string | string[]): Promise { + const exts = (Array.isArray(allowedExt) ? allowedExt : [allowedExt]).map((e) => e.toLowerCase()); + const lower = file.name.toLowerCase(); + if (!exts.some((ext) => lower.endsWith(ext))) { + return Promise.reject(new FileReadError('invalid-extension', `Expected ${exts.join(' or ')}`)); + } + + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result as string); + reader.onerror = () => reject(new FileReadError('read-error', 'Failed to read file')); + reader.readAsText(file); + }); +}