Skip to content

Add SVG restyle to match vscode theme#26

Closed
jotavemonte wants to merge 7 commits intobeicause:masterfrom
jotavemonte:add-svg-customization-script
Closed

Add SVG restyle to match vscode theme#26
jotavemonte wants to merge 7 commits intobeicause:masterfrom
jotavemonte:add-svg-customization-script

Conversation

@jotavemonte
Copy link
Contributor

@jotavemonte jotavemonte commented May 27, 2024

Summary

Intercept the SVG generated by graphviz and change the colors according to the vscode current theme.

Address the #24 "Make graph nicer." milestone

How it works

Explore the graph using a BFF algorithm, for each node, change the children's values according to their classes.

Evidences

image
image
image

@jotavemonte jotavemonte marked this pull request as ready for review May 27, 2024 19:23
@jotavemonte jotavemonte mentioned this pull request May 27, 2024
3 tasks
@jotavemonte
Copy link
Contributor Author

jotavemonte commented May 27, 2024

@beicause I used the selection background color for the nodes and it isn't ideal in every theme, but in most of them it looks good.

@beicause
Copy link
Owner

I think we'd better to theme the graphviz( .dot ) file directly. Changing the style of svg doesn't affect the .dot file we save.

@jotavemonte
Copy link
Contributor Author

@beicause Sure! Should we have this as a temporary solution and then I can open an issue to migrate the solution to the other end of the file generation? With this strategy, we would have themes for the graphs right away.

@beicause
Copy link
Owner

I have no reason to merge this PR now which adds unnecessary complexity if there is a better approach. Let's improve it firstly.

@jotavemonte
Copy link
Contributor Author

jotavemonte commented May 29, 2024

@beicause I was investigating the options and AFAIK that the color palette is only available at the web view step - we could use some placeholders and interpolate them, but this would add some complexity and processing to the rendering step too.

Do you have an idea on how to approach this? Thank you.

Edit: My previous assumptions were incorrect.

@jotavemonte
Copy link
Contributor Author

@beicause Please revisit this thread

@beicause
Copy link
Owner

I suggest using graphviz attribute (color, bgcolor or fillcolor, etc) to style graphs. Refer to https://graphviz.org/doc/info/attrs.html

@jotavemonte jotavemonte force-pushed the add-svg-customization-script branch 3 times, most recently from 0426458 to 5414b32 Compare November 24, 2024 00:51
@jotavemonte
Copy link
Contributor Author

@beicause I changed the approach compared to the last version. Now it injects the color in the .dot generation and it replaces it once we have access to the theme RGB in the html step. Please check if it makes sense. Thank you

@jotavemonte jotavemonte force-pushed the add-svg-customization-script branch from 004d403 to 682aa28 Compare November 24, 2024 09:47
@jotavemonte jotavemonte marked this pull request as draft November 24, 2024 10:26
@beicause beicause self-assigned this Nov 25, 2024
@beicause beicause force-pushed the master branch 2 times, most recently from 39a9360 to b7253f5 Compare November 25, 2024 14:27
@jotavemonte jotavemonte force-pushed the add-svg-customization-script branch from 682aa28 to c38e21c Compare January 25, 2025 20:52
@jotavemonte jotavemonte marked this pull request as ready for review January 25, 2025 22:10
@jotavemonte

This comment was marked as outdated.

@jotavemonte

This comment was marked as outdated.

@jotavemonte
Copy link
Contributor Author

@beicause Hey. Can you please check this out? Thanks!

@jotavemonte jotavemonte closed this May 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants