Is there a way to center label relative to node and render it above the hovered node?

[misha-erm]

Hello,

I'm curious if there is a way to center labels on circle node.

I tried to modify defaultDrawNode and it worked however I faced a new problem once I hovered the node. Text is getting rendered below the circle node and I failed to find any way to push it above

So here is how I modified drawDiscNodeLabel:

function drawDiscNodeLabel(context, data, settings) {
    const size = settings.labelSize,
      font = settings.labelFont,
      weight = settings.labelWeight,
      color = settings.labelColor.attribute
        ? data[settings.labelColor.attribute] ||
          settings.labelColor.color ||
          '#000'
        : settings.labelColor.color;
    context.fillStyle = color;
    context.font = ''.concat(weight, ' ').concat(size, 'px ').concat(font);
    
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText(data.label, data.x, data.y);
 }

and it resulted in centered text

But when I try to apply same logic to defaultDrawNodeHover I see that label goes below the node

Thanks in advance for any tips 🙇🏻

[sim51]

If you take a look at this documention page you will see that the layer sigma-hoverNodes is displayed on top of the sigma-hovers & sigma-labels layers.

That's why you have this result.

In the settings you can override the nodeHoverPrograms program (check here).
So if you override it with a program that do nothing, it should do what you want.

[misha-erm]

damn, I was close... started overriding node program but I have very little experience with webgl stuff.

Thank you for the quick reply and for the direction 🙇🏻
Do you have by any chance somewhere a reference to such noop Node Programm?

[sim51]

Nop, but it should be easy, you don't care of the webgl part.
You only need to write a class that extends AbstractProgram and do nothing.

[sim51]

In fact it's the NodeProgram that you have to write

[misha-erm]

yep, both of the options seem to work fine:

export class NoopNodeProgram extends AbstractNodeProgram {
  drawHover = undefined;
  drawLabel = undefined;
  kill() {}
  process() {}
  reallocate() {}
  render() {}
}

export class NoopNodeProgram extends NodeProgram {
  getDefinition() {
    return {
      VERTICES: 0,
      ATTRIBUTES: [],
      VERTEX_SHADER_SOURCE: 'void main() {}',
      FRAGMENT_SHADER_SOURCE: 'void main() {}',
      METHOD: WebGLRenderingContext.POINTS,
      UNIFORMS: [],
      CONSTANT_ATTRIBUTES: [],
      CONSTANT_DATA: [],
    };
  }
  setUniforms() {}
  processVisibleItem() {}
}

Thanks again for your response