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 * 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 (
        <Reactodia.Workspace ref={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!