-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Karyotype and tooltip plugin rewrites
Added Chromosome track, which is used to draw the karyotype now, rather than using divs Added jquery.tipsy in a separate file, so it can be used by both plugins
- Loading branch information
1 parent
12d1fb6
commit 07b1a74
Showing
10 changed files
with
985 additions
and
461 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,115 +1,54 @@ | ||
| .gv_karyotype_container { | ||
| height:50px; | ||
| overflow:hidden; | ||
| box-shadow: inset 0px 0px 33px -7px rgba(24, 36, 56, 0.97), inset 1px 1px 1px 0px black; | ||
| } | ||
|
|
||
| .gv_chromosome { | ||
| border: 1px solid white; | ||
| border-radius: 5px 5px 5px 5px; | ||
| box-shadow: 0 0 5px 1px rgba(162, 161, 161, 0.71); | ||
| display: block; | ||
| height: 38%; | ||
| margin: 15px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .gv_band { | ||
| display: block; | ||
| height: 100%; | ||
| position: absolute; | ||
| background-color: #7f7f7f; | ||
| height: 50px; | ||
| overflow: hidden; | ||
| font-size: 10px; | ||
| font-weight: bold; | ||
| font-family: Verdana, Tahoma; | ||
| line-height: 2em; | ||
| text-align: left; | ||
| vertical-align: bottom; | ||
| box-shadow: inset 0 0 33px -7px rgba(24, 36, 56, 0.97), inset 1px 1px 1px 0 black; | ||
| } | ||
|
|
||
| .gv_band.acen { | ||
| background-color: #708090; | ||
| } | ||
| .gv_band.acen:first-child { | ||
| border-radius: 0 10px 10px 0; | ||
| } | ||
| .gv_band.acen:not(:first-child) { | ||
| border-radius: 10px 0 0 10px; | ||
| .gv_karyotype_container .gv_wrapper { | ||
| border: 0; | ||
| } | ||
|
|
||
| .gv_band.gneg { | ||
| background-color: #ffffff; | ||
| color: #000000; | ||
| } | ||
| .gv_band.gpos { | ||
| background-color: #000000; | ||
| } | ||
| .gv_band.gpos100 { | ||
| background-color: #000000; | ||
| } | ||
| .gv_band.gpos25 { | ||
| background-color: #d9d9d9; | ||
| color: black; | ||
| } | ||
| .gv_band.gpos33 { | ||
| background-color: #bfbfbf; | ||
| color: black; | ||
| } | ||
| .gv_band.gpos50 { | ||
| background-color: #999999; | ||
| } | ||
| .gv_band.gpos66 { | ||
| background-color: #7f7f7f; | ||
| } | ||
| .gv_band.gpos75 { | ||
| background-color: #666666; | ||
| } | ||
| .gv_band.gvar { | ||
| background-color: #e0e0e0; | ||
| color: black; | ||
| } | ||
| .gv_band.mark { | ||
| background-color: #0000ff; | ||
| } | ||
| .gv_band.stalk { | ||
| background-color: #708090; | ||
| .gv_karyotype_container .gv_chromosome { | ||
| margin: 15px; | ||
| position: relative; | ||
| } | ||
| .gv_band.tip { | ||
| background-color: #000000; | ||
|
|
||
| .gv_karyotype_container .image_container { | ||
| box-shadow: 0 0 33px -7px #CCC inset; | ||
| } | ||
|
|
||
| .gv_karyotype_viewpoint { | ||
| .gv_karyotype_container .gv_karyotype_viewpoint { | ||
| background-color: rgba(222, 84, 35, 0.37); | ||
| border: 1px dashed #E6380D; | ||
| box-shadow: 0 0 3px 2px rgba(237, 237, 237, 0.4) inset, 0 0 4px 0 rgba(116, 116, 116, 0.7); | ||
| display: block; | ||
| height: 170%; | ||
| position: relative; | ||
| position: absolute; | ||
| top: -40%; | ||
| z-index: 50; | ||
| cursor:hand; | ||
| cursor:grab; | ||
| cursor:-moz-grab; | ||
| cursor:-webkit-grab; | ||
| cursor: hand; | ||
| cursor: grab; | ||
| cursor: -moz-grab; | ||
| cursor: -webkit-grab; | ||
| } | ||
|
|
||
| .ui-resizable-e { | ||
| cursor: e-resize; | ||
| height: 100%; | ||
| right: -5px; | ||
| top: 0; | ||
| width: 7px; | ||
| .gv_karyotype_container .ui-resizable-e { | ||
| cursor: e-resize; | ||
| height: 100%; | ||
| right: -5px; | ||
| top: 0; | ||
| width: 7px; | ||
| } | ||
| .ui-resizable-w { | ||
| cursor: w-resize; | ||
| height: 100%; | ||
| left: -5px; | ||
| top: 0; | ||
| width: 7px; | ||
|
|
||
| .gv_karyotype_container .ui-resizable-w { | ||
| cursor: w-resize; | ||
| height: 100%; | ||
| left: -5px; | ||
| top: 0; | ||
| width: 7px; | ||
| } | ||
| .ui-resizable-handle { | ||
| display: block; | ||
| font-size: 0.1px; | ||
| position: absolute; | ||
|
|
||
| .gv_karyotype_container .ui-resizable-handle { | ||
| display: block; | ||
| font-size: 0.1px; | ||
| position: absolute; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| Genoverse.Track.Chromosome = Genoverse.Track.extend({ | ||
| id : 'chromosome', | ||
| margin : 1, | ||
| featureMargin : { top: 0, right: 0, bottom: 0, left: 0 }, | ||
| labels : 'overlay', | ||
| url : false, | ||
| allData : true, | ||
| colors : { | ||
| acen : '#708090', | ||
| gneg : '#FFFFFF', | ||
| gpos : '#000000', | ||
| gpos100 : '#000000', | ||
| gpos25 : '#D9D9D9', | ||
| gpos33 : '#BFBFBF', | ||
| gpos50 : '#999999', | ||
| gpos66 : '#7F7F7F', | ||
| gpos75 : '#666666', | ||
| gvar : '#E0E0E0', | ||
| stalk : '#708090' | ||
| }, | ||
| labelColors: { | ||
| gneg : '#000000', | ||
| gvar : '#000000', | ||
| gpos25 : '#000000', | ||
| gpos33 : '#000000' | ||
| }, | ||
|
|
||
| getData: function (start, end) { | ||
| this.receiveData([].slice.call(grch37[this.browser.chr].bands), start, end); | ||
| return $.Deferred().resolveWith(this); | ||
| }, | ||
|
|
||
| insertFeature: function (feature) { | ||
| feature.label = feature.type === 'acen' || feature.type === 'stalk' ? false : feature.id; | ||
| feature.color = this.prop('colors')[feature.type]; | ||
| feature.labelColor = this.prop('labelColors')[feature.type] || '#FFFFFF'; | ||
|
|
||
| this.base(feature); | ||
| }, | ||
|
|
||
| drawFeature: function (feature, featureContext, labelContext, scale) { | ||
| if (feature.type === 'acen') { | ||
| featureContext.fillStyle = feature.color; | ||
| featureContext.strokeStyle = '#000000'; | ||
|
|
||
| featureContext.beginPath(); | ||
|
|
||
| if (feature.sort === 1) { | ||
| featureContext.moveTo(feature.x, 0); | ||
| featureContext.lineTo(feature.x + feature.width, feature.height / 2); | ||
| featureContext.lineTo(feature.x, feature.height + 0.5); | ||
| } else { | ||
| featureContext.moveTo(feature.x + feature.width, 0); | ||
| featureContext.lineTo(feature.x + feature.width, feature.height + 0.5); | ||
| featureContext.lineTo(feature.x, feature.height / 2); | ||
| } | ||
|
|
||
| featureContext.closePath(); | ||
| featureContext.fill(); | ||
| featureContext.stroke(); | ||
| } else if (feature.type === 'stalk') { | ||
| featureContext.fillStyle = feature.color; | ||
| featureContext.strokeStyle = '#000000'; | ||
|
|
||
| for (var i = 0; i < 2; i++) { | ||
| featureContext.beginPath(); | ||
|
|
||
| featureContext.moveTo(feature.x, 0); | ||
| featureContext.lineTo(feature.x + feature.width * 0.25, feature.height * 0.25 + 0.5); | ||
| featureContext.lineTo(feature.x + feature.width * 0.75, feature.height * 0.25 + 0.5); | ||
| featureContext.lineTo(feature.x + feature.width, 0); | ||
|
|
||
| featureContext[i ? 'moveTo' : 'lineTo'](feature.x + feature.width, feature.height); | ||
| featureContext.lineTo(feature.x + feature.width * 0.75, feature.height * 0.75 - 0.5); | ||
| featureContext.lineTo(feature.x + feature.width * 0.25, feature.height * 0.75 - 0.5); | ||
| featureContext.lineTo(feature.x, feature.height); | ||
|
|
||
| featureContext[i ? 'stroke' : 'fill'](); | ||
| }; | ||
| } else { | ||
| this.base(feature, featureContext, labelContext, scale); | ||
|
|
||
| featureContext.strokeStyle = '#000000'; | ||
|
|
||
| featureContext.beginPath(); | ||
|
|
||
| if (feature.start === 1) { | ||
| featureContext.clearRect(0, 0, 5, this.prop('height')); | ||
|
|
||
| featureContext.fillStyle = feature.color; | ||
| featureContext.moveTo(5, 0.5); | ||
| featureContext.lineTo(feature.x + feature.width, 0.5); | ||
| featureContext.moveTo(5, feature.height + 0.5); | ||
| featureContext.lineTo(feature.x + feature.width, feature.height + 0.5); | ||
| featureContext.moveTo(5, 0.5); | ||
| featureContext.bezierCurveTo(-1, 0.5, -1, feature.height + 0.5, 5, feature.height + 0.5); | ||
| featureContext.fill(); | ||
| } else if (feature.end === this.browser.chromosomeSize) { | ||
| featureContext.clearRect(feature.x + feature.width - 5, 0, 10, this.prop('height')); | ||
|
|
||
| featureContext.fillStyle = feature.color; | ||
| featureContext.moveTo(feature.x, 0.5); | ||
| featureContext.lineTo(feature.x + feature.width - 5, 0.5); | ||
| featureContext.moveTo(feature.x, feature.height + 0.5); | ||
| featureContext.lineTo(feature.x + feature.width - 5, feature.height + 0.5); | ||
| featureContext.moveTo(feature.x + feature.width - 5, 0.5); | ||
| featureContext.bezierCurveTo(this.width + 1, 0.5, this.width + 1, feature.height + 0.5, feature.x + feature.width - 5, feature.height + 0.5); | ||
| featureContext.fill(); | ||
| } else { | ||
| featureContext.moveTo(feature.x, 0.5); | ||
| featureContext.lineTo(feature.x + feature.width, 0.5); | ||
| featureContext.moveTo(feature.x, feature.height + 0.5); | ||
| featureContext.lineTo(feature.x + feature.width, feature.height + 0.5); | ||
| } | ||
|
|
||
| featureContext.stroke(); | ||
| } | ||
| }, | ||
|
|
||
| populateMenu: function (feature) { | ||
| return { | ||
| title : feature.id, | ||
| Position : this.browser.chr + ':' + feature.start + '-' + feature.end | ||
| }; | ||
| } | ||
| }); |
Oops, something went wrong.