|
1 | | -# React + TypeScript + Vite |
| 1 | +# RDF Graph Visualization |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +## Description |
| 4 | +This project is a TypeScript/JavaScript application that processes RDF data to create a graph representation. It uses React for the frontend and Chakra UI for styling. |
4 | 5 |
|
5 | | -Currently, two official plugins are available: |
| 6 | +We strongly suggest users to use `turtle` format for RDF data and `schema.org` vocabulary for the properties. The application is designed to work with the `schema.org` vocabulary, since we developed it for a specific use case. However, it can be easily modified to work with other vocabularies. |
6 | 7 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 8 | +## Features |
| 9 | +- Parses RDF data and filters relevant properties. |
| 10 | +- Creates nodes and edges for a graph representation. |
| 11 | +- Filters and displays nodes based on user-selected criteria. |
9 | 12 |
|
10 | | -## Expanding the ESLint configuration |
| 13 | +## Installation |
| 14 | +1. Clone the repository. |
11 | 15 |
|
12 | | -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
| 16 | +```bash |
| 17 | +git clone https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization.git |
| 18 | +``` |
| 19 | +2. Install dependencies: |
| 20 | + |
| 21 | +```bash |
| 22 | +npm install |
| 23 | +``` |
| 24 | + |
| 25 | +3. Create the `config.yml` file in the root directory and set it according to next section. |
| 26 | +4. You can run the application with: |
13 | 27 |
|
14 | | -- Configure the top-level `parserOptions` property like this: |
| 28 | +```bash |
| 29 | +npm run dev |
| 30 | +``` |
| 31 | + |
| 32 | +5. Or you can build the application with below command and serve it with a web server. |
15 | 33 |
|
16 | | -```js |
17 | | -export default tseslint.config({ |
18 | | - languageOptions: { |
19 | | - // other options... |
20 | | - parserOptions: { |
21 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
22 | | - tsconfigRootDir: import.meta.dirname, |
23 | | - }, |
24 | | - }, |
25 | | -}) |
| 34 | +```bash |
| 35 | +npm run build |
26 | 36 | ``` |
27 | 37 |
|
28 | | -- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` |
29 | | -- Optionally add `...tseslint.configs.stylisticTypeChecked` |
30 | | -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: |
31 | | - |
32 | | -```js |
33 | | -// eslint.config.js |
34 | | -import react from 'eslint-plugin-react' |
35 | | - |
36 | | -export default tseslint.config({ |
37 | | - // Set the react version |
38 | | - settings: { react: { version: '18.3' } }, |
39 | | - plugins: { |
40 | | - // Add the react plugin |
41 | | - react, |
42 | | - }, |
43 | | - rules: { |
44 | | - // other rules... |
45 | | - // Enable its recommended rules |
46 | | - ...react.configs.recommended.rules, |
47 | | - ...react.configs['jsx-runtime'].rules, |
48 | | - }, |
49 | | -}) |
| 38 | +## Configuration |
| 39 | +Configuration file has the necessary information to show nodes and links in the graph. Since a 3D graph on the browser consumes a lot of resources, it is important to filter the data to show only the necessary information. Properties that are not in the yaml file will be ignored. You can check [example config file](examples/config.yml) for more information. |
| 40 | +You can also check example RDF files in the examples folder to see how the data should be formatted. |
| 41 | + |
| 42 | +The configuration file is a YAML file that has the following properties: |
| 43 | +```yaml |
| 44 | +# links will be created from these properties |
| 45 | +relationProperties: |
| 46 | + - "http://schema.org/affiliation" |
| 47 | + |
| 48 | +# labels will be created from these properties |
| 49 | +labelProperties: |
| 50 | + - "http://schema.org/name" |
| 51 | + |
| 52 | +# groups will be created from these properties |
| 53 | +groups: |
| 54 | + - name: 'Organization' |
| 55 | + types: |
| 56 | + - 'http://schema.org/Organization' |
| 57 | + properties: |
| 58 | + - 'http://schema.org/affiliation' |
| 59 | + color: '#FF0000' |
50 | 60 | ``` |
| 61 | +
|
| 62 | +- `relationProperties`: List of properties that will be used to create links between nodes. |
| 63 | +- `labelProperties`: List of properties that will be used to create labels for nodes. |
| 64 | +- `groups`: List of groups that will be created based on the properties. Each group has the following properties: |
| 65 | + - `name`: Name of the group. |
| 66 | + - `types`: List of types that will be included in the group. |
| 67 | + - `properties`: List of properties that will be used to filter the data. **Can be empty.** |
| 68 | + - `color`: Color of the group. Please use HEX color codes. |
| 69 | + |
| 70 | +## How to Cite |
| 71 | + |
| 72 | +If you want to cite this project in your scientific work, |
| 73 | +please use the [citation file](https://citation-file-format.github.io/) |
| 74 | +in the [repository](https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization/blob/main/CITATION.cff). |
| 75 | + |
| 76 | +## Acknowledgements |
| 77 | + |
| 78 | +We kindly thank all authors and contributors. |
| 79 | + |
| 80 | +<div> |
| 81 | +<img style="vertical-align: middle;" alt="HMC Logo" src="https://github.com/Materials-Data-Science-and-Informatics/Logos/raw/main/HMC/HMC_Logo_M.png" width=50% height=50% /> |
| 82 | + |
| 83 | +<img style="vertical-align: middle;" alt="FZJ Logo" src="https://github.com/Materials-Data-Science-and-Informatics/Logos/raw/main/FZJ/FZJ.png" width=30% height=30% /> |
| 84 | +</div> |
| 85 | +<br /> |
| 86 | + |
| 87 | +This project was developed at the Institute for Materials Data Science and Informatics |
| 88 | +(IAS-9) of the Jülich Research Center and funded by the Helmholtz Metadata Collaboration |
| 89 | +(HMC), an incubator-platform of the Helmholtz Association within the framework of the |
| 90 | +Information and Data Science strategic initiative. |
0 commit comments