GeneFunction.tsx 4.22 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

17 18
import React from 'react';
import { connect } from 'react-redux';
19 20
import { useParams } from 'react-router-dom';
import { push, Push } from 'connected-react-router';
21 22

import { isEntityViewerSidebarOpen } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSelectors';
23 24 25 26 27 28 29
import { getSelectedGeneViewTabs } from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSelectors';
import {
  GeneViewTabMap,
  GeneViewTabName,
  GeneFunctionTabName,
  View
} from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSlice';
30 31

import * as urlFor from 'src/shared/helpers/urlHelper';
32 33 34

import Tabs, { Tab } from 'src/shared/components/tabs/Tabs';
import Panel from 'src/shared/components/panel/Panel';
35
import ProteinsList from '../proteins-list/ProteinsList';
36 37

import { RootState } from 'src/store';
38
import { Gene } from 'src/content/app/entity-viewer/types/gene';
39 40 41

import styles from './GeneFunction.scss';

42 43
// 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
44 45 46 47
const tabsData = [...GeneViewTabMap.values()]
  .filter(({ primaryTab }) => primaryTab === GeneViewTabName.GENE_FUNCTION)
  .map((item) => ({
    title: item.secondaryTab,
48
    isDisabled: item.view !== View.PROTEIN
49
  })) as Tab[];
50 51

const tabClassNames = {
52
  default: styles.defaultTabName,
53 54 55 56
  selected: styles.selectedTabName
};

type Props = {
57
  gene: Gene;
58
  isNarrow: boolean;
59
  selectedTabName: GeneFunctionTabName | null;
60
  push: Push;
61 62 63
};

const GeneFunction = (props: Props) => {
64
  const { genomeId, entityId } = useParams() as { [key: string]: string };
65 66 67
  const {
    gene: { transcripts }
  } = props;
68 69 70 71 72 73 74 75 76
  const { selectedTabName } = props;

  const changeTab = (tab: string) => {
    const match = [...GeneViewTabMap.entries()].find(
      ([, { secondaryTab }]) => secondaryTab === tab
    );
    if (!match) {
      return;
    }
77

78 79 80 81 82 83 84 85
    const [view] = match;
    const url = urlFor.entityViewer({
      genomeId,
      entityId,
      view
    });
    props.push(url);
  };
86 87

  // Check if we have at least one protein coding transcript
88 89
  // TODO: use a more reliable indicator than the biotype field
  const isProteinCodingTranscript = transcripts.some(
90 91 92 93 94
    (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
95
  if (!isProteinCodingTranscript) {
96 97 98 99 100 101 102
    const proteinTabIndex = tabsData.findIndex(
      (tab) => tab.title === GeneFunctionTabName.PROTEINS
    );

    tabsData[proteinTabIndex].isDisabled = true;
  }

103 104 105 106
  const TabWrapper = () => {
    return (
      <Tabs
        tabs={tabsData}
107
        selectedTab={selectedTabName}
108
        classNames={tabClassNames}
109
        onTabChange={changeTab}
110 111 112 113
      />
    );
  };

114
  const getCurrentTabContent = () => {
115
    switch (selectedTabName) {
116
      case GeneFunctionTabName.PROTEINS:
117
        return <ProteinsList geneId={props.gene.id} />;
118
      default:
119
        return <>Data for these views will be available soon...</>;
120 121 122
    }
  };

123 124 125 126
  return (
    <Panel
      header={<TabWrapper />}
      classNames={{
Andrey Azov's avatar
Andrey Azov committed
127
        panel: styles.panel,
128 129 130
        body: styles.panelBody
      }}
    >
131
      {getCurrentTabContent()}
132 133 134 135 136 137
    </Panel>
  );
};

const mapStateToProps = (state: RootState) => ({
  isNarrow: isEntityViewerSidebarOpen(state),
138 139
  selectedTabName: getSelectedGeneViewTabs(state)
    .secondaryTab as GeneFunctionTabName
140 141 142
});

const mapDispatchToProps = {
143
  push
144 145 146
};

export default connect(mapStateToProps, mapDispatchToProps)(GeneFunction);