ruch/dist/visualizer/app/src/App.js

Revolutionary React TypeScript CLI with hexagonal architecture & AI-powered development assistance. Create maintainable, scalable applications with domain-driven design and integrated AI tooling.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const DomainGraph_1 = require("./components/DomainGraph");
const ControlPanel_1 = require("./components/ControlPanel");
const defaultSettings = {
    showLabels: true,
    highlightCycles: true,
    nodeSize: 80,
    edgeThickness: 2,
};
const App = () => {
    const [graphData, setGraphData] = (0, react_1.useState)(null);
    const [settings, setSettings] = (0, react_1.useState)(defaultSettings);
    const [loading, setLoading] = (0, react_1.useState)(true);
    const [error, setError] = (0, react_1.useState)(null);
    (0, react_1.useEffect)(() => {
        // Fetch graph data from the server
        const fetchGraphData = async () => {
            try {
                const response = await fetch('/api/graph-data');
                if (!response.ok) {
                    throw new Error(`Failed to fetch graph data: ${response.statusText}`);
                }
                const data = await response.json();
                setGraphData(data);
            }
            catch (err) {
                setError(err instanceof Error ? err.message : 'Unknown error');
            }
            finally {
                setLoading(false);
            }
        };
        fetchGraphData();
    }, []);
    const handleNodeClick = (nodeId) => {
        console.log('Node clicked:', nodeId);
    };
    const handleEdgeClick = (edgeId) => {
        console.log('Edge clicked:', edgeId);
    };
    if (loading) {
        return ((0, jsx_runtime_1.jsx)("div", { style: {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
                fontSize: '18px',
                color: '#64748b',
            }, children: "Loading domain graph..." }));
    }
    if (error) {
        return ((0, jsx_runtime_1.jsxs)("div", { style: {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
                flexDirection: 'column',
                color: '#ef4444',
            }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Error loading graph data" }), (0, jsx_runtime_1.jsx)("p", { children: error })] }));
    }
    if (!graphData) {
        return ((0, jsx_runtime_1.jsxs)("div", { style: {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
                flexDirection: 'column',
                color: '#64748b',
            }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "No domain data found" }), (0, jsx_runtime_1.jsx)("p", { children: "Make sure your project has domains in the src/domains/ directory" })] }));
    }
    return ((0, jsx_runtime_1.jsxs)("div", { style: { width: '100vw', height: '100vh', display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(ControlPanel_1.ControlPanel, { settings: settings, onSettingsChange: setSettings, graphData: graphData }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, height: '100%' }, children: (0, jsx_runtime_1.jsx)(DomainGraph_1.DomainGraph, { graphData: graphData, settings: settings, onNodeClick: handleNodeClick, onEdgeClick: handleEdgeClick }) })] }));
};
exports.default = App;
//# sourceMappingURL=App.js.map