Skip to content

GitLab

Commit e406e0d4 authored by Bertrand NÉRON's avatar Bertrand NÉRON
Browse files

change color gene (color.css) according to the svg schema 

add description in popup gene in genome schema
modify css to improved look of site
parent 663898c1
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 52 deletions
src/couchapp/secreton/_attachments/index.html
View file @ e406e0d4
......@@ -10,39 +10,59 @@
<script src="script/jquery-ui-1.8.17.custom.min.js"></script>
</head>
<body>
<h1>Secreton</h1>
<h2>Non-Flagellar Type III Secretion Systems in sequenced genomes</h2>
<div id="head">
<img src="images/systeme_complet.svg" title="Non-Flagellar Type III Secretion System schema" alt="Non-Flagellar Type III Secretion System schema">
<p>Non-Flagellar Type III Secretion Systems (NF-T3SS, or injectisomes) are bacterial machineries partially homologous to the bacterial flagellum,
which allow direct injection of bacterial effectors from bacterial cytoplasm to eukaryotic cells via a molecular needle (cf. schema above).
NF-T3SS are found in animal and plant pathogens (<span class="gene_name">Yersinia pestis</span>,<span class="gene_name">Escherichia coli</span>, <span class="gene_name">Burkholderia</span>,...),
but also in plant and insect symbionts (e.g., <span class="gene_name">Rhizobiales</span>).</p>
<p>This website allows to query a dataset of 216 NF-T3SS retrieved from 1385 complete genome sequences.
These systems were detected with proteic profiles of NF-T3SS core genes (<span class="gene_name">sctC</span>, <span class="gene_name">sctN</span>, <span class="gene_name">sctJ</span>,
<span class="gene_name">sctQ</span>, <span class="gene_name">sctR</span>, <span class="gene_name">sctS</span>, <span class="gene_name">sctT</span>,
<span class="gene_name">sctU</span>, <span class="gene_name">sctV</span>),
and with an analysis of the genomic context of the hits obtained.
This dataset along with the methodology is described in Abby and Rocha 2012.</p>
<p>Proteic profiles used for this study are available to analyze user data on the
Mobyle web server: <a href="http://mobyle.pasteur.fr/cgi-bin/portal.py#forms::T3SSscan-FLAGscan" target="_blank">http://mobyle.pasteur.fr/cgi-bin/portal.py#forms::T3SSscan-FLAGscan</a>.
These profiles allow to detect both NF-T3SS and flagella.</p>
</div>
<div id="request">
<form>
<fieldset>
<label for="nameSearch">by replicon name (ex:BUMA001c02)</label>
<input type="text" name="nameSearch" id="nameInput" class="ui-widget ui-corner-all"/>
<select name="queryType" id="nameQueryType" class="ui-widget ui-corner-all ui-state-default">
<option value="is" selected="selected" class="ui-widget ui-corner-all ">is</option>
<option value="start_with" class="ui-widget ui-corner-all " >start_with</option>
</select>
<button type="button" id="nameButton">search by name</button>
</fieldset>
<fieldset>
<label for="taxidSearch">by replicon taxon id (ex:155864)</label>
<input type="text" name="taxidSearch" id="taxidInput" class="ui-widget ui-corner-all"/>
<button type="button" id="taxidButton">search by taxid</button>
</fieldset>
<fieldset>
<label for="famillySearch">by T3SS family</label>
<select name="familySearch" id="familyList" class="ui-widget ui-corner-all ui-state-default">
</select>
</fieldset>
<fieldset>
<label for="strainSearch">by strain</label>
<input type text="text" name="strainSearch" id="strainInput" size="100" class="ui-widget ui-corner-all"/>
</fieldset>
<fieldset>
<label for="taxonomySearch">by taxonomy</label>
<input type text="text" name="taxonomySearch" id="taxonomyInput" size="50" class="ui-widget ui-corner-all"/>
</fieldset>
</form>
<fieldset>
<legend>Detected NF-T3SS can be queried: </legend>
<label for="nameSearch">by replicon name (ex:BUMA001c02)
<input type="text" name="nameSearch" id="nameInput"class="ui-widget ui-corner-all" />
<select name="queryType" id="nameQueryType"class="ui-widget ui-corner-all ui-state-default">
<option value="is" selected="selected" class="ui-widget ui-corner-all ">is</option>
<option value="start_with" class="ui-widget ui-corner-all ">start_with</option>
</select>
<button type="button" id="nameButton">search by name</button>
</label>
<label for="taxidSearch">by replicon taxon id (ex:155864)
<input type="text" name="taxidSearch" id="taxidInput" class="ui-widget ui-corner-all" />
<button type="button" id="taxidButton">search by taxid</button>
</label>
<label for="famillySearch">by T3SS family
<select name="familySearch" id="familyList" class="ui-widget ui-corner-all ui-state-default"> </select>
</label>
<label for="strainSearch">by strain
<input type="text" name="strainSearch" id="strainInput" size="100" class="ui-widget ui-corner-all" />
</label>
<label for="taxonomySearch">by taxonomy
<input type="text" name="taxonomySearch" id="taxonomyInput" size="50" class="ui-widget ui-corner-all" />
</label>
</fieldset>
</form>
</div>
<div id="results"></div>
</body>
<script type="text/javascript">
$(".tooltip a" , "#results").live('mouseenter', function(){
......
src/couchapp/secreton/_attachments/style/color.css
View file @ e406e0d4
.gene_sctC { background-color: BlueViolet }
.gene_sctD { background-color: Blue}
.gene_sctD2{ background-color: DarkCyan}
.gene_sctF { background-color: Cyan}
.gene_sctI { background-color: Aqua}
.gene_sctJ { background-color: DarkGreen}
.gene_sctL { background-color: Green}
.gene_sctN { background-color: ForestGreen}
.gene_sctO { background-color: LimeGreen}
.gene_sctQ { background-color: GreenYellow}
.gene_sctR { background-color: YellowGreen}
.gene_sctS { background-color: Yellow}
.gene_sctT { background-color: Gold}
.gene_sctU { background-color: GoldenRod}
.gene_sctV { background-color: Orange}
.gene_sycD { background-color: DarkOrange}
.gene_sycN { background-color: OrangeRed}
.gene_yopB { background-color: Red}
.gene_yopD { background-color: FireBrick}
.gene_yopN { background-color: Maroon}
\ No newline at end of file
.gene_SctC { background-color: #f0de2f };
.gene_SctD { background-color: #550000}
.gene_SctF { background-color: #4D4D4D}
.gene_SctI { background-color: #808080}
.gene_SctJ { background-color: #008080}
.gene_SctL { background-color: #F80E16}
.gene_SctK { background-color: #F80E16}
.gene_SctN { background-color: #F80E16}
.gene_SctO { background-color: LimeGreen}
.gene_SctQ { background-color: #0000FF}
.gene_SctR { background-color: #8800AA}
.gene_SctS { background-color: #8800AA}
.gene_SctT { background-color: #8800AA}
.gene_SctU { background-color: #8800AA}
.gene_SctV { background-color: #8800AA}
.gene_SycD { background-color: DarkGreen}
.gene_SycN { background-color: lightGreen}
.gene_YopB { background-color: #333333}
.gene_YopD { background-color: #333333}
.gene_YopN { background-color: Chartreuse}
.gene_LcrV { background-color: #333333}
src/couchapp/secreton/_attachments/style/main.css
View file @ e406e0d4
......@@ -6,7 +6,49 @@ body {
}
h1 {
margin-top:0;
font-size:3em;
text-align:center;
}
h2 {
text-align:center;
}
#head {
font:Verdana,Arial,sans-serif;
font-size: 1.1em;
}
#head img{
display: block;
margin: 0 auto;
width:400px;
}
.gene_name{
font-style:italic;
}
#request form label{
display: block;
padding: 2px;
margin: 0.5em;
}
#request form{
margin: 1em;
background-color: #F9F9F9;
}
#results{
margin-bottom:2em;
}
#head p{
text-indent:1em;
margin-right:0.5em;
margin-left:0.5em;
padding-right:0.5em;
padding-left:0.5em;
}
#head p:first-letter{
font-weight:bold;
}
\ No newline at end of file
src/couchapp/secreton/templates/secretion_system.html
View file @ e406e0d4
......@@ -2,6 +2,7 @@
<html>
<head>
<title>secretion system {{code}}</title>
<link rel="stylesheet" href="../../style/main.css" type="text/css">
<link rel="stylesheet" href="../../style/system.css" type="text/css">
<link rel="stylesheet" href="../../style/color.css" type="text/css">
<script src="/_utils/script/jquery.js" type="text/javascript"></script>
......@@ -72,6 +73,9 @@
label.push(this.text(60, 27, "match: "+gene_info.match ).attr(txt));
}
label.push(this.text(60, 42, "protein length: "+gene_info.protein_length).attr(txt));
if(gene_info.description){
label.push(this.text(60, 57, "description: "+gene_info.description).attr(txt));
}
label.hide();
popup.push( label );
var frame = this.popup( start +( (stop -start)/2 ) , 100, label , "bottom").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7});
......@@ -251,7 +255,10 @@
</head>
<body>
<h1>Type III Secretion System </h1>
<h1>Non-Flagellar Type III Secretion System</h1>
<a href="../../index.html"><img src="../../images/systeme_simple.svg" width="100px" title="Go to Secreton search page" alt="Non-Flagellar Type III Secretion System schema"></a>
<ul>
{{#replicon}}
<li>strain: {{strain}}</li>
......@@ -292,6 +299,8 @@
<th>Coverage-profile</th>
<th>Match-begin</th>
<th>Match-end</th>
<th>Gene-name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
......@@ -303,7 +312,7 @@
<td>{{strand}}</td>
<td>{{begin}}</td>
<td>{{end}}</td>
<td>{{match}}</td>
<td><span class="gene_name">{{match}}</span></td>
<td>{{full_score}}</td>
<td>{{e_value}}</td>
<td>{{best_domain_score}}</td>
......@@ -312,6 +321,8 @@
<td>{{coverage_profile}}</td>
<td>{{match_begin}}</td>
<td>{{match_end}}</td>
<td>{{name}}</td>
<td>{{description}}</td>
</tr>
{{/genes}}
</tbody>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment