Re: [Gmod-ajax] data are not displayed even though they were loaded (JBrowse)

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 422-6466

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-...@n3...
To: fri...@ho...
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-...@n3...

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.