feat: graph-page

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";