Skip to content

README_ENG.md

Latest commit

 

History

History
174 lines (131 loc) · 5.07 KB

README_ENG.md

File metadata and controls

174 lines (131 loc) · 5.07 KB

Italian version here

yProv Explorer

A powerful web tool based on React and D3.js for visualizing and interacting with Provenance graphs. It allows users to load data from JSON files or URLs and offers interactive features for exploring large-scale graphs with various customization and sharing options.

📖 Table of Contents

  1. Introduction
  2. Project Structure
  3. Screenshots
  4. Key Features
  5. Live Demo
  6. Installation
  7. Usage
  8. Developers

Introduction 🚀

yProv Explorer is an application designed to provide an immediate and intuitive view of Provenance. Leveraging React and D3.js, users can dynamically and interactively navigate between entities, agents, and activities, highlighting relationships and connections.

Project Structure 🏗️

Here is a simplified overview:

yProv-Explorer/
├── captures/
│   ├── example1.jpeg
│   ├── example2.png
│   └── example3.jpeg
├── netlify/
│   └── functions/
│       └── proxy.js
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── DownloadsButton/
│   │   ├── FileUploadButton/
│   │   ├── FullscreenButton/
│   │   ├── Graph/
│   │   ├── GraphContainer/
│   │   ├── GraphInfo/
│   │   ├── GraphSettings/
│   │   ├── JsonLabel/
│   │   ├── NavigationButton/
│   │   ├── NodeInfo/
│   │   ├── SearchBar/
│   │   └── SearchNode/
│   ├── main/
│   │   ├── main.css
│   │   └── Main.js
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── proxy-server.mjs
│   ├── reportWebVitals.js
│   ├── setupTests.js
│   └── unified-loader.js
├── utilities/
│   └── provenance_creator.py
├── .gitignore
├── LICENSE
├── netlify.toml
├── package-lock.json
├── package.json
├── README_ENG.md
└── README.md

Screenshots 📸

Here is a preview of the graph generated by the application:

Graph Example

  • Orange nodes (rounded rectangles) represent entities.
  • Green rectangles represent activities.
  • Purple house-shaped node represents an agent.
  • Red links represent "wasGeneratedBy".
  • Green links represent "wasDerivedFrom".
  • Orange link represents "wasAttributedTo".

Key Features 🌟

  • Interactive graph exploration: Pan, zoom, and drag nodes.
  • Customizable visualization: Toggle node labels, link labels, and adjust node spacing.
  • File upload and URL support: Load graphs via file upload or pasting a URL.
  • Node highlighting and sharing: Click nodes to highlight them, update the URL with the selected node, and share the direct link.
  • Link visibility control: Show or hide specific types of links (e.g., "used", "wasDerivedFrom", "wasGeneratedBy").
  • Fullscreen visualization: Maximize the graph for better analysis.
  • Navigation through history: Use the browser bar to move between previously clicked nodes.
  • Graph statistics: View the total number of nodes and breakdown by type (entity, activity, agent).
  • Node link navigation: Follow node connections in the details panel.
  • Graph screenshot export: Save the current graph view as a PNG file.

Live Demo 🔗

Visit the deployed application on Netlify for a live preview:

👉 Online Demo

Installation ⚙️

Want to run the project locally? Follow these steps:

Prerequisites

  • Node.js (v16 or later recommended)
  • npm

Steps

  1. Clone the repository and navigate to the directory: 
    git clone https://github.com/Zefkilis2002/yProv-Explorer
cd yProv-Explorer
  2. Install dependencies: 
    npm install
npm start
  3. Open your browser at http://localhost:3000 to view the application.

Usage 🖥️

Graph Loading

  • Load from File: Click the upload button and select a JSON file containing Provenance data.
  • Load from URL: Paste the URL of a JSON file or a REST endpoint.

Interactive Exploration

  • Pan and Zoom: Use the mouse or dedicated controls for navigation.
  • Node Selection: Click a node to view additional information.
  • Node Distance: Customize the repulsion/attraction force for better visualization.

Node Sharing

  • Dynamic URL: Clicking a node updates the URL with a parameter identifying the selected node.
  • Direct Link: Share this URL so others can access the same node directly.

Developers 👨‍💻

  • Konstantinos Zefkilis;
  • Sandro Luigi Fiore;
  • Marco Robol.