I would like to customize the cytoscape component.
I created my own cytoscape component in react and i tested it in demo, it works well.
after i try to convert it to python by npm run build it gives me the following error:
Error: did not recognize object of type “ChainExpression”
my customized component is here.
Blockquote
import React, {useEffect, useRef, useState} from 'react';
import Cytoscape from 'cytoscape';
import './cytoscapecustomized.css';
import cola from 'cytoscape-cola';
import PropTypes from 'prop-types';
Cytoscape.use(cola);
const ToolTip = ({x, y, onConfirm, onCancel, nodeInfo}) => {
return (
<div
className="tooltip-box"
style={{
top: y + 'px',
left: x + 'px',
}}
>
This node has selected by right clicked for node:
<b>{`${nodeInfo?.data.id}`}</b> would you like to proceed?
<div className="yes-no-container-button">
<button onClick={onConfirm}>Yes</button>
<button onClick={onCancel}>No</button>
</div>
</div>
);
};
const CytoScapeCustomized = (props) => {
const graphRef = useRef();
const graphInstanceRef = useRef();
const [rightNode, setRightNode] = useState(null);
const [displayToolTip, setDisplayToolTip] = useState(false);
const [toolTipPosition, setToolTipPosition] = useState({
x: 0,
y: 0,
});
useEffect(() => {
return () => {
if (graphInstanceRef.current !== null) {
graphInstanceRef.current.destroy();
}
};
}, []);
useEffect(() => {
if (graphRef.current === null) {
return;
}
graphInstanceRef.current = Cytoscape({
container: graphRef.current,
elements: props.elements,
style: props.stylesheet,
layout: props.layout,
});
}, [props.elements]);
useEffect(() => {
graphInstanceRef.current.on('click', 'node', (event) => {
if (rightNode !== null && displayToolTip) {
graphInstanceRef.current
.$(`#${rightNode.data.id}`)
.removeClass('select-node');
setDisplayToolTip(false);
setRightNode(null);
}
const node = event.target;
if (props.selectedNodes.includes(node.id())) {
graphInstanceRef.current
.$(`#${node.id()}`)
.removeClass('multi-select-node');
const newSelectedNodes = props.selectedNodes.filter(
(item) => item !== node.id()
);
if (props.setProps) {
props.setProps({
selectedNodes: newSelectedNodes,
});
}
} else {
graphInstanceRef.current
.$(`#${node.id()}`)
.addClass('multi-select-node');
const newSelectedNodes = [...props.selectedNodes, node.id()];
if (props.setProps) {
props.setProps({
selectedNodes: newSelectedNodes,
});
}
}
});
return () => {
if (graphInstanceRef.current) {
graphInstanceRef.current.removeListener('click', 'node');
}
};
}, [props.selectedNodes.length, displayToolTip, rightNode]);
useEffect(() => {
graphInstanceRef.current.on('cxttapstart', 'node', (event) => {
const node = event.target;
if (props.selectedNodes.includes(node.id())) {
graphInstanceRef.current
.$(`#${node.id()}`)
.removeClass('multi-select-node');
const newSelectedNodes = props.selectedNodes.filter(
(item) => item !== node.id()
);
if (props.setProps) {
props.setProps({
selectedNodes: newSelectedNodes,
});
}
}
if (rightNode !== null) {
graphInstanceRef.current
.$(`#${node.id()}`)
.removeClass('select-node');
setDisplayToolTip(false);
setRightNode(null);
} else {
graphInstanceRef.current
.$(`#${node.id()}`)
.addClass('select-node');
const currentElement = props.elements.find(
(item) => item.data.id === node.id()
);
setDisplayToolTip(true);
setRightNode(currentElement);
setToolTipPosition(node.renderedPosition());
}
});
return () => {
if (graphInstanceRef.current) {
graphInstanceRef.current.removeListener('cxttapstart', 'node');
}
};
}, [props.elements, rightNode, displayToolTip, props.selectedNodes]);
return (
<div id={props.id} className={props.className} style={props.style}>
<div className="container-graph-tooltip">
<div ref={graphRef} className="custom-cytoscape"></div>
{displayToolTip && (
<ToolTip
x={toolTipPosition.x}
y={toolTipPosition.y}
nodeInfo={rightNode}
onConfirm={() => {
graphInstanceRef.current
.$(`#${rightNode.data.id}`)
.removeClass('select-node');
setDisplayToolTip(false);
if (props.setProps) {
props.setProps({
selectedNodeIdRight: rightNode.data.id,
});
}
setRightNode(null);
}}
onCancel={() => {
graphInstanceRef.current
.$(`#${rightNode.data.id}`)
.removeClass('select-node');
setDisplayToolTip(false);
setRightNode(null);
}}
/>
)}
</div>
</div>
);
};
CytoScapeCustomized.defaultProps = {};
CytoScapeCustomized.propTypes = {
/**
* The ID used to identify this component in Dash callbacks.
*/
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
elements: PropTypes.array,
stylesheet: PropTypes.array,
layout: PropTypes.object,
selectedNodes: PropTypes.array,
selectedNodeIdRight: PropTypes.string,
setProps: PropTypes.func,
};
export default CytoScapeCustomized;
Blockquote
Is there any people to help me maybe I considered wrong procedure in my react component?
Thanks.
