Decoupling tabs in the experiment page and display them after validating

[upendrakumbham]

Decoupling tabs in the experiment page and display them after validating

Requirements:

- Result, supplementary and download

• tabs validate based on required props and common props
• Display a tab if all the validations are passed
• Don't display a tab if the validations failed and give a message to the user about why the tab is not visible to the user

Cell-plots part of the Results tab

• Validate as above tabs, and display or hide based on validation status.

MarkerGenes and Anatomogram tabs

• If marker genes are unavailable for E-ANND- (AnnData) experiments, don’t show the marker genes tab to the user.
• If anatomograms are not available for the experiments, hide the tab from the user. Don't give any information to the user, about why we are hiding the tab.
• Cell-plots tab for the (AnnData) experiments , ks clusters not available, we should enable tab without these ks (skip validation for the ks for Anndata experiments)

[lingyun1010]

The conditional operator hierachy looks good and we need to apply more props check for each tab I think.

[upendrakumbham]

The conditional operator hierachy looks good and we need to apply more props check for each tab I think.

Sure, thanks for the review and comment.

[upendrakumbham]

@Karoy, please review this PR. My local setup has throwing 8000 port already bind issue when I try to test this PR. I will fix it and test, meanwhile suggest issue local experiment.

[lingyun1010]

Please check the variable tabTypeComponent push logic, if you check/console log tabTypeComponent after each time you push a new item. You may find duplicate items as shown in my screenshot below. Secondly, when you try to click each tab the size of tabTypeComponent will increase too.

[upendrakumbham]

Hi both, I improved the code. Please re-review and add your comments.

[lingyun1010]

Good work and I have a few comments listed below:

1. Code format: we do not use ; to end any javascript code line
2. In the current implementation, we only check one key and one optionsKey, firstly can you explain what is the difference between these two props? Are they required and non-required? As far as I know, we have more than one required props at least for the Result tab. Please double check the other tabs and add more possible checks.
3. Given the above issue solved, we should remove the corresponding top ribbon fully, not only the ribbon title, here is a screenshot while I tested locally by removing ks from result tab, which may give you some clues about my comment.

[upendrakumbham]

Hi @lingyun1010, gathered all the required validation fields to validate and display their corresponding tabs.

Here is the document: Frontend_tab_validations.docx