Develop

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# project configuration
+config.yml
+!examples/config.yml

.somesy.toml

@@ -1,41 +1,42 @@
 [project]
-name = "beamer-gui"
-version = "0.0.1"
-description = "A GUI for creating a Beamer presentation using LaTeX."
-keywords = ["beamer", "latex"]
+name = "rdf-graph-visualization"
+version = "0.1.0"
+description = "Visualization of RDF graphs in Turtle format in 3D on the web."
+keywords = ["rdf", "graph", "turtle", "visualization"]
 license = "MIT"
-repository = "https://github.com/Materials-Data-Science-and-Informatics/beamer-gui"
+repository = "https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization"
+homepage = "https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization"
 
 [[project.people]]
 family-names = "Soylu"
 given-names = "Mustafa"
 email = "m.soylu@fz-juelich.de"
 orcid = "https://orcid.org/0000-0003-2637-0432"
-
-contribution = "Main developer and project manager."
-contribution_types = ["maintenance", "code", "test", "review", "doc"]
-
+contribution = "The main author, maintainer and tester."
+contribution_begin = "2023-03-01"
+contribution_types = ["ideas", "code", "design", "test"]
 author = true
 maintainer = true
 
 [[project.people]]
-family-names = "D'Mello"
-given-names = "Fiona"
-orcid = "https://orcid.org/0000-0002-0465-1009"
-email = "f.dmello@fz-juelich.de"
-
-contribution = "Main developer."
-contribution_types = ["ideas", "code", "test", "review", "doc"]
-
-author = true
+family-names = "Fathalla"
+given-names = "Said"
+email = "s.fathalla@fz-juelich.de"
+orcid = "https://orcid.org/0000-0002-2818-5890"
 
+contribution_begin = "2023-03-01"
+contribution_types = ["ideas", "userTesting"]
 
 [[project.people]]
 family-names = "Hofmann"
 given-names = "Volker"
 email = "v.hofmann@fz-juelich.de"
 orcid = "https://orcid.org/0000-0002-5149-603X"
 
+contribution = "Discussions and suggestions concerning tool scope and usability."
+contribution_begin = "2023-06-01"
+contribution_end = "2023-06-30"
+contribution_types = ["ideas", "userTesting"]
 publication_author = true
 
 [[project.people]]
@@ -44,7 +45,5 @@ given-names = "Stefan"
 email = "s.sandfeld@fz-juelich.de"
 orcid = "https://orcid.org/0000-0001-9560-4728"
 
-contribution_types = ["ideas", "fundingFinding"]
-
+contribution_types = ["fundingFinding"]
 publication_author = true
-

CITATION.cff

@@ -0,0 +1,34 @@
+cff-version: 1.2.0
+message: If you use this software, please cite it using these metadata.
+type: software
+title: rdf-graph-visualization
+abstract: Visualization of RDF graphs in Turtle format in 3D on the web.
+version: 0.1.0
+keywords:
+- rdf
+- graph
+- turtle
+- visualization
+authors:
+- family-names: Soylu
+  given-names: Mustafa
+  orcid: https://orcid.org/0000-0003-2637-0432
+  email: m.soylu@fz-juelich.de
+- family-names: Hofmann
+  given-names: Volker
+  orcid: https://orcid.org/0000-0002-5149-603X
+  email: v.hofmann@fz-juelich.de
+- family-names: Sandfeld
+  given-names: Stefan
+  orcid: https://orcid.org/0000-0001-9560-4728
+  email: s.sandfeld@fz-juelich.de
+contact:
+- family-names: Soylu
+  given-names: Mustafa
+  orcid: https://orcid.org/0000-0003-2637-0432
+  email: m.soylu@fz-juelich.de
+license: MIT
+repository-code: 
+  https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization
+url: 
+  https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization

README.md

@@ -1,50 +1,90 @@
-# React + TypeScript + Vite
+# RDF Graph Visualization
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Description
+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.
 
-Currently, two official plugins are available:
+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.
 
