# Reactodia Workspace [![npm version](https://badge.fury.io/js/@reactodia%2Fworkspace.svg)](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.

![reactodia_oceanus_light_bordered](https://github.com/user-attachments/assets/040fc7c0-96d3-4079-8fee-873d5206f187#gh-light-mode-only)
![reactodia_oceanus_dark_bordered](https://github.com/user-attachments/assets/e5ced6dd-3d3e-4e7d-aa2d-33677c58d292#gh-dark-mode-only)

## 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 (
        <Reactodia.Workspace ref={onMount}
            defaultLayout={defaultLayout}>
            <Reactodia.DefaultWorkspace />
        </Reactodia.Workspace>
    );
}
```
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!
