Home

Introduction

The Multimedia Graph Visualization project is designed to simplify the complexities of filter graphs by enabling visualization of data flow within a web application. This project is part of the GPAC project, focusing on creating an intuitive and interactive interface that allows users to understand and manipulate multimedia graphs effectively.

1. Overview

The project aims to provide an interactive and user-friendly interface for visualizing multimedia graphs. By leveraging modern web technologies and responsive design principles, the tool allows users to create, import, and manipulate multimedia graphs to understand data flow more effectively.

2. Installation

To install and run the project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/tancetiner/Multimedia-Graph-Visualization.git
   cd multimedia-graph-visualization

2. Install Dependencies:

   npm install

3. Run on local port:

   npm run dev # for debugging
   npm run build # for production

3. Architecture and Technology

The application is built using React with functional components to ensure maintainability. The visualization aspect leverages the React Flow library, and various third-party layout libraries like ELK and Dagre are used for automatic layout adjustments.

4. Features

• Graph Import/Export: Users can import graphs from JSON files.
• Custom Node and Edge Styling: Nodes and edges are customizable, with support for gradient coloring and dynamic sizing.
• Multiple Layout Options: Various layout algorithms (ELK, Dagre, etc.) are integrated to provide the best visual representation, both vertical and horizontal layout are possible.
• Sub-flow Grouping: Blocks can be grouped to simplify complex graphs.
• Example Graphs: Pre-loaded example graphs for quick visualization and testing.

5. Custom JSON Format

The application uses a custom JSON format to define the structure of multimedia graphs. Below is an example to demonstrate the format:

{
  "title": "Simple Graph",
  "description": "A simple graph with one input, two filters, and one output",
  "blocks": [
    {
      "id": "Input0",
      "name": "Input0",
      "type": "input",
      "outputs": [
        {
          "targets": ["Filter0", "Filter1"],
          "type": "video"
        }
      ]
    },
    {
      "id": "Filter0",
      "name": "Filter0",
      "type": "filter",
      "outputs": [
        {
          "targets": ["Output0"],
          "type": "video"
        }
      ]
    },
    {
      "id": "Filter1",
      "name": "Filter1",
      "type": "filter",
      "outputs": [
        {
          "targets": ["Output0"],
          "type": "audio"
        }
      ]
    },
    {
      "id": "Output0",
      "name": "Output0",
      "type": "output",
      "inputs": ["Filter0", "Filter1"]
    }
  ]
}

Final Block Format

Each block in the JSON file adheres to the following format, in typescript syntax:

export interface Block {
  id: string;
  name: string;
  outputs: Output[];
  type: BlockType;
  group?: string;
}

export interface Output {
  targets: string[];
  type: LinkType;
}

export enum LinkType {
  audio = "audio",
  video = "video",
  text = "text",
  file = "file",
}

export enum BlockType {
  FILTER = "filter",
  INPUT = "input",
  OUTPUT = "output",
  GROUP = "group",
}

6. Graph Generation Script

A script is provided to generate random graphs based on specified parameters. The script ensures the following constraints:

• Acyclic relationships
• Unique input-output relationships
• Compliance with input/output file constraints
• Valid paths from inputs to outputs

7. Visualization Libraries

The application integrates several libraries for graph visualization:

• React Flow: Provides the core graph rendering functionality with interactivity.
• Dagre and ELK: Alternative layout libraries offering various configuration options.

8. Usage Instructions

1. Run the Application:
2. Interact with the Interface: • Upload Graph: Import a graph from a JSON file. • Example Graphs: Load example graphs from the predefined set. • Graph Generation: Generate a random graph by specifying the number of inputs, outputs, and blocks. • Layout Options: Switch between different graph layouts and toggle node grouping.