ExampleLinks.tsx 3.24 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
Andrey Azov's avatar
Andrey Azov committed
20
import { useQuery, gql } from '@apollo/client';
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

import * as urlHelper from 'src/shared/helpers/urlHelper';
import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers';

import { getEntityViewerActiveGenomeId } from 'src/content/app/entity-viewer/state/general/entityViewerGeneralSelectors';
import { getGenomeExampleFocusObjects } from 'src/shared/state/genome/genomeSelectors';

import { CircleLoader } from 'src/shared/components/loader/Loader';

import { RootState } from 'src/store';
import { ExampleFocusObject } from 'src/shared/state/genome/genomeTypes';

import styles from './ExampleLinks.scss';

type ExampleGene = {
36
  unversioned_stable_id: string;
37 38 39 40 41 42 43 44 45
  symbol: string;
};

type ExampleLinksProps = {
  activeGenomeId: string | null;
  exampleEntities: ExampleFocusObject[];
};

const QUERY = gql`
46 47 48 49
  query Gene($genomeId: String!, $geneId: String!) {
    gene(byId: { genome_id: $genomeId, stable_id: $geneId }) {
      stable_id
      unversioned_stable_id
50 51 52 53 54 55 56 57 58 59
      symbol
    }
  }
`;

// NOTE: the component currently handles only example gene
const ExampleLinks = (props: ExampleLinksProps) => {
  const exampleGeneId = props.exampleEntities.find(
    ({ type }) => type === 'gene'
  )?.id;
60
  const { activeGenomeId } = props;
61
  const { loading, data, error } = useQuery<{ gene: ExampleGene }>(QUERY, {
62 63
    variables: { geneId: exampleGeneId, genomeId: activeGenomeId },
    skip: !exampleGeneId || !activeGenomeId
64 65 66 67 68 69 70 71 72 73 74 75 76
  });

  if (loading) {
    return (
      <div>
        <div className={styles.exampleLinks__emptyTopbar} />
        <div className={styles.exampleLinks}>
          <CircleLoader />
        </div>
      </div>
    );
  }

77 78
  // TODO: Data doesn't get changed when there is an error?
  if (!data || error) {
79 80 81 82 83
    return null;
  }

  const featureIdInUrl = buildFocusIdForUrl({
    type: 'gene',
84
    objectId: data.gene.unversioned_stable_id
85 86 87 88 89 90 91 92 93 94
  });
  const path = urlHelper.entityViewer({
    genomeId: props.activeGenomeId,
    entityId: featureIdInUrl
  });

  return (
    <div>
      <div className={styles.exampleLinks__emptyTopbar} />
      <div className={styles.exampleLinks}>
95
        <Link to={path}>Example gene</Link>
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
      </div>
    </div>
  );
};

const mapStateToProps = (state: RootState) => {
  const activeGenomeId = getEntityViewerActiveGenomeId(state);
  const exampleEntities = activeGenomeId
    ? getGenomeExampleFocusObjects(state, activeGenomeId)
    : [];
  return {
    activeGenomeId,
    exampleEntities
  };
};

export default connect(mapStateToProps)(ExampleLinks);