Function DecoderGraph

src/lmql/ui/playground/src/DecoderGraph.js:407–653

(props)

}

export function DecoderGraph(props) {
    const graphElementRef = React.useRef();

    const derivedNodeFeatures = props.derivedNodeFeatures || (() => {})

    const [cyData, setCyData] = useState(null);
    const [rawGraphData, setRawGraphData] = useState(null);
    const cyRef = useRef(null)

    props.fitTrigger && props.fitTrigger.addTriggerListener(() => cyRef.current.fit())

    const reset = () => {
        if (cyRef.current) {
            cyRef.current.nodes().remove()
            cyRef.current.edges().remove()
        } else {
            console.log("no cy to reset", cyRef.current, "is cy")
        }
    }

    // listen for changes to persisted graph
    const onPersistedGraphChange = React.useCallback((s) => {
        if (rawGraphData == s) {
            return
        }
        reset()
        setCyData(JSON.parse(s))
        setTimeout(() => cyRef.current.fit(), 0)
    }, [])

    React.useEffect(() => {
        // restore previous graph data
        let graphData = persistedState.getItem("decoder-graph") || null
        if (graphData) {
            let graph = JSON.parse(graphData);
            setCyData(graph)
        }

        persistedState.on("decoder-graph", onPersistedGraphChange)

        return () => {
            // remove listener
            persistedState.remove("decoder-graph", onPersistedGraphChange)
        };
    }, []);
    
    React.useEffect(() => {
        const cy = initDecoderGraphCy(graphElementRef.current)
        cyRef.current = cy
            
        // when clicking a node, highlight all paths to root
        function onSelectNode(evt) {
            let node = evt.target
            let nodes = [node]
            
            // for compound nodes, select all children
            if (node.isParent()) {
                nodes = node.descendants()