问题描述
我正在重建一个从头开始使用Cytoscape的旧应用。以前的开发人员已经实现了一些代码,因此我正在使用他所做的Cytoscape配置。
我正在建立一个可以被每个节点具有的数据过滤的网络,并为边缘显示不同的颜色和不同的宽度。
当我添加了为节点着色和设置边缘宽度的功能时,由于我已选择了一个节点,因此尝试过滤图形时开始出现错误Cannot assign to read only property 'label' of object '#<Object>'
,而当我无法读取属性'isHeadless'为null时,一条边被选中。我什至每次过滤图表时都试图取消选择,但这没有帮助。
这就是我所说的Cytoscape:
<CytoscapeComponent
elements={colorizednodes(filterednodes,pathname,threshold,coloring,tissue,fcBounds).concat(weightEdges(filteredEdges,filterednodes))}
style={{ width: '100%',height: '600px' }}
cy={(cy) => { cyRef = cy }}
minZoom={0.5}
maxZoom={3}
stylesheet={[
{
selector: 'node',style: {
content: 'data(label)','text-valign': 'center','text-outline-width': 1.5,'text-outline-color': 'black','font-size': '10',color: '#fff','border-width': '2px','border-style': 'solid','border-color': 'black','background-color': 'data(realColor)',}
},{
selector: 'node[?shape]',style: {
shape: 'diamond',width: '3.5em',height: '3.5em'
}
},{
selector: 'edge',style: {
opacity: 0.666,width: 'mapData(tissueNum,44,0.5,2)','line-color': 'black'
}
},{
selector: ':selected',style: {
'overlay-color': '#ffff33','overlay-padding': 2.5,'overlay-opacity': 0.3
}
}
]}
/>
colorizednodes:
const colorizednodes = (filterednodes,fcBounds) => {
let db = 'GTExV8'
if (pathname.includes('HPA/')) {
db = 'HPA'
} else if (pathname.includes('HPA_')) {
db = 'HPA_Proteins'
}
return filterednodes.map((node) => ({
data: {
...node.data,label: node.data.label,realColor: setColor(node,db,fcBounds),shape: decideShape(node,pathname)
}
}))
weightEdges:
const weightEdges = (filteredEdges,filterednodes) => filteredEdges.map((edge) => ({
data: {
...edge.data,tissueNum: Object.values(filterednodes.find((node) => edge.data.source === node.data.id).data.attr.expressions).filter((exp) => exp.expression >= threshold).length || 0 //Todo: Somehow this makes bug,maybe something returns as null??
}
}))
非常感谢您的帮助!我现在很笨了。
编辑:刚刚发现在生产中不会发生此错误。我第一次部署该应用程序后一切正常,但我仍然不喜欢幕后出现问题。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)