projectdrawdown/global-research-platform

Drawdown Global Research Platform - UI

global-research-platform's Issues

Improve the look and feel of the advanced control drawer

Load Testing

We need to do load testing with K6.

Load testing for the /calculate endpoint in particular. Graph performance of 10, 50, 100 simultaneous requests.

As a user, I can browse a listing of all resource tables

As a user, I can see solutions not included in my portfolio with opacity in sector level nav drawer

Time Estimate:

Problem:
it is now only showing the "my profile" items on the sector technology nav for Electricity Generation. Users are unable to see technologies which they are not focused on, but are still impacting their workbooks. Enabling users to see these with opacity gives them a fuller picture.

Description/ solution:
Desired state should show my profile items at the top and all others below. Technologies that have not been selected should still be visible with opacity once solution set has been saved.
See design here: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1550%3A16993

Additional Notes:
See Ethan's slack comment https://colab-coop.slack.com/archives/G01ANEKHCQP/p1616436280039100

Migrate codebase to a new repo for application with 2 subfolders for API and UI

Need: Simplify the project for open source contributor by having the App code to be in one project (UI and API) and able to run it easily by following through the documentation

Acceptance criteria:

• Migrated the UI project into a /ui directory
• Migrated the Solutions API code into a /api directory
• Root directory to have comprehensive readme on how to run the project
• Able to run all depenedncy via Docker

Header for Workbook Overview Page

https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1971%3A122156

The header should include the following elements:

The calculated state of the run button in the top right corner

Blue bar

Author name

About/ description

Created date (optional - nice to have) - can close without

workbook name displays at top of page

As a user, I can see a detailed view of a single resource table

Work book header is overlapping on some screen sizes

Time Estimate: 2 hours

Problem: Overlapping header and project details for some screen sizes. Tested on (2560 x 1600) size screen. (13 inch mac).

Description:

Acceptance Criteria:
There should be no overlapping text in header on standard desktop screens.

Additional Notes:
This application is not yet tailored to small or medium screen sizes. Most users will be viewing from desktop initially.

Researcher user journey documentation

Create user stories for the actions a researcher needs to do the make the updates they need to create a new workbook with new and custom data.

As a user, I can see numeric results of calculation outputs

Time Estimate: 4 hours

Problem: Right now we can't debug calculation outputs easily.

Background/ Description: This will be an initial implementation (quick and dirty) so that we have the visibility we need. From there we can go into a UX round.

Acceptance Criteria: As a user, I can access UI element that shows calculation outputs for a technology

Adoption advanced controls dropdown not working/ not sending API call

Time estimate:

Problem:
As a user, when I select the advanced control drawer button, I see the calculation buttons spin, but the drawer fails to open. This is limited to SOME not all solutions. GEOTHERMAL POWER is one of the solutions NOT working.

Acceptance criteria: Users must be able to click the button for adoption advanced controls and have drawer open as expected.

Implement Sector Level TAM Dashboard

Time:

Problem:
Currently, user is unable to view TAM for the entire electricity generation sector. This will be a helpful view.

Description:
See design here: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1608%3A117237

Acceptance criteria: For phase 2, editing the solution adoption % takes user to adoption dashboard for that individual solution.

Add code standard doc to web UI

Document some code formatting, programming paradigm, and code organization standards. E.g. linting spec, what sorts of reducers to make, and where major files should go.

As a user, I can see dashboard visualization elements defined on roll-over

Time Estimate:

Problem: Currently, as a user, I'm not sure what all the visualizations on my solution dashboard mean.

Acceptance criteria:
As a user, when I roll-over a visualization such as TAM, Adoption, or Market capture, the elements (lines, colors) are defined. For example, When I roll-over the dotted line in the TAM visualization, "reference source" displays.

As a user, I can see in app tool tips in the advanced drawer

Time estimate:

Problem: As a user, when I click on the help icons in the advanced drawer, no tool tips appear. I need direction and support regarding the variables I am viewing.

Description:
When I click on a help icon, the tool tip appears as shown in the design.

Tool tips that should appear:
Finances drawer - first cost: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1550%3A26720
Adoption - Base adoption.
BLOCKED - need tool tip text for adoption drawer.

Use Statistical Correction should be on by default

