DPS
Try DemoDownload
System Documentation & User Manual

Master the DPS System

Your definitive guide to utilizing the Canvas-Driven Product Management platform. From initial design to code execution and advanced analytics.

Introduction & Executive Dashboard

The DPS System is a comprehensive platform built on the Canvas-Driven Product Management (CaDPM™) approach. It bridges the gap between design and execution, providing a single source of truth for your entire product lifecycle.

Key Metrics Displayed

  • Total CanvasesTracks both UI and API canvases
  • CollaborationNumber of active users and contributors
  • Code LinesDeveloped vs. remaining code lines (e.g. 62% developed)
  • Project CompletionEstimated vs. actual dates and remaining hours
  • Requirement AlignmentScore indicating alignment with initial requirements
Executive Dashboard ViewInsert Image from PDF here

UI Canvas Management

The UI Canvas serves as the central hub for managing your application's screens. It tracks hours, code lines, and business requirements efficiently in a unified interface.

Canvas Summary

Displays metrics like Estimated/Spent Hours, Estimated/Developed Code Lines, and Business Requirement Alignment.

User Acceptance (UAC)

Detailed list of criteria that must be met for the screen to be considered completely verified.

Integration & Visuals

Upload UI mockups directly and use integration tools to associate External View Links, Embed Codes, or GitHub Files.

UI Canvas Management ViewInsert Image from PDF here

Visual Design & Logic

Our powerful drag-and-drop UI editor allows seamless designing while the underlying Data Flow graph visually dictates how information moves across system nodes.

  • UI Editor

    Features components like Text, Button, Input, List, Image, and Container. Easily save, preview, export, and tweak settings for individual UI elements.

  • Data Flow

    A visual graph showing the flow of data between different system nodes and UI components, ensuring state consistency across the board.

Visual Design & Logic ViewInsert Image from PDF here

API Design & Development

The API Canvas is an intuitive interface for designing, documenting, and validating RESTful APIs, powered by AI feedback.

API Canvas Features

  • Operation Descriptions
  • Input & Output Fields definitions
  • Request/Response Body structures
  • Import/Export API Canvas JSON

AI & Testing Environments

  • API Assistant & AI Analyzer integration
  • Real-time response viewer
  • AI-powered automated troubleshooting
  • Dedicated environment for API execution
API Design ViewInsert Image from PDF here

Project Execution & Source Control

Manage tasks directly synchronized with UI and API canvases using the Backlog Canvas, and automatically generate base code linked directly to your repositories.

Backlog Canvas

A robust project management board (To Do, In Progress, Done) perfectly synced with your architecture and canvases.

Code Builder

Generate code templates or full components based on canvas designs and instantly push to your codebases.

GitHub Repositories

A dedicated management interface for linking GitHub owners, repositories, and collaborators securely into the DPS project.

Execution & Source Control ViewInsert Image from PDF here

Code Builder

The Code Builder is an integrated GitHub-powered development workspace inside DPS. It lets you browse repositories, view code, track commit history, and open files in your preferred environment — all without leaving the platform.

1. GitHub Authentication

To start using the Code Builder, connect your GitHub account via OAuth. Once authenticated, all repositories you have access to become available inside the DPS platform without any manual configuration.

  • Click "Sign in with GitHub" on the GitHub Repository Browser screen
  • DPS requests OAuth access to your GitHub repositories
  • After a successful login the file tree and code viewer become active
  • A "Logged out from GitHub" toast notification appears when the session ends
GitHub Authentication — Sign in screen

2. Repository Browser & File Explorer

After authentication the main Code Builder view opens a full GitHub repository browser. The left panel shows an expandable file tree; the right panel renders the selected file with syntax highlighting. You can switch repositories, switch branches, and load file content into the canvas context with one click.

Repository SelectorSwitch between repositories linked to the DPS project
Branch SelectorSwitch to any branch (main, develop, feature/*)
File TreeExpandable folder structure with file search and Refresh
Code ViewerSyntax-highlighted file content with line numbers
Language BadgeAuto-detected programming language label (e.g. JavaScript)
Load ContentPush the selected file into the active canvas or editor context
Repository Browser & File Explorer — main page

3. Open in External Tools

The "Open in" button gives instant one-click access to five popular development environments. No manual URL copying or workspace setup required — DPS handles the redirect directly.

VS Code

Open locally in Visual Studio Code

StackBlitz

Browser-based instant dev environment

CodeSandbox

Cloud sandbox for rapid prototyping

CodeSpace

GitHub Codespaces cloud IDE

github.dev

GitHub's built-in web editor

Open in External Tools — dropdown options

4. Commit History

The Commit History panel provides a full, filterable log of every commit made to the repository. Each entry displays the author, exact timestamp, SHA hash, and a summary of additions, deletions, and total files changed — with a direct "View on GitHub" link.

Commit Entry Information

Commit Message

Follows conventional commits (feat, fix, chore…)

Author & Timestamp

Developer name with exact date and time

SHA Hash

Short unique identifier for the commit

Filter by Branch

Narrow the log to a specific branch

Date Range Filter

From Date – To Date picker for targeted review

Stats Badge

Lines added (+), deleted (−), total files changed

View on GitHub

Direct link to the commit on GitHub

Commit History — filtered log view

5. Commit Details & Changed Files

Expanding a commit reveals its full change set — every file that was added, modified, or deleted, each with its path, status badge, and exact line change counts. Clicking [Open] loads the file immediately in the code viewer panel.

added

New file introduced in this commit

modified

Existing file changed in this commit

deleted

File removed in this commit

Commit Details — changed files list

6. File Diff Viewer

Clicking [Open] on any changed file launches the File Diff Viewer — an inline code-comparison tool that color-codes every addition and deletion. It shows the full file path, total number of changes, and surrounding context lines for quick, focused code review without leaving DPS.

Inline Diff

Additions and deletions shown together in a single unified view

Color Coding

Green highlights for added lines, red for deleted lines

File Header

Full file path with total change count shown at the top

File Diff Viewer — inline code comparison

Advanced Analytics & Reporting

Gain deep insights into your development workflows through granular progress tracking and assignee metrics.

Reporting Dashboards

UI Canvas Reports

Individual progress tracking categorized by canvas completion.

Canvas Analytics

Comparison of development buckets, such as Daily Code Lines mapped against effort.

Assignee Analytics

Detailed tracking of individual contributor productivity and activity levels.

Analytics ViewInsert Image from PDF here

Assignee Analytics

Assignee Analytics provides a powerful, filter-driven dashboard for tracking each team member's contributions over time. Using grouped bar charts across four key dimensions — closed issues, closed bugs, spent hours, and code lines — managers can instantly spot productivity trends, workload imbalances, and delivery patterns across the entire assignee pool.

1. Overview & Filter Panel

The top section of Assignee Analytics is entirely dedicated to filtering. Before any chart renders, you narrow the data using three combined controls: the Assignee List, the Date Range, and the Time Interval. A Diagram Type selector (currently Histogram) and quick-access preset buttons complete the panel, with a Reset button to clear all filters instantly.

Assignee ListMulti-select dropdown to include one or more team members in the analysis
Date RangeFrom Date – To Date pickers for a precise time window
Time IntervalToggle between Daily, Weekly, Monthly, or Yearly granularity
Diagram TypeChoose the chart style; Histogram groups bars by assignee per bucket
Quick PresetsOne-click shortcuts: This Week, This Month, Last 30 Days, This Year
ResetClears all active filters and restores the default view instantly
Assignee Analytics — overview with filter panel and chart grid

2. Number of Closed Issues

The Number of Closed Issues chart visualises how many backlog issues each assignee closed within the selected time window. Bars are grouped by time bucket (e.g. one group per day in Daily mode) and colour-coded per assignee, making it easy to compare individual output at a glance. A "Full Size" button in the top-right corner expands the chart to a dedicated full-screen modal for deeper inspection.

Chart Details

Chart Title

Number of Closed Issues by Assignee and [Interval]

Y-axis

Count of issues closed (integer)

X-axis

Time bucket matching the selected interval (Daily → dates, Weekly → week labels, etc.)

Legend

Each assignee rendered in a unique colour (teal, purple, red, …)

Grouped Bars

Multiple assignee bars sit side-by-side within a single time bucket

Full Size

Expands the chart to a full-screen overlay for detailed analysis

Assignee Analytics — Number of Closed Issues bar chart

3. Number of Closed Bugs

The Number of Closed Bugs chart follows the exact same grouped-bar layout as the Closed Issues chart, but tracks bug-type tickets specifically. When no bugs match the active filters the chart displays an informative empty state rather than a blank canvas, guiding the user to adjust their selection.

Bug-specific tracking

Only counts backlog items tagged as bugs — separate from regular issues

Same grouped-bar format

Identical layout to Closed Issues, ensuring consistent visual language across charts

Empty state guidance

"No analytics data" illustration with a prompt to try a different date range, interval, or selection

Assignee Analytics — Number of Closed Bugs (no data empty state)

4. Spent Hours

The Spent Hours chart aggregates the time each assignee has logged against their tasks within the selected date window. It surfaces workload distribution at a glance — if one developer's bar consistently dwarfs others in the Daily view, it signals potential over-allocation before it becomes a bottleneck.

  • Time is pulled directly from hours logged on backlog issues assigned to each team member
  • Daily mode shows individual-day bars so spikes and gaps in effort are immediately visible
  • Weekly or Monthly intervals smooth out the data for higher-level capacity planning
  • The Y-axis unit is hours (decimal) matching the DPS time-logging format
  • Cross-referencing Spent Hours with Closed Issues reveals effort-vs-output efficiency
Assignee Analytics — Spent Hours bar chart

5. Code Lines

The Code Lines chart measures the volume of code each assignee has contributed within the selected period. Sourced directly from the linked GitHub repositories via the Code Builder integration, it presents raw lines written (additions) per assignee per time bucket. High daily values — such as the 4 300+ lines visible on 23 Apr — indicate intensive development sprints and can be correlated with commit history for deeper context.

Reading the Code Lines Chart

Data source

GitHub commit additions fetched via the Code Builder's repository integration

Y-axis scale

Automatically adjusts to the highest single-assignee value (e.g. 0 – 4 500)

Assignee colours

Consistent colour palette shared with all other Assignee Analytics charts

Full Size mode

Expands to full screen for reviewing high-value days in fine detail

Insight tip

Pair this chart with Spent Hours to calculate lines-per-hour as a rough velocity metric

Interval flexibility

Switch to Weekly or Monthly to see cumulative totals instead of daily spikes

Assignee Analytics — Code Lines bar chart

Administration & User Tracking

Maintain full control over your platform with role-based access, team controls, and real-time activity feeds.

User Management & Roles

Granular controls over Admin, Product Engineer, and Product Manager roles. Manage project invitations effortlessly.

User Tracking System

A specialized dashboard for monitoring active user sessions and comprehensive activity feeds.

Real-time Notifications

A persistent real-time feed ensuring you are alerted to project updates, task assignments, and crucial system events across your organization.

Administration ViewInsert Image from PDF here