garyoook / graphld

GraphLD, mainly focuses on presenting Linked Data with intelligent recommendation of suitable visualisations. GG's MEng FYP in 2023.

GraphLD

Deployed Demo on Imperial College's cloud service;

This project was initialy bootstrapped with Create React App.

And then migrate to UmiJs for better file management & routing experience.

Important enginnering components of this project:

MUI (React UI Components)

AntV G2

Ant Design Charts (React version of AntV G2 visualisation package)

Google charts

React-Google-Charts

GraphDB (RDF Graph Database, used as backend)

Getting Started

1. Prepare the Linked Data

i. Configure GraphDB

The backend of GraphLD is supported by GraphDB, Before running GraphLD, RDF data should be prepared and loaded into GraphDB.

To use GraphDB, you can either:

• Download GraphDB Workbench and run it locally;
• Or use Docker Image of GraphDB, see GraphDB Docker Image;

Be noted that to communicate with GraphLD, GraphDB should be configured to enable CORS (Cross-Origin Resource Sharing), see GraphDB CORS Configuration; In short, set graphdb.workbench.cors.origin to * and graphdb.workbench.cors.enable to true in your GraphDB configuration.

If you are using GraphDB docker image instead of GraphDB Application, you can configure CORS by adding container parameters, an example of running the docker image is given below, the example uses image ontotext/graphdb:10.2.1.

docker run -p 7200:7200  --name GraphDB -d -it --rm ontotext/graphdb:10.2.1 -Dgraphdb.connector.port=7200 -Dgraphdb.workbench.cors.enable=true -Dgraphdb.workbench.cors.origin=*

After setting up GraphDB, you can access GraphDB Workbench on http://localhost:7200, and create a new repository for your Linked Data.

ii. Import Linked data and Schema into GraphDB

To empower GraphLD with conceptual modelling, the Semantic Schema of the target database should also be imported.

An example of Linked Data is Moindial database in RDF, you can download prepared Complete Mondial Database and respective Semantic Web Schema then import them into GraphDB via Import -> User Data -> Upload RDF files; You can also use Import -> User Data -> Get RDF data from URL to import data using the URLs of above data and schema.

You can also try other Linked Databases and import them into GraphDB.

2. Run GraphLD

i. Configure GraphLD

Now you have the data and schema in GraphDB, you should now configure GraphLD to connect to your GraphDB repository.

In src/config.ts, you can configure the following parameters:

• GRAPHDB_HOST_DEV if you are running GraphDB locally. Default is http://127.0.0.1:7200;
• GRAPHDB_HOST_PROD if you use GraphDB deployed on remote machinne. Default is set to the current experiment machine the author is using http://146.169.43.78:7200, it is not accessible without specified VPN, do if you are cloning this repo and deploy your backend on remote machines, pease modify this configuration;

Then GraphLD application is ready to run.

ii. Scripts for Running GraphLD:

npm run dev

Runs the React app in the development mode.
Open http://localhost:8000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the React app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

npm run preview

After building the app, you can run this script to preview the production build locally, on http://localhost:4172

Note that GraphDB workbench is required as backend, you can configure that in src/config.ts