lynxkite-app/web/src/workspace/nodes/NodeWithVisualization.tsx

import React, { useEffect } from 'react';
import NodeWithParams from './NodeWithParams';
const echarts = await import('echarts');

const NodeWithVisualization = (props: any) => {
  const chartsRef = React.useRef<HTMLDivElement>(null);
  const chartsInstanceRef = React.useRef<echarts.ECharts>();
  useEffect(() => {
    const opts = props.data?.display?.value;
    if (!opts || !chartsRef.current) return;
    console.log(chartsRef.current);
    chartsInstanceRef.current = echarts.init(chartsRef.current, null, { renderer: 'canvas', width: 250, height: 250 });
    chartsInstanceRef.current.setOption(opts);
    const onResize = () => chartsInstanceRef.current?.resize();
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
      chartsInstanceRef.current?.dispose();
    };
  }, [props.data?.display?.value]);
  return (
    <NodeWithParams {...props}>
      <div className="box" draggable={false} ref={chartsRef} />;
    </NodeWithParams>
  );
};

export default NodeWithVisualization;