Feature/custom legend components

[edbrett]

"They say you are what you eat, but I don't remember eating a flipping legend" - new GFW legend (probably)

The time has come to customise the WRI API legend with both styles and some fancy custom components to control our every complicated layers. Here is what we have:

• Timeline: a range slider timeline component that allows you to trim, filter and play canvas players on the map
• LayerListMenu: displays a list of togglable layers when the layer is type isMultiLayer, with additional info component nested inside.
• LayerSelectorMenu: displays a selector menu for when the layer is type isSelectorLayer
• LossStatement: a disclaimer for loss type layers
• Threshold Selector: a dropdown selector for layers with thres or threshold in their params_config

Other new components for a better life and a better you:

• Toggle: reimplemented the LayerToggle component with a new custom toggle for dynamic styling.
• Dropdown: this is now allows a native params to use the native browser selector

Additional needed tasks:

• Refactor datasets parsing and layer config building throughout app
• General styles for legend and menu
• Lots of bug fixes for layers and layersConfig
• Remove moment from any date parsing inside loops

[01painadam]

Works well! Two small things:

• I'm not sure about the timeline looping
• When you pause the timeline the bar looks like this:

You have to manually drag the bar to then end to see the full loss. Maybe it can default/reset to full when the start/end sliders are dragged?

In any case, awesome work! Looking pretty blazing 🔥

[benlaken]

Seems like GLAD has some strange behaviour still: when you toggle on the geographic coverage the GLADS layer timeline disappears

:

[benlaken]

Progress!

[edbrett]

I cant reproduce the error with GLADs losing the timeline but that might have been a deps issue. Regarding timeline, as this is an interaction design problem I am going to merge and we can work with Fausto on the use cases later on. Thanks for the good feedback 💯 .