Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Refine object constancy, handling of unfound genes, subpart hover text #323

Merged
merged 5 commits into from
Nov 11, 2022
Merged

Refine object constancy, handling of unfound genes, subpart hover text #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2200e3c
In related genes, fix display of found after unfound gene
eweitz Nov 8, 2022
7f19d8f
Deflate CSS rules a bit, trim subpart hover text
eweitz Nov 8, 2022
9f3d4fc
Slow splice animation, for better object constancy
eweitz Nov 8, 2022
94f7d26
Refine fix for display of found after unfound gene
eweitz Nov 9, 2022
532a420
Update reference subpart text in gene structure test
eweitz Nov 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 21 additions & 30 deletions examples/vanilla/related-genes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,44 +10,22 @@
a:hover {text-decoration: underline;}
a, a:hover, a:visited, a:active {color: #0366d6;}

select, optgroup, option {
float: left;
font-size: 14px;
}
select, optgroup, option {float: left; font-size: 14px;}

#ideogram-container {z-index: -1}

#search-container {
height: 26px;
float: left;
position: relative;
top: -4px;
margin-left: 10px;
height: 26px; float: left; position: relative; top: -4px; margin-left: 10px;
}

#search-genes {
padding-left: 3px;
width: 200px;
height: 20px;
font-size: 14px;
border-radius: 3px;
border: 1px solid #888;
padding-left: 3px; width: 200px; height: 20px; font-size: 14px; border-radius: 3px; border: 1px solid #888;
}

#search-button {
height: 23px;
width: 23px;
font-size: 24px;
background: #58F;
color: #FFF;
display: inline-block;
position: relative;
top: 2px;
left: -25px;
border-radius: 3px;
text-align: center;
padding-top: 1px;
cursor: pointer;
height: 23px; width: 23px; font-size: 24px; background: #58F; color: #FFF; display: inline-block;
position: relative; top: 2px; left: -25px; padding-top: 1px;
border-radius: 3px; text-align: center; cursor: pointer;
}

._ideogramTooltip th, ._ideogramTooltip td {
Expand Down Expand Up @@ -287,8 +265,17 @@ <h1>Related genes | Ideogram</h1>
}

function displayError(error) {
document.querySelector('#ideogram-container').innerHTML =
`<div style="color:red; text-align: center;">${error}</div>`;
const container = document.querySelector('#ideogram-container');
container.style.visibility = 'hidden';

const errorElement = document.querySelector('#ideogram-error');
if (errorElement) errorElement.remove();
container.insertAdjacentHTML(
'beforeBegin',
`<div id="ideogram-error" style="color:red; text-align: center;">
${error}
</div>`
);
}

// Process text input for the "Search" field.
Expand All @@ -303,6 +290,8 @@ <h1>Related genes | Ideogram</h1>
try {
await ideogram.plotRelatedGenes(urlParams.q);
document.querySelector('#ideogram-container').style.visibility = '';
const errorElement = document.querySelector('#ideogram-error');
if (errorElement) errorElement.remove();
} catch(error) {
displayError(error);
}
Expand All @@ -313,6 +302,8 @@ <h1>Related genes | Ideogram</h1>
if ('q' in urlParams) {
await ideogram.plotRelatedGenes(urlParams['q']);
document.querySelector('#ideogram-container').style.visibility = '';
const errorElement = document.querySelector('#ideogram-error');
if (errorElement) errorElement.remove();
} else {
await ideogram.plotRelatedGenes();
}
Expand Down
7 changes: 4 additions & 3 deletions src/js/kit/gene-structure.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -473,6 +473,7 @@ function toggleSplice(ideo) {
d3.select('._ideoGeneStructure').selectAll('.subpart')
.data(subparts)
.transition()
.duration(750)
.attr('x', (d, i) => subparts[i][3].x)
.attr('width', (d, i) => subparts[i][3].width)
.on('end', (d, i) => {
Expand Down Expand Up @@ -684,9 +685,9 @@ function getGeneStructureSvg(gene, ideo, spliceExons=false) {

const footerData =
`<br/>Transcript name: ${geneStructure.transcriptName}<br/>` + [
`Exons: ${totalBySubpart['exon']}`,
`Biotype: ${geneStructure.biotype.replace(/_/g, ' ')}`,
`Strand: ${strand}`
`${totalBySubpart['exon']} exons`,
`${geneStructure.biotype.replace(/_/g, ' ')}`,
`${strand} strand`
].join(` ${pipe} `);
const geneStructureSvg =
`<svg class="_ideoGeneStructure" ` +
Expand Down
4 changes: 2 additions & 2 deletions test/offline/gene-structure.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ describe('Ideogram gene structure functionality', function() {
exonText2,
'Exon 2 of 4 | 66 bp' +
'Transcript name: APOE-201' +
'Exons: 4 | Biotype: protein coding | Strand: +'
'4 exons | protein coding | + strand'
);

// Negative-stranded gene
Expand All @@ -100,7 +100,7 @@ describe('Ideogram gene structure functionality', function() {
exon3Text,
'Exon 3 of 4 | 157 bp' +
'Transcript name: APOE-201' +
'Exons: 4 | Biotype: protein coding | Strand: +'
'4 exons | protein coding | + strand'
);
done();
}, 500);
Expand Down