Unverified Commit 1de09c1e authored by Jyothish's avatar Jyothish Committed by GitHub

Remove default text from transcript left column (#335)

* Updates to left column in transcript list
Co-authored-by: Andrey Azov's avatarAndrey Azov <andrey@ebi.ac.uk>
parent 8c55abc6
Pipeline #97070 passed with stages
in 8 minutes and 2 seconds
......@@ -80,6 +80,7 @@ const DefaultTranscriptslist = (props: Props) => {
return (
<DefaultTranscriptsListItem
key={index}
isDefault={index === 0}
gene={gene}
transcript={transcript}
rulerTicks={props.rulerTicks}
......
......@@ -12,3 +12,9 @@
color: $blue;
cursor: pointer;
}
.defaultTranscriptLabel {
display: flex;
justify-content: flex-end;
align-items: baseline;
}
......@@ -84,4 +84,9 @@ describe('<DefaultTranscriptListItem />', () => {
expect(wrapper.exists(TranscriptsListItemInfo)).toBe(true);
});
it('displays selected transcript', () => {
wrapper = renderComponent({ isDefault: true });
expect(wrapper.find('.defaultTranscriptLabel').text()).toBe('Selected');
});
});
......@@ -27,12 +27,22 @@ import { toggleTranscriptInfo } from 'src/content/app/entity-viewer/state/gene-v
import { Gene } from 'src/content/app/entity-viewer/types/gene';
import { Transcript } from 'src/content/app/entity-viewer/types/transcript';
import { TicksAndScale } from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler';
import QuestionButton, {
QuestionButtonOption
} from 'src/shared/components/question-button/QuestionButton';
import transcriptsListStyles from '../DefaultTranscriptsList.scss';
import styles from './DefaultTranscriptListItem.scss';
type defaultTranscriptLabelType = {
label: string;
helpText: string;
};
export type DefaultTranscriptListItemProps = {
gene: Gene;
isDefault?: boolean;
defaultTranscriptLabel?: defaultTranscriptLabelType;
transcript: Transcript;
rulerTicks: TicksAndScale;
expandTranscript: boolean;
......@@ -57,10 +67,28 @@ export const DefaultTranscriptListItem = (
cursor: 'pointer'
};
const defaultTranscriptLabelMap = {
selected: {
label: 'Selected',
helpText:
'The selected transcript is a default single transcript per protein coding gene that is representative of biology, well-supported, expressed and highly conserved'
}
};
const canonicalType = 'selected'; // TODO Change this to transcript.mane/plus etc when available
return (
<div className={styles.defaultTranscriptListItem}>
<div className={transcriptsListStyles.row}>
<div className={transcriptsListStyles.left}>Left</div>
{props.isDefault && (
<div className={styles.defaultTranscriptLabel}>
{defaultTranscriptLabelMap[canonicalType]?.label}
<QuestionButton
helpText={defaultTranscriptLabelMap[canonicalType]?.helpText}
styleOption={QuestionButtonOption.INLINE}
/>
</div>
)}
<div
className={transcriptsListStyles.middle}
onClick={() => props.toggleTranscriptInfo(props.transcript.id)}
......
......@@ -129,7 +129,7 @@ export const TranscriptsListItemInfo = (
};
return (
<div className={mainStyles}>
<div className={transcriptsListStyles.left}>bottom left</div>
<div className={transcriptsListStyles.left}></div>
<div className={midStyles}>
<div className={styles.topLeft}>
<div>
......
......@@ -63,7 +63,11 @@ const QuestionButton = (props: Props) => {
>
<QuestionIcon />
{isHovering && (
<Tooltip anchor={elementRef.current} autoAdjust={true}>
<Tooltip
anchor={elementRef.current}
autoAdjust={true}
onClose={handleMouseLeave}
>
{props.helpText}
</Tooltip>
)}
......
......@@ -10,6 +10,7 @@ $fill-color: $dark-grey;
color: $white;
border-radius: 4px;
font-size: 14px;
max-width: 300px;
}
.tooltipTip {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment