LinkLabel, Pictures and Classes for Nodes

[ChrisDelClea]

HI Daniel,

The library is very nice and I really like it!
Thank you very much for your work and sharing.

For some reason, the labelProperty property is combined with the renderLabel=True property on the
does not work for me. Am I doing something wrong or is this really a mistake?

Is it possible to automatically adjust the size of the images in combination with the node shape and the label position to
the image to the node size and cut the shape that both match? When I upload a square image to a circle node,
The label is also no longer visible. Is there any way to fix this automatically?

It would also be nice if one could add an attribute/property called node_class, e.g. person or location.
How could I do that?

Thanks for your help in advance.
Chris

[LonelyPrincess]

Hello Chris,

Back in the day, I created the viewGenerator feature because I needed further customization than what the library initially offered. If you need to add custom classes for each node, I'd suggest you take a look to the docs of this feature, as well as the working example in the sandbox. By using this, you can define a node's appearance by using React components defined by yourself. This means you'll be free to apply any shape or class that you want, as well as adding texts in any position of your choice.

Is it possible to automatically adjust the size of the images in combination with the node shape and the label position to
the image to the node size and cut the shape that both match?

By using the viewGenerator function, this would be as easy as creating your own component and handle the size or shape of the view yourself via CSS. Inside of your component's code (or even in the viewGenerator itself), you can check whether the node is a person, location or whatever, and display the data you see fit for each scenario.

The following is an example on how you could use this method to define what to display depending on your node type:

{
  viewGenerator: node => {
    switch (node.type) {
      case 'person':
        return (<PersonNode node={node} />);
      case 'location':
         return <LocationNode node={node} />
      default:
        console.warn(`Unknown node type ${node.type}`);
        return null;
    }
  }
}

As you can see, viewGenerator is a pretty powerful feature which may be able to help solving your current needs, so I hope this helps!

[ChrisDelClea]

Hi Sara,

that sounds very interesting to me! Still, I don't quite understand how it works in context.

In the code snippet you use switch (node.type). In docs the property : type is limited to square, circle etc.?
Could I also use for example "person" (or any other string)?

For example if we do this:

const generateCustomNode(node){
  viewGenerator: node => {
    switch (node.type) {
      case 'person':
        return (<PersonNode node={node} />);
      case 'location':
         return <LocationNode node={node} />
      default:
        console.warn(`Unknown node type ${node.type}');
        return null;
    }
  }
}

is there a way to give specific design for all nodes belonging to the same class - something like:

const myConfig = {
  PersonNode: {
    color: "green",
    size: 120,
  },
  LocationNode: {
    color: "purple",
    size: 100,
  },
};

This is how my input data would look like:

const data = {
    nodes: [
      {id: 'Harry', type:'Person', viewGenerator= {generateCustomNode}}},
      {id: 'Berlin', type: "Location", viewGenerator={generateCustomNode}}},
    ],
    left: [
        {source: 'Harry', target: 'Berlin', labelProperty: "lives_in", renderLabel:true},
    ]
};

What already bridges me to my final question:
In this example i tried to include the way i wanted to display the label for the link with props: 'Sally' , labelProperty:"lives_in",renderLabel:true}. Also in the sandbox you send it doesn't show up for me, is that a bug or am I doing something wrong and if, what?

Best regards
Chris

[ChrisDelClea]

anyoneee please?

[antoninklopp]

Hi @chrischross ,

Did you have a look at the custom data sandbox?

You can see in this file that you can change the view depending on some nodes parameters that you passed to the node, see here.

Is this what you are looking for?