{"id":15288081,"url":"https://github.com/alrasheeda/st-link-analysis","last_synced_at":"2025-04-13T08:19:32.559Z","repository":{"id":245243081,"uuid":"817470444","full_name":"AlrasheedA/st-link-analysis","owner":"AlrasheedA","description":"A custom Streamlit component for link analysis, built with Cytoscape.js and Streamlit.","archived":false,"fork":false,"pushed_at":"2024-09-07T12:57:24.000Z","size":1095,"stargazers_count":86,"open_issues_count":8,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-13T08:18:57.530Z","etag":null,"topics":["cytoscapejs","graph-analysis","network-analysis","streamlit-component"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/st-link-analysis/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlrasheedA.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-19T19:29:11.000Z","updated_at":"2025-03-23T07:59:24.000Z","dependencies_parsed_at":"2024-07-18T23:55:13.754Z","dependency_job_id":"93df3d71-0c4e-4956-9b07-146a70ec219b","html_url":"https://github.com/AlrasheedA/st-link-analysis","commit_stats":null,"previous_names":["alrasheeda/st-link-analysis"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlrasheedA%2Fst-link-analysis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlrasheedA%2Fst-link-analysis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlrasheedA%2Fst-link-analysis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlrasheedA%2Fst-link-analysis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlrasheedA","download_url":"https://codeload.github.com/AlrasheedA/st-link-analysis/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681566,"owners_count":21144708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cytoscapejs","graph-analysis","network-analysis","streamlit-component"],"created_at":"2024-09-30T15:44:04.698Z","updated_at":"2025-04-13T08:19:32.532Z","avatar_url":"https://github.com/AlrasheedA.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# st-link-analysis\n\n[![Static Badge](https://img.shields.io/badge/GitHub-%20?\u0026logo=github\u0026color=grey)](https://github.com/AlrasheedA/st-link-analysis)\n[![Static Badge](https://img.shields.io/badge/PyPI-%20?\u0026logo=pypi\u0026color=grey\u0026logoColor=white)](https://pypi.org/project/st-link-analysis/)\n[![Static Badge](https://img.shields.io/badge/Streamlit-%20?\u0026logo=streamlit\u0026color=grey\u0026logoColor=white)](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![screenshot](https://github.com/user-attachments/assets/aae995d9-e752-4a96-a69a-2b38db56e0f7)\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’s 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 \u0026 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falrasheeda%2Fst-link-analysis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falrasheeda%2Fst-link-analysis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falrasheeda%2Fst-link-analysis/lists"}