The salcc_blueprint2 from consbio

Add more information about how to interpret whisker charts

Create pixel-level identify

Provide a specific mode for doing pixel level identify, and show crosshairs in middle of screen (possibly with magnifier).

use data tiling packed data approach (other issues)
update sidebar with only pixel level content, update a user pans or zooms

Centralize state into redux and use mapstatetoprops in tabs

Right now, state management is sort of spread around the application, which makes it harder to know the single source of truth on something, as well as better coordinating state of selected sub-views in indicators tab.

Change default tile of basemap chooser

Find a tile without the Bahamas, the light blue in satellite imagery is confusing ESRI users

Add SVG loader to webpag config

Need to make it much easier to load SVGs into the frontend.

Fix scrolling in sidebar when in desktop viewport

Seems limited to the indicators tab, other tabs have scrollbar in correct position.

Add pie charts

SALCC staff are unanimous that they want pie charts...

Victory charts may work well: https://formidable.com/open-source/victory/docs/victory-pie/

Add high and low labels to indicator labels

Implement first draft of report functionality

Minimum requirements:

Given an ID to a reporting unit:

fetch the correct JSON file from disk
render that into the template (mostly tables)

Map and charts will be handled in separate issues.

Fix blueprint justification

SALCC staff pointed out that the Blueprint 1.0 text doesn't match latest updates. Check that through the stack.

Search widget bugs

Search does not take into account clearing out input field by hitting backspace with keyboard.
Search also breaks when a unit is selected and the user tries to search.
Need to make sure that enter after typing triggers a full search, not autosuggest.

Update to version 2.2 throughout

update overview panel
make sure we are using 2.2 data throughout

Fix PWA behavior

Need to get service worker and other PWA related functionality working again

Add indicator details chart as tooltip instead of via click when in desktop mode

This is a nice to have rather than a hard requirement

Add Go back to previous / full extent button

From Mike L's review long ago.

Change SALCC to South Atlantic

For the credits: instead just say “South Atlantic Blueprint” (fix the broken link)
For citation: “The South Atlantic Blueprint Version 2.2 (2017)”

Add "high" and "low" labels to indicator tables

Per direction from SALCC, add a column on the left side of the indicator tables. This will have no column header.

the first (when sorted from highest value) row will have a value of (high) in this column, and the last row will have (low).

Add polyfills

Should be able to add from a babel plugin.

Also - test heavily on IE11

Migrate to Mapbox GL

Refactor global JS variables for ecosystems into a JSON file

Since we need this on both the backend and the frontend, a JSON file will be the easiest way to centralize the lookup of ecosystem to all other info.

Remove geopandas / pandas / fiona from Pipfile

Migrate icons to Material design icons

https://material.io/tools/icons/?style=baseline

Right now, it is hard to have the right set of icons that feel like they are part of a family.

Info / Home: https://material.io/tools/icons/?icon=home&style=baseline
Map: https://material.io/tools/icons/?icon=map&style=baseline
or https://material.io/tools/icons/?icon=language&style=baseline

Search location: https://material.io/tools/icons/?icon=pin_drop&style=baseline
or https://material.io/tools/icons/?icon=not_listed_location&style=baseline
or https://material.io/tools/icons/?icon=search&style=baseline

Priorities: https://material.io/tools/icons/?icon=extension&style=baseline
or https://material.io/tools/icons/?icon=stars&style=baseline
or https://material.io/tools/icons/?icon=verified_user&style=baseline
or https://material.io/tools/icons/?icon=flag&style=baseline
https://material.io/tools/icons/?icon=pie_chart&style=baseline

Indicators: https://material.io/tools/icons/?icon=bar_chart&style=baseline
Threats: https://material.io/tools/icons/?icon=warning&style=baseline
or https://material.io/tools/icons/?icon=new_releases&style=baseline
or https://material.io/tools/icons/?icon=report&style=baseline

Partners: https://material.io/tools/icons/?icon=people&style=baseline

reset icon: https://material.io/tools/icons/?icon=cancel&style=baseline

Add geonames search plugin to desktop version

Fix Internet Explorer

Create draft report template

Leave all maps & images as TODOs.

The template will include boilerplate and links from SALCC.

Sections:

Priority

map (TODO)
priority categories (boilerplate)
priority chart (TODO)
priority table with caption. Table will include acres in each category and percent of summary unit (100 * acres / total acres of summary unit)

Indicators

Ecosystem specific indicators

