Unverified Commit 7878c1e1 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub
Browse files

Gene view function / relationships tabs availability (#302)

* Gene view tabs availability

* Remove geneId

* Check for protein_Coding transcripts
parent 8f6d3e5d
Pipeline #78591 passed with stages
in 7 minutes and 38 seconds
......@@ -162,7 +162,7 @@ const GeneViewWithData = (props: GeneViewWithDataProps) => {
)}
{props.selectedGeneTabName === GeneViewTabName.GENE_FUNCTION && (
<GeneFunction geneId={props.gene.id} />
<GeneFunction gene={props.gene} />
)}
{props.selectedGeneTabName === GeneViewTabName.GENE_RELATIONSHIPS && (
......
......@@ -26,17 +26,20 @@ import Panel from 'src/shared/components/panel/Panel';
import ProteinsList from '../proteins-list/ProteinsList';
import { RootState } from 'src/store';
import { Gene } from 'src/content/app/entity-viewer/types/gene';
import { GeneFunctionTabName } from 'src/content/app/entity-viewer/state/gene-view/entityViewerGeneViewState.ts';
import styles from './GeneFunction.scss';
// TODO: the isDisabled flags are hardcoded here since we do not have any data available.
// We need to update this logic once we have the data available
const tabsData: Tab[] = [
{ title: 'Proteins' },
{ title: 'Variants' },
{ title: 'Phenotypes' },
{ title: 'Gene expression' },
{ title: 'Gene ontology', isDisabled: true },
{ title: 'Gene pathways' }
{ title: GeneFunctionTabName.PROTEINS },
{ title: GeneFunctionTabName.VARIANTS, isDisabled: true },
{ title: GeneFunctionTabName.PHENOTYPES, isDisabled: true },
{ title: GeneFunctionTabName.GENE_EXPRESSION, isDisabled: true },
{ title: GeneFunctionTabName.GENE_ONTOLOGY, isDisabled: true },
{ title: GeneFunctionTabName.GENE_PATHWAYS, isDisabled: true }
];
const tabClassNames = {
......@@ -45,13 +48,44 @@ const tabClassNames = {
};
type Props = {
geneId: string;
gene: Gene;
isNarrow: boolean;
selectedTabName: GeneFunctionTabName;
selectedTabName: GeneFunctionTabName | null;
setActiveGeneFunctionTab: (tab: string) => void;
};
const GeneFunction = (props: Props) => {
const {
gene: { transcripts }
} = props;
let { selectedTabName } = props;
// Check if we have at least one protein coding transcript
const proteinCodingTranscriptIndex = transcripts.findIndex(
(transcript) => transcript.biotype === 'protein_coding'
);
// Disable the Proteins tab if there are no transcripts data
// TODO: We need a better logic to disable tabs once we have the data available for other tabs
if (proteinCodingTranscriptIndex === -1) {
const proteinTabIndex = tabsData.findIndex(
(tab) => tab.title === GeneFunctionTabName.PROTEINS
);
tabsData[proteinTabIndex].isDisabled = true;
}
// If the selectedTab is disabled or if there is no selectedtab, pick the first available tab
const selectedTabIndex = tabsData.findIndex(
(tab) => tab.title === selectedTabName
);
if (selectedTabIndex === -1 || tabsData[selectedTabIndex].isDisabled) {
const nextAvailableTab = tabsData.find((tab) => !tab.isDisabled);
selectedTabName = (nextAvailableTab?.title as GeneFunctionTabName) || null;
}
const TabWrapper = () => {
const onTabChange = (tab: string) => {
props.setActiveGeneFunctionTab(tab);
......@@ -60,7 +94,7 @@ const GeneFunction = (props: Props) => {
return (
<Tabs
tabs={tabsData}
selectedTab={props.selectedTabName}
selectedTab={selectedTabName}
classNames={tabClassNames}
onTabChange={onTabChange}
/>
......@@ -68,11 +102,11 @@ const GeneFunction = (props: Props) => {
};
const getCurrentTabContent = () => {
switch (props.selectedTabName) {
switch (selectedTabName) {
case GeneFunctionTabName.PROTEINS:
return <ProteinsList geneId={props.geneId} />;
return <ProteinsList geneId={props.gene.id} />;
default:
return <></>;
return <>Data for these views will be available soon...</>;
}
};
......
......@@ -29,10 +29,16 @@ import { RootState } from 'src/store';
import styles from './GeneRelationships.scss';
// TODO: the isDisabled flags are hardcoded here since we do not have any data available.
// We need to update this logic once we have the data available
const tabsData: Tab[] = [
{ title: 'Orthologues' },
{ title: 'Gene families' },
{ title: 'Gene panels' }
{ title: GeneRelationshipsTabName.ORTHOLOGUES, isDisabled: true },
{ title: GeneRelationshipsTabName.PARALOGUES, isDisabled: true },
{ title: GeneRelationshipsTabName.GENE_FAMILIES, isDisabled: true },
{ title: GeneRelationshipsTabName.GENE_CLUSTERS, isDisabled: true },
{ title: GeneRelationshipsTabName.GENE_PANELS, isDisabled: true },
{ title: GeneRelationshipsTabName.GENE_NEIGHBOUTHOOD, isDisabled: true },
{ title: GeneRelationshipsTabName.GENE_SIMILARITY, isDisabled: true }
];
const tabClassNames = {
......@@ -41,11 +47,24 @@ const tabClassNames = {
type Props = {
isSidebarOpen: boolean;
selectedTabName: GeneRelationshipsTabName;
selectedTabName: GeneRelationshipsTabName | null;
setActiveGeneRelationshipsTab: (tab: string) => void;
};
const GeneRelationships = (props: Props) => {
let { selectedTabName } = props;
// If the selectedTab is disabled or if there is no selectedtab, pick the first available tab
const selectedTabIndex = tabsData.findIndex(
(tab) => tab.title === selectedTabName
);
if (!selectedTabIndex || tabsData[selectedTabIndex].isDisabled) {
const nextAvailableTab = tabsData.find((tab) => !tab.isDisabled);
selectedTabName =
(nextAvailableTab?.title as GeneRelationshipsTabName) || null;
}
const TabWrapper = () => {
const onTabChange = (tab: string) => {
props.setActiveGeneRelationshipsTab(tab);
......@@ -54,13 +73,22 @@ const GeneRelationships = (props: Props) => {
return (
<Tabs
tabs={tabsData}
selectedTab={props.selectedTabName}
selectedTab={selectedTabName}
classNames={tabClassNames}
onTabChange={onTabChange}
/>
);
};
const getCurrentTabContent = () => {
switch (selectedTabName) {
case GeneRelationshipsTabName.GENE_FAMILIES:
return <>Gene families data</>;
default:
return <>Data for these views will be available soon...</>;
}
};
return (
<Panel
header={<TabWrapper />}
......@@ -69,7 +97,7 @@ const GeneRelationships = (props: Props) => {
body: styles.panelBody
}}
>
<div>Panel content is coming...</div>
{getCurrentTabContent()}
</Panel>
);
};
......
......@@ -51,17 +51,21 @@ export enum GeneFunctionTabName {
export enum GeneRelationshipsTabName {
ORTHOLOGUES = 'Orthologues',
PARALOGUES = 'Paralogues',
GENE_FAMILIES = 'Gene families',
GENE_PANELS = 'Gene panels'
GENE_CLUSTERS = 'Gene clusters',
GENE_PANELS = 'Gene panels',
GENE_NEIGHBOUTHOOD = 'Gene neighbouthood',
GENE_SIMILARITY = 'Gene similarity within-genome'
}
export const defaultEntityViewerGeneViewUIState = {
selectedGeneTabName: GeneViewTabName.TRANSCRIPTS,
geneFunction: {
selectedTabName: GeneFunctionTabName.PROTEINS
selectedTabName: null
},
geneRelationships: {
selectedTabName: GeneRelationshipsTabName.ORTHOLOGUES
selectedTabName: null
}
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment