Adding cluster layer

[kaihirota]

Hi... Sorry this might be a noob question.. Is it possible to insert a div layer between canvas layers that are inside of the SigmaContainer? I'm trying to add cluster layer like shown in this example, which I found from sigma.js github repo: https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/clusters-labels?file=/index.ts:379-455

I have const container = document.getElementById('sigma-container') inside of and it's always null, presumably because it's located inside of the said element. I know this might now even be related to react-sigma-v2 specifically, but I'd really appreciate it if someone can point me in a direction!

[sim51]

In the context you will have access to thte sigma container : https://github.com/sim51/react-sigma-v2/blob/1.3.0/src/context.ts#L6

So something like that should do the trick :

import { useSigmaContext } from "react-sigma-v2/lib/esm/context";

export const MyCustomGraph: FC = () => {
  const sigmaContext = useSigmaContext();

  useEffect(() => {
      const clustersLayer = ...

      sigmaContext.container.insertBefore(clustersLayer, document.getElementsByClassName("sigma-hovers")[0]);
  }, [sigmaContect.container])

  ...
}

The context is not exposed in the lib per default, that's why I import it with the path lib/esm ... I will change that in the futur.

FYI, I'm preparing a v2 of this lib that should be released at the end of this month. I will include this issue that is totally legit.

Thanks !

[sim51]

See #20

[sim51]

FYI, the sigma container in this lib has no HTML ID (an app can have many sigma instance in the same page), so there is just a class. You can also try : const container = document.getElementsByClassName('sigma-container')[0]

[kaihirota]

Thanks! I'llve give it a try. I've been using react-sigma-v2 and it's great! https://anu-graph-vis.vercel.app/courses

[kaihirota]

@sim51 Is there a list of available parameters for the SigmaContainer props? Specifically, I'm looking for a way to change the threshold at which node labels are shown/hidden.

As shown in the image below, I need to lower the threshold at which node labels are shown, so that at the initial load only the cluster labels are visible.

[kaihirota]

Realized I was thinking about it the wrong way. Adjusted the labelRenderedSizeThreshold property of SigmaContainer and achieved desired outcome:

[sim51]

It seems you found the solution, so I'm closing this ticket