Commit fc18f0aa authored by Mathieu Giraud's avatar Mathieu Giraud

Merge branch 'feature-c/aligner' into 'dev'

New sequence aligner

See merge request !836
parents 315c4bfb efe44b67
Pipeline #232561 failed with stages
in 9 minutes and 57 seconds
...@@ -3,10 +3,10 @@ LESSC=lessc ...@@ -3,10 +3,10 @@ LESSC=lessc
all: dark.css light.css svg.css talk.css segmenter_page.css all: dark.css light.css svg.css talk.css segmenter_page.css
dark.css: dark.less vidjil.less dark.css: dark.less vidjil.less aligner.less
$(LESSC) dark.less dark.css $(LESSC) dark.less dark.css
light.css: light.less vidjil.less light.css: light.less vidjil.less aligner.less
$(LESSC) light.less light.css $(LESSC) light.less light.css
talk.css: talk.less light.less vidjil.less talk.css: talk.less light.less vidjil.less
......
@sequenceLineHeight : 30px;
.segmenter .axisBox>span {
margin : 0 3px;
background: @background;
}
.bot-bar {
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
border-color: @border;
border: solid;
border-width: 1px;
}
.stats {
position: relative;
text-align: right;
float: right;
width: @width_stats - 3px;
padding: 2px 5px;
overflow: hidden;
height: 16px;
}
.list_select{
display : block;
border : solid;
border-width : 2px;
padding : 0px;
border-color : @select;
}
.list_focus{
background : @border !important;
}
.sequence-line {
white-space: nowrap;
height: @sequenceLineHeight;
}
/*
.sequence-line:hover {
font-weight: bold;
}
*/
.seq-fixed {
position: relative;
display: flex;
width: (@width_left_container - @width_scrollbar);
height: @sequenceLineHeight;
margin: -2px;
padding: 5px;
left:0px;
cursor:pointer;
z-index:5;
}
.seq-mobil {
font-family : @monospace-font;
top: 0px;
left: 455px;
position: absolute;
font-size:1em;
display: inline-block;
height: @sequenceLineHeight;
}
.seq-marge {
word-spacing: normal;
}
.V {
color: #000;
background-color: #efe;
}
.D {
color: #000;
background-color: #fee;
}
.J {
color: #000;
background-color: #ffffe2;
}
.N, .N + .J, .N + .D {
box-shadow: -1px 0 0 @default;
}
.highlight_border, .highlight_seq {
display: inline-flex;
height: 1em;
position: relative;
}
.highlight_border {
border-bottom: solid;
margin: -1px;
border-width: 4px;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
opacity: 0.3;
bottom: 1px;
}
.highlight_seq {
top: .9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: .428em; /* (1-.7) / .7 */
left: .214em;
}
.highlight{
display: inline-block;
width: 0px;
word-spacing: normal;
}
span .substitution, span .indel, span .insertion, span .deletion {
font-weight: bold;
color: #800;
}
span .substitution {
border-bottom: 1px solid #800;
}
span .silent {
border-bottom: 3px double #008;
color: #008;
}
span .end-codon {
box-shadow: 1px 0 0 @default;
}
#segmenter_axis_menu, .seq-fixed{
background : @background;
}
.menu-segmenter {
position: relative;
float: left;
width: @width_left_container +200;
}
#toIMGTSeg {
width: 12px;
display: inline-block;
text-align: center;
}
.menu-highlight {
position: relative;
float: left;
width: eval(@width_highlight);
}
.segmenter {
overflow-x: scroll !important;
overflow-y: auto;
min-height : 130px;
margin-top: 1px;
}
#segmenter {
display: flex;
flex-flow: column;
}
#highlightCheckboxes {
height: 100%;
float: left;
}
.seq-fixed {
bottom: 1px;
}
.aligner-menu{
display:inline-block;
padding: 2px 10px;
}
.aligner-menu:hover{
cursor: pointer;
background-color: #ddd
}
.aligner-button{
cursor: pointer;
font-size: 13px;
min-width: 16px;
color: #657b83;
}
.aligner-menu:hover .menu-content{
display: block;
}
.menu-content{
display: none;
position: absolute;
bottom: 154px;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a{
padding: 8px 12px;
text-decoration: none;
display: block;
}
.menu-content label{
padding: 8px 12px;
text-decoration: none;
display: block;
cursor: pointer;
}
.menu-content a:hover{
background-color: #ddd
}
.menu-content label:hover{
background-color: #ddd
}
.seq_layer{
position:absolute;
top: 0px;
}
.seq_layer_text{
position: absolute;
top: 5px;
z-index: 3;
}
.seq_layer_text2{
position: absolute;
top: 20px;
-webkit-transform:scale(1,0.5); /* Safari and Chrome */
-moz-transform:scale(1,0.5); /* Firefox */
-ms-transform:scale(1,0.5); /* IE 9 */
-o-transform:scale(1,0.5); /* Opera */
transform:scale(1,0.5); /* W3C */
}
.seq_layer_highlight{
border-left: solid black 1px;
border-right: solid black 1px;
opacity: 0.1;
height:15px;
top:5px;
margin-left: -2px;
padding-right: 4px;
}
.seq_layer_bracket{
height: 2px;
top: 21px;
border: solid;
border-top: none;
border-width: 2px;
margin: -2px;
opacity : 0.6;
z-index: 1;
margin-left: -3px;
padding-right: 2px;
}
.seq_layer_bracket_top{
height: 2px;
top: 4px;
border: solid;
border-bottom: none;
border-width: 2px;
margin: -2px;
opacity : 0.6;
z-index: 1;
margin-left: -3px;
padding-right: 2px;
}
.seq_layer_underline{
border-left: solid black 1px;
border-right: solid black 1px;
height: 3px;
top: 18px;
opacity : 0.3;
z-index: 2;
margin-left: -2px;
padding-right: 4px;
}
.seq_layer_quality{
height: 5px;
top: 24px;
z-index: 2;
}
.seq_quality_block{
opacity: 1;
height: 5px;
float: left;
}
.seq_quality_block:hover{
opacity: 0.5;
}
.seq_layer_bracket:hover, .seq_layer_bracket_top:hover{
border-width :4px;
opacity : 1;
}
.seq_layer_underline:hover{
height: 5px;
opacity : 1;
}
\ No newline at end of file
...@@ -38,7 +38,7 @@ svg { ...@@ -38,7 +38,7 @@ svg {
.cloneName { .cloneName {
font-family: ubuntumedium, Arial Bold, Helvetica, Sans-serif; font-family: ubuntumedium, Arial Bold, Helvetica, Sans-serif;
} }
.seq-fixed .cloneName, .cloneName,
.listElem .cloneName { .listElem .cloneName {
bottom: 1px; bottom: 1px;
} }
...@@ -118,7 +118,7 @@ ul { ...@@ -118,7 +118,7 @@ ul {
position: fixed; position: fixed;
top: 32px; top: 32px;
left: 0; left: 0;
bottom: 125px ; bottom: 155px;
background: #000000; background: #000000;
margin: 6px; margin: 6px;
display: flex; display: flex;
...@@ -126,15 +126,22 @@ ul { ...@@ -126,15 +126,22 @@ ul {
overflow: hidden; overflow: hidden;
} }
.vidjil-panels-left { .vidjil-panels-left {
width: calc(100% - 6px - 70px); width: calc(100% - -64px);
} }
.vidjil-panels-full { .vidjil-panels-full {
width: calc(100% - 6px); width: calc(100% - 6px);
} }
#mid-container { #mid-container {
position: fixed;
display: flex; display: flex;
flex: auto; flex: 1 1 auto;
top: 32px;
bottom: 155px;
width: calc(100% - 12px);
overflow: hidden; overflow: hidden;
background: #000000;
margin: 6px 0px 0px 0px;
border-bottom-color: white;
} }
#right-container { #right-container {
display: flex; display: flex;
...@@ -243,12 +250,12 @@ line { ...@@ -243,12 +250,12 @@ line {
} }
.axis_m { .axis_m {
stroke: #839496; stroke: #839496;
opacity: 0.5; opacity: 0.5 ;
stroke-width: 20px; stroke-width: 20px;
} }
.axis_m_other { .axis_m_other {
stroke: #839496; stroke: #839496;
opacity: 0.25; opacity: 0.25 ;
stroke-width: 10px; stroke-width: 10px;
display: none; display: none;
} }
...@@ -336,7 +343,7 @@ line { ...@@ -336,7 +343,7 @@ line {
.circle { .circle {
cursor: pointer; cursor: pointer;
-webkit-transition: fill 0.2s; -webkit-transition: fill 0.2s;
-o-transition: fill 0.2s; -o-transition: fill 0.2s;
-ms-transition: fill 0.2s; -ms-transition: fill 0.2s;
transition: fill 0.2s; transition: fill 0.2s;
fill: #839496; fill: #839496;
...@@ -474,7 +481,7 @@ line { ...@@ -474,7 +481,7 @@ line {
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
-webkit-transition: color 0.2s; -webkit-transition: color 0.2s;
-o-transition: color 0.2s; -o-transition: color 0.2s;
-ms-transition: color 0.2s; -ms-transition: color 0.2s;
transition: color 0.2s; transition: color 0.2s;
padding: 1px 4px 4px 1px; padding: 1px 4px 4px 1px;
...@@ -491,11 +498,7 @@ line { ...@@ -491,11 +498,7 @@ line {
height: 16px; height: 16px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
display: flex; flex: 1 1000 auto;
flex: 1 1 auto;
}
.seq-fixed .nameBox {
width: 250px;
} }
.list .axisBox, .list .axisBox,
.axisBox span { .axisBox span {
...@@ -505,9 +508,6 @@ line { ...@@ -505,9 +508,6 @@ line {
max-height: 16px; max-height: 16px;
position: relative; position: relative;
} }
.segmenter .axisBox > span {
margin: 0 3px;
}
.identityBox { .identityBox {
font-family: ubuntulight, Arial, Helvetica, Sans-serif; font-family: ubuntulight, Arial, Helvetica, Sans-serif;
text-align: right; text-align: right;
...@@ -576,6 +576,10 @@ line { ...@@ -576,6 +576,10 @@ line {
min-width: 60px; min-width: 60px;
padding: 2px 2px 1px 2px; padding: 2px 2px 1px 2px;
cursor: pointer; cursor: pointer;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
} }
.hiddenCheckBox { .hiddenCheckBox {
display: none; display: none;
...@@ -604,111 +608,6 @@ line { ...@@ -604,111 +608,6 @@ line {
margin-right: 20px; margin-right: 20px;
float: right; float: right;
} }
/*style segmenter element*/
.list_select {
border: solid;
border-width: 2px;
padding: 0px;
border-color: #fdf6e3;
}
.list_focus {
background: #333333 !important;
}
.sequence-line {
white-space: nowrap;
}
.sequence-line:hover {
font-weight: bold;
}
.seq-fixed {
position: relative;
display: inline-flex;
width: auto;
margin: -2px;
padding: 2px;
padding-left: 5px;
left: 0px;
cursor: pointer;
z-index: 1;
}
.seq-mobil {
margin-left: 475px;
letter-spacing: 0.12em;
font-family: monospace, ubuntu_monobold, Courier New, monaco, terminal, courier, system;
position: relative;
bottom: 3px;
font-size: 1em;
}
.seq-marge {
word-spacing: normal;
}
.V {
color: #000;
background-color: #efe;
}
.D {
color: #000;
background-color: #fee;
}
.J {
color: #000;
background-color: #ffffe2;
}
.N,
.N + .J,
.N + .D {
box-shadow: -1px 0 0 #839496;
}
.highlight_border,
.highlight_seq {
display: inline-flex;
height: 1em;
position: relative;
}
.highlight_border {
border-bottom: solid;
margin: -1px;
border-width: 4px;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
opacity: 0.3;
bottom: 1px;
}
.highlight_seq {
top: 0.9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: 0.428em;
/* (1-.7) / .7 */
left: 0.214em;
}
.highlight {
display: inline-block;
width: 0px;
word-spacing: normal;
}
span .substitution,
span .indel,
span .insertion,
span .deletion {
font-weight: bold;
color: #800;
}
span .substitution {
border-bottom: 1px solid #800;
}
span .silent {
border-bottom: 3px double #008;
color: #008;
}
span .end-codon {
box-shadow: 1px 0 0 #839496;
}
/*tag*/ /*tag*/
.tagSelector { .tagSelector {
padding: 5px; padding: 5px;
...@@ -914,7 +813,7 @@ a.tag-link { ...@@ -914,7 +813,7 @@ a.tag-link {
.modal.info-container { .modal.info-container {
top: 50px; top: 50px;
left: 495px; left: 495px;
max-width: calc(100% - (475px + 60px)); max-width: calc(100% - 535px);
height: calc(100% - 215px); height: calc(100% - 215px);
} }
.modal.jstree-container { .modal.jstree-container {
...@@ -935,9 +834,7 @@ a.tag-link {