Graph page topic selection preset

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;

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html

@@ -1,4 +1,17 @@
 <div class="background">
+  <div class="presets-row">
+    <select-dropdown
+      class="preset-select"
+      [options]="presetSelectorConfig().options"
+      [placeholder]="presetSelectorConfig().placeholder"
+      [defaultValue]="activePresetName()"
+    />
+    <argos-button
+      [onClick]="openPresetsDialog"
+      label="Manage Presets"
+      additionalStyles="background-color: #323232; border: 1.4px solid #027bd7;"
+    />
+  </div>
   <div class="header-row">
     <argos-button
       [onClick]="clearSelections"

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts

@@ -2,8 +2,16 @@ import { Component, Injector, OnInit, computed, inject, input, signal } from '@a
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { TreeNode, PrimeTemplate } from 'primeng/api';
+import { DialogService } 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,15 +25,18 @@ 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 {
   private topicSelectionService = inject(TopicSelectionService);
+  private presetService = inject(GraphPresetService);
+  private dialogService = inject(DialogService);
   private storage = inject(Storage);
   private injector = inject(Injector);
 
@@ -43,6 +54,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<SelectorConfig>(() => ({
+    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 +91,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 +130,14 @@ 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[]) {
+    this.topicSelectionService.setSelectedDataTypes(matched);
+    this.selectedNodes = findSelectedTreeNodes(this.activeNodes(), this.topicSelectionService);
+  }
 }

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;

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.html

@@ -6,6 +6,19 @@
   </ng-template>
   <ng-template pTemplate="content">
     <div class="sidebar-content">
+      <div class="presets-row">
+        <select-dropdown
+          class="preset-select"
+          [options]="presetSelectorConfig().options"
+          [placeholder]="presetSelectorConfig().placeholder"
+          [defaultValue]="activePresetName()"
+        />
+        <argos-button
+          [onClick]="openPresetsDialog"
+          label="Manage"
+          additionalStyles="background-color: #323232; border: 1.4px solid #027bd7;"
+        />
+      </div>
       <argos-button
         [onClick]="clearSelections"
         label="Clear Topics"

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts

@@ -2,9 +2,17 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit, computed, inject,
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { TreeNode, PrimeTemplate } from 'primeng/api';
+import { DialogService } 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,18 +26,30 @@ 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 {
   dataTypes = input.required<DataType[]>();
 
   private topicSelectionService = inject(TopicSelectionService);
+  private presetService = inject(GraphPresetService);
+  private dialogService = inject(DialogService);
   private storage = inject(Storage);
   private injector = inject(Injector);
 
@@ -47,6 +67,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<SelectorConfig>(() => ({
+    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 +108,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 +147,14 @@ 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[]) {
+    this.topicSelectionService.setSelectedDataTypes(matched);
+    this.selectedNodes = findSelectedTreeNodes(this.activeNodes(), this.topicSelectionService);
+  }
 }

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;
+}