Time Estimate:

Acceptance criteria: As a user, when I go to any VMA table, "use corrected" should always be checked by default

See example below under emissions advanced drawer:

When I edit my workbook, I see my solutions above unselected solutions shown with opacity

Problem:
A visual distinction is needed during the editing process between solutions which have already been selected as part of my solution set and solutions which have not.

See design here: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1550%3A16993

Acceptance criteria:
As a user, when I am editing my portfolio, I see my selected solutions shown above unselected solutions. Unselected solutions display with opacity.

UI - Lifetime savings card - solution card dashboard

Time Estimate: 4 hours

Problem/ Need:
Lifetime savings chart must show accurate data and the display should reflect design.

Steps to replicate:

• Create workbook
• View biogas solution

Acceptance criteria:
As a user, I can see the lifetime savings graph and data update after I press the run button.

Design link: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-
id=1550%3A23130

• Current state looks like a bar chart rather than line char as in design

- Display issue: units "$" and "b" should be smaller than values. - for many other solutions , NaN shows

Refactor data_config.js: extract and clean up

The current data_config.js file has a mix of configuration data, static app data, and pre-cached server data.

At the very least these should be clearly extracted from one another: config data should truly be config data, and should be in something like a config.defaults.js file, static data might go into a file like app-data.static.js or similar.

As a user, I can see app tool tips in the advance drawers with complex information

Problem: as a user, I want a tooltip that can show me the functionality of the variables I intend to use.

Description:
When clicking the help icon, a tooltip should appear with the relevant information

Tooltip to appear:

Quick Guide: Variable Input Form
https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI---%5BFigma-Chakra-UI%5D?node-id=1550%3A26758

Note:

• Look into using an annotation library like https://react-annotation.susielu.com/ for the latter cases
• Feel free to make / propose alterations to the tooltip content and layout that would make implementation easier. Examples could include using numbers or letters to label elements and then defining them in the text.

As a user, I can edit details to an already created workbook.

Problem:
As a user, after I have created my workbook, I cannot edit the workbook details, "about" text as they are shown in my workbook overview heading.

Acceptance criteria:
Details as they are shown in the workbook overview heading should be editable by user.

Designs do not exist for this feature. Suggesting that an edit icon appear next to the "about" text on hove.

As a user, I experience a product tour upon first viewing of a page

Problem:
As a user, I need help text that allows me to understand the application through a tutorial. The current state is a screenshot and doesn't look great.

Suggested UX:
Upon first viewing: User is taken through help text one note at a time.
In help mode, user can hover over an element and see help text.

Background:
We have some designs on tool tips here:

Workbook overview tutorial: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1804%3A998

Sidebar Navigation: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1736%3A128813

Solution dashboard: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1736%3A129211

Acceptance criteria:

As a user, I experience a tutorial of the application upon first viewing of a page.

I can also enter help mode and experience that tutorial at any time. This is found in sidebar navigation as grey question mark icon.

UI - Implement"thumbprint" visualization on workbook overview cards

These are visible on the /workbooks page https://stage.pdd.colab.coop/workbooks

.... but instead of the treemap showing on the cards, we are going to show the circular visualization:

Unselected solutions display is new row in sector level dashboard view

Problem:
More visual distinction is needed between "my solutions" and unselected solutions in a given sector.
Unselected solutions should display in a new row and be shown with opacity.

In the current state, unselected solutions show with opacity, but in the same row.

See current state:

See Designs:
https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1550%3A16993

Acceptance criteria:
When viewing a sector (such as electricity generation) my selected solutions show at the top.
Unselected solutions show beginning in a separate row below and display with opacity.

As a user, I can upload a new adoption source

Time estimate: @sutjin - please estiamte

Need: As a user, I can upload a new adoption scenario source

Description:

There is not a design for this. Please infer the design using the style guide, the icon below, and this design reference: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1369%3A0

Acceptance criteria: As a user, I can upload my own adoption scenario source.

Open question: This is specific to scenario source and not on reference source? If so - is there another way/ space where new reference sources can be added? @eethann

Transfer Web UI documentation in bitbucket to github

Time estimate:

Problem: Currently the majority of our documentation related to the Web UI is still in bitbucket. We need to transfer this over to github.

