/// <reference types="vite/client" />

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./layout.css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
    background-color: #333;
}
#root {
    flex: 1;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

import React, { useRef, useEffect } from "react";
import cytoscape from "cytoscape";
import "./TestGraph.css";
export const TestGraph = () => {
    const cy = useRef(null);
    useEffect(() => {
        cy.current = cytoscape({
            container: document.querySelectorAll('.test-cy')[0], // container to render in
            elements: [
                { data: { 
                    id: 'a' ,
                    label: 'Node A'
                } },
                { data: { 
                    id: 'b' ,
                    label: 'Node B'
                } },
                {
                    data: {
                        id: 'ab',
                        source: 'a',
                        target: 'b',
                    }
                }
            ],
            style: [
                {
                    selector: 'node',
                    style: {
                        shape: 'rectangle',
                        'background-color': 'red',
                    }
                }
            ],
            layout: {
                name: 'grid',
                rows: 1,
            }
        });
        return () => {
            cy.current.destroy();
        };
    });
    return <div class="test-cy" />;
};

.test-cy {
    padding: 30px;
    background-color: #f5f5f5;
    flex: 1;
}

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import { TestGraph } from "./TestGraph";
import "./App.css";
const useRoute = () => {
    return TestGraph;
}
function App() {
    const Route = useRoute();
    return (
        <main className="container">
            <Route />
        </main>
    );
}
export default App;

main {
    padding: 20px;
}