# st-link-analysis
[](https://github.com/AlrasheedA/st-link-analysis)
[](https://pypi.org/project/st-link-analysis/)
[](https://discuss.streamlit.io/t/new-component-interactive-graph-visualization-component-for-streamlit/73030)
A custom Streamlit component for link analysis, built with Cytoscape.js and Streamlit.
## Overview
This project provides a Streamlit custom component for visualizing and interacting with graph data using Cytoscape.js. It supports customizable edge and node styles, labels, colors, captions, and icons.
## Demo
A demo deployed with Render can be [accessed here](https://st-link-analysis-demo.onrender.com/).
## Features
- **Customizable Node and Edge Styles**: Easily define the appearance of nodes and edges using a variety of style options.
- **Material Icons Support**: Supports a subset of Material icons for styling nodes which can be passed by name (e.g., `icon='person'`). Custom icons can still be used by passing a URL (e.g., `icon='url(...)'`).
- **Customizable Layouts**: Choose from different layout algorithms to arrange the graph elements.
- **Interactive Features:**
- Toolbar with fullscreen, JSON export, and layout refresh buttons.
- View control bar for zooming, fitting, and centering the view, making it easier to navigate your graphs.
- View all properties of the selected elements in a side panel.
- Highlights neighboring nodes or edges when an element is selected.
- **Node Actions (Expand / Remove):** Enable node removal and expansion using the `node_actions` parameter. Removal can be triggered by a delete keydown or a remove button click, while expansion occurs on a double-click or expand button click. When these events are triggered, the event details and selected node IDs are sent back to the Streamlit app as the component’s return value.
## Installation
To install the package, use pip:
```bash
pip install st-link-analysis
```
## Usage
Here is a basic example of how to use the component in your Streamlit app:
```python
import streamlit as st
from st_link_analysis import st_link_analysis, NodeStyle, EdgeStyle
st.set_page_config(layout="wide")
# Sample Data
elements = {
"nodes": [
{"data": {"id": 1, "label": "PERSON", "name": "Streamlit"}},
{"data": {"id": 2, "label": "PERSON", "name": "Hello"}},
{"data": {"id": 3, "label": "PERSON", "name": "World"}},
{"data": {"id": 4, "label": "POST", "content": "x"}},
{"data": {"id": 5, "label": "POST", "content": "y"}},
],
"edges": [
{"data": {"id": 6, "label": "FOLLOWS", "source": 1, "target": 2}},
{"data": {"id": 7, "label": "FOLLOWS", "source": 2, "target": 3}},
{"data": {"id": 8, "label": "POSTED", "source": 3, "target": 4}},
{"data": {"id": 9, "label": "POSTED", "source": 1, "target": 5}},
{"data": {"id": 10, "label": "QUOTES", "source": 5, "target": 4}},
],
}
# Style node & edge groups
node_styles = [
NodeStyle("PERSON", "#FF7F3E", "name", "person"),
NodeStyle("POST", "#2A629A", "content", "description"),
]
edge_styles = [
EdgeStyle("FOLLOWS", caption='label', directed=True),
EdgeStyle("POSTED", caption='label', directed=True),
EdgeStyle("QUOTES", caption='label', directed=True),
]
# Render the component
st.markdown("### st-link-analysis: Example")
st_link_analysis(elements, "cose", node_styles, edge_styles)
```
## API Reference
| Element | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------- |
| `st_link_analysis` | Main component for creating and displaying the graph, including layout and height settings. Refer to docstring. |
| `NodeStyle` | Defines styles for nodes, including labels, colors, captions, and icons. Refer to docstring. |
| `EdgeStyle` | Defines styles for edges, including curve styles, labels, colors, and directionality. Refer to docstring. |
| `Event` | Define an event to pass to component function and listen to. Use sparingly Refer to docstring. |
## Development
- Ensure you have Python 3.9+, Node.js, and npm installed.
- Clone this repository
- Navigate to root directory
### Python Setup
Create and activate a virtual environment, then install the package in editable mode:
```bash
python3 -m venv .venv
source .venv/bin/activate # On Windows use `.venv\Scripts\activate`
pip install -e .
```
### Node Setup
Navigate to the frontend directory and install the necessary npm packages:
```bash
cd st_link_analysis/frontend
npm install
```
### Running the App
Change `RELEASE` flag in `st_link_analysis/component/component.py` to `False`.
In one terminal start the frontend dev server
```bash
cd st_link_analysis/frontend
npm run start
```
In another terminal run the streamlit server
```bash
cd examples
streamlit run app.py
```
### Testing
Install the testing requirements and run linting and tests:
```bash
pip install tests/requirements.txt
ruff check
pytest
```
## Contributing
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Acknowledgments
- [Cytoscape.js](https://js.cytoscape.org/)
- [Streamlit](https://www.streamlit.io/)
- [Material Icons](https://fonts.google.com/icons)
Raw data
{
"_id": null,
"home_page": null,
"name": "st-link-analysis-ie2",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "streamlit, cytoscape, graph, link analysis",
"author": "AlrasheedA, Dylan Lau",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/e7/fa/e04474be9b66ed925c4cdca7fb14d2a3ae1d7b6bc5b3e7203379807d00c6/st_link_analysis_ie2-0.3.5.tar.gz",
"platform": null,
"description": "# st-link-analysis\r\n\r\n[](https://github.com/AlrasheedA/st-link-analysis)\r\n[](https://pypi.org/project/st-link-analysis/)\r\n[](https://discuss.streamlit.io/t/new-component-interactive-graph-visualization-component-for-streamlit/73030)\r\n\r\nA custom Streamlit component for link analysis, built with Cytoscape.js and Streamlit.\r\n\r\n## Overview\r\n\r\nThis project provides a Streamlit custom component for visualizing and interacting with graph data using Cytoscape.js. It supports customizable edge and node styles, labels, colors, captions, and icons.\r\n\r\n\r\n\r\n## Demo\r\n\r\nA demo deployed with Render can be [accessed here](https://st-link-analysis-demo.onrender.com/).\r\n\r\n## Features\r\n\r\n- **Customizable Node and Edge Styles**: Easily define the appearance of nodes and edges using a variety of style options.\r\n- **Material Icons Support**: Supports a subset of Material icons for styling nodes which can be passed by name (e.g., `icon='person'`). Custom icons can still be used by passing a URL (e.g., `icon='url(...)'`).\r\n- **Customizable Layouts**: Choose from different layout algorithms to arrange the graph elements.\r\n- **Interactive Features:**\r\n - Toolbar with fullscreen, JSON export, and layout refresh buttons.\r\n - View control bar for zooming, fitting, and centering the view, making it easier to navigate your graphs.\r\n - View all properties of the selected elements in a side panel.\r\n - Highlights neighboring nodes or edges when an element is selected.\r\n- **Node Actions (Expand / Remove):** Enable node removal and expansion using the `node_actions` parameter. Removal can be triggered by a delete keydown or a remove button click, while expansion occurs on a double-click or expand button click. When these events are triggered, the event details and selected node IDs are sent back to the Streamlit app as the component\u00e2\u20ac\u2122s return value.\r\n\r\n## Installation\r\n\r\nTo install the package, use pip:\r\n\r\n```bash\r\npip install st-link-analysis\r\n```\r\n\r\n## Usage\r\n\r\nHere is a basic example of how to use the component in your Streamlit app:\r\n\r\n```python\r\nimport streamlit as st\r\nfrom st_link_analysis import st_link_analysis, NodeStyle, EdgeStyle\r\n\r\nst.set_page_config(layout=\"wide\")\r\n\r\n# Sample Data\r\nelements = {\r\n \"nodes\": [\r\n {\"data\": {\"id\": 1, \"label\": \"PERSON\", \"name\": \"Streamlit\"}},\r\n {\"data\": {\"id\": 2, \"label\": \"PERSON\", \"name\": \"Hello\"}},\r\n {\"data\": {\"id\": 3, \"label\": \"PERSON\", \"name\": \"World\"}},\r\n {\"data\": {\"id\": 4, \"label\": \"POST\", \"content\": \"x\"}},\r\n {\"data\": {\"id\": 5, \"label\": \"POST\", \"content\": \"y\"}},\r\n ],\r\n \"edges\": [\r\n {\"data\": {\"id\": 6, \"label\": \"FOLLOWS\", \"source\": 1, \"target\": 2}},\r\n {\"data\": {\"id\": 7, \"label\": \"FOLLOWS\", \"source\": 2, \"target\": 3}},\r\n {\"data\": {\"id\": 8, \"label\": \"POSTED\", \"source\": 3, \"target\": 4}},\r\n {\"data\": {\"id\": 9, \"label\": \"POSTED\", \"source\": 1, \"target\": 5}},\r\n {\"data\": {\"id\": 10, \"label\": \"QUOTES\", \"source\": 5, \"target\": 4}},\r\n ],\r\n}\r\n\r\n# Style node & edge groups\r\nnode_styles = [\r\n NodeStyle(\"PERSON\", \"#FF7F3E\", \"name\", \"person\"),\r\n NodeStyle(\"POST\", \"#2A629A\", \"content\", \"description\"),\r\n]\r\n\r\nedge_styles = [\r\n EdgeStyle(\"FOLLOWS\", caption='label', directed=True),\r\n EdgeStyle(\"POSTED\", caption='label', directed=True),\r\n EdgeStyle(\"QUOTES\", caption='label', directed=True),\r\n]\r\n\r\n# Render the component\r\nst.markdown(\"### st-link-analysis: Example\")\r\nst_link_analysis(elements, \"cose\", node_styles, edge_styles)\r\n\r\n```\r\n\r\n## API Reference\r\n\r\n| Element | Description |\r\n| ------------------ | --------------------------------------------------------------------------------------------------------------- |\r\n| `st_link_analysis` | Main component for creating and displaying the graph, including layout and height settings. Refer to docstring. |\r\n| `NodeStyle` | Defines styles for nodes, including labels, colors, captions, and icons. Refer to docstring. |\r\n| `EdgeStyle` | Defines styles for edges, including curve styles, labels, colors, and directionality. Refer to docstring. |\r\n| `Event` | Define an event to pass to component function and listen to. Use sparingly Refer to docstring. |\r\n\r\n## Development\r\n\r\n- Ensure you have Python 3.9+, Node.js, and npm installed.\r\n- Clone this repository\r\n- Navigate to root directory\r\n\r\n### Python Setup\r\n\r\nCreate and activate a virtual environment, then install the package in editable mode:\r\n\r\n```bash\r\npython3 -m venv .venv\r\nsource .venv/bin/activate # On Windows use `.venv\\Scripts\\activate`\r\npip install -e .\r\n```\r\n\r\n### Node Setup\r\n\r\nNavigate to the frontend directory and install the necessary npm packages:\r\n\r\n```bash\r\ncd st_link_analysis/frontend\r\nnpm install\r\n```\r\n\r\n### Running the App\r\n\r\nChange `RELEASE` flag in `st_link_analysis/component/component.py` to `False`.\r\n\r\nIn one terminal start the frontend dev server\r\n\r\n```bash\r\ncd st_link_analysis/frontend\r\nnpm run start\r\n```\r\n\r\nIn another terminal run the streamlit server\r\n\r\n```bash\r\ncd examples\r\nstreamlit run app.py\r\n```\r\n\r\n### Testing\r\n\r\nInstall the testing requirements and run linting and tests:\r\n\r\n```bash\r\npip install tests/requirements.txt\r\nruff check\r\npytest\r\n```\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\r\n\r\n## Acknowledgments\r\n\r\n- [Cytoscape.js](https://js.cytoscape.org/)\r\n- [Streamlit](https://www.streamlit.io/)\r\n- [Material Icons](https://fonts.google.com/icons)\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A streamlit custom component for visualizing and interacting with graphs",
"version": "0.3.5",
"project_urls": {
"Homepage": "https://github.com/AlrasheedA/st-link-analysis",
"Issues": "https://github.com/AlrasheedA/st-link-analysis/issues"
},
"split_keywords": [
"streamlit",
" cytoscape",
" graph",
" link analysis"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "f34d76a4c1250aa3811b6575fdb3489dbd14ecdc6d80ef85cf87033fba834ead",
"md5": "e93c0c5d4330e309a50d9af56ef51435",
"sha256": "8fb42fcd796c1bd395cf4a3dcb7a5a6e44e66f47e42f877a21fdf0d2af1c6400"
},
"downloads": -1,
"filename": "st_link_analysis_ie2-0.3.5-py3-none-any.whl",
"has_sig": false,
"md5_digest": "e93c0c5d4330e309a50d9af56ef51435",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 433348,
"upload_time": "2024-12-03T02:18:04",
"upload_time_iso_8601": "2024-12-03T02:18:04.108814Z",
"url": "https://files.pythonhosted.org/packages/f3/4d/76a4c1250aa3811b6575fdb3489dbd14ecdc6d80ef85cf87033fba834ead/st_link_analysis_ie2-0.3.5-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "e7fae04474be9b66ed925c4cdca7fb14d2a3ae1d7b6bc5b3e7203379807d00c6",
"md5": "f9aeb63a3fa2367166431fcd9385612d",
"sha256": "c004136f069673228e11ed460d05f96dbd68305beae4026934570ca99e6ffc42"
},
"downloads": -1,
"filename": "st_link_analysis_ie2-0.3.5.tar.gz",
"has_sig": false,
"md5_digest": "f9aeb63a3fa2367166431fcd9385612d",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 419410,
"upload_time": "2024-12-03T02:18:06",
"upload_time_iso_8601": "2024-12-03T02:18:06.267341Z",
"url": "https://files.pythonhosted.org/packages/e7/fa/e04474be9b66ed925c4cdca7fb14d2a3ae1d7b6bc5b3e7203379807d00c6/st_link_analysis_ie2-0.3.5.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-03 02:18:06",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "AlrasheedA",
"github_project": "st-link-analysis",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "st-link-analysis-ie2"
}
JSON