bitbucket repo: https://bitbucket.org/colabcoop-ondemand/drawdown-solutions-web-ui/src/master/

Goal: Open Source developers should be able to access and collaborate on webUI code in github.

As a user, I can update a new TAM (market source)

Time Estimate: 7 hours

Need: Researchers should be able to upload a new TAM source.

Description:
I do not have accurate/ up to date wireframes/ desings for this.

Please use this icon with adjustments for color using style guide:

Open questions which need resolution:
Does this ticket enable users to update a new scenario source? @eethann
Are they able to do this in both the quick input (on dashboard) AND in the advanced drawer? @eethann
Where should the icon go in reference to the dropdown? @ralphcutler

Solution dashboard bottom visualization

Time Estimate:

Problem: User is still unable to see bottom footer visualization as designed.

Description:

See Design here: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1550%3A22249

• As a user, I see that this visualization is updated when I press the run button to reflect changes to my solution.

• As a user, I can move the scrubber to see the emissions and sink changes over time in the thumbprint section

• Start point for visualization should be 2014, and the endpoint is 2060. This is a desired deviation from the design.

Additional Notes:
The visualization displays total CO2 produced for sources and total absorbed for sink.

JIRA ticket link: https://colabcoop.atlassian.net/browse/PDD-286

Code Documentation for Web UI

Initialize documentation system and commit initial documentation of existing code.

Documentation should cover:

• All components, their properties, related state objects, and usage notes.
• API methods
• Redux stores, thunks, and reducers
• Higher order components (e.g. form data bindings) and their intent and example usage
• Directory structure and code organization

It might also include developer documentation and component styleguides, depending on the solution chosen. These are not necessary for this ticket, though, and might be independent of the code docs.

As a user I can see the results of calculations using uploaded Adoption and TAM data

This is the complement to #5 and #53. Once we have an API endpoint to create new resource entities, how are those used in the calculations.

First step is to research the options for passing adoption and TAM data dynamically to the calculate functions, instead of using the data loaded from the Solutions API CSVs at init.

As a user, I can upload a custom VMA

Time estiamte: 17 hours

Proposed change:
As a researcher, I am able to upload a new VMA table.

Description:
You will not find this designed in current approved designs. However, there is a design for this in an archived version. Please use this section of this archived version to direct your implementation: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1256%3A65707

Open needs for this:

• Template for researchers to use when uploading a new VMA table. @eethann - can you support this element?

Currently there is the API ability to upload a new VMA table.

Acceptance criteria:

As a user, I can upload my own data to mean, high, and low

Question: Can I upload my data source also?

Developer documentation for the Web UI

Time Estimate:

Update developer docs in the web ui.

Should include

• overview of app and overall system architecture

• code standards and linter configurations

• process for forking and making pull requests

• summary of code organization and structure

[]community standards (code of conduct, etc.)

Update code standards for Web UI

This relates to issue #15

Document some code formatting, programming paradigm, and code organization standards. E.g. linting spec, what sorts of reducers to make, and where major files should go.

(subtask of above-mentioned issue)

Checklist of what should be included in code standard:

• Naming Conventions
• File and folder Naming and Organization
• Formatting and Indentation
• Commenting and Documenting
• Classes and Functions
• Testing

For featured workbooks, disable all inputs and display prompt to clone canonical user workbooks

Time Estimate: 4 hour

Problem: As a user, when I land on a Drawdown featured workbook, it is not clear to me that I can not edit the solution.

Description of need:

As a user, if I select a featured workbook (such as PDS-1, PDS-2, or PDS-3) I am brought to a view of the solution set which notifies me that I cannot change the existing workbook, but will clone and build off of copy.

Acceptance criteria:

• Users can see that inputs are disabled and they are unable to edit these workbooks
• There should be a notification that the workbook cannot be edited, but can be cloned and added to your portfolio.
• As a user, I am prompted to copy workbook and am dropped in the details view of the create workbook flow: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1588%3A0

Additional Notes: Refactor the quick inputs so that we use the same row input

Disable run button while calculation is running

Time estimate:

Problem: Currently a user can initiate multiple simultaneous calculation requests by clicking the run button multiple times while it's spinning.

