Gene view function / relationships tabs availability (#302)

* Gene view tabs availability

* Remove geneId

* Check for protein_Coding transcripts

src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx

@@ -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 && (

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-function/GeneFunction.tsx

@@ -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...</>;
     }
   };
 

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-relationships/GeneRelationships.tsx

@@ -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>
   );
 };

src/ensembl/src/content/app/entity-viewer/state/gene-view/entityViewerGeneViewState.ts

@@ -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
   }
 };