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

import { browserInfoConfig } from '../browserConfig';
5
6
import { TrackType } from '../track-panel/trackPanelConfig';

7
8
import {
  toggleBrowserNav,
9
  toggleGenomeSelector,
10
11
  selectBrowserTab,
  toggleDrawer
12
} from '../browserActions';
13
import { ChrLocation } from '../browserState';
14
15
16
import {
  getBrowserNavOpened,
  getChrLocation,
17
  getBrowserActivated,
18
  getDefaultChrLocation,
19
  getGenomeSelectorActive,
20
  getDrawerOpened,
21
  getSelectedBrowserTab,
22
23
  getObjectInfo,
  getTrackPanelModalOpened
24
} from '../browserSelectors';
25
26
import { RootState } from 'src/rootReducer';

Imran Salam's avatar
Imran Salam committed
27
import BrowserReset from '../browser-reset/BrowserReset';
28
import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector';
29
import BrowserTabs from '../browser-tabs/BrowserTabs';
30
31

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

33
type StateProps = {
34
  browserActivated: boolean;
35
  browserNavOpened: boolean;
36
  chrLocation: ChrLocation;
37
  defaultChrLocation: ChrLocation;
38
  drawerOpened: boolean;
39
  genomeSelectorActive: boolean;
40
  objectInfo: any;
41
  selectedBrowserTab: TrackType;
42
  trackPanelModalOpened: boolean;
43
44
45
};

type DispatchProps = {
46
  selectBrowserTab: (selectedBrowserTab: TrackType) => void;
47
  toggleBrowserNav: () => void;
48
  toggleDrawer: (drawerOpened: boolean) => void;
49
  toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
50
51
};

Imran Salam's avatar
Imran Salam committed
52
type OwnProps = {
53
  dispatchBrowserLocation: (chrLocation: ChrLocation) => void;
Imran Salam's avatar
Imran Salam committed
54
};
55
56
57

type BrowserBarProps = StateProps & DispatchProps & OwnProps;

Imran Salam's avatar
Imran Salam committed
58
59
60
61
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
  props: BrowserBarProps
) => {
  const { navigator, reset } = browserInfoConfig;
62
  const { objectInfo } = props;
63

64
65
66
67
68
69
70
71
72
73
74
  const getBrowserInfoClasses = () => {
    let classNames = styles.browserInfo;

    if (props.drawerOpened === true) {
      classNames += ` ${styles.browserInfoGreyed}`;
    }

    return classNames;
  };

  const getBrowserNavIcon = () => {
75
    if (props.drawerOpened === true) {
76
      return navigator.icon.grey;
77
78
    } else if (props.browserNavOpened === true) {
      return navigator.icon.selected;
79
80
81
82
83
    } else {
      return navigator.icon.default;
    }
  };

84
85
86
87
88
89
90
91
  const toggleNavigator = () => {
    if (props.drawerOpened === true) {
      return;
    }

    props.toggleBrowserNav();
  };

Imran Salam's avatar
Imran Salam committed
92
93
  return (
    <div className={styles.browserBar}>
94
      <div className={getBrowserInfoClasses()}>
Imran Salam's avatar
Imran Salam committed
95
        <dl className={styles.browserInfoLeft}>
96
          <BrowserReset
97
            dispatchBrowserLocation={props.dispatchBrowserLocation}
98
99
            chrLocation={props.chrLocation}
            defaultChrLocation={props.defaultChrLocation}
100
101
            details={reset}
            drawerOpened={props.drawerOpened}
102
          />
103
104
105
106
          {props.genomeSelectorActive ? null : (
            <Fragment>
              <dd className={styles.geneSymbol}>
                <label>Gene</label>
107
                <span className={styles.value}>{objectInfo.obj_symbol}</span>
108
109
110
              </dd>
              <dd>
                <label>Stable ID</label>
111
                <span className={styles.value}>{objectInfo.stable_id}</span>
112
113
114
              </dd>
              <dd className="show-for-large">
                <label>Spliced mRNA length</label>
115
116
117
                <span className={styles.value}>
                  {objectInfo.spliced_length}
                </span>
118
119
                <label>bp</label>
              </dd>
120
              <dd className={`show-for-large ${styles.nonLabelValue}`}>
121
                {objectInfo.bio_type}
122
123
              </dd>
              <dd className={`show-for-large ${styles.nonLabelValue}`}>
124
                {objectInfo.strand} strand
125
              </dd>
126
127
            </Fragment>
          )}
Imran Salam's avatar
Imran Salam committed
128
129
        </dl>
        <dl className={styles.browserInfoRight}>
130
131
          <BrowserGenomeSelector
            browserActivated={props.browserActivated}
132
            dispatchBrowserLocation={props.dispatchBrowserLocation}
133
            defaultChrLocation={props.defaultChrLocation}
134
            drawerOpened={props.drawerOpened}
135
136
            genomeSelectorActive={props.genomeSelectorActive}
            toggleGenomeSelector={props.toggleGenomeSelector}
137
          />
138
139
          {props.genomeSelectorActive ? null : (
            <dd className={styles.navigator}>
140
              <button title={navigator.description} onClick={toggleNavigator}>
141
                <img src={getBrowserNavIcon()} alt={navigator.description} />
142
143
144
              </button>
            </dd>
          )}
145
146
        </dl>
      </div>
147
148
149
150
151
      <BrowserTabs
        drawerOpened={props.drawerOpened}
        genomeSelectorActive={props.genomeSelectorActive}
        selectBrowserTab={props.selectBrowserTab}
        selectedBrowserTab={props.selectedBrowserTab}
152
        toggleDrawer={props.toggleDrawer}
153
        trackPanelModalOpened={props.trackPanelModalOpened}
154
      />
Imran Salam's avatar
Imran Salam committed
155
156
157
    </div>
  );
};
158

159
const mapStateToProps = (state: RootState): StateProps => ({
160
  browserActivated: getBrowserActivated(state),
161
  browserNavOpened: getBrowserNavOpened(state),
162
  chrLocation: getChrLocation(state),
163
  defaultChrLocation: getDefaultChrLocation(state),
164
  drawerOpened: getDrawerOpened(state),
165
  genomeSelectorActive: getGenomeSelectorActive(state),
166
  objectInfo: getObjectInfo(state),
167
168
  selectedBrowserTab: getSelectedBrowserTab(state),
  trackPanelModalOpened: getTrackPanelModalOpened(state)
169
170
171
});

const mapDispatchToProps: DispatchProps = {
172
  selectBrowserTab,
173
  toggleBrowserNav,
174
  toggleDrawer,
175
  toggleGenomeSelector
176
177
178
179
180
181
};

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