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

.gitignore

+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

algo/cgi/makefile

 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

browser/Makefile

+
+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  

browser/css/Makefile

+
+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"
+

browser/css/dark.less

+
+/* default color solarizeD */
+@default : #839496; 
+@background : #002b36; 
+@highlight : #073642; 
+@select : #fdf6e3; 
+@secondary : #586e75; 
+@border : #284e55;    
+
+@import "vidjil.less";
+

browser/css/light.less

+
+/* default color solarizeL */
+@default : #657b83;
+@background : #eee8d5; 
+@highlight : #fdf6e3; 
+@select : #002b36; 
+@secondary : #93a1a1; 
+@border : #b3c1c1;    
+
+@import "vidjil.less";
+
+
+

browser/css/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;
+}