Showing preview only (3,021K chars total). Download the full file or copy to clipboard to get everything.
Repository: sim51/react-sigma
Branch: main
Commit: 2de61da77a5e
Files: 190
Total size: 2.8 MB
Directory structure:
gitextract_s5exeo5z/
├── .editorconfig
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── stale.yml
│ └── workflows/
│ ├── test.yml
│ └── website.yml
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── eslint.config.mjs
├── lerna.json
├── package.json
├── packages/
│ ├── core/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── assets/
│ │ │ │ └── index.css
│ │ │ ├── components/
│ │ │ │ ├── SigmaContainer.tsx
│ │ │ │ └── controls/
│ │ │ │ ├── ControlsContainer.tsx
│ │ │ │ ├── FullScreenControl.tsx
│ │ │ │ └── ZoomControl.tsx
│ │ │ ├── hooks/
│ │ │ │ ├── context.ts
│ │ │ │ ├── useCamera.ts
│ │ │ │ ├── useFullScreen.ts
│ │ │ │ ├── useLoadGraph.ts
│ │ │ │ ├── useRegisterEvents.ts
│ │ │ │ ├── useSetSettings.ts
│ │ │ │ └── useSigma.ts
│ │ │ ├── index.ts
│ │ │ ├── svg.d.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ └── tsconfig.json
│ ├── graph-search/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── Edge.tsx
│ │ │ ├── GraphSearch.tsx
│ │ │ ├── GraphSearchInput.tsx
│ │ │ ├── Node.tsx
│ │ │ ├── assets/
│ │ │ │ └── index.css
│ │ │ ├── context.tsx
│ │ │ ├── index.ts
│ │ │ ├── svg.d.ts
│ │ │ ├── types.ts
│ │ │ ├── useGraphSearch.tsx
│ │ │ └── utils.tsx
│ │ └── tsconfig.json
│ ├── layout-circlepack/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── useLayoutCirclepack.ts
│ │ └── tsconfig.json
│ ├── layout-circular/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── useLayoutCircular.ts
│ │ └── tsconfig.json
│ ├── layout-core/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── WorkerLayoutControl.tsx
│ │ │ ├── index.ts
│ │ │ ├── svg.d.ts
│ │ │ ├── useLayoutFactory.ts
│ │ │ └── useWorkerLayoutFactory.ts
│ │ └── tsconfig.json
│ ├── layout-force/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── LayoutForceControl.tsx
│ │ │ ├── index.ts
│ │ │ ├── useLayoutForce.ts
│ │ │ └── useWorkerLayoutForce.ts
│ │ └── tsconfig.json
│ ├── layout-forceatlas2/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── LayoutForceAtlas2Control.tsx
│ │ │ ├── index.ts
│ │ │ ├── useLayoutForceAtlas2.ts
│ │ │ └── useWorkerLayoutForceAtlas2.ts
│ │ └── tsconfig.json
│ ├── layout-noverlap/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── LayoutNoverlapControl.tsx
│ │ │ ├── index.ts
│ │ │ ├── useLayoutNoverlap.ts
│ │ │ └── useWorkerLayoutNoverlap.ts
│ │ └── tsconfig.json
│ ├── layout-random/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── useLayoutRandom.ts
│ │ └── tsconfig.json
│ ├── minimap/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── Minimap.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── storybook/
│ │ ├── .gitignore
│ │ ├── .storybook/
│ │ │ ├── main.ts
│ │ │ ├── preview.ts
│ │ │ └── style.css
│ │ ├── e2e/
│ │ │ └── screenshots.spec.ts
│ │ ├── package.json
│ │ ├── playwright.config.ts
│ │ ├── public/
│ │ │ └── react-sigma/
│ │ │ └── demo/
│ │ │ └── dataset.json
│ │ ├── stories/
│ │ │ ├── Complete.stories.tsx
│ │ │ ├── Complete.tsx
│ │ │ ├── CustomRender.stories.tsx
│ │ │ ├── CustomRender.tsx
│ │ │ ├── Demo.stories.tsx
│ │ │ ├── Demo.tsx
│ │ │ ├── DragNdrop.stories.tsx
│ │ │ ├── DragNdrop.tsx
│ │ │ ├── EdgeCurve.stories.tsx
│ │ │ ├── Events.stories.tsx
│ │ │ ├── Events.tsx
│ │ │ ├── External.stories.tsx
│ │ │ ├── External.tsx
│ │ │ ├── GraphSearch.stories.tsx
│ │ │ ├── GraphSearch.tsx
│ │ │ ├── LayoutCircular.stories.tsx
│ │ │ ├── LayoutCircular.tsx
│ │ │ ├── LayoutFA2.stories.tsx
│ │ │ ├── LayoutFA2.tsx
│ │ │ ├── LayoutFA2Control.stories.tsx
│ │ │ ├── LayoutFA2Control.tsx
│ │ │ ├── Lifecycle.stories.tsx
│ │ │ ├── Lifecycle.tsx
│ │ │ ├── LoadGraphWithHook.stories.tsx
│ │ │ ├── LoadGraphWithHook.tsx
│ │ │ ├── LoadGraphWithProp.stories.tsx
│ │ │ ├── LoadGraphWithProp.tsx
│ │ │ ├── Minimap.stories.tsx
│ │ │ ├── Minimap.tsx
│ │ │ ├── MultiDirectedGraph.stories.tsx
│ │ │ ├── MultiDirectedGraph.tsx
│ │ │ ├── Multiple.stories.tsx
│ │ │ ├── Multiple.tsx
│ │ │ ├── NodeBorder.stories.tsx
│ │ │ ├── NodeBorder.tsx
│ │ │ ├── NodeImage.stories.tsx
│ │ │ ├── NodeImage.tsx
│ │ │ ├── UpdateGraphReference.stories.tsx
│ │ │ ├── UpdateGraphReference.tsx
│ │ │ └── common/
│ │ │ ├── FocusOnNode.tsx
│ │ │ ├── LayoutsControl.tsx
│ │ │ ├── SampleGraph.tsx
│ │ │ └── useRandom.tsx
│ │ ├── tsconfig.json
│ │ └── types.d.ts
│ └── website/
│ ├── babel.config.js
│ ├── docs/
│ │ ├── api.md
│ │ ├── changelog.mdx
│ │ ├── example/
│ │ │ ├── 01_load-graph.mdx
│ │ │ ├── 02_events.mdx
│ │ │ ├── 03_drag_n_drop.mdx
│ │ │ ├── 04_layouts.mdx
│ │ │ ├── 05_controls.mdx
│ │ │ ├── 06_external_state.mdx
│ │ │ ├── 07_graph-search.mdx
│ │ │ └── 08_minimap.mdx
│ │ ├── faq.md
│ │ ├── start-installation.md
│ │ ├── start-introduction.md
│ │ └── start-setup.md
│ ├── docusaurus.config.ts
│ ├── package.json
│ ├── sidebars.js
│ ├── src/
│ │ ├── components/
│ │ │ ├── CodePreview.tsx
│ │ │ ├── HomepageFeatures.module.css
│ │ │ └── HomepageFeatures.tsx
│ │ ├── css/
│ │ │ └── custom.scss
│ │ └── pages/
│ │ ├── index.module.css
│ │ └── index.tsx
│ ├── static/
│ │ └── demo/
│ │ └── dataset.json
│ └── tsconfig.json
├── prettier.config.mjs
├── rollup.base.mjs
├── tsconfig.base.json
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ""
labels: bug
assignees: ""
---
## Guidelines
Please note that GitHub issues are only meant for bug reports/feature requests.
If you have questions on how to use React & Sigma.js, please ask on [StackOverflow](https://stackoverflow.com/questions/tagged/sigma.js) instead of creating an issue here.
To help us understand your issue, please specify important details, primarily:
- React-sigma-v2 version: X.Y.Z
- Sigma.js version : X.Y.Z
- Graphology version : X.Y.Z
- Operating system: (for example Windows 95/Ubuntu 16.04)
- Web browser: (for example Firefox 82.0.2)
- **Steps to reproduce**
- Expected behavior
- Actual behavior
Additionally, include (as appropriate) console logs, stacktraces, screenshots, and other debug info.
We recommend you to create a live example of your issue on [CodeSandbox](https://codesandbox.io/) so we can reproduce it.
## Example bug report
Modification of the node default color in the settings has no effect
**React-sigma-v2:** 0.0.5
**Sigma.js version:** 2.0.0-alpha40
**Graphology version:** 0.19.2
**Operating System:** Ubuntu 15.10
**Web browser:** Firefox 82.0.2
### Steps to reproduce
Check the live example https://codesandbox.io/p/sandbox/empty-fog-qlkqg8
### Expected behavior
Nodes should be displayed in red
### Actual behavior
Nodes are displayed in black
## Note
If the issue has an inactivity of **30 days**, it becomes stale.
With an additional inactivity of **14 days**, the issue is closed
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ""
labels: enhancement
assignees: ""
---
## Guidelines
Please note that GitHub issues are only meant for bug reports/feature requests.
If you have questions on how to use Recat & Sigma.js, please ask on [StackOverflow](https://stackoverflow.com/questions/tagged/sigma.js) instead of creating an issue here.
## Feature request template
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 30
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 14
# Issues with these labels will never be considered stale
exemptLabels:
- pinned
- security
- enhancement
# Label to use when marking an issue as stale
staleLabel: wontfix
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: true
================================================
FILE: .github/workflows/test.yml
================================================
name: Test
on:
push:
paths:
- "packages/**"
- ".github/workflows/test.yml"
pull_request:
paths:
- "packages/**"
- ".github/workflows/test.yml"
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- name: Cache node_modules
uses: actions/cache@v4
with:
path: "node_modules"
key: ${{ runner.os }}-modules-${{ hashFiles('package-lock.json') }}
- name: Install
run: npm install
- name: Playwright version
id: playwright-version
run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').packages['node_modules/playwright'].version)")" >> $GITHUB_ENV
- name: Cache Playwright binaries
uses: actions/cache@v4
id: playwright-cache
with:
path: "~/.cache/ms-playwright"
key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
- name: Install Playwright Browsers
run: npx playwright install --with-deps
if: steps.playwright-cache.outputs.cache-hit != 'true'
- name: Build
run: npm run build
env:
NODE_OPTIONS: --max_old_space_size=4096
- name: Test
id: test
continue-on-error: true
run: npm test
- name: Uploading screenshots on failure
if: steps.test.outcome == 'failure'
uses: actions/upload-artifact@v4
with:
name: failure-screenshots
path: packages/storybook/test-results
- name: Exit signal
if: steps.test.outcome == 'failure'
run: exit 1
================================================
FILE: .github/workflows/website.yml
================================================
name: deploy-website
on:
push:
branches:
- main
jobs:
deploy-website:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Cache node_modules
uses: actions/cache@v4
with:
path: "**/node_modules"
key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
- name: Install
run: npm install
- name: Build
run: npm run build
env:
NODE_OPTIONS: --max_old_space_size=4096
- name: Website
run: npm run website
- name: Copy storybook in website
run: mv -f packages/storybook/storybook-static/ packages/website/build/storybook/
- name: No jekyll
run: touch packages/website/build/.nojekyll
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: gh-pages # The branch the action should deploy to.
folder: packages/website/build # The folder the action should deploy.
================================================
FILE: .gitignore
================================================
node_modules/
lib/
build/
dist/
*.current.png
*.diff.png
tsconfig.tsbuildinfo
packages/website/docs/api
.docusaurus
.rollup.cache
storybook-static
================================================
FILE: .npmignore
================================================
*.tgz
*.log
*.swp
.DS_Store
.github
node_modules
docs
examples
demo
dist
test
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.prettierrc.json
CONTRIBUTING.md
package-lock.json
tsconfig.json
tsconfig.base.json
typedoc.json
webpack.config.js
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## Version 5.0.6
### Fixes
- Fix `sigma` killing process when `SigmaContainer` is unmount.
## Version 5.0.5
### Fixes
- Fix #78 on minimap
-
## Version 5.0.4
### Features
- Upgrade deps of Sigmajs & graphology
## Version 5.0.3
### Features
- Upgrade minsearch dep
## Version 5.0.2
### Fixes
- Remove some `console.log` and prevent it with an eslint config
## Version 5.0.1
Due to some issues with lerna when releasing the v5.0.0, I did this version.
## Version 5.0.0
### Breaking changes
- CSS has been renamed `style.css`, so you must change `import "@react-sigma/core/lib/style.css";` by `import "@react-sigma/core/lib/react-sigma.min.css";`. Now the rollup config is shared, and for each module that export a css file, it will be named `style.css`.
- `SearchControl` in `core` has been removed. A new module called `graph-search` replace it.
### Features
- Upgrade to the latest stable release of Sigma (ie. `3.0.0`)
- Upgrade all librairies to their latest version
- Adding `minimap` module
- Adding `graph-search` module
- Upgrade all project dependencies
- Review prettier configuration
- Sharing rollup configuration across modules
## Version 4.0.3
- Upgrade to lastest beta of Sigma 3
- Review events definition in `core`, and adding missing Sigma events (like the `resize` one)
## Version 4.0.2
### Fixes
- [65](https://github.com/sim51/react-sigma/issues/65): Sigma: could not find a suitable program for node type "circle"!
## Version 4.0.1
### Fixes
- [#64](https://github.com/sim51/react-sigma/issues/64): fail to import in vite project because of lodash
## Version 4.0.0 (not be used !)
### Features
- Upgrade to sigma v3
- Upgrade all project dependencies
- Refacto project structure
- Replace `example` project by a storybook
- Replace E2E framework by playwright, and run it on the storybook
- Using stories in website example
- Fully graph typed API (see [#58](https://github.com/sim51/react-sigma/issues/58)). Component & hooks take generic types for node, edge & graph attributs. Exemple for the load graph hook :
```tsx
const loadGraph = useLoadGraph<{label:string, x:number, y:number}, {label:string, size:number}>();
```
### Breaking changes
- React-sigma doesn't depends anymore to lodash.
- The sigma setting `allowInvalidContainer` is no more set per default. You have to pass it to the container (check above).
- When you register events on edges, we don't set the correspondig settings anymore, like `enableEdgeClickEvents` (see [#49](https://github.com/sim51/react-sigma/issues/49)).
## Version 3.4.2
### Fixes
- [#55](https://github.com/sim51/react-sigma/issues/55) Fix the order in export in package.json (default entry should be the last)
## Version 3.4.1
### Fixes
- [#54](https://github.com/sim51/react-sigma/issues/54) Compatibility with the TS moduleResolution `bundler`
## Version 3.4.0
### Feature
- [#48](https://github.com/sim51/react-sigma/issues/48) Camera state is restored when Sigma.js is recreated
## Version 3.3.0
### Feature
- [#43](https://github.com/sim51/react-sigma/issues/43) Allow giving a different container for fullscreen control
- [#46](https://github.com/sim51/react-sigma/issues/46) Adding `resize`, `beforeRender` & `afterRender` to `useRegisterEvents`
## Version 3.2.0
### Features
- [#42](https://github.com/sim51/react-sigma/issues/42) Be able to customize labels on controls. Example :
```
<ZoomControl labels={{ zoomIn: "PLUS", zoomOut: "MINUS", reset: "RESET" }} />
```
## Version 3.1.0
### Fixes
- [#38](https://github.com/sim51/react-sigma/pull/38) Adding `mousemovebody` to `useRegisterEvents` (thanks [jakobhansen-blai](https://github.com/jakobhansen-blai) !)
### Features
- Upgrade to `sigma@2.4.0`
- Upgrade to `graphology-layout-forceatlas2@0.10.1`
- [#30](https://github.com/sim51/react-sigma/issues/30) : Forward the sigma ref on the `SigmaContainer`
## Version 3.0.3
### Fixes
- Fix remove listeners on `useRegisterEvents` hook.
## Version 3.0.2
### Features
- Adding peer dependencies to react, and allow version 17 & 18
- Upgrade general dependencies included sigma & graphology
- Set per default the sigma settings `allowInvalidContainer` to `true`
- Better type management for events ( thanks to [#1142](https://github.com/jacomyal/sigma.js/issues/1142) )
- Website with examples with code & preview
- Reset SearchControl when user click on the stage
### Breaking changes
- Settings of forceAtlas2 has changed in the latest version of graphology
- Event `cameraUpdated` has been renamed `updated`
- Property `initialSettings` on component `SigmaContainer` has been renamed `settings`
### Fixes
- Fix touch events - [#28](https://github.com/sim51/react-sigma/pull/28) (thanks to [@grothendeick](https://github.com/grothendeick))
- Fix `autoRunFor` on layout worker when value is set to `0` (ie. no timer)
- Fix CSS for borders issues
## Version 3.0.1
Version 3.0.1 has missing files in npm binaries.
## Version 3.0.0
Version 3.0.0 has been partially published due npm OTP issue.
That's why the version 3.0.1 has been released.
## Version 2.0.2
### Fixes
- Fix repository link in `packages.json`
## Version 2.0.1
- Adding README.md on modules
## Version 2.0.0
### Features
- Rename of the project to `@react-sigma`
- **Project structure :** mono-repo with multiple projects
- Possibility to initialize the `SigmaContainer` with a graph
- Adding all layouts that are available in graphology
- Adding hooks to manage camera, zoom, fullscreen, context. Standard component are using those hooks, so it's easy to rewrite them (if needed)
### Breaking changes
- Sigma React div class name has changed from `react-sigma-v2` to `react-sigma`
- Component `ForceAtlasControl` has been rename `LayoutForceAtlasControl`
- Components of type control don't take anymore properties to customize the DOM button. We use children instead now. For controls with multiple button, the child order is important.
```jsx
<FullScreenControl customEnterFullScreen={<BsArrowsFullscreen />} customExitFullScreen={<BsFullscreenExit />} />
```
Becomes
```jsx
<FullScreenControl>
<>
<BsArrowsFullscreen />
<BsFullscreenExit />
</>
</FullScreenControl>
```
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to this repository <!-- omit in toc -->
## Getting started <!-- omit in toc -->
### Don't see your issue? Open one
If you spot something new, open an issue. We'll use the issue to have a conversation about the problem you want to fix.
### Ready to make a change? Fork the repo
First, fork this repository:
- [Fork the repo](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo#fork-an-example-repository) so that you can make your changes without affecting the original project until you're ready to merge them.
Once you're done, clone your fork locally.
### Install dependencies
Once your fork is available locally, start by installing the dependencies:
`npm install`
### Make your changes
Then, make changes to the files you'd like to update, then create/push commits to your fork after validating your changes locally:
`npm test`
Also, make sure that the examples are still functional.
### Open a pull request
When you're done making changes and you'd like to propose them for review, create a Pull Request (PR).
### Submit your PR & get it reviewed
Once you submit your PR, maintainers will review it with you. They may have questions and remarks about your proposed changes.
### Your PR is merged!
Congratulations! You have now contributed to this Open Source library; you're a rock star! :sparkles:
================================================
FILE: LICENSE.md
================================================
The MIT License (MIT)
Copyright (c) 2024 The react-sigma Authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# React Sigma
A set of react components to display graphs with Sigma v3.
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api)
- [Storybook](https://sim51.github.io/react-sigma/storybook)
## Changes
See the [CHANGELOG file](packages/website/docs/changelog.md).
## Contributing
See the [CONTRIBUTING file](CONTRIBUTING.md).
## Support
Please **do not** use GitHub issue for support, instead post your question on [StackOverflow](https://stackoverflow.com/) using the [`sigma` tag](https://stackoverflow.com/questions/tagged/sigma).
## License
MIT - see the [LICENSE file](LICENSE.md).
================================================
FILE: eslint.config.mjs
================================================
import js from '@eslint/js';
import reactHooks from 'eslint-plugin-react-hooks';
import globals from 'globals';
import tseslint from 'typescript-eslint';
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
ignores: ["**/*.d.ts"],
languageOptions: {
ecmaVersion: 2025,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks
},
rules: {
...reactHooks.configs.recommended.rules,
"@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
"react/react-in-jsx-scope": "off",
"no-console": ["error", { allow: ["warn", "error"] }]
},
},
);
================================================
FILE: lerna.json
================================================
{
"version": "5.0.6",
"private": true,
"packages": ["packages/*"]
}
================================================
FILE: package.json
================================================
{
"name": "@react-sigma/root",
"version": "5.0.0",
"description": "React Sigma",
"keywords": [
"sigma",
"react",
"graph",
"graphology"
],
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"license": "MIT",
"author": "Benoit Simard",
"workspaces": [
"packages/*"
],
"scripts": {
"build": "npm run compile && lerna run build",
"clean": "lerna run clean",
"compile": "npm run clean && npm run lint && npm run tsc",
"lerna:changed": "lerna changed",
"lerna:diff": "lerna diff",
"lerna:ls": "lerna ls",
"lerna:publish": "npm run clean && npm run build && lerna publish --no-private from-package",
"lerna:version": "lerna version",
"lint": "eslint",
"start": "lerna run start --parallel",
"test": "npm run test --workspaces --if-present",
"tsc": "tsc -b --preserveWatchOutput",
"website": "npm run build -w @react-sigma/storybook && npm run build -w @react-sigma/website"
},
"dependencies": {
"graphology": "^0.26.0",
"graphology-types": "^0.24.8",
"sigma": "^3.0.2"
},
"devDependencies": {
"@faker-js/faker": "^9.3.0",
"@playwright/test": "^1.49.1",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^12.1.2",
"@rollup/plugin-url": "^8.0.2",
"@sigma/edge-curve": "^3.1.0",
"@sigma/node-border": "^3.0.0",
"@sigma/node-image": "^3.0.0",
"@sigma/node-piechart": "^3.0.0",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/addon-storysource": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@svgr/rollup": "^8.1.0",
"@trivago/prettier-plugin-sort-imports": "^5.2.1",
"@types/node": "^22.10.6",
"@types/react": "^19.0.7",
"@types/react-dom": "^19.0.3",
"@types/seedrandom": "^3.0.8",
"concurrently": "^9.1.2",
"copyfiles": "^2.4.1",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.1.0",
"globals": "^15.14.0",
"graphology-generators": "^0.11.2",
"jest": "^29.7.0",
"lerna": "^8.1.9",
"nodemon": "^3.1.9",
"playwright": "^1.49.1",
"prettier": "^3.3.3",
"prettier-eslint": "^16.1.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.4.0",
"rimraf": "^6.0.1",
"rollup": "^4.30.1",
"rollup-plugin-import-css": "^3.5.8",
"seedrandom": "^3.0.5",
"storybook": "^8.4.7",
"tslib": "^2.8.1",
"typescript": "^5.7.3",
"typescript-eslint": "^8.20.0"
}
}
================================================
FILE: packages/core/README.md
================================================
# React Sigma - core module
A set of react components to display graphs with Sigma.js.
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api)
- [Live examples](https://sim51.github.io/react-sigma/storybook)
## How to use it
1. Install the library
```bash
npm install @react-sigma/core
```
2. Import the React Sigma style file in your application.
Example : `import "@react-sigma/core/lib/react-sigma.min.css"`
3. Create the following components into your app and check it displays correctly:
```tsx
import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
import "@react-sigma/core/lib/react-sigma.min.css";
export const LoadGraph = () => {
const graph = new Graph();
graph.addNode("first", { size: 15, label: "My first node", color: "#FA4F40" });
useLoadGraph(graph);
};
export const DisplayGraph = () => {
return (
<SigmaContainer style={{ height: "500px", width: "500px" }}>
<LoadGraph />
</SigmaContainer>
);
};
```
================================================
FILE: packages/core/package.json
================================================
{
"name": "@react-sigma/core",
"version": "5.0.6",
"description": "React Sigma",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_core.umd.min.js",
"module": "./lib/react-sigma_core.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
"./lib/style.css": "./lib/style.css",
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_core.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"assets": "copyfiles -u 1 src/assets/** src/assets/**/* lib/",
"build": "npm run lint && npm run compile && npm run assets && rollup -c",
"start": "nodemon --watch src -e ts,tsx,css --exec npm run build"
},
"peerDependencies": {
"graphology": "^0.26.0",
"react": "^18.0.0 || ^19.0.0",
"sigma": "^3.0.2"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/core/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('core');
================================================
FILE: packages/core/src/assets/index.css
================================================
:root {
--sigma-background-color: #fff;
--sigma-controls-background-color: #fff;
--sigma-controls-background-color-hover: rgba(0, 0, 0, 0.2);
--sigma-controls-border-color: rgba(0, 0, 0, 0.2);
--sigma-controls-color: #000;
--sigma-controls-zindex: 100;
--sigma-controls-margin: 5px;
--sigma-controls-size: 30px;
}
div.react-sigma {
height: 100%;
width: 100%;
position: relative;
background: var(--sigma-background-color);
}
div.sigma-container {
height: 100%;
width: 100%;
}
/**
* Sigma controls wrapper
*/
.react-sigma-controls {
position: absolute;
z-index: var(--sigma-controls-zindex);
border: 2px solid var(--sigma-controls-border-color);
border-radius: 4px;
color: var(--sigma-controls-color);
background-color: var(--sigma-controls-background-color);
}
.react-sigma-controls.bottom-right {
bottom: var(--sigma-controls-margin);
right: var(--sigma-controls-margin);
}
.react-sigma-controls.bottom-left {
bottom: var(--sigma-controls-margin);
left: var(--sigma-controls-margin);
}
.react-sigma-controls.top-right {
top: var(--sigma-controls-margin);
right: var(--sigma-controls-margin);
}
.react-sigma-controls.top-left {
top: var(--sigma-controls-margin);
left: var(--sigma-controls-margin);
}
.react-sigma-controls:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.react-sigma-controls:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/**
* Sigma control button
*/
.react-sigma-control {
width: var(--sigma-controls-size);
height: var(--sigma-controls-size);
line-height: var(--sigma-controls-size);
background-color: var(--sigma-controls-background-color);
border-bottom: 1px solid var(--sigma-controls-border-color);
}
.react-sigma-control:last-child {
border-bottom: none;
}
.react-sigma-control > * {
box-sizing: border-box;
}
.react-sigma-control > button {
display: block;
border: none;
margin: 0;
padding: 0;
width: var(--sigma-controls-size);
height: var(--sigma-controls-size);
line-height: var(--sigma-controls-size);
background-position: center;
background-size: 50%;
background-repeat: no-repeat;
background-color: var(--sigma-controls-background-color);
clip: rect(0, 0, 0, 0);
}
.react-sigma-control > button:hover {
background-color: var(--sigma-controls-background-color-hover);
}
/**
* Search style
*/
.react-sigma-search {
background-color: var(--sigma-controls-background-color);
}
.react-sigma-search label {
visibility: hidden;
}
.react-sigma-search input {
color: var(--sigma-controls-color);
background-color: var(--sigma-controls-background-color);
font-size: 1em;
width: 100%;
margin: 0;
border: none;
padding: var(--sigma-controls-margin);
box-sizing: border-box;
}
================================================
FILE: packages/core/src/components/SigmaContainer.tsx
================================================
import Graph from 'graphology';
import { Attributes } from 'graphology-types';
import React, {
CSSProperties,
PropsWithChildren,
PropsWithoutRef,
ReactElement,
Ref,
forwardRef,
useEffect,
useImperativeHandle,
useMemo,
useRef,
useState,
} from 'react';
import { Sigma } from 'sigma';
import { Settings } from 'sigma/settings';
import { CameraState } from 'sigma/types';
import { SigmaContextInterface, SigmaProvider } from '../hooks/context';
import { GraphType } from '../types';
import { isEqual } from '../utils';
/**
* Properties for `SigmaContainer` component
*/
export interface SigmaContainerProps<N extends Attributes, E extends Attributes, G extends Attributes> {
/**
* Graphology instance or constructor
*/
graph?: GraphType<N, E, G>;
/**
* Sigma settings
*/
settings?: Partial<Settings<N, E, G>>;
/**
* HTML id
*/
id?: string;
/**
* HTML class
*/
className?: string;
/**
* HTML CSS style
*/
style?: CSSProperties;
}
/**
* The `SigmaContainer` component is responsible of create the Sigma instance, and provide it to its child components using a React Context that can be accessible via the hook {@link useSigma}.
*
* ```jsx
* <SigmaContainer id="sigma-graph">
* <MyCustomGraph />
* </SigmaContainer>
*```
*
* See {@link SigmaContainerProps} for the component's properties.
*
* @category Component
*/
const SigmaContainerComponent = <
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
>(
{ graph, id, className, style, settings = {}, children }: PropsWithChildren<SigmaContainerProps<N, E, G>>,
ref: Ref<Sigma<N, E, G> | null>,
) => {
// Root HTML element
const rootRef = useRef<HTMLDivElement>(null);
// HTML element for the sigma instance
const containerRef = useRef<HTMLDivElement>(null);
// Common html props for the container
const props = { className: `react-sigma ${className ? className : ''}`, id, style };
// Sigma instance
const [sigma, setSigma] = useState<Sigma<N, E, G> | null>(null);
// Sigma settings
const [sigmaSettings, setSigmaSettings] = useState<Partial<Settings<N, E, G>>>(settings);
useEffect(() => {
setSigmaSettings((prev) => {
if (!isEqual(prev, settings)) return settings;
return prev;
});
}, [settings]);
/**
* When graph or settings changed
* => create sigma
*/
useEffect(() => {
let instance: Sigma<N, E, G> | null = null;
if (containerRef.current !== null) {
let sigGraph = new Graph<N, E, G>();
if (graph) {
sigGraph = typeof graph === 'function' ? new graph() : graph;
}
instance = new Sigma(sigGraph, containerRef.current, sigmaSettings);
setSigma((prev) => {
let prevCameraState: CameraState | null = null;
if (prev) {
prevCameraState = prev.getCamera().getState();
}
if (prevCameraState) instance!.getCamera().setState(prevCameraState);
return instance;
});
}
return () => {
if (instance) {
instance.kill();
}
};
}, [containerRef, graph, sigmaSettings]);
/**
* Forward the sigma ref
*/
useImperativeHandle<Sigma<N, E, G> | null, Sigma<N, E, G> | null>(ref, () => sigma, [sigma]);
/**
* Memoify the context
*/
const context = useMemo(() => {
return sigma && rootRef.current ? { sigma, container: rootRef.current as HTMLElement } : null;
}, [sigma, rootRef]) as SigmaContextInterface | null;
// When context is created we provide it to children
const contents = context !== null ? <SigmaProvider value={context}>{children}</SigmaProvider> : null;
return (
<div {...props} ref={rootRef}>
<div className="sigma-container" ref={containerRef} />
{contents}
</div>
);
};
/**
* Redefine forwardRef for generics
*/
function fixedForwardRef<T, P = unknown>(
render: (props: PropsWithoutRef<P>, ref: React.Ref<T>) => ReactElement,
): (props: P & React.RefAttributes<T>) => ReactElement {
return forwardRef(render) as (props: P & React.RefAttributes<T>) => ReactElement;
}
/**
* The `SigmaContainer` component is responsible of create the Sigma instance, and provide it to its child components using a React Context that can be accessible via the hook {@link useSigma}.
*
* ```jsx
* <SigmaContainer id="sigma-graph">
* <MyCustomGraph />
* </SigmaContainer>
*```
*
* See {@link SigmaContainerProps} for the component's properties.
*
* @category Component
*/
export const SigmaContainer = fixedForwardRef(SigmaContainerComponent);
================================================
FILE: packages/core/src/components/controls/ControlsContainer.tsx
================================================
import React, { CSSProperties, ReactNode } from 'react';
/**
* Properties for `ControlsContainer` component.
*/
export interface ControlsContainerProps {
/**
* HTML id
*/
id?: string;
/**
* HTML class
*/
className?: string;
/**
* HTML CSS style
*/
style?: CSSProperties;
/**
* Position of the container
*/
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
/*
* @hidden
*/
children?: ReactNode;
}
/**
* The `ControlsContainer` is just a wrapper for other control components.
* It defines their position and also their style with its CSS class `react-sigma-controls`.
*
* ```jsx
* <SigmaContainer>
* <ControlsContainer position={"bottom-right"}>
* <ForceAtlasControl autoRunFor={2000} />
* </ControlsContainer>
* </SigmaContainer>
* ```
*
* See {@link ControlsContainerProps} for the component's properties.
*
* @category Component
*/
export const ControlsContainer: React.FC<ControlsContainerProps> = ({
id,
className,
style,
children,
position = 'bottom-left',
}: ControlsContainerProps) => {
// Common html props for the container
const props = { className: `react-sigma-controls ${className ? className : ''} ${position}`, id, style };
return <div {...props}>{children}</div>;
};
================================================
FILE: packages/core/src/components/controls/FullScreenControl.tsx
================================================
import React, { CSSProperties, RefObject } from 'react';
import { ReactComponent as ExitIcon } from '../../assets/icons/compress-solid.svg';
import { ReactComponent as EnterIcon } from '../../assets/icons/expand-solid.svg';
import { useFullScreen } from '../../hooks/useFullScreen';
type FullScreenLabelKeys = 'enter' | 'exit';
/**
* Properties for `FullScreenControl` component.
*/
export interface FullScreenControlProps {
/**
* HTML id
*/
id?: string;
/**
* HTML class
*/
className?: string;
/**
* HTML CSS style
*/
style?: CSSProperties;
/**
* If defined, this container will be taken for the fullscreen instead of the sigma one.
*/
container?: RefObject<HTMLElement | null>;
/**
* It's possible to customize the button, by passing to JSX Element.
* First one is for the "enter fullscreen", and the second to "exit fullscreen".
* Example :
* ```jsx
* <FullScreenControl>
* <BiFullscreen />
* <BiExitFullscreen />
* </FullScreenControl>
* ```
*/
children?: [React.JSX.Element, React.JSX.Element];
/**
* Map of the labels we use in the component.
* This is usefull for I18N
*/
labels?: { [Key in FullScreenLabelKeys]?: string };
}
/**
* The `FullScreenControl` create a UI button that allows the user to display the graph in fullscreen
*
* ```jsx
* <SigmaContainer>
* <ControlsContainer>
* <FullScreenControl />
* </ControlsContainer>
* </SigmaContainer>
* ```
*
* See {@link FullScreenControlProps} for the component's properties.
*
* @category Component
*/
export const FullScreenControl: React.FC<FullScreenControlProps> = ({
id,
className,
style,
container,
children,
labels = {},
}: FullScreenControlProps) => {
// Get Sigma
const { isFullScreen, toggle } = useFullScreen(container?.current);
// Common html props for the div
const htmlProps = {
className: `react-sigma-control ${className || ''}`,
id,
style,
};
if (!document.fullscreenEnabled) return null;
return (
<div {...htmlProps}>
<button
onClick={toggle}
title={isFullScreen ? labels['exit'] || 'Exit fullscreen' : labels['enter'] || 'Enter fullscreen'}
>
{children && !isFullScreen && children[0]}
{children && isFullScreen && children[1]}
{!children && !isFullScreen && <EnterIcon style={{ width: '1em' }} />}
{!children && isFullScreen && <ExitIcon style={{ width: '1em' }} />}
</button>
</div>
);
};
================================================
FILE: packages/core/src/components/controls/ZoomControl.tsx
================================================
import React, { CSSProperties } from 'react';
import { ReactComponent as ZoomResetIcon } from '../../assets/icons/dot-circle-regular.svg';
import { ReactComponent as ZoomOutIcon } from '../../assets/icons/minus-solid.svg';
import { ReactComponent as ZoomInIcon } from '../../assets/icons/plus-solid.svg';
import { useCamera } from '../../hooks/useCamera';
type ZoomLabelKeys = 'zoomIn' | 'zoomOut' | 'reset';
/**
* Properties for `ZoomControl` component
*/
export interface ZoomControlProps {
/**
* HTML class that will be added to all div button wrapper
*/
className?: string;
/**
* HTML CSS style that will be added to all div button wrapper
*/
style?: CSSProperties;
/**
* Number of ms for the zoom animation (default is 200ms)
*/
animationDuration?: number;
/**
* It's possible to customize the button, by passing to JSX Element.
* First one is for the "zoom in", second for "zoom out" and third for "view whole graph".
* Example :
* ```jsx
* <ZoomControl>
* <BsZoomIn />
* <BsZoomOut />
* <BiReset />
* </FullScreenControl>
* ```
*/
children?: [React.JSX.Element, React.JSX.Element, React.JSX.Element];
/**
* Map of the labels we use in the component.
* This is usefull for I18N
*/
labels?: { [Key in ZoomLabelKeys]?: string };
}
/**
* The `ZoomControl` create three UI buttons that allows the user to
* - zoom in
* - zoom out
* - reset zoom (ie. see the whole graph)
*
* ```jsx
* <SigmaContainer>
* <ControlsContainer>
* <ZoomControl />
* </ControlsContainer>
* </SigmaContainer>
* ```
*
* See {@link ZoomControlProps} for the component's properties.
*
* @category Component
*/
export const ZoomControl: React.FC<ZoomControlProps> = ({
className,
style,
animationDuration = 200,
children,
labels = {},
}: ZoomControlProps) => {
const { zoomIn, zoomOut, reset } = useCamera({ duration: animationDuration, factor: 1.5 });
// Common html props for the div wrapper
const htmlProps = {
style,
className: `react-sigma-control ${className || ''}`,
};
return (
<>
<div {...htmlProps}>
<button onClick={() => zoomIn()} title={labels['zoomIn'] || 'Zoom In'}>
{children ? children[0] : <ZoomInIcon style={{ width: '1em' }} />}
</button>
</div>
<div {...htmlProps}>
<button onClick={() => zoomOut()} title={labels['zoomOut'] || 'Zoom Out'}>
{children ? children[1] : <ZoomOutIcon style={{ width: '1em' }} />}
</button>
</div>
<div {...htmlProps}>
<button onClick={() => reset()} title={labels['reset'] || 'See whole graph'}>
{children ? children[2] : <ZoomResetIcon style={{ width: '1em' }} />}
</button>
</div>
</>
);
};
================================================
FILE: packages/core/src/hooks/context.ts
================================================
import { Attributes } from 'graphology-types';
import { createContext, useContext } from 'react';
import Sigma from 'sigma';
export interface SigmaContextInterface<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
> {
sigma: Sigma<N, E, G>;
container: HTMLElement;
}
/**
* @hidden
*/
export const SigmaContext = createContext<SigmaContextInterface | null>(null);
/**
* @hidden
*/
export const SigmaProvider = SigmaContext.Provider;
/**
* React hook that store the sigma and html container reference.
*
* ```typescript
* const {sigma, container} = useSigmaContext();
*```
*
* See {@link SigmaContextInterface} for more information.
*
* @category Hook
*/
export function useSigmaContext<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
>(): SigmaContextInterface<N, E, G> {
const context = useContext(SigmaContext);
if (context == null) {
throw new Error('No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>');
}
// cast context to the one with good generics
return context as unknown as SigmaContextInterface<N, E, G>;
}
================================================
FILE: packages/core/src/hooks/useCamera.ts
================================================
import { useCallback, useEffect, useState } from 'react';
import { CameraState } from 'sigma/types';
import { AnimateOptions } from 'sigma/utils';
import { isEqual } from '../utils';
import { useSigma } from './useSigma';
type CameraOptions = Partial<AnimateOptions> & { factor?: number };
/**
* React hook that helps you to manage the camera.
*
* ```typescript
* const {zoomIn, zoomOut, reset, goto, gotoNode } = useCamera();
*```
*
* @category Hook
*/
export function useCamera(options?: CameraOptions): {
zoomIn: (options?: CameraOptions) => void;
zoomOut: (options?: CameraOptions) => void;
reset: (options?: Partial<AnimateOptions>) => void;
goto: (state: Partial<CameraState>, options?: Partial<AnimateOptions>) => void;
gotoNode: (nodeKey: string, options?: Partial<AnimateOptions>) => void;
} {
const sigma = useSigma();
// Default camera options
const [defaultOptions, setDefaultOptions] = useState<CameraOptions>(options || {});
useEffect(() => {
setDefaultOptions((prev) => {
if (!isEqual(prev, options || {})) return options || {};
return prev;
});
}, [options]);
const zoomIn = useCallback(
(options?: CameraOptions) => {
sigma.getCamera().animatedZoom({ ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const zoomOut = useCallback(
(options?: CameraOptions) => {
sigma.getCamera().animatedUnzoom({ ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const reset = useCallback(
(options?: Partial<AnimateOptions>) => {
sigma.getCamera().animatedReset({ ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const goto = useCallback(
(state: Partial<CameraState>, options?: Partial<AnimateOptions>) => {
sigma.getCamera().animate(state, { ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const gotoNode = useCallback(
(nodeKey: string, options?: Partial<AnimateOptions>) => {
const nodeDisplayData = sigma.getNodeDisplayData(nodeKey);
if (nodeDisplayData) sigma.getCamera().animate(nodeDisplayData, { ...defaultOptions, ...options });
else console.warn(`Node ${nodeKey} not found`);
},
[sigma, defaultOptions],
);
return { zoomIn, zoomOut, reset, goto, gotoNode };
}
================================================
FILE: packages/core/src/hooks/useFullScreen.ts
================================================
import { useCallback, useEffect, useState } from 'react';
import { useSigmaContext } from './context';
function toggleFullScreen(dom: HTMLElement) {
if (document.fullscreenElement !== dom) {
dom.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
/**
* React hook that helps you to set graph in fullmode.
*
* ```typescript
* const {toggle, isFullScreen} = useFullscreen();
*```
* @category Hook
*/
export function useFullScreen(container?: HTMLElement | null): {
toggle: () => void;
isFullScreen: boolean;
} {
const context = useSigmaContext();
const [isFullScreen, setFullScreen] = useState<boolean>(false);
const [element, setElement] = useState<HTMLElement>(container ? container : context.container);
const toggleState = useCallback(() => setFullScreen((v) => !v), []);
useEffect(() => {
document.addEventListener('fullscreenchange', toggleState);
return () => document.removeEventListener('fullscreenchange', toggleState);
}, [toggleState]);
useEffect(() => {
setElement(container || context.container);
}, [container, context.container]);
const toggle = useCallback(() => {
toggleFullScreen(element);
}, [element]);
return {
toggle,
isFullScreen,
};
}
================================================
FILE: packages/core/src/hooks/useLoadGraph.ts
================================================
import Graph from 'graphology';
import { Attributes } from 'graphology-types';
import { useCallback } from 'react';
import { useSigma } from './useSigma';
/**
* React hook that helps you to load a graph.
* If a graph was previously loaded in Sigma/Graphology, per default it is cleared.
* You can change this behaviour by settings the parameter `clear` to false.
*
* ```typescript
* const loadGraph = useLoadGraph();
* ...
* useEffect(() => {
* loadGraph(erdosRenyi(UndirectedGraph, { order: 100, probability: 0.2 }), true);
* }, []);
*```
* @category Hook
*/
export function useLoadGraph<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
>(): (graph: Graph<N, E, G>, clear?: boolean) => void {
const sigma = useSigma<N, E, G>();
return useCallback(
(graph: Graph<N, E, G>, clear = true) => {
if (sigma && graph) {
if (clear && sigma.getGraph().order > 0) sigma.getGraph().clear();
sigma.getGraph().import(graph);
sigma.refresh();
}
},
[sigma],
);
}
================================================
FILE: packages/core/src/hooks/useRegisterEvents.ts
================================================
import { Attributes } from 'graphology-types';
import { useEffect, useState } from 'react';
import { CameraEvents, MouseCaptorEvents, SigmaEvents, TouchCaptorEvents } from 'sigma/types';
import { EventHandlers } from '../types';
import { useSetSettings } from './useSetSettings';
import { useSigma } from './useSigma';
type EventType = keyof EventHandlers;
function keySet<T>(record: Record<keyof T, unknown>): Set<string> {
return new Set<string>(Object.keys(record));
}
const sigmaEvents = keySet<SigmaEvents>({
clickNode: true,
rightClickNode: true,
downNode: true,
enterNode: true,
leaveNode: true,
doubleClickNode: true,
wheelNode: true,
clickEdge: true,
rightClickEdge: true,
downEdge: true,
enterEdge: true,
leaveEdge: true,
doubleClickEdge: true,
wheelEdge: true,
clickStage: true,
rightClickStage: true,
downStage: true,
doubleClickStage: true,
wheelStage: true,
beforeRender: true,
afterRender: true,
kill: true,
upStage: true,
upEdge: true,
upNode: true,
enterStage: true,
leaveStage: true,
resize: true,
afterClear: true,
afterProcess: true,
beforeClear: true,
beforeProcess: true,
moveBody: true,
});
const mouseEvents = keySet<MouseCaptorEvents>({
click: true,
rightClick: true,
doubleClick: true,
mouseup: true,
mousedown: true,
mousemove: true,
mousemovebody: true,
mouseleave: true,
mouseenter: true,
wheel: true,
});
const touchEvents = keySet<TouchCaptorEvents>({
touchup: true,
touchdown: true,
touchmove: true,
touchmovebody: true,
tap: true,
doubletap: true,
});
const cameraEvents = keySet<CameraEvents>({ updated: true });
/**
* React hook that helps you to listen Sigma’s events.
* It handles for you all the lifecyle of listener (ie. on / remove)
*
* ```typescript
* const registerEvents = useRegisterEvents();
* const [setHoveredNode,setHoveredNode] = useState<string|null>(null);
* ...
* useEffect(() => {
* registerEvents({
* enterNode: event => setHoveredNode(event.node),
* leaveNode: event => setHoveredNode(null),
* });
* }, []);
*```
*
* See {@link EventHandlers} for the events.
*
* @category Hook
*/
export function useRegisterEvents<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
>(): (eventHandlers: Partial<EventHandlers>) => void {
const sigma = useSigma<N, E, G>();
const setSettings = useSetSettings<N, E, G>();
const [eventHandlers, setEventHandlers] = useState<Partial<EventHandlers>>({});
useEffect(() => {
if (!sigma || !eventHandlers) {
return;
}
const userEvents = eventHandlers;
// list of event types to register
const eventTypes = Object.keys(userEvents) as Array<EventType>;
// register events
eventTypes.forEach((event: EventType) => {
const eventHandler = userEvents[event] as (...args: unknown[]) => void;
if (sigmaEvents.has(event)) {
sigma.on(event as keyof SigmaEvents, eventHandler);
}
if (mouseEvents.has(event)) {
sigma.getMouseCaptor().on(event as keyof MouseCaptorEvents, eventHandler);
}
if (touchEvents.has(event)) {
sigma.getTouchCaptor().on(event as keyof TouchCaptorEvents, eventHandler);
}
if (cameraEvents.has(event)) {
sigma.getCamera().on(event as keyof CameraEvents, eventHandler);
}
});
// cleanup
return () => {
// remove events listener
if (sigma) {
eventTypes.forEach((event: EventType) => {
const eventHandler = userEvents[event] as (...args: unknown[]) => void;
if (sigmaEvents.has(event)) {
sigma.off(event as keyof SigmaEvents, eventHandler);
}
if (mouseEvents.has(event)) {
sigma.getMouseCaptor().off(event as keyof MouseCaptorEvents, eventHandler);
}
if (touchEvents.has(event)) {
sigma.getTouchCaptor().off(event as keyof TouchCaptorEvents, eventHandler);
}
if (cameraEvents.has(event)) {
sigma.getCamera().off(event as keyof CameraEvents, eventHandler);
}
});
}
};
}, [sigma, eventHandlers, setSettings]);
return setEventHandlers;
}
================================================
FILE: packages/core/src/hooks/useSetSettings.ts
================================================
import { Attributes } from 'graphology-types';
import { useCallback } from 'react';
import { Settings } from 'sigma/settings';
import { useSigmaContext } from './context';
/**
* React hook that helps you to update Sigma’s settings.
*
* ```typescript
* const setSettings = useSetSettings();
* ...
* useEffect(() => {
* setSettings({
* hideEdgesOnMove: true,
* hideLabelsOnMove: true,
* });
* }, []);
*```
* @category Hook
*/
export function useSetSettings<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
>(): (newSettings: Partial<Settings<N, E, G>>) => void {
const { sigma } = useSigmaContext<N, E, G>();
const setSettings = useCallback(
(newSettings: Partial<Settings<N, E, G>>) => {
if (!sigma) return;
(Object.keys(newSettings) as Array<keyof Settings<N, E, G>>).forEach((key) => {
// as never because of https://stackoverflow.com/questions/58656353/how-to-avoid-dynamic-keyof-object-assign-error-in-typescript
sigma.setSetting(key, newSettings[key] as never);
});
},
[sigma],
);
return setSettings;
}
================================================
FILE: packages/core/src/hooks/useSigma.ts
================================================
import { Attributes } from 'graphology-types';
import Sigma from 'sigma';
import { useSigmaContext } from './context';
/**
* React hook to retrieve the sigma instance (from the context).
*
* ```typescript
* const sigma = useSigma();
*```
* @category Hook
*/
export function useSigma<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
>(): Sigma<N, E, G> {
return useSigmaContext<N, E, G>().sigma;
}
================================================
FILE: packages/core/src/index.ts
================================================
/**
* Main React Sigma module that contains all the standard components & hooks to display a graph in react.
*
* @module
*/
import './assets/index.css';
export * from './hooks/context';
export * from './hooks/useSigma';
export * from './hooks/useRegisterEvents';
export * from './hooks/useLoadGraph';
export * from './hooks/useSetSettings';
export * from './hooks/useCamera';
export * from './hooks/useFullScreen';
export * from './components/SigmaContainer';
export * from './components/controls/ControlsContainer';
export * from './components/controls/ZoomControl';
export * from './components/controls/FullScreenControl';
export * from './types';
export * from './utils';
================================================
FILE: packages/core/src/svg.d.ts
================================================
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
================================================
FILE: packages/core/src/types.ts
================================================
import AbstractGraph, { Attributes, GraphOptions } from 'graphology-types';
import { CameraEvents, MouseCaptorEvents, SigmaEvents, TouchCaptorEvents } from 'sigma/types';
/**
* Sigma's events
*/
export type EventHandlers = SigmaEvents & TouchCaptorEvents & MouseCaptorEvents & CameraEvents;
/**
* Graph type helpers.
*/
type GraphConstructor<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
> = new (options?: GraphOptions) => AbstractGraph<N, E, G>;
export type GraphType<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
> = AbstractGraph<N, E, G> | GraphConstructor<N, E, G>;
================================================
FILE: packages/core/src/utils.ts
================================================
/**
* Deeply check if two objects are equals or not.
*
* @category Utils
*/
export function isEqual(x: unknown, y: unknown): boolean {
// check the ref
if (x === y) return true;
// if both are object
if (typeof x == 'object' && x != null && typeof y == 'object' && y != null) {
// Check the number of properties
if (Object.keys(x).length != Object.keys(y).length) return false;
// for every props of x
for (const prop in x) {
// prop is missing in y, false
if (!Object.hasOwn(y, prop)) return false;
// prop in y is diff than the one in x, false
if (!isEqual((x as { [key: string]: unknown })[prop], (y as { [key: string]: unknown })[prop])) return false;
}
return true;
}
return false;
}
/**
* Debounce a function.
*
* @category Utils
*/
export function debounce<A = unknown, R = void>(fn: (args: A) => R, ms: number): (args: A) => Promise<Awaited<R>> {
let timer: NodeJS.Timeout;
const debouncedFunc = (args: A): Promise<Awaited<R>> =>
new Promise((resolve) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
resolve(fn(args) as Awaited<R>);
}, ms);
});
return debouncedFunc;
}
================================================
FILE: packages/core/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
}
}
================================================
FILE: packages/graph-search/README.md
================================================
# React Sigma - Graph Search
`graph-search` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-circlepack/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/graph-search/package.json
================================================
{
"name": "@react-sigma/graph-search",
"version": "5.0.6",
"description": "React Sigma - Graph Search",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology",
"search"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_graph-search.umd.min.js",
"module": "./lib/react-sigma_graph-search.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
"./lib/style.css": "./lib/style.css",
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_graph-search.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/core": "^5.0.6"
},
"peerDependencies": {
"minisearch": "^7.1.1",
"react-select": "^5.9.0"
},
"devDependencies": {
"minisearch": "^7.1.1",
"react-select": "^5.9.0"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/graph-search/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('graph-search');
================================================
FILE: packages/graph-search/src/Edge.tsx
================================================
import { useSigma } from '@react-sigma/core';
import React, { FC, ReactNode, useMemo } from 'react';
import { Node, NodeProps } from './Node';
import { Labels } from './types';
interface EdgeProps {
source: NodeProps;
target: NodeProps;
label?: ReactNode;
color?: string;
hidden?: boolean;
directed?: boolean;
// Dynamic labels (for i18n for example)
labels?: Labels;
}
/**
* Component that display an edge.
*
* @category Component
*/
export const Edge: FC<EdgeProps> = ({ label, color, source, target, hidden, directed, labels = {} }) => {
return (
<div className="edge">
<Node {...source} labels={labels} />
<div className="body">
<div className="render">
<span className={`${hidden ? 'dotted' : 'dash'}`} style={{ borderColor: color || '#000' }} />{' '}
{directed && <span className="arrow" style={{ borderTopColor: color || '#000' }} />}
</div>
<span className={`label ${hidden ? 'text-muted' : ''} ${!label ? 'fst-italic' : ''}`}>
{label || labels['no_label'] || 'No label'}
</span>
</div>
<Node {...target} labels={labels} />
</div>
);
};
/**
* Component that display an edge by its id.
*
* @category Component
*/
export const EdgeById: FC<{ id: string; labels?: Labels }> = ({ id, labels }) => {
const sigma = useSigma();
const edgeProps = useMemo(() => {
const attrs = sigma.getGraph().getEdgeAttributes(id);
const nodeReducer = sigma.getSetting('nodeReducer');
const edgeReducer = sigma.getSetting('edgeReducer');
const sourceAttrs = sigma.getGraph().getNodeAttributes(sigma.getGraph().source(id));
const targetAttrs = sigma.getGraph().getNodeAttributes(sigma.getGraph().target(id));
return {
color: sigma.getSetting('defaultEdgeColor'),
directed: sigma.getGraph().isDirected(id),
...attrs,
...(edgeReducer ? edgeReducer(id, attrs) : {}),
source: {
color: sigma.getSetting('defaultNodeColor'),
...sourceAttrs,
...(nodeReducer ? nodeReducer(id, sourceAttrs) : {}),
},
target: {
color: sigma.getSetting('defaultNodeColor'),
...targetAttrs,
...(nodeReducer ? nodeReducer(id, targetAttrs) : {}),
},
};
}, [sigma, id]);
return <Edge {...edgeProps} labels={labels} />;
};
================================================
FILE: packages/graph-search/src/GraphSearch.tsx
================================================
import React, { FC } from 'react';
import { GraphSearchInput, GraphSearchInputProps } from './GraphSearchInput';
import { GraphSearchContextProvider, GraphSearchContextProviderProps } from './context';
/**
* Component that display the search.
* It is the main component of this package, you can only use this one.
*
* @category Component
*/
export const GraphSearch: FC<GraphSearchInputProps & GraphSearchContextProviderProps> = ({
minisearchOptions,
...props
}) => (
<GraphSearchContextProvider minisearchOptions={minisearchOptions}>
<GraphSearchInput {...props} />
</GraphSearchContextProvider>
);
================================================
FILE: packages/graph-search/src/GraphSearchInput.tsx
================================================
import { debounce } from '@react-sigma/core';
import React, { CSSProperties, FC, ReactNode, useCallback, useEffect, useMemo } from 'react';
import { NoticeProps, OptionProps, SingleValueProps } from 'react-select';
import AsyncSelect from 'react-select/async';
import { EdgeById } from './Edge';
import { NodeById } from './Node';
import { ReactComponent as SearchIcon } from './assets/icons/magnifying-glass.svg';
import { GraphSearchOption, ItemType, Labels } from './types';
import { useGraphSearch } from './useGraphSearch';
export interface GraphSearchInputProps {
className?: string;
/**
* The value of the input
*/
value?: GraphSearchOption | null;
/**
* If not specified, we search on nodes & edges
*/
type?: ItemType;
/**
* What we do when user select an item
*/
onChange: (e: GraphSearchOption | null) => void;
/**
* What we do when user focus an item on the dropdown.
* This can be useful to highlight the focus element in the graph
*/
onFocus?: (e: GraphSearchOption | null) => void;
/**
* With this function, you can filter/enhance the result displayed to the user.
* This can be useful to add action / messages, limit the number of result
* or highlight the search result in the graph
*/
postSearchResult?: (options: GraphSearchOption[]) => GraphSearchOption[];
/**
* It's possible to customize the drop down indicator, by passing a JSX Element.
* First one is for the "zoom in", second for "zoom out" and third for "view whole graph".
*/
children?: [React.JSX.Element];
/**
* Map of the labels we use in the component.
* This is usefull for I18N
*/
labels?: Labels;
}
function getSingleValueComponent(labels: Labels) {
return function SingleValue(props: SingleValueProps<GraphSearchOption>) {
const { getStyles, innerProps } = props;
return (
<div {...innerProps} style={getStyles('singleValue', props) as CSSProperties}>
{props.data.type === 'nodes' && <NodeById id={props.data.id} labels={labels} />}
{props.data.type === 'edges' && <EdgeById id={props.data.id} labels={labels} />}
</div>
);
};
}
function getNoOptionsMessageComponent(labels: Labels = {}) {
return function NoOptionsMessage(props: NoticeProps<GraphSearchOption>) {
return (
<div className="message text-center">
{props.selectProps.inputValue.length > 0 ? (
<span>{labels['no_result_found'] || 'No result found'}</span>
) : (
<span className="text-muted">{labels['type_something_to_search'] || 'Type something to search'}</span>
)}
</div>
);
};
}
function getDropdownIndicatorComponent(Icon: ReactNode): FC {
return function DropdownIndicatorComponent() {
return <div className="dropdown-indicator">{Icon}</div>;
};
}
/**
*
* @param onFocus
* @returns
*/
function getOptionComponent(onFocus: GraphSearchInputProps['onFocus']): FC<OptionProps<GraphSearchOption, false>> {
return function OptionComponent(props: OptionProps<GraphSearchOption, false>) {
const { data, innerProps, className, isFocused, innerRef, getStyles } = props;
useEffect(() => {
if (onFocus && isFocused) onFocus(data);
}, [isFocused, data]);
return (
<div
{...innerProps}
style={getStyles('option', props) as CSSProperties}
className={`${className || ''} ${isFocused ? 'selected' : ''} option hoverable text-ellipsis`}
ref={innerRef}
>
{data.type === 'nodes' && <NodeById id={data.id} />}
{data.type === 'edges' && <EdgeById id={data.id} />}
{data.type === 'message' && <div className="message">{data.message}</div>}
</div>
);
};
}
/**
* Component thats display the search input.
*
* @category Component
*/
export const GraphSearchInput: FC<GraphSearchInputProps> = ({
className,
onChange,
onFocus,
postSearchResult,
type,
value,
children,
labels = {},
}) => {
const { search } = useGraphSearch();
/**
* Loading the options while the user is typing.
*/
const loadOptions = useCallback(
async (query: string) => {
if (onFocus) onFocus(null);
const result = await search(query, type);
return postSearchResult ? postSearchResult(result) : result;
},
[type, postSearchResult, search, onFocus],
);
/**
* Memoized components for react-select.
*/
const DropdownIndicator = useMemo(
() => getDropdownIndicatorComponent(children ? children[0] : <SearchIcon />),
[children],
);
const OptionComponent = useMemo(() => getOptionComponent(onFocus), [onFocus]);
const SingleValue = useMemo(() => getSingleValueComponent(labels), [labels]);
const NoOptionsMessage = useMemo(() => getNoOptionsMessageComponent(labels), [labels]);
return (
<AsyncSelect
classNamePrefix="react-select"
className={`${className || ''} graph-search`}
isClearable
placeholder={labels['placeholder'] || 'Search...'}
value={value || null}
loadOptions={debounce(loadOptions, 150)}
onChange={onChange}
onMenuClose={() => onFocus && onFocus(null)}
components={{
SingleValue,
Option: OptionComponent,
NoOptionsMessage,
DropdownIndicator,
}}
styles={{
menu: (styles) => ({ ...styles, borderRadius: 0 }),
control: (styles) => ({ ...styles, borderRadius: 0 }),
valueContainer: (provided) => ({
...provided,
flexWrap: 'nowrap',
}),
}}
/>
);
};
================================================
FILE: packages/graph-search/src/Node.tsx
================================================
import { useSigma } from '@react-sigma/core';
import React, { FC, ReactNode, useMemo } from 'react';
import { Labels } from './types';
export interface NodeProps {
label?: ReactNode;
color?: string;
hidden?: boolean;
// Dynamic labels (for i18n for example)
labels?: Labels;
}
/**
* Component that display a node.
*
* @category Component
*/
export const Node: FC<NodeProps> = ({ label, color, hidden, labels = {} }) => {
return (
<div className="node">
<span className={`render ${hidden ? 'circle' : 'disc'}`} style={{ backgroundColor: color || '#000' }} />
<span className={`label ${hidden ? 'text-muted' : ''} ${!label ? 'text-italic' : ''}`}>
{label || labels['no_label'] || 'No label'}
</span>
</div>
);
};
/**
* Component that display a node by its id.
*
* @category Component
*/
export const NodeById: FC<{ id: string; labels?: Labels }> = ({ id, labels }) => {
const sigma = useSigma();
const nodeProps = useMemo(() => {
const attrs = sigma.getGraph().getNodeAttributes(id);
const reducer = sigma.getSetting('nodeReducer');
return {
color: sigma.getSetting('defaultNodeColor'),
...attrs,
...(reducer ? reducer(id, attrs) : {}),
};
}, [sigma, id]);
return <Node {...nodeProps} labels={labels} />;
};
================================================
FILE: packages/graph-search/src/assets/index.css
================================================
:root {
--sigma-grey-color: #ccc;
}
.react-sigma .option.hoverable {
cursor: pointer !important;
}
.react-sigma .text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.react-sigma .react-select__clear-indicator {
cursor: pointer !important;
}
.react-sigma .text-muted {
color: var(--sigma-grey-color)
}
.react-sigma .text-italic {
font-style: italic;
}
.react-sigma .text-center {
text-align: center;
}
.react-sigma .graph-search {
min-width: 250px;
}
.react-sigma .graph-search .option {
padding: 2px 8px;
}
.react-sigma .graph-search .dropdown-indicator {
font-size: 1.25em;
padding: 4px;
}
.react-sigma .graph-search .option.selected {
background-color: var(--sigma-grey-color)
}
.react-sigma .node .render {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
border-radius: 1em;
background-color: var(--sigma-grey-color);
margin-right: 8px;
}
.react-sigma .node {
display: flex;
flex-direction: row;
align-items: center;
}
.react-sigma .node .render {
flex-grow: 0;
flex-shrink: 0;
margin-right: 0 0.25em;
}
.react-sigma .node .label {
flex-grow: 1;
flex-shrink: 1;
}
.react-sigma .edge {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 0;
flex-shrink: 0;
flex-wrap: nowrap;
}
.react-sigma .edge .node {
font-size: 0.7em
}
.react-sigma .edge .body {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
min-height: 0.6em;
}
.react-sigma .edge .body .render {
display: flex;
flex-direction: column;
margin: 0 2px;
}
.react-sigma .edge .body .render .dash,
.react-sigma .edge .body .render .dotted {
display: inline-block;
width: 0;
margin: 0 2px;
border: 2px solid #ccc;
flex-grow: 1;
flex-shrink: 1;
}
.react-sigma .edge .body .render .dotted {
border-style: dotted;
}
.react-sigma .edge .body .render .arrow {
width: 0;
height: 0;
border-left: 0.3em solid transparent;
border-left-width: 0.3em;
border-right: 0.3em solid transparent;
border-right-width: 0.3em;
border-top: 0.6em solid red;
flex-shrink: 0;
flex-grow: 0;
border-left-width: 0.3em;
border-right-width: 0.3em;
}
.react-sigma .edge .body .label {
flex-grow: 1;
flex-shrink: 1;
text-align: center;
}
================================================
FILE: packages/graph-search/src/context.tsx
================================================
import { useSigma } from '@react-sigma/core';
import { Attributes } from 'graphology-types';
import MiniSearch, { Options } from 'minisearch';
import React from 'react';
import { FC, PropsWithChildren, createContext, useEffect, useState } from 'react';
import { Document } from './types';
import { edgeToDocument, nodeToDocument } from './utils';
export interface GraphSearchContextType {
index: MiniSearch;
}
const initialContext: GraphSearchContextType = {
index: new MiniSearch({ fields: [] }),
};
/**
* @hidden
*/
export const GraphSearchContext = createContext(initialContext);
export interface GraphSearchContextProviderProps {
/**
* The minisearch options for its construtor.
*/
minisearchOptions?: Partial<Options<Document>>;
}
/**
* Search context provider.
* It exposes the minisearch instance to search in the graph and
* is also responsible to keep the index up to date with the graph.
*
* You can override the minisearch options by passing them in the `minisearchOptions` prop.
*
* Documents in the index have the type {@link Document} :
* - `id` is node or edge key in the graph
* - `type` is "nodes" or "edges"
* - `itemId` is the unique id in the index (concatenation of type and id)
* - `label` is the label of the node or edge in the graph
* - every attributes of the node or edge are also in the index, prefixed by `prop_`
*
*
* @category Component
*/
export const GraphSearchContextProvider: FC<PropsWithChildren<GraphSearchContextProviderProps>> = ({
children,
minisearchOptions,
}) => {
const [context, setContext] = useState(initialContext);
const sigma = useSigma();
useEffect(() => {
const index = new MiniSearch<Document>({
...minisearchOptions,
idField: 'itemId',
fields: minisearchOptions?.fields
? ['label', ...minisearchOptions.fields.filter((e) => e !== 'label')]
: ['label'],
storeFields: minisearchOptions?.storeFields
? [
'itemId',
'id',
'type',
...minisearchOptions.storeFields.filter((e) => !['itemId', 'id', 'type'].includes(e)),
]
: ['itemId', 'id', 'type'],
processTerm: minisearchOptions?.processTerm
? minisearchOptions?.processTerm
: (term, _fieldName) =>
term
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase(),
});
// index all
const graph = sigma.getGraph();
index.addAll(graph.nodes().map((id: string) => nodeToDocument(sigma, id)));
index.addAll(graph.edges().map((id: string) => edgeToDocument(sigma, id)));
// Listerns to sync graphology with minisearch
function indexNode(payload: { key: string; attributes: Attributes }) {
if (index.has(`nodes-${payload.key}`)) {
index.replace(nodeToDocument(sigma, payload.key));
} else {
index.add(nodeToDocument(sigma, payload.key));
}
}
function deleteNode(payload: { key: string; attributes: Attributes }) {
if (index.has(`nodes-${payload.key}`)) {
index.discard(`nodes-${payload.key}`);
}
}
function indexEdge(payload: { key: string; attributes: Attributes }) {
if (index.has(`edges-${payload.key}`)) {
index.replace(edgeToDocument(sigma, payload.key));
} else {
index.add(edgeToDocument(sigma, payload.key));
}
}
function deleteEdge(payload: { key: string; attributes: Attributes }) {
if (index.has(`edges-${payload.key}`)) {
index.discard(`edges-${payload.key}`);
}
}
graph.on('nodeAdded', indexNode);
graph.on('nodeAttributesUpdated', indexNode);
graph.on('nodeDropped', deleteNode);
graph.on('edgeAdded', indexEdge);
graph.on('edgeAttributesUpdated', indexEdge);
graph.on('edgeDropped', deleteEdge);
setContext({ index });
return () => {
graph.off('nodeAdded', indexNode);
graph.off('nodeAttributesUpdated', indexNode);
graph.off('nodeDropped', deleteNode);
graph.off('edgeAdded', indexEdge);
graph.off('edgeAttributesUpdated', indexEdge);
graph.off('edgeDropped', deleteEdge);
};
}, [sigma, minisearchOptions]);
return <GraphSearchContext.Provider value={context}>{children}</GraphSearchContext.Provider>;
};
================================================
FILE: packages/graph-search/src/index.ts
================================================
import './assets/index.css';
export * from './context';
export * from './useGraphSearch';
export * from './GraphSearchInput';
export * from './GraphSearch';
export * from './Edge';
export * from './Node';
export * from './types';
================================================
FILE: packages/graph-search/src/svg.d.ts
================================================
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
================================================
FILE: packages/graph-search/src/types.ts
================================================
import { ReactNode } from 'react';
export type ItemType = 'nodes' | 'edges';
export type Document = { itemId: string; id: string; type: ItemType; label?: string | null } & {
[key: string]: unknown;
};
export interface OptionItem {
id: string;
type: ItemType;
}
export interface OptionMessage {
type: 'message';
message: ReactNode;
action?: () => void;
}
export type GraphSearchOption = OptionItem | OptionMessage;
export type LabelKeys = 'no_label' | 'no_result_found' | 'type_something_to_search' | 'placeholder';
export type Labels = { [Key in LabelKeys]?: string };
================================================
FILE: packages/graph-search/src/useGraphSearch.tsx
================================================
import { SearchOptions } from 'minisearch';
import { useCallback, useContext } from 'react';
import { GraphSearchContext } from './context';
import { GraphSearchOption, ItemType } from './types';
/**
* Hooks that returns a function to search in the graph index.
* This hook must be used in a component that is a descendant of `GraphSearchContextProvider`.
*
* @param searchOption - Options passed to the minisearch search function. Per default we use `{ prefix: true, fuzzy: 0.2, boost: { label: 2 } }`
*
* @category Hook
*/
export function useGraphSearch(searchOption?: SearchOptions) {
const { index } = useContext(GraphSearchContext);
const search = useCallback(
async (query: string, type?: ItemType): Promise<GraphSearchOption[]> => {
const result = index
.search(query, {
prefix: true,
fuzzy: 0.2,
boost: {
label: 2,
},
...(searchOption || {}),
filter: type ? (result) => result.type === type : undefined,
})
.map((item) => ({ id: item.id, type: item.type }));
return result;
},
[index, searchOption],
);
return { search };
}
================================================
FILE: packages/graph-search/src/utils.tsx
================================================
import Sigma from 'sigma';
import { Document } from './types';
/**
* Cast a node to a document to index.
*
* @category Utils
*/
export function nodeToDocument(sigma: Sigma, id: string): Document {
const graph = sigma.getGraph();
const attrs = graph.getNodeAttributes(id);
const label = sigma.getNodeDisplayData(id)?.label;
return {
type: 'nodes',
itemId: `nodes-${id}`,
id: id,
label,
// to avoid collision with our internal data, we prefix properties
...Object.keys(attrs).reduce((acc, key) => ({ ...acc, [`prop_${key}`]: attrs[key] }), {}),
};
}
/**
* Cast an edge to a document to index.
*
* @category Utils
*/
export function edgeToDocument(sigma: Sigma, id: string): Document {
const graph = sigma.getGraph();
const attrs = graph.getEdgeAttributes(id);
const label = sigma.getEdgeDisplayData(id)?.label;
return {
type: 'edges',
itemId: `edges-${id}`,
id: id,
label,
// to avoid collision with our internal data, we prefix properties
...Object.keys(attrs).reduce((acc, key) => ({ ...acc, [`prop_${key}`]: attrs[key] }), {}),
};
}
================================================
FILE: packages/graph-search/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts", "src/context.tsx", "src/utils.tsx"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/layout-circlepack/README.md
================================================
# React Sigma - layout-ciclepack
`layout-circlepack` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-circlepack/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/layout-circlepack/package.json
================================================
{
"name": "@react-sigma/layout-circlepack",
"version": "5.0.6",
"description": "React Sigma - Layout circlepack",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology",
"layout"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_layout-circlepack.umd.min.js",
"module": "./lib/react-sigma_layout-circlepack.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_layout-circlepack.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/layout-core": "^5.0.6"
},
"peerDependencies": {
"graphology-layout": "^0.6.1"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/layout-circlepack/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('layout-circlepack');
================================================
FILE: packages/layout-circlepack/src/index.ts
================================================
/**
* React Sigma module for layout circlepack.
*
* @module
*/
export * from './useLayoutCirclepack';
================================================
FILE: packages/layout-circlepack/src/useLayoutCirclepack.ts
================================================
import { useLayoutFactory } from '@react-sigma/layout-core';
import circlepack, { CirclePackLayoutOptions } from 'graphology-layout/circlepack';
/**
* React hook that helps you to manage [circlepack layout](https://graphology.github.io/standard-library/layout.html#circlepack).
*
* ```typescript
* const { positions, assign } = useLayoutCirclepack({...});
*```
* @category Hook
*/
export function useLayoutCirclepack(options: CirclePackLayoutOptions = {}) {
return useLayoutFactory<CirclePackLayoutOptions>(circlepack, options);
}
================================================
FILE: packages/layout-circlepack/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/layout-circular/README.md
================================================
# React Sigma - layout-circular
`layout-circular` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-circular/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/layout-circular/package.json
================================================
{
"name": "@react-sigma/layout-circular",
"version": "5.0.6",
"description": "React Sigma - Layout circular",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_layout-circular.umd.min.js",
"module": "./lib/react-sigma_layout-circular.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_layout-circular.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/layout-core": "^5.0.6"
},
"peerDependencies": {
"graphology-layout": "0.6.1"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/layout-circular/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('layout-circular');
================================================
FILE: packages/layout-circular/src/index.ts
================================================
export * from './useLayoutCircular';
================================================
FILE: packages/layout-circular/src/useLayoutCircular.ts
================================================
import { useLayoutFactory } from '@react-sigma/layout-core';
import circular, { CircularLayoutOptions } from 'graphology-layout/circular';
/**
* React hook that helps you to manage [circle layout](https://graphology.github.io/standard-library/layout.html#circular).
*
* ```typescript
* const { positions, assign } = useLayoutCircular(...);
*```
* @category Hook
*/
export function useLayoutCircular(options: CircularLayoutOptions = {}) {
return useLayoutFactory<CircularLayoutOptions>(circular, options);
}
================================================
FILE: packages/layout-circular/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/layout-core/README.md
================================================
# React Sigma - layout-core
`layout-core` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-core/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/layout-core/package.json
================================================
{
"name": "@react-sigma/layout-core",
"version": "5.0.6",
"description": "React Sigma - Layout core",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_layout-core.umd.min.js",
"module": "./lib/react-sigma_layout-core.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_layout-core.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"devDependencies": {
"copyfiles": "^2.4.1"
},
"dependencies": {
"@react-sigma/core": "^5.0.6"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/layout-core/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('layout-core');
================================================
FILE: packages/layout-core/src/WorkerLayoutControl.tsx
================================================
import { useSigma } from '@react-sigma/core';
import React, { CSSProperties, useEffect } from 'react';
import { ReactComponent as StartLayoutIcon } from './assets/icons/play-solid.svg';
import { ReactComponent as StopLayoutIcon } from './assets/icons/stop-solid.svg';
import { LayoutWorkerHook } from './useWorkerLayoutFactory';
type WorkerLayoutLabelKeys = 'start' | 'stop';
/**
* Properties for `WorkerLayoutControl` component
*/
export interface WorkerLayoutControlProps {
/**
* HTML id
*/
id?: string;
/**
* HTML class
*/
className?: string;
/**
* HTML CSS style
*/
style?: CSSProperties;
/**
* The layout hook to use
*/
layout: LayoutWorkerHook;
/**
* Option to tell what we do when the component is mounted
* - <code>-1</code> means that we do nothing (it's the same as no value)
* - <code>0</code> means that we start the algo (and don't auto stop it)
* - <code>X</code> mans that we start the algo, and stop it after X milliseconds
*/
autoRunFor?: number;
/**
* It's possible to customize the button, by passing to JSX Element.
* First one is for the "start layout", and the second to "stop layout".
* Example :
* ```jsx
* <WorkerLayoutControl>
* <>
* <span>Start</span>
* <span>Stop</span>
* </>
* </WorkerLayoutControl>
* ```
*/
children?: [React.JSX.Element, React.JSX.Element];
/**
* Map of the labels we use in the component.
* This is usefull for I18N
*/
labels?: { [Key in WorkerLayoutLabelKeys]?: string };
}
export function WorkerLayoutControl({
id,
className,
style,
layout,
autoRunFor,
children,
labels = {},
}: WorkerLayoutControlProps) {
// Get Sigma
const sigma = useSigma();
// Get layout
const { stop, start, isRunning } = layout;
// Common html props for the div
const props = {
className: `react-sigma-control ${className || ''}`,
id,
style,
};
/**
* Init component when Sigma or component settings change.
*/
useEffect(() => {
if (!sigma) {
return;
}
// we run the algo
let timeout: number | null = null;
if (autoRunFor !== undefined && autoRunFor > -1 && sigma.getGraph().order > 0) {
start();
// set a timeout to stop it
timeout =
autoRunFor > 0
? window.setTimeout(() => {
stop();
}, autoRunFor)
: null;
}
//cleaning
return () => {
if (timeout) {
clearTimeout(timeout);
}
};
}, [autoRunFor, start, stop, sigma]);
return (
<div {...props}>
<button
onClick={() => (isRunning ? stop() : start())}
title={
isRunning ? labels['stop'] || 'Stop the layout animation' : labels['start'] || 'Start the layout animation'
}
>
{children && !isRunning && children[0]}
{children && isRunning && children[1]}
{!children && !isRunning && <StartLayoutIcon style={{ width: '1em' }} />}
{!children && isRunning && <StopLayoutIcon style={{ width: '1em' }} />}
</button>
</div>
);
}
================================================
FILE: packages/layout-core/src/index.ts
================================================
/**
* React Sigma core module for layouts.
* It contains all the standard components & hooks for managing layout.
*
* @module
*/
export * from './useLayoutFactory';
export * from './useWorkerLayoutFactory';
export * from './WorkerLayoutControl';
================================================
FILE: packages/layout-core/src/svg.d.ts
================================================
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
================================================
FILE: packages/layout-core/src/useLayoutFactory.ts
================================================
import { isEqual, useSigma } from '@react-sigma/core';
import Graph from 'graphology';
import { useCallback, useRef } from 'react';
/**
* Generic type for Graphology layout.
*/
export interface GraphologyLayout<T> {
(graph: Graph, options: T): { [node: string]: { [dimension: string]: number } };
assign(graph: Graph, options: T): void;
}
/**
* Generic type for layout hooks.
*/
export type LayoutHook = {
/**
* Returns a positions map by node key.
*/
positions: () => { [node: string]: { [dimension: string]: number } };
/**
* Assign layout node's position into the sigma graph.
*/
assign: () => void;
};
/**
* Factory for layout hook.
*/
export function useLayoutFactory<T>(layout: GraphologyLayout<T>, parameter: T): LayoutHook {
const sigma = useSigma();
// Default layout settings
const settings = useRef<T>(parameter);
if (!isEqual(settings.current, parameter)) settings.current = parameter;
const positions = useCallback(() => {
if (settings.current) return layout(sigma.getGraph(), settings.current);
else return {};
}, [sigma, settings, layout]);
const assign = useCallback(() => {
if (settings.current) {
layout.assign(sigma.getGraph(), settings.current);
}
}, [sigma, settings, layout]);
return { positions, assign };
}
================================================
FILE: packages/layout-core/src/useWorkerLayoutFactory.ts
================================================
import { isEqual, useSigma } from '@react-sigma/core';
import Graph from 'graphology';
import { useCallback, useEffect, useRef, useState } from 'react';
export type LayoutWorkerHook = {
stop: () => void;
start: () => void;
kill: () => void;
isRunning: boolean;
};
export interface GraphologyWorkerLayout {
stop: () => void;
start: () => void;
kill: () => void;
}
interface GraphologyWorkerLayoutConstructor<T> {
new (graph: Graph, settings: T): GraphologyWorkerLayout;
}
export function useWorkerLayoutFactory<T>(
worker: GraphologyWorkerLayoutConstructor<T>,
parameter: T,
): LayoutWorkerHook {
const sigma = useSigma();
const [isRunning, setIsRunning] = useState<boolean>(false);
const [layout, setLayout] = useState<GraphologyWorkerLayout | null>(null);
const settings = useRef<T>(parameter);
if (!isEqual(settings.current, parameter)) settings.current = parameter;
useEffect(() => {
setIsRunning(false);
let newLayout: GraphologyWorkerLayout | null = null;
if (settings.current) newLayout = new worker(sigma.getGraph(), settings.current);
setLayout(newLayout);
return () => {
if (newLayout !== null) newLayout.kill();
};
}, [sigma, settings, setLayout, setIsRunning, worker]);
const stop = useCallback(() => {
if (layout) {
layout.stop();
setIsRunning(false);
}
}, [layout, setIsRunning]);
const start = useCallback(() => {
if (layout) {
layout.start();
setIsRunning(true);
}
}, [layout, setIsRunning]);
const kill = useCallback(() => {
if (layout) {
layout.kill();
}
setIsRunning(false);
}, [layout, setIsRunning]);
return { stop, start, kill, isRunning };
}
================================================
FILE: packages/layout-core/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/layout-force/README.md
================================================
# React Sigma - layout-force
`layout-force` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-force/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/layout-force/package.json
================================================
{
"name": "@react-sigma/layout-force",
"version": "5.0.6",
"description": "React Sigma - Layout force directed",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology"
],
"type": "module",
"main": "./lib/react-sigma_layout-force.umd.min.js",
"module": "./lib/react-sigma_layout-force.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_layout-force.esm.min.js"
}
},
"publishConfig": {
"access": "public"
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/layout-core": "^5.0.6"
},
"peerDependencies": {
"graphology-layout-force": "^0.2.4"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/layout-force/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('layout-force');
================================================
FILE: packages/layout-force/src/LayoutForceControl.tsx
================================================
import { WorkerLayoutControl, WorkerLayoutControlProps } from '@react-sigma/layout-core';
import { ForceLayoutSupervisorParameters } from 'graphology-layout-force/worker';
import React from 'react';
import { useWorkerLayoutForce } from './useWorkerLayoutForce';
/**
* Properties for `ForceDirectedControl` component
*/
export type LayoutForceControlProps = Omit<WorkerLayoutControlProps, 'layout' | 'settings'> & {
settings?: ForceLayoutSupervisorParameters;
};
/**
* Component that display a button to start/stop the layout.
*
* @category Component
*/
export const LayoutForceControl: React.FC<LayoutForceControlProps> = ({
id,
className,
style,
settings = {},
autoRunFor,
children,
labels,
}) => {
const layout = useWorkerLayoutForce(settings);
const workerLayoutProps = { id, className, style, autoRunFor, labels, layout };
return <WorkerLayoutControl {...workerLayoutProps}>{children}</WorkerLayoutControl>;
};
================================================
FILE: packages/layout-force/src/index.ts
================================================
export * from './useLayoutForce';
export * from './useWorkerLayoutForce';
export * from './LayoutForceControl';
================================================
FILE: packages/layout-force/src/useLayoutForce.ts
================================================
import { useLayoutFactory } from '@react-sigma/layout-core';
import force, { ForceLayoutParameters } from 'graphology-layout-force';
/**
* React hook that helps you to manage [force layout](https://graphology.github.io/standard-library/layout-force.html).
*
* ```typescript
* const { positions, assign } = useLayoutForce(...);
*```
* @category Hook
*/
export function useLayoutForce(
options: ForceLayoutParameters = {
maxIterations: 100,
},
) {
return useLayoutFactory<ForceLayoutParameters>(force, options);
}
================================================
FILE: packages/layout-force/src/useWorkerLayoutForce.ts
================================================
import { useWorkerLayoutFactory } from '@react-sigma/layout-core';
import ForceSupervisor, { ForceLayoutSupervisorParameters } from 'graphology-layout-force/worker';
/**
* React hook that helps you to manage worker of [force layout](https://graphology.github.io/standard-library/layout-force.html).
*
* ```typescript
* const { stop, start } = useWorkerLayoutForce(...);
*```
* @category Hook
*/
export function useWorkerLayoutForce(options: ForceLayoutSupervisorParameters = {}) {
return useWorkerLayoutFactory<ForceLayoutSupervisorParameters>(ForceSupervisor, options);
}
================================================
FILE: packages/layout-force/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/layout-forceatlas2/README.md
================================================
# React Sigma - layout-forceatlas2
`layout-forceatlas2` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-forceatlas2/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/layout-forceatlas2/package.json
================================================
{
"name": "@react-sigma/layout-forceatlas2",
"version": "5.0.6",
"description": "React Sigma - Layout Force Atlas 2",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_layout-forceatlas2.umd.min.js",
"module": "./lib/react-sigma_layout-forceatlas2.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_layout-forceatlas2.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/layout-core": "^5.0.6"
},
"peerDependencies": {
"graphology-layout-forceatlas2": "^0.10.1"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/layout-forceatlas2/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('layout-forceatlas2');
================================================
FILE: packages/layout-forceatlas2/src/LayoutForceAtlas2Control.tsx
================================================
import { WorkerLayoutControl, WorkerLayoutControlProps } from '@react-sigma/layout-core';
import { ForceAtlas2LayoutParameters } from 'graphology-layout-forceatlas2';
import React from 'react';
import { useWorkerLayoutForceAtlas2 } from './useWorkerLayoutForceAtlas2';
/**
* Properties for `LayoutForceAtlas2Control` component
*/
export type LayoutForceAtlas2ControlProps = Omit<WorkerLayoutControlProps, 'layout' | 'settings'> & {
settings?: ForceAtlas2LayoutParameters;
};
/**
* @category Component
*/
export const LayoutForceAtlas2Control: React.FC<LayoutForceAtlas2ControlProps> = ({
id,
className,
style,
settings = {},
autoRunFor,
children,
labels,
}) => {
const layout = useWorkerLayoutForceAtlas2(settings);
const workerLayoutProps = { id, className, style, autoRunFor, labels, layout };
return <WorkerLayoutControl {...workerLayoutProps}>{children}</WorkerLayoutControl>;
};
================================================
FILE: packages/layout-forceatlas2/src/index.ts
================================================
export * from './useLayoutForceAtlas2';
export * from './useWorkerLayoutForceAtlas2';
export * from './LayoutForceAtlas2Control';
================================================
FILE: packages/layout-forceatlas2/src/useLayoutForceAtlas2.ts
================================================
import { useLayoutFactory } from '@react-sigma/layout-core';
import forceAtlas2, { ForceAtlas2SynchronousLayoutParameters } from 'graphology-layout-forceatlas2';
/**
* React hook that helps you to manage [force atlas2 layout](https://graphology.github.io/standard-library/layout-forceatlas2.html).
*
* ```typescript
* const { positions, assign } = useLayoutForceAtlas2(...);
*```
* @category Hook
*/
export function useLayoutForceAtlas2(
options: ForceAtlas2SynchronousLayoutParameters = {
iterations: 100,
},
) {
return useLayoutFactory<ForceAtlas2SynchronousLayoutParameters>(forceAtlas2, options);
}
================================================
FILE: packages/layout-forceatlas2/src/useWorkerLayoutForceAtlas2.ts
================================================
import { useWorkerLayoutFactory } from '@react-sigma/layout-core';
import { ForceAtlas2LayoutParameters } from 'graphology-layout-forceatlas2';
import FA2Layout from 'graphology-layout-forceatlas2/worker';
/**
* React hook that helps you to manage worker of [force atlas2 layout](https://graphology.github.io/standard-library/layout-forceatlas2.html).
*
* ```typescript
* const { stop, start } = useWorkerLayoutForceAtlas2(...);
*```
* @category Hook
*/
export function useWorkerLayoutForceAtlas2(options: ForceAtlas2LayoutParameters = {}) {
return useWorkerLayoutFactory<ForceAtlas2LayoutParameters>(FA2Layout, options);
}
================================================
FILE: packages/layout-forceatlas2/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/layout-noverlap/README.md
================================================
# React Sigma - layout-noverlap
`layout-noverlap` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-noverlap/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/layout-noverlap/package.json
================================================
{
"name": "@react-sigma/layout-noverlap",
"version": "5.0.6",
"description": "React Sigma - Layout noverlap",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_layout-noverlap.umd.min.js",
"module": "./lib/react-sigma_layout-noverlap.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_layout-noverlap.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/layout-core": "^5.0.6"
},
"peerDependencies": {
"graphology-layout-noverlap": "^0.4.2"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/layout-noverlap/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('layout-noverlap');
================================================
FILE: packages/layout-noverlap/src/LayoutNoverlapControl.tsx
================================================
import { WorkerLayoutControl, WorkerLayoutControlProps } from '@react-sigma/layout-core';
import { NoverlapLayoutSupervisorParameters } from 'graphology-layout-noverlap/worker';
import React from 'react';
import { useWorkerLayoutNoverlap } from './useWorkerLayoutNoverlap';
/**
* Properties for `NoverlapControl` component
*/
export type LayoutNoverlapControlProps = Omit<WorkerLayoutControlProps, 'layout' | 'settings'> & {
settings?: NoverlapLayoutSupervisorParameters;
};
/**
* @category Component
*/
export const LayoutNoverlapControl: React.FC<LayoutNoverlapControlProps> = ({
id,
className,
style,
settings = {},
autoRunFor,
children,
labels,
}) => {
const layout = useWorkerLayoutNoverlap(settings);
const workerLayoutProps = { id, className, style, autoRunFor, labels, layout };
return <WorkerLayoutControl {...workerLayoutProps}>{children}</WorkerLayoutControl>;
};
================================================
FILE: packages/layout-noverlap/src/index.ts
================================================
export * from './useLayoutNoverlap';
export * from './useWorkerLayoutNoverlap';
export * from './LayoutNoverlapControl';
================================================
FILE: packages/layout-noverlap/src/useLayoutNoverlap.ts
================================================
import { useLayoutFactory } from '@react-sigma/layout-core';
import noverlap, { NoverlapLayoutParameters } from 'graphology-layout-noverlap';
/**
* React hook that helps you to manage [noverlap layout](https://graphology.github.io/standard-library/layout-noverlap.html).
*
* ```typescript
* const { positions, assign } = useLayoutNoverlap(...);
*```
* @category Hook
*/
export function useLayoutNoverlap(options: NoverlapLayoutParameters = {}) {
return useLayoutFactory<NoverlapLayoutParameters>(noverlap, options);
}
================================================
FILE: packages/layout-noverlap/src/useWorkerLayoutNoverlap.ts
================================================
import { useWorkerLayoutFactory } from '@react-sigma/layout-core';
import NoverlapLayout, { NoverlapLayoutSupervisorParameters } from 'graphology-layout-noverlap/worker';
/**
* React hook that helps you to manage worker for [noverlap layout](https://graphology.github.io/standard-library/layout-noverlap.html).
*
* ```typescript
* const { stop, start } = useWorkerLayoutNoverlap({layoutOptions});
*```
* @category Hook
*/
export function useWorkerLayoutNoverlap(options: NoverlapLayoutSupervisorParameters = {}) {
return useWorkerLayoutFactory<NoverlapLayoutSupervisorParameters>(NoverlapLayout, options);
}
================================================
FILE: packages/layout-noverlap/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/layout-random/README.md
================================================
# React Sigma - layout-random
`layout-random` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-random/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/layout-random/package.json
================================================
{
"name": "@react-sigma/layout-random",
"version": "5.0.6",
"description": "React Sigma - Layout random",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_layout-random.umd.min.js",
"module": "./lib/react-sigma_layout-random.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_layout-random.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/layout-core": "^5.0.6"
},
"peerDependencies": {
"graphology-layout": "^0.6.1"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/layout-random/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('layout-random');
================================================
FILE: packages/layout-random/src/index.ts
================================================
export * from './useLayoutRandom';
================================================
FILE: packages/layout-random/src/useLayoutRandom.ts
================================================
import { useLayoutFactory } from '@react-sigma/layout-core';
import random, { RandomLayoutOptions } from 'graphology-layout/random';
/**
* React hook that helps you to manage [random layout](https://graphology.github.io/standard-library/layout.html#random).
*
* ```typescript
* const { positions, assign } = useLayoutRandom(...);
*```
* @category Hook
*/
export function useLayoutRandom(options: RandomLayoutOptions = {}) {
return useLayoutFactory<RandomLayoutOptions>(random, options);
}
================================================
FILE: packages/layout-random/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/minimap/README.md
================================================
# React Sigma - Minimap
`minimap` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)
Visit our website for docs and examples : https://sim51.github.io/react-sigma/
## Documentation
- [Getting started](https://sim51.github.io/react-sigma/docs/start-introduction)
- [API reference](https://sim51.github.io/react-sigma/docs/api/layout-circlepack/)
- [Live example](https://sim51.github.io/react-sigma/docs/example)
================================================
FILE: packages/minimap/package.json
================================================
{
"name": "@react-sigma/minimap",
"version": "5.0.6",
"description": "React Sigma - Minimap",
"author": "Benoit Simard",
"license": "MIT",
"homepage": "https://sim51.github.io/react-sigma",
"bugs": "https://github.com/sim51/react-sigma/issues",
"repository": {
"type": "git",
"url": "https://github.com/sim51/react-sigma.git"
},
"keywords": [
"sigma",
"react",
"react-sigma",
"graph",
"graphology",
"layout"
],
"publishConfig": {
"access": "public"
},
"type": "module",
"main": "./lib/react-sigma_minimap.umd.min.js",
"module": "./lib/react-sigma_minimap.esm.min.js",
"typings": "./lib/index.d.ts",
"exports": {
"./lib/style.css": "./lib/style.css",
".": {
"types": "./lib/index.d.ts",
"default": "./lib/react-sigma_minimap.esm.min.js"
}
},
"scripts": {
"clean": "rimraf lib tsconfig.tsbuildinfo .rollup.cache",
"lint": "eslint",
"compile": "tsc -b",
"build": "npm run lint && npm run compile && rollup -c",
"start": "nodemon --watch src -e ts,tsx --exec npm run build"
},
"dependencies": {
"@react-sigma/core": "^5.0.6"
},
"gitHead": "a64711826b2ee03f4ddd702a87b693ac94e9ae70"
}
================================================
FILE: packages/minimap/rollup.config.mjs
================================================
import getRollupConfig from '../../rollup.base.mjs';
export default getRollupConfig('minimap');
================================================
FILE: packages/minimap/src/Minimap.tsx
================================================
import { SigmaContainer, debounce, useSigma } from '@react-sigma/core';
import React, { FC, useCallback, useEffect, useState } from 'react';
import { Sigma } from 'sigma';
export interface MiniMapProps {
/**
* Width of the minimap.
* Exemple: "200px"
*/
width: string;
/**
* Height of the minimap.
* Exemple: "200px"
*/
height: string;
/**
* Debouce time in ms for the minimap to update its viewbox, to avoid too many updates.
* Default: 0
*/
debounceTime?: number;
}
/**
* Component to display a minimap of the graph.
* This component must be used inside a {@link SigmaProvider}.
*
* @category Component
*/
export const MiniMap: FC<MiniMapProps> = ({ width, height, debounceTime }) => {
const sigma = useSigma();
const [minimap, setMinimap] = useState<Sigma | null>(null);
const [ratioHeight, setRatioHeight] = useState(0);
const [view, setView] = useState({ top: 0, left: 0, width: 0, height: 0 });
/**
* When minimap is mounted, disable its camera and set the ratio between the minimap and the main sigma instance.
*/
useEffect(() => {
if (minimap) {
minimap.getCamera().disable();
setRatioHeight(minimap.getContainer().clientHeight / sigma.getContainer().clientHeight);
}
}, [minimap, sigma]);
/**
* Minimap node reducer based on the one used in the main sigma instance.
*/
const nodeReducer = useCallback(
(node: string) => {
const data = sigma.getNodeDisplayData(node);
return {
x: 0,
y: 0,
...(data || {}),
type: 'circle',
size: (data?.size || 1) * ratioHeight,
label: undefined,
};
},
[sigma, ratioHeight],
);
/**
* Minimap edge reducer => do not display edges.
*/
const edgeReducer = useCallback((_edge: string) => ({ hidden: true }), []);
/**
* Update the viewbox of the minimap based on the main sigma instance camera,
* by listening to the camera updates.
*/
useEffect(() => {
function fnUpdateViewbox() {
if (minimap === null) return;
const bbox = sigma.viewRectangle();
const topLeft = minimap?.framedGraphToViewport({ x: bbox.x1, y: bbox.y1 });
const bottomRight = minimap?.framedGraphToViewport({ x: bbox.x2, y: bbox.y2 + bbox.height });
setView({
left: topLeft.x,
top: topLeft.y,
height: topLeft.y - bottomRight.y,
width: bottomRight.x - topLeft.x,
});
}
// Call it at mount
fnUpdateViewbox();
// Debounce the function and listen on sigma camera updates
const fnUpdateViewboxDebounce = debounce(fnUpdateViewbox, debounceTime || 0);
sigma.getCamera().on('updated', fnUpdateViewboxDebounce);
// Cleanup
return () => {
sigma.getCamera().off('updated', fnUpdateViewbox);
};
}, [sigma, minimap, setView, debounceTime]);
return (
<SigmaContainer
ref={setMinimap}
settings={{
renderLabels: false,
maxCameraRatio: 1,
minCameraRatio: 1,
stagePadding: 2,
nodeReducer,
edgeReducer,
}}
style={{ width, height }}
graph={sigma.getGraph()}
>
<div
className="overlay"
style={{
position: 'absolute',
inset: 0,
zIndex: 1,
overflow: 'hidden',
}}
>
<div
style={{
border: '1px solid var(--sigma-controls-color)',
backgroundColor: 'var(--sigma-controls-color)',
opacity: 0.5,
position: 'absolute',
...view,
}}
/>
</div>
</SigmaContainer>
);
};
================================================
FILE: packages/minimap/src/index.ts
================================================
export * from './Minimap';
================================================
FILE: packages/minimap/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compileOnSave": true,
"include": ["./src/**/*.ts", "src/context.tsx", "src/utils.tsx"],
"composite":true,
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"declarationDir": "./lib",
"sourceMap": true,
}
}
================================================
FILE: packages/storybook/.gitignore
================================================
node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
================================================
FILE: packages/storybook/.storybook/main.ts
================================================
import type { StorybookConfig } from "@storybook/react-vite";
import { mergeConfig } from "vite";
/** @type { import('@storybook/html-vite').StorybookConfig } */
const config: StorybookConfig = {
stories: ["../stories/**/*.stories.tsx", "../../**/src/**/*.mdx", "../../**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-storysource",
],
framework: "@storybook/react-vite",
typescript: {
check: true,
},
docs: {
autodocs: "tag",
},
staticDirs: ["../public"],
logLevel: "debug",
async viteFinal(config) {
return mergeConfig(config, {
resolve: {
preserveSymlinks: false,
},
});
},
};
export default config;
================================================
FILE: packages/storybook/.storybook/preview.ts
================================================
import type { Preview } from "@storybook/react";
import "./style.css";
const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
================================================
FILE: packages/storybook/.storybook/style.css
================================================
.sb-show-main.sb-main-padded {
padding:0;
}
#storybook-root {
height: 100vh;
}
================================================
FILE: packages/storybook/e2e/screenshots.spec.ts
================================================
import { Page, expect, test } from '@playwright/test';
const TESTS: Array<{ id: string; play?: (page: Page) => Promise<void> }> = [
{ id: 'complete' },
{ id: 'custom-renderer' },
{ id: 'demo' },
{ id: 'drag-n-drop' },
{ id: 'events' },
{ id: 'external' },
{ id: 'layout-circular' },
{ id: 'layout-fa2-control' },
{ id: 'load-graph-hook' },
{ id: 'load-graph-prop' },
{ id: 'multi-directed' },
{ id: 'multi' },
{ id: 'node-border' },
{ id: 'edge-curve' },
{ id: 'graph-search' },
{ id: 'minimap' },
];
function getTestUrl(id: string): string {
return `/iframe.html?args=&id=${id}--default&viewMode=story&seed=foo&faTime=-1`;
}
TESTS.forEach(({ id, play }) => {
test(`Screenshot for "${id}"`, async ({ page }) => {
await page.goto(getTestUrl(id), { waitUntil: 'networkidle' });
if (play) await play(page);
await expect(page).toHaveScreenshot(`${id}.png`, {
maxDiffPixels: 2,
timeout: 10000,
});
});
});
================================================
FILE: packages/storybook/package.json
================================================
{
"name": "@react-sigma/storybook",
"version": "5.0.6",
"private": true,
"scripts": {
"clean": "rimraf storybook-static playwright-report test-results dist",
"test": "playwright test",
"build": "storybook build",
"start": "storybook dev -p 6006"
},
"dependencies": {
"@react-sigma/core": "^5.0.6",
"@react-sigma/graph-search": "^5.0.6",
"@react-sigma/layout-circlepack": "^5.0.6",
"@react-sigma/layout-circular": "^5.0.6",
"@react-sigma/layout-core": "^5.0.6",
"@react-sigma/layout-force": "^5.0.6",
"@react-sigma/layout-forceatlas2": "^5.0.6",
"@react-sigma/layout-noverlap": "^5.0.6",
"@react-sigma/layout-random": "^5.0.6",
"@react-sigma/minimap": "^5.0.6"
}
}
================================================
FILE: packages/storybook/playwright.config.ts
================================================
import { defineConfig, devices } from "@playwright/test";
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: "./e2e",
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: "http://127.0.0.1:6006",
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
},
timeout: 1 * 60 * 1000,
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},
],
/* Run your local dev server before starting the tests */
webServer: {
command: "npm start -w @react-sigma/storybook",
url: "http://127.0.0.1:6006",
reuseExistingServer: !process.env.CI,
},
});
================================================
FILE: packages/storybook/public/react-sigma/demo/dataset.json
================================================
{"attributes":{},"nodes":[{"key":"cytoscape","attributes":{"key":"cytoscape","label":"Cytoscape","tag":"Tool","URL":"https://en.wikipedia.org/wiki/Cytoscape","cluster":"0","x":643.82275390625,"y":-770.3126220703125,"score":0.00006909602204225056,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/tool.svg","size":3.0445366404919616}},{"key":"microsoft excel","attributes":{"key":"microsoft excel","label":"Microsoft Excel","tag":"Tool","URL":"https://en.wikipedia.org/wiki/Microsoft%20Excel","cluster":"1","x":-857.2847900390625,"y":602.7734375,"score":0.0018317394731443256,"color":"#666666","clusterLabel":"Spreadsheets","image":"/react-sigma/demo/images/tool.svg","size":4.180668871798151}},{"key":"gephi","attributes":{"key":"gephi","label":"Gephi","tag":"Tool","URL":"https://en.wikipedia.org/wiki/Gephi","cluster":"0","x":343.4423828125,"y":-749.0428466796875,"score":0.0010242079745792347,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/tool.svg","size":3.660165100748394}},{"key":"microsoft power bi","attributes":{"key":"microsoft power bi","label":"Microsoft Power BI","tag":"Tool","URL":"https://en.wikipedia.org/wiki/Microsoft%20Power%20BI","cluster":"1","x":-900.3515014648438,"y":633.4600830078125,"score":0.0000049571249591405295,"color":"#666666","clusterLabel":"Spreadsheets","image":"/react-sigma/demo/images/tool.svg","size":3.0031951722494816}},{"key":"qlik","attributes":{"key":"qlik","label":"Qlik","tag":"Tool","URL":"https://en.wikipedia.org/wiki/Qlik","cluster":"1","x":-627.0659790039062,"y":459.9796447753906,"score":0,"color":"#666666","clusterLabel":"Spreadsheets","image":"/react-sigma/demo/images/tool.svg","size":3}},{"key":"venn diagram","attributes":{"key":"venn diagram","label":"Venn diagram","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Venn%20diagram","cluster":"3","x":-237.4854736328125,"y":-1150.8712158203125,"score":0.007071322614031072,"color":"#57a835","clusterLabel":"Logic of information","image":"/react-sigma/demo/images/charttype.svg","size":7.557902810543951}},{"key":"radar chart","attributes":{"key":"radar chart","label":"Radar chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Radar%20chart","cluster":"4","x":330.8612365722656,"y":203.5203857421875,"score":0,"color":"#7145cd","clusterLabel":"Trees and data structures","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"flowchart","attributes":{"key":"flowchart","label":"Flowchart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Flowchart","cluster":"5","x":-476.044677734375,"y":692.1626586914062,"score":0.01584614746684067,"color":"#579f5f","clusterLabel":"Business intelligence","image":"/react-sigma/demo/images/charttype.svg","size":13.21381769968976}},{"key":"box plot","attributes":{"key":"box plot","label":"Box plot","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Box%20plot","cluster":"6","x":600.8757934570312,"y":1116.4998779296875,"score":0.004182562905931715,"color":"#d043c4","clusterLabel":"Exploratory data analysis","image":"/react-sigma/demo/images/charttype.svg","size":5.695919315913604}},{"key":"treemap","attributes":{"key":"treemap","label":"Treemap","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Treemap","cluster":"7","x":-47.31597137451172,"y":626.2732543945312,"score":0.00013330980758652467,"color":"#477028","clusterLabel":"Softwares and data mining","image":"/react-sigma/demo/images/charttype.svg","size":3.085926378958592}},{"key":"line chart","attributes":{"key":"line chart","label":"Line chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Line%20chart","cluster":"8","x":427.3127136230469,"y":564.1660766601562,"score":0.0008676497465946685,"color":"#b174cb","clusterLabel":"Project management","image":"/react-sigma/demo/images/charttype.svg","size":3.5592536834233326}},{"key":"network chart","attributes":{"key":"network chart","label":"Network chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Network%20chart","cluster":"8","x":128.4100341796875,"y":1197.5357666015625,"score":0,"color":"#b174cb","clusterLabel":"Project management","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"pareto chart","attributes":{"key":"pareto chart","label":"Pareto chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Pareto%20chart","cluster":"6","x":777.5546875,"y":850.110107421875,"score":0.006791135145885246,"color":"#d043c4","clusterLabel":"Exploratory data analysis","image":"/react-sigma/demo/images/charttype.svg","size":7.377304736004533}},{"key":"control chart","attributes":{"key":"control chart","label":"Control chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Control%20chart","cluster":"10","x":458.7308044433594,"y":1091.70458984375,"score":0.004527940052048223,"color":"#a4923a","clusterLabel":"Engineering","image":"/react-sigma/demo/images/charttype.svg","size":5.918536151674784}},{"key":"run chart","attributes":{"key":"run chart","label":"Run chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Run%20chart","cluster":"8","x":231.94883728027344,"y":866.6333618164062,"score":0,"color":"#b174cb","clusterLabel":"Project management","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"scatter plot","attributes":{"key":"scatter plot","label":"Scatter plot","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Scatter%20plot","cluster":"8","x":583.4140625,"y":789.25634765625,"score":0,"color":"#b174cb","clusterLabel":"Project management","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"histogram","attributes":{"key":"histogram","label":"Histogram","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Histogram","cluster":"6","x":848.766357421875,"y":836.5435791015625,"score":0.00818393070072517,"color":"#d043c4","clusterLabel":"Exploratory data analysis","image":"/react-sigma/demo/images/charttype.svg","size":8.275047226401128}},{"key":"bar chart","attributes":{"key":"bar chart","label":"Bar chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Bar%20chart","cluster":"8","x":534.9988403320312,"y":1043.3865966796875,"score":0.002130763205627607,"color":"#b174cb","clusterLabel":"Project management","image":"/react-sigma/demo/images/charttype.svg","size":4.373408078463754}},{"key":"table (information)","attributes":{"key":"table (information)","label":"Table (information)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Table%20%28information%29","cluster":"7","x":26.95672035217285,"y":233.09812927246094,"score":0.00401487359118649,"color":"#477028","clusterLabel":"Softwares and data mining","image":"/react-sigma/demo/images/concept.svg","size":5.587833227823253}},{"key":"mosaic plot","attributes":{"key":"mosaic plot","label":"Mosaic plot","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Mosaic%20plot","cluster":"7","x":-216.06298828125,"y":647.0496826171875,"score":0,"color":"#477028","clusterLabel":"Softwares and data mining","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"tree structure","attributes":{"key":"tree structure","label":"Tree structure","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Tree%20structure","cluster":"4","x":396.307861328125,"y":-480.81427001953125,"score":0.01282269554695697,"color":"#7145cd","clusterLabel":"Trees and data structures","image":"/react-sigma/demo/images/concept.svg","size":11.265016781479824}},{"key":"topic maps","attributes":{"key":"topic maps","label":"Topic maps","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Topic%20maps","cluster":"11","x":-910.932861328125,"y":449.8558044433594,"score":0.0014923384377384381,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/charttype.svg","size":3.961904007342877}},{"key":"semantic network","attributes":{"key":"semantic network","label":"Semantic network","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Semantic%20network","cluster":"11","x":-675.4869384765625,"y":-406.92138671875,"score":0.02294857488492768,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":17.7917694715902}},{"key":"sociogram","attributes":{"key":"sociogram","label":"Sociogram","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Sociogram","cluster":"12","x":484.12945556640625,"y":-15.758939743041992,"score":0.004432159081664743,"color":"#666666","clusterLabel":"Sociometry","image":"/react-sigma/demo/images/charttype.svg","size":5.856799418967771}},{"key":"organizational chart","attributes":{"key":"organizational chart","label":"Organizational chart","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Organizational%20chart","cluster":"12","x":33.159915924072266,"y":330.671875,"score":0,"color":"#666666","clusterLabel":"Sociometry","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"object-role modeling","attributes":{"key":"object-role modeling","label":"Object-role modeling","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Object-role%20modeling","cluster":"11","x":-807.170654296875,"y":-45.31650161743164,"score":0.009309705456285613,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":9.000678371022786}},{"key":"mind map","attributes":{"key":"mind map","label":"Mind map","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Mind%20map","cluster":"13","x":-48.011146545410156,"y":-285.1162109375,"score":0.007887202121152629,"color":"#666666","clusterLabel":"Ideas and concepts","image":"/react-sigma/demo/images/charttype.svg","size":8.08378738710051}},{"key":"issue tree","attributes":{"key":"issue tree","label":"Issue tree","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Issue%20tree","cluster":"14","x":265.8011779785156,"y":398.28131103515625,"score":0.001831348650231925,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":4.180416962367895}},{"key":"issue-based information system","attributes":{"key":"issue-based information system","label":"Issue-based information system","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Issue-based%20information%20system","cluster":"14","x":-26.45574188232422,"y":-66.8399658203125,"score":0.010124206482050582,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":9.525674431471057}},{"key":"dendrogram","attributes":{"key":"dendrogram","label":"Dendrogram","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Dendrogram","cluster":"15","x":536.2782592773438,"y":-755.9024047851562,"score":0.001728198449690851,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/charttype.svg","size":4.113930307096156}},{"key":"graph drawing","attributes":{"key":"graph drawing","label":"Graph drawing","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Graph%20drawing","cluster":"0","x":338.7585144042969,"y":-795.7013549804688,"score":0,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"hyperbolic tree","attributes":{"key":"hyperbolic tree","label":"Hyperbolic tree","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Hyperbolic%20tree","cluster":"4","x":804.0816650390625,"y":-315.2249755859375,"score":0.0016892239172192722,"color":"#7145cd","clusterLabel":"Trees and data structures","image":"/react-sigma/demo/images/concept.svg","size":4.088808821231636}},{"key":"decision tree","attributes":{"key":"decision tree","label":"Decision tree","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Decision%20tree","cluster":"16","x":77.14590454101562,"y":-23.381113052368164,"score":0.024013165654432657,"color":"#666666","clusterLabel":"Decision trees","image":"/react-sigma/demo/images/concept.svg","size":18.47796377006243}},{"key":"conceptual graph","attributes":{"key":"conceptual graph","label":"Conceptual graph","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Conceptual%20graph","cluster":"3","x":-475.8210754394531,"y":-624.5569458007812,"score":0.016546673196177822,"color":"#57a835","clusterLabel":"Logic of information","image":"/react-sigma/demo/images/concept.svg","size":13.665349664059292}},{"key":"concept map","attributes":{"key":"concept map","label":"Concept map","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Concept%20map","cluster":"11","x":-703.615478515625,"y":-224.4598846435547,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"cognitive map","attributes":{"key":"cognitive map","label":"Cognitive map","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Cognitive%20map","cluster":"17","x":679.1165161132812,"y":94.37969970703125,"score":0.004329984537894845,"color":"#666666","clusterLabel":"Motion perception","image":"/react-sigma/demo/images/charttype.svg","size":5.7909416345568605}},{"key":"cladistics","attributes":{"key":"cladistics","label":"Cladistics","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Cladistics","cluster":"15","x":635.1257934570312,"y":-818.5034790039062,"score":0.014021129902730895,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/concept.svg","size":12.03748151213656}},{"key":"argument map","attributes":{"key":"argument map","label":"Argument map","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Argument%20map","cluster":"14","x":-77.0009536743164,"y":-261.25689697265625,"score":0.018709398747628874,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/charttype.svg","size":15.059359442348082}},{"key":"argument technology","attributes":{"key":"argument technology","label":"Argument technology","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Argument%20technology","cluster":"14","x":-126.40925598144531,"y":-357.4993591308594,"score":0,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"argumentation framework","attributes":{"key":"argumentation framework","label":"Argumentation framework","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Argumentation%20framework","cluster":"14","x":-161.99148559570312,"y":-519.1444702148438,"score":0.0029248393536956767,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":4.885239047663751}},{"key":"argumentation scheme","attributes":{"key":"argumentation scheme","label":"Argumentation scheme","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Argumentation%20scheme","cluster":"14","x":252.83218383789062,"y":435.0225830078125,"score":0.0008077899689775658,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":3.5206703711447833}},{"key":"bayesian network","attributes":{"key":"bayesian network","label":"Bayesian network","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Bayesian%20network","cluster":"18","x":352.8931884765625,"y":-30.181875228881836,"score":0.03415176824171303,"color":"#c94c83","clusterLabel":"Artificial intelligence","image":"/react-sigma/demo/images/concept.svg","size":25.012917377731384}},{"key":"dialogue mapping","attributes":{"key":"dialogue mapping","label":"Dialogue mapping","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Dialogue%20mapping","cluster":"14","x":41.850669860839844,"y":-110.37294006347656,"score":0.011078995724305082,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":10.141094885080951}},{"key":"flow (policy debate)","attributes":{"key":"flow (policy debate)","label":"Flow (policy debate)","tag":"Method","URL":"https://en.wikipedia.org/wiki/Flow%20%28policy%20debate%29","cluster":"14","x":-94.31243133544922,"y":-289.2084045410156,"score":0,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"informal fallacy","attributes":{"key":"informal fallacy","label":"Informal fallacy","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Informal%20fallacy","cluster":"14","x":37.87177276611328,"y":-339.2242736816406,"score":0.00018498260920536065,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":3.1192326811289735}},{"key":"logic and dialectic","attributes":{"key":"logic and dialectic","label":"Logic and dialectic","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Logic%20and%20dialectic","cluster":"14","x":-70.99295043945312,"y":-503.11273193359375,"score":0.0002646249575517496,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":3.170567078267926}},{"key":"logic of argumentation","attributes":{"key":"logic of argumentation","label":"Logic of argumentation","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Logic%20of%20argumentation","cluster":"14","x":-86.10369110107422,"y":-496.8826599121094,"score":0.00020819317444045873,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":3.13419331951216}},{"key":"natural deduction","attributes":{"key":"natural deduction","label":"Natural deduction","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Natural%20deduction","cluster":"14","x":-277.50994873046875,"y":-616.25146484375,"score":0.0015530343269026423,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":4.001026244993449}},{"key":"practical arguments","attributes":{"key":"practical arguments","label":"Practical arguments","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Practical%20arguments","cluster":"14","x":-102.90691375732422,"y":-510.39715576171875,"score":0.0006441744391927475,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/concept.svg","size":3.415210088286929}},{"key":"rhetorical structure theory","attributes":{"key":"rhetorical structure theory","label":"Rhetorical structure theory","tag":"Field","URL":"https://en.wikipedia.org/wiki/Rhetorical%20structure%20theory","cluster":"14","x":-254.94761657714844,"y":-263.9010009765625,"score":0.0007035242527660784,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/field.svg","size":3.4534646973404586}},{"key":"semantic tableau","attributes":{"key":"semantic tableau","label":"Semantic tableau","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20tableau","cluster":"14","x":-224.5263214111328,"y":-553.0567016601562,"score":0.00009424027510621452,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/method.svg","size":3.0607436597392335}},{"key":"bioinformatics","attributes":{"key":"bioinformatics","label":"Bioinformatics","tag":"Field","URL":"https://en.wikipedia.org/wiki/Bioinformatics","cluster":"15","x":658.8048706054688,"y":-643.3179931640625,"score":0.01821204533179773,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/field.svg","size":14.738784543480875}},{"key":"biomathematics","attributes":{"key":"biomathematics","label":"Biomathematics","tag":"Field","URL":"https://en.wikipedia.org/wiki/Biomathematics","cluster":"15","x":828.9928588867188,"y":-452.6299133300781,"score":0.005368314648936528,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/field.svg","size":6.460209321764166}},{"key":"coalescent theory","attributes":{"key":"coalescent theory","label":"Coalescent theory","tag":"Field","URL":"https://en.wikipedia.org/wiki/Coalescent%20theory","cluster":"15","x":767.1087036132812,"y":-743.3150634765625,"score":0,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/field.svg","size":3}},{"key":"common descent","attributes":{"key":"common descent","label":"Common descent","tag":"Method","URL":"https://en.wikipedia.org/wiki/Common%20descent","cluster":"15","x":660.1932373046875,"y":-949.0615234375,"score":0.0001598866394411984,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/method.svg","size":3.1030567834412572}},{"key":"glossary of scientific naming","attributes":{"key":"glossary of scientific naming","label":"Glossary of scientific naming","tag":"Field","URL":"https://en.wikipedia.org/wiki/Glossary%20of%20scientific%20naming","cluster":"15","x":610.0006103515625,"y":-932.854248046875,"score":0.0018040231794235473,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/field.svg","size":4.162804013985394}},{"key":"language family","attributes":{"key":"language family","label":"Language family","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Language%20family","cluster":"19","x":496.6799621582031,"y":-1091.396240234375,"score":0.008996244358047963,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/concept.svg","size":8.79863339321076}},{"key":"phylogenetic network","attributes":{"key":"phylogenetic network","label":"Phylogenetic network","tag":"Method","URL":"https://en.wikipedia.org/wiki/Phylogenetic%20network","cluster":"15","x":725.3146362304688,"y":-850.9909057617188,"score":0,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"scientific classification","attributes":{"key":"scientific classification","label":"Scientific classification","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Scientific%20classification","cluster":"15","x":519.0574340820312,"y":-829.2457275390625,"score":0.003850595544769641,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/concept.svg","size":5.481945912204487}},{"key":"subclade","attributes":{"key":"subclade","label":"Subclade","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Subclade","cluster":"15","x":723.3982543945312,"y":-907.066162109375,"score":0.00023239220950615761,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/concept.svg","size":3.1497910875618804}},{"key":"systematics","attributes":{"key":"systematics","label":"Systematics","tag":"Field","URL":"https://en.wikipedia.org/wiki/Systematics","cluster":"15","x":551.040771484375,"y":-684.6061401367188,"score":0.007052832035228139,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/field.svg","size":7.545984494028842}},{"key":"three-taxon analysis","attributes":{"key":"three-taxon analysis","label":"Three-taxon analysis","tag":"Method","URL":"https://en.wikipedia.org/wiki/Three-taxon%20analysis","cluster":"15","x":677.3460083007812,"y":-861.2525024414062,"score":0,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"tree model","attributes":{"key":"tree model","label":"Tree model","tag":"Method","URL":"https://en.wikipedia.org/wiki/Tree%20model","cluster":"19","x":489.556884765625,"y":-1068.211181640625,"score":0.0010120088005887815,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/method.svg","size":3.6523019820006972}},{"key":"cognitive geography","attributes":{"key":"cognitive geography","label":"Cognitive geography","tag":"Field","URL":"https://en.wikipedia.org/wiki/Cognitive%20geography","cluster":"18","x":426.025390625,"y":328.4589538574219,"score":0.0006151236604467582,"color":"#c94c83","clusterLabel":"Artificial intelligence","image":"/react-sigma/demo/images/field.svg","size":3.3964850727103375}},{"key":"fuzzy cognitive map","attributes":{"key":"fuzzy cognitive map","label":"Fuzzy cognitive map","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Fuzzy%20cognitive%20map","cluster":"17","x":629.9107666015625,"y":129.70657348632812,"score":0.0007484619024323138,"color":"#666666","clusterLabel":"Motion perception","image":"/react-sigma/demo/images/charttype.svg","size":3.4824297793898285}},{"key":"motion perception","attributes":{"key":"motion perception","label":"Motion perception","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Motion%20perception","cluster":"17","x":1172.5955810546875,"y":275.5877380371094,"score":0.0032502597718893607,"color":"#666666","clusterLabel":"Motion perception","image":"/react-sigma/demo/images/concept.svg","size":5.094992543530324}},{"key":"repertory grid","attributes":{"key":"repertory grid","label":"Repertory grid","tag":"Method","URL":"https://en.wikipedia.org/wiki/Repertory%20grid","cluster":"20","x":-83.24153900146484,"y":-338.01910400390625,"score":0.006250994475848417,"color":"#7c5d28","clusterLabel":"Collaborative problem solving","image":"/react-sigma/demo/images/method.svg","size":7.029150817363489}},{"key":"alphabet of human thought","attributes":{"key":"alphabet of human thought","label":"Alphabet of human thought","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Alphabet%20of%20human%20thought","cluster":"11","x":-623.0442504882812,"y":-486.6029968261719,"score":0.0015020515862330388,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":3.9681647295923366}},{"key":"chunking (psychology)","attributes":{"key":"chunking (psychology)","label":"Chunking (psychology)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Chunking%20%28psychology%29","cluster":"21","x":-471.457763671875,"y":-568.8685302734375,"score":0.004866983827236221,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":6.1370707399228905}},{"key":"resource description framework","attributes":{"key":"resource description framework","label":"Resource Description Framework","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Resource%20Description%20Framework","cluster":"11","x":-842.5576782226562,"y":-229.8006591796875,"score":0.025971659653706878,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":19.740333738307555}},{"key":"sparql","attributes":{"key":"sparql","label":"SPARQL","tag":"Technology","URL":"https://en.wikipedia.org/wiki/SPARQL","cluster":"11","x":-790.0882568359375,"y":-583.29541015625,"score":0.0006707967423604117,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3.432369801830514}},{"key":"abstract semantic graph","attributes":{"key":"abstract semantic graph","label":"Abstract semantic graph","tag":"Method","URL":"https://en.wikipedia.org/wiki/Abstract%20semantic%20graph","cluster":"5","x":-709.9312744140625,"y":-198.11097717285156,"score":0.003233840402677494,"color":"#579f5f","clusterLabel":"Business intelligence","image":"/react-sigma/demo/images/method.svg","size":5.0844092491223405}},{"key":"cmaptools","attributes":{"key":"cmaptools","label":"CmapTools","tag":"Tool","URL":"https://en.wikipedia.org/wiki/CmapTools","cluster":"11","x":-707.029052734375,"y":-473.86700439453125,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/tool.svg","size":3}},{"key":"network diagram","attributes":{"key":"network diagram","label":"Network diagram","tag":"Chart type","URL":"https://en.wikipedia.org/wiki/Network%20diagram","cluster":"11","x":-697.0083618164062,"y":-471.2865295410156,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/charttype.svg","size":3}},{"key":"ontology (information science)","attributes":{"key":"ontology (information science)","label":"Ontology (information science)","tag":"Field","URL":"https://en.wikipedia.org/wiki/Ontology%20%28information%20science%29","cluster":"11","x":-747.0429077148438,"y":-196.23089599609375,"score":0.013788094782959398,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/field.svg","size":11.887276029324278}},{"key":"semantic lexicon","attributes":{"key":"semantic lexicon","label":"Semantic lexicon","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20lexicon","cluster":"11","x":-617.2353515625,"y":-375.40704345703125,"score":0.00026242067012252217,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.1691462793004193}},{"key":"semantic similarity network","attributes":{"key":"semantic similarity network","label":"Semantic similarity network","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20similarity%20network","cluster":"11","x":-562.7909545898438,"y":-468.2868347167969,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"semantic neural network","attributes":{"key":"semantic neural network","label":"Semantic neural network","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20neural%20network","cluster":"11","x":-717.395751953125,"y":-470.8447570800781,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"semeval","attributes":{"key":"semeval","label":"SemEval","tag":"Method","URL":"https://en.wikipedia.org/wiki/SemEval","cluster":"11","x":-865.1612548828125,"y":-296.4136047363281,"score":0.0005222645900929032,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.3366316844756487}},{"key":"semantic analysis (computational)","attributes":{"key":"semantic analysis (computational)","label":"Semantic analysis (computational)","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20analysis%20%28computational%29","cluster":"11","x":-791.0706787109375,"y":-238.4806365966797,"score":0.0009648148717646707,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.6218825891135435}},{"key":"sparse distributed memory","attributes":{"key":"sparse distributed memory","label":"Sparse distributed memory","tag":"Method","URL":"https://en.wikipedia.org/wiki/Sparse%20distributed%20memory","cluster":"18","x":-55.231285095214844,"y":-355.26177978515625,"score":0,"color":"#c94c83","clusterLabel":"Artificial intelligence","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"taxonomy (general)","attributes":{"key":"taxonomy (general)","label":"Taxonomy (general)","tag":"Field","URL":"https://en.wikipedia.org/wiki/Taxonomy%20%28general%29","cluster":"11","x":-286.0745849609375,"y":-460.0727233886719,"score":0.01849228078475779,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/field.svg","size":14.919413547187522}},{"key":"unified medical language system","attributes":{"key":"unified medical language system","label":"Unified Medical Language System","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Unified%20Medical%20Language%20System","cluster":"22","x":-565.118408203125,"y":-576.4724731445312,"score":0.00034029327622420733,"color":"#666666","clusterLabel":"Clinical terms and technologies","image":"/react-sigma/demo/images/technology.svg","size":3.2193399685985122}},{"key":"cognition network technology","attributes":{"key":"cognition network technology","label":"Cognition Network Technology","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Cognition%20Network%20Technology","cluster":"11","x":-701.9165649414062,"y":-460.1814880371094,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"lexipedia","attributes":{"key":"lexipedia","label":"Lexipedia","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Lexipedia","cluster":"11","x":-711.7052001953125,"y":-460.4881591796875,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"opencog","attributes":{"key":"opencog","label":"OpenCog","tag":"Technology","URL":"https://en.wikipedia.org/wiki/OpenCog","cluster":"11","x":-715.8640747070312,"y":-493.5049133300781,"score":0.0008456220201094614,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3.5450554574425803}},{"key":"open mind common sense","attributes":{"key":"open mind common sense","label":"Open Mind Common Sense","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Open%20Mind%20Common%20Sense","cluster":"11","x":-924.6856689453125,"y":-355.55181884765625,"score":0.0023321444317702077,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":4.5032106778819845}},{"key":"schema.org","attributes":{"key":"schema.org","label":"Schema.org","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Schema.org","cluster":"11","x":-846.623046875,"y":-197.66310119628906,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"snomed ct","attributes":{"key":"snomed ct","label":"SNOMED CT","tag":"Technology","URL":"https://en.wikipedia.org/wiki/SNOMED%20CT","cluster":"22","x":-515.9702758789062,"y":-649.560546875,"score":0.003600203402059478,"color":"#666666","clusterLabel":"Clinical terms and technologies","image":"/react-sigma/demo/images/technology.svg","size":5.3205527594253645}},{"key":"universal networking language","attributes":{"key":"universal networking language","label":"Universal Networking Language","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Universal%20Networking%20Language","cluster":"11","x":-829.3536987304688,"y":-278.9306335449219,"score":0.002090073039330873,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":4.347180760966263}},{"key":"wikidata","attributes":{"key":"wikidata","label":"Wikidata","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Wikidata","cluster":"11","x":-855.0623168945312,"y":-398.7132263183594,"score":0.0017145817111678021,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":4.105153480726858}},{"key":"freebase (database)","attributes":{"key":"freebase (database)","label":"Freebase (database)","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Freebase%20%28database%29","cluster":"11","x":-929.4356689453125,"y":-396.67376708984375,"score":0.0038487242945481562,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":5.4807397762226815}},{"key":"sparql query results xml format","attributes":{"key":"sparql query results xml format","label":"SPARQL Query Results XML Format","tag":"Technology","URL":"https://en.wikipedia.org/wiki/SPARQL%20Query%20Results%20XML%20Format","cluster":"11","x":-840.5682373046875,"y":-626.5060424804688,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"rdfa","attributes":{"key":"rdfa","label":"RDFa","tag":"Technology","URL":"https://en.wikipedia.org/wiki/RDFa","cluster":"21","x":-842.9970092773438,"y":133.79840087890625,"score":0.0003232369320399352,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/technology.svg","size":3.208346104601861}},{"key":"json-ld","attributes":{"key":"json-ld","label":"JSON-LD","tag":"Technology","URL":"https://en.wikipedia.org/wiki/JSON-LD","cluster":"11","x":-924.232666015625,"y":-262.08056640625,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"notation3","attributes":{"key":"notation3","label":"Notation3","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Notation3","cluster":"11","x":-918.1101684570312,"y":-268.0645751953125,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"entity–attribute–value model","attributes":{"key":"entity–attribute–value model","label":"Entity–attribute–value model","tag":"Method","URL":"https://en.wikipedia.org/wiki/Entity%E2%80%93attribute%E2%80%93value%20model","cluster":"11","x":-1004.7867431640625,"y":-56.98497009277344,"score":0.0004002538527626173,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.257988251988097}},{"key":"graph theory","attributes":{"key":"graph theory","label":"Graph theory","tag":"Field","URL":"https://en.wikipedia.org/wiki/Graph%20theory","cluster":"0","x":144.78919982910156,"y":-839.4916381835938,"score":0.026377687709942383,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/field.svg","size":20.002043819955286}},{"key":"tag (metadata)","attributes":{"key":"tag (metadata)","label":"Tag (metadata)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Tag%20%28metadata%29","cluster":"11","x":-632.1871948242188,"y":-86.4168930053711,"score":0.004148488943511288,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":5.673956549178245}},{"key":"scicrunch","attributes":{"key":"scicrunch","label":"SciCrunch","tag":"Tool","URL":"https://en.wikipedia.org/wiki/SciCrunch","cluster":"11","x":-871.8386840820312,"y":-213.283203125,"score":0.000095803398040257,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/tool.svg","size":3.0617511887126905}},{"key":"semantic technology","attributes":{"key":"semantic technology","label":"Semantic technology","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Semantic%20technology","cluster":"11","x":-894.3898315429688,"y":-162.6959991455078,"score":0.0061972116669557825,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":6.994484485590663}},{"key":"associative model of data","attributes":{"key":"associative model of data","label":"Associative model of data","tag":"Method","URL":"https://en.wikipedia.org/wiki/Associative%20model%20of%20data","cluster":"11","x":-972.6192016601562,"y":155.2799072265625,"score":0.0009083069994413123,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.5854597861757393}},{"key":"business intelligence 2.0","attributes":{"key":"business intelligence 2.0","label":"Business Intelligence 2.0","tag":"Field","URL":"https://en.wikipedia.org/wiki/Business%20Intelligence%202.0","cluster":"11","x":-725.814453125,"y":78.32054901123047,"score":0.0023852623482935394,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/field.svg","size":4.5374484455849515}},{"key":"data portability","attributes":{"key":"data portability","label":"Data portability","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Data%20portability","cluster":"11","x":-932.8716430664062,"y":-266.43719482421875,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"folksonomy","attributes":{"key":"folksonomy","label":"Folksonomy","tag":"Method","URL":"https://en.wikipedia.org/wiki/Folksonomy","cluster":"11","x":-430.01275634765625,"y":-253.80511474609375,"score":0.00903214155183702,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":8.821771344820707}},{"key":"lsid","attributes":{"key":"lsid","label":"LSID","tag":"Technology","URL":"https://en.wikipedia.org/wiki/LSID","cluster":"11","x":-893.6924438476562,"y":-213.79568481445312,"score":0.0004353327368013828,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3.280598752580134}},{"key":"swoogle","attributes":{"key":"swoogle","label":"Swoogle","tag":"Tool","URL":"https://en.wikipedia.org/wiki/Swoogle","cluster":"11","x":-951.0037231445312,"y":-201.06761169433594,"score":0.0002597811302235445,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/tool.svg","size":3.167444933317389}},{"key":"void","attributes":{"key":"void","label":"VoID","tag":"Technology","URL":"https://en.wikipedia.org/wiki/VoID","cluster":"11","x":-971.4874267578125,"y":-182.17935180664062,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"language acquisition","attributes":{"key":"language acquisition","label":"Language acquisition","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Language%20acquisition","cluster":"19","x":-0.9998851418495178,"y":-882.901123046875,"score":0.0004615138730214264,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/concept.svg","size":3.29747410686305}},{"key":"flow (psychology)","attributes":{"key":"flow (psychology)","label":"Flow (psychology)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Flow%20%28psychology%29","cluster":"21","x":-38.28602600097656,"y":-17.09149169921875,"score":0.00029537892476822977,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3.190389903680139}},{"key":"forgetting curve","attributes":{"key":"forgetting curve","label":"Forgetting curve","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Forgetting%20curve","cluster":"21","x":-427.970703125,"y":-414.4608459472656,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"generalization (learning)","attributes":{"key":"generalization (learning)","label":"Generalization (learning)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Generalization%20%28learning%29","cluster":"21","x":-500.75921630859375,"y":-610.4454956054688,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"knowledge representation and reasoning","attributes":{"key":"knowledge representation and reasoning","label":"Knowledge representation and reasoning","tag":"Field","URL":"https://en.wikipedia.org/wiki/Knowledge%20representation%20and%20reasoning","cluster":"21","x":-476.34344482421875,"y":-422.58416748046875,"score":0.00818075440257721,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/field.svg","size":8.272999906678084}},{"key":"memory","attributes":{"key":"memory","label":"Memory","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Memory","cluster":"21","x":-550.5669555664062,"y":-611.5762939453125,"score":0.0000922964714159353,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3.0594907585796274}},{"key":"merge (linguistics)","attributes":{"key":"merge (linguistics)","label":"Merge (linguistics)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Merge%20%28linguistics%29","cluster":"21","x":-504.92333984375,"y":-601.8806762695312,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"method of loci","attributes":{"key":"method of loci","label":"Method of loci","tag":"Method","URL":"https://en.wikipedia.org/wiki/Method%20of%20loci","cluster":"21","x":-573.13427734375,"y":-661.1122436523438,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"mnemonic","attributes":{"key":"mnemonic","label":"Mnemonic","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Mnemonic","cluster":"21","x":-589.94140625,"y":-681.6317749023438,"score":0.00007913403771406845,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3.051006759639415}},{"key":"algebraic logic","attributes":{"key":"algebraic logic","label":"Algebraic logic","tag":"Field","URL":"https://en.wikipedia.org/wiki/Algebraic%20logic","cluster":"3","x":-700.435546875,"y":-795.292724609375,"score":0.00016231446702861122,"color":"#57a835","clusterLabel":"Logic of information","image":"/react-sigma/demo/images/field.svg","size":3.1046216678042233}},{"key":"language of thought hypothesis","attributes":{"key":"language of thought hypothesis","label":"Language of thought hypothesis","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Language%20of%20thought%20hypothesis","cluster":"19","x":-295.2800598144531,"y":-771.2247314453125,"score":0.0002577585913602634,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/concept.svg","size":3.166141282491009}},{"key":"natural semantic metalanguage","attributes":{"key":"natural semantic metalanguage","label":"Natural semantic metalanguage","tag":"Field","URL":"https://en.wikipedia.org/wiki/Natural%20semantic%20metalanguage","cluster":"11","x":-647.8865356445312,"y":-346.5642395019531,"score":0.0015117620751910312,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/field.svg","size":3.9744237376067026}},{"key":"philosophical language","attributes":{"key":"philosophical language","label":"Philosophical language","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Philosophical%20language","cluster":"11","x":-574.2839965820312,"y":-493.2090148925781,"score":0.0004692635330238385,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":3.3024692398860673}},{"key":"upper ontology","attributes":{"key":"upper ontology","label":"Upper ontology","tag":"Method","URL":"https://en.wikipedia.org/wiki/Upper%20ontology","cluster":"11","x":-674.0167846679688,"y":-239.4491424560547,"score":0.0027976343609007206,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":4.803247597715628}},{"key":"authority control","attributes":{"key":"authority control","label":"Authority control","tag":"Method","URL":"https://en.wikipedia.org/wiki/Authority%20control","cluster":"11","x":-822.5309448242188,"y":-127.29187774658203,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"formal ontology","attributes":{"key":"formal ontology","label":"Formal ontology","tag":"Method","URL":"https://en.wikipedia.org/wiki/Formal%20ontology","cluster":"11","x":-726.9469604492188,"y":-293.3465881347656,"score":0.0001625247713546905,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.1047572218909516}},{"key":"library classification","attributes":{"key":"library classification","label":"Library classification","tag":"Method","URL":"https://en.wikipedia.org/wiki/Library%20classification","cluster":"15","x":-308.6916198730469,"y":-442.2139587402344,"score":0,"color":"#379982","clusterLabel":"Scientific classification","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"process ontology","attributes":{"key":"process ontology","label":"Process ontology","tag":"Method","URL":"https://en.wikipedia.org/wiki/Process%20ontology","cluster":"11","x":-402.7458801269531,"y":171.14451599121094,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"semantic interoperability","attributes":{"key":"semantic interoperability","label":"Semantic interoperability","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Semantic%20interoperability","cluster":"11","x":-914.43359375,"y":77.43998718261719,"score":0.002211746710645076,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":4.425606933653082}},{"key":"metalanguage","attributes":{"key":"metalanguage","label":"Metalanguage","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Metalanguage","cluster":"11","x":-498.27093505859375,"y":-361.5093994140625,"score":0.0004533172352591103,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":3.292190869153072}},{"key":"universal grammar","attributes":{"key":"universal grammar","label":"Universal grammar","tag":"Field","URL":"https://en.wikipedia.org/wiki/Universal%20grammar","cluster":"19","x":7.053833484649658,"y":-930.2678833007812,"score":0,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/field.svg","size":3}},{"key":"world view","attributes":{"key":"world view","label":"World view","tag":"Concept","URL":"https://en.wikipedia.org/wiki/World%20view","cluster":"19","x":-218.56655883789062,"y":-771.2120971679688,"score":0,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"boolean algebra","attributes":{"key":"boolean algebra","label":"Boolean algebra","tag":"Field","URL":"https://en.wikipedia.org/wiki/Boolean%20algebra","cluster":"3","x":-649.5697631835938,"y":-993.843994140625,"score":0,"color":"#57a835","clusterLabel":"Logic of information","image":"/react-sigma/demo/images/field.svg","size":3}},{"key":"codd's theorem","attributes":{"key":"codd's theorem","label":"Codd's theorem","tag":"Field","URL":"https://en.wikipedia.org/wiki/Codd%27s%20theorem","cluster":"3","x":-752.46630859375,"y":-735.5181274414062,"score":0,"color":"#57a835","clusterLabel":"Logic of information","image":"/react-sigma/demo/images/field.svg","size":3}},{"key":"mnemonic major system","attributes":{"key":"mnemonic major system","label":"Mnemonic major system","tag":"Method","URL":"https://en.wikipedia.org/wiki/Mnemonic%20major%20system","cluster":"21","x":-613.9334106445312,"y":-693.0994262695312,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"belief revision","attributes":{"key":"belief revision","label":"Belief revision","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Belief%20revision","cluster":"21","x":-320.6951904296875,"y":-377.97650146484375,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"commonsense knowledge base","attributes":{"key":"commonsense knowledge base","label":"Commonsense knowledge base","tag":"Method","URL":"https://en.wikipedia.org/wiki/Commonsense%20knowledge%20base","cluster":"21","x":-493.8531188964844,"y":-445.00018310546875,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"datr","attributes":{"key":"datr","label":"DATR","tag":"Technology","URL":"https://en.wikipedia.org/wiki/DATR","cluster":"21","x":-495.4014587402344,"y":-456.7448425292969,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"logico-linguistic modeling","attributes":{"key":"logico-linguistic modeling","label":"Logico-linguistic modeling","tag":"Field","URL":"https://en.wikipedia.org/wiki/Logico-linguistic%20modeling","cluster":"21","x":-484.49884033203125,"y":-453.5343322753906,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/field.svg","size":3}},{"key":"personal knowledge base","attributes":{"key":"personal knowledge base","label":"Personal knowledge base","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Personal%20knowledge%20base","cluster":"14","x":-284.18359375,"y":-120.49275970458984,"score":0.015741458409185748,"color":"#db4139","clusterLabel":"Arguments / Logic","image":"/react-sigma/demo/images/technology.svg","size":13.146339156259739}},{"key":"knowledge graph","attributes":{"key":"knowledge graph","label":"Knowledge graph","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Knowledge%20graph","cluster":"11","x":-759.041259765625,"y":-285.4691162109375,"score":0.00037975842884294196,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3.244777689355667}},{"key":"knowledge management","attributes":{"key":"knowledge management","label":"Knowledge management","tag":"Field","URL":"https://en.wikipedia.org/wiki/Knowledge%20management","cluster":"21","x":-388.5101623535156,"y":30.686166763305664,"score":0.008861628698140528,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/field.svg","size":8.71186531202919}},{"key":"valuation-based system","attributes":{"key":"valuation-based system","label":"Valuation-based system","tag":"Method","URL":"https://en.wikipedia.org/wiki/Valuation-based%20system","cluster":"21","x":-503.8725280761719,"y":-448.6062927246094,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"imagination","attributes":{"key":"imagination","label":"Imagination","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Imagination","cluster":"21","x":71.3614273071289,"y":-137.79916381835938,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"ovsiankina effect","attributes":{"key":"ovsiankina effect","label":"Ovsiankina effect","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Ovsiankina%20effect","cluster":"21","x":74.63014221191406,"y":505.1304931640625,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"wu wei","attributes":{"key":"wu wei","label":"Wu wei","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Wu%20wei","cluster":"21","x":170.06521606445312,"y":127.3057632446289,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"evolutionary linguistics","attributes":{"key":"evolutionary linguistics","label":"Evolutionary linguistics","tag":"Field","URL":"https://en.wikipedia.org/wiki/Evolutionary%20linguistics","cluster":"19","x":302.83514404296875,"y":-1021.9174194335938,"score":0.00011517517628958691,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/field.svg","size":3.074237492527009}},{"key":"evolutionary psychology of language","attributes":{"key":"evolutionary psychology of language","label":"Evolutionary psychology of language","tag":"Field","URL":"https://en.wikipedia.org/wiki/Evolutionary%20psychology%20of%20language","cluster":"19","x":204.8646240234375,"y":-1000.9155883789062,"score":0,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/field.svg","size":3}},{"key":"foxp2","attributes":{"key":"foxp2","label":"FOXP2","tag":"Concept","URL":"https://en.wikipedia.org/wiki/FOXP2","cluster":"19","x":178.49044799804688,"y":-941.7884521484375,"score":0,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"origin of language","attributes":{"key":"origin of language","label":"Origin of language","tag":"Field","URL":"https://en.wikipedia.org/wiki/Origin%20of%20language","cluster":"19","x":288.3348083496094,"y":-943.5899658203125,"score":0.0007183779982126437,"color":"#666666","clusterLabel":"Linguistics","image":"/react-sigma/demo/images/field.svg","size":3.463038850835262}},{"key":"semantic translation","attributes":{"key":"semantic translation","label":"Semantic translation","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20translation","cluster":"11","x":-1023.00537109375,"y":-21.59303092956543,"score":0.000517135176520443,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.333325461606964}},{"key":"semantic unification","attributes":{"key":"semantic unification","label":"Semantic unification","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20unification","cluster":"11","x":-1086.5980224609375,"y":-89.59039306640625,"score":0.0007015673678323802,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.4522033645140486}},{"key":"ontology (computer science)","attributes":{"key":"ontology (computer science)","label":"Ontology (computer science)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Ontology%20%28computer%20science%29","cluster":"11","x":-773.9939575195312,"y":-175.59030151367188,"score":0.006193785807766692,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":6.99227630841098}},{"key":"darpa agent markup language","attributes":{"key":"darpa agent markup language","label":"DARPA Agent Markup Language","tag":"Technology","URL":"https://en.wikipedia.org/wiki/DARPA%20Agent%20Markup%20Language","cluster":"11","x":-1019.974365234375,"y":-350.868408203125,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"web ontology language","attributes":{"key":"web ontology language","label":"Web Ontology Language","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Web%20Ontology%20Language","cluster":"11","x":-911.4971923828125,"y":-28.525930404663086,"score":0.004396283897128895,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":5.833675653676639}},{"key":"semantic web","attributes":{"key":"semantic web","label":"Semantic Web","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Semantic%20Web","cluster":"11","x":-925.17236328125,"y":-117.87979888916016,"score":0.015146260330629708,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":12.762697347908636}},{"key":"collective intelligence","attributes":{"key":"collective intelligence","label":"Collective intelligence","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Collective%20intelligence","cluster":"20","x":-165.6166534423828,"y":-142.6343536376953,"score":0,"color":"#7c5d28","clusterLabel":"Collaborative problem solving","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"enterprise bookmarking","attributes":{"key":"enterprise bookmarking","label":"Enterprise bookmarking","tag":"Method","URL":"https://en.wikipedia.org/wiki/Enterprise%20bookmarking","cluster":"23","x":-432.62164306640625,"y":-111.2158432006836,"score":0.005025707901539079,"color":"#cf7435","clusterLabel":"Network Science","image":"/react-sigma/demo/images/method.svg","size":6.239378178552618}},{"key":"faceted classification","attributes":{"key":"faceted classification","label":"Faceted classification","tag":"Method","URL":"https://en.wikipedia.org/wiki/Faceted%20classification","cluster":"11","x":-331.2969055175781,"y":48.29027557373047,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"hierarchical clustering","attributes":{"key":"hierarchical clustering","label":"Hierarchical clustering","tag":"Method","URL":"https://en.wikipedia.org/wiki/Hierarchical%20clustering","cluster":"4","x":580.143310546875,"y":-513.3453979492188,"score":0.02034966284199348,"color":"#7145cd","clusterLabel":"Trees and data structures","image":"/react-sigma/demo/images/method.svg","size":16.11661064326266}},{"key":"semantic similarity","attributes":{"key":"semantic similarity","label":"Semantic similarity","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20similarity","cluster":"11","x":-568.1552124023438,"y":-92.3887710571289,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"thesaurus","attributes":{"key":"thesaurus","label":"Thesaurus","tag":"Method","URL":"https://en.wikipedia.org/wiki/Thesaurus","cluster":"11","x":-460.56292724609375,"y":-234.09898376464844,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"weak ontology","attributes":{"key":"weak ontology","label":"Weak ontology","tag":"Method","URL":"https://en.wikipedia.org/wiki/Weak%20ontology","cluster":"11","x":-659.6484375,"y":-230.6053009033203,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"linked data","attributes":{"key":"linked data","label":"Linked Data","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Linked%20Data","cluster":"11","x":-950.0712280273438,"y":-90.6455078125,"score":0.0004654952256748535,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3.3000403337825825}},{"key":"ontology alignment","attributes":{"key":"ontology alignment","label":"Ontology alignment","tag":"Method","URL":"https://en.wikipedia.org/wiki/Ontology%20alignment","cluster":"11","x":-1023.9115600585938,"y":-82.35829162597656,"score":0.0013050311543932555,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.8411729305991327}},{"key":"relationship extraction","attributes":{"key":"relationship extraction","label":"Relationship extraction","tag":"Method","URL":"https://en.wikipedia.org/wiki/Relationship%20extraction","cluster":"11","x":-647.7926635742188,"y":108.23262786865234,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"semantic grid","attributes":{"key":"semantic grid","label":"Semantic grid","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20grid","cluster":"11","x":-768.1111450195312,"y":-74.05943298339844,"score":0.0002438726619144268,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3.157190945997718}},{"key":"semantic web rule language","attributes":{"key":"semantic web rule language","label":"Semantic Web Rule Language","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20Web%20Rule%20Language","cluster":"11","x":-653.3441772460938,"y":-174.26751708984375,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"spreadmart","attributes":{"key":"spreadmart","label":"Spreadmart","tag":"Tool","URL":"https://en.wikipedia.org/wiki/Spreadmart","cluster":"11","x":-846.5366821289062,"y":372.75830078125,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/tool.svg","size":3}},{"key":"triplestore","attributes":{"key":"triplestore","label":"Triplestore","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Triplestore","cluster":"11","x":-1059.2547607421875,"y":58.725223541259766,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"attribute-value system","attributes":{"key":"attribute-value system","label":"Attribute-value system","tag":"Method","URL":"https://en.wikipedia.org/wiki/Attribute-value%20system","cluster":"11","x":-941.8338623046875,"y":250.4564666748047,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"metadata","attributes":{"key":"metadata","label":"Metadata","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Metadata","cluster":"11","x":-877.3441772460938,"y":118.20881652832031,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"semantic heterogeneity","attributes":{"key":"semantic heterogeneity","label":"Semantic heterogeneity","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Semantic%20heterogeneity","cluster":"11","x":-1062.4501953125,"y":-47.555110931396484,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"semantic integration","attributes":{"key":"semantic integration","label":"Semantic integration","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20integration","cluster":"11","x":-1055.708984375,"y":-21.736474990844727,"score":0.003061842742018204,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":4.973546166822795}},{"key":"semantic matching","attributes":{"key":"semantic matching","label":"Semantic matching","tag":"Method","URL":"https://en.wikipedia.org/wiki/Semantic%20matching","cluster":"11","x":-1014.1257934570312,"y":-146.5421600341797,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"expert system","attributes":{"key":"expert system","label":"Expert system","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Expert%20system","cluster":"21","x":-619.6608276367188,"y":-162.21267700195312,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/technology.svg","size":3}},{"key":"human–computer interaction","attributes":{"key":"human–computer interaction","label":"Human–computer interaction","tag":"Field","URL":"https://en.wikipedia.org/wiki/Human%E2%80%93computer%20interaction","cluster":"11","x":-593.35302734375,"y":-0.813096284866333,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/field.svg","size":3}},{"key":"knowledge transfer","attributes":{"key":"knowledge transfer","label":"Knowledge transfer","tag":"Method","URL":"https://en.wikipedia.org/wiki/Knowledge%20transfer","cluster":"21","x":-545.2042236328125,"y":-27.003341674804688,"score":0,"color":"#a54a49","clusterLabel":"Knowledge management","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"management information system","attributes":{"key":"management information system","label":"Management information system","tag":"Technology","URL":"https://en.wikipedia.org/wiki/Management%20information%20system","cluster":"7","x":-412.3898010253906,"y":380.8659973144531,"score":0.0070447599877772145,"color":"#477028","clusterLabel":"Softwares and data mining","image":"/react-sigma/demo/images/technology.svg","size":7.54078156244566}},{"key":"subject indexing","attributes":{"key":"subject indexing","label":"Subject indexing","tag":"Method","URL":"https://en.wikipedia.org/wiki/Subject%20indexing","cluster":"11","x":-654.24462890625,"y":-141.134521484375,"score":0,"color":"#5f83cc","clusterLabel":"Semantic networks","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"gallery of named graphs","attributes":{"key":"gallery of named graphs","label":"Gallery of named graphs","tag":"List","URL":"https://en.wikipedia.org/wiki/Gallery%20of%20named%20graphs","cluster":"0","x":218.6732635498047,"y":-734.7560424804688,"score":0,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/list.svg","size":3}},{"key":"glossary of graph theory","attributes":{"key":"glossary of graph theory","label":"Glossary of graph theory","tag":"List","URL":"https://en.wikipedia.org/wiki/Glossary%20of%20graph%20theory","cluster":"0","x":388.5685729980469,"y":-655.8279418945312,"score":0.0003438702405837157,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/list.svg","size":3.2216455423641706}},{"key":"algebraic graph theory","attributes":{"key":"algebraic graph theory","label":"Algebraic graph theory","tag":"Field","URL":"https://en.wikipedia.org/wiki/Algebraic%20graph%20theory","cluster":"0","x":228.02835083007812,"y":-988.830810546875,"score":0.00008165350056458872,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/field.svg","size":3.052630708571495}},{"key":"citation graph","attributes":{"key":"citation graph","label":"Citation graph","tag":"Method","URL":"https://en.wikipedia.org/wiki/Citation%20graph","cluster":"0","x":-84.32083892822266,"y":-137.9530029296875,"score":0.00008819636926134623,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/method.svg","size":3.0568479902951147}},{"key":"data structure","attributes":{"key":"data structure","label":"Data structure","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Data%20structure","cluster":"4","x":95.36343383789062,"y":-340.4019470214844,"score":0.0015348531672156373,"color":"#7145cd","clusterLabel":"Trees and data structures","image":"/react-sigma/demo/images/concept.svg","size":3.989307368149686}},{"key":"dual-phase evolution","attributes":{"key":"dual-phase evolution","label":"Dual-phase evolution","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Dual-phase%20evolution","cluster":"23","x":557.9822387695312,"y":-229.10963439941406,"score":0,"color":"#cf7435","clusterLabel":"Network Science","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"entitative graph","attributes":{"key":"entitative graph","label":"Entitative graph","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Entitative%20graph","cluster":"3","x":-356.9773864746094,"y":-963.9048461914062,"score":0.0005571481305572723,"color":"#57a835","clusterLabel":"Logic of information","image":"/react-sigma/demo/images/concept.svg","size":3.35911627410656}},{"key":"existential graph","attributes":{"key":"existential graph","label":"Existential graph","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Existential%20graph","cluster":"3","x":-330.99444580078125,"y":-996.155517578125,"score":0.0027082286245061838,"color":"#57a835","clusterLabel":"Logic of information","image":"/react-sigma/demo/images/concept.svg","size":4.745620095841674}},{"key":"graph algebra","attributes":{"key":"graph algebra","label":"Graph algebra","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Graph%20algebra","cluster":"0","x":148.67645263671875,"y":-901.763671875,"score":0,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"graph automorphism","attributes":{"key":"graph automorphism","label":"Graph automorphism","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Graph%20automorphism","cluster":"0","x":193.9133758544922,"y":-970.962158203125,"score":0,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/concept.svg","size":3}},{"key":"graph coloring","attributes":{"key":"graph coloring","label":"Graph coloring","tag":"Method","URL":"https://en.wikipedia.org/wiki/Graph%20coloring","cluster":"0","x":122.90592193603516,"y":-920.8076171875,"score":0,"color":"#6c3e81","clusterLabel":"Graph theory","image":"/react-sigma/demo/images/method.svg","size":3}},{"key":"graph database","attributes":{"key":"graph database","label":"Graph database","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Graph%20database","cluster":"7","x":-246.09805297851562,"y":-663.9519653320312,"score":0.00028836496421552214,"color":"#477028","clusterLabel":"Softwares and data mining","image":"/react-sigma/demo/images/concept.svg","size":3.1858689742499364}},{"key":"graph (data structure)","attributes":{"key":"graph (data structure)","label":"Graph (data structure)","tag":"Concept","URL":"https://en.wikipedia.org/wiki/Graph%20%28data%20structure%29","cluster":"0","x":8.46218204498291,"y":-760.5272216796875,"score":0.0001
gitextract_s5exeo5z/ ├── .editorconfig ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ ├── stale.yml │ └── workflows/ │ ├── test.yml │ └── website.yml ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── eslint.config.mjs ├── lerna.json ├── package.json ├── packages/ │ ├── core/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── assets/ │ │ │ │ └── index.css │ │ │ ├── components/ │ │ │ │ ├── SigmaContainer.tsx │ │ │ │ └── controls/ │ │ │ │ ├── ControlsContainer.tsx │ │ │ │ ├── FullScreenControl.tsx │ │ │ │ └── ZoomControl.tsx │ │ │ ├── hooks/ │ │ │ │ ├── context.ts │ │ │ │ ├── useCamera.ts │ │ │ │ ├── useFullScreen.ts │ │ │ │ ├── useLoadGraph.ts │ │ │ │ ├── useRegisterEvents.ts │ │ │ │ ├── useSetSettings.ts │ │ │ │ └── useSigma.ts │ │ │ ├── index.ts │ │ │ ├── svg.d.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ └── tsconfig.json │ ├── graph-search/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── Edge.tsx │ │ │ ├── GraphSearch.tsx │ │ │ ├── GraphSearchInput.tsx │ │ │ ├── Node.tsx │ │ │ ├── assets/ │ │ │ │ └── index.css │ │ │ ├── context.tsx │ │ │ ├── index.ts │ │ │ ├── svg.d.ts │ │ │ ├── types.ts │ │ │ ├── useGraphSearch.tsx │ │ │ └── utils.tsx │ │ └── tsconfig.json │ ├── layout-circlepack/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── useLayoutCirclepack.ts │ │ └── tsconfig.json │ ├── layout-circular/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── useLayoutCircular.ts │ │ └── tsconfig.json │ ├── layout-core/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── WorkerLayoutControl.tsx │ │ │ ├── index.ts │ │ │ ├── svg.d.ts │ │ │ ├── useLayoutFactory.ts │ │ │ └── useWorkerLayoutFactory.ts │ │ └── tsconfig.json │ ├── layout-force/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── LayoutForceControl.tsx │ │ │ ├── index.ts │ │ │ ├── useLayoutForce.ts │ │ │ └── useWorkerLayoutForce.ts │ │ └── tsconfig.json │ ├── layout-forceatlas2/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── LayoutForceAtlas2Control.tsx │ │ │ ├── index.ts │ │ │ ├── useLayoutForceAtlas2.ts │ │ │ └── useWorkerLayoutForceAtlas2.ts │ │ └── tsconfig.json │ ├── layout-noverlap/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── LayoutNoverlapControl.tsx │ │ │ ├── index.ts │ │ │ ├── useLayoutNoverlap.ts │ │ │ └── useWorkerLayoutNoverlap.ts │ │ └── tsconfig.json │ ├── layout-random/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── useLayoutRandom.ts │ │ └── tsconfig.json │ ├── minimap/ │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.mjs │ │ ├── src/ │ │ │ ├── Minimap.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── storybook/ │ │ ├── .gitignore │ │ ├── .storybook/ │ │ │ ├── main.ts │ │ │ ├── preview.ts │ │ │ └── style.css │ │ ├── e2e/ │ │ │ └── screenshots.spec.ts │ │ ├── package.json │ │ ├── playwright.config.ts │ │ ├── public/ │ │ │ └── react-sigma/ │ │ │ └── demo/ │ │ │ └── dataset.json │ │ ├── stories/ │ │ │ ├── Complete.stories.tsx │ │ │ ├── Complete.tsx │ │ │ ├── CustomRender.stories.tsx │ │ │ ├── CustomRender.tsx │ │ │ ├── Demo.stories.tsx │ │ │ ├── Demo.tsx │ │ │ ├── DragNdrop.stories.tsx │ │ │ ├── DragNdrop.tsx │ │ │ ├── EdgeCurve.stories.tsx │ │ │ ├── Events.stories.tsx │ │ │ ├── Events.tsx │ │ │ ├── External.stories.tsx │ │ │ ├── External.tsx │ │ │ ├── GraphSearch.stories.tsx │ │ │ ├── GraphSearch.tsx │ │ │ ├── LayoutCircular.stories.tsx │ │ │ ├── LayoutCircular.tsx │ │ │ ├── LayoutFA2.stories.tsx │ │ │ ├── LayoutFA2.tsx │ │ │ ├── LayoutFA2Control.stories.tsx │ │ │ ├── LayoutFA2Control.tsx │ │ │ ├── Lifecycle.stories.tsx │ │ │ ├── Lifecycle.tsx │ │ │ ├── LoadGraphWithHook.stories.tsx │ │ │ ├── LoadGraphWithHook.tsx │ │ │ ├── LoadGraphWithProp.stories.tsx │ │ │ ├── LoadGraphWithProp.tsx │ │ │ ├── Minimap.stories.tsx │ │ │ ├── Minimap.tsx │ │ │ ├── MultiDirectedGraph.stories.tsx │ │ │ ├── MultiDirectedGraph.tsx │ │ │ ├── Multiple.stories.tsx │ │ │ ├── Multiple.tsx │ │ │ ├── NodeBorder.stories.tsx │ │ │ ├── NodeBorder.tsx │ │ │ ├── NodeImage.stories.tsx │ │ │ ├── NodeImage.tsx │ │ │ ├── UpdateGraphReference.stories.tsx │ │ │ ├── UpdateGraphReference.tsx │ │ │ └── common/ │ │ │ ├── FocusOnNode.tsx │ │ │ ├── LayoutsControl.tsx │ │ │ ├── SampleGraph.tsx │ │ │ └── useRandom.tsx │ │ ├── tsconfig.json │ │ └── types.d.ts │ └── website/ │ ├── babel.config.js │ ├── docs/ │ │ ├── api.md │ │ ├── changelog.mdx │ │ ├── example/ │ │ │ ├── 01_load-graph.mdx │ │ │ ├── 02_events.mdx │ │ │ ├── 03_drag_n_drop.mdx │ │ │ ├── 04_layouts.mdx │ │ │ ├── 05_controls.mdx │ │ │ ├── 06_external_state.mdx │ │ │ ├── 07_graph-search.mdx │ │ │ └── 08_minimap.mdx │ │ ├── faq.md │ │ ├── start-installation.md │ │ ├── start-introduction.md │ │ └── start-setup.md │ ├── docusaurus.config.ts │ ├── package.json │ ├── sidebars.js │ ├── src/ │ │ ├── components/ │ │ │ ├── CodePreview.tsx │ │ │ ├── HomepageFeatures.module.css │ │ │ └── HomepageFeatures.tsx │ │ ├── css/ │ │ │ └── custom.scss │ │ └── pages/ │ │ ├── index.module.css │ │ └── index.tsx │ ├── static/ │ │ └── demo/ │ │ └── dataset.json │ └── tsconfig.json ├── prettier.config.mjs ├── rollup.base.mjs ├── tsconfig.base.json └── tsconfig.json
SYMBOL INDEX (109 symbols across 67 files)
FILE: packages/core/src/components/SigmaContainer.tsx
type SigmaContainerProps (line 27) | interface SigmaContainerProps<N extends Attributes, E extends Attributes...
function fixedForwardRef (line 142) | function fixedForwardRef<T, P = unknown>(
FILE: packages/core/src/components/controls/ControlsContainer.tsx
type ControlsContainerProps (line 6) | interface ControlsContainerProps {
FILE: packages/core/src/components/controls/FullScreenControl.tsx
type FullScreenLabelKeys (line 7) | type FullScreenLabelKeys = 'enter' | 'exit';
type FullScreenControlProps (line 12) | interface FullScreenControlProps {
FILE: packages/core/src/components/controls/ZoomControl.tsx
type ZoomLabelKeys (line 8) | type ZoomLabelKeys = 'zoomIn' | 'zoomOut' | 'reset';
type ZoomControlProps (line 13) | interface ZoomControlProps {
FILE: packages/core/src/hooks/context.ts
type SigmaContextInterface (line 5) | interface SigmaContextInterface<
function useSigmaContext (line 35) | function useSigmaContext<
FILE: packages/core/src/hooks/useCamera.ts
type CameraOptions (line 8) | type CameraOptions = Partial<AnimateOptions> & { factor?: number };
function useCamera (line 19) | function useCamera(options?: CameraOptions): {
FILE: packages/core/src/hooks/useFullScreen.ts
function toggleFullScreen (line 5) | function toggleFullScreen(dom: HTMLElement) {
function useFullScreen (line 23) | function useFullScreen(container?: HTMLElement | null): {
FILE: packages/core/src/hooks/useLoadGraph.ts
function useLoadGraph (line 21) | function useLoadGraph<
FILE: packages/core/src/hooks/useRegisterEvents.ts
type EventType (line 9) | type EventType = keyof EventHandlers;
function keySet (line 11) | function keySet<T>(record: Record<keyof T, unknown>): Set<string> {
function useRegisterEvents (line 94) | function useRegisterEvents<
FILE: packages/core/src/hooks/useSetSettings.ts
function useSetSettings (line 22) | function useSetSettings<
FILE: packages/core/src/hooks/useSigma.ts
function useSigma (line 14) | function useSigma<
FILE: packages/core/src/types.ts
type EventHandlers (line 7) | type EventHandlers = SigmaEvents & TouchCaptorEvents & MouseCaptorEvents...
type GraphConstructor (line 12) | type GraphConstructor<
type GraphType (line 17) | type GraphType<
FILE: packages/core/src/utils.ts
function isEqual (line 6) | function isEqual(x: unknown, y: unknown): boolean {
function debounce (line 33) | function debounce<A = unknown, R = void>(fn: (args: A) => R, ms: number)...
FILE: packages/graph-search/src/Edge.tsx
type EdgeProps (line 7) | interface EdgeProps {
FILE: packages/graph-search/src/GraphSearchInput.tsx
type GraphSearchInputProps (line 12) | interface GraphSearchInputProps {
function getSingleValueComponent (line 51) | function getSingleValueComponent(labels: Labels) {
function getNoOptionsMessageComponent (line 63) | function getNoOptionsMessageComponent(labels: Labels = {}) {
function getDropdownIndicatorComponent (line 77) | function getDropdownIndicatorComponent(Icon: ReactNode): FC {
function getOptionComponent (line 88) | function getOptionComponent(onFocus: GraphSearchInputProps['onFocus']): ...
FILE: packages/graph-search/src/Node.tsx
type NodeProps (line 6) | interface NodeProps {
FILE: packages/graph-search/src/context.tsx
type GraphSearchContextType (line 10) | interface GraphSearchContextType {
type GraphSearchContextProviderProps (line 22) | interface GraphSearchContextProviderProps {
function indexNode (line 82) | function indexNode(payload: { key: string; attributes: Attributes }) {
function deleteNode (line 89) | function deleteNode(payload: { key: string; attributes: Attributes }) {
function indexEdge (line 94) | function indexEdge(payload: { key: string; attributes: Attributes }) {
function deleteEdge (line 101) | function deleteEdge(payload: { key: string; attributes: Attributes }) {
FILE: packages/graph-search/src/types.ts
type ItemType (line 3) | type ItemType = 'nodes' | 'edges';
type Document (line 5) | type Document = { itemId: string; id: string; type: ItemType; label?: st...
type OptionItem (line 9) | interface OptionItem {
type OptionMessage (line 14) | interface OptionMessage {
type GraphSearchOption (line 20) | type GraphSearchOption = OptionItem | OptionMessage;
type LabelKeys (line 22) | type LabelKeys = 'no_label' | 'no_result_found' | 'type_something_to_sea...
type Labels (line 23) | type Labels = { [Key in LabelKeys]?: string };
FILE: packages/graph-search/src/useGraphSearch.tsx
function useGraphSearch (line 15) | function useGraphSearch(searchOption?: SearchOptions) {
FILE: packages/graph-search/src/utils.tsx
function nodeToDocument (line 10) | function nodeToDocument(sigma: Sigma, id: string): Document {
function edgeToDocument (line 29) | function edgeToDocument(sigma: Sigma, id: string): Document {
FILE: packages/layout-circlepack/src/useLayoutCirclepack.ts
function useLayoutCirclepack (line 12) | function useLayoutCirclepack(options: CirclePackLayoutOptions = {}) {
FILE: packages/layout-circular/src/useLayoutCircular.ts
function useLayoutCircular (line 12) | function useLayoutCircular(options: CircularLayoutOptions = {}) {
FILE: packages/layout-core/src/WorkerLayoutControl.tsx
type WorkerLayoutLabelKeys (line 8) | type WorkerLayoutLabelKeys = 'start' | 'stop';
type WorkerLayoutControlProps (line 13) | interface WorkerLayoutControlProps {
function WorkerLayoutControl (line 64) | function WorkerLayoutControl({
FILE: packages/layout-core/src/useLayoutFactory.ts
type GraphologyLayout (line 8) | interface GraphologyLayout<T> {
type LayoutHook (line 16) | type LayoutHook = {
function useLayoutFactory (line 30) | function useLayoutFactory<T>(layout: GraphologyLayout<T>, parameter: T):...
FILE: packages/layout-core/src/useWorkerLayoutFactory.ts
type LayoutWorkerHook (line 5) | type LayoutWorkerHook = {
type GraphologyWorkerLayout (line 12) | interface GraphologyWorkerLayout {
type GraphologyWorkerLayoutConstructor (line 18) | interface GraphologyWorkerLayoutConstructor<T> {
function useWorkerLayoutFactory (line 22) | function useWorkerLayoutFactory<T>(
FILE: packages/layout-force/src/LayoutForceControl.tsx
type LayoutForceControlProps (line 10) | type LayoutForceControlProps = Omit<WorkerLayoutControlProps, 'layout' |...
FILE: packages/layout-force/src/useLayoutForce.ts
function useLayoutForce (line 12) | function useLayoutForce(
FILE: packages/layout-force/src/useWorkerLayoutForce.ts
function useWorkerLayoutForce (line 12) | function useWorkerLayoutForce(options: ForceLayoutSupervisorParameters =...
FILE: packages/layout-forceatlas2/src/LayoutForceAtlas2Control.tsx
type LayoutForceAtlas2ControlProps (line 10) | type LayoutForceAtlas2ControlProps = Omit<WorkerLayoutControlProps, 'lay...
FILE: packages/layout-forceatlas2/src/useLayoutForceAtlas2.ts
function useLayoutForceAtlas2 (line 12) | function useLayoutForceAtlas2(
FILE: packages/layout-forceatlas2/src/useWorkerLayoutForceAtlas2.ts
function useWorkerLayoutForceAtlas2 (line 13) | function useWorkerLayoutForceAtlas2(options: ForceAtlas2LayoutParameters...
FILE: packages/layout-noverlap/src/LayoutNoverlapControl.tsx
type LayoutNoverlapControlProps (line 10) | type LayoutNoverlapControlProps = Omit<WorkerLayoutControlProps, 'layout...
FILE: packages/layout-noverlap/src/useLayoutNoverlap.ts
function useLayoutNoverlap (line 12) | function useLayoutNoverlap(options: NoverlapLayoutParameters = {}) {
FILE: packages/layout-noverlap/src/useWorkerLayoutNoverlap.ts
function useWorkerLayoutNoverlap (line 12) | function useWorkerLayoutNoverlap(options: NoverlapLayoutSupervisorParame...
FILE: packages/layout-random/src/useLayoutRandom.ts
function useLayoutRandom (line 12) | function useLayoutRandom(options: RandomLayoutOptions = {}) {
FILE: packages/minimap/src/Minimap.tsx
type MiniMapProps (line 5) | interface MiniMapProps {
function fnUpdateViewbox (line 73) | function fnUpdateViewbox() {
FILE: packages/storybook/.storybook/main.ts
method viteFinal (line 22) | async viteFinal(config) {
FILE: packages/storybook/e2e/screenshots.spec.ts
constant TESTS (line 3) | const TESTS: Array<{ id: string; play?: (page: Page) => Promise<void> }>...
function getTestUrl (line 22) | function getTestUrl(id: string): string {
FILE: packages/storybook/stories/Complete.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Complete>;
FILE: packages/storybook/stories/CustomRender.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof CustomRender>;
FILE: packages/storybook/stories/Demo.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Demo>;
FILE: packages/storybook/stories/DragNdrop.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof DragNdrop>;
FILE: packages/storybook/stories/EdgeCurve.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof MultiDirectedGraph>;
FILE: packages/storybook/stories/Events.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Events>;
FILE: packages/storybook/stories/External.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof External>;
FILE: packages/storybook/stories/External.tsx
type NodeType (line 6) | type NodeType = { x: number; y: number; label: string; size: number };
type EdgeType (line 7) | type EdgeType = { label: string };
FILE: packages/storybook/stories/GraphSearch.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof GraphSearchDemo>;
FILE: packages/storybook/stories/LayoutCircular.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof LayoutCircular>;
FILE: packages/storybook/stories/LayoutFA2.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof LayoutFA2>;
FILE: packages/storybook/stories/LayoutFA2Control.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof LayoutFA2Control>;
FILE: packages/storybook/stories/Lifecycle.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Lifecycle>;
FILE: packages/storybook/stories/LoadGraphWithHook.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof LoadGraphWithHook>;
FILE: packages/storybook/stories/LoadGraphWithProp.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof LoadGraphWithProp>;
FILE: packages/storybook/stories/Minimap.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof MinimapDemo>;
FILE: packages/storybook/stories/MultiDirectedGraph.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof MultiDirectedGraph>;
FILE: packages/storybook/stories/MultiDirectedGraph.tsx
type NodeType (line 10) | interface NodeType {
type EdgeType (line 17) | interface EdgeType {
FILE: packages/storybook/stories/Multiple.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Multiple>;
FILE: packages/storybook/stories/NodeBorder.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof NodeBorder>;
FILE: packages/storybook/stories/NodeImage.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof NodeImage>;
FILE: packages/storybook/stories/UpdateGraphReference.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof UpdatedGraphReference>;
FILE: packages/storybook/stories/common/LayoutsControl.tsx
type LayoutName (line 13) | type LayoutName = 'circular' | 'circlepack' | 'random' | 'noverlaps' | '...
FILE: packages/storybook/stories/common/useRandom.tsx
type NodeType (line 7) | type NodeType = { x: number; y: number; label: string; size: number; col...
type EdgeType (line 8) | type EdgeType = { label: string };
FILE: packages/website/docusaurus.config.ts
method configureWebpack (line 259) | configureWebpack(_config, _isServer, _utils) {
FILE: packages/website/src/components/CodePreview.tsx
type CodePreviewProps (line 5) | interface CodePreviewProps {
FILE: packages/website/src/components/HomepageFeatures.tsx
type FeatureItem (line 7) | type FeatureItem = {
function Feature (line 31) | function Feature({ title, image, description }: FeatureItem) {
function HomepageFeatures (line 45) | function HomepageFeatures(): JSX.Element {
FILE: packages/website/src/pages/index.tsx
function HomepageHeader (line 14) | function HomepageHeader() {
function Home (line 32) | function Home(): JSX.Element {
FILE: rollup.base.mjs
function getRollupConfig (line 8) | function getRollupConfig(packageName) {
Condensed preview — 190 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,372K chars).
[
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ni"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 1531,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"\"\nlabels: bug\nassignees: \"\"\n---\n\n## Guidelines\n\nP"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 900,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: \"\"\nlabels: enhancement\nassignees: \"\"\n---\n\n## Gu"
},
{
"path": ".github/stale.yml",
"chars": 700,
"preview": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 30\n# Number of days of inactivity before a "
},
{
"path": ".github/workflows/test.yml",
"chars": 1709,
"preview": "name: Test\n\non:\n push:\n paths:\n - \"packages/**\"\n - \".github/workflows/test.yml\"\n pull_request:\n paths:"
},
{
"path": ".github/workflows/website.yml",
"chars": 1035,
"preview": "name: deploy-website\non:\n push:\n branches:\n - main\n\njobs:\n deploy-website:\n runs-on: ubuntu-latest\n\n ste"
},
{
"path": ".gitignore",
"chars": 147,
"preview": "node_modules/\nlib/\nbuild/\ndist/\n*.current.png\n*.diff.png\ntsconfig.tsbuildinfo\npackages/website/docs/api\n.docusaurus\n.rol"
},
{
"path": ".npmignore",
"chars": 254,
"preview": "*.tgz\n*.log\n*.swp\n.DS_Store\n\n.github\nnode_modules\ndocs\nexamples\ndemo\ndist\ntest\n.editorconfig\n.eslintignore\n.eslintrc\n.gi"
},
{
"path": "CHANGELOG.md",
"chars": 6215,
"preview": "# Changelog\n\n## Version 5.0.6\n\n### Fixes\n\n- Fix `sigma` killing process when `SigmaContainer` is unmount.\n\n## Version 5."
},
{
"path": "CONTRIBUTING.md",
"chars": 1361,
"preview": "# Contributing to this repository <!-- omit in toc -->\n\n## Getting started <!-- omit in toc -->\n\n### Don't see your issu"
},
{
"path": "LICENSE.md",
"chars": 1090,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2024 The react-sigma Authors\n\nPermission is hereby granted, free of charge, to any "
},
{
"path": "README.md",
"chars": 703,
"preview": "# React Sigma\n\nA set of react components to display graphs with Sigma v3.\n\n## Documentation\n\n- [Getting started](https:/"
},
{
"path": "eslint.config.mjs",
"chars": 747,
"preview": "import js from '@eslint/js';\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport globals from 'globals';\nimport t"
},
{
"path": "lerna.json",
"chars": 74,
"preview": "{\n \"version\": \"5.0.6\",\n \"private\": true,\n \"packages\": [\"packages/*\"]\n}\n"
},
{
"path": "package.json",
"chars": 2922,
"preview": "{\n \"name\": \"@react-sigma/root\",\n \"version\": \"5.0.0\",\n \"description\": \"React Sigma\",\n \"keywords\": [\n \"sigma\",\n "
},
{
"path": "packages/core/README.md",
"chars": 1186,
"preview": "# React Sigma - core module\n\nA set of react components to display graphs with Sigma.js.\n\nVisit our website for docs and "
},
{
"path": "packages/core/package.json",
"chars": 1321,
"preview": "{\n \"name\": \"@react-sigma/core\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma\",\n \"author\": \"Benoit Simard\",\n \"l"
},
{
"path": "packages/core/rollup.config.mjs",
"chars": 94,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('core');\n"
},
{
"path": "packages/core/src/assets/index.css",
"chars": 2792,
"preview": ":root {\n --sigma-background-color: #fff;\n --sigma-controls-background-color: #fff;\n --sigma-controls-background-color"
},
{
"path": "packages/core/src/components/SigmaContainer.tsx",
"chars": 4593,
"preview": "import Graph from 'graphology';\nimport { Attributes } from 'graphology-types';\nimport React, {\n CSSProperties,\n PropsW"
},
{
"path": "packages/core/src/components/controls/ControlsContainer.tsx",
"chars": 1296,
"preview": "import React, { CSSProperties, ReactNode } from 'react';\n\n/**\n * Properties for `ControlsContainer` component.\n */\nexpor"
},
{
"path": "packages/core/src/components/controls/FullScreenControl.tsx",
"chars": 2511,
"preview": "import React, { CSSProperties, RefObject } from 'react';\n\nimport { ReactComponent as ExitIcon } from '../../assets/icons"
},
{
"path": "packages/core/src/components/controls/ZoomControl.tsx",
"chars": 2791,
"preview": "import React, { CSSProperties } from 'react';\n\nimport { ReactComponent as ZoomResetIcon } from '../../assets/icons/dot-c"
},
{
"path": "packages/core/src/hooks/context.ts",
"chars": 1221,
"preview": "import { Attributes } from 'graphology-types';\nimport { createContext, useContext } from 'react';\nimport Sigma from 'sig"
},
{
"path": "packages/core/src/hooks/useCamera.ts",
"chars": 2316,
"preview": "import { useCallback, useEffect, useState } from 'react';\nimport { CameraState } from 'sigma/types';\nimport { AnimateOpt"
},
{
"path": "packages/core/src/hooks/useFullScreen.ts",
"chars": 1291,
"preview": "import { useCallback, useEffect, useState } from 'react';\n\nimport { useSigmaContext } from './context';\n\nfunction toggle"
},
{
"path": "packages/core/src/hooks/useLoadGraph.ts",
"chars": 1083,
"preview": "import Graph from 'graphology';\nimport { Attributes } from 'graphology-types';\nimport { useCallback } from 'react';\n\nimp"
},
{
"path": "packages/core/src/hooks/useRegisterEvents.ts",
"chars": 4243,
"preview": "import { Attributes } from 'graphology-types';\nimport { useEffect, useState } from 'react';\nimport { CameraEvents, Mouse"
},
{
"path": "packages/core/src/hooks/useSetSettings.ts",
"chars": 1150,
"preview": "import { Attributes } from 'graphology-types';\nimport { useCallback } from 'react';\nimport { Settings } from 'sigma/sett"
},
{
"path": "packages/core/src/hooks/useSigma.ts",
"chars": 471,
"preview": "import { Attributes } from 'graphology-types';\nimport Sigma from 'sigma';\n\nimport { useSigmaContext } from './context';\n"
},
{
"path": "packages/core/src/index.ts",
"chars": 681,
"preview": "/**\n * Main React Sigma module that contains all the standard components & hooks to display a graph in react.\n *\n * @mo"
},
{
"path": "packages/core/src/svg.d.ts",
"chars": 177,
"preview": "declare module '*.svg' {\n import React = require('react');\n export const ReactComponent: React.FC<React.SVGProps<SVGSV"
},
{
"path": "packages/core/src/types.ts",
"chars": 710,
"preview": "import AbstractGraph, { Attributes, GraphOptions } from 'graphology-types';\nimport { CameraEvents, MouseCaptorEvents, Si"
},
{
"path": "packages/core/src/utils.ts",
"chars": 1226,
"preview": "/**\n * Deeply check if two objects are equals or not.\n *\n * @category Utils\n */\nexport function isEqual(x: unknown, y: u"
},
{
"path": "packages/core/tsconfig.json",
"chars": 222,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/graph-search/README.md",
"chars": 450,
"preview": "# React Sigma - Graph Search\n\n`graph-search` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)\n"
},
{
"path": "packages/graph-search/package.json",
"chars": 1408,
"preview": "{\n \"name\": \"@react-sigma/graph-search\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Graph Search\",\n \"author\""
},
{
"path": "packages/graph-search/rollup.config.mjs",
"chars": 102,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('graph-search');\n"
},
{
"path": "packages/graph-search/src/Edge.tsx",
"chars": 2336,
"preview": "import { useSigma } from '@react-sigma/core';\nimport React, { FC, ReactNode, useMemo } from 'react';\n\nimport { Node, Nod"
},
{
"path": "packages/graph-search/src/GraphSearch.tsx",
"chars": 619,
"preview": "import React, { FC } from 'react';\n\nimport { GraphSearchInput, GraphSearchInputProps } from './GraphSearchInput';\nimport"
},
{
"path": "packages/graph-search/src/GraphSearchInput.tsx",
"chars": 5534,
"preview": "import { debounce } from '@react-sigma/core';\nimport React, { CSSProperties, FC, ReactNode, useCallback, useEffect, useM"
},
{
"path": "packages/graph-search/src/Node.tsx",
"chars": 1309,
"preview": "import { useSigma } from '@react-sigma/core';\nimport React, { FC, ReactNode, useMemo } from 'react';\n\nimport { Labels } "
},
{
"path": "packages/graph-search/src/assets/index.css",
"chars": 2303,
"preview": ":root {\n --sigma-grey-color: #ccc;\n}\n\n.react-sigma .option.hoverable {\n cursor: pointer !important;\n}\n\n.react-sigma .t"
},
{
"path": "packages/graph-search/src/context.tsx",
"chars": 4306,
"preview": "import { useSigma } from '@react-sigma/core';\nimport { Attributes } from 'graphology-types';\nimport MiniSearch, { Option"
},
{
"path": "packages/graph-search/src/index.ts",
"chars": 231,
"preview": "import './assets/index.css';\n\nexport * from './context';\nexport * from './useGraphSearch';\nexport * from './GraphSearchI"
},
{
"path": "packages/graph-search/src/svg.d.ts",
"chars": 177,
"preview": "declare module '*.svg' {\n import React = require('react');\n export const ReactComponent: React.FC<React.SVGProps<SVGSV"
},
{
"path": "packages/graph-search/src/types.ts",
"chars": 587,
"preview": "import { ReactNode } from 'react';\n\nexport type ItemType = 'nodes' | 'edges';\n\nexport type Document = { itemId: string; "
},
{
"path": "packages/graph-search/src/useGraphSearch.tsx",
"chars": 1171,
"preview": "import { SearchOptions } from 'minisearch';\nimport { useCallback, useContext } from 'react';\n\nimport { GraphSearchContex"
},
{
"path": "packages/graph-search/src/utils.tsx",
"chars": 1113,
"preview": "import Sigma from 'sigma';\n\nimport { Document } from './types';\n\n/**\n * Cast a node to a document to index.\n *\n * @categ"
},
{
"path": "packages/graph-search/tsconfig.json",
"chars": 281,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\", \"src/context.tsx\", \"src/ut"
},
{
"path": "packages/layout-circlepack/README.md",
"chars": 459,
"preview": "# React Sigma - layout-ciclepack\n\n`layout-circlepack` module for [@react-sigma](https://www.npmjs.com/package/@react-sig"
},
{
"path": "packages/layout-circlepack/package.json",
"chars": 1290,
"preview": "{\n \"name\": \"@react-sigma/layout-circlepack\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Layout circlepack\",\n"
},
{
"path": "packages/layout-circlepack/rollup.config.mjs",
"chars": 107,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('layout-circlepack');\n"
},
{
"path": "packages/layout-circlepack/src/index.ts",
"chars": 106,
"preview": "/**\n * React Sigma module for layout circlepack.\n *\n * @module\n */\nexport * from './useLayoutCirclepack';\n"
},
{
"path": "packages/layout-circlepack/src/useLayoutCirclepack.ts",
"chars": 541,
"preview": "import { useLayoutFactory } from '@react-sigma/layout-core';\nimport circlepack, { CirclePackLayoutOptions } from 'grapho"
},
{
"path": "packages/layout-circlepack/tsconfig.json",
"chars": 245,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/layout-circular/README.md",
"chars": 454,
"preview": "# React Sigma - layout-circular\n\n`layout-circular` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/"
},
{
"path": "packages/layout-circular/package.json",
"chars": 1265,
"preview": "{\n \"name\": \"@react-sigma/layout-circular\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Layout circular\",\n \"a"
},
{
"path": "packages/layout-circular/rollup.config.mjs",
"chars": 106,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('layout-circular');\n\n"
},
{
"path": "packages/layout-circular/src/index.ts",
"chars": 37,
"preview": "export * from './useLayoutCircular';\n"
},
{
"path": "packages/layout-circular/src/useLayoutCircular.ts",
"chars": 517,
"preview": "import { useLayoutFactory } from '@react-sigma/layout-core';\nimport circular, { CircularLayoutOptions } from 'graphology"
},
{
"path": "packages/layout-circular/tsconfig.json",
"chars": 245,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/layout-core/README.md",
"chars": 442,
"preview": "# React Sigma - layout-core\n\n`layout-core` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)\n\nV"
},
{
"path": "packages/layout-core/package.json",
"chars": 1230,
"preview": "{\n \"name\": \"@react-sigma/layout-core\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Layout core\",\n \"author\": "
},
{
"path": "packages/layout-core/rollup.config.mjs",
"chars": 102,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('layout-core');\n\n"
},
{
"path": "packages/layout-core/src/WorkerLayoutControl.tsx",
"chars": 3116,
"preview": "import { useSigma } from '@react-sigma/core';\nimport React, { CSSProperties, useEffect } from 'react';\n\nimport { ReactCo"
},
{
"path": "packages/layout-core/src/index.ts",
"chars": 252,
"preview": "/**\n * React Sigma core module for layouts.\n * It contains all the standard components & hooks for managing layout.\n *\n "
},
{
"path": "packages/layout-core/src/svg.d.ts",
"chars": 177,
"preview": "declare module '*.svg' {\n import React = require('react');\n export const ReactComponent: React.FC<React.SVGProps<SVGSV"
},
{
"path": "packages/layout-core/src/useLayoutFactory.ts",
"chars": 1308,
"preview": "import { isEqual, useSigma } from '@react-sigma/core';\nimport Graph from 'graphology';\nimport { useCallback, useRef } fr"
},
{
"path": "packages/layout-core/src/useWorkerLayoutFactory.ts",
"chars": 1709,
"preview": "import { isEqual, useSigma } from '@react-sigma/core';\nimport Graph from 'graphology';\nimport { useCallback, useEffect, "
},
{
"path": "packages/layout-core/tsconfig.json",
"chars": 245,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/layout-force/README.md",
"chars": 445,
"preview": "# React Sigma - layout-force\n\n`layout-force` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)\n"
},
{
"path": "packages/layout-force/package.json",
"chars": 1266,
"preview": "{\n \"name\": \"@react-sigma/layout-force\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Layout force directed\",\n "
},
{
"path": "packages/layout-force/rollup.config.mjs",
"chars": 102,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('layout-force');\n"
},
{
"path": "packages/layout-force/src/LayoutForceControl.tsx",
"chars": 946,
"preview": "import { WorkerLayoutControl, WorkerLayoutControlProps } from '@react-sigma/layout-core';\nimport { ForceLayoutSupervisor"
},
{
"path": "packages/layout-force/src/index.ts",
"chars": 112,
"preview": "export * from './useLayoutForce';\nexport * from './useWorkerLayoutForce';\nexport * from './LayoutForceControl';\n"
},
{
"path": "packages/layout-force/src/useLayoutForce.ts",
"chars": 530,
"preview": "import { useLayoutFactory } from '@react-sigma/layout-core';\nimport force, { ForceLayoutParameters } from 'graphology-la"
},
{
"path": "packages/layout-force/src/useWorkerLayoutForce.ts",
"chars": 583,
"preview": "import { useWorkerLayoutFactory } from '@react-sigma/layout-core';\nimport ForceSupervisor, { ForceLayoutSupervisorParame"
},
{
"path": "packages/layout-force/tsconfig.json",
"chars": 245,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/layout-forceatlas2/README.md",
"chars": 463,
"preview": "# React Sigma - layout-forceatlas2\n\n`layout-forceatlas2` module for [@react-sigma](https://www.npmjs.com/package/@react-"
},
{
"path": "packages/layout-forceatlas2/package.json",
"chars": 1296,
"preview": "{\n \"name\": \"@react-sigma/layout-forceatlas2\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Layout Force Atlas "
},
{
"path": "packages/layout-forceatlas2/rollup.config.mjs",
"chars": 108,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('layout-forceatlas2');\n"
},
{
"path": "packages/layout-forceatlas2/src/LayoutForceAtlas2Control.tsx",
"chars": 913,
"preview": "import { WorkerLayoutControl, WorkerLayoutControlProps } from '@react-sigma/layout-core';\nimport { ForceAtlas2LayoutPara"
},
{
"path": "packages/layout-forceatlas2/src/index.ts",
"chars": 130,
"preview": "export * from './useLayoutForceAtlas2';\nexport * from './useWorkerLayoutForceAtlas2';\nexport * from './LayoutForceAtlas2"
},
{
"path": "packages/layout-forceatlas2/src/useLayoutForceAtlas2.ts",
"chars": 621,
"preview": "import { useLayoutFactory } from '@react-sigma/layout-core';\nimport forceAtlas2, { ForceAtlas2SynchronousLayoutParameter"
},
{
"path": "packages/layout-forceatlas2/src/useWorkerLayoutForceAtlas2.ts",
"chars": 634,
"preview": "import { useWorkerLayoutFactory } from '@react-sigma/layout-core';\nimport { ForceAtlas2LayoutParameters } from 'grapholo"
},
{
"path": "packages/layout-forceatlas2/tsconfig.json",
"chars": 245,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/layout-noverlap/README.md",
"chars": 454,
"preview": "# React Sigma - layout-noverlap\n\n`layout-noverlap` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/"
},
{
"path": "packages/layout-noverlap/package.json",
"chars": 1275,
"preview": "{\n \"name\": \"@react-sigma/layout-noverlap\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Layout noverlap\",\n \"a"
},
{
"path": "packages/layout-noverlap/rollup.config.mjs",
"chars": 105,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('layout-noverlap');\n"
},
{
"path": "packages/layout-noverlap/src/LayoutNoverlapControl.tsx",
"chars": 904,
"preview": "import { WorkerLayoutControl, WorkerLayoutControlProps } from '@react-sigma/layout-core';\nimport { NoverlapLayoutSupervi"
},
{
"path": "packages/layout-noverlap/src/index.ts",
"chars": 121,
"preview": "export * from './useLayoutNoverlap';\nexport * from './useWorkerLayoutNoverlap';\nexport * from './LayoutNoverlapControl';"
},
{
"path": "packages/layout-noverlap/src/useLayoutNoverlap.ts",
"chars": 528,
"preview": "import { useLayoutFactory } from '@react-sigma/layout-core';\nimport noverlap, { NoverlapLayoutParameters } from 'graphol"
},
{
"path": "packages/layout-noverlap/src/useWorkerLayoutNoverlap.ts",
"chars": 618,
"preview": "import { useWorkerLayoutFactory } from '@react-sigma/layout-core';\nimport NoverlapLayout, { NoverlapLayoutSupervisorPara"
},
{
"path": "packages/layout-noverlap/tsconfig.json",
"chars": 245,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/layout-random/README.md",
"chars": 448,
"preview": "# React Sigma - layout-random\n\n`layout-random` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core"
},
{
"path": "packages/layout-random/package.json",
"chars": 1256,
"preview": "{\n \"name\": \"@react-sigma/layout-random\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Layout random\",\n \"autho"
},
{
"path": "packages/layout-random/rollup.config.mjs",
"chars": 103,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('layout-random');\n"
},
{
"path": "packages/layout-random/src/index.ts",
"chars": 35,
"preview": "export * from './useLayoutRandom';\n"
},
{
"path": "packages/layout-random/src/useLayoutRandom.ts",
"chars": 499,
"preview": "import { useLayoutFactory } from '@react-sigma/layout-core';\nimport random, { RandomLayoutOptions } from 'graphology-lay"
},
{
"path": "packages/layout-random/tsconfig.json",
"chars": 245,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\"],\n \"composite\":true,\n \"co"
},
{
"path": "packages/minimap/README.md",
"chars": 440,
"preview": "# React Sigma - Minimap\n\n`minimap` module for [@react-sigma](https://www.npmjs.com/package/@react-sigma/core)\n\nVisit our"
},
{
"path": "packages/minimap/package.json",
"chars": 1212,
"preview": "{\n \"name\": \"@react-sigma/minimap\",\n \"version\": \"5.0.6\",\n \"description\": \"React Sigma - Minimap\",\n \"author\": \"Benoit "
},
{
"path": "packages/minimap/rollup.config.mjs",
"chars": 97,
"preview": "import getRollupConfig from '../../rollup.base.mjs';\n\nexport default getRollupConfig('minimap');\n"
},
{
"path": "packages/minimap/src/Minimap.tsx",
"chars": 3634,
"preview": "import { SigmaContainer, debounce, useSigma } from '@react-sigma/core';\nimport React, { FC, useCallback, useEffect, useS"
},
{
"path": "packages/minimap/src/index.ts",
"chars": 27,
"preview": "export * from './Minimap';\n"
},
{
"path": "packages/minimap/tsconfig.json",
"chars": 281,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compileOnSave\": true,\n \"include\": [\"./src/**/*.ts\", \"src/context.tsx\", \"src/ut"
},
{
"path": "packages/storybook/.gitignore",
"chars": 83,
"preview": "node_modules/\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n"
},
{
"path": "packages/storybook/.storybook/main.ts",
"chars": 792,
"preview": "import type { StorybookConfig } from \"@storybook/react-vite\";\nimport { mergeConfig } from \"vite\";\n\n/** @type { import('@"
},
{
"path": "packages/storybook/.storybook/preview.ts",
"chars": 308,
"preview": "import type { Preview } from \"@storybook/react\";\n\nimport \"./style.css\";\n\nconst preview: Preview = {\n parameters: {\n "
},
{
"path": "packages/storybook/.storybook/style.css",
"chars": 87,
"preview": ".sb-show-main.sb-main-padded {\n padding:0;\n}\n#storybook-root {\n height: 100vh;\n}\n"
},
{
"path": "packages/storybook/e2e/screenshots.spec.ts",
"chars": 969,
"preview": "import { Page, expect, test } from '@playwright/test';\n\nconst TESTS: Array<{ id: string; play?: (page: Page) => Promise<"
},
{
"path": "packages/storybook/package.json",
"chars": 734,
"preview": "{\n \"name\": \"@react-sigma/storybook\",\n \"version\": \"5.0.6\",\n \"private\": true,\n \"scripts\": {\n \"clean\": \"rimraf story"
},
{
"path": "packages/storybook/playwright.config.ts",
"chars": 1446,
"preview": "import { defineConfig, devices } from \"@playwright/test\";\n\n/**\n * Read environment variables from file.\n * https://githu"
},
{
"path": "packages/storybook/public/react-sigma/demo/dataset.json",
"chars": 1384824,
"preview": "{\"attributes\":{},\"nodes\":[{\"key\":\"cytoscape\",\"attributes\":{\"key\":\"cytoscape\",\"label\":\"Cytoscape\",\"tag\":\"Tool\",\"URL\":\"htt"
},
{
"path": "packages/storybook/stories/Complete.stories.tsx",
"chars": 461,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Complete } from './Complete';\nimport source from './Co"
},
{
"path": "packages/storybook/stories/Complete.tsx",
"chars": 2300,
"preview": "import { ControlsContainer, FullScreenControl, SigmaContainer, ZoomControl } from '@react-sigma/core';\nimport '@react-si"
},
{
"path": "packages/storybook/stories/CustomRender.stories.tsx",
"chars": 527,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { CustomRender } from './CustomRender';\nimport source fr"
},
{
"path": "packages/storybook/stories/CustomRender.tsx",
"chars": 1704,
"preview": "import { ControlsContainer, FullScreenControl, SigmaContainer, ZoomControl } from '@react-sigma/core';\nimport '@react-si"
},
{
"path": "packages/storybook/stories/Demo.stories.tsx",
"chars": 399,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Demo } from './Demo';\nimport source from './Demo?raw';"
},
{
"path": "packages/storybook/stories/Demo.tsx",
"chars": 2853,
"preview": "import { ControlsContainer, FullScreenControl, SigmaContainer, ZoomControl } from '@react-sigma/core';\nimport '@react-si"
},
{
"path": "packages/storybook/stories/DragNdrop.stories.tsx",
"chars": 459,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { DragNdrop } from './DragNdrop';\nimport source from './"
},
{
"path": "packages/storybook/stories/DragNdrop.tsx",
"chars": 2103,
"preview": "import {\n ControlsContainer,\n FullScreenControl,\n SigmaContainer,\n ZoomControl,\n useRegisterEvents,\n useSigma,\n} f"
},
{
"path": "packages/storybook/stories/EdgeCurve.stories.tsx",
"chars": 511,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { MultiDirectedGraph } from './MultiDirectedGraph';\nimpo"
},
{
"path": "packages/storybook/stories/Events.stories.tsx",
"chars": 456,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Events } from './Events';\nimport source from './Events"
},
{
"path": "packages/storybook/stories/Events.tsx",
"chars": 3859,
"preview": "import { SigmaContainer, useRegisterEvents } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport "
},
{
"path": "packages/storybook/stories/External.stories.tsx",
"chars": 474,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { External } from './External';\nimport source from './Ex"
},
{
"path": "packages/storybook/stories/External.tsx",
"chars": 989,
"preview": "import { SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport { CSSProperties, FC"
},
{
"path": "packages/storybook/stories/GraphSearch.stories.tsx",
"chars": 482,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { GraphSearchDemo } from './GraphSearch';\nimport source "
},
{
"path": "packages/storybook/stories/GraphSearch.tsx",
"chars": 2955,
"preview": "import { ControlsContainer, FullScreenControl, SigmaContainer, ZoomControl } from '@react-sigma/core';\nimport '@react-si"
},
{
"path": "packages/storybook/stories/LayoutCircular.stories.tsx",
"chars": 485,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { LayoutCircular } from './LayoutCircular';\nimport sourc"
},
{
"path": "packages/storybook/stories/LayoutCircular.tsx",
"chars": 1683,
"preview": "import { SigmaContainer, useLoadGraph } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport { use"
},
{
"path": "packages/storybook/stories/LayoutFA2.stories.tsx",
"chars": 459,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { LayoutFA2 } from './LayoutFA2';\nimport source from './"
},
{
"path": "packages/storybook/stories/LayoutFA2.tsx",
"chars": 777,
"preview": "import { SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport { useWorkerLayoutFo"
},
{
"path": "packages/storybook/stories/LayoutFA2Control.stories.tsx",
"chars": 522,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { LayoutFA2Control } from './LayoutFA2Control';\nimport s"
},
{
"path": "packages/storybook/stories/LayoutFA2Control.tsx",
"chars": 706,
"preview": "import { ControlsContainer, SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport "
},
{
"path": "packages/storybook/stories/Lifecycle.stories.tsx",
"chars": 444,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Lifecycle } from './Lifecycle';\nimport source from './"
},
{
"path": "packages/storybook/stories/Lifecycle.tsx",
"chars": 793,
"preview": "import { SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport type Graph from 'gr"
},
{
"path": "packages/storybook/stories/LoadGraphWithHook.stories.tsx",
"chars": 522,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { LoadGraphWithHook } from './LoadGraphWithHook';\nimport"
},
{
"path": "packages/storybook/stories/LoadGraphWithHook.tsx",
"chars": 799,
"preview": "import { SigmaContainer, useLoadGraph } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport { Mul"
},
{
"path": "packages/storybook/stories/LoadGraphWithProp.stories.tsx",
"chars": 556,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { LoadGraphWithProp } from './LoadGraphWithProp';\nimport"
},
{
"path": "packages/storybook/stories/LoadGraphWithProp.tsx",
"chars": 642,
"preview": "import { SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport { MultiDirectedGrap"
},
{
"path": "packages/storybook/stories/Minimap.stories.tsx",
"chars": 441,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { MinimapDemo } from './Minimap';\nimport source from './"
},
{
"path": "packages/storybook/stories/Minimap.tsx",
"chars": 1359,
"preview": "import { ControlsContainer, FullScreenControl, SigmaContainer, ZoomControl } from '@react-sigma/core';\nimport '@react-si"
},
{
"path": "packages/storybook/stories/MultiDirectedGraph.stories.tsx",
"chars": 536,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { MultiDirectedGraph } from './MultiDirectedGraph';\nimpo"
},
{
"path": "packages/storybook/stories/MultiDirectedGraph.tsx",
"chars": 4979,
"preview": "import { SigmaContainer, useLoadGraph } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport EdgeC"
},
{
"path": "packages/storybook/stories/Multiple.stories.tsx",
"chars": 468,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Multiple } from './Multiple';\nimport source from './Mu"
},
{
"path": "packages/storybook/stories/Multiple.tsx",
"chars": 2343,
"preview": "import { ControlsContainer, FullScreenControl, SigmaContainer, ZoomControl } from '@react-sigma/core';\nimport '@react-si"
},
{
"path": "packages/storybook/stories/NodeBorder.stories.tsx",
"chars": 458,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { NodeBorder } from './NodeBorder';\nimport source from '"
},
{
"path": "packages/storybook/stories/NodeBorder.tsx",
"chars": 1375,
"preview": "import { ControlsContainer, SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport "
},
{
"path": "packages/storybook/stories/NodeImage.stories.tsx",
"chars": 450,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { NodeImage } from './NodeImage';\nimport source from './"
},
{
"path": "packages/storybook/stories/NodeImage.tsx",
"chars": 1152,
"preview": "import { ControlsContainer, SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport "
},
{
"path": "packages/storybook/stories/UpdateGraphReference.stories.tsx",
"chars": 553,
"preview": "import type { Meta, StoryObj } from '@storybook/react';\n\nimport { UpdatedGraphReference } from './UpdateGraphReference';"
},
{
"path": "packages/storybook/stories/UpdateGraphReference.tsx",
"chars": 677,
"preview": "import { SigmaContainer } from '@react-sigma/core';\nimport '@react-sigma/core/lib/style.css';\nimport { CSSProperties, FC"
},
{
"path": "packages/storybook/stories/common/FocusOnNode.tsx",
"chars": 682,
"preview": "import { useCamera, useSigma } from '@react-sigma/core';\nimport { FC, useEffect } from 'react';\n\nexport const FocusOnNod"
},
{
"path": "packages/storybook/stories/common/LayoutsControl.tsx",
"chars": 4039,
"preview": "import { useSigma } from '@react-sigma/core';\nimport { useLayoutCirclepack } from '@react-sigma/layout-circlepack';\nimpo"
},
{
"path": "packages/storybook/stories/common/SampleGraph.tsx",
"chars": 2191,
"preview": "import { useLoadGraph, useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core';\nimport { useLayoutCircula"
},
{
"path": "packages/storybook/stories/common/useRandom.tsx",
"chars": 2337,
"preview": "import { Faker, en, faker as fak } from '@faker-js/faker';\nimport Graph, { UndirectedGraph } from 'graphology';\nimport e"
},
{
"path": "packages/storybook/tsconfig.json",
"chars": 274,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"include\": [\"types.d.ts\", \".storybook/*.tsx\", \"./stories/**/*\"],\n \"composite\":t"
},
{
"path": "packages/storybook/types.d.ts",
"chars": 78,
"preview": "declare module \"*?raw\" {\n const content: string;\n export default content;\n}\n"
},
{
"path": "packages/website/babel.config.js",
"chars": 207,
"preview": "module.exports = {\n presets: [require.resolve(\"@docusaurus/core/lib/babel/preset\")],\n plugins: [\n [\n \"@babel/p"
},
{
"path": "packages/website/docs/api.md",
"chars": 2993,
"preview": "# Project structure\n\nReact Sigma is composed of one core module, and several others for managing graph layouts.\n\n## Core"
},
{
"path": "packages/website/docs/changelog.mdx",
"chars": 88,
"preview": "---\nhide_title: true\n---\n\nimport Changelog from \"../../../CHANGELOG.md\";\n\n<Changelog />\n"
},
{
"path": "packages/website/docs/example/01_load-graph.mdx",
"chars": 1981,
"preview": "import BrowserOnly from \"@docusaurus/BrowserOnly\";\nimport { CodePreview } from \"@site/src/components/CodePreview\";\n\nimpo"
},
{
"path": "packages/website/docs/example/02_events.mdx",
"chars": 840,
"preview": "import EventsSource from '!!raw-loader!../../../storybook/stories/Events';\nimport { CodePreview } from '@site/src/compon"
},
{
"path": "packages/website/docs/example/03_drag_n_drop.mdx",
"chars": 505,
"preview": "import { CodePreview } from '@site/src/components/CodePreview';\n\nimport DragNdropSource from '!!raw-loader!../../../stor"
},
{
"path": "packages/website/docs/example/04_layouts.mdx",
"chars": 3924,
"preview": "import { CodePreview } from \"@site/src/components/CodePreview\";\n\nimport LayoutCircularSource from \"!!raw-loader!../../.."
},
{
"path": "packages/website/docs/example/05_controls.mdx",
"chars": 2138,
"preview": "import CompleteSource from '!!raw-loader!../../../storybook/stories/Complete';\nimport CustomRenderSource from '!!raw-loa"
},
{
"path": "packages/website/docs/example/06_external_state.mdx",
"chars": 742,
"preview": "import { CodePreview } from '@site/src/components/CodePreview';\n\nimport ExternalStateSource from '!!raw-loader!../../../"
},
{
"path": "packages/website/docs/example/07_graph-search.mdx",
"chars": 2061,
"preview": "import { CodePreview } from '@site/src/components/CodePreview';\n\nimport GraphSearchSource from '!!raw-loader!../../../st"
},
{
"path": "packages/website/docs/example/08_minimap.mdx",
"chars": 700,
"preview": "import { CodePreview } from '@site/src/components/CodePreview';\n\nimport MinimapSource from '!!raw-loader!../../../storyb"
},
{
"path": "packages/website/docs/faq.md",
"chars": 2370,
"preview": "# Frequently Asked Questions\n\n## How I can correct the error `Error: Sigma: container has no height.` ?\n\nThis error come"
},
{
"path": "packages/website/docs/start-installation.md",
"chars": 1047,
"preview": "# Installation\n\n## Prerequisites\n\n### React\n\nThis documentation assumes you are already familiar with [React](https://re"
},
{
"path": "packages/website/docs/start-introduction.md",
"chars": 2313,
"preview": "# Introduction\n\n## Concept\n\nReact Sigma is strongly inspired by [react-leaflet](https://react-leaflet.js.org), even the "
},
{
"path": "packages/website/docs/start-setup.md",
"chars": 3829,
"preview": "# Setup\n\n1. Follow all the steps from the [installation page](start-installation.md)\n2. Import the React Sigma style fil"
},
{
"path": "packages/website/docusaurus.config.ts",
"chars": 6919,
"preview": "import type { Config } from '@docusaurus/types';\nimport { themes } from 'prism-react-renderer';\n\nconst lightCodeTheme = "
},
{
"path": "packages/website/package.json",
"chars": 1727,
"preview": "{\n \"name\": \"@react-sigma/website\",\n \"version\": \"5.0.6\",\n \"private\": true,\n \"scripts\": {\n \"build\": \"docusaurus bui"
},
{
"path": "packages/website/sidebars.js",
"chars": 608,
"preview": "module.exports = {\n docs: [\n { type: \"category\", label: \"Getting started\", items: [\"start-introduction\", \"start-inst"
},
{
"path": "packages/website/src/components/CodePreview.tsx",
"chars": 1282,
"preview": "import BrowserOnly from '@docusaurus/BrowserOnly';\nimport CodeBlock from '@theme/CodeBlock';\nimport React, { FC, useStat"
},
{
"path": "packages/website/src/components/HomepageFeatures.module.css",
"chars": 138,
"preview": ".features {\n display: flex;\n align-items: center;\n padding: 2rem 0;\n width: 100%;\n}\n\n.featureSvg {\n height: 100px;\n"
},
{
"path": "packages/website/src/components/HomepageFeatures.tsx",
"chars": 1365,
"preview": "import useBaseUrl from '@docusaurus/useBaseUrl';\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport styles from"
},
{
"path": "packages/website/src/css/custom.scss",
"chars": 2636,
"preview": "/**\n * Any CSS included here will be global. The classic template\n * bundles Infima by default. Infima is a CSS framewor"
},
{
"path": "packages/website/src/pages/index.module.css",
"chars": 365,
"preview": "/**\n * CSS files with the .module.css suffix will be treated as CSS modules\n * and scoped locally.\n */\n\n.heroBanner {\n "
},
{
"path": "packages/website/src/pages/index.tsx",
"chars": 2026,
"preview": "import DemoGraphSource from '!!raw-loader!../../../storybook/stories/Demo';\nimport Link from '@docusaurus/Link';\nimport "
},
{
"path": "packages/website/static/demo/dataset.json",
"chars": 1384824,
"preview": "{\"attributes\":{},\"nodes\":[{\"key\":\"cytoscape\",\"attributes\":{\"key\":\"cytoscape\",\"label\":\"Cytoscape\",\"tag\":\"Tool\",\"URL\":\"htt"
},
{
"path": "packages/website/tsconfig.json",
"chars": 126,
"preview": "{\n \"extends\": [\"@tsconfig/docusaurus/tsconfig.json\", \"../../tsconfig.json\"],\n \"compilerOptions\": {\n \"baseUrl\": \".\"\n"
},
{
"path": "prettier.config.mjs",
"chars": 413,
"preview": "/** @type {import(\"prettier\").Config} */\nconst config = {\n printWidth: 120,\n singleQuote: true,\n arrowParens: 'always"
},
{
"path": "rollup.base.mjs",
"chars": 1373,
"preview": "import terser from '@rollup/plugin-terser';\nimport typescript from '@rollup/plugin-typescript';\nimport url from '@rollup"
},
{
"path": "tsconfig.base.json",
"chars": 1697,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"allowJs\": false,\n \"allowSyntheticDefaultImports\": true,\n \""
},
{
"path": "tsconfig.json",
"chars": 623,
"preview": "{\n \"extends\": \"./tsconfig.base.json\",\n \"files\": [],\n \"references\": [\n { \"path\": \"./packages/core\" },\n { \"path\":"
}
]
About this extraction
This page contains the full source code of the sim51/react-sigma GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 190 files (2.8 MB), approximately 755.4k tokens, and a symbol index with 109 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.