BrowserBar.tsx 4.18 KB
Newer Older
1
import React, { FunctionComponent, Fragment } from 'react';
2
import { connect } from 'react-redux';
3 4

import { browserInfoConfig } from '../browserConfig';
5 6 7
import {
  toggleBrowserNav,
  updateDefaultChrLocation,
8 9
  updateChrLocation,
  toggleGenomeSelector
10
} from '../browserActions';
11
import { ChrLocation } from '../browserState';
12 13 14
import {
  getBrowserNavOpened,
  getChrLocation,
15
  getBrowserActivated,
16 17
  getDefaultChrLocation,
  getGenomeSelectorActive
18
} from '../browserSelectors';
19 20
import { RootState } from 'src/rootReducer';

Imran Salam's avatar
Imran Salam committed
21
import BrowserReset from '../browser-reset/BrowserReset';
22
import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector';
23
import BrowserTabs from '../browser-tabs/BrowserTabs';
24 25

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

27
type StateProps = {
28
  browserActivated: boolean;
29
  browserNavOpened: boolean;
30
  chrLocation: ChrLocation;
31
  defaultChrLocation: ChrLocation;
32
  genomeSelectorActive: boolean;
33 34 35
};

type DispatchProps = {
36
  toggleBrowserNav: () => void;
37
  toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
38
  updateChrLocation: (chrLocation: ChrLocation) => void;
39
  updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
40 41
};

Imran Salam's avatar
Imran Salam committed
42
type OwnProps = {
43
  changeBrowserLocation: () => void;
Imran Salam's avatar
Imran Salam committed
44
};
45 46 47

type BrowserBarProps = StateProps & DispatchProps & OwnProps;

Imran Salam's avatar
Imran Salam committed
48 49 50 51
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
  props: BrowserBarProps
) => {
  const { navigator, reset } = browserInfoConfig;
52

Imran Salam's avatar
Imran Salam committed
53 54 55 56
  return (
    <div className={styles.browserBar}>
      <div className={styles.browserInfo}>
        <dl className={styles.browserInfoLeft}>
57 58 59 60 61 62 63
          <BrowserReset
            changeBrowserLocation={props.changeBrowserLocation}
            details={reset}
            chrLocation={props.chrLocation}
            defaultChrLocation={props.defaultChrLocation}
            updateChrLocation={props.updateChrLocation}
          />
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
          {props.genomeSelectorActive ? null : (
            <Fragment>
              <dd className={styles.geneSymbol}>
                <label>Gene</label>
                <span className={styles.value}>BRAC2</span>
              </dd>
              <dd>
                <label>Stable ID</label>
                <span className={styles.value}>ENSG00000139618</span>
              </dd>
              <dd className="show-for-large">
                <label>Spliced mRNA length</label>
                <span className={styles.value}>84,793</span>
                <label>bp</label>
              </dd>
              <dd className="show-for-large">protein coding</dd>
              <dd className="show-for-large">forward strand</dd>
            </Fragment>
          )}
Imran Salam's avatar
Imran Salam committed
83 84
        </dl>
        <dl className={styles.browserInfoRight}>
85 86
          <BrowserGenomeSelector
            browserActivated={props.browserActivated}
87 88
            changeBrowserLocation={props.changeBrowserLocation}
            defaultChrLocation={props.defaultChrLocation}
89 90
            genomeSelectorActive={props.genomeSelectorActive}
            toggleGenomeSelector={props.toggleGenomeSelector}
91 92
            updateDefaultChrLocation={props.updateDefaultChrLocation}
          />
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
          {props.genomeSelectorActive ? null : (
            <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>
            </dd>
          )}
110 111
        </dl>
      </div>
112
      <BrowserTabs />
Imran Salam's avatar
Imran Salam committed
113 114 115
    </div>
  );
};
116

117
const mapStateToProps = (state: RootState): StateProps => ({
118
  browserActivated: getBrowserActivated(state),
119
  browserNavOpened: getBrowserNavOpened(state),
120
  chrLocation: getChrLocation(state),
121 122
  defaultChrLocation: getDefaultChrLocation(state),
  genomeSelectorActive: getGenomeSelectorActive(state)
123 124 125
});

const mapDispatchToProps: DispatchProps = {
126
  toggleBrowserNav,
127
  toggleGenomeSelector,
128
  updateChrLocation,
129
  updateDefaultChrLocation
130 131 132 133 134 135
};

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