type image undefined

[ian-j-stewart]

Thanks for your work on this great module. i am refactoring my code to use this module instead of the old react sigma module to render neo4j data. I use a reworked version of the neosig code to map the fields etc. I load the graph into a state and render this state so that the graph is rendered after the data is loaded and processed. I followed this example carefully to add images to nodes: https://github.com/sim51/react-sigma/issues/32

The graph renders fine unless I set type: image in the addNode function in which case I get the error:

sigma.js:622 Uncaught TypeError: Cannot read properties of undefined (reading 'process')
    at Sigma.process (sigma.js:622:1)
    at Sigma._refresh (sigma.js:698:1)
    at sigma.js:720:1

code extracts below (full module is 450 lines but can share more as useful):

import { SigmaContainer, ControlsContainer, ZoomControl, FullScreenControl, SearchControl, useRegisterEvents } from "@react-sigma/core";
import getNodeProgramImage from "sigma/rendering/webgl/programs/node.image";
import { MultiDirectedGraph } from "graphology";
import "@react-sigma/core/lib/react-sigma.min.css";

const App: FC = () => {
    var sublist = []
    const newgraph = new MultiDirectedGraph();
    const [isLoading, setLoading] = useState(true);
    const [rendergraph, setRendergraph] = useState('');`

...
function Neo4jToSigmaNode(node) {
    //try {if (node.labels){
       // if (node.properties.comment){var nc = node.properties.comment}else{var nc = "Enter Comment"}}}catch{}
        let id = (node.identity.toString())
        newgraph.addNode(id, {y: Math.random(),  x: Math.random(),   label: node.properties.name ,size: 3, type: "image",  image: "https://pbs.twimg.com/profile_images/554245151866900481/Qm1dEySq_200x200.png" })
        return ;
    }

<div style={{ height: "500px",  position: 'relative', left: '5px', top: '0px', right: '5px', bottom: '5px'}}>Chart {toggle}
                        <SigmaContainer    clickNode={onClickNode}  graph={rendergraph}  settings={{
                            nodeProgramClasses: { image: getNodeProgramImage()},
                            labelDensity: 0.07,
                            labelGridCellSize: 60,
                            labelRenderedSizeThreshold: 15,
                            labelFont: "Lato, sans-serif"}} ></SigmaContainer></div>

I have checked that my node add function is adding the type: image and image: url fields to node.attributes.

I'm struggling with how to diagnose this. I suppose the error could be an artifact of me loading the graph into the state then rendering the state value. But it could also be a bug.

Many thanks Ian

[sim51]

I can't reproduce it : https://codesandbox.io/s/react-sigma-issues-37-96mf3d?file=/src/App.tsx

This is a list of what you test / correct on your code :

• Initialize your graph with a string is bad idea. You should change that : const [rendergraph, setRendergraph] = useState(''); by something like that :

  const [rendergraph, setRendergraph] = useState(null);`
  ...
  return ( 
  <div>
  ...
  {renderGraph && ( <SigmaContainer graph={rendergraph} ... ></SigmaContainer>)}
  </div>
  )

• try to set the defaultNodeType to image on sigma settings

• try to add the circle program on sigma settings

[ian-j-stewart]

Thanks for your response and for looking into it. I figured it out and feel a bit silly.It was a version issue with react-sigma. While I had run an npm update, I was not using the latest versions, for whatever reason. Resolving that fixed the issue.