Examples:
diff --git a/examples/vanilla/related-genes.html b/examples/vanilla/related-genes.html
index 275f8ecd..428904c6 100644
--- a/examples/vanilla/related-genes.html
+++ b/examples/vanilla/related-genes.html
@@ -33,18 +33,18 @@
}
#search-button {
- height: 21px;
+ height: 23px;
width: 23px;
font-size: 24px;
background: #58F;
color: #FFF;
display: inline-block;
position: relative;
- top: 3px;
+ top: 2px;
left: -25px;
border-radius: 3px;
text-align: center;
- padding-top: 3px;
+ padding-top: 1px;
cursor: pointer;
}
@@ -111,7 +111,9 @@
Related genes | Ideogram
diff --git a/src/js/views/chromosome-model.js b/src/js/views/chromosome-model.js
index 94a952b4..2423d941 100644
--- a/src/js/views/chromosome-model.js
+++ b/src/js/views/chromosome-model.js
@@ -124,12 +124,30 @@ function deleteExtraneousBands(chr, hasBands) {
}
function getCentromerePosition(hasBands, bands) {
- if (
+
+ const hasTelocentricPArm = (
+ // As with almost all mouse chromosome, chimpanzee chr22
hasBands && bands[0].name[0] === 'p' && bands[1].name[0] === 'q' &&
bands[0].bp.stop - bands[0].bp.start < 2E6
- ) {
+ );
+
+ let hasTelocentricQArm = false;
+ if (hasBands) {
+ // As with Macaca mulatta chromosome Y
+ const lastBand = bands.slice(-1)[0];
+ const penultimateBand = bands.slice(-2)[0];
+
+ hasTelocentricQArm = (
+ hasBands && penultimateBand.name[0] === 'p' && lastBand.name[0] === 'q' &&
+ lastBand.bp.stop - lastBand.bp.start < 2E6
+ );
+ }
+
+ if (hasTelocentricPArm) {
// As with almost all mouse chromosome, chimpanzee chr22
- return 'telocentric';
+ return 'telocentric-p';
+ } else if (hasTelocentricQArm) {
+ return 'telocentric-q';
} else {
return '';
}
diff --git a/src/js/views/chromosome.js b/src/js/views/chromosome.js
index e8562f80..1b22af69 100644
--- a/src/js/views/chromosome.js
+++ b/src/js/views/chromosome.js
@@ -17,8 +17,11 @@ export class Chromosome {
* Factory method
*/
static getInstance(adapter, config, ideo) {
- if (adapter.getModel().centromerePosition === 'telocentric') {
- return new TelocentricChromosome(adapter, config, ideo);
+ const centromerePosition = adapter.getModel().centromerePosition;
+ if (centromerePosition === 'telocentric-p') {
+ return new TelocentricPChromosome(adapter, config, ideo);
+ } else if (centromerePosition === 'telocentric-q') {
+ return new TelocentricQChromosome(adapter, config, ideo);
} else {
return new MetacentricChromosome(adapter, config, ideo);
}
@@ -327,11 +330,12 @@ export class MetacentricChromosome extends Chromosome {
}
}
-export class TelocentricChromosome extends Chromosome {
+export class TelocentricPChromosome extends Chromosome {
constructor(model, config, ideo) {
+ // alert('p')
super(model, config, ideo);
- this._class = 'TelocentricChromosome';
+ this._class = 'TelocentricPChromosome';
this._pArmOffset = 3;
}
@@ -340,6 +344,12 @@ export class TelocentricChromosome extends Chromosome {
}
_getPArmShape() {
+ // Properties description:
+ // x1 - left terminal start position
+ // x2 - centromere position
+ // x3 - right terminal end position
+ // w - chromosome width
+ // b - bump size
var d = this._getShapeData();
d.o = this._pArmOffset;
@@ -360,6 +370,12 @@ export class TelocentricChromosome extends Chromosome {
}
_getQArmShape() {
+ // Properties description:
+ // x1 - left terminal start position
+ // x2 - centromere position
+ // x3 - right terminal end position
+ // w - chromosome width
+ // b - bump size
var d = this._getShapeData(),
x = d.x3 - d.b,
o = this._pArmOffset + 3;
@@ -374,3 +390,67 @@ export class TelocentricChromosome extends Chromosome {
};
}
}
+
+export class TelocentricQChromosome extends Chromosome {
+
+ constructor(model, config, ideo) {
+ // alert('q')
+ super(model, config, ideo);
+ this._class = 'TelocentricQChromosome';
+ this._qArmOffset = 3;
+ }
+
+ _getPArmShape() {
+ // Properties description:
+ // x1 - left terminal start position
+ // x2 - centromere position
+ // x3 - right terminal end position
+ // w - chromosome width
+ // b - bump size
+
+ var d = this._getShapeData(),
+ x = d.x3 - d.b,
+ o = this._qArmOffset;
+
+ return {
+ class: '',
+ path:
+ // 'M1,0, ' +
+ 'M' + (d.x2 + o) + ',0 ' +
+ 'L' + (x + o) + ',0 ' +
+ 'L' + (x + o) + ',' + d.w + ' ' +
+ 'L' + d.b + ',' + d.w + ' ' +
+ 'Q-' + d.b + ',' + (d.w / 2) + ',' + d.b + ',0'
+ };
+ }
+
+ _addQArmShape(clipPath) {
+ return clipPath.concat(this._getQArmShape());
+ }
+
+ _getQArmShape() {
+ // Properties description:
+ // x1 - left terminal start position
+ // x2 - centromere position
+ // x3 - right terminal end position
+ // w - chromosome width
+ // b - bump size
+ var d = this._getShapeData();
+ d.o = this._qArmOffset;
+
+ return [{
+ class: 'acen',
+ path: 'M' + (d.x2 + 2) + ',1 ' +
+ 'L' + (d.x2 + d.o + 3.25) + ',1 ' +
+ 'L' + (d.x2 + d.o + 3.25) + ',' + (d.w - 1) + ' ' +
+ 'L' + (d.x2 + 2) + ',' + (d.w - 1)
+ }, {
+ class: 'gpos66',
+ path: 'M' + (d.x2 + d.o + 5) + ',0 ' +
+ 'L' + (d.x2 + d.o + 3) + ',0 ' +
+ 'L' + (d.x2 + d.o + 3) + ',' + d.w + ' ' +
+ 'L' + (d.x2 + d.o + 5) + ',' + d.w,
+ strokeWidth: 0.5
+ }];
+ }
+}
diff --git a/src/js/views/draw-chromosomes.js b/src/js/views/draw-chromosomes.js
index 89b15ce6..a95a468e 100644
--- a/src/js/views/draw-chromosomes.js
+++ b/src/js/views/draw-chromosomes.js
@@ -1,5 +1,5 @@
import {d3} from '../lib';
-import {initSettings} from '../init/settings-ui';
+// import {initSettings} from '../init/settings-ui';
import {ModelAdapter} from '../model-adapter';
import {Chromosome} from './chromosome';
@@ -163,7 +163,7 @@ function setOverflowScroll() {
ideoSvg.style('min-width', (ideoWidth - 5) + 'px');
- initSettings(ideo);
+ // initSettings(ideo);
}
export {
diff --git a/test/offline/collinear.test.js b/test/offline/collinear.test.js
index 1a03627f..41303bc9 100644
--- a/test/offline/collinear.test.js
+++ b/test/offline/collinear.test.js
@@ -14,6 +14,8 @@ describe('Ideogram', function() {
d3 = Ideogram.d3;
+ this.timeout(10000);
+
beforeEach(function() {
delete window.chrBands;
diff --git a/test/offline/core.test.js b/test/offline/core.test.js
index 24848535..aafda70e 100644
--- a/test/offline/core.test.js
+++ b/test/offline/core.test.js
@@ -40,7 +40,8 @@ describe('Ideogram', function() {
function callback() {
var svg = document.getElementsByTagName('svg').length;
- assert.equal(svg, 2); // one for ideogram, one for settings gear
+ // assert.equal(svg, 2); // one for ideogram, one for settings gear
+ assert.equal(svg, 1); // one for ideogram
done();
}
config.onLoad = callback;
@@ -735,4 +736,33 @@ describe('Ideogram', function() {
ideogram = new Ideogram(config);
});
+
+ it('should properly render q-telocentric chromosomes', done => {
+ // Tests use case from ../examples/vanilla/eukaryotes?org=macaca-mulatta
+
+ function callback() {
+ var chrYParts =
+ document.querySelectorAll('#chrY-9544 .chromosome-border path');
+
+ var pArm = chrYParts[0].getBoundingClientRect();
+ assert.isBelow(Math.abs(23.6 - pArm.height), 1);
+
+ var centromere = chrYParts[1].getBoundingClientRect();
+ assert.isBelow(Math.abs(4.25 - centromere.height), 1);
+
+ var qArm = chrYParts[2].getBoundingClientRect();
+ assert.isBelow(Math.abs(2 - qArm.height), 1);
+
+ done();
+ }
+
+ var config = {
+ organism: 'macaca-mulatta', // Rhesus macaque
+ dataDir: '/dist/data/bands/native/',
+ onLoad: callback
+ };
+
+ var ideogram = new Ideogram(config);
+ });
+
});