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