Reactodia Workspace

Documentation | Changelog | Playground

@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 project.

Installation

Install with:

npm install --save @reactodia/workspace

Quick example

import*asReactfrom'react';import*asReactodiafrom'@reactodia/workspace';import*asN3from'n3';constGRAPH_DATA='https://reactodia.github.io/resources/orgOntology.ttl';// Use background Web Worker to compute graph layoutconstLayouts=Reactodia.defineLayoutWorker(()=>newWorker(newURL('@reactodia/workspace/layout.worker',import.meta.url)));functionBasicExample(){const{defaultLayout}=Reactodia.useWorker(Layouts);const{onMount}=Reactodia.useLoadedWorkspace(async({context, signal})=>{const{model, performLayout}=context;// Fetch graph data to use as underlying data sourceconstresponse=awaitfetch(GRAPH_DATA,{signal});constgraphData=newN3.Parser().parse(awaitresponse.text());constdataProvider=newReactodia.RdfDataProvider({acceptBlankNodes: false});dataProvider.addGraph(graphData);// Create empty diagram and put owl:Class entities with links between themawaitmodel.createNewDiagram({dataProvider, signal});constelementTypeId='http://www.w3.org/2002/07/owl#Class';for(const{element}ofawaitdataProvider.lookup({elementTypeId})){model.createElement(element);}awaitmodel.requestData();// Layout elements on canvasawaitperformLayout({signal});},[]);return(<Reactodia.Workspaceref={onMount}defaultLayout={defaultLayout}><Reactodia.DefaultWorkspace/></Reactodia.Workspace>);}

Look for more examples in the documentation.

Development

Build

The library uses Vite 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 as a testing framework: run npm run test to execute all tests.

The tests use Vitest Browser Mode so the following command should be executed first to download browser binaries for the [Playwright]: npx playwright install chromium.

See Vitest 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.

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!