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;
    if (opts.tooltip?.formatter === "GET_THIRD_VALUE") {
      // We can't pass a function from the backend, and can't get good tooltips otherwise.
      opts.tooltip.formatter = (params: any) => params.value[2];
    }
    chartsInstanceRef.current = echarts.init(chartsRef.current, null, {
      renderer: "canvas",
      width: "auto",
      height: "auto",
    });
    chartsInstanceRef.current.setOption(opts);
    const resizeObserver = new ResizeObserver(() => {
      const e = chartsRef.current!;
      e.style.padding = "1px";
      chartsInstanceRef.current?.resize();
      e.style.padding = "0";
    });
    const observed = chartsRef.current;
    resizeObserver.observe(observed);
    return () => {
      resizeObserver.unobserve(observed);
      chartsInstanceRef.current?.dispose();
    };
  }, [props.data?.display?.value]);
  const nodeStyle = { display: "flex", flexDirection: "column" };
  const vizStyle = { flex: 1 };
  return (
    <NodeWithParams nodeStyle={nodeStyle} collapsed {...props}>
      <div style={vizStyle} ref={chartsRef} />
    </NodeWithParams>
  );
};

export default NodeWithVisualization;