feat: graph-page

frontend/src/modules/graph/Graph.tsx

@@ -0,0 +1,125 @@
+import React, { useRef, useEffect, useState } from "react";
+import type {
+  GraphData,
+  GraphNode,
+  GraphLink,
+  ContextMenuState,
+} from "./types";
+import { useGraphStore } from "./store/useGraphStore";
+import {
+  ForceGraph,
+  GraphControls,
+  GraphContextMenu,
+  GraphStatusBar,
+} from "./components";
+
+interface GraphProps {
+  initialData?: GraphData;
+  onExport?: () => void;
+  onDataChange?: (data: GraphData) => void;
+}
+
+export const Graph: React.FC<GraphProps> = ({
+  initialData,
+  onExport,
+  onDataChange,
+}) => {
+  const fgRef = useRef<any>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+
+  const data = useGraphStore((s) => s.data);
+  const isLinkMode = useGraphStore((s) => s.isLinkMode);
+  const selectedNode = useGraphStore((s) => s.selectedNode);
+  const setData = useGraphStore((s) => s.setData);
+
+  // Инициализация данных
+  useEffect(() => {
+    if (initialData) setData(initialData);
+  }, [initialData, setData]);
+
+  // Отслеживаем размеры контейнера
+  useEffect(() => {
+    const container = fgRef.current?.parentElement;
+    if (!container) return;
+
+    const updateDimensions = () => {
+      setDimensions({
+        width: container.clientWidth,
+        height: container.clientHeight || window.innerHeight - 160,
+      });
+    };
+
+    updateDimensions();
+
+    const observer = new ResizeObserver(updateDimensions);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  // Закрыть контекстное меню по клику вне
+  useEffect(() => {
+    const handleClickOutside = () => setContextMenu(null);
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, []);
+
+  const handleNodeRightClick = (node: GraphNode, event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ x: event.clientX, y: event.clientY, node, link: null });
+  };
+
+  const handleLinkRightClick = (link: GraphLink, event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ x: event.clientX, y: event.clientY, node: null, link });
+  };
+
+  if (!data || data.nodes.length === 0) {
+    return (
+      <div className="bg-gray-900 rounded-xl shadow-lg p-6">
+        <div className="flex items-center justify-center h-96">
+          <div className="text-center">
+            <p className="text-gray-400 mb-4">Нет данных для отображения</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-900 rounded-xl shadow-lg p-6">
+      <div
+        className="border border-gray-800 rounded-lg overflow-hidden relative"
+        style={{
+          height: "calc(100vh - 200px)",
+          position: "relative",
+          width: "100%",
+        }}
+      >
+        <ForceGraph
+          data={data}
+          onNodeRightClick={handleNodeRightClick}
+          onLinkRightClick={handleLinkRightClick}
+        />
+
+        <GraphContextMenu
+          menu={contextMenu}
+          data={data}
+          onClose={() => setContextMenu(null)}
+        />
+
+        <GraphStatusBar isLinkMode={isLinkMode} selectedNode={selectedNode} />
+      </div>
+
+      <GraphControls
+        fgRef={fgRef}
+        onExport={onExport}
+        onDataChange={onDataChange}
+      />
+    </div>
+  );
+};
+
+export default Graph;

frontend/src/modules/graph/components/ForceGraph.tsx

