Transcriptimage bugfix (#473)

* ENSWBSITES-964: fix transcripts list image rendering bug on windows chrome, width was not set

src/ensembl/src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler.tsx

@@ -57,7 +57,7 @@ type Props = {
 const FeatureLengthAxis = (props: Props) => {
   const domain = [1, props.length];
   const range = [0, props.width];
-  const scale = scaleLinear().domain(domain).range(range);
+  const scale = scaleLinear().domain(domain).rangeRound(range);
   const { ticks, labelledTicks } = getTicks(scale);
 
   useEffect(() => {

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.tsx

@@ -80,7 +80,7 @@ export const GeneImage = (props: GeneOverviewImageProps) => {
   // (it will help with drawing genes of circular chromosomes)
   const scale = scaleLinear()
     .domain([geneStart, geneEnd])
-    .range([0, gene_image_width]);
+    .rangeRound([0, gene_image_width]);
 
   const renderedTranscripts = props.gene.transcripts.map(
     (transcript, index) => {

src/ensembl/src/content/app/entity-viewer/gene-view/components/protein-domain-image/ProteinDomainImage.tsx

@@ -80,7 +80,7 @@ const ProteinDomainImage = (props: ProteinDomainImageProps) => {
   // Therefore, it is guaranteed that the length of the protein drawn by this component will fall within this domain.
   const scale = scaleLinear()
     .domain([0, trackLength])
-    .range([0, props.width])
+    .rangeRound([0, props.width])
     .clamp(true);
 
   return (

src/ensembl/src/content/app/entity-viewer/gene-view/components/protein-image/ProteinImage.tsx

@@ -39,7 +39,7 @@ const ProteinImage = (props: ProteinImageProps) => {
   // Therefore, it is guaranteed that the length of the protein drawn by this component will fall within this domain.
   const scale = scaleLinear()
     .domain([0, props.trackLength])
-    .range([0, props.width])
+    .rangeRound([0, props.width])
     .clamp(true);
 
   const trackContainerStyles = transcriptsListStyles.middle;

src/ensembl/src/content/app/entity-viewer/gene-view/components/unspliced-transcript/UnsplicedTranscript.test.tsx

@@ -41,7 +41,7 @@ describe('<UnsplicedTranscript />', () => {
 
   it('renders the correct number of exons', () => {
     const wrapper = render(<UnsplicedTranscript {...minimalProps} />);
-    expect(wrapper.find('.exon').length).toBe(
+    expect(wrapper.find('[data-test-id=exon]').length).toBe(
       minimalProps.transcript.spliced_exons.length
     );
   });

src/ensembl/src/content/app/entity-viewer/gene-view/components/unspliced-transcript/UnsplicedTranscript.tsx

@@ -65,13 +65,10 @@ const UnsplicedTranscript = (props: UnsplicedTranscriptProps) => {
   } = slice;
   const scale = scaleLinear()
     .domain([1, transcriptLength])
-    .range([1, props.width])
+    .rangeRound([1, props.width])
     .clamp(true);
 
-  const transcriptClasses = classNames(
-    styles.transcript,
-    props.classNames?.transcript
-  );
+  const transcriptClasses = props.classNames?.transcript;
 
   const renderedTranscript = (
     <g className={transcriptClasses}>
@@ -91,8 +88,9 @@ const UnsplicedTranscript = (props: UnsplicedTranscriptProps) => {
   return props.standalone ? (
     <svg
       className={styles.containerSvg}
-      width={scale(length)}
+      width={scale(transcriptLength)}
       height={BLOCK_HEIGHT}
+      viewBox={`0 0 ${scale(transcriptLength)} ${BLOCK_HEIGHT}`}
     >
       {renderedTranscript}
     </svg>
@@ -118,10 +116,7 @@ const Backbone = (
     },
     scale
   } = props;
-  const backboneClasses = classNames(
-    styles.backbone,
-    props.classNames?.backbone
-  );
+  const backboneClasses = props.classNames?.backbone || undefined;
 
   if (!spliced_exons.length) {
     return (
@@ -199,12 +194,12 @@ const ExonBlock = (props: ExonBlockProps) => {
   const y = -3;
   const height = BLOCK_HEIGHT;
 
-  const exonClasses = classNames(styles.exon, props.className);
+  const exonClasses = props.className;
 
   if (cds && isNonCodingLeft) {
     const nonCodingPart = (
       <rect
-        className={classNames(exonClasses, styles.emptyBlock)}
+        className={classNames(exonClasses, styles.emptyBlock) || undefined}
         y={y}
         height={height}
         x={props.scale(exonStart)}
@@ -221,7 +216,7 @@ const ExonBlock = (props: ExonBlockProps) => {
       />
     );
     return (
-      <g key={exonStart}>
+      <g key={exonStart} data-test-id="exon">
         {nonCodingPart}
         {codingPart}
       </g>
@@ -238,7 +233,7 @@ const ExonBlock = (props: ExonBlockProps) => {
     );
     const nonCodingPart = (
       <rect
-        className={classNames(exonClasses, styles.emptyBlock)}
+        className={classNames(exonClasses, styles.emptyBlock) || undefined}
         y={y}
         height={height}
         x={props.scale(cds.relative_end)}
@@ -247,18 +242,20 @@ const ExonBlock = (props: ExonBlockProps) => {
     );
 
     return (
-      <g key={exonStart}>
+      <g key={exonStart} data-test-id="exon">
         {codingPart}
         {nonCodingPart}
       </g>
     );
   } else {
-    const classes = classNames(exonClasses, {
-      [styles.emptyBlock]: isCompletelyNonCoding
-    });
+    const classes =
+      classNames(exonClasses, {
+        [styles.emptyBlock]: isCompletelyNonCoding
+      }) || undefined;
     return (
       <rect
         key={exonStart}
+        data-test-id="exon"
         className={classes}
         y={y}
         height={height}

src/ensembl/tests/fixtures/entity-viewer/gene.ts

@@ -51,7 +51,7 @@ export const createGene = (fragment: Partial<FullGene> = {}): FullGene => {
 const getScale = () => {
   const domain = [1000, faker.random.number({ min: 2000, max: 100000 })];
   const range = [100, faker.random.number({ min: 200, max: 600 })];
-  const scale = scaleLinear().domain(domain).range(range);
+  const scale = scaleLinear().domain(domain).rangeRound(range);
 
   return scale;
 };