fix: cease many model fetch api calls in checkpoint tab

[keita-determined]

Description

WEB-1950

Test Plan

• Check if model fetch api is only called once in init phase
• Check if checkpoint delete and register still works

Commentary (optional)

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.

Ticket

[netlify]

✅ Deploy Preview for determined-ui ready!

Name	Link
🔨 Latest commit	cf50301
🔍 Latest deploy log	https://app.netlify.com/sites/determined-ui/deploys/65b2da8e8109280008d8cce3
😎 Deploy Preview	https://deploy-preview-8749--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]

Codecov Report

Attention: 48 lines in your changes are missing coverage. Please review.

Comparison is base (96b9064) 47.44% compared to head (cf50301) 42.33%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8749      +/-   ##
==========================================
- Coverage   47.44%   42.33%   -5.11%     
==========================================
  Files        1046      730     -316     
  Lines      166968   128338   -38630     
  Branches     2245     2240       -5     
==========================================
- Hits        79214    54337   -24877     
+ Misses      87595    73842   -13753     
  Partials      159      159              

Flag	Coverage Δ
harness	?
web	42.50% <29.41%> (-0.02%)	⬇️

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

Files	Coverage Δ
...ui/react/src/components/CheckpointModalTrigger.tsx	93.02% <100.00%> (+2.85%)	⬆️
...t/src/pages/TrialDetails/TrialDetailsWorkloads.tsx	19.37% <20.00%> (+0.08%)	⬆️
.../pages/ExperimentDetails/ExperimentCheckpoints.tsx	14.17% <23.07%> (-0.25%)	⬇️
...t/src/pages/ExperimentDetails/ExperimentTrials.tsx	13.15% <9.09%> (-0.07%)	⬇️
webui/react/src/hooks/useFetchModels.tsx	31.42% <31.42%> (ø)

... and 317 files with indirect coverage changes

[keita-determined]

ref: https://react.dev/learn/you-might-not-need-an-effect#initializing-the-application

[gt2345]

I'm not sure about this approach, if we've done everything else correct, and fetchModels run twice, then adding a top-level variable makes sense

[keita-determined]

I'm not sure about this approach, if we've done everything else correct, and fetchModels run twice, then adding a top-level variable makes sense

i used this approach. i think the api is already called once or twice for each register/delete component, but there are several register/delete components in a checkpoint page. Thats why api is called several times ((1 or 2 api calls) * checkpoint counts in a page).

[keita-determined]

im the wrong one probably. its not working right rn. let me investigate it more

[keita-determined]

@gt2345 The original issue is that src/components/CheckpointModalTrigger.tsx calls model fetch, so if there are 100 checkpoints in a page, the api is called at least 100 times. I moved the fetching api logic into the top level component.

[gt2345]

Works as expected.
Do you think we should put models in a store?

[keita-determined]

Works as expected. Do you think we should put models in a store?

for now, i dont think so because the usage of model is not as much as others.