WV-3117 Charting Feature Styling Updates

[christof-wittreich]

Description

This change updates the styling of the Charting feature in the sidebar of Worldview to match the wireframes and the design comp. The changes are mostly on the sidebar itself, although the charting crop interface and the charting graph have been updated as well.

How To Test

1. git checkout wv-3117-charting-wireframe-implementation
2. npm ci
3. Modify line 7 in features.json to change charting from false to true
4. npm run build
5. npm run watch
6. Open a fresh instance of Worldview.
7. Verify that the default sidebar looks consistent with the designs, and that the Charting button is grayed-out.
8. Add a layer with a continuous color palette (Aerosol Index, Carbon Monoxide L3, etc.) and verify that the Charting button is no longer grayed-out.
9. Click the Charting button and verify that the Charting sidebar interface correctly reflects the designs.
10. Ensure that the functionality of the Charting interface still works properly (select date, change area of interest, change between one date and date range, etc.).
11. Add a layer with a non-continuous color palette (Deep Blue Aerosol Type) and verify that it does not appear in the list of layers during Charting.
12. Open the Comparison Mode and verify the sidebar interface correctly reflects the designs.

[Tomcariello]

Perhaps outside of the scope of this ticket, but the Charting Tool modal with instructions needs to be updated to reflect the changes made. There is no longer a pencil icon, there is no "Request Chart" button, etc.

[Tomcariello]

Can we put a hover effect on the "Layer" element within the Charting Mode window to display the full layer name? Due to the limited space the layer name may be cut off & we can have very similar layers.

For instance, if I have layers Carbon Monoxide (L2, 500 hPa, Night) & Carbon Monoxide (L2, 500 hPa, Day) the layer is listed as Carbon Monoxide (L2, 500 hPa, ...

I can also get on board with just removing this entirely since the selected layer is fairly obvious in the layer list above.

[Tomcariello]

I see a few issues with the AOI selection.

• On initially entering charting mode, Generating a chart correctly uses bbox: -90,-180,90,180 for the Entire Screen.
• Clicking the Entire Screen button presents an AOI widget. Generating a chart (without adjusting the AOI!) still uses bbox: -90,-180,90,180 instead of the coordinates of the AOI.
• Modifying the AOI & then Generating a chart correctly uses the AOI coordinates.
• Clicking the Area of Interest button reverts to the "Entire Screen" mode. However, Generating a chart incorrectly uses the AOI coordinates instead of bbox: -90,-180,90,180.

If I select an AOI & then click the map the AOI disappears & the Area of Interest Indicator reverts to "Entire Screen". Is this the behavior that we want?

[Tomcariello]

I am getting an error when trying to add the Deep Blue Aerosol Type layer from within charting mode. To reproduce:

• Load WV
• Load Carbon Monoxide layer
• Enter Charting mode
• Add Layer Deep Blue Aerosol Type NOAA-20
• Close add layer window
• See Error VIIRS_Aerosol_Type_Deep_Blue Is not a rendered palette

I see a bunch of 504 errors in the console that may have something to do with this but I do not see those errors when adding the layer in the normal mode.