feat: Add charts to Comparison View (ET-99)

[johnkim-det]

Ticket

ET-99

Description

Adding "Scatter Plots" and "Heat Map" charts to comparison view on Experiments list page

Test Plan

• [ ] Select a multi-trial experiment to display in comparison view.
• [ ] Compare what's displayed in the Scatter Plots and Heat Map charts with what's displayed for the experiment's best trial on the Experiment Details page (Visualization tab, HP Scatter Plots and HP Heat Map sub-tabs)
• [ ] Make sure that the filters for selecting HPs, Metric, and Scale update the charts as expected

Checklist

• [ ] Changes have been manually QA'd
• [ ] User-facing API changes need the "User-facing API Change" label.
• [ ] Release notes should be added as a separate file under docs/release-notes/. See Release Note for details.
• [ ] Licenses should be included for new code which was copied and/or modified from any external code.

[netlify[bot]]

✅ Deploy Preview for determined-ui ready!

Name	Link
🔨 Latest commit	27cca86d84085a77c8a6d444dd39de366e6a9b1f
🔍 Latest deploy log	https://app.netlify.com/sites/determined-ui/deploys/664ca41bc7b123000809021b
😎 Deploy Preview	https://deploy-preview-9215--determined-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 85.72469% with 196 lines in your changes are missing coverage. Please review.

Project coverage is 40.78%. Comparing base (53edec9) to head (27cca86). Report is 18 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9215      +/-   ##
==========================================
- Coverage   45.28%   40.78%   -4.51%     
==========================================
  Files        1227      907     -320     
  Lines      154095   115425   -38670     
  Branches     2403     2672     +269     
==========================================
- Hits        69782    47074   -22708     
+ Misses      84121    68174   -15947     
+ Partials      192      177      -15     

Flag	Coverage Δ
harness	?
web	40.02% <85.72%> (+3.71%)	:arrow_up:

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

Files	Coverage Δ
.../src/components/CompareHyperparameters.settings.ts	100.00% <100.00%> (ø)
...rc/components/CompareHyperparameters.test.mock.tsx	100.00% <100.00%> (ø)
...eact/src/components/CompareParallelCoordinates.tsx	90.86% <100.00%> (+90.86%)	:arrow_up:
...bui/react/src/components/GalleryModalComponent.tsx	91.48% <100.00%> (+91.48%)	:arrow_up:
webui/react/src/components/ParallelCoordinates.tsx	90.51% <100.00%> (+90.51%)	:arrow_up:
webui/react/src/types.ts	99.68% <100.00%> (+<0.01%)	:arrow_up:
webui/react/src/services/decoder.ts	20.44% <0.00%> (-0.03%)	:arrow_down:
webui/react/src/components/ComparisonView.tsx	0.00% <0.00%> (ø)
...UPlot/UPlotScatter/useScatterPointTooltipPlugin.ts	46.38% <33.33%> (+46.38%)	:arrow_up:
webui/react/src/components/UPlot/UPlotChart.tsx	61.93% <16.66%> (+48.86%)	:arrow_up:
... and 6 more

... and 337 files with indirect coverage changes

[johnkim-det]

Will look at @hkang1's comments but he also let me know that he might not have time for more detailed review. originally asked him because he worked on this before, but now tagging @keita-determined and @thiagodallacqua-hpe too, can you please take a look as well?

[johnkim-det]

updated

• fix for horizontal space issue
• rename ExperimentHyperparametersSettings
• remove type assertions from ScatterPlots

[johnkim-det]

adding a commit to try adding string to UPlotData type, which allows removal of the as FacetedData assertion in CompareHeatMaps. Not sure if the additional changes required to UPlotScatter.utils and useScatterPointTooltipPlugin are right, though..

[johnkim-det]

Pushed fixes for @keita-determined's last review, and also was able to address what @hkang1 mentioned regarding categorical axis labeling.

The one remaining issue right now is what happens with Parallel Coordinates when experiments with different metrics/hyperparameters are compared (I think this is the cause rather than the "Pause" state). FWIW it is a pre-existing issue and arguably could be considered out of scope of this PR, but I'll spend some time looking at it -- if I really can't make progress on it I might push for a separate ticket to address.

[keita-determined]

@johnkim-det okay. i'll review the PR after fixing or file the issue.

[johnkim-det]

created https://hpe-aiatscale.atlassian.net/browse/ET-261 for the Parallel Coordinates issue.

[johnkim-det]

@keita-determined not sure if this will make sure it never happens, but added a change to Scatter Plots and Heat Maps charts to avoid width being too narrow for tooltip and creating a horizontal scrollbar.

As for the other issue, I think I'm seeing the same thing on latest-main so it's not part of this PR, but I created https://hpe-aiatscale.atlassian.net/browse/ET-264. Can you confirm it's the same thing you're seeing? I'm trying to add more info for reproduction or to try to identify the cause, would be nice if you could look at that too.

[keita-determined]

As for the other issue, I think I'm seeing the same thing on latest-main so it's not part of this PR, but I created https://hpe-aiatscale.atlassian.net/browse/ET-264. Can you confirm it's the same thing you're seeing? I'm trying to add more info for reproduction or to try to identify the cause, would be nice if you could look at that too.

looks like its the same issue