-- [@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
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Features
+- Parses RDF data and filters relevant properties.
+- Creates nodes and edges for a graph representation.
+- Filters and displays nodes based on user-selected criteria.
 
-## Expanding the ESLint configuration
+## Installation
+1. Clone the repository.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+git clone https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization.git
+```
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Create the `config.yml` file in the root directory and set it according to next section.
+4. You can run the application with:
 
-- Configure the top-level `parserOptions` property like this:
+```bash
+npm run dev
+```
+
+5. Or you can build the application with below command and serve it with a web server.
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+```bash
+npm run build
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+## Configuration
+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. 
+You can also check example RDF files in the examples folder to see how the data should be formatted.
+
+The configuration file is a YAML file that has the following properties:
+```yaml
+# links will be created from these properties
+relationProperties:
+  - "http://schema.org/affiliation"
+
+# labels will be created from these properties
+labelProperties:
+  - "http://schema.org/name"
+
+# groups will be created from these properties
+groups:
+  - name: 'Organization'
+    types:
+      - 'http://schema.org/Organization'
+    properties:
+        - 'http://schema.org/affiliation'
+    color: '#FF0000'
 ```
+
+- `relationProperties`: List of properties that will be used to create links between nodes.
+- `labelProperties`: List of properties that will be used to create labels for nodes.
+- `groups`: List of groups that will be created based on the properties. Each group has the following properties:
+  - `name`: Name of the group.
+  - `types`: List of types that will be included in the group.
+  - `properties`: List of properties that will be used to filter the data. **Can be empty.**
+  - `color`: Color of the group. Please use HEX color codes.
+
+## How to Cite
+
+If you want to cite this project in your scientific work,
+please use the [citation file](https://citation-file-format.github.io/)
+in the [repository](https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization/blob/main/CITATION.cff).
+
+## Acknowledgements
+
+We kindly thank all authors and contributors.
+
+<div>
+<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% />
+&nbsp;&nbsp;
+<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% />
+</div>
+<br />
+
+This project was developed at the Institute for Materials Data Science and Informatics
+(IAS-9) of the Jülich Research Center and funded by the Helmholtz Metadata Collaboration
+(HMC), an incubator-platform of the Helmholtz Association within the framework of the
+Information and Data Science strategic initiative.

codemeta.json

@@ -0,0 +1,66 @@
+{
+  "@context": [
+    "https://doi.org/10.5063/schema/codemeta-2.0",
+    "https://w3id.org/software-iodata",
+    "https://raw.githubusercontent.com/jantman/repostatus.org/master/badges/latest/ontology.jsonld",
+    "https://schema.org",
+    "https://w3id.org/software-types"
+  ],
+  "@type": "SoftwareSourceCode",
+  "author": [
+    {
+      "@type": "Person",
+      "givenName": "Mustafa",
+      "familyName": "Soylu",
+      "email": "m.soylu@fz-juelich.de",
+      "@id": "https://orcid.org/0000-0003-2637-0432"
+    }
+  ],
+  "name": "rdf-graph-visualization",
+  "description": "Visualization of RDF graphs in Turtle format in 3D on the web.",
+  "version": "0.1.0",
+  "keywords": [
+    "rdf",
+    "graph",
+    "turtle",
+    "visualization"
+  ],
+  "maintainer": [
+    {
+      "@type": "Person",
+      "givenName": "Mustafa",
+      "familyName": "Soylu",
+      "email": "m.soylu@fz-juelich.de",
+      "@id": "https://orcid.org/0000-0003-2637-0432"
+    }
+  ],
+  "license": [
+    "https://spdx.org/licenses/MIT"
+  ],
+  "softwareHelp": "https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization",
+  "codeRepository": "https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization",
+  "contributor": [
+    {
+      "@type": "Person",
+      "givenName": "Said",
+      "familyName": "Fathalla",
+      "email": "s.fathalla@fz-juelich.de",
+      "@id": "https://orcid.org/0000-0002-2818-5890"
+    },
+    {
+      "@type": "Person",
+      "givenName": "Volker",
+      "familyName": "Hofmann",
+      "email": "v.hofmann@fz-juelich.de",
+      "@id": "https://orcid.org/0000-0002-5149-603X"
+    },
+    {
+      "@type": "Person",
+      "givenName": "Stefan",
+      "familyName": "Sandfeld",
+      "email": "s.sandfeld@fz-juelich.de",
+      "@id": "https://orcid.org/0000-0001-9560-4728"
+    }
+  ],
+  "url": "https://github.com/Materials-Data-Science-and-Informatics/rdf-graph-visualization"
+}

eslint.config.js

@@ -8,7 +8,7 @@ export default tseslint.config(
   { ignores: ['dist'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ['{**/*,*}.{js,ts,jsx,tsx,html,vue},{!node_modules/*}'],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,

examples/config.yml

@@ -0,0 +1,59 @@
+# links will be created from these properties
+relationProperties:
+  - "http://schema.org/affiliation"
+  - "http://schema.org/dataPublished"
+  - "http://schema.org/dateModified"
+  - "http://schema.org/provider"
+  - "http://schema.org/license"
+  - "http://schema.org/publisher"
+  - "http://schema.org/author"
+  - "http://schema.org/creator"
+  - "http://schema.org/keywords"
+
+# labels will be created from these properties
+labelProperties:
+  - "http://schema.org/name"
+  - "http://schema.org/text"
+  - "http://schema.org/comment"
+
+# groups will be created from these properties
+groups:
+  - name: 'Organization'
+    types: # below types will be in the organization group
+      - 'http://schema.org/Organization'
+    properties: # object of below properties will be in the organization group
+      - 'http://schema.org/affiliation'
+      - 'http://schema.org/provider'
+      - 'http://schema.org/publisher'
+    color: '#008000' # color of the nodes in this group on 3D view
+  - name: 'Person'
+    types:
+      - 'http://schema.org/Person'
+    properties:
+      - 'http://schema.org/author'
+      - 'http://schema.org/creator'
+    color: '#FF0000'
+  - name: 'Dataset'
+    types:
+      - 'http://schema.org/Dataset'
+    color: '#0000FF'
+  - name: 'Software'
+    types:
+      - 'http://schema.org/SoftwareSourceCode'
+    color: '#FFFF00'
+  - name: 'Document'
+    types:
+      - 'http://schema.org/Document'
+    color: '#FFA500'
+  - name: 'Article'
+    types:
+      - 'http://schema.org/Article'
+    color: '#4B0082'
+  - name: 'CreativeWork'
+    types:
+      - 'http://schema.org/CreativeWork'
+    color: '#8A2BE2'
+  - name: 'Service'
+    types:
+      - 'http://schema.org/Service'
+    color: '#00FFFF'