POC: search drawer stepper
During drawer analysis I came to conclusion that we would need some kind of stepper functionality. Idea is to dynamically swap components on each step. On clicking each of the component that navigates us further or backwards we need to set stepNumber and selectedValue along with type of the selected entity to choose correct component OR it's variant (drugs,chemicals,mirna are going to use the same components but different colors). Selected value must be carried between "views" (steps, components) to be able to select corresponding data from the store
Belove I present draft scheme how it might work.
type SelectedValueType = 'bioEntity' | 'drugs' | 'chemicals' | 'mirna'
type DrugValue = {
name: string,
valueType: 'drugs'
}
type ChemicalsValue = {
name: string,
valueType: 'chemicals'
}
type MirnaValue = {
name: string,
valueType: 'mirna'
}
type BioEntityValue = {
model: {name:string, id:string},
name: string
valueType: 'bioEntity'
}
// PROPOSED CHANGES TO DRAWER STORE
export type DrawerState = {
open: boolean;
drawerName: 'none' | 'search' | 'project-info' | 'plugins' | 'export' | 'legend';
searchDrawerState: {
currentStep: number;
selectedValue: DrugValue | ChemicalsValue | MirnaValue | BioEntityValue
}
};
const SearchDrawerWrapper =():JSX.Element =>{
const {currentStep, valueType } = useSelector()
return(
<div>
{step === 1 && <GroupedSearchResults/> } // first step for displaying search results, drawers etc
{step === 2 && valueType === 'bioEntity' && <ListOfBioEntities/>} // 2nd step for bioEntities aka content
{step === 2 && valueType === 'drugs' || 'chemicals' ||'mirna' && <ListOfDrugsChemicalsMirnaEntities/>}// 2nd step for drugs,chemicals,mirna
{step === 3 && valueType === 'bioEntity' && <BioEntityDetails/> } // last step for bioentity
{step === 3 && valueType === 'drugs' || 'chemicals' ||'mirna' && <DrugChemicalsMirnaDetails/> } // last step for drugs,chemicals,mirna
</div>
)
}