React style assignment <dot:td style={styleVar} >

[wcoolidge]

Greetings,
@ts-graphviz/react is very useful in enabling the use of graphviz html formatting from typescript for fine grained control of parameters such as color at the <dot:td > level in Digraph, Edge, Node, and Subgraph components.
I am howerver, blocked at providing the same fine grained control of dotted, dashed, or solid style via a styleVar variable in <dot:td style={styleVar} > .
I have tried unsuccessfully defining styleVar as Style.styleItem and would appreciate any guidance or wisdom on on how to approach setting style under react.
Thank you!

[kamiazya]

Hi,

Thank you for finding and using ts-graphviz! I'm glad to hear that you're finding the HTML-Like Label rendering feature in @ts-graphviz/react useful. This is one of my favorite features as a developer, as it provides fine-grained control over the appearance of Graphviz graphs directly from TypeScript.

Regarding your question about setting styles for dotted, dashed, or solid lines using a styleVar variable in <dot:td style={styleVar}>, here are a few suggestions:

Correct Way to Set Styles:

It seems there might be an issue with how styleVar is being used. Instead of setting the style directly in the JSX tag like <dot:td style={styleVar}>, you should ensure that the style variable is correctly formatted according to the Graphviz HTML-like label syntax. Typically, the style should be a string that Graphviz can interpret.

I recommend reading the Graphviz HTML-Like Label documentation. This documentation provides detailed information on how to style elements using HTML-like syntax.

Utilize Type Information:

The ts-graphviz package supports user styling through type information. You can gain a deeper understanding of the specific APIs by reviewing the following source code:

• common/src/types.ts
• react/src/types.ts

Styling Examples:

For practical examples of styling, you can refer to these links:

• example/example.tsx
• media/dependency-graph.dot.tsx
• media/ts-graphviz.dot.tsx

These resources should help you in setting styles within React/JSX for HTML-Like Labels in your Graphviz graphs. If you have any further questions or need additional assistance, feel free to ask.

Thank you!

[wcoolidge]

Thank you Yuki for getting back to me on this!

I apologize for my slow response which is due to being away and off line.

I had originally been following the examples you refer to and just ran a test case again on my code a variable for back ground color that works as expected:

dot:tr<dot:td bgcolor={bgColor} align="CENTER"> {typeName} </dot:td> </dot:tr>

However, when I added style="dashed" (or style={styleVar} ) to the working code as in:

dot:tr<dot:td style="dashed" bgcolor={bgColor} align="CENTER"> {typeName} </dot:td> </dot:tr>

I get this:

Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

This is the heart of the problem as the TdAttribute 'style' behaves differently than the other TdAttributes from common/src/types.ts and does not work as expected.

I have not been able to find a work-around for this and suspect that there is an issue with style.

Do you have a working example of a style setting within <dot:td > ?

-Will