@reactodia/workspace
Version:
Reactodia Workspace -- library for visual interaction with graphs in a form of a diagram.
97 lines (70 loc) • 4.15 kB
Markdown
[](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.
Install with:
```sh
npm install --save @reactodia/workspace
```
```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.requestLinks();
// Layout elements on canvas
await performLayout({signal});
}, []);
return (
<Reactodia.Workspace ref={onMount}
defaultLayout={defaultLayout}>
<Reactodia.DefaultWorkspace />
</Reactodia.Workspace>
);
}
```
Look for more examples in the [documentation](https://reactodia.github.io/docs/category/examples).
The library uses [Vitest](https://vitest.dev/) as a testing framework: run `npm run test` to execute all tests.
See [Vitest Debugging](https://vitest.dev/guide/debugging) documentation page for an integrated debugger setup for the tests (e.g. VSCode debugger).
The library is distributed under LGPL-2.1 or (at your option) any later version, see [NOTICE.md](./NOTICE.md).
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!