Epic Branch Final Step: Merge Epic Branch into Staging

[bdls-jamal]

This branch should have all of the following updates:

1. Navigator view updated with routing changes
2. Interactions view updated with routing changes
3. All views available in the routing branch modified to handle loading image/page differently

[Yukthiw]

I'll write some docstrings for these functions

[bdls-jamal]

Perfect

[Yukthiw]

Suggested change

	error={ViewDataError.FAILED_TO_LOAD}
	error={error}

[Yukthiw]

This will always show the error screen instead of loading, I think the best thing to do here is pass the error value in, however LoadingState expects a ViewDataError so we need to make the changes that I suggested above.

[Yukthiw]

Another way is to just have a separate if condition for when theres an error (this is how the other views do it) which works as well and might be simpler for now (I think eventually we'll want to do it the first way since that way we can have more flexibility for how the query functions can error out.

[Yukthiw]

Nvm I see why you did it this way, the issue is that the chromosome loader doesn't error on unsuccesful response. If you can update the ChromosomeViewLoader to do that (see below) and just wrap it in a try-catch so that ViewDataError.FAILED_TO_LOAD is thrown whenever it errors out (like the above suggestion) . Ideally LoadingPage should just GenericError types but that's a future problem

const ChromosomeViewLoader = async (
  gene: GeneticElement | null,
  loadEvent: (progress: number) => void
) => {
  const poplar = false
  const species = poplar ? 'Populus_trichocarpa' : 'Arabidopsis_thaliana'
  const url = `https://bar.utoronto.ca/eplant${
    poplar ? '_poplar' : ''
  }/cgi-bin/chromosomeinfo.cgi?species=${species}`

  const chromosomeViewData: ChromosomeItem[] = await fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw ViewDataError.FAILED_TO_LOAD
      }
      return response.json()
    })
    .then((responseObj: ChromosomesResponseObj) => responseObj['chromosomes'])
  loadEvent(100)
  return {
    viewData: chromosomeViewData,
  }
}

[bdls-jamal]

I've making this change in all the views where applicable but I've noticed now as well that when no gene is selected yet all the views(aside from navigator and interactions) will hang on the loading page and not display a valid error. This is because there are no checks for !geneticElement like there is in nav and interactions. I know you mentioned wanting to simplify all of the checks but this has been my solution thus far:

if (!geneticElement) {
    return (
      <LoadingPage
        loadingAmount={loadAmount}
        gene={geneticElement}
        view={GeneInfoViewMetadata}
        error={ViewDataError.UNSUPPORTED_GENE}
      ></LoadingPage>
    )
  }

The reason it is working without this in the nav and interactions is because they check for !geneticElement in their loader functions. Not all the views utilize a loader so I've done it the above way for now. Let me know if I shouldn't do this or if you have another suggestion. I'm just going to commit like this and we can go from there

[Yukthiw]

This works! Good catch

[Yukthiw]

Suggested change

	const { data, isLoading, isError, error } = useQuery<ChromosomeViewerData>({
	const { data, isLoading, isError, error } = useQuery<ChromosomeViewerData, ViewDataError>({

[Yukthiw]

Suggested change

	return ChromosomeViewLoader(geneticElement, setLoadAmount)
	try{
	return ChromosomeViewLoader(geneticElement, setLoadAmount)
	}catch{
	throw ViewDataError.FAILED_TO_LOAD
	}

[Yukthiw]

Overall looks great thanks for all your hard work @bdls-jamal! Added a small comment regarding fixing the Chromosome view loading/error state and also a nitpick on using reactQuery instead of your own cache for the InteractionsView Gene data.

I couldn't test out the interactions and chromosome view due to cors errors but the Navigator View looks great!

[bdls-jamal]

@Yukthiw All of the views are implemented with error={ViewDataError.FAILED_TO_LOAD} among the other things you suggested to change in the Chromosome viewer. I think your suggestion to change is for all views doing it this way, correct? I'm going to change all of them and then if you could review that commit that would be awesome

[VinLau]

experiment-efp/:geneid? is preferred.

[bdls-jamal]

done, will be updated in the next commit

[VinLau]

interactions-view/:geneid? to be consistent

[bdls-jamal]

done, will be updated in the next commit

[VinLau]

Explain this counter @bdls-jamal.

[bdls-jamal]

loadEvent is part of the routing changes to help with determining the loading status/state, if you see cellefp loader example in the tutorial from Yukthi, it shows that we return a loadAmount(setLoadAmount). I believe @Yukthiw might be able to speak more on that

[Yukthiw]

Yeah it just controls the amount that the loadbar fills up when loading data. This was actually already part of how the getInitialData functions worked, I ported over the functionality to the loader functions in the routing change. I think most views just go from 0 -> 100 atm but for visual purposes its nice to have some sort of loading bar progress

[VinLau]

Reminder to @VinLau (myself) to work on tooltips

[VinLau]

Uncomment @Yukthiw once we figure out config to work on GH pages?