BrowserBar.tsx 3.31 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
5
6
import ContentEditable from 'react-contenteditable';

import { browserInfoConfig } from '../browserConfig';

7
8
9
10
11
import { toggleBrowserNav } from '../browserActions';
import { ChrLocation } from '../browserState';
import { RootState } from 'src/rootReducer';
import { getBrowserNavOpened, getChrLocation } from '../browserSelectors';

12
import styles from './BrowserBar.scss';
Imran Salam's avatar
Imran Salam committed
13
import BrowserReset from '../browser-reset/BrowserReset';
14

15
type StateProps = {
16
  browserNavOpened: boolean;
17
18
19
20
  chrLocation: ChrLocation;
};

type DispatchProps = {
21
22
23
  toggleBrowserNav: () => void;
};

Imran Salam's avatar
Imran Salam committed
24
25
26
type OwnProps = {
  browserRef: RefObject<HTMLDivElement>;
};
27
28
29

type BrowserBarProps = StateProps & DispatchProps & OwnProps;

Imran Salam's avatar
Imran Salam committed
30
31
32
33
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
  props: BrowserBarProps
) => {
  const { navigator, reset } = browserInfoConfig;
34
  const [chrCode, chrStart, chrEnd] = props.chrLocation;
Imran Salam's avatar
Imran Salam committed
35
  const browserImageEl = props.browserRef.current as HTMLDivElement;
36

Imran Salam's avatar
Imran Salam committed
37
38
39
40
  return (
    <div className={styles.browserBar}>
      <div className={styles.browserInfo}>
        <dl className={styles.browserInfoLeft}>
Imran Salam's avatar
Imran Salam committed
41
          <BrowserReset details={reset} browserImageEl={browserImageEl} />
Imran Salam's avatar
Imran Salam committed
42
43
44
45
          <dd className={styles.geneSymbol}>
            <label>Gene</label>
            <span className={styles.value}>BRAC2</span>
          </dd>
46
          <dd>
Imran Salam's avatar
Imran Salam committed
47
48
            <label>Stable ID</label>
            <span className={styles.value}>ENSG00000139618</span>
49
          </dd>
50
          <dd className="show-for-large">
Imran Salam's avatar
Imran Salam committed
51
52
53
            <label>Spliced mRNA length</label>
            <span className={styles.value}>84,793</span>
            <label>bp</label>
54
          </dd>
55
56
          <dd className="show-for-large">protein coding</dd>
          <dd className="show-for-large">forward strand</dd>
Imran Salam's avatar
Imran Salam committed
57
58
        </dl>
        <dl className={styles.browserInfoRight}>
59
          <dd>
60
            <label className="show-for-large">Chromosome</label>
61
62
63
64
65
66
67
            <ContentEditable
              html={`${chrCode}`}
              className="content-editable-box"
            />
            <ContentEditable html={`${chrStart}`} />
            <span> - </span>
            <ContentEditable html={`${chrEnd}`} />
Imran Salam's avatar
Imran Salam committed
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
          </dd>
          <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
102
103
104
105
106
107
108
109
110
111
112
113
const mapStateToProps = (state: RootState): StateProps => ({
  browserNavOpened: getBrowserNavOpened(state),
  chrLocation: getChrLocation(state)
});

const mapDispatchToProps: DispatchProps = {
  toggleBrowserNav
};

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