dxworks · andrei2699 · May 1, 2026 · May 1, 2026 · May 1, 2026 · May 1, 2026
diff --git a/ScriptBeeClient/package-lock.json b/ScriptBeeClient/package-lock.json
diff --git a/ScriptBeeClient/package.json b/ScriptBeeClient/package.json
@@ -27,6 +27,7 @@
     "@mdi/angular-material": "^7.2.96",
     "@microsoft/signalr": "^10.0.0",
     "angular-split": "^20.0.0",
+    "cytoscape": "^3.33.3",
     "monaco-editor": "^0.55.1",
     "ngx-monaco-editor-v2": "^21.1.4",
     "rxjs": "~7.8.2",

diff --git a/ScriptBeeClient/src/app/components/project-context-graph/cytoscape-graph-controller.ts b/ScriptBeeClient/src/app/components/project-context-graph/cytoscape-graph-controller.ts
@@ -0,0 +1,213 @@
+import cytoscape from 'cytoscape';
+import { ContextGraphEdge, ContextGraphNode } from '../../types/context-graph';
+
+export class CytoscapeGraphController {
+  cy?: cytoscape.Core;
+
+  constructor(private container: HTMLElement) {}
+
+  isInitialized(): boolean {
+    return !!this.cy;
+  }
+
+  init() {
+    if (this.cy) {
+      return;
+    }
+
+    this.cy = cytoscape({
+      container: this.container,
+      wheelSensitivity: 5,
+      elements: [],
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'background-color': 'data(color)',
+            label: 'data(displayLabel)',
+            color: '#333',
+            'text-valign': 'center',
+            'text-halign': 'center',
+            'font-size': '12px',
+            'text-outline-color': '#fff',
+            'text-outline-width': 2,
+            width: 40,
+            height: 40,
+          },
+        },
+        {
+          selector: 'edge',
+          style: {
+            width: 2,
+            'line-color': '#ccc',
+            'target-arrow-color': '#ccc',
+            'target-arrow-shape': 'triangle',
+            'curve-style': 'bezier',
+            label: 'data(label)',
+            'font-size': '10px',
+            'text-rotation': 'autorotate',
+            'text-background-opacity': 1,
+            'text-background-color': '#fff',
+            'text-background-padding': '2',
+          },
+        },
+      ],
+      layout: {
+        name: 'cose',
+        animate: false,
+      },
+    });
+  }
+
+  updateData(nodes: ContextGraphNode[], edges: ContextGraphEdge[], nodeColorProvider: (type: string) => string) {
+    if (!this.cy) {
+      return;
+    }
+
+    const newElements: cytoscape.ElementDefinition[] = [];
+    const addedIds = new Set<string>();
+
+    nodes.forEach((node) => {
+      if (!node || !node.id) {
+        return;
+      }
+
+      if (this.cy!.getElementById(node.id).length === 0 && !addedIds.has(node.id)) {
+        addedIds.add(node.id);
+        const fullLabel = node.label || node.id;
+        newElements.push({
+          group: 'nodes',
+          data: {
+            id: node.id,
+            label: fullLabel,
+            displayLabel: this.truncateLabel(fullLabel),
+            type: node.type || 'Unknown',
+            loader: node.loader,
+            properties: node.properties || {},
+            color: nodeColorProvider(node.type),
+          },
+        });
+      }
+    });
+
+    edges.forEach((edge) => {
+      if (!edge || !edge.source || !edge.target) return;
+      const edgeId = `${edge.source}-${edge.target}-${edge.label || ''}`;
+      if (this.cy!.getElementById(edgeId).length === 0 && !addedIds.has(edgeId)) {
+        addedIds.add(edgeId);
+        newElements.push({
+          group: 'edges',
+          data: {
+            id: edgeId,
+            source: edge.source,
+            target: edge.target,
+            label: edge.label,
+          },
+        });
+      }
+    });
+
+    if (newElements.length > 0) {
+      try {
+        this.cy.add(newElements);
+      } catch (e) {
+        console.error('[Cytoscape] Failed to add elements:', e);
+      }
+
+      this.cy.resize();
+
+      if (this.cy.nodes().length > 0 && this.container.offsetWidth > 0) {
+        const hasEdges = this.cy.edges().length > 0;
+        const layoutOptions = hasEdges
+          ? {
+              name: 'cose',
+              animate: false,
+              fit: true,
+              padding: 30,
+              randomize: false,
+              nodeRepulsion: () => 400000,
+              idealEdgeLength: () => 100,
+              edgeElasticity: () => 100,
+            }
+          : {
+              name: 'grid',
+              animate: false,
+              fit: true,
+              padding: 30,
+            };
+
+        try {
+          const layout = this.cy.layout(layoutOptions);
+          layout.run();
+        } catch (e) {
+          console.error('[Cytoscape] Layout failed:', e);
+        }
+      }
+
+      this.cy.fit(undefined, 30);
+    }
+  }
+
+  onNodeClick(handler: (node: string, attributes: ContextGraphNode) => void) {
+    this.cy?.on('tap', 'node', (evt) => {
+      const data = evt.target.data();
+      const attrs: ContextGraphNode = {
+        id: data.id,
+        label: data.label,
+        type: data.type,
+        loader: data.loader,
+        properties: data.properties,
+      };
+      handler(data.id, attrs);
+    });
+  }
+
+  onNodeHover() {
+    this.cy?.on('mouseover', 'node', (evt) => {
+      const data = evt.target.data();
+      this.container.title = data.label || data.id;
+    });
+
+    this.cy?.on('mouseout', 'node', () => {
+      this.container.title = '';
+    });
+  }
+
+  private truncateLabel(label: string, maxLength = 20): string {
+    if (label.length <= maxLength) return label;
+    const half = Math.floor((maxLength - 1) / 2);
+    return `${label.slice(0, half)}…${label.slice(-half)}`;
+  }
+
+  clear() {
+    this.cy?.elements().remove();
+  }
+
+  kill() {
+    this.cy?.destroy();
+    this.cy = undefined;
+  }
+
+  refresh() {
+    this.cy?.resize();
+    this.cy?.fit();
+  }
+
+  zoomIn() {
+    if (this.cy) {
+      this.cy.zoom(this.cy.zoom() * 1.2);
+    }
+  }
+
+  zoomOut() {
+    if (this.cy) {
+      this.cy.zoom(this.cy.zoom() * 0.8);
+    }
+  }
+
+  center() {
+    if (this.cy) {
+      this.cy.fit(undefined, 30);
+    }
+  }
+}
diff --git a/...ptBeeClient/src/app/components/project-context-graph/project-context-graph.component.html b/...ptBeeClient/src/app/components/project-context-graph/project-context-graph.component.html
@@ -0,0 +1,128 @@
+<div class="graph-container">
+  @if (isLoading()) {
+    <mat-progress-bar mode="indeterminate" class="graph-loader"></mat-progress-bar>
+  }
+
+  <div class="controls-row">
+    <mat-form-field appearance="outline" class="search-field" subscriptSizing="dynamic">
+      <mat-label>Search Nodes</mat-label>
+      <input matInput [formControl]="searchControl" placeholder="e.g. MyClass" />
+      <mat-icon matPrefix>search</mat-icon>
+      @if (searchControl.value) {
+        <button matSuffix mat-icon-button aria-label="Clear" (click)="searchControl.setValue('')">
+          <mat-icon>close</mat-icon>
+        </button>
+      }
+    </mat-form-field>
+
+    <div class="graph-actions">
+      @if (nodeCount() > 0) {
+        <span class="node-counter">{{ nodeCount() }} nodes</span>
+      }
+      @if (hasMoreResults()) {
+        <button mat-flat-button (click)="loadMore()" [disabled]="isLoading()" class="load-more-btn">
+          <mat-icon>add</mat-icon>
+          Load More
+        </button>
+      }
+      <button mat-icon-button (click)="zoomIn()" matTooltip="Zoom In">
+        <mat-icon>zoom_in</mat-icon>
+      </button>
+      <button mat-icon-button (click)="zoomOut()" matTooltip="Zoom Out">
+        <mat-icon>zoom_out</mat-icon>
+      </button>
+      <button mat-icon-button (click)="fitGraph()" matTooltip="Fit Graph">
+        <mat-icon>fit_screen</mat-icon>
+      </button>
+    </div>
+  </div>
+
+  @if (error()) {
+    <div class="error-banner">
+      <mat-icon>error_outline</mat-icon>
+      <span>{{ error() }}</span>
+    </div>
+  }
+
+  <mat-sidenav-container class="graph-sidenav-container">
+    <mat-sidenav-content>
+      @if (isEmpty() && !isLoading()) {
+        <div class="empty-placeholder">
+          <mat-icon class="placeholder-icon">search</mat-icon>
+          <h3>No nodes to display</h3>
+          <p>Search for nodes above to start exploring the project context.</p>
+        </div>
+      }
+      <div #container class="cy-container"></div>
+    </mat-sidenav-content>
+
+    <mat-sidenav mode="side" position="end" [opened]="!!selectedNode()" class="details-sidenav">
+      @if (selectedNode(); as node) {
+        <div class="details-container">
+          <div class="details-header-row">
+            <span class="details-title">{{ node.label }}</span>
+            <button mat-icon-button (click)="selectedNode.set(null)" class="close-btn">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+
+          <mat-divider></mat-divider>
+
+          <div class="details-content">
+            <mat-list>
+              <mat-list-item class="property-list-item">
+                <span matListItemTitle>Type</span>
+                <div class="property-value-wrapper">
+                  <pre class="property-value">{{ node.type }}</pre>
+                </div>
+              </mat-list-item>
+              <mat-list-item class="property-list-item">
+                <span matListItemTitle>ID</span>
+                <div class="property-value-wrapper">
+                  <pre class="property-value id-text">{{ node.id }}</pre>
+                </div>
+              </mat-list-item>
+
+              @if (node.loader) {
+                <mat-list-item class="property-list-item">
+                  <span matListItemTitle>Loader</span>
+                  <div class="property-value-wrapper">
+                    <pre class="property-value">{{ node.loader }}</pre>
+                  </div>
+                </mat-list-item>
+              }
+            </mat-list>
+
+            <mat-divider></mat-divider>
+
+            <h4 class="properties-title">Properties</h4>
+            <mat-list>
+              @for (prop of node.properties | keyvalue; track prop.key) {
+                <mat-list-item class="property-list-item">
+                  <span matListItemTitle>{{ prop.key }}</span>
+                  <div class="property-value-wrapper">
+                    <pre class="property-value">{{ formatPropertyValue(prop.value) }}</pre>
+                  </div>
+                </mat-list-item>
+              }
+            </mat-list>
+          </div>
+        </div>
+      }
+    </mat-sidenav>
+  </mat-sidenav-container>
+
+  <div style="visibility: hidden; position: fixed" [style.left]="menuPosition.x" [style.top]="menuPosition.y" [matMenuTriggerFor]="contextMenu"></div>
+  <mat-menu #contextMenu="matMenu">
+    <ng-template matMenuContent let-nodeId="nodeId">
+      <button mat-menu-item (click)="expandNeighbors(nodeId)">
+        <mat-icon>hub</mat-icon>
+        <span>Expand Neighbors</span>
+      </button>
+      <button mat-menu-item (click)="centerOnNode(nodeId)">
+        <mat-icon>center_focus_strong</mat-icon>
+        <span>Center</span>
+      </button>
+    </ng-template>
+  </mat-menu>
+</div>