https://github.com/reactodia/reactodia-workspace
Reactodia Workspace -- library for visual interaction with graph data in a form of a diagram.
https://github.com/reactodia/reactodia-workspace
diagram graph ontodia rdf reactodia sparql typescript
Last synced: 3 months ago
JSON representation
Reactodia Workspace -- library for visual interaction with graph data in a form of a diagram.
- Host: GitHub
- URL: https://github.com/reactodia/reactodia-workspace
- Owner: reactodia
- License: lgpl-2.1
- Created: 2023-11-10T13:02:35.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2026-03-29T16:34:44.000Z (3 months ago)
- Last Synced: 2026-03-29T18:56:09.023Z (3 months ago)
- Topics: diagram, graph, ontodia, rdf, reactodia, sparql, typescript
- Language: TypeScript
- Homepage: https://reactodia.github.io/
- Size: 5.15 MB
- Stars: 21
- Watchers: 4
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Notice: NOTICE.md
Awesome Lists containing this project
README
# Reactodia Workspace [](https://badge.fury.io/js/@reactodia%2Fworkspace)
[Documentation](https://reactodia.github.io/) | [Changelog](https://github.com/reactodia/reactodia-workspace/blob/master/CHANGELOG.md) | [Playground](https://reactodia.github.io/playground/basic)
`@reactodia/workspace` is a TypeScript library that allows to explore, visualize and make changes to the data in the form of an interactive graph based on underlying data sources.
`@reactodia/workspace` is an open-source fork of [Ontodia](https://github.com/metaphacts/ontodia) project.
## Installation
Install with:
```sh
npm install --save @reactodia/workspace
```
## Quick example
```ts
import * as React from 'react';
import * as Reactodia from '@reactodia/workspace';
import * as N3 from 'n3';
const GRAPH_DATA = 'https://reactodia.github.io/resources/orgOntology.ttl';
// Use background Web Worker to compute graph layout
const Layouts = Reactodia.defineLayoutWorker(() => new Worker(
new URL('@reactodia/workspace/layout.worker', import.meta.url)
));
function BasicExample() {
const {defaultLayout} = Reactodia.useWorker(Layouts);
const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
const {model, performLayout} = context;
// Fetch graph data to use as underlying data source
const response = await fetch(GRAPH_DATA, {signal});
const graphData = new N3.Parser().parse(await response.text());
const dataProvider = new Reactodia.RdfDataProvider({acceptBlankNodes: false});
dataProvider.addGraph(graphData);
// Create empty diagram and put owl:Class entities with links between them
await model.createNewDiagram({dataProvider, signal});
const elementTypeId = 'http://www.w3.org/2002/07/owl#Class';
for (const {element} of await dataProvider.lookup({elementTypeId})) {
model.createElement(element);
}
await model.requestData();
// Layout elements on canvas
await performLayout({signal});
}, []);
return (
);
}
```
Look for more examples in the [documentation](https://reactodia.github.io/docs/category/examples).
## Development
### Build
The library uses [Vite](https://vite.dev/) for local development and to build the output bundles:
* Run `npm run start` to serve examples locally.
* Run `npm run build && npm run typings` to build the `dist` folder with output bundles and library TypeScript typings.
### Tests
The library uses [Vitest](https://vitest.dev/) as a testing framework: run `npm run test` to execute all tests.
The tests use [Vitest Browser Mode](https://vitest.dev/guide/browser/) so the following command should be executed first to download browser binaries for the [Playwright]: `npx playwright install chromium`.
See [Vitest Debugging](https://vitest.dev/guide/debugging) documentation page for an integrated debugger setup for the tests (e.g. VSCode debugger).
## License
The library is distributed under LGPL-2.1 or (at your option) any later version, see [NOTICE.md](./NOTICE.md).
## Scientific citations
If you use the library in your scientific projects, it would be great if you provide a link to this repository in your publication and a citation reference to the following paper:
Mouromtsev, D., Pavlov, D., Emelyanov, Y., Morozov, A., Razdyakonov, D. and Galkin, M., 2015. The Simple Web-based Tool for Visualization and Sharing of Semantic Data and Ontologies. In International Semantic Web Conference (Posters & Demos).
```
@inproceedings{Mouromtsev2015,
author = {Mouromtsev, Dmitry and Pavlov, Dmitry and Emelyanov, Yury and
Morozov, Alexey and Razdyakonov, Daniil and Galkin, Mikhail},
year = {2015},
month = {10},
title = {The Simple Web-based Tool for Visualization and Sharing of Semantic Data and Ontologies},
booktitle = {International Semantic Web Conference (Posters & Demos)}
}
```
It really helps our team to gain publicity and acknowledgment for our efforts.
Thank you for being considerate!