Acceptance criteria: The run button should be disabled for clicks while a calculation is running.

Run button - "click to update" state

When a user updates a field on the dashboard, changing the emissions calculation, the old number is replaced by a "click to update" state of the run button.

Figma link: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1725%3A43

As a user, I can upload ref grid emission sources

Is this a needed element for the resource library?

Implement Comparison Spark Charts

Problem: Current designs show a "comparison spark chart" in the advanced controls drawer. This chart shows the active input and mean for a variable input in comparison to coal, oil, and gas.

Description:

See figma designs here: https://www.figma.com/file/QImAyi1guE4AICGMN7uODK/Drawdown-Portfolio-UI-Figma-Chakra-UI?node-id=1550%3A26758

Acceptance criteria: Chart should appear in advanced drawer as designs and reflect accurate comparison to the mean for selected data source and to coal, oil, and gas.

Code coverage badge in Readme.md and Contributing.md is incorrect

The badge is measuring code coverage of the master branch of the solutions repo. It should either be removed, or should accurately reflect code coverage for this repo. (I removed it from the solutions repo docs.)

Workbook Detail cards display accurate "last updated" data

Time Estimate: 3 hours

Problem:
Currently, workbook detail cards display April 2021 as last updated date, even for workbooks created in June.

Acceptance criteria: "last updated" element of workbook detail cards displays accurate data/ correct month for last update.

Update default workbooks to PDS-1, PDS-2, PDS-3

Time Estimate: 1 hour

Problem: We are not displaying the up to date terminology for Drawdown featured workbooks.

Description/ Background:
We need to update the Drawdown Featured workbooks to PDS-1, PDS-2, and PDS-3.

The names track as follows:
PDS-1 = Plausible
PDS-2 = Drawdown
PDS-3 = Optimum

Acceptance criteria:
As a user, when I view the default workbooks, I should see the names as above (PDS-1, PDS-2, PDS-3)

Use consistent header throughout: Workbook and logout options available throughout UX

Time Estimate: 1.5 hours

Problem: I cannot access "workbooks" or "logout" from workbook overview pages (featured and mine). This leads to UX issues where I am unable to get back to other workbooks. Current Workbook Header replaces standard page header and does not include navigation.

Acceptance criteria: As a user, i see a consistent header throughout by which I am able to access the /workbooks page and logout.

Associated JIRA ticket: https://colabcoop.atlassian.net/browse/PDD-302

Additional Notes:

• This is a deviation from design, necessary for user workflows
• Should either use the same component to keep nav and other elements intact, or should render workbook info via portal into header. Could also just include workbook info conditionally in header if workbook is defined in state.

As a researcher, I can change the values for the conventional baseline

Loader appears centered on page

Time Estimate: 2 hours

Problem: Currently the loading icon is appearing at the bottom of the page. This looks odd.

Acceptance criteria:
Loading icon should appear in the center of the page or in the top 1/3 of page.

Link to associated JIRA ticket: https://colabcoop.atlassian.net/browse/PDD-370

Quick issue test

test

Test Issue

Quick test of labels

As a user, I can tag projections based on level of ambition

You should be able to tag it as baseline, conservative, ambitious, 100% adoption of solutions.

How can we build toward categorization? More discovery needed here.

Deploy to staging should hook to github rather than bitbucket

Need: Completing transitioning the code base from bitbucket to github repo.

Acceptance criteria: Updates to staging are hooked to github rather than bitbucket.

As a user, I can easily navigate variables from within the advanced drawer

Problem:
As a user, when I am in the advanced drawer for a given variable (TAM for example) I have to return to the solutions dashboard in order to see the advanced drawer for another variable (finances for example).

Desire: I would like to be able to see different variable details without leaving the advanced drawer.

Details: There is no design for this. I imagine it like a hamburger menu at the top of the advanced drawer.

Next step: UX/ Design

Implement API endpoint to upload resource files

Time Estimate: 10 hours

Allow users to upload arbitrary resource files and store them in the database. Should accept both Adoption and Market projection CVSs.

Extend the /vma_csv endpoint concept as a model, but for POST /resource/{entity}.

Requirements:

• Does not currently need to pass this data to the solutions API, just accept, store, and list in future lists of that resource entity type.