Q: Is it possible to change the label `weight` with `@cosmograph/react`?

[andrewizbatista]

First of all, great job on this library - I love it!

Question

I played around with @cosmograph/cosmos and @interacta/css-labels (following your Codesandbox example) and managed to set up weight(s) for each label (see the interface LabelOptions) - which is a neet feature.

But when trying to replicate my example with @cosmograph/react, I didn't found out any documentation on how to do it with the <Cosmograph /> component.

Does it support it?

Contributing

If this feature is not implemented, I'm happy to contribute to the library 😄

[andrewizbatista]

A bit more context on what I'm trying to achieve...

When I select a node, I'm filtering all the labels with the showLabelsFor prop of <Cosmograph /> just to show labels for the selected node and its adjacent nodes.

But I want to set a higher weight to the selected node's label, so when I zoom out it's the one that stays rendered.

[kolmakova]

Hi @andrewizbatista! Currently, there's no way to set custom weights for labels in @cosmograph/cosmograph /@cosmograph/react. But this is a great catch, and we'll definitely add it as a new feature.

In @cosmograph/cosmograph, labels are divided into three groups: dynamic, static, and hovered.

• Dynamic labels appear for currently visible nodes on the screen while zooming in and hide while zooming out (when showDynamicLabels: true).
• Static labels are for nodes specified in showLabelsFor and for showTopLabels.
• Hovered label appear when showHoveredPointLabel is enabled.

The question is: would it be more convenient to control the weight of these three groups, or would you prefer to control each node's label individually?

For group control, we could add new config properties for each label group where the desired numeric weight would be specified. This is quite simple for users and should cover basic needs. For complete control, we'd need to add support of a property to each node with the weight value and users will need to specify weight to every node.

[andrewizbatista]

Hi @kolmakova, thanks for the quick reply.

I think being able to set individual weight(s) per node would be the best approach (and in my opinion the most scalable).

Imagine a dataset where each node has a node_type with different grades of importance to the user, to illustrate the idea imagine brick < wall < house < village ...

When I select a node, I want to assign the highest possible weight so that the selected node is always on top, but when showing the labels of the adjacent nodes I want them to have an hierarchy of weight(s) based on their node_type.

---

Idea for an implementation

Currently the <Cosmograph /> component has a prop called nodeSize: NumericAccessor<Node> which I'm already using to determine different sizes depending on some properties of each node _(number of links, node_type multiplier, etc...)_.

Imagine having a nodeLabelWeight: NumericAccessor<Node> which can be used virtually the same way.

<Cosmograph 
  nodeLabelWeight={(node) => {
    if (node.id === selectedNode.id) return 10000;

    if (node.type === 'brick') return 100;
    if (node.type === 'wall') return 200;
    if (node.type === 'house') return 300;

    return 1;
  }}
/>

The advantage of a similar approach is that allows for very complex logic regarding label weight(s). You can use multipliers for specific properties of a node, you can factor the number of links of each node, the possibilities are endless really.

[kolmakova]

@andrewizbatista Thank you for your feedback! We'll implement individual weights.

We're excited to announce that we'll soon be releasing Cosmograph 2.0, which will process data much faster and support rendering and operating with significantly larger datasets. I think we will include individual label weights in this update as well. Stay tuned!

[andrewizbatista]

Thank you @kolmakova! I will look forward for the next update.

I will close the issue now - and again great work on Cosmograph!