Ecosystem chart (TODO)
Ecosystem table with caption
list of ecosystems (below)

Ecosystem

Ecosystem name and percent of summary unit (format: heading)
list of indicators in this ecosystem (below)

Indicator

Indicator name (format: italic gray text)
Indicator description
Indicator chart and caption (TODO)
Indicator table and caption

Threats

TODO: data is not yet prepared

Partners

Partner type (Regional Conservation Plans, Statewide Conservation Plans, Land Trusts)

list of plans (links)

Ownership

Conserved lands ownership

Ownership chart (TODO)
Ownership table and caption

Land protection status

protection chart
protection table and caption

Change color of watershed boundaries based on basemap

Need to choose a color that is easily visible against basemap.

Might be easier to do this after migrating to mapbox GL

Prevent tables from flowing across page break

Tables run across page breaks. It's possible to prevent this within MS Word by checking the "Keep with next" box in the Paragraph window, but setting that within document creation is still a mystery.

Upgrade react, redux, and all the other dependencies

Use different layout for sidebar when in desktop mode

Should be laid out more similarly to the existing simple viewer

Incorporate threats data

Amy @ SALCC provided new threats data and direction on use of line charts for displaying these.

Add hover to watersheds in desktop view

Also consider showing watersheds at a lower zoom level than mobile.

Text where ecosystem has no indicators

Decision needed: How should we indicate that a ecosystem has no indicators listed? Just listing the name and the % of area then moving on to the next ecosystem name (a heading of the same level) looks like something is missing/went wrong.

Currently I'm appending (No indicators for this ecosystem.) after the ecosystem name and %.

Split indicator tables by good condition / not good condition

Thresholds are here:
https://docs.google.com/spreadsheets/d/1tYyafF3KVD5vtO7gDrwX_YFAbisOJn4w3ZYbXm-IenI/edit#gid=0

/cc @EstiShay this has implications for reporting that we'll discuss once I get firm direction from SALCC

Add rows to indicator tables for "good" conditions

Some (but not all) indicators have a "good" condition threshold.

This is stored in the goodCondition key in the config/ecosystems.json file on master. This refers to the value of that indicator that is in good condition: any indicator values >= this value are considered in good condition.

See table on page 6 of the example report from SALCC for an example of how they'd like this used. We don't have to exactly replicate the styling of the "total in good condition" "total not in good condition" rows, but we need to add those rows to the table and style them so they stand out.

You will have to calculate the total in good condition and the total not in good condition.

I handled it this way in the frontend:

    const hasGoodThreshold = goodThreshold !== null
    let goodPercents = null
    let notGoodPercents = null
    let totalGoodPercent = 0
    let totalNotGoodPercent = 0
    if (hasGoodThreshold) {
        goodPercents = percents.filter(p => p.value >= goodThreshold)
        notGoodPercents = percents.filter(p => p.value < goodThreshold)
        totalGoodPercent = goodPercents.reduce((total, p) => total + p.percent, 0)
        totalNotGoodPercent = notGoodPercents.reduce((total, p) => total + p.percent, 0)
    }

Note: in this case, percents is an array of objects with a value, label, and description. You'll have to adapt to your particular data.
You only need to add these to the table if the goodThreshold key is present for an indicator.

Experiment with adding "avg" to indicator charts or add info text

Users are confused about the indicator charts representing the average for the watershed or marine block. Help them be clear on this.

Also make the triangle dark gray instead of orange.

Refactor position of search and info widgets when in mobile view

These just aren't working great in the header. Put them in the footer as tabs instead.

When Search is selected from the footer, show the search input + cancel in the header.

Otherwise, header shows the SALCC logo and site name for context.

Ultimately, we need to find a better way of accessing info about isMobile from the main reducer. Either we leverage redux-thunk to do so: https://stackoverflow.com/questions/42239302/accessing-a-part-of-reducer-state-from-one-reducer-within-another-reducer

Or we better consolidate information about where we are bringing that tab in at all.

Add map tab for both initial and selected watershed views

Apply mobile design to desktop version

Remaining tasks:

Make font 16px
make basemaps icon larger
bring back zoom controls on desktop version
add conditional rendering based on width. Store width in app as state, bind to browser resize.
add over or click interaction to indicators view
restructure ecosystems into scrollable list on desktop
add barcharts for ecosystems when on desktop?

consbio / salcc_blueprint2 Goto Github PK

salcc_blueprint2's People

Contributors

Watchers

Forkers

salcc_blueprint2's Issues