diff --git a/angular-client/src/components/select-dropdown/select-dropdown.component.css b/angular-client/src/components/select-dropdown/select-dropdown.component.css index c3452953..8ec8f3b2 100644 --- a/angular-client/src/components/select-dropdown/select-dropdown.component.css +++ b/angular-client/src/components/select-dropdown/select-dropdown.component.css @@ -52,3 +52,13 @@ ::ng-deep .p-select-option { font-size: 0.8rem; } + +::ng-deep .p-select-empty-message { + font-size: 0.8rem; +} + +::ng-deep .p-select-option-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} 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..bdb71cd2 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 @@ -3,13 +3,63 @@ margin-left: 0px; max-height: 80vh; margin-top: 10px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.presets-row { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 6px; +} + +.preset-select { + flex: 0 1 auto; + min-width: 0; + max-width: 100%; +} + +.presets-row argos-button { + flex-shrink: 0; +} + +.presets-row argos-button ::ng-deep .btn { + white-space: nowrap; +} + +.preset-select ::ng-deep .p-select { + height: 28px !important; + min-height: 28px; + width: 100%; + border-radius: 8px; + display: inline-flex; + align-items: center; +} + +.preset-select ::ng-deep .p-select-label, +.preset-select ::ng-deep .p-select-label.p-placeholder { + width: 100% !important; + padding: 0 0.5rem !important; + font-size: 12px; + line-height: 28px; + height: 28px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.preset-select ::ng-deep .p-select-dropdown { + width: 1.75rem; } .header-row { display: flex; align-items: center; - justify-content: space-between; - gap: 12px; + justify-content: flex-start; + gap: 16px; + flex-wrap: wrap; } .toggle-group { 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..0a3d0d05 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,8 +1,23 @@
+
+ + +
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 9249097e..f51c9ac9 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,9 +1,17 @@ -import { Component, Injector, OnInit, computed, inject, input, signal } from '@angular/core'; +import { Component, Injector, OnDestroy, OnInit, computed, inject, input, signal } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; import { TreeNode, PrimeTemplate } from 'primeng/api'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; import { TreeNodeSelectEvent, TreeNodeUnSelectEvent, Tree } from 'primeng/tree'; import { ToggleSwitch } from 'primeng/toggleswitch'; +import { take } from 'rxjs'; +import { + DropdownOption, + SelectDropdownComponent, + SelectorConfig +} 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 } from 'src/utils/dataTypes.utils'; import { @@ -17,17 +25,21 @@ import { DataType } from 'src/utils/types.utils'; import { TopicSelectionService } from 'src/services/topic-selection.service'; import { ButtonComponent } from '../../../../components/argos-button/argos-button.component'; import TypographyComponent from 'src/components/typography/typography.component'; +import { PresetDialogComponent } from '../../preset-dialog/preset-dialog.component'; @Component({ selector: 'graph-sidebar-desktop', templateUrl: './graph-sidebar-desktop.component.html', styleUrls: ['./graph-sidebar-desktop.component.css'], - imports: [ButtonComponent, Tree, PrimeTemplate, TypographyComponent, ToggleSwitch, FormsModule] + imports: [ButtonComponent, Tree, PrimeTemplate, TypographyComponent, ToggleSwitch, FormsModule, SelectDropdownComponent] }) -export default class GraphSidebarDesktopComponent implements OnInit { +export default class GraphSidebarDesktopComponent implements OnInit, OnDestroy { private topicSelectionService = inject(TopicSelectionService); + private presetService = inject(GraphPresetService); + private dialogService = inject(DialogService); private storage = inject(Storage); private injector = inject(Injector); + private presetDialogRef?: DynamicDialogRef; dataTypes = input([]); treeNodes: TreeNode[] = []; @@ -43,6 +55,18 @@ export default class GraphSidebarDesktopComponent 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); @@ -68,6 +92,30 @@ export default class GraphSidebarDesktopComponent implements OnInit { this.selectedNodes = undefined; }; + openPresetsDialog = () => { + this.presetDialogRef = this.dialogService.open(PresetDialogComponent, { + header: 'Topic Presets', + width: '640px', + draggable: true, + closable: true, + closeAriaLabel: 'Close', + data: { + dataTypes: this.dataTypes() + } + }); + this.presetDialogRef.onClose.pipe(take(1)).subscribe((matched: DataType[] | null) => { + if (matched) { + this.applyMatched(matched); + } + }); + }; + + ngOnDestroy(): void { + if (this.presetDialogRef) { + this.presetDialogRef.close(); + } + } + nodeSelect(event: TreeNodeSelectEvent) { const dt = event.node.data?.dataType; if (dt) { @@ -89,4 +137,15 @@ export default class GraphSidebarDesktopComponent implements OnInit { this.topicSelectionService.removeDataType(dt); } } + + private applyPreset(preset: Preset) { + const matched = this.presetService.resolvePresetTopics(preset, this.dataTypes()); + this.applyMatched(matched); + } + + private applyMatched(matched: DataType[]) { + if (matched.length === 0) return; // unknown topics warn toast + 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..64e186e5 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,52 @@ height: 100%; } +.presets-row { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 6px; +} + +.preset-select { + flex: 0 1 auto; + min-width: 0; + max-width: 100%; +} + +.presets-row argos-button { + flex-shrink: 0; +} + +.presets-row argos-button ::ng-deep .btn { + white-space: nowrap; +} + +.preset-select ::ng-deep .p-select { + height: 28px !important; + min-height: 28px; + width: 100%; + border-radius: 8px; + display: inline-flex; + align-items: center; +} + +.preset-select ::ng-deep .p-select-label, +.preset-select ::ng-deep .p-select-label.p-placeholder { + width: 100% !important; + padding: 0 0.5rem !important; + font-size: 12px; + line-height: 28px; + height: 28px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.preset-select ::ng-deep .p-select-dropdown { + width: 1.75rem; +} + .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..54221ab6 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,9 +6,24 @@
+
+ + +
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 af1859ba..e0d69f8c 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,10 +1,28 @@ -import { ChangeDetectionStrategy, Component, Injector, OnInit, computed, inject, input, signal } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Injector, + OnDestroy, + OnInit, + computed, + inject, + input, + signal +} from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; import { TreeNode, PrimeTemplate } from 'primeng/api'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; import { TreeNodeSelectEvent, TreeNodeUnSelectEvent, Tree } from 'primeng/tree'; import { Sidebar } from 'primeng/sidebar'; import { ToggleSwitch } from 'primeng/toggleswitch'; +import { take } from 'rxjs'; +import { + DropdownOption, + SelectDropdownComponent, + SelectorConfig +} 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 } from 'src/utils/dataTypes.utils'; import { @@ -18,20 +36,33 @@ import { DataType } from 'src/utils/types.utils'; import { TopicSelectionService } from 'src/services/topic-selection.service'; import { ButtonComponent } from '../../../../components/argos-button/argos-button.component'; import TypographyComponent from 'src/components/typography/typography.component'; +import { PresetDialogComponent } from '../../preset-dialog/preset-dialog.component'; @Component({ selector: 'graph-sidebar-mobile', templateUrl: './graph-sidebar-mobile.component.html', styleUrls: ['./graph-sidebar-mobile.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, - imports: [Sidebar, PrimeTemplate, Tree, ButtonComponent, TypographyComponent, ToggleSwitch, FormsModule] + imports: [ + Sidebar, + PrimeTemplate, + Tree, + ButtonComponent, + TypographyComponent, + ToggleSwitch, + FormsModule, + SelectDropdownComponent + ] }) -export default class GraphSidebarMobileComponent implements OnInit { +export default class GraphSidebarMobileComponent implements OnInit, OnDestroy { dataTypes = input.required(); private topicSelectionService = inject(TopicSelectionService); + private presetService = inject(GraphPresetService); + private dialogService = inject(DialogService); private storage = inject(Storage); private injector = inject(Injector); + private presetDialogRef?: DynamicDialogRef; sidebarVisible = false; treeNodes: TreeNode[] = []; @@ -47,6 +78,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 +119,30 @@ export default class GraphSidebarMobileComponent implements OnInit { this.selectedNodes = undefined; }; + openPresetsDialog = () => { + this.presetDialogRef = this.dialogService.open(PresetDialogComponent, { + header: 'Topic Presets', + width: '90vw', + draggable: true, + closable: true, + closeAriaLabel: 'Close', + data: { + dataTypes: this.dataTypes() + } + }); + this.presetDialogRef.onClose.pipe(take(1)).subscribe((matched: DataType[] | null) => { + if (matched) { + this.applyMatched(matched); + } + }); + }; + + ngOnDestroy(): void { + if (this.presetDialogRef) { + this.presetDialogRef.close(); + } + } + nodeSelect(event: TreeNodeSelectEvent) { const dt = event.node.data?.dataType; if (dt) { @@ -97,4 +164,15 @@ export default class GraphSidebarMobileComponent implements OnInit { this.topicSelectionService.removeDataType(dt); } } + + private applyPreset(preset: Preset) { + const matched = this.presetService.resolvePresetTopics(preset, this.dataTypes()); + this.applyMatched(matched); + } + + private applyMatched(matched: DataType[]) { + if (matched.length === 0) return; // unknown topics warn toast + 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..e186e639 --- /dev/null +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.css @@ -0,0 +1,120 @@ +.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%; + table-layout: fixed; + 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: 16rem; + white-space: nowrap; +} + +.preset-table td.actions button { + margin-left: 6px; +} + +.preset-table .name-text { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.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..2780029b --- /dev/null +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.html @@ -0,0 +1,93 @@ +
+ + +
+
+
+ +
+ + +
+
+ + +
+ @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..11371d8e --- /dev/null +++ b/angular-client/src/pages/graph-page/preset-dialog/preset-dialog.component.ts @@ -0,0 +1,222 @@ +import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, signal, viewChild } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { FormsModule } from '@angular/forms'; +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 { downloadAsFile, FileReadError, readTextFile } from 'src/utils/file.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, + providers: [ConfirmationService], + imports: [FormsModule, InputText, ButtonDirective, ConfirmDialog] +}) +export class PresetDialogComponent { + private ref = inject(DynamicDialogRef); + private config = inject(DynamicDialogConfig); + 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; + 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) { + 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); + this.messageService.add({ + severity: 'success', + summary: 'Preset Saved', + detail: `"${name}" with ${topicNames.length} topic(s)` + }); + this.newPresetName.set(''); + } + } + + onUploadClick(): void { + this.fileInput()?.nativeElement.click(); + } + + async onFileSelected(event: Event): Promise { + const input = event.target as HTMLInputElement; + const file = input.files?.[0]; + if (!file) return; + + input.value = ''; + + 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 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) { + this.confirmReplace(name, () => { + this.presetService.replacePreset(existing.id, { topicNames: parsed.topicNames }); + this.toastImported(name, parsed.topicNames.length); + }); + } else { + this.presetService.addPreset(name, parsed.topicNames); + this.toastImported(name, parsed.topicNames.length); + } + } + + onApply(preset: Preset): void { + 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] }; + downloadAsFile( + `${this.sanitizeFilename(preset.name)}.json`, + JSON.stringify(exported, null, 2), + 'application/json;charset=utf-8;' + ); + } + + 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 }); + } + }); + } + + 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 + }); + } + + private toastImported(name: string, count: number): void { + this.messageService.add({ + severity: 'success', + summary: 'Preset Imported', + detail: `"${name}" with ${count} topic(s)` + }); + } + + onAddDefaultPresets(): void { + const added = this.presetService.addDefaultPresets(); + 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 Added', + 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/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.spec.ts b/angular-client/src/services/graph-preset.service.spec.ts new file mode 100644 index 00000000..4d2be039 --- /dev/null +++ b/angular-client/src/services/graph-preset.service.spec.ts @@ -0,0 +1,253 @@ +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', (done) => { + expect(localStorage.getItem(STORAGE_KEY)).toBeNull(); + + const service = build(); + + service.getPresets().subscribe((presets) => { + 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); + expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual(presets); + done(); + }); + }); + + it('does not seed when localStorage holds an empty array', (done) => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + + const service = build(); + + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([]); + done(); + }); + }); + + it('does not seed when localStorage already has user presets', (done) => { + const stored = makeStoredPreset({ id: 'user-1', name: 'My Preset' }); + localStorage.setItem(STORAGE_KEY, JSON.stringify([stored])); + + const service = build(); + + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([stored]); + done(); + }); + }); + + it('addPreset appends a preset and persists it', (done) => { + 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(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual([preset]); + + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([preset]); + done(); + }); + }); + + 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', (done) => { + 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'] }); + + service.getPresets().subscribe(([updated]) => { + expect(updated.id).toBe(original.id); + expect(updated.createdAt).toBe(original.createdAt); + expect(updated.name).toBe('Vitals v2'); + expect(updated.topicNames).toEqual(['A', 'B']); + done(); + }); + }); + + it('deletePreset removes the entry by id', (done) => { + 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(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual([b]); + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([b]); + done(); + }); + }); + + 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', (done) => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + service.addPreset('A', ['x']); + service.addPreset('B', ['y']); + + service.clearAll(); + + expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual([]); + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([]); + done(); + }); + }); + + it('addDefaultPresets adds only seed entries whose names are missing', (done) => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + + // No defaults shipped yet — addDefaultPresets is a no-op. + if (PRESET_SEEDS.length === 0) { + expect(service.addDefaultPresets()).toBe(0); + done(); + return; + } + + const [firstSeed] = PRESET_SEEDS; + service.addPreset(firstSeed.name, ['existing-topic']); + + const added = service.addDefaultPresets(); + expect(added).toBe(PRESET_SEEDS.length - 1); + + const kept = service.findByName(firstSeed.name); + expect(kept!.topicNames).toEqual(['existing-topic']); + + service.getPresets().subscribe((presets) => { + expect(presets.map((p) => p.name)).toEqual(jasmine.arrayWithExactContents(PRESET_SEEDS.map((s) => s.name))); + done(); + }); + }); + + it('addDefaultPresets assigns fresh ids and createdAt to new seeded entries', (done) => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + + // No defaults shipped yet — addDefaultPresets is a no-op. + if (PRESET_SEEDS.length === 0) { + expect(service.addDefaultPresets()).toBe(0); + done(); + return; + } + + const before = Date.now(); + service.addDefaultPresets(); + const after = Date.now(); + + service.getPresets().subscribe((presets) => { + expect(presets.length).toBe(PRESET_SEEDS.length); + presets.forEach((p) => { + expect(p.id).toBeTruthy(); + expect(p.createdAt).toBeGreaterThanOrEqual(before); + expect(p.createdAt).toBeLessThanOrEqual(after); + }); + done(); + }); + }); + + it('addDefaultPresets returns 0 when all defaults are already present', () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify([])); + const service = build(); + service.addDefaultPresets(); + + const added = service.addDefaultPresets(); + + expect(added).toBe(0); + }); + + it('falls back to an empty list on corrupt JSON (no auto-seed)', (done) => { + localStorage.setItem(STORAGE_KEY, 'not json'); + + const service = build(); + + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([]); + done(); + }); + }); + + it('drops malformed entries but keeps valid ones', (done) => { + 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(); + + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([valid]); + done(); + }); + }); + + it('falls back to an empty list when stored value is not an array', (done) => { + localStorage.setItem(STORAGE_KEY, JSON.stringify({ not: 'an array' })); + + const service = build(); + + service.getPresets().subscribe((presets) => { + expect(presets).toEqual([]); + done(); + }); + }); +}); 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..575da626 --- /dev/null +++ b/angular-client/src/services/graph-preset.service.ts @@ -0,0 +1,166 @@ +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 { + id: string; + name: string; + topicNames: string[]; + createdAt: number; +} + +export interface PresetSeed { + name: string; + topicNames: string[]; +} + +const STORAGE_KEY = 'argos.graphPresets'; + +// Empty until we ship default presets +export const PRESET_SEEDS: PresetSeed[] = []; + +/** + * Service for managing graph topic-selection presets, persisted to localStorage. + */ +@Injectable({ providedIn: 'root' }) +export class GraphPresetService { + private topicSelectionService = inject(TopicSelectionService); + private messageService = inject(MessageService); + private presets = new BehaviorSubject([]); + private presets$ = this.presets.asObservable(); + + // Preset whose topics exactly match the current selection + private activePresetName$: Observable = combineLatest([ + this.presets, + this.topicSelectionService.getSelectedDataTypes() + ]).pipe( + map(([presets, selectedDataTypes]) => { + const selectedNames = new Set(selectedDataTypes.map((dt) => dt.name)); + if (selectedNames.size === 0) return undefined; + return presets.find((preset) => presetMatchesSelection(preset, selectedNames))?.name; + }) + ); + + constructor() { + this.presets.next(this.loadOrSeed()); + } + + 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) { + throw new Error('Preset name cannot be empty'); + } + const preset: Preset = { + id: uuidv4(), + name: trimmed, + topicNames: [...topicNames], + createdAt: Date.now() + }; + this.presets.next([...this.presets.value, preset]); + this.save(); + return preset; + }; + + replacePreset = (id: string, patch: Partial>): void => { + const updates: Partial = {}; + if (patch.name !== undefined) updates.name = patch.name.trim(); + if (patch.topicNames !== undefined) updates.topicNames = [...patch.topicNames]; + this.presets.next(this.presets.value.map((p) => (p.id === id ? { ...p, ...updates } : p))); + this.save(); + }; + + deletePreset = (id: string): void => { + this.presets.next(this.presets.value.filter((p) => p.id !== id)); + this.save(); + }; + + findByName = (name: string): Preset | undefined => { + return this.presets.value.find((p) => p.name === name); + }; + + clearAll = (): void => { + this.presets.next([]); + this.save(); + }; + + // Skip seeds already present by name + addDefaultPresets = (): number => { + const existingNames = new Set(this.presets.value.map((p) => p.name)); + const toAdd = PRESET_SEEDS.filter((s) => !existingNames.has(s.name)).map(seedToPreset); + if (toAdd.length === 0) return 0; + this.presets.next([...this.presets.value, ...toAdd]); + this.save(); + return toAdd.length; + }; + + private loadOrSeed(): Preset[] { + const raw = localStorage.getItem(STORAGE_KEY); + + // null = first visit, seed; '[]' = user cleared, 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.presets.value): void { + localStorage.setItem(STORAGE_KEY, JSON.stringify(list)); + } +} + +function presetMatchesSelection(preset: Preset, selectedNames: Set): boolean { + return preset.topicNames.length === selectedNames.size && preset.topicNames.every((name) => selectedNames.has(name)); +} + +function seedToPreset(seed: PresetSeed): Preset { + return { + id: uuidv4(), + name: seed.name, + topicNames: [...seed.topicNames], + createdAt: Date.now() + }; +} + +// Guards against malformed localStorage data +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 }; +}; 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); + }); +}