Skip to content

Allow custom styling of nodes and edges #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
numericOverflow wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Allow custom styling of nodes and edges #62

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b18caae
Allow custom styling of nodes and edges
numericOverflow Jul 24, 2025
793f5f7
Fix copy/paste error in documentation
numericOverflow Jul 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions st_link_analysis/component/styles.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ def __init__(
color: Optional[str] = None,
caption: Optional[str] = None,
icon: Optional[str] = None,
custom_styles: Optional[Dict] = None,
) -> None:
"""
Define a custom style of a node in the graph based on label.
Expand All @@ -36,6 +37,10 @@ def __init__(
Node icon to be passed by the name of Material Icons (e.g. 'person')
or by url (e.g. url('...')). A list of supported icons is available
in `st_link_analysis.component.icons`
custom_styles: Optional[dict]
A dictionary of additional styles that will be applied to the node. This
allows for control of any valid styles to be applied to the node beyond basic
options provided by python constructor. For detailed information on styles that can be set, visit: https://js.cytoscape.org/#style

Example
-------
Expand All @@ -45,6 +50,7 @@ def __init__(
self.color = color
self.caption = caption
self.icon = icon
self.custom_styles = custom_styles

def dump(self) -> Dict[str, Any]:
selector = f"node[label='{self.label}']"
Expand All @@ -58,6 +64,9 @@ def dump(self) -> Dict[str, Any]:
if not self.icon.startswith("url") and not self.icon.endswith(".svg"):
self.icon = f"./icons/{self.icon.lower()}.svg"
style["background-image"] = self.icon
if self.custom_styles:
for key, val in self.custom_styles.items():
style[key] = val

return {
"selector": selector,
Expand All @@ -74,6 +83,7 @@ def __init__(
labeled: bool = False, # deprecated
directed: bool = False,
curve_style: Optional[str] = None,
custom_styles: Optional[Dict] = None,
) -> None:
"""
Define a custom style of an edge in the graph based on label.
Expand Down Expand Up @@ -102,6 +112,10 @@ def __init__(
"bezier", which is suitable for multigraphs. For large, simple graphs,
consider using "haystack" for better performance. For more options
and detailed information,visit: https://js.cytoscape.org/#style/edge-line
custom_styles: Optional[dict]
A dictionary of additional styles that will be applied to the edge. This
allows for control of any valid styles to be applied to the edge beyond basic
options provided by python constructor. For detailed information on styles that can be set, visit: https://js.cytoscape.org/#style

Example
-------
Expand All @@ -112,6 +126,7 @@ def __init__(
self.caption = caption
self.directed = directed
self.curve_style = curve_style
self.custom_styles = custom_styles

# TODO: remove in next version along with imports, docs, and signature
if labeled is not None:
Expand All @@ -138,6 +153,9 @@ def dump(self) -> Dict[str, Any]:
style["target-arrow-shape"] = "triangle"
if self.curve_style:
style["curve-style"] = self.curve_style
if self.custom_styles:
for key, val in self.custom_styles.items():
style[key] = val

return {
"selector": selector,
Expand Down