feat: Add Deck.gl Contour Layer

[Mattc1221]

SUMMARY

Adds the Contour Layer from deck.gl here

Related SIP: #23553

Design Decisions:

The addition of the Contour layer follows the structure of existing deck.gl layers to maintain readability and consistency within the codebase.

Structure:

The directory superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/ contains the Front end structure for the contour layer visualization.

• controlPanel configures the form to grab relevant information specified by the user to create and tune the contour layer.
• Contour.tsx contains the functions that define the Contour Layer and get relevant data.
• index.ts serves as the wrapper for the contour component and provides a metadata function to grab information to describe what this visualization is/does.

The contour layer requires a unique input of "contours". Contours are defined as either Isolines or Isobands (more information here).

• Isolines require three fields, threshold, color, strokeWidth. threshold defines a value to separate aggregated values on the Map. strokeWidth defines the width of the line in pixels that separates these values. color is just the color of that line.
• Isobands are similar to Isolines, except the threshold takes 2 values to create polygons on the map instead of lines.

To account for this unique structure, I added a new control panel input component:

The added files for this input component are located under superset-frontend/src/explore/components/controls/ContourControl/:

• types.ts contains all the types needed for this new component.
• index.tsx controls the stateful variables that control adding/editing/removing contours.
• ContourOption.tsx displays added contours and an appropriate tooltip.
• ContourPopoverControl.tsx defines a popup with appropriate inputs for creating/editing an isoline and isoband.
• ContourPopoverTrigger.tsx wraps the ContourPopoverControl and controls when it is displayed.

The Back End code for this feature follows the back end code for other deck.gl visualizations as well, providing functions to structure queried data for the Heatmap component.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

New Visualization Recording:

Screen.Recording.2023-05-20.at.11.50.42.PM.mov

Changing order of contours

Screen.Recording.2023-05-21.at.12.11.38.AM.mov

TESTING INSTRUCTIONS

Set up

1. Start Superset
2. Click on the Charts tab at the top of the screen
3. Click the + Chart button at the top right
4. Load a dataset with geo-positional data (longitude/latitude)
5. Search the charts for Deck.gl Contour or click on the Map chart category
6. Select deck.gl Contour and hit Create New Chart
7. Update the Longitude & Latitude field to the correct columns
8. Select a Weight function
9. Select Create Chart
10. There should now be a contour layer present on the screen
    • Note: the underlying map component may not be visible if the MAP_BOX_API_KEY is not set. To set it follow the instructions here
    • Note: It may look like the contour layer is not working if the Cell Size parameter is not large enough. For example, using the flights dataset, you should increase Cell Size to 50000.

Check that the following cause an immediate update

• Check that increasing/decreasing the Cell Size control
• Try adding a new isoline by clicking Click to add new contour
• Try adding a new isoband by clicking Click to add new contour
• Try clicking an existing contour option and ensure that a popover appears with the appropriate fields pre-filled
• Delet an existing contour option

Other Checks:

• Check that hovering a contour option and check that the tooltip shows appropriate information
• Check that in the contour popover, the submit button is disabled when:
  • Not all fields are filled
  • All fields are filled, but a non-integer is entered in any of the textfields
• Check all descriptions make sense
• Check that changing the order of contours (by drag and drop) updates their z-index.
  • If there are overlapping contours, contours at the top of the list may be hidden by contours beneath them.
  • Note: z-fighting may occur depending on how many contours are defined/how many are displayed. However this is an issue with the library itself.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #24154 (231620b) into master (5bdb774) will decrease coverage by 0.13%.
The diff coverage is 14.36%.

❗ Current head 231620b differs from pull request most recent head b3326cb. Consider uploading reports for the commit b3326cb to get more accurate results

@@            Coverage Diff             @@
##           master   #24154      +/-   ##
==========================================
- Coverage   69.08%   68.95%   -0.13%     
==========================================
  Files        1906     1913       +7     
  Lines       74159    74333     +174     
  Branches     8161     8196      +35     
==========================================
+ Hits        51235    51260      +25     
- Misses      20805    20954     +149     
  Partials     2119     2119              

Flag	Coverage Δ
hive	53.94% <66.66%> (+<0.01%)	⬆️
javascript	55.60% <11.51%> (-0.19%)	⬇️
mysql	79.39% <66.66%> (-0.01%)	⬇️
postgres	79.48% <66.66%> (-0.01%)	⬇️
presto	53.83% <66.66%> (+<0.01%)	⬆️
python	83.47% <66.66%> (-0.01%)	⬇️
sqlite	78.04% <66.66%> (-0.01%)	⬇️
unit	54.69% <66.66%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...preset-chart-deckgl/src/layers/Contour/Contour.tsx	0.00% <0.00%> (ø)
...d/plugins/legacy-preset-chart-deckgl/src/preset.js	100.00% <ø> (ø)
.../controls/DndColumnSelectControl/OptionWrapper.tsx	62.79% <0.00%> (-3.07%)	⬇️
.../explore/components/controls/TextControl/index.tsx	86.66% <ø> (ø)
...-frontend/src/explore/components/controls/index.js	100.00% <ø> (ø)
...plore/components/controls/ContourControl/index.tsx	8.57% <8.57%> (ø)
.../controls/ContourControl/ContourPopoverControl.tsx	10.38% <10.38%> (ø)
.../controls/ContourControl/ContourPopoverTrigger.tsx	14.28% <14.28%> (ø)
...mponents/controls/ContourControl/ContourOption.tsx	21.05% <21.05%> (ø)
...et-chart-deckgl/src/layers/Contour/controlPanel.ts	50.00% <50.00%> (ø)
... and 2 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[Mattc1221]

@kgabryje, @rusackas and @villebro

Since you reviewed #23551 I was wondering if you would take a look at this PR as well?

[Mattc1221]

Thanks @kgabryje for the detailed review, I believe I've addressed all of your comments!

• I can change the contour type from isoline to isoband, but I can't do the opposite - when I edit an isoband, change the tab to isoline and type value, it only edits the lower threshold of isoband. I think user could expect that the contour becomes an isoline.
• The popover should close after clicking save
• Maybe we should have some kind of validation to ensure that upper threshold is larger than lower threshold?

You should now be able to change isobands to isolines, the Save button closes the form, I've added some validation messages and disabled saving when the lower threshold is greater than or equal to the upper threshold. The tooltip should now appear with the lat/long coordinates as well as the threshold for whatever contour the mouse is hovering.

Screen.Recording.2023-08-25.at.2.05.36.AM.mov

Note: I will re-request review once all tests are passing!

[kgabryje]

Thanks for updates @Mattc1221! 1 last thing - for some reason, the inputs unfocus after typing 1 character, which makes typing more than 1 digit difficult. I didn't notice that happening before the latest changes

Screen.Recording.2023-08-28.at.13.18.56.mov

[Mattc1221]

@kgabryje I'm sorry about the delay!

The last comment on the unfocusing issues should now be fixed. I had pulled out the tabs sections into functions within the component. This was causing them to get re-rendered on every change and thus lose focus. I've put them inside of the return statement of the surrounding component and that seems to have fixed the issue

Screen.Recording.2023-09-28.at.10.44.51.PM.mov

[Mattc1221]

@villebro @kgabryje @rusackas @justinpark @michael-s-molina I was wondering if one of you could take a final pass through this PR. All of the previous comments have been addressed and the PR should be ready to go.

[kgabryje]

LGTM! Thank you @Mattc1221 for the hard work... and patience 😄

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.