As with the existing refine.bio, when users visit the experiment page with the corresponding accession code, we want to be able to display the experiment details on the page.
Problem or idea
We'll implement the hook useExperiments which includes the states and methods required to render the experiment data in UI.
Each exposed method of this manager should correspond to the behavior of the application and indirectly communicates with the API using the refinebio-js helper.
The implementation details and pseudocode is as follows:
❚ State Management
The hook contains the following states.
experiment: (an object) the experiment data fetched from API
setExperiment: an async method for setting experiment
loading: (boolean) the loading indicator for the experiment data
setLoading: an async method for setting loading
❚ Constant / Method
These constants and methods are primarily used in the UI and each one corresponds to a specific application behavior.
(Parameters marked with * are required).
Constant
hasSamples: boolean
is true if the experiment contains any samples, otherwise false.
databaseNames: { [key: string]: string }
an object contains the supported database names
Method
getExperiment() return void
calls the helper's get method
calls setExperiment
getPlatformNames() return string[]
returns an array of platform names
getTechnologyNames() return string[]
returns an array of technology names
Example:
We'll make the API request to the experiments endpoint by calling getExperiment from the experiment page component:
getExperiment(accessionCode)
Solution or next step
Based on the above requirements, implement this hook for experiments.
Context
As with the existing refine.bio, when users visit the experiment page with the corresponding accession code, we want to be able to display the experiment details on the page.
Problem or idea
We'll implement the hook
useExperimentswhich includes the states and methods required to render the experiment data in UI.Each exposed method of this manager should correspond to the behavior of the application and indirectly communicates with the API using the refinebio-js helper.
The implementation details and pseudocode is as follows:
❚ State Management
The hook contains the following states.
experiment: (an object) the experiment data fetched from APIsetExperiment: an async method for settingexperimentloading: (boolean) the loading indicator for the experiment datasetLoading: an async method for settingloading❚ Constant / Method
These constants and methods are primarily used in the UI and each one corresponds to a specific application behavior.
(Parameters marked with * are required).
Constant
hasSamples: booleandatabaseNames: { [key: string]: string }Method
getExperiment() return voidgetmethodsetExperimentgetPlatformNames() return string[]getTechnologyNames() return string[]Example: We'll make the API request to the experiments endpoint by calling
getExperimentfrom the experiment page component:Solution or next step
Based on the above requirements, implement this hook for experiments.