# 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",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "cytoscape, graph, link analysis, streamlit",
"author": "AlrasheedA",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/96/1f/c466db79a5e0252e27ba4dcc8ceab639c7cf1bca2bcdafed3010968886db/st_link_analysis-0.3.0.tar.gz",
"platform": null,
"description": "# st-link-analysis\n\n[](https://github.com/AlrasheedA/st-link-analysis)\n[](https://pypi.org/project/st-link-analysis/)\n[](https://discuss.streamlit.io/t/new-component-interactive-graph-visualization-component-for-streamlit/73030)\n\nA custom Streamlit component for link analysis, built with Cytoscape.js and Streamlit.\n\n## Overview\n\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.\n\n\n\n## Demo\n\nA demo deployed with Render can be [accessed here](https://st-link-analysis-demo.onrender.com/).\n\n## Features\n\n- **Customizable Node and Edge Styles**: Easily define the appearance of nodes and edges using a variety of style options.\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(...)'`).\n- **Customizable Layouts**: Choose from different layout algorithms to arrange the graph elements.\n- **Interactive Features:**\n - Toolbar with fullscreen, JSON export, and layout refresh buttons.\n - View control bar for zooming, fitting, and centering the view, making it easier to navigate your graphs.\n - View all properties of the selected elements in a side panel.\n - Highlights neighboring nodes or edges when an element is selected.\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\u2019s return value.\n\n## Installation\n\nTo install the package, use pip:\n\n```bash\npip install st-link-analysis\n```\n\n## Usage\n\nHere is a basic example of how to use the component in your Streamlit app:\n\n```python\nimport streamlit as st\nfrom st_link_analysis import st_link_analysis, NodeStyle, EdgeStyle\n\nst.set_page_config(layout=\"wide\")\n\n# Sample Data\nelements = {\n \"nodes\": [\n {\"data\": {\"id\": 1, \"label\": \"PERSON\", \"name\": \"Streamlit\"}},\n {\"data\": {\"id\": 2, \"label\": \"PERSON\", \"name\": \"Hello\"}},\n {\"data\": {\"id\": 3, \"label\": \"PERSON\", \"name\": \"World\"}},\n {\"data\": {\"id\": 4, \"label\": \"POST\", \"content\": \"x\"}},\n {\"data\": {\"id\": 5, \"label\": \"POST\", \"content\": \"y\"}},\n ],\n \"edges\": [\n {\"data\": {\"id\": 6, \"label\": \"FOLLOWS\", \"source\": 1, \"target\": 2}},\n {\"data\": {\"id\": 7, \"label\": \"FOLLOWS\", \"source\": 2, \"target\": 3}},\n {\"data\": {\"id\": 8, \"label\": \"POSTED\", \"source\": 3, \"target\": 4}},\n {\"data\": {\"id\": 9, \"label\": \"POSTED\", \"source\": 1, \"target\": 5}},\n {\"data\": {\"id\": 10, \"label\": \"QUOTES\", \"source\": 5, \"target\": 4}},\n ],\n}\n\n# Style node & edge groups\nnode_styles = [\n NodeStyle(\"PERSON\", \"#FF7F3E\", \"name\", \"person\"),\n NodeStyle(\"POST\", \"#2A629A\", \"content\", \"description\"),\n]\n\nedge_styles = [\n EdgeStyle(\"FOLLOWS\", caption='label', directed=True),\n EdgeStyle(\"POSTED\", caption='label', directed=True),\n EdgeStyle(\"QUOTES\", caption='label', directed=True),\n]\n\n# Render the component\nst.markdown(\"### st-link-analysis: Example\")\nst_link_analysis(elements, \"cose\", node_styles, edge_styles)\n\n```\n\n## API Reference\n\n| Element | Description |\n| ------------------ | --------------------------------------------------------------------------------------------------------------- |\n| `st_link_analysis` | Main component for creating and displaying the graph, including layout and height settings. Refer to docstring. |\n| `NodeStyle` | Defines styles for nodes, including labels, colors, captions, and icons. Refer to docstring. |\n| `EdgeStyle` | Defines styles for edges, including curve styles, labels, colors, and directionality. Refer to docstring. |\n| `Event` | Define an event to pass to component function and listen to. Use sparingly Refer to docstring. |\n\n## Development\n\n- Ensure you have Python 3.9+, Node.js, and npm installed.\n- Clone this repository\n- Navigate to root directory\n\n### Python Setup\n\nCreate and activate a virtual environment, then install the package in editable mode:\n\n```bash\npython3 -m venv .venv\nsource .venv/bin/activate # On Windows use `.venv\\Scripts\\activate`\npip install -e .\n```\n\n### Node Setup\n\nNavigate to the frontend directory and install the necessary npm packages:\n\n```bash\ncd st_link_analysis/frontend\nnpm install\n```\n\n### Running the App\n\nChange `RELEASE` flag in `st_link_analysis/component/component.py` to `False`.\n\nIn one terminal start the frontend dev server\n\n```bash\ncd st_link_analysis/frontend\nnpm run start\n```\n\nIn another terminal run the streamlit server\n\n```bash\ncd examples\nstreamlit run app.py\n```\n\n### Testing\n\nInstall the testing requirements and run linting and tests:\n\n```bash\npip install tests/requirements.txt\nruff check\npytest\n```\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- [Cytoscape.js](https://js.cytoscape.org/)\n- [Streamlit](https://www.streamlit.io/)\n- [Material Icons](https://fonts.google.com/icons)\n",
"bugtrack_url": null,
"license": null,
"summary": "A streamlit custom component for visualizing and interacting with graphs",
"version": "0.3.0",
"project_urls": {
"Homepage": "https://github.com/AlrasheedA/st-link-analysis",
"Issues": "https://github.com/AlrasheedA/st-link-analysis/issues"
},
"split_keywords": [
"cytoscape",
" graph",
" link analysis",
" streamlit"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "6143af4664125299db0dab29a10aa4fb1887bdd735d1238847eab5d03efc7d9e",
"md5": "b3592b3c215ef28ebc597b006dcfa91a",
"sha256": "c4b1982ddcd72d6700445ff684f0ed6f29aeaa61d5bf3121e92752fb1b471fb6"
},
"downloads": -1,
"filename": "st_link_analysis-0.3.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b3592b3c215ef28ebc597b006dcfa91a",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 427553,
"upload_time": "2024-09-07T12:46:41",
"upload_time_iso_8601": "2024-09-07T12:46:41.977247Z",
"url": "https://files.pythonhosted.org/packages/61/43/af4664125299db0dab29a10aa4fb1887bdd735d1238847eab5d03efc7d9e/st_link_analysis-0.3.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "961fc466db79a5e0252e27ba4dcc8ceab639c7cf1bca2bcdafed3010968886db",
"md5": "df18c9e9e95ccce5e100024111f5a67c",
"sha256": "5b3b9256eb740fa5457ea2e28592b00c33ec2f9733e2b2e8975dce55b12ddbbf"
},
"downloads": -1,
"filename": "st_link_analysis-0.3.0.tar.gz",
"has_sig": false,
"md5_digest": "df18c9e9e95ccce5e100024111f5a67c",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 409790,
"upload_time": "2024-09-07T12:46:44",
"upload_time_iso_8601": "2024-09-07T12:46:44.171855Z",
"url": "https://files.pythonhosted.org/packages/96/1f/c466db79a5e0252e27ba4dcc8ceab639c7cf1bca2bcdafed3010968886db/st_link_analysis-0.3.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-09-07 12:46:44",
"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"
}
JSON
