Dependency Model Viewer

This page demonstrates rendering dependency models using Giraffe.js. Dependencies are visualized as oval-shaped elements with arrows showing relationships between them.
PaperScape Integration

Drag the link onto the PaperScape canvas to embed this viewer as a reusable scene component.

Dependency Model View PaperScape App (.giraffe.js) Send via PaperScape Queue

Inside PaperScape, click any dependency oval to open the editing panel where you can update the title and description.

Drop `.dmv.json` files or URLs directly onto the PaperScape canvas to load models; you will be prompted to import or replace the current scene.

PaperScape Controls

Development Roadmap

Goal: build a dependency visualization tool that integrates with PaperScape's drag-and-drop workflow.

  1. Phase 1 – Basic Dependency Rendering
    • Create core application structure (`dependency-model-view-core.giraffe.js`)
    • Implement `DependencyOval` component to render oval-shaped dependency elements
      • Oval shape with drop shadow
      • Title text centered in oval
      • Description text below title
      • Support for positioning and sizing
    • Implement `DependencyArrow` component to draw directional arrows between dependencies
      • Arrow lines with proper arrowheads
      • Connect from one dependency to another
      • Support for different arrow styles (solid, dashed)
    • Create example dependency model JSON (`example-dependency-model.json`)
    • Set up basic canvas rendering and layout
  2. Phase 2 – Interactive Features
    • Add hover detection for dependency ovals
      • Show edit icon on mouse over
      • Show "create dependency" icon on mouse over
    • Implement edit dialog for dependencies
      • Edit title and description
      • Persist changes to model
      • Similar UI/UX to DBModelView and ObjectModelView
    • Implement dependency creation workflow
      • Click "create dependency" icon on source oval
      • Select target oval to create arrow
      • Persist new dependency relationship
  3. Phase 3 – PaperScape Integration
    • Implement drag-and-drop support for `.giraffe.js` file
    • Add file loading capabilities for `.dmv.json` files
    • Implement save/load/download controls
    • Support import vs replace workflow
    • Enable embedding in any OpenForum page
  4. Phase 4 – ServiceBuilder Build System
    • Set up `script.build.json` configuration
    • Split code into modular component files:
      • `dependency-model-view-core.giraffe.js` (main application)
      • `DependencyOval.js` (oval rendering component)
      • `DependencyArrow.js` (arrow rendering component)
    • Use insertion markers for component assembly
    • Configure build URL and versioning
    • Ensure standalone component usage outside build
  5. Phase 5 – UX Polish and Advanced Features
    • Refine oval styling (colors, shadows, fonts)
    • Add automatic layout algorithm for dependency positioning
    • Implement arrow routing to avoid overlapping ovals
    • Add zoom and pan controls
    • Support for dependency grouping/clustering
    • Export capabilities (PNG, SVG)
    • Keyboard shortcuts for common operations
    • Undo/redo functionality

    Roadmap Additions

        • Dependency Types** – Support different dependency types (requires, uses, includes, extends) with visual styling differences
        • Dependency Metadata** – Add optional fields like version, criticality, status
        • Circular Dependency Detection** – Highlight circular dependencies with warning colors
        • Hierarchy Support** – Allow nested/grouped dependencies with collapsible sections
        • Impact Analysis** – Visualize cascading effects when a dependency changes
        • Search and Filter** – Search dependencies by name/description, filter by type
        • Model Comparison** – Compare two dependency models side-by-side

    The canvas will render a dependency diagram generated from `example-dependency-model.json`. Each dependency becomes an oval with title and description, while relationships are drawn as arrows connecting the ovals. Update the JSON file and refresh the page to see the changes—no manual edits to the markup are required.

    Interactive Features (Planned)

    • Automatic Layout: Dependencies positioned automatically with proper spacing
    • Visual Hierarchy: Clear oval shapes with drop shadows and readable text
    • Dependency Arrows: Directional arrows showing relationships
    • Edit on Hover: Icons appear on mouse over for editing and creating dependencies
    • Responsive Design: Canvas adapts to different model sizes
    • Error Handling: Graceful fallback when JSON loading fails

    Model Definition

    The visualization will render dependency models with the following structure: { "title": "Example Dependency Model", "dependencies": [ { "id": "frontend", "title": "Frontend Application", "description": "React-based user interface", "position": { "x": 100, "y": 100 }, "extensions": { "giraffe": { "color": "#3b82f6" } } }, { "id": "backend", "title": "Backend API", "description": "REST API server", "position": { "x": 400, "y": 100 }, "extensions": { "giraffe": { "color": "#10b981" } } }, { "id": "database", "title": "PostgreSQL Database", "description": "Primary data store", "position": { "x": 400, "y": 300 }, "extensions": { "giraffe": { "color": "#8b5cf6" } } } ], "relationships": [ { "id": "rel1", "type": "requires", "source": "frontend", "target": "backend", "label": "API calls", "extensions": { "giraffe": { "style": "solid" } } }, { "id": "rel2", "type": "requires", "source": "backend", "target": "database", "label": "data access", "extensions": { "giraffe": { "style": "solid" } } } ] }

    Dependency Model Schema

    The viewer will support the following JSON schema:

    Dependencies

    • `id` - Unique identifier for the dependency
    • `title` - Main title displayed in the oval
    • `description` - Short description displayed below title
    • `position` - Object with `x` and `y` coordinates for canvas placement
    • `extensions` - Additional metadata (including Giraffe.js specific properties like color)

    Relationships

    • `id` - Unique identifier for the relationship
    • `type` - Relationship type ("requires", "uses", "includes", "extends", etc.)
    • `source` - Source dependency ID
    • `target` - Target dependency ID
    • `label` - Optional label displayed on the arrow
    • `extensions` - Additional relationship metadata (arrow style, color, etc.)

    Application Architecture

    The Dependency Model Viewer will use a modular component-based architecture assembled via ServiceBuilder:

    Build Configuration

    The application will be built from multiple source files using `script.build.json`: { "version": "0.0.1", "targetFile": "/HomeLab/DependencyModelView/dependency-model-view.giraffe.js", "versionFile": "/HomeLab/DependencyModelView/Version/dependency-model-view.giraffe.js", "steps": [ { "action": "append", "file": "/HomeLab/DependencyModelView/dependency-model-view-core.giraffe.js" }, { "action": "insert", "searchFor": "// insert DependencyOval", "file": "/HomeLab/DependencyModelView/DependencyOval.js" }, { "action": "insert", "searchFor": "// insert DependencyArrow", "file": "/HomeLab/DependencyModelView/DependencyArrow.js" } ] }

    Component Files (To Be Created)

    Core Application (`dependency-model-view-core.giraffe.js`)
    • Contains the main `DependencyModelViewApp` constructor
    • Defines the Integration module for drag-and-drop support
    • Provides application state management and file I/O
    • Includes placeholder comments for component insertion
    Dependency Rendering (`DependencyOval.js`)
    • Renders individual dependency ovals with titles and descriptions
    • Self-contained with embedded color constants for standalone use
    • Can be used independently on pages outside PaperScape
    • Uses `typeof` guards to avoid conflicts when assembled
    • Implements hover detection for edit and create icons
    Relationship Rendering (`DependencyArrow.js`)
    • Draws arrows between dependencies
    • Includes inline drawing helper functions (`drawArrowHead`, `drawDependencyLabel`)
    • Supports different arrow styles (solid, dashed)
    • Self-contained for standalone usage

    Standalone Component Pattern

    Each component file will be designed to work both standalone and as part of the built application: // Color constants defined with guards in DependencyOval.js if (typeof DEPENDENCY_COLOR_OPTIONS === "undefined") { var DEPENDENCY_COLOR_OPTIONS = [ { id: "blue", fill: "#3b82f6", stroke: "#2563eb" }, { id: "green", fill: "#10b981", stroke: "#059669" }, // ... more colors ]; } This pattern allows:
        • Standalone Use** - Components work when included directly in `page.js`
        • Assembled Use** - ServiceBuilder combines them into `dependency-model-view.giraffe.js`
        • No Conflicts** - `typeof` guards prevent duplicate definitions
        • Shared Dependencies** - Common utilities defined once, available to all

    Building the Application

    To rebuild after modifying source files: http://localhost:8888/OpenForum/AddOn/ServiceBuilder?action=buildJavascript&pageName=/HomeLab/DependencyModelView&fileName=script.build.json The build process: 1. **Appends** the core file as the base 2. **Inserts** DependencyOval at `// insert DependencyOval` marker 3. **Inserts** DependencyArrow at `// insert DependencyArrow` marker 4. **Outputs** the complete `.giraffe.js` file ready for PaperScape

    Extending the Viewer

    The viewer can be extended to support additional features:

    Custom Styling

    Modify the rendering functions to change colors, fonts, and oval shapes based on dependency properties or extensions.

    Additional Relationship Types

    Add support for different dependency types with visual distinctions (dashed lines, different colors, bidirectional arrows).

    Interactive Features

    Implement click handlers, hover effects, and drag-and-drop functionality using Giraffe.js interaction capabilities.

    Export Capabilities

    Add buttons to export the rendered diagram as PNG, SVG, or PDF using canvas.toDataURL() or similar methods.

    Child Pages

    Attachments