I zoomed in as much as possible (and it is far enough when I look at the "ruler") but I still can't see anything. Only the DNA track was added. I hope the config file and genome.css are right... but I attached them
Date: Tue, 5 Oct 2010 14:55:40 -0700
From: ml-node+1639051-1043949749-80254@...
To: friedrich.anja@...
Subject: Re: data are not displayed even though they were loaded (JBrowse)
Do the motifs show up if you zoom in?
The motifs should show up, assuming that:
1. you have "subfeatures": true and "subfeature_classes" in your config
file, like this:
"subfeatures": true,
"subfeature_classes": {
"motif1_small_a": "small_red",
"motif1_small_b": "small_blue",
"motif1_small_c": "small_purple",
"motif1_tall_a": "tall_blue",
"motif1_tall_b": "tall_purple"
}
and 2. /var/www/genome.css has a listing for all of the values in the
"subfeature_classes" setting.
If have both of those things, then my best guess for what's going on is
this: by default, subfeatures like your motifs are only shown once you
zoom in beyond a certain level.
The threshold where they show up is controlled by the "subfeatureScale"
setting in the "clientConfig" part of the config file, so you can add
something like this:
"clientConfig": {
"subfeatureScale": 40
},
The default is 80, and if you want the subfeatures to still show up when
you're more zoomed out, set it lower.
The actual units for the "subfeatureScale" setting are pixels/feature.
That value is multiplied by the average feature density in features/base
units (i.e., the number of features in the track / the refseq length) to
get the scale threshold in pixels per base. For example, if the
subfeatureScale is 2, and a track has 100 features, then subfeatures
will be shown if you're zoomed in far enough that the entire refseq
would be at least 200 pixels wide.
Hope this helps,
Mitch
On 10/05/2010 02:24 PM, anja wrote:
> Hi Mitch,
>
> when I visit http://localhost/ then I see the surface of JBrowse and
> the track as a grey line, so no motifs at all... more then before I guess
------------------------------------------------------------------------------
Beautiful is writing same markup. Internet Explorer 9 supports
standards for HTML5, CSS3, SVG 1.1, ECMAScript5, and DOM L2 & L3.
Spend less time writing and rewriting code and more time creating great
experiences on the web. Be a part of the beta today.
http://p.sf.net/sfu/beautyoftheweb
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
View message @ http://gmod.827538.n3.nabble.com/Gmod-ajax-data-are-not-displayed-even-though-they-were-loaded-JBrowse-tp1631655p1639051.html
To start a new topic under GMOD, email ml-node+827538-783582933-80254@...
To unsubscribe from GMOD, click here.
html, body {
height: 98%;
}
.nav {
vertical-align: middle;
z-index: 10;
}
input.icon {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
div.container {
position: absolute;
z-index: 0;
}
div.dragWindow {
position:absolute;
overflow: hidden;
z-index: 1;
cursor: url("openhand.cur");
}
div.locationTrap {
position: absolute;
background-color: #BDD7FF;
border-color: white white #BDD7FF white;
border-style: solid;
width: 0px;
height: 0px;
line-height: 0px;
z-index: -10;
}
div.locationThumb {
position: absolute;
top: 0px;
/* if you change this border from 2px, change GenomeView.showTrap */
border: 2px solid red;
margin: 0px -2px 0px -2px;
cursor: url("openhand.cur");
}
div.locationThumb.dojoMoveItem {
cursor: url("closedhand.cur");
}
div.overview {
width: 100%;
border-style: solid;
border-width: 5px 0px 5px 0px;
border-color: #aaa;
color:#aaa;
font-family: sans-serif;
text-align: center;
z-index: -5;
}
div.block {
position: absolute;
overflow: visible;
top: 0px;
height: 100%;
}
div.track {
position: absolute;
left: 0px;
width: 100%;
z-index: 5;
}
.track.dojoDndItemOver {
cursor: inherit;
}
.track.dojoDndItemBefore {
border-top: 3px solid #999;
margin-top: -3px;
}
.track.dojoDndItemAfter {
border-bottom: 3px solid #999;
margin-bottom: -3px;
}
div#static_track {
top: 0px;
position: absolute;
background-color: #f0f0f0;
z-index: 20;
}
div.gridline {
position: absolute;
top: 0px;
height: 100%;
border-style: none none none solid;
border-width: 1px;
border-color: #ddd;
}
div.pos-label {
position: absolute;
left: 0px;
background-color: #ddd;
z-index: 100;
padding: 4px;
font-family: sans-serif;
}
div.overview-pos {
position: absolute;
left: 0px;
color: black;
padding-left: 4px;
font-family: sans-serif;
border-style: solid;
border-color: black;
border-width: 0px 0px 0px 1px;
}
div.blank-block {
font: sans-serif;
position: absolute;
overflow: visible;
top: 0px;
height: 100%;
background-color: #eee;
z-index: 19;
}
div.sequence {
position: absolute;
left: 0px;
font-family: monospace;
letter-spacing: 2px;
padding-left: 2px;
}
/*
div.minus-feature:before {
content: attr(fName);
display: block;
}
div.plus-feature:before {
content: attr(fName);
display: inline;
}
*/
div.track-label {
font-family: sans-serif;
z-index: 20;
background-color: #BDD7FF;
border: 2px #2b434c solid;
color: #2b434c;
padding: 5px;
cursor: pointer;
}
div.tracklist-label {
font-family: sans-serif;
z-index: 20;
background-color: #BDD7FF;
border: 2px #2b434c solid;
color: #2b434c;
cursor: pointer;
padding: 3px;
}
/* commented for now, multi-select too confusing?
.tracklist-container.dojoDndItemSelected {
background: #ddf;
}
.tracklist-container.dojoDndItemAnchor {
background: #ddf;
}
*/
div.tracklist-container {
padding: 5px;
margin-top: -3px;
margin-bottom: -3px;
}
.tracklist-container.dojoDndItemBefore {
border-top: 3px solid #999;
padding-top: 2px;
}
.tracklist-container.dojoDndItemAfter {
border-bottom: 3px solid #999;
padding-bottom: 2px;
}
.feature-label {
position: absolute;
font-family: monospace;
border: 0px;
margin: -2px 0px 0px 0px;
/* padding: 0px 0px 2px 0px; for more space below labels */
padding: 0px 0px 0px 0px;
/* font-size: 80%; */
white-space: nowrap;
background-color: #eee;
z-index: 10;
cursor: pointer;
}
.basic,
.plus-basic,
.minus-basic {
position: absolute;
cursor: pointer;
z-index: 10;
min-width: 1px;
}
div.basic-hist {
position: absolute;
z-index: 10;
}
.plus-feature,
.minus-feature {
position:absolute;
height: 8px;
background-repeat: repeat-x;
cursor: pointer;
min-width: 1px;
z-index: 10;
}
.plus-feature { background-image: url('img/plus-chevron3.png'); }
.minus-feature { background-image: url('img/minus-chevron3.png'); }
div.feature-hist {
position: absolute;
background-color: blue;
border-color: lightblue;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.plus-feature2,
.minus-feature2 {
position:absolute;
height: 15px;
background-repeat: repeat-x;
cursor: pointer;
min-width: 1px;
z-index: 10;
}
.plus-feature2 { background-image: url('img/plus-herringbone16.png'); }
.minus-feature2 { background-image: url('img/minus-herringbone16.png'); }
div.feature2-hist {
position: absolute;
background-color: #9f9;
border-color: #ada;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.plus-feature3,
.minus-feature3 {
position:absolute;
height: 8px;
background-repeat: repeat-x;
cursor: pointer;
min-width: 1px;
z-index: 10;
}
.plus-feature3 { background-image: url('img/plus-chevron.png'); }
.minus-feature3 { background-image: url('img/minus-chevron.png'); }
div.feature3-hist {
position: absolute;
background-color: yellow;
border-color: black;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.plus-feature4,
.minus-feature4 {
position:absolute;
height: 12px;
background-repeat: repeat-x;
cursor: pointer;
min-width: 1px;
z-index: 10;
}
.plus-feature4 { background-image: url('img/plus-pacman.png'); }
.minus-feature4 { background-image: url('img/minus-pacman.png'); }
div.feature4-hist {
position: absolute;
background-color: yellow;
border-color: black;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.plus-feature5,
.minus-feature5 {
position:absolute;
height: 8px;
background-repeat: repeat-x;
cursor: pointer;
min-width: 1px;
z-index: 10;
}
.plus-feature5 { background-image: url('img/plus-chevron2.png'); }
.minus-feature5 { background-image: url('img/minus-chevron2.png'); }
div.feature5-hist {
position: absolute;
background-color: blue;
border-color: lightblue;
border-style: solid;
border-width: 1px;
z-index: 10;
}
div.exon-hist {
position: absolute;
background-color: #4B76E8;
border-style: solid;
border-color: #00f;
border-width: 1px;
z-index: 10;
}
.plus-exon,
.minus-exon {
position: absolute;
height: 5px;
background-color: #4B76E8;
border-style: solid;
border-color: #00f;
border-width: 1px;
cursor: pointer;
z-index: 10;
}
div.est-hist {
position: absolute;
background-color: #ED9185;
border-style: solid;
border-color: #c33;
border-width: 1px;
z-index: 10;
}
.plus-est,
.minus-est {
position: absolute;
height: 5px;
background-color: #ED9185;
border-style: solid;
border-color: #c33;
border-width: 1px;
cursor: pointer;
z-index: 10;
}
.plus-dblhelix,
.minus-dblhelix {
position:absolute;
height: 11px;
background-image: url('img/dblhelix-red.png');
background-repeat: repeat-x;
min-width: 1px;
cursor: pointer;
z-index: 10;
}
div.dblhelix-hist {
position: absolute;
background-color: #fcc;
border-color: #daa;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.plus-helix,
.minus-helix {
position:absolute;
height: 12px;
background-image: url('img/helix3-green.png');
background-repeat: repeat-x;
min-width: 1px;
cursor: pointer;
z-index: 10;
}
div.helix-hist {
position: absolute;
background-color: #cfc;
border-color: #ada;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.loops {
position:absolute;
height: 13px;
background-image: url('img/loops.png');
background-repeat: repeat-x;
cursor: pointer;
}
.plus-cds0, .plus-cds1, .plus-cds2,
.minus-cds0, .minus-cds1, .minus-cds2 {
position:absolute;
height: 13px;
background-repeat: repeat-x;
cursor: pointer;
min-width: 1px;
}
.plus-cds0 { background-image: url('img/plus-cds0.png'); }
.plus-cds1 { background-image: url('img/plus-cds1.png'); }
.plus-cds2 { background-image: url('img/plus-cds2.png'); }
.minus-cds0 { background-image: url('img/minus-cds0.png'); }
.minus-cds1 { background-image: url('img/minus-cds1.png'); }
.minus-cds2 { background-image: url('img/minus-cds2.png'); }
div.cds-hist {
position: absolute;
background-color: #fcc;
border-color: #daa;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.topbracket {
position:absolute;
height: 8px;
border-style: solid solid none solid;
/* border-width: 2px 2px 0px 2px; */
border-width: 2px;
border-color: orange;
/* margin-top: 2px */
cursor: pointer;
}
.bottombracket {
position:absolute;
height: 8px;
border-style: none solid solid solid;
border-width: 2px;
border-color: green;
cursor: pointer;
}
.hourglass {
position:absolute;
height: 0px;
border-style: solid;
border-width: 6px 3px 6px 3px;
cursor: pointer;
}
.plus-triangle {
position:absolute;
height: 0px;
border-style: solid;
border-width: 6px 3px 0px 3px;
cursor: pointer;
}
.minus-triangle {
position:absolute;
height: 0px;
border-style: solid;
border-width: 0px 3px 6px 3px;
cursor: pointer;
}
.triangle {
position:absolute;
height: 0px;
border-style: solid;
border-width: 6px 0px 0px 0px;
cursor: pointer;
}
.hgred {
border-color: #f99 white #f99 white;
}
div.hgred-hist {
position: absolute;
background-color: #daa;
border-color: #d44;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.hgblue {
border-color: #99f white #99f white;
}
div.hgblue-hist {
position: absolute;
background-color: #aad;
border-color: #99f;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.ibeam {
position:absolute;
height: 2px;
background-color: blue;
border-style: solid;
border-width: 8px 4px 8px 4px;
border-color: white blue white blue;
cursor: pointer;
}
div.transcript-hist {
position: absolute;
background-color: #ddd;
border-color: #FF9185;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.transcript,
.plus-transcript,
.minus-transcript {
position: absolute;
height: 4px;
margin-top: 4px;
margin-bottom: 4px;
background-color: #999;
z-index: 6;
min-width: 1px;
cursor: pointer;
}
.plus-transcript-arrowhead {
position: absolute;
/* border stuff seems slow
height: 0px;
width: 0px;
margin-top: -4px;
border-style: solid;
border-color: white white white #999;
border-width: 6px 0px 6px 10px; */
margin-top: -4px;
width: 12px;
height: 12px;
background-image: url('img/plus-transcript-head.png');
background-repeat: no-repeat;
}
.minus-transcript-arrowhead {
position: absolute;
/* border stuff seems slow
height: 0px;
width: 0px;
margin-top: -4px;
border-style: solid;
border-color: white #999 white white;
border-width: 6px 10px 6px 0px; */
margin-top: -4px;
width: 12px;
height: 12px;
background-image: url('img/minus-transcript-head.png');
background-repeat: no-repeat;
}
.plus-transcript-CDS,
.minus-transcript-CDS {
position: absolute;
height: 12px;
margin-top: -4px;
background-image: url('img/cds.png');
background-repeat: repeat-x;
/* border-width: 2px 0px 3px 0px;
border-style: solid;
border-color: white;
background-color: #FF9185;
border-style: solid;
border-color: #00f;
border-width: 1px;*/
cursor: pointer;
z-index: 10;
min-width: 1px;
}
.plus-transcript-exon,
.minus-transcript-exon,
.plus-transcript-UTR,
.minus-transcript-UTR,
.plus-transcript-five_prime_UTR,
.minus-transcript-five_prime_UTR,
.plus-transcript-three_prime_UTR,
.minus-transcript-three_prime_UTR {
position: absolute;
height: 4px;
margin-top: -2px;
background-color: #B66;
border-style: solid;
border-color: #D88;
border-width: 2px 0px 2px 0px;
z-index: 8;
min-width: 1px;
cursor: pointer;
}
.generic_parent,
.plus-generic_parent,
.minus-generic_parent {
position: absolute;
height: 4px;
margin-top: 2px;
margin-bottom: 2px;
background-color: #AAA;
z-index: 6;
min-width: 1px;
cursor: pointer;
}
div.generic_parent-hist {
position: absolute;
background-color: #ddd;
border-color: #555;
border-style: solid;
border-width: 1px;
z-index: 10;
}
.match_part,
.plus-match_part,
.minus-match_part {
position: absolute;
height: 4px;
margin-top: -2px;
background-color: #66B;
border-style: solid;
border-color: #88D;
border-width: 2px 0px 2px 0px;
z-index: 8;
min-width: 1px;
cursor: pointer;
}
.generic_part_a,
.plus-generic_part_a,
.minus-generic_part_a {
position: absolute;
height: 4px;
margin-top: -2px;
background-color: #6B6;
border-style: solid;
border-color: #8D8;
border-width: 2px 0px 2px 0px;
z-index: 8;
min-width: 1px;
cursor: pointer;
}
.plus-small_red,
.plus-small_blue,
.plus-small_purple,
.plus-small_green,
.plus-small_orange,
.plus-small_black,
.plus-small_pink,
.plus-small_brown,
.plus-small_yellow,
.plus-small_violet,
.plus-small_aqua,
.plus-small_fuchsia,
.plus-tall_blue,
.plus-tall_purple,
.plus-tall_red,
.plus-tall_yellow,
.plus-tall_brown,
.plus-tall_orange,
.minus-small_red,
.minus-small_blue,
.minus-small_purple,
.minus-small_green,
.minus-small_orange,
.minus-small_black,
.minus-small_pink,
.minus-small_brown,
.minus-small_yellow,
.minus-small_violet,
.minus-small_aqua,
.minus-small_fuchsia,
.minus-tall_blue,
.minus-tall_purple
.minus-tall_red,
.minus-tall_yellow,
.minus-tall_brown,
.minus-tall_orange, {
position: absolute;
cursor: pointer;
z-index: 10;
min-width: 1px;
}
.plus-small_red, .minus-small_red {
background-color: #EB2A2A; height: 6px; margin-top: -1px;
}
.plus-small_blue, .minus-small_blue {
background-color: #46A1E0; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_purple {
background-color: #7322BF; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_green {
background-color: #008000; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_orange {
background-color: #FFA500; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_black {
background-color: #000000; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_pink {
background-color: #FFC0CB; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_brown {
background-color: #A52A2A; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_yellow {
background-color: #FFFF00; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_violet {
background-color: #C71585; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_aqua {
background-color: #00FFFF; height: 6px; margin-top: -1px;
}
.plus-small_purple, .minus-small_fuchsia {
background-color: #FF00FF; height: 6px; margin-top: -1px;
}
.plus-tall_blue, .minus-tall_blue {
background-color: #46A1E0; height: 10px; margin-top: -3px;
}
.plus-tall_purple, .minus-tall_purple {
background-color: #7322BF; height: 10px; margin-top: -3px;
}
plus-tall_blue, .minus-tall_yellow {
background-color: #FFFF00; height: 10px; margin-top: -3px;
}
plus-tall_blue, .minus-tall_brown {
background-color: #A52A2A; height: 10px; margin-top: -3px;
}
plus-tall_blue, .minus-tall_orange {
background-color: #FFA500; height: 10px; margin-top: -3px;
}
--
View this message in context: http://gmod.827538.n3.nabble.com/Gmod-ajax-data-are-not-displayed-even-though-they-were-loaded-JBrowse-tp1631655p1639083.html
Sent from the JBrowse mailing list archive at Nabble.com.
|