BrowserBar.tsx 2.45 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { FunctionComponent, memo } from 'react';
import ContentEditable from 'react-contenteditable';

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

import styles from './BrowserBar.scss';

type BrowserBarProps = {
  browserNavOpened: boolean;
  expanded: boolean;
  toggleBrowserNav: () => void;
};

Imran Salam's avatar
Imran Salam committed
14
15
16
17
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
  props: BrowserBarProps
) => {
  const { navigator, reset } = browserInfoConfig;
18

Imran Salam's avatar
Imran Salam committed
19
20
21
22
23
24
25
26
27
28
29
30
31
  return (
    <div className={styles.browserBar}>
      <div className={styles.browserInfo}>
        <dl className={styles.browserInfoLeft}>
          <dd className={styles.resetButton}>
            <button>
              <img src={reset.icon.default} alt={reset.description} />
            </button>
          </dd>
          <dd className={styles.geneSymbol}>
            <label>Gene</label>
            <span className={styles.value}>BRAC2</span>
          </dd>
32
          <dd>
Imran Salam's avatar
Imran Salam committed
33
34
            <label>Stable ID</label>
            <span className={styles.value}>ENSG00000139618</span>
35
          </dd>
36
          <dd className="show-for-large">
Imran Salam's avatar
Imran Salam committed
37
38
39
            <label>Spliced mRNA length</label>
            <span className={styles.value}>84,793</span>
            <label>bp</label>
40
          </dd>
41
42
          <dd className="show-for-large">protein coding</dd>
          <dd className="show-for-large">forward strand</dd>
Imran Salam's avatar
Imran Salam committed
43
44
        </dl>
        <dl className={styles.browserInfoRight}>
45
          <dd>
46
            <label className="show-for-large">Chromosome</label>
Imran Salam's avatar
Imran Salam committed
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
            <ContentEditable html={'13'} className="content-editable-box" />
            <ContentEditable html={'32,315,474 - 32,400,266'} />
          </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>
64
65
66
          </dd>
        </dl>
      </div>
67
      <dl className={`${styles.browserTabs} show-for-large`}>
Imran Salam's avatar
Imran Salam committed
68
        <dd>
69
          <button className={styles.active}>Genomic</button>
Imran Salam's avatar
Imran Salam committed
70
71
72
73
74
75
76
77
78
79
80
        </dd>
        <dd>
          <button>Variation</button>
        </dd>
        <dd>
          <button>Expression</button>
        </dd>
      </dl>
    </div>
  );
};
81

Imran Salam's avatar
Imran Salam committed
82
export default memo(BrowserBar);