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

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

7
import { toggleBrowserNav, toggleGenomeSelector } from '../browserActions';
8
import { ChrLocation } from '../browserState';
9
10
11
import {
  getBrowserNavOpened,
  getChrLocation,
12
  getBrowserActivated,
13
  getDefaultChrLocation,
14
15
16
17
18
  getGenomeSelectorActive
} from '../browserSelectors';
import { getDrawerOpened } from '../drawer/drawerSelectors';
import { getEnsObjectInfo } from 'src/ens-object/ensObjectSelectors';
import {
19
  getSelectedBrowserTab,
20
21
  getTrackPanelModalOpened,
  getTrackPanelOpened
22
23
24
} from '../track-panel/trackPanelSelectors';
import { selectBrowserTab } from '../track-panel/trackPanelActions';
import { toggleDrawer } from '../drawer/drawerActions';
Andrey Azov's avatar
Andrey Azov committed
25
import { RootState } from 'src/store';
26

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
  ensObjectInfo: any;
41
  selectedBrowserTab: TrackType;
42
  trackPanelModalOpened: boolean;
43
  trackPanelOpened: boolean;
44
45
46
};

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

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

type BrowserBarProps = StateProps & DispatchProps & OwnProps;

Imran Salam's avatar
Imran Salam committed
59
60
61
62
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
  props: BrowserBarProps
) => {
  const { navigator, reset } = browserInfoConfig;
63
  const { ensObjectInfo } = props;
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  const [showBrowserInfo, toggleShowBrowserInfo] = useState(true);

  const changeBrowserInfoToggle = () => {
    const [, chrStart, chrEnd] = props.defaultChrLocation;

    if (
      props.genomeSelectorActive === true ||
      (chrStart === 0 && chrEnd === 0)
    ) {
      toggleShowBrowserInfo(false);
    } else {
      toggleShowBrowserInfo(true);
    }
  };

  useEffect(() => {
    changeBrowserInfoToggle();
  }, [props.defaultChrLocation]);

  useEffect(() => {
    changeBrowserInfoToggle();
  }, [props.genomeSelectorActive]);
86

87
88
89
  const getBrowserInfoClasses = () => {
    let classNames = styles.browserInfo;

90
91
92
93
    if (props.trackPanelOpened === false) {
      classNames += ` ${styles.browserInfoExpanded}`;
    }

94
95
96
97
98
99
100
101
    if (props.drawerOpened === true) {
      classNames += ` ${styles.browserInfoGreyed}`;
    }

    return classNames;
  };

  const getBrowserNavIcon = () => {
102
    if (props.drawerOpened === true) {
103
      return navigator.icon.grey;
104
105
    } else if (props.browserNavOpened === true) {
      return navigator.icon.selected;
106
107
108
109
110
    } else {
      return navigator.icon.default;
    }
  };

111
112
113
114
115
116
117
118
  const toggleNavigator = () => {
    if (props.drawerOpened === true) {
      return;
    }

    props.toggleBrowserNav();
  };

Imran Salam's avatar
Imran Salam committed
119
120
  return (
    <div className={styles.browserBar}>
121
      <div className={getBrowserInfoClasses()}>
Imran Salam's avatar
Imran Salam committed
122
        <dl className={styles.browserInfoLeft}>
123
          <BrowserReset
124
            dispatchBrowserLocation={props.dispatchBrowserLocation}
125
126
            chrLocation={props.chrLocation}
            defaultChrLocation={props.defaultChrLocation}
127
128
            details={reset}
            drawerOpened={props.drawerOpened}
129
          />
130
          {showBrowserInfo ? (
131
132
133
            <Fragment>
              <dd className={styles.geneSymbol}>
                <label>Gene</label>
134
                <span className={styles.value}>{ensObjectInfo.obj_symbol}</span>
135
136
137
              </dd>
              <dd>
                <label>Stable ID</label>
138
                <span className={styles.value}>{ensObjectInfo.stable_id}</span>
139
140
141
              </dd>
              <dd className="show-for-large">
                <label>Spliced mRNA length</label>
142
                <span className={styles.value}>
143
                  {ensObjectInfo.spliced_length}
144
                </span>
145
146
                <label>bp</label>
              </dd>
147
              <dd className={`show-for-large ${styles.nonLabelValue}`}>
148
                {ensObjectInfo.bio_type}
149
150
              </dd>
              <dd className={`show-for-large ${styles.nonLabelValue}`}>
151
                {ensObjectInfo.strand} strand
152
              </dd>
153
            </Fragment>
154
          ) : null}
Imran Salam's avatar
Imran Salam committed
155
156
        </dl>
        <dl className={styles.browserInfoRight}>
157
158
          <BrowserGenomeSelector
            browserActivated={props.browserActivated}
159
            dispatchBrowserLocation={props.dispatchBrowserLocation}
160
            defaultChrLocation={props.defaultChrLocation}
161
            drawerOpened={props.drawerOpened}
162
163
            genomeSelectorActive={props.genomeSelectorActive}
            toggleGenomeSelector={props.toggleGenomeSelector}
164
          />
165
166
          {props.genomeSelectorActive ? null : (
            <dd className={styles.navigator}>
167
              <button title={navigator.description} onClick={toggleNavigator}>
168
                <img src={getBrowserNavIcon()} alt={navigator.description} />
169
170
171
              </button>
            </dd>
          )}
172
173
        </dl>
      </div>
174
175
176
177
178
179
180
181
182
183
      {props.trackPanelOpened ? (
        <BrowserTabs
          drawerOpened={props.drawerOpened}
          genomeSelectorActive={props.genomeSelectorActive}
          selectBrowserTab={props.selectBrowserTab}
          selectedBrowserTab={props.selectedBrowserTab}
          toggleDrawer={props.toggleDrawer}
          trackPanelModalOpened={props.trackPanelModalOpened}
        />
      ) : null}
Imran Salam's avatar
Imran Salam committed
184
185
186
    </div>
  );
};
187

188
const mapStateToProps = (state: RootState): StateProps => ({
189
  browserActivated: getBrowserActivated(state),
190
  browserNavOpened: getBrowserNavOpened(state),
191
  chrLocation: getChrLocation(state),
192
  defaultChrLocation: getDefaultChrLocation(state),
193
  drawerOpened: getDrawerOpened(state),
194
  ensObjectInfo: getEnsObjectInfo(state),
195
  genomeSelectorActive: getGenomeSelectorActive(state),
196
  selectedBrowserTab: getSelectedBrowserTab(state),
197
198
  trackPanelModalOpened: getTrackPanelModalOpened(state),
  trackPanelOpened: getTrackPanelOpened(state)
199
200
201
});

const mapDispatchToProps: DispatchProps = {
202
  selectBrowserTab,
203
  toggleBrowserNav,
204
  toggleDrawer,
205
  toggleGenomeSelector
206
207
208
209
210
211
};

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