Unverified Commit 420a0cdf authored by Ridwan Amode's avatar Ridwan Amode Committed by GitHub
Browse files

Transcriptimage bugfix (#473)

* ENSWBSITES-964: fix transcripts list image rendering bug on windows chrome, width was not set
parent 66a52c0d
Pipeline #136174 passed with stages
in 6 minutes and 23 seconds
......@@ -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(() => {
......
......@@ -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) => {
......
......@@ -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 (
......
......@@ -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;
......
......@@ -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
);
});
......
......@@ -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}
......
......@@ -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;
};
......
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