BrowserBar.tsx 7.99 KB
Newer Older
1
import React, { FunctionComponent, useState, useEffect } from 'react';
2
import { connect } from 'react-redux';
Andrey Azov's avatar
Andrey Azov committed
3
import classNames from 'classnames';
4

Andrey Azov's avatar
Andrey Azov committed
5
import { browserInfoConfig, BrowserInfoItem } from '../browserConfig';
6
7
import { TrackType } from '../track-panel/trackPanelConfig';

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

Imran Salam's avatar
Imran Salam committed
31
import BrowserReset from '../browser-reset/BrowserReset';
32
import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector';
33
import BrowserTabs from '../browser-tabs/BrowserTabs';
34
35

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

37
type StateProps = {
38
39
  activeGenomeId: string;
  activeObjectId: string;
40
  browserActivated: boolean;
41
  browserNavOpened: boolean;
42
43
  chrLocation: BrowserChrLocation;
  defaultChrLocation: BrowserChrLocation;
44
  drawerOpened: boolean;
45
  genomeSelectorActive: boolean;
46
47
  ensObjectInfo: EnsObject;
  selectedBrowserTab: { [genomeId: string]: TrackType };
48
  trackPanelModalOpened: boolean;
49
  trackPanelOpened: boolean;
50
51
52
};

type DispatchProps = {
53
  selectBrowserTabAndSave: (selectedBrowserTab: TrackType) => void;
54
  toggleBrowserNav: () => void;
55
  toggleDrawer: (drawerOpened: boolean) => void;
56
  toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
57
58
};

Imran Salam's avatar
Imran Salam committed
59
type OwnProps = {
60
  dispatchBrowserLocation: (chrLocation: ChrLocation) => void;
Imran Salam's avatar
Imran Salam committed
61
};
62
63
64

type BrowserBarProps = StateProps & DispatchProps & OwnProps;

Andrey Azov's avatar
Andrey Azov committed
65
type BrowserInfoProps = {
66
  ensObjectInfo: EnsObject;
Andrey Azov's avatar
Andrey Azov committed
67
68
69
70
71
72
73
74
};

type BrowserNavigatorButtonProps = {
  toggleNavigator: () => void;
  navigator: BrowserInfoItem;
  icon: string; // TODO: use inline SVG
};

Imran Salam's avatar
Imran Salam committed
75
76
77
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
  props: BrowserBarProps
) => {
Andrey Azov's avatar
Andrey Azov committed
78
  const shouldShowBrowserInfo = () => {
79
    const chrLocationForGenome = props.defaultChrLocation[props.activeObjectId];
80
81
    const isLocationOfWholeChromosome =
      chrLocationForGenome === undefined ? true : false;
82

Andrey Azov's avatar
Andrey Azov committed
83
    return !(props.genomeSelectorActive || isLocationOfWholeChromosome);
84
85
  };

86
  const { navigator } = browserInfoConfig;
Andrey Azov's avatar
Andrey Azov committed
87
88
89
  const [showBrowserInfo, toggleShowBrowserInfo] = useState(
    shouldShowBrowserInfo()
  );
90

Andrey Azov's avatar
Andrey Azov committed
91
92
93
94
  const setBrowserInfoVisibility = () => {
    const shouldToggleVisibility = showBrowserInfo !== shouldShowBrowserInfo();
    if (shouldToggleVisibility) {
      toggleShowBrowserInfo(!showBrowserInfo);
95
96
97
    }
  };

Andrey Azov's avatar
Andrey Azov committed
98
99
100
101
  useEffect(() => {
    setBrowserInfoVisibility();
  }, [props.defaultChrLocation, props.genomeSelectorActive]);

102
  const getBrowserNavIcon = () => {
103
    if (props.drawerOpened === true) {
Andrey Azov's avatar
Andrey Azov committed
104
      return navigator.icon.grey as string;
105
    } else if (props.browserNavOpened === true) {
Andrey Azov's avatar
Andrey Azov committed
106
      return navigator.icon.selected as string;
107
108
109
110
111
    } else {
      return navigator.icon.default;
    }
  };

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

    props.toggleBrowserNav();
  };

Andrey Azov's avatar
Andrey Azov committed
120
121
122
123
124
  const className = classNames(styles.browserInfo, {
    [styles.browserInfoExpanded]: !props.trackPanelOpened,
    [styles.browserInfoGreyed]: props.drawerOpened
  });

