import { query } from '@/modules';
import { useEffect } from 'react';
import { drawGraph } from './graph/d3';
export const D3Grahp = () => {
  const get = async () => {
    const res = await query.post({
      path: 'prompt',
      key: 'list',
    });
    console.log(res);
    const grahpData = {
      nodes: res.data.map((item) => {
        return {
          id: item.id,
          label: item.title,
          type: 'prompt',
        };
      }),
      links: [],
    };
    drawGraph(grahpData);
  };
  const getD3 = async () => {
    const res = await query.post({
      path: 'prompt',
      key: 'getD3',
    });
    drawGraph(res.data);
  };
  useEffect(() => {
    getD3();
    return () => {
      document.querySelector('.ai-graph')!.innerHTML = '';
    };
  }, []);
  return (
    <div className='w-full h-full'>
      <svg className='ai-graph border shadow-sm p-2 mx-auto mt-10 ' width='960' height='600' ></svg>
    </div>
  );
};
