chore: update Angular TypeScript build info cache

src/components/graph-view-container/graph-view-container.component.ts

@@ -4,23 +4,33 @@ import { GraphViewComponent, GraphDisplayOptions } from '../graph-view/graph-vie
 import { GraphOptionsPanelComponent, GraphOptions } from '../graph-options-panel/graph-options-panel.component';
 import { GraphData } from '../../types';
 import { NoteIndexService } from '../../services/note-index.service';
+import { VaultService } from '../../services/vault.service';
+import { GraphSettingsService } from '../../app/graph/graph-settings.service';
+import { GraphSettingsPanelComponent } from '../../app/graph/ui/settings-panel.component';
+import { GraphRuntimeAdapter } from '../../app/graph/graph-runtime-adapter';
 
 @Component({
   selector: 'app-graph-view-container',
   standalone: true,
-  imports: [CommonModule, GraphViewComponent, GraphOptionsPanelComponent],
+  imports: [
+    CommonModule, 
+    GraphViewComponent, 
+    GraphOptionsPanelComponent,
+    GraphSettingsPanelComponent
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="graph-view-container flex h-full w-full">
+    <div class="graph-view-container flex h-full w-full relative">
       <!-- Graph View -->
       <div class="flex-1 relative">
         <app-graph-view
-          [graphData]="graphData()"
+          [graphData]="filteredGraphData()"
           [displayOptions]="displayOptions()"
-          (nodeSelected)="onNodeSelected($event)">
+          (nodeSelected)="onNodeSelected($event)"
+          (settingsRequested)="openSettingsPanel()">
         </app-graph-view>
-        
-        <!-- Toggle Options Button (Mobile) -->
+
+        <!-- Toggle Options Button (Mobile - Old Panel) -->
         <button
           type="button"
           (click)="toggleOptionsPanel()"
@@ -35,7 +45,7 @@ import { NoteIndexService } from '../../services/note-index.service';
         </button>
       </div>
       
-      <!-- Options Panel -->
+      <!-- Old Options Panel (kept for backward compatibility) -->
       <div 
         class="options-panel-wrapper"
         [class.open]="optionsPanelOpen()"
@@ -46,6 +56,13 @@ import { NoteIndexService } from '../../services/note-index.service';
         </app-graph-options-panel>
       </div>
       
+      <!-- New Settings Panel -->
+      <app-graph-settings-panel
+        [isOpen]="settingsPanelOpen()"
+        (close)="closeSettingsPanel()"
+        (animateRequested)="onAnimateRequested()">
+      </app-graph-settings-panel>
+      
       <!-- Overlay for mobile -->
       @if (optionsPanelOpen() && isMobile()) {
         <div 
@@ -94,10 +111,14 @@ export class GraphViewContainerComponent {
   nodeSelected = output<string>();
 
   private noteIndexService = inject(NoteIndexService);
+  private vaultService = inject(VaultService);
+  private graphSettingsService = inject(GraphSettingsService);
   
   optionsPanelOpen = signal(false);
+  settingsPanelOpen = signal(false);
   
-  graphData = computed<GraphData>(() => {
+  // Base graph data from note index
+  private baseGraphData = computed<GraphData>(() => {
     const centerNote = this.centerNoteId();
     if (!centerNote) {
       return this.noteIndexService.buildFullGraphData();
@@ -105,46 +126,53 @@ export class GraphViewContainerComponent {
     return this.noteIndexService.buildGraphData(centerNote, 2);
   });
 
-  displayOptions = signal<GraphDisplayOptions>({
-    showArrows: true,
-    textFadeThreshold: 50,
-    nodeSize: 5,
-    linkThickness: 1,
-    chargeStrength: -100,
-    linkDistance: 100,
-    centerStrength: 0.05,
-    centerNodeId: undefined
+  // Filtered graph data based on settings
+  filteredGraphData = computed<GraphData>(() => {
+    const baseData = this.baseGraphData();
+    const config = this.graphSettingsService.config();
+    const allNotes = this.vaultService.allNotes();
+    
+    return GraphRuntimeAdapter.applyFilters(baseData, config, allNotes);
   });
 
-  constructor() {
-    effect(() => {
-      const centerNote = this.centerNoteId();
-      if (centerNote) {
-        this.displayOptions.update(opts => ({
-          ...opts,
-          centerNodeId: centerNote
-        }));
-      }
+  // Display options from graph config
+  displayOptions = computed<GraphDisplayOptions>(() => {
+    const config = this.graphSettingsService.config();
+    const baseOptions = GraphRuntimeAdapter.configToDisplayOptions(config);
+    const graphData = this.filteredGraphData();
+    const allNotes = this.vaultService.allNotes();
+    const nodeColors = GraphRuntimeAdapter.applyColorGroups(graphData.nodes, config, allNotes);
+    
+    return {
+      ...baseOptions,
+      centerNodeId: this.centerNoteId(),
+      nodeColors
+    };
+  });
+
+  onOptionsChanged(options: GraphOptions): void {
+    // Old options panel - update graph settings service
+    this.graphSettingsService.save({
+      showArrow: options.display.showArrows,
+      textFadeMultiplier: this.convertTextFadeThreshold(options.display.textFadeThreshold),
+      nodeSizeMultiplier: options.display.nodeSize / 5,
+      lineSizeMultiplier: options.display.linkThickness,
+      repelStrength: -options.forces.chargeStrength / 10,
+      linkDistance: options.forces.linkDistance,
+      centerStrength: options.forces.centerStrength
     });
   }
 
-  onOptionsChanged(options: GraphOptions): void {
-    this.displayOptions.update(current => ({
-      ...current,
-      showArrows: options.display.showArrows,
-      textFadeThreshold: options.display.textFadeThreshold,
-      nodeSize: options.display.nodeSize,
-      linkThickness: options.display.linkThickness,
-      chargeStrength: options.forces.chargeStrength,
-      linkDistance: options.forces.linkDistance,
-      centerStrength: options.forces.centerStrength
-    }));
+  onAnimateRequested(): void {
+    // Force graph to re-render by triggering effect
+    // Simply refresh the settings to trigger computed signals
+    const current = this.graphSettingsService.config();
+    this.graphSettingsService.save({ ...current });
   }
 
-  onAnimateRequested(): void {
-    // Trigger animation restart
-    // The graph component will handle this via its effect on displayOptions
-    this.displayOptions.update(opts => ({ ...opts }));
+  private convertTextFadeThreshold(threshold: number): number {
+    // Convert 0-100 threshold back to -3 to 3 multiplier
+    return ((threshold / 100) * 6) - 3;
   }
 
   onNodeSelected(nodeId: string): void {
@@ -155,6 +183,14 @@ export class GraphViewContainerComponent {
     this.optionsPanelOpen.update(open => !open);
   }
 
+  closeSettingsPanel(): void {
+    this.settingsPanelOpen.set(false);
+  }
+
+  openSettingsPanel(): void {
+    this.settingsPanelOpen.set(true);
+  }
+
   isMobile(): boolean {
     return typeof window !== 'undefined' && window.innerWidth < 769;
   }