Implement Basic Loading & Error Handling

[b-f-chan]

Implement basic loading (e.g. screens, data, etc.) and error handling for the J-Browse component

Specific Scenarios to Handle:

Sam's notes in italics

Setup:

• [x] Add & configure the following settings in DMS-UI beforehand:
  • [x] # of files limit (5)
  • [x] File size limit (Not needed. Jbrowse handles large files with range requests, and also limits the size of range requests)
  • [x] Allowed file types (BAM, VCF)

Loading:

• [x] Loading when making first request to Score to fetch URLs
• [x] Actual J-Browse loading (J-Browse accepting files and actual rendering the viz)
• [x] TBD --> Do we need to design or use a new loader? (@samrichca to decide later after we implement actual component) (used existing spinner)
• [x] Loading when checking for file compatibility with Jbrowse

Errors from props/parent component:

Right now these errors are handled in DMS-UI so that the errors fit its UI.

• [x] Too many files (need to define this threshold)
• [x] File size (need to define this threshold) Jbrowse handles large files
• [x] Wrong file types (BAM, VCF)
• [x] No data
• [ ] Other prop errors: limits set too high, empty URL strings, etc. Jbrowse wrapper should fail gracefully with descriptive errors. Should Jbrowse wrapper care about these things? TBD

Errors from API:

Added exception handling for API requests in DMS-UI

• [ ] Files not found - some files loaded
• [ ] Files not found - no files loaded
• [ ] Timeout
• [ ] File was retrieved successfully, but for some reason isn’t appropriate for Jbrowse usage

[samrichca]

Errors:

• Jbrowse launch button has a compatibility check & shows the following errors in the tooltip:
  • 0 files selected
  • >5 files selected
  • 1-5 files selected, but 0 compatible
  • Default error "Something went wrong" if there's an API issue.
• On the Jbrowse tab:
  • Compatibility is checked again. If there's an error, the page shows a red message box and no Jbrowse visualization or table.
  • For the Jbrowse visualization, we can assume the user's selection is safe because it's been checked twice. There's an error message for API issues.
  • Adding a PR to add an error message to the table as well.
• When there's API errors, the page shows a default error and the full error is logged to the console.

Tooltip error (compatibility & API errors)

Error on Jbrowse tab (compatibility & API errors)

Error on Jbrowse selected files table (API errors only)

[b-f-chan]

All errors tested in QA successfully, closing