Commit 9daceb5c authored by Marc Duez's avatar Marc Duez Committed by Mathieu Giraud

First public release of the Vidjil browser

	* browser/ : D3.js/javascript-based V(D)J recombination browser
	* server/fuse.py : script to combine data from several points
parent 113ee8ee
germline/????.fa
data/Stanford_S22.fasta
data/Stanford_S22.rc.fasta
*.data
*.clntab
*.tap
*.log
dep.mk
*~
*.o
*.a
*.pyc
/vidjil
/algo/tests/tests
/algo/tests/out/
/algo/TAGS
/algo/tools/affectanalyser
/algo/tools/align
/algo/tools/compareV
/algo/tools/cut
/algo/tools/dynprog
/algo/tools/segmentD
/out
/browser/css/*.css
/browser/cgi/align.cgi
align: core align.o
mkdir -p ../../interface/cgi
g++ -o ../../interface/cgi/align.cgi align.o ../core.a
mkdir -p ../../browser/cgi
g++ -o ../../browser/cgi/align.cgi align.o ../core.a
align.o: align.cpp
g++ -c align.cpp
......
all: cp deep
cp:
mkdir -p data/
scp -pr "vdj:vdj/data/runs/13-0*/*.data" data/
mkdir -p data/run/
scp -pr "vdj:vdj/data/runs/13-0*/run-*" data/run/
deep:
ssh vdj "cd vdj/data/runs ; sh cp-deep-data-json"
scp -pr "vdj:vdj/data/runs/export-data" data/
Leu:
cd data/export-data/13-09 ; python ../../../fuse.py BCD-Leu.data 100 out-vidjil/BCD/data.json out-vidjil/Leu+0*/data.json out-vidjil/Leu+1*/data.json out-vidjil/Leu+5*/data.json out-vidjil/Leu+2*/data.json out-vidjil/Leu+[3467]*/data.json
LESSC=lessc
all: dark.css light.css
dark.css: dark.less vidjil.less
$(LESSC) dark.less dark.css
light.css: light.less vidjil.less
$(LESSC) light.less light.css
no:
make LESSC="./node lessc"
/* default color solarizeD */
@default : #839496;
@background : #002b36;
@highlight : #073642;
@select : #fdf6e3;
@secondary : #586e75;
@border : #284e55;
@import "vidjil.less";
/* default color solarizeL */
@default : #657b83;
@background : #eee8d5;
@highlight : #fdf6e3;
@select : #002b36;
@secondary : #93a1a1;
@border : #b3c1c1;
@import "vidjil.less";
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
html{
height: 100%;
padding: 0px;
margin: 0px;
min-width: 1160px;
min-height: 650px
}
body {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
height : 100%;
margin:0px;
color : @default;
background : @background;
}
h2
{
margin-top: 2px;
}
ul{
padding-left:2px;
margin-top: 3px;
list-style-type: none;
}
#visu-container{
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
height :100%;
}
#top-container {
height: 28px;
width: 100%;
background: inherit;
border-bottom: solid;
}
#mid-container {
height: -moz-calc(~"100% - 150px");
height: -webkit-calc(~"100% - 150px");
height: calc(~"100% - 150px");
width: 100%;
overflow: hidden;
background: @background;
}
#switch{
float: right;
position: relative;
top: -50px;
height:0px;
}
#left-container {
height:100%;
width : @width_left_container;
height : 100%;
overflow-y : none;
float : left;
}
#visu, #visu2 {
display : inline-block;
height : 50%;
width: -moz-calc(~"100% - " ( @width_left_container ) );
width: -webkit-calc(~"100% - " ( @width_left_container ) );
width: calc(~"100% - " ( @width_left_container ) );
overflow:hidden;
}
#left{
height:100%;
}
#info{
font-family : Courier New,monaco,terminal,courier,system;
font-size: 14px;
height :150px;
padding:3px;
}
/*Style polyline / graph*/
.background_graph{
fill : @background
}
.background_graph2{
fill : @highlight
}
.graph_line{
stroke-width : 2.5px;
cursor:pointer;
}
.graph_inactive{
stroke-width : 1.5px;
cursor:pointer;
display:none;
}
.graph_select{
stroke-width : 5px;
cursor:pointer;
stroke-dasharray : 20px,5px ;
}
.graph_focus{
stroke-width : 5px;
cursor:pointer;
}
#timebar{
stroke : @secondary ;
opacity : 0.5 ;
stroke-width : 20px;
}
.axis_h{
stroke : @secondary ;
stroke-width : 2px ;
}
.axis_v{
stroke : @secondary ;
stroke-width : 2px;
stroke-dasharray: 6,6;
}
.axis_button, .axis_leg{
fill : @default;
}
#resolution1{
fill : @background;
opacity : 1;
}
#resolution5{
fill : @background;
opacity : 0.75;
}
.graph_text, .graph_time{
font-weight : bold;
fill : @secondary ;
text-anchor:middle;
}
.graph_time:hover{
cursor:pointer;
fill : @select;
}
/*style scatterPlot element*/
.background_sp{
fill : @background
}
.circle{
cursor:pointer;
-webkit-transition: fill 0.2s;
-o-transition: fill 0.2s;
-ms-transition: fill 0.2s;
transition: fill 0.2s;
}
.circle_inactive{
cursor:pointer;
opacity: 0.5
}
.circle_select{
stroke-width : 2.5px;
stroke : @select;
cursor:pointer;
}
.circle_focus{
cursor:pointer;
}
.circle_hidden{
-webkit-transition: fill 0.2s;
display:none;
}
.sp_legend{
fill : @secondary ;
font-weight : bold;
text-anchor : middle;
}
.sp_line , .sp_subline{
stroke : @secondary ;
stroke-width : 0.7px;
}
.sp_subline{
stroke-width : 0.5px;
stroke-dasharray: 6,6;
}
.sp_subline_hidden{
stroke-width : 0px;
}
/*style list element*/
/*Metric*/
@width_left_container : 475px;
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
@width_sizeBox : 60px;
@width_infoBox : 20px;
@width_listElem : (@width_left_container - @width_scrollbar);
@margin_nameBox : 10px;
@width_nameBox2 : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox);
@width_nameBox2 : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox);
.list:hover, .tagElem:hover{
background :@highlight;
}
#listClones{
overflow-y : scroll;
overflow-x : hidden;
font-weight: bold;
height: -moz-calc(~"100% - 210px");
height: -webkit-calc(~"100% - 210px");
height: calc(~"100% - 210px");
padding:2px;
}
.list{
width : @width_left_container;
display : block;
padding : 2px;
}
.listElem{
width : @width_listElem;
font-family : Courier New,monaco,terminal,courier,system;
font-size: 14px;
cursor:pointer;
-webkit-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
font-weight : bold;
padding:3px;
height :14px;
}
.selected{
color : @select;
}
.nameBox2 {
width: @width_nameBox2;
margin-right: @margin_nameBox;
overflow: hidden;
display: inline-block;
height: 16px;
position: relative;
float:left;
white-space:nowrap;
}
.sizeBox{
width: @width_sizeBox;
float: right;
overflow: hidden;
display: inline-block;
height: 16px;
position: relative;
}
.starBox{
width: @width_starBox;
float: right;
height: 16px;
display: inline-block;
user-select :none;
}
.infoBox{
width: @width_infoBox;
float: right;
height: 16px;
display: inline-block;
user-select :none;
text-align: center;
}
.clusterBox{
width: @width_clusterBox;
float: left;
height: 12px;
display: inline-block;
text-align :center
}
.delBox{
margin:2px;
height: 12px;
width: 12px;
display: inline-block;
color: white;
float:left;
user-select :none;
margin-right: 5px;
margin-left: 15px;
}
.nameBox {
width: 320px;
overflow: hidden;
display: inline-block;
height: 16px;
position: relative;
float:left;
}
#new_name{
font-family: monospace;
font-weight:bold;
}
/*style segmenter element*/
.list_select{
width : @width_left_container;
display : block;
border : solid;
border-width : 2px;
padding : 0px;
border-color : @select;
background : @highlight;
}
#listSeq {
font-weight: bold;
font-family: Courier New,monaco,terminal,courier,system;
font-size: 14px;
}
.sequence-line {
white-space: nowrap;
}
.seq-fixed {
position: fixed;
width: (@width_left_container - @width_scrollbar);
padding-left: 5px;
left:0px;
cursor:pointer;
z-index:1;
}
.seq-mobil {
margin-left: @width_left_container;
letter-spacing: 0.12em;
}
/*tag*/
#tagSelector{
padding: 5px;
position: absolute;
left: @width_left_container;
top: 195px;
width:220px;
border:solid;
display:none;
}
.tagElem{
margin:1px;
height: 20px;
}
.tagElem:hover{
border-color : white;
cursor : pointer;
color : @select;
}
.tagColorBox {
margin-right:3px;
height: 16px;
width: 16px;
display: inline-block;
cursor:pointer;
user-select :none;
margin-bottom: -4px;
margin-top: 2px;
}
/*menu*/
.menu{
padding:3px;
float:left;
margin:5px;
cursor:pointer;
background:inherit;
}
#file_menu, #analysis_menu{
z-index:2;
border:solid;
position: fixed;
top: 200px;
min-width:400px;
margin-left:-250px;
left :50%;
font-size: 14px;
padding: 10px;
background:inherit;
display:none;
}
.buttonSelector {
background : @background;
cursor:pointer;
font-size: 14px;
margin :2px;
display:block;
text-align:left;
}
.button:hover, .buttonSelector:hover{
background : @highlight;
color : @select;
}
/* ////////////////////////////////////////////////////////////// */
#popup-container{
z-index:3;
border:solid;
position: fixed;
top: 250px;
left:50% ;
width:500px;
font-size: 14px;
padding: 10px;
background: @background;
display:none;
left: -moz-calc(~"50% - 250px");
left: -webkit-calc(~"50% - 250px");
left: calc(~"50% - 250px");
}
#popup-container a {
text-decoration: none;
font-weight: bold;
color: @secondary ;
}
#popup-container a:hover{
color : @select;
}
#data-container{
z-index:3;
border:solid;
position: fixed;
top: 50px;
left: 20px + @width_left_container;
font-size: 14px;
padding: 10px;
background:inherit;
display:none;
max-width: -moz-calc(~"100%" - @width_left_container + 60px);
max-width: -webkit-calc(~"100%" - @width_left_container + 60px);
max-width: calc(~"100%" - @width_left_container + 60px);
height: -moz-calc(~"100%" - 200px);
height: -webkit-calc(~"100%" - 200px);
height: calc(~"100%" - 200px);
}
#data-msg{
overflow: auto;
height : 100%;
width : 100%;
}
#file_menu, #menu, #listClones, #listSelect, #tagSelector, #display-menu, #bot-container, .seq-fixed{
background : @background;
}
.closeButton{
position: absolute;
top: -12px;
right: -12px;
border: solid;
background: inherit;
border-radius: 20px;
width: 15px;
height: 15px;
text-align: center;
font-weight: bolder;
cursor: pointer;
padding: 1px;
font-size: 90%;
color: @border;
}
.closeButton:hover{
color: @select;
}
.button {
cursor:pointer;
font-size: 14px;
padding: 2px 3px;
margin :3px;
margin-right:5px;
margin-left:5px;
/* text-decoration:underline; */
}
.smallbutton {
cursor:pointer;
font-size: 14px;
text-decoration:underline;
}
#logo
{
font-size: 130%;
font-weight: bold;
opacity: 1;
padding: 5px 20px ;
cursor: pointer;
}
span.logo
{
font-size: 60% ;
font-weight: bold;
vertical-align: super;
opacity: .8;
color: #f88;
}
#info_data_file
{
font-size: 200%;
}
.separator {
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
height: 25px;
position: fixed;
margin-top: -26px;
border-top: solid;
width: @width_left_container;
padding-top:2px;
}
.selector{
display: none;
position: fixed;
margin-right: -5px;
padding: 3px;
border: solid;
background: inherit;
text-center: left;
min-width: 150px;
margin-left: -6px;
border-top: none;
margin-top: 4px;
z-index:5;
}
#bot-container {
position: fixed;
bottom: 5px;
left: 0px;
width: 100%;