GeneRelationships.tsx 3.89 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 21 22
import { useParams } from 'react-router-dom';
import { push, Push } from 'connected-react-router';

import * as urlFor from 'src/shared/helpers/urlHelper';
23 24

import { isEntityViewerSidebarOpen } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSelectors';
25
import { getSelectedGeneViewTabs } from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSelectors';
26 27 28 29 30

import Tabs, { Tab } from 'src/shared/components/tabs/Tabs';
import Panel from 'src/shared/components/panel/Panel';

import { RootState } from 'src/store';
31 32 33
import {
  GeneViewTabMap,
  GeneViewTabName,
Jyothish's avatar
Jyothish committed
34
  GeneRelationshipsTabName
35
} from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSlice';
36 37 38

import styles from './GeneRelationships.scss';

39 40
// 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
41 42 43 44
const tabsData = [...GeneViewTabMap.values()]
  .filter(({ primaryTab }) => primaryTab === GeneViewTabName.GENE_RELATIONSHIPS)
  .map((item) => ({
    title: item.secondaryTab,
Jyothish's avatar
Jyothish committed
45
    isDisabled: true // TODO FIXME (Use real data when available)
46
  })) as Tab[];
47 48 49 50 51 52 53

const tabClassNames = {
  selected: styles.selectedTabName
};

type Props = {
  isSidebarOpen: boolean;
54
  selectedTabName: GeneRelationshipsTabName | null;
55
  push: Push;
56 57 58
};

const GeneRelationships = (props: Props) => {
59
  const { genomeId, entityId } = useParams() as { [key: string]: string };
60 61
  let { selectedTabName } = props;

62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
  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);
  };

78 79 80 81
  // If the selectedTab is disabled or if there is no selectedtab, pick the first available tab
  const selectedTabIndex = tabsData.findIndex(
    (tab) => tab.title === selectedTabName
  );
82 83

  if (selectedTabIndex === -1 || tabsData[selectedTabIndex].isDisabled) {
84 85 86 87 88 89
    const nextAvailableTab = tabsData.find((tab) => !tab.isDisabled);

    selectedTabName =
      (nextAvailableTab?.title as GeneRelationshipsTabName) || null;
  }

90 91 92 93
  const TabWrapper = () => {
    return (
      <Tabs
        tabs={tabsData}
94
        selectedTab={selectedTabName}
95
        classNames={tabClassNames}
96
        onTabChange={changeTab}
97 98 99 100
      />
    );
  };

101 102 103 104 105 106 107 108 109
  const getCurrentTabContent = () => {
    switch (selectedTabName) {
      case GeneRelationshipsTabName.GENE_FAMILIES:
        return <>Gene families data</>;
      default:
        return <>Data for these views will be available soon...</>;
    }
  };

110 111 112 113
  return (
    <Panel
      header={<TabWrapper />}
      classNames={{
Andrey Azov's avatar
Andrey Azov committed
114
        panel: styles.panel,
115 116 117
        body: styles.panelBody
      }}
    >
118
      {getCurrentTabContent()}
119 120 121 122 123 124
    </Panel>
  );
};

const mapStateToProps = (state: RootState) => ({
  isSidebarOpen: isEntityViewerSidebarOpen(state),
125 126
  selectedTabName: getSelectedGeneViewTabs(state)
    .secondaryTab as GeneRelationshipsTabName
127 128 129
});

const mapDispatchToProps = {
130
  push
131 132 133
};

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