Remove default text from transcript left column (#335)

* Updates to left column in transcript list
Co-authored-by: Andrey Azov <andrey@ebi.ac.uk>

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/DefaultTranscriptsList.tsx

@@ -80,6 +80,7 @@ const DefaultTranscriptslist = (props: Props) => {
           return (
             <DefaultTranscriptsListItem
               key={index}
+              isDefault={index === 0}
               gene={gene}
               transcript={transcript}
               rulerTicks={props.rulerTicks}

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/default-transcripts-list-item/DefaultTranscriptListItem.scss

@@ -12,3 +12,9 @@
   color: $blue;
   cursor: pointer;
 }
+
+.defaultTranscriptLabel {
+  display: flex;
+  justify-content: flex-end;
+  align-items: baseline;
+}

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/default-transcripts-list-item/DefaultTranscriptListItem.test.tsx

@@ -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');
+  });
 });

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/default-transcripts-list-item/DefaultTranscriptListItem.tsx

@@ -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)}

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx

@@ -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>

src/ensembl/src/shared/components/question-button/QuestionButton.tsx

@@ -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>
       )}

src/ensembl/src/shared/components/tooltip/Tooltip.scss

@@ -10,6 +10,7 @@ $fill-color: $dark-grey;
   color: $white;
   border-radius: 4px;
   font-size: 14px;
+  max-width: 300px;
 }
 
 .tooltipTip {