GeneFunction.tsx 4.37 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
import { getSelectedGeneViewTabs } from 'src/content/app/entity-viewer/state/gene-view/entityViewerGeneViewSelectors';
import { setGeneViewName } from 'src/content/app/entity-viewer/state/gene-view/entityViewerGeneViewActions';

import * as urlFor from 'src/shared/helpers/urlHelper';
27
28
29

import Tabs, { Tab } from 'src/shared/components/tabs/Tabs';
import Panel from 'src/shared/components/panel/Panel';
30
import ProteinsList from '../proteins-list/ProteinsList';
31
32

import { RootState } from 'src/store';
33
import { Gene } from 'src/content/app/entity-viewer/types/gene';
34
35
36
37
38
import {
  GeneViewTabMap,
  GeneViewTabName,
  GeneFunctionTabName
} from 'src/content/app/entity-viewer/state/gene-view/entityViewerGeneViewState.ts';
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
48
49
const tabsData = [...GeneViewTabMap.values()]
  .filter(({ primaryTab }) => primaryTab === GeneViewTabName.GENE_FUNCTION)
  .map((item) => ({
    title: item.secondaryTab,
    isDisabled: false
  })) 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
77
78
79
80
81
82
83
84
  const { selectedTabName } = props;

  const changeTab = (tab: string) => {
    const match = [...GeneViewTabMap.entries()].find(
      ([, { secondaryTab }]) => secondaryTab === tab
    );
    if (!match) {
      return;
    }
    const [view] = match;
    const url = urlFor.entityViewer({
      genomeId,
      entityId,
      view
    });
    props.push(url);
  };
85
86

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

    tabsData[proteinTabIndex].isDisabled = true;
  }

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

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

122
123
124
125
126
127
128
129
  return (
    <Panel
      header={<TabWrapper />}
      classNames={{
        panel: props.isNarrow ? styles.narrowPanel : styles.fullWidthPanel,
        body: styles.panelBody
      }}
    >
130
      {getCurrentTabContent()}
131
132
133
134
135
136
    </Panel>
  );
};

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

const mapDispatchToProps = {
142
143
  push,
  setGeneViewName
144
145
146
};

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