Revision Graph

A Drupal module that provides a visual, interactive graph representation of content revision history, similar to Git commit graphs.

Overview

The Revision Graph module enhances Drupal's built-in content revision system by providing a visual representation of revision history. It displays revisions across different languages as branching timelines, with clear indicators for published, current, and default revisions.

Caption: Revision Graph displays your content’s complete history in a clear, visual format

Features

• Interactive graphical representation of content revision history
• Language-aware branching visualization
• Color-coded revision tags (published, current, default, etc.)
• Split view with both graph and list representations
• Batch loading of revisions with visual progress indicator
• Accessible interface with ARIA attributes and keyboard navigation
• Responsive design adapting to different screen sizes

Installation

1. Download and extract the module to your Drupal modules/contrib directory
2. Enable the module through the Drupal admin interface or using Drush:

   drush en revision_graph

3. Navigate to any node's revisions tab to see the graph visualization

Architecture

The module consists of several components:

Backend (PHP)

• RevisionGraphController: Loads and prepares revision data for visualization
• revision_graph.module: Hooks into Drupal's theme system and routing
• Twig templates for HTML structure

Frontend (JavaScript & CSS)

The module uses a modular architecture with three main library components:

1. renderer: Core visualization engine

   • js/revision-graph/revision-graph.iife.js: JavaScript rendering engine
   • js/revision-graph/revision-graph.css: Base styles for graph visualization

2. app: Application logic and user interface

   • js/init.js: Data fetching, progress tracking, and UI interactions
   • js/init.css: Progress indicators, error messages, and container styles

3. revision_graph: Main library that includes both components

   • This library is attached to the page via the RevisionGraphController

This modular approach separates core visualization functionality from application-specific code, improving maintainability and enabling potential reuse of components.

Developer Information

Extension Points

The module is designed to be extensible in several ways:

1. Theme Customization: Override the revision-graph.html.twig template
2. CSS Theming: Custom styles can target the BEM-based class structure
3. Behavior Modification: Drupal behaviors can be extended or altered
4. Library Extension: Extend or override libraries using Drupal's library system

JavaScript API

The module exposes a JavaScript API through the Drupal.revisionGraph namespace:

// Configure graph appearance
Drupal.revisionGraph.config.colorThresholds = {
  low: 25,
  medium: 75
};

// Process commit data
const processedCommits = Drupal.revisionGraph.processCommits(rawCommits);

// Format for graph visualization
const graphData = Drupal.revisionGraph.formatCommits(processedCommits);

CSS Structure

The module uses BEM-style naming conventions:

• .revision-graph-wrapper: Main container
• .revision-graph__progress: Progress indicator
• .revision-graph__error: Error messages
• .revision-graph__visualization: Graph container
• .revision-graph__list: List container

See js/init.css for the complete styling reference.

Library Usage and Extension

You can use the module's component libraries individually or extend them as needed:

# In your_theme.libraries.yml or your_module.libraries.yml
custom_revision_graph:
  css:
    theme:
      css/custom-revision-graph.css: {}
  dependencies:
    - revision_graph/revision_graph  # Main library with all components
    # OR use individual components:
    # - revision_graph/renderer  # Just the graph visualization engine
    # - revision_graph/app       # Just the application functionality

Then attach your library in a preprocess function or controller:

$build['#attached']['library'][] = 'your_theme/custom_revision_graph';

Terminology

See the GLOSSARY.md file for consistent terminology used throughout the module.

Browser Compatibility

• Chrome 60+
• Firefox 60+
• Safari 11+
• Edge 16+

Performance Considerations

• Large revision histories are loaded in batches of 50 revisions
• Graph rendering is optimized for up to 500 revisions
• For extremely large revision histories, pagination is recommended

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the GPL v2.0 or later.