eta: 2022-10-15
status: on track

#6

• #6
• #7

We recently moved from the maplight account to the starmaps one. We should disable the integration for the deprecated maplight.

I can do this on my side, just need a check.

cc @wilkyr31d @SgtPooki

Request: Add outer stroke to milestone cards hover state when there are children milestones. This will allow users to understand that they can click into each milestone. Relates to #61

Note: If there are no children milestones, there should be no hover state and the milestone card should remain in neutral state. Relates to #62

Stroke Color: #1FA5FF
Stroke Weight: 2px

Prototype recording:
Shows mouse hovering over each milestone card (in both overview and detailed view). On hover, an outer stroke appears.

I'll add in color guide here

Details:
From every page within StarMaps the user should be able to go to the source GitHub issue. Including it at the same level as the roadmap header will allow for easy access

Inspect in Figma

Text:
"View in GitHub"

Icon:
GitHub Icon

Color of text and icon:
Light Mode #313239

Dark Mode #D7D7D7

start:2022-09-14
eta:2022-09-23
status:on-track

Description

Design the data input/storage formats and protocols to be used, along with wireframes of visualizations we will target for MVP. Document in specification. May need to revisit parts of this later during implementation milestones, but the goal here is that we will at least settled enough fundamental questions that we can start building meaningful prototypes towards MVP.

Release-Date

23.09.2022

Criteria

• Data input/storage design aligned on with Juan and documented in specification
• Figma wireframes of visualization functionality for MVP aligned on with Juan

Status

Children

• #2
• #3
• #4

Need to support:

• dates (already supported)
• months
• quarters.

@wilkyr31d is going to update user guide with exact syntax and comment back here when done

Currently you can click-through on a milestone with no children, which results in an empty page with a message "not found"

Detail/simple view needs to be in the url

Could just be the instructions from GitHub but would be nice to have some guidance for users as to how to use the tool.

To get to the landing page/instructions from within the StarMaps tool, user should be able to click on logo in nav bar.

we need to update the naming in the following locations:

1. Site header / logo name
2. user guide

Old names found and their replacements

@juliaxbow is there anything else that needs calling out for this update?

eta: 2022-10-24

It seems that milestones are misaligned by 1 column relative to their end dates.

We are placing milestone rows onto the grid based on their ETA tag relative to the date column. Couple of things that can be happening:

• Calculations messing up which column to place the milestone
• Misconfiguration on our end when setting up the grid column/row CSS

We should investigate and fix.

ETA field should be required on all issues, except when navigating directly to the issue as the root node of the graph.

Description

Document the initial data format after alignment on proposal with Juan

Release-Date

eta:2022-09-30

It may take a while for roadmaps to populate. A skeleton loader will allow the user to get a sense of the content and have some visibility into system status. Examples below:

Dark Mode
Detailed View Skeleton Loader:

Overview Skeleton Loader:

Light Mode
Detailed View Skeleton Loader:

Overview Skeleton Loader:

when I navigate here: https://maplight.vercel.app/roadmap/github.com/ipfs/roadmap/issues/95

you'll see that the "libipfs" issue is not rendered where expected on the timeline

We must keep state throughout navigation, starting with the root roadmap and adding depth layers as the user navigates through milestones.

This way we can handle multi-level milestone navigation without having to know every parent of a specific roadmap.

Instead of rendering dates, we should render quarters as shown from figma

Error message implies that there is a problem with the app, instead of there being a problem with the issue that was entered. This is a User Error:

1. User who filled out the issue
   OR
2. User who entered an invalid issue into the app

planetarium url: https://maplight.vercel.app/roadmap/github.com/pln-planning-tools/MapLight/issues/36
issue: #36
App error message: Application error: a client-side exception has occurred (see the browser console for more information).

App screenshot

Browser console screenshot

Everything below this line is a YAML representation of the milestone; ensure you follow YAML formatting rules to make sure the roadmap visualizer can properly load this milestone

description: |
  #enter a short description of the milestone here
  Visualizer supports L1 visualizations
