BrowserGenomeSelector.tsx 2.98 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14
import React, {
  FunctionComponent,
  useState,
  ChangeEvent,
  FormEvent,
  useEffect
} from 'react';

import { ChrLocation } from '../browserState';

import applyIcon from 'static/img/shared/apply.svg';
import clearIcon from 'static/img/shared/clear.svg';

import styles from './BrowserGenomeSelector.scss';
15
import { getChrLocationStr } from '../browserHelper';
16 17 18

type BrowserGenomeSelectorProps = {
  browserActivated: boolean;
19 20
  changeBrowserLocation: () => void;
  defaultChrLocation: ChrLocation;
21 22
  genomeSelectorActive: boolean;
  toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
23 24 25 26 27 28
  updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
};

const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
  props: BrowserGenomeSelectorProps
) => {
29
  const chrLocationStr = getChrLocationStr(props.defaultChrLocation);
30

31 32
  const [chrLocationPlaceholder, setChrLocationPlaceholder] = useState('');
  const [chrLocationInput, setChrLocationInput] = useState('');
33

34 35
  const [chrCode, chrStart, chrEnd] = props.defaultChrLocation;

36
  useEffect(() => {
37
    setChrLocationPlaceholder(chrLocationStr);
38
  }, []);
39

40 41
  const activateForm = () => {
    setChrLocationPlaceholder(chrLocationStr);
42
    props.toggleGenomeSelector(true);
43
  };
44

45 46
  const changeChrLocationInput = (event: ChangeEvent<HTMLInputElement>) =>
    setChrLocationInput(event.target.value);
47

48
  const closeForm = () => {
49
    setChrLocationInput('');
50
    props.toggleGenomeSelector(false);
51 52
  };

53 54
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
55

56 57
    const [chrCodeInput, chrRegionInput] = chrLocationInput.split(':');
    const [chrStartInput, chrEndInput] = chrRegionInput.split('-');
58

59 60 61 62 63 64
    if (chrCodeInput && +chrStartInput < +chrEndInput) {
      const currChrLocation: ChrLocation = [
        chrCodeInput,
        +chrStartInput,
        +chrEndInput
      ];
65

66
      closeForm();
67

68
      props.updateDefaultChrLocation(currChrLocation);
69
      props.changeBrowserLocation();
70
    } else {
71 72 73 74 75 76
      return;
    }
  };

  return props.browserActivated ? (
    <dd className={styles.browserGenomeSelector}>
77
      {props.genomeSelectorActive ? (
78 79 80
        <form onSubmit={handleSubmit}>
          <input
            type="text"
81
            placeholder={chrLocationPlaceholder}
82 83 84 85 86 87 88 89 90 91 92 93 94
            value={chrLocationInput}
            onChange={changeChrLocationInput}
          />
          <button>
            <img src={applyIcon} alt="Apply changes" />
          </button>
          <button onClick={closeForm}>
            <img src={clearIcon} alt="Clear changes" />
          </button>
        </form>
      ) : (
        <div className={styles.chrLocationView} onClick={activateForm}>
          <div className={styles.chrCode}>{chrCode}</div>
95
          <div className={styles.chrRegion}>
96
            <span>{chrStart}</span>
97
            <span className={styles.chrSeparator}> - </span>
98
            <span>{chrEnd}</span>
99
          </div>
100 101
        </div>
      )}
102 103 104 105 106
    </dd>
  ) : null;
};

export default BrowserGenomeSelector;