@@ -0,0 +1,162 @@
+import React, { useRef, useEffect, useCallback } from "react";
+import ForceGraph2D from "react-force-graph-2d";
+import type { GraphData, GraphNode, GraphLink } from "../types";
+import { useGraphStore } from "../store/useGraphStore";
+
+interface ForceGraphProps {
+  data: GraphData;
+  onNodeRightClick: (node: GraphNode, event: MouseEvent) => void;
+  onLinkRightClick: (link: GraphLink, event: MouseEvent) => void;
+}
+
+export const ForceGraph: React.FC<ForceGraphProps> = ({
+  data,
+  onNodeRightClick,
+  onLinkRightClick,
+}) => {
+  const fgRef = useRef<any>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const highlightNodes = useGraphStore((s) => s.highlightNodes);
+  const highlightLinks = useGraphStore((s) => s.highlightLinks);
+  const selectedNode = useGraphStore((s) => s.selectedNode);
+  const isLinkMode = useGraphStore((s) => s.isLinkMode);
+
+  const handleNodeClick = useCallback((node: GraphNode) => {
+    const store = useGraphStore.getState();
+    if (store.isLinkMode) {
+      if (store.selectedNode === null) {
+        store.setSelectedNode(node);
+      } else if (store.selectedNode.id !== node.id) {
+        store.createLink(store.selectedNode.id, node.id);
+        store.setSelectedNode(null);
+        store.toggleLinkMode();
+      } else {
+        store.setSelectedNode(null);
+      }
+    }
+  }, []);
+
+  const handleNodeHover = (node: GraphNode | null) => {
+    const newHighlightNodes = new Set<string>();
+    const newHighlightLinks = new Set<GraphLink>();
+
+    if (node) {
+      newHighlightNodes.add(node.id);
+      data.links.forEach((link) => {
+        if (link.source === node.id || link.target === node.id) {
+          newHighlightLinks.add(link);
+          newHighlightNodes.add(link.source as string);
+          newHighlightNodes.add(link.target as string);
+        }
+      });
+    }
+
+    useGraphStore.getState().setHighlight(newHighlightNodes, newHighlightLinks);
+  };
+
+  const getNodeColor = (node: GraphNode) => {
+    if (highlightNodes.has(node.id)) return "#fbbf24";
+    if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
+
+    switch (node.type) {
+      case "service":
+        return "#3b82f6";
+      case "agent":
+        return "#8b5cf6";
+      default:
+        return "#6b7280";
+    }
+  };
+
+  const getNodeSize = (node: GraphNode) => {
+    switch (node.type) {
+      case "service":
+        return 3;
+      case "agent":
+        return 3;
+      default:
+        return 5;
+    }
+  };
+
+  const renderNode = (
+    node: GraphNode,
+    ctx: CanvasRenderingContext2D,
+    globalScale: number,
+  ) => {
+    const size = getNodeSize(node);
+    const color = getNodeColor(node);
+
+    if (!node.x || !node.y) return;
+
+    ctx.beginPath();
+    ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+    ctx.fillStyle = color;
+    ctx.fill();
+
+    ctx.fillStyle = "#ffffff";
+    ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+
+    if (node.type === "service") {
+      ctx.fillText("S", node.x, node.y);
+    } else if (node.type === "agent") {
+      ctx.fillText("A", node.x, node.y);
+    }
+
+    if (globalScale > 0.5) {
+      ctx.fillStyle = "#e5e7eb";
+      ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
+      ctx.textAlign = "center";
+      ctx.fillText(node.name, node.x, node.y + size + 8);
+    }
+  };
+
+  // Fit zoom on engine stop
+  useEffect(() => {
+    if (fgRef.current) {
+      const timer = setTimeout(() => {
+        fgRef.current?.zoomToFit(400);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [data]);
+
+  return (
+    <div ref={containerRef} className="w-full h-full relative">
+      <ForceGraph2D
+        ref={fgRef}
+        graphData={data}
+        width={containerRef.current?.clientWidth}
+        height={containerRef.current?.clientHeight || 600}
+        nodeCanvasObject={renderNode}
+        nodeLabel={(node: GraphNode) => {
+          return `${node.name}\n${node.description || ""}\n${node.type === "service" ? "Сервис" : "Агент"}\nПКМ для удаления`;
+        }}
+        linkLabel={(link: GraphLink) => {
+          const sourceName =
+            data.nodes.find((n) => n.id === link.source)?.name || link.source;
+          const targetName =
+            data.nodes.find((n) => n.id === link.target)?.name || link.target;
+          return `Связь: ${sourceName} → ${targetName}\nПКМ для удаления`;
+        }}
+        linkColor={(link: any) => {
+          return highlightLinks.has(link) ? "#fbbf24" : "#4b5563";
+        }}
+        linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1.5)}
+        linkDirectionalParticles={0}
+        onNodeClick={handleNodeClick}
+        onNodeRightClick={onNodeRightClick}
+        onLinkRightClick={onLinkRightClick}
+        onNodeHover={handleNodeHover}
+        cooldownTicks={50}
+        cooldownTime={2000}
+        d3AlphaDecay={0.03}
+        d3VelocityDecay={0.4}
+        warmupTicks={50}
+      />
+    </div>
+  );
+};

frontend/src/modules/graph/components/GraphContextMenu.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { FiLink, FiTrash2, FiMinusCircle } from "react-icons/fi";
+import type { ContextMenuState, GraphNode, GraphLink, GraphData } from "../types";
+import { useGraphStore } from "../store/useGraphStore";
+
+interface GraphContextMenuProps {
+  menu: ContextMenuState | null;
+  data: GraphData;
+  onClose: () => void;
+}
+
+export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
+  menu,
+  data,
+  onClose,
+}) => {
+  const removeNode = useGraphStore((s) => s.removeNode);
+  const removeLink = useGraphStore((s) => s.removeLink);
+  const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
+  const setSelectedNode = useGraphStore((s) => s.setSelectedNode);
+
+  if (!menu) return null;
+
+  const handleDeleteNode = (node: GraphNode) => {
+    removeNode(node.id);
+    onClose();
+  };
+
+  const handleDeleteLink = (link: GraphLink) => {
+    removeLink(link);
+    onClose();
+  };
+
+  const handleCreateLink = (node: GraphNode) => {
+    toggleLinkMode();
+    setSelectedNode(node);
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed bg-gray-800 rounded-lg shadow-lg border border-gray-700 py-1 z-50"
+      style={{ top: menu.y, left: menu.x }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {menu.node && (
+        <>
+          <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
+            {menu.node.name}
+          </div>
+          <button
+            onClick={() => handleCreateLink(menu.node!)}
+            className="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2"
+          >
+            <FiLink size={14} /> Создать связь
+          </button>
+          <button
+            onClick={() => handleDeleteNode(menu.node!)}
+            className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
+          >
+            <FiTrash2 size={14} /> Удалить узел
+          </button>
+        </>
+      )}
+      {menu.link && (
+        <>
+          <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
+            Связь:{" "}
+            {typeof menu.link.source === "string"
+              ? menu.link.source
+              : (menu.link.source as any).name || (menu.link.source as any).id}{" "}
+            →{" "}
+            {typeof menu.link.target === "string"
+              ? menu.link.target
+              : (menu.link.target as any).name || (menu.link.target as any).id}
+          </div>
+          <button
+            onClick={() => handleDeleteLink(menu.link!)}
+            className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
+          >
+            <FiMinusCircle size={14} /> Удалить связь
+          </button>
+        </>
+      )}
+    </div>
+  );
+};

frontend/src/modules/graph/components/GraphControls.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import {
+  FiDownload,
+  FiZoomIn,
+  FiZoomOut,
+  FiMove,
+  FiPlus,
+  FiLink,
+} from "react-icons/fi";
+import { useGraphStore } from "../store/useGraphStore";
+import type { GraphData } from "../types";
+
+interface GraphControlsProps {
+  fgRef: React.RefObject<any>;
+  onExport?: () => void;
+  onDataChange?: (data: GraphData) => void;
+}
+
+export const GraphControls: React.FC<GraphControlsProps> = ({
+  fgRef,
+  onExport,
+  onDataChange,
+}) => {
+  const isLinkMode = useGraphStore((s) => s.isLinkMode);
+  const selectedNode = useGraphStore((s) => s.selectedNode);
+  const data = useGraphStore((s) => s.data);
+  const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
+  const addNode = useGraphStore((s) => s.addNode);
+  const exportData = useGraphStore((s) => s.exportData);
+
+  const handleAddNode = () => {
+    const newNodeName = prompt(
+      "Введите имя узла:",
+      `Node ${data.nodes.length + 1}`,
+    );
+    if (newNodeName) {
+      const isService = window.confirm(
+        "Выберите тип: OK - Сервис, Отмена - Агент",
+      );
+      addNode({
+        id: `node-${Date.now()}`,
+        name: newNodeName,
+        type: isService ? "service" : "agent",
+        val: isService ? 12 : 8,
+        description: "Новый узел",
+      });
+    }
+  };
+
+  const handleZoomIn = () => {
+    if (fgRef.current) {
+      const currentZoom = fgRef.current.zoom();
+      fgRef.current.zoom(currentZoom * 1.2);
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (fgRef.current) {
+      const currentZoom = fgRef.current.zoom();
+      fgRef.current.zoom(currentZoom / 1.2);
+    }
+  };
+
+  const handleFit = () => {
+    if (fgRef.current) {
+      fgRef.current.zoomToFit(400);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between mt-4 text-sm text-gray-400">
+      <div className="flex gap-6">
+        <div className="flex items-center gap-2">
+          <span>
+            Сервисы: {data.nodes.filter((n) => n.type === "service").length}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span>
+            Агенты: {data.nodes.filter((n) => n.type === "agent").length}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-gray-500 rounded-sm"></div>
+          <span>Связи: {data.links.length}</span>
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        {/* Режим создания связи */}
+        <button
+          onClick={toggleLinkMode}
+          className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
+            isLinkMode
+              ? "bg-green-600 hover:bg-green-700 text-white"
+              : "bg-gray-800 hover:bg-gray-700 text-gray-300"
+          }`}
+        >
+          <FiLink />
+          <span className="text-sm">
+            {isLinkMode ? "Создание связи..." : "Добавить связь"}
+          </span>
+        </button>
+
+        {/* Добавить узел */}
+        <button
+          onClick={handleAddNode}
+          className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiPlus />
+          <span className="text-sm">Узел</span>
+        </button>
+
+        {/* Зум + */}
+        <button
+          onClick={handleZoomIn}
+          className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiZoomIn />
+        </button>
+
+        {/* Зум - */}
+        <button
+          onClick={handleZoomOut}
+          className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiZoomOut />
+        </button>
+
+        {/* Fit */}
+        <button
+          onClick={handleFit}
+          className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiMove />
+        </button>
+
+        {/* Экспорт */}
+        <button
+          onClick={onExport || exportData}
+          className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiDownload />
+          <span className="text-sm">Экспорт</span>
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/modules/graph/components/GraphStatusBar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { FiLink } from "react-icons/fi";
+import type { GraphNode } from "../types";
+
+interface GraphStatusBarProps {
+  isLinkMode: boolean;
+  selectedNode: GraphNode | null;
+}
+
+export const GraphStatusBar: React.FC<GraphStatusBarProps> = ({
+  isLinkMode,
+  selectedNode,
+}) => {
+  if (!isLinkMode) return null;
+
+  return (
+    <div className="absolute bottom-4 left-4 bg-green-600 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2">
+      <FiLink /> Режим создания связей: кликните на два узла для соединения
+      {selectedNode && (
+        <span className="ml-2">Выбран: {selectedNode.name}</span>
+      )}
+    </div>
+  );
+};

frontend/src/modules/graph/components/index.ts

@@ -0,0 +1,4 @@
+export { ForceGraph } from "./ForceGraph";
+export { GraphControls } from "./GraphControls";
+export { GraphContextMenu } from "./GraphContextMenu";
+export { GraphStatusBar } from "./GraphStatusBar";

frontend/src/modules/graph/index.ts

@@ -0,0 +1,3 @@
+export { Graph } from "./Graph";
+export { useGraphStore } from "./store/useGraphStore";
+export type { GraphData, GraphNode, GraphLink } from "./types";

frontend/src/modules/graph/store/useGraphStore.ts

@@ -0,0 +1,113 @@
+import { create } from "zustand";
+import type { GraphData, GraphNode, GraphLink } from "../types";
+
+interface GraphState {
+  data: GraphData;
+  highlightNodes: Set<string>;
+  highlightLinks: Set<GraphLink>;
+  isLinkMode: boolean;
+  selectedNode: GraphNode | null;
+
+  // Действия с данными
+  setData: (data: GraphData) => void;
+  addNode: (node: GraphNode) => void;
+  removeNode: (nodeId: string) => void;
+  addLink: (link: GraphLink) => void;
+  removeLink: (link: GraphLink) => void;
+
+  // Подсветка
+  setHighlight: (nodeIds: Set<string>, links: Set<GraphLink>) => void;
+
+  // Режим связи
+  toggleLinkMode: () => void;
+  setSelectedNode: (node: GraphNode | null) => void;
+  createLink: (sourceId: string, targetId: string) => void;
+
+  // Экспорт
+  exportData: () => void;
+}
+
+export const useGraphStore = create<GraphState>((set, get) => ({
+  data: { nodes: [], links: [] },
+  highlightNodes: new Set(),
+  highlightLinks: new Set(),
+  isLinkMode: false,
+  selectedNode: null,
+
+  setData: (data) => set({ data }),
+
+  addNode: (node) => {
+    set((state) => ({
+      data: {
+        ...state.data,
+        nodes: [...state.data.nodes, node],
+      },
+    }));
+  },
+
+  removeNode: (nodeId) => {
+    set((state) => ({
+      data: {
+        nodes: state.data.nodes.filter((n) => n.id !== nodeId),
+        links: state.data.links.filter(
+          (l) => l.source !== nodeId && l.target !== nodeId,
+        ),
+      },
+    }));
+  },
+
+  addLink: (link) => {
+    set((state) => ({
+      data: {
+        ...state.data,
+        links: [...state.data.links, link],
+      },
+    }));
+  },
+
+  removeLink: (linkToRemove) => {
+    set((state) => ({
+      data: {
+        ...state.data,
+        links: state.data.links.filter((l) => l !== linkToRemove),
+      },
+    }));
+  },
+
+  setHighlight: (nodeIds, links) =>
+    set({ highlightNodes: nodeIds, highlightLinks: links }),
+
+  toggleLinkMode: () =>
+    set((state) => ({
+      isLinkMode: !state.isLinkMode,
+      selectedNode: null,
+    })),
+
+  setSelectedNode: (node) => set({ selectedNode: node }),
+
+  createLink: (sourceId, targetId) => {
+    const { data, addLink } = get();
+
+    const linkExists = data.links.some(
+      (link) =>
+        (link.source === sourceId && link.target === targetId) ||
+        (link.source === targetId && link.target === sourceId),
+    );
+
+    if (!linkExists) {
+      addLink({ source: sourceId, target: targetId, type: "custom" });
+    }
+  },
+
+  exportData: () => {
+    const { data } = get();
+    const dataStr = JSON.stringify(data, null, 2);
+    const blob = new Blob([dataStr], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "graph-data.json";
+    link.click();
+    URL.revokeObjectURL(url);
+  },
+}));

frontend/src/modules/graph/types.ts

@@ -0,0 +1,27 @@
+export interface GraphNode {
+  id: string;
+  name: string;
+  type: "agent" | "service";
+  val?: number;
+  description?: string;
+  x?: number;
+  y?: number;
+}
+
+export interface GraphLink {
+  source: string;
+  target: string;
+  type?: string;
+}
+
+export interface GraphData {
+  nodes: GraphNode[];
+  links: GraphLink[];
+}
+
+export interface ContextMenuState {
+  x: number;
+  y: number;
+  node: GraphNode | null;
+  link: GraphLink | null;
+}