Expose hoverRenderer label background as setting

[xShields]

Feature request

Is your feature request related to a problem? Please describe. I don't believe there is a way to change the background color of a label you hover, unless you override the drawHover hoverRenderer. Changing this color is necessary if you want to change the label text color to any lighter colors (to appear on a darker background).

Describe the solution you'd like It would be helpful to expose the label background variable as a setting. It appears to be hardcoded in the default drawHover code to #FFF.

Describe alternatives you've considered I'm currently just overriding the whole drawHover function to change this color. If there's a better method than adding a setting, would be happy to try.

Additional context N/A

[jacomyal]

Hi @xShields,

Writing your own drawHover function is actually currently the idiomatic and expected way to solve that issue, and I think I want to keep it that way.

I think it's good that we keep the default label and hover renderers as light as we can, so that people understand how it works and want to overload them. Personally, I override them in almost every projects with sigma. Sometimes I want to remove the shadow to fit the rest of the page's style, sometimes I want to add subtitles (like in the website's demo), or even just write the label using two different colors.

I'm afraid that if we start adding new features in those default renderers, they will become harder to "fork", and people will want to add features in them even more.

[xShields]

Thank you for the fast response. I definitely see where you're coming from now, if that's actually intended as the solution. I'll just roll with that methodology as I keep testing features out.

The only question then I have left would be what the distinction is between drawLabel, which has the labelColor setting available, and drawHover. I suppose some of the confusion just comes as I learn more about the library, trying to infer things from the codebase itself and demos, so thank you for your patience with some of these types of questions.

[Yomguithereal]

@xShields both drawLabel and drawHover have access to settings and any node data as reduced. One thing that might help you is that the default drawHover actually uses drawLabel under the hood to display the hover label on top of the shadowed box.

[jacomyal]

I agree that having labelColor exposed might make people want more, but I think it's not that much of an issue at the moment - since there is an idiomatic way to customize labels rendering.

I close this ticket, and I hope in the future as we find the good way to publish a proper documentation it will become more clear to developers.

[TheHackerDev]

Can someone please explain what and where these 'drawHover' and 'drawLabel' functions are? Thank you.

[hussainmandavya]

Please where these respective functions are and how do we override them. This link https://www.sigmajs.org/demo/index.html is the exact use case I'm looking for. Can you fork it in a sandbox please?

[sim51]

Both function are part of the sigma settings : https://github.com/jacomyal/sigma.js/blob/7b3a5ead355f7c54449002e6909a9af2eecae6db/src/settings.ts#L60-L61

So to override them is easy :

new Sigma(
  myGraph, 
  myHTMLContainer, 
  {
   labelRenderer: (context,  nodeData, settings) => { ... }
   hoverRenderer: (context,  nodeData, settings) => { ... }
);

You can take a look at their default implementation here :

• https://github.com/jacomyal/sigma.js/blob/7b3a5ead355f7c54449002e6909a9af2eecae6db/src/rendering/canvas/label.ts
• https://github.com/jacomyal/sigma.js/blob/7b3a5ead355f7c54449002e6909a9af2eecae6db/src/rendering/canvas/hover.ts

And if you want to see what we did for the demo : https://github.com/jacomyal/sigma.js/blob/7b3a5ead355f7c54449002e6909a9af2eecae6db/demo/src/canvas-utils.ts#L34-L114

[hussainmandavya]

Thanks a lot bro really helped me.

[MatchuPitchu]

The hoverRenderer not available anymore. Does anyone have an idea how a custom drawHover function works in Sigma version 3? Unfortunately, I don't understand the note in the changesets:

Moves labelRenderer, hoverRenderer and edgeLabelRenderer from settings to each renderer (https://github.com/jacomyal/sigma.js/blob/main/CHANGELOG.md)

[jacomyal]

The hoverRenderer not available anymore. Does anyone have an idea how a custom drawHover function works in Sigma version 3? Unfortunately, I don't understand the note in the changesets:

Moves labelRenderer, hoverRenderer and edgeLabelRenderer from settings to each renderer (https://github.com/jacomyal/sigma.js/blob/main/CHANGELOG.md)

You'll find how to customize your hoverRenderer in sigma v3 in this documentation page about how to migrate from v2 to v3: https://www.sigmajs.org/docs/advanced/migration-v2-v3#canvas-labels-and-hovered-nodes-rendering

[MatchuPitchu]

Perfect, thanks a lot. It's working.