ZmenuAppLinks.tsx 2.35 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14
import React from 'react';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';

import { isEnvironment, Environment } from 'src/shared/helpers/environment';
import * as urlFor from 'src/shared/helpers/urlHelper';

import {
  getBrowserActiveGenomeId,
  getBrowserActiveEnsObjectId,
  isFocusObjectPositionDefault
} from '../browserSelectors';

import { ToggleButton as ToolboxToggleButton } from 'src/shared/components/toolbox';
15
import ViewInApp from 'src/shared/components/view-in-app/ViewInApp';
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

import { RootState } from 'src/store';

import styles from './Zmenu.scss';

type Props = {
  featureId: string;
  activeFeatureId: string | null;
  genomeId: string | null;
  isInDefaultPosition: boolean;
  push: (path: string) => void;
};

const ZmenuAppLinks = (props: Props) => {
  if (!isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL])) {
    return null;
  }

  // FIXME: the row of buttons should be shown only for the gene feature.
  // Change this temporary hack to using the "type" field when genome browser
  // starts reporting the type of clicked features
  // (also, probably move this check in a parent component)
  if (!props.featureId.includes(':gene:')) {
    return null;
  }

  const getBrowserLink = () =>
    urlFor.browser({ genomeId: props.genomeId, focus: props.featureId });

  const getEntityViewerLink = () =>
    urlFor.entityViewer({
      genomeId: props.genomeId,
      entityId: props.featureId
    });

  const shouldShowBrowserButton =
    props.featureId !== props.activeFeatureId || !props.isInDefaultPosition;

54 55 56 57 58 59 60 61 62 63 64 65
  type linkType = {
    genomeBrowser?: string;
    entityViewer?: string;
  };

  const links: Partial<linkType> = {};

  if (shouldShowBrowserButton) {
    links['genomeBrowser'] = getBrowserLink();
  }
  links['entityViewer'] = getEntityViewerLink();

66 67
  return (
    <div className={styles.zmenuAppLinks}>
68
      <ViewInApp links={links} />
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
      <ToolboxToggleButton
        className={styles.zmenuToggleFooter}
        openElement={<span>Download</span>}
      />
    </div>
  );
};

const mapStateToProps = (state: RootState) => ({
  genomeId: getBrowserActiveGenomeId(state),
  activeFeatureId: getBrowserActiveEnsObjectId(state),
  isInDefaultPosition: isFocusObjectPositionDefault(state)
});

const mapDispatchToProps = {
  push
};

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