release-date: 2022-09-27 #date it will be released in format YYYY-MM-DD
release-criteria:
  - point tool at a roadmap node (issue) and it will draw the L1 visualization of that roadmap
status: NotStarted #status is either NotStarted, OnTrack, AtRisk, Blocked, Complete
children: #list of sub-milestones of this milestone
 - 

Everything below this line is a YAML representation of the milestone; ensure you follow YAML formatting rules to make sure the roadmap visualizer can properly load this milestone

description: |
  #enter a short description of the milestone here
  Visualizer supports L2 visualization of a node through query string
release-date: 2022-09-30 #date it will be released in format YYYY-MM-DD
release-criteria:
  - Put in a query string referencing a top level roadmap issue and visualizer displays the L2 visualization of that roadmap
status: NotStarted #status is either NotStarted, OnTrack, AtRisk, Blocked, Complete
children: #list of sub-milestones of this milestone
 - 

Back to parent roadmap link from this issue: https://maplight.vercel.app/roadmap/github.com/ipfs/roadmap/issues/102 is taking me to https://maplight.vercel.app/roadmap/github.com/pln-planning-tools/tests/issues/42

Overview

Users currently face slow loading times on the homepage when submitting a new URL to generate a roadmap. We should explore the root cause and fix this.

Possible improvements

• Decouple functional components from the API and reuse them on the client without having to query the API
  • https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#getserversideprops-or-api-routes
• Move from server-side rendering to client-side data fetching
  • https://nextjs.org/docs/basic-features/data-fetching/client-side

Open question

• When do we call this done?

Related discussions and proposals

• #103
• #180
• #181
• #182
• #271
• #325

Milestone label should be required on root issues

• As Root? (yes)
• As child? (no...? @wilkyr31d to clarify)

If a milestone label is not on a github issue whose URL is provided in the tool, we need to display an error.. What should that error say?

eta: 2022-09-17

In detail view you're seeing 2 levels of the DAG. When switching to simple view, you should then only see 1 level of the DAG, and that should be the "higher" of the 2 levels from detail view. Right now, it's showing the 2nd level of the DAG.

We should adapt our UI styles and adhere to the design specs from @juliaxbow.

MVP release of RoadmapViz with L1/L2 visualization, toggle between the two, and zoom in/out in L1s. Loads a roadmap by pasting link to github issue at the root of the roadmap.

eta: 2022-10-21
status: on-track

Child Milestones

• #1
• #9
• #8
• #10

eta: 2022-10-24
start: 2022-10-10
status: at-risk

Today marker is not currently working for the grid layout, and we have to find the best approach to render it.

We need to nail down our edge-cases and document exactly what errors we need to handle, and how they should be handled

Related docs/links

• https://nextjs.org/docs/advanced-features/custom-error-page
• https://www.notion.so/pl-strflt/6f954228b20f4a2c81bc04900fe1b4d9?v=1242b090607a4c0cb97f92c3e060a3b6

Known errors

• Invalid github issue URL provided
• Invalid children links in issue
• Invalid ETA
• ETA missing on an issue that is supposed to render on the timeline (top level and category level issues don't need ETA)
• No "starmaps" label on an issue

Good issues to test:

• pln-planning-tools/tests#46
• pln-planning-tools/tests#14
• ipfs/roadmap#102

Questions

1. does one error page suffice or do we need unique error pages for different errors?
   • To know that, we need to know what errors users may run across, and what UX we want them to have when they run into them

https://maplight.vercel.app/roadmap/github.com/ipfs/roadmap/issues/102

Description
This is a new recommendation to add the GitHub icon to each milestone card so that users can quickly open tabs and see details about each milestone.
Inspect in Figma

Behavior
Clicking on the GitHub icon within each milestone card will take you to the issue in GitHub

Icon
GitHub Icon

Color
Natural State: #8A9097
Hover State: #000000

Prototype

I have a placeholder in the prototype for now but this needs to be updated

Build wireframes for the UI

• #4

eta: 2022/09/28

See prototype recording.

1. Click on a milestone to view that milestone and subsequent children milestones
2. Breadcrumb trail should appear as header, with parent milestones clickable links to return to parent roadmap