DefaultTranscriptListItem.tsx 3.92 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * 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.
 */

17
import React from 'react';
18
import { connect } from 'react-redux';
19

20 21 22 23 24 25
import UnsplicedTranscript, {
  UnsplicedTranscriptProps
} from 'src/content/app/entity-viewer/gene-view/components/unspliced-transcript/UnsplicedTranscript';
import TranscriptsListItemInfo, {
  TranscriptsListItemInfoProps
} from '../transcripts-list-item-info/TranscriptsListItemInfo';
26

27
import { toggleTranscriptInfo } from 'src/content/app/entity-viewer/state/gene-view/transcripts/geneViewTranscriptsSlice';
28

29
import { FullTranscript } from 'src/shared/types/thoas/transcript';
30
import { TicksAndScale } from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler';
31
import { TranscriptQualityLabel } from 'src/content/app/entity-viewer/shared/components/default-transcript-label/TranscriptQualityLabel';
32

33
import transcriptsListStyles from '../DefaultTranscriptsList.scss';
34 35
import styles from './DefaultTranscriptListItem.scss';

36 37 38 39
type Transcript = Pick<
  FullTranscript,
  'stable_id' | 'relative_location' | 'metadata'
> &
40 41 42
  TranscriptsListItemInfoProps['transcript'] &
  UnsplicedTranscriptProps['transcript'];

43
export type DefaultTranscriptListItemProps = {
44
  gene: TranscriptsListItemInfoProps['gene'];
45
  isDefault?: boolean;
46 47
  transcript: Transcript;
  rulerTicks: TicksAndScale;
48 49
  expandTranscript: boolean;
  expandDownload: boolean;
50
  expandMoreInfo: boolean;
51
  toggleTranscriptInfo: (id: string) => void;
52 53
};

54 55 56
export const DefaultTranscriptListItem = (
  props: DefaultTranscriptListItemProps
) => {
57
  const { scale } = props.rulerTicks;
58 59 60 61 62 63 64 65
  const {
    relative_location: { start: relativeTranscriptStart },
    slice: {
      location: { length: transcriptLength }
    }
  } = props.transcript;
  const transcriptStartX = scale(relativeTranscriptStart) as number;
  const transcriptWidth = scale(transcriptLength) as number;
66

67
  return (
68 69
    <div className={styles.defaultTranscriptListItem}>
      <div className={transcriptsListStyles.row}>
70
        <TranscriptQualityLabel metadata={props.transcript.metadata} />
71

Andrey Azov's avatar
Andrey Azov committed
72 73 74
        <div className={transcriptsListStyles.middle}>
          <div
            className={styles.clickableTranscriptArea}
75 76 77
            onClick={() =>
              props.toggleTranscriptInfo(props.transcript.stable_id)
            }
Andrey Azov's avatar
Andrey Azov committed
78 79 80 81 82 83 84 85 86 87 88
          >
            <div
              className={styles.transcriptWrapper}
              style={{ transform: `translateX(${transcriptStartX}px)` }}
            >
              <UnsplicedTranscript
                transcript={props.transcript}
                width={transcriptWidth}
                standalone={true}
              />
            </div>
89 90 91 92
          </div>
        </div>
        <div
          className={transcriptsListStyles.right}
93
          onClick={() => props.toggleTranscriptInfo(props.transcript.stable_id)}
94
        >
95 96 97
          <span className={styles.transcriptId}>
            {props.transcript.stable_id}
          </span>
98 99
        </div>
      </div>
100
      {props.expandTranscript ? (
101 102 103
        <TranscriptsListItemInfo
          gene={props.gene}
          transcript={props.transcript}
104
          expandDownload={props.expandDownload}
105
          expandMoreInfo={props.expandMoreInfo}
106
        />
107
      ) : null}
108 109 110 111
    </div>
  );
};

112 113 114 115 116
const mapDispatchToProps = {
  toggleTranscriptInfo
};

export default connect(null, mapDispatchToProps)(DefaultTranscriptListItem);