BrowserBar.tsx 3.37 KB
Newer Older
Imran Salam's avatar
Imran Salam committed
1
import React, { FunctionComponent, RefObject } from 'react';
2
import { connect } from 'react-redux';
3
4

import { browserInfoConfig } from '../browserConfig';
5
import { toggleBrowserNav, updateDefaultChrLocation } from '../browserActions';
6
import { ChrLocation } from '../browserState';
7
8
9
10
11
import {
  getBrowserNavOpened,
  getChrLocation,
  getBrowserActivated
} from '../browserSelectors';
12
13
import { RootState } from 'src/rootReducer';

Imran Salam's avatar
Imran Salam committed
14
import BrowserReset from '../browser-reset/BrowserReset';
15
16
17
import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector';

import styles from './BrowserBar.scss';
18

19
type StateProps = {
20
  browserActivated: boolean;
21
  browserNavOpened: boolean;
22
23
24
25
  chrLocation: ChrLocation;
};

type DispatchProps = {
26
  toggleBrowserNav: () => void;
27
  updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
28
29
};

Imran Salam's avatar
Imran Salam committed
30
31
32
type OwnProps = {
  browserRef: RefObject<HTMLDivElement>;
};
33
34
35

type BrowserBarProps = StateProps & DispatchProps & OwnProps;

Imran Salam's avatar
Imran Salam committed
36
37
38
39
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
  props: BrowserBarProps
) => {
  const { navigator, reset } = browserInfoConfig;
Imran Salam's avatar
Imran Salam committed
40
  const browserImageEl = props.browserRef.current as HTMLDivElement;
41

Imran Salam's avatar
Imran Salam committed
42
43
44
45
  return (
    <div className={styles.browserBar}>
      <div className={styles.browserInfo}>
        <dl className={styles.browserInfoLeft}>
46
          <BrowserReset browserImageEl={browserImageEl} details={reset} />
Imran Salam's avatar
Imran Salam committed
47
48
49
50
          <dd className={styles.geneSymbol}>
            <label>Gene</label>
            <span className={styles.value}>BRAC2</span>
          </dd>
51
          <dd>
Imran Salam's avatar
Imran Salam committed
52
53
            <label>Stable ID</label>
            <span className={styles.value}>ENSG00000139618</span>
54
          </dd>
55
          <dd className="show-for-large">
Imran Salam's avatar
Imran Salam committed
56
57
58
            <label>Spliced mRNA length</label>
            <span className={styles.value}>84,793</span>
            <label>bp</label>
59
          </dd>
60
61
          <dd className="show-for-large">protein coding</dd>
          <dd className="show-for-large">forward strand</dd>
Imran Salam's avatar
Imran Salam committed
62
63
        </dl>
        <dl className={styles.browserInfoRight}>
64
65
66
67
68
          <BrowserGenomeSelector
            browserActivated={props.browserActivated}
            chrLocation={props.chrLocation}
            updateDefaultChrLocation={props.updateDefaultChrLocation}
          />
Imran Salam's avatar
Imran Salam committed
69
70
71
72
73
74
75
76
77
78
79
80
81
82
          <dd className={styles.navigator}>
            <button
              title={navigator.description}
              onClick={props.toggleBrowserNav}
            >
              <img
                src={
                  props.browserNavOpened
                    ? navigator.icon.selected
                    : navigator.icon.default
                }
                alt={navigator.description}
              />
            </button>
83
84
85
          </dd>
        </dl>
      </div>
86
      <dl className={`${styles.browserTabs} show-for-large`}>
Imran Salam's avatar
Imran Salam committed
87
        <dd>
88
          <button className={styles.active}>Genomic</button>
Imran Salam's avatar
Imran Salam committed
89
90
91
92
93
94
95
96
97
98
99
        </dd>
        <dd>
          <button>Variation</button>
        </dd>
        <dd>
          <button>Expression</button>
        </dd>
      </dl>
    </div>
  );
};
100

101
const mapStateToProps = (state: RootState): StateProps => ({
102
  browserActivated: getBrowserActivated(state),
103
104
105
106
107
  browserNavOpened: getBrowserNavOpened(state),
  chrLocation: getChrLocation(state)
});

const mapDispatchToProps: DispatchProps = {
108
109
  toggleBrowserNav,
  updateDefaultChrLocation
110
111
112
113
114
115
};

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