I want to know how to deal with label confusion when there are many nodes.

[wxxwjef]

And Many nodes display a different label than the actual label.

[saskaale]

Hello @wxxwjef ,
this looks to me like a bug for the first sight.
Can you please share with me a example code which it fails on?

thanks,
Ales

[wxxwjef]

Hello @saskaale
First, thank you for your reply.I'm surprised by your reply.

The following actions can reproduce the bug.
Insert this code into line 38 of examples/bidirectional.html from official project.
My purpose is to create 2,000 nodes，when there are many nodes on the canvas, label will be confused.

// code start
for (let i = 0; i < 2000; i++) {
var arr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
let str = '';
for(let j=0;j< 8;j++) {
str += arr[Math.floor(Math.random()*26)];
}
nodes.push({label: str});
}
// code end

[canerakdas]

Hello @wxxwjef ,

Thank you for the sharing steps to reproduce.

Hey @saskaale ,
I have tested and IMHO this bug reason is static sdf canvas size (1024x1024) for the labels. We need to update dynamically.

You can see the problem with the following image;

[wxxwjef]

@canerakdas
Thank you for your participation.This issue has been bothering me too long.

[saskaale]

@wxxwjef thank you for the code example! Yes, this is definitely a issue in our codebase.

@canerakdas weird. Yeah, the texture seems not to be caching the Glyphs per characted and instead of it is rendering it again and again.

The caching code:
https://github.com/HelikarLab/ccNetViz/blob/master/src/texts/sdf/sdf.js#L263-L266

[saskaale]

@canerakdas Hello Caner, I just looked at it and it seems to be bigger issue overally.
The issue is that the ccNetViz is currently using the text default generator which has the static texture size (https://github.com/HelikarLab/ccNetViz/blob/master/src/texts/default.js) - fixing of this size to be dynamiccaly resized seems like a solution.

However we tried to consider the default text generator as a deprecated so we are would be using the SDF one which is supposed to have better performance. It would also not have any issue with too many nodes with long text because it works character-wise intead of whole label and also internally supports lazy character caching.
To enable the SDF you can replace these 3 lines (https://github.com/HelikarLab/ccNetViz/blob/master/src/texts/texts.js#L30-L35) with the return true; . Sadly once you do it, the library does not show anything at all.

• that is my investigation so far - I am looking at it currently more deeply.

thanks,
Ales

[hjhimanshu01]

Hey @wxxwjef , @saskaale , I'm not sure how to fix default font size , but as default is basically deprecated and @wxxwjef , just change this part in the code

styles: {
          node: { texture: 'images/node.png', label: { hideSize: 16 , font:{ type: "sdf", size: 10}} },
          edge: { arrow: { texture: 'images/arrow.png' } },
        }

basically the size of label is dynamic and on 2000 nodes, size becomes minimal, so changing the font type and size does the work.

[wxxwjef]

@hjhimanshu01
Thank you for your proposal.
I found the performance of this kind of configure is very poor.How to improve performance.

[saskaale]

@saskaale do you mean poor in terms of the performance (rendering speed) ?

[wxxwjef]

@saskaale
Yes,I tested it locally with type of 'sdf',found the process of Initialization is very slow when graph hava a lot nodes.