Imran Salam's avatar
Imran Salam committed
125
126
  return (
    <div className={styles.browserBar}>
Andrey Azov's avatar
Andrey Azov committed
127
      <div className={className}>
Imran Salam's avatar
Imran Salam committed
128
        <dl className={styles.browserInfoLeft}>
129
          <BrowserReset
130
131
            activeGenomeId={props.activeGenomeId}
            activeObjectId={props.activeObjectId}
132
            dispatchBrowserLocation={props.dispatchBrowserLocation}
133
134
            chrLocation={props.chrLocation}
            defaultChrLocation={props.defaultChrLocation}
135
            drawerOpened={props.drawerOpened}
136
          />
Andrey Azov's avatar
Andrey Azov committed
137
138
139
          {showBrowserInfo && (
            <BrowserInfo ensObjectInfo={props.ensObjectInfo} />
          )}
Imran Salam's avatar
Imran Salam committed
140
141
        </dl>
        <dl className={styles.browserInfoRight}>
142
          <BrowserGenomeSelector
143
            activeGenomeId={props.activeGenomeId}
144
            browserActivated={props.browserActivated}
145
            dispatchBrowserLocation={props.dispatchBrowserLocation}
146
            chrLocation={props.chrLocation}
147
            drawerOpened={props.drawerOpened}
148
149
            genomeSelectorActive={props.genomeSelectorActive}
            toggleGenomeSelector={props.toggleGenomeSelector}
150
          />
151
          {!props.genomeSelectorActive && props.ensObjectInfo.genome_id && (
Andrey Azov's avatar
Andrey Azov committed
152
153
154
155
156
            <BrowserNavigatorButton
              navigator={navigator}
              toggleNavigator={toggleNavigator}
              icon={getBrowserNavIcon()}
            />
157
          )}
158
159
        </dl>
      </div>
Andrey Azov's avatar
Andrey Azov committed
160
      {props.trackPanelOpened && (
161
        <BrowserTabs
162
163
          activeGenomeId={props.activeGenomeId}
          ensObjectInfo={props.ensObjectInfo}
164
165
          drawerOpened={props.drawerOpened}
          genomeSelectorActive={props.genomeSelectorActive}
166
          selectBrowserTabAndSave={props.selectBrowserTabAndSave}
167
168
169
170
          selectedBrowserTab={props.selectedBrowserTab}
          toggleDrawer={props.toggleDrawer}
          trackPanelModalOpened={props.trackPanelModalOpened}
        />
Andrey Azov's avatar
Andrey Azov committed
171
      )}
Imran Salam's avatar
Imran Salam committed
172
173
174
    </div>
  );
};
175

Andrey Azov's avatar
Andrey Azov committed
176
export const BrowserInfo = ({ ensObjectInfo }: BrowserInfoProps) => (
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
  <>
    {ensObjectInfo.object_type === 'gene' && (
      <>
        <dd className={styles.ensObjectLabel}>
          <label>{ensObjectInfo.object_type}</label>
          <span className={styles.value}>{ensObjectInfo.label}</span>
        </dd>
        <dd>
          <label>Stable ID</label>
          <span className={styles.value}>{ensObjectInfo.stable_id}</span>
        </dd>
        <dd className="show-for-large">
          <label>Spliced mRNA length</label>
          <span className={styles.value}>{ensObjectInfo.spliced_length}</span>
          <label>bp</label>
        </dd>
        <dd className={`show-for-large ${styles.nonLabelValue}`}>
          {ensObjectInfo.bio_type}
        </dd>
        <dd className={`show-for-large ${styles.nonLabelValue}`}>
          {ensObjectInfo.strand} strand
        </dd>
      </>
    )}

    {ensObjectInfo.object_type === 'region' && (
      <>
        <dd className={styles.ensObjectLabel}>
          <label>Region: </label>
          <span
            className={styles.value}
          >{`${ensObjectInfo.location.chromosome}:${ensObjectInfo.location.start}:${ensObjectInfo.location.end}`}</span>
        </dd>
      </>
    )}
  </>
Andrey Azov's avatar
Andrey Azov committed
213
214
215
216
217
218
219
220
221
222
);

export const BrowserNavigatorButton = (props: BrowserNavigatorButtonProps) => (
  <dd className={styles.navigator}>
    <button title={props.navigator.description} onClick={props.toggleNavigator}>
      <img src={props.icon} alt={props.navigator.description} />
    </button>
  </dd>
);

223
const mapStateToProps = (state: RootState): StateProps => ({
224
225
226
227
  activeGenomeId: getBrowserActiveGenomeId(state),
  activeObjectId: getBrowserActiveEnsObjectId(state)[
    getBrowserActiveGenomeId(state)
  ],
228
  browserActivated: getBrowserActivated(state),
229
  browserNavOpened: getBrowserNavOpened(state),
230
  chrLocation: getChrLocation(state),
231
  defaultChrLocation: getDefaultChrLocation(state),
232
  drawerOpened: getDrawerOpened(state),
233
  ensObjectInfo: getEnsObjectInfo(state),
234
  genomeSelectorActive: getGenomeSelectorActive(state),
235
  selectedBrowserTab: getSelectedBrowserTab(state),
236
237
  trackPanelModalOpened: getTrackPanelModalOpened(state),
  trackPanelOpened: getTrackPanelOpened(state)
238
239
240
});

const mapDispatchToProps: DispatchProps = {
241
  selectBrowserTabAndSave,
242
  toggleBrowserNav,
243
  toggleDrawer,
244
  toggleGenomeSelector
245
246
247
248
249
250
};

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