# Feature SPPM-309 - Overview widget for project phases and gates

Project: Stream Project Portfolio Management
Status: closed
URL: https://community.openproject.org/work_packages/SPPM-309

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | High |
| Target versions | 17.7.0 |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| SPPM-322 | Bug | No limits on how much a user can scroll out the timeline | closed |  | 17.7.0 |  | Modules and project features / Project overview, Modules and project features / Project overview / Widget, Frontend components and Primer design system, Modules and project features / Project lifecyle - phases and gates |
| SPPM-316 | Bug | Timeline is jumping initally | closed |  | 17.7.0 |  | Frontend components and Primer design system, Modules and project features / Project overview / Widget, Modules and project features / Project lifecyle - phases and gates |
| SPPM-315 | Bug | Accessible screen reader text is missing for project timeline widget | closed |  | 17.7.0 |  | Modules and project features / Project lifecyle - phases and gates, Modules and project features / Project overview / Widget, Frontend components and Primer design system, Accessibility |
| SPPM-314 | Bug | Gates are shown even if the phase is not fully configured | closed |  | 17.7.0 |  | Frontend components and Primer design system, Modules and project features / Project overview / Widget, Modules and project features / Project lifecyle - phases and gates |
| SPPM-313 | Bug | Blankslate for timeline widget is not consistent with the other ones | closed |  | 17.7.0 |  | Modules and project features / Project lifecyle - phases and gates, Modules and project features / Project overview / Widget, Frontend components and Primer design system |
| SPPM-312 | Bug | Tooltip for clustered gates shows wrong informtion | closed |  | 17.7.0 |  | Frontend components and Primer design system, Modules and project features / Project overview / Widget, Modules and project features / Project lifecyle - phases and gates |
| DREAM-783 | Bug | Timeline widget should be hidden when no phase is active in the project | closed |  | 17.7.0 |  | Frontend components and Primer design system |
| SPPM-321 | Bug | User needs to manually reload the page after updating the phases to see the changes on the widget timeline | confirmed |  | Product Backlog |  | Modules and project features / Project overview, Modules and project features / Project overview / Widget, Frontend components and Primer design system |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Modules and project features / Project overview, Modules and project features / Project lifecyle - phases and gates |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/kjzHe0qOLme1LXCjLoTBFV/Overview-and-Dashboard?node-id=2199-4187&p=f&t=SciSVLusnarlNhxQ-0 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Henriette Darge |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**Acceptance criteria**

*   On the project overview, there is a new widget called "Project timeline"
    
*   It contains a timeline chart representing the following objects
    
    *   Project phase
        
    *   Phase gates
        
*   On hover, a hover card is shown with the name of the phase/gate and the date(s) 
    
*   The elements use the configured colors for each phase/gate
    
*   It is read-only: The user cannot use drag&drop mechanisms to change the dates.
    
*   If there are no phases and gates, there is a Blankslate shown
    
    *   Title: "No life cycle phases"
        
    *   Description: "This widget is currently empty"
        
    *   Icon: view-timeline
        
*   If the user has no permissions to view project phases, the widget is hidden
    

**Technical notes**

*   We use the timeline library [visjs](https://visjs.org/)
    
    *   Chart.js is not suited for displaying timelines
        
    *   FullCalendar offers a timeline view but it is part of their pay-features
        

**Out of scope**

*   Editing attributes in the timeline view
    
*   Changes to list of project phases in the sidebar (separate work package)
    
*   Additional permissions to see or edit project phases and gates
    
*   PDF export (treated separately)
    
*   Highlight non-working days