diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index f57b998c737c35cb96776b5c206fffca1c071ee1..ddee368935ff0efd92afde1dfdd1063507a5163e 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -51,12 +51,13 @@ test_germlines: - /^feature-.*g.*\/.*$/ - schedules -# Doc +# Includes include: - - local: '/doc/.gitlab-ci.yml' + - local: '/doc/.gitlab-ci.yml' # Doc - local: 'algo/.gitlab-ci-compilers.yml' # Stage multiple_tests - local: 'algo/.gitlab-ci.yml' # Vidjil-algo pipelines + - template: Code-Quality.gitlab-ci.yml # Code quality # Algorithm @@ -188,6 +189,7 @@ test_browser_unit: artifacts: paths: - browser/ + when: always only: - /^feature-.*c.*\/.*$/ - /^hotfix-.*c.*\/.*$/ @@ -207,7 +209,8 @@ test_browser_unit: - HEADLESS=1 make -C browser/test functional artifacts: paths: - - browser/ + - browser/ + when: always reports: junit: browser/test/test/TEST-*.xml only: @@ -234,6 +237,7 @@ test_browser_unit: artifacts: paths: - browser/ + when: always reports: junit: browser/test/test/TEST-*.xml only: @@ -285,7 +289,14 @@ old-chrome-browser-functional-external-chrome: tags: - legacy +# Code quality + code_quality: + stage: test_quality + artifacts: + paths: [gl-code-quality-report.json] + +code_quality_custom: stage: test_quality script: make -C browser quality only: @@ -412,6 +423,7 @@ deploy_review_server: - make -C browser icons - cp ./docker/vidjil-client/conf/conf.js ./browser/js/conf.js - sed -i -r "s/localhost/${CI_BUILD_REF_SLUG}.server.ci.vidjil.org/g" ./browser/js/conf.js + - 'sed -i "s/\"server_id\" : \"\"/\"server_id\" : \"${CI_BUILD_REF_SLUG}.server.ci.vidjil.org\"/" ./browser/js/conf.js' - sed -r 's/^.*FILE_SOURCE.*$/FILE_SOURCE="\/usr\/share\/vidjil\/demo"/' ./docker/vidjil-server/conf/defs.py > ./server/web2py/applications/vidjil/modules/defs.py - sed -i -e "/EMAIL_SUBJECT_START/c EMAIL_SUBJECT_START='[Vidjil/CI][$CI_COMMIT_REF_NAME]'" -e '/FROM_EMAIL/c FROM_EMAIL="server.ci@vidjil.org"' ./server/web2py/applications/vidjil/modules/defs.py - mv docker docker_${CI_BUILD_REF_SLUG} @@ -423,7 +435,7 @@ deploy_review_server: - sed -i -r "s/WEB2PY_ADMIN_PASSWORD=/WEB2PY_ADMIN_PASSWORD=$REVIEW_SERVER_ADMIN_PASSWORD/" docker-compose.yml - cd .. - rsync -av --exclude .git . $REVIEW_SERVER:$REVIEW_SERVER_PATH_SERVER$CI_BUILD_REF_SLUG || $(case "$?" in 0|23) exit 0 ;; *) exit $?; esac) - - ssh $REVIEW_SERVER "cd $REVIEW_SERVER_PATH_SERVER; ./install_certs.sh ${CI_BUILD_REF_SLUG}; cd ${CI_BUILD_REF_SLUG}/docker_${CI_BUILD_REF_SLUG}; mkdir -p postfix/ssl; docker-compose up -d mysql fuse uwsgi nginx workers" + - ssh $REVIEW_SERVER "cd $REVIEW_SERVER_PATH_SERVER; ./install_certs.sh ${CI_BUILD_REF_SLUG}; cd ${CI_BUILD_REF_SLUG}/docker_${CI_BUILD_REF_SLUG}; mkdir -p postfix/ssl; docker-compose up -d mysql fuse uwsgi nginx workers; sleep 20s; docker-compose exec -T uwsgi bash -c 'cd /usr/share/vidjil/server/web2py/applications/vidjil/scripts; /usr/local/bin/gosu 1005 bash launch_python_script.sh load-sql.py -n /usr/share/vidjil/docker/ci/ci.sql'" environment: name: review_server/$CI_BUILD_REF_NAME url: http://$CI_BUILD_REF_SLUG.server.ci.vidjil.org/browser/ diff --git a/.gitlab/merge_request_templates/Release (vidjil-algo).md b/.gitlab/merge_request_templates/Release (vidjil-algo).md index a608ed12f3525a4910419b7bb9eefeb8a06a5eca..987ea1d6f55160c9ef6c0055d1684f1233338dff 100644 --- a/.gitlab/merge_request_templates/Release (vidjil-algo).md +++ b/.gitlab/merge_request_templates/Release (vidjil-algo).md @@ -32,14 +32,17 @@ Benchmarks * [ ] push: `git push origin master release-20XX-XX` * [ ] mirror to GH: `git push github master release-20XX.XX` * [ ] click `publish_release` (there may be changes to CD...) +* [ ] deploy the doc + After these steps, we merge back the release in `dev`: * [ ] merge this MR to dev ## After the release: deploy -Sometimes, the deploy stages can occur several days after the release. -Open a new internal issue with the "Deploy" template. +* [ ] Click `deploy_release_prod` in the `deploy_prod` stage, deploying the release on `vidjil-algo-next` on the public server +* [ ] Open a new internal issue with the `Deploy (vidjil-algo)` template : vdj#XXXXX + /label ~cpp diff --git a/algo/vidjil.cpp b/algo/vidjil.cpp index da3cbd0ad554c6d09cf08eb1d96e6fe05e0ec998..adcc80aabc74ef3924d2b2e27865fc47ae5f8d5e 100644 --- a/algo/vidjil.cpp +++ b/algo/vidjil.cpp @@ -291,16 +291,16 @@ int main (int argc, char **argv) // ---------------------------------------------------------------------------------------------------------------------- - group = "Germline presets (at least one -g or -V/(-D)/-J option must be given)"; + group = "Germline/recombination selection (at least one -g or -V/(-D)/-J option must be given)"; vector multi_germlines ; app.add_option("--germline,-g", multi_germlines, R"Z( - -g <.g FILE>(:FILTER) - multiple locus/germlines, with tuned parameters. + -g <.g FILE>(:FOCUS) ... + germline preset(s) (.g file(s)), detecting multiple recombinations, with tuned parameters. Common values are '-g germline/homo-sapiens.g' or '-g germline/mus-musculus.g' - The list of locus/recombinations can be restricted, such as in '-g germline/homo-sapiens.g:IGH,IGK,IGL' + One can focus on some recombinations, such as in '-g germline/homo-sapiens.g:IGH,IGK,IGL' -g PATH - multiple locus/germlines, shortcut for '-g PATH/)Z" DEFAULT_MULTI_GERMLINE_FILE R"Z(', + human germline preset, shortcut for '-g PATH/)Z" DEFAULT_MULTI_GERMLINE_FILE R"Z(', processes human TRA, TRB, TRG, TRD, IGH, IGK and IGL locus, possibly with incomplete/unusal recombinations)Z") -> group(group) -> type_name("GERMLINES"); @@ -314,7 +314,7 @@ int main (int argc, char **argv) app.add_option("-D", v_reps_D, - "custom D germline multi-fasta file(s), analyze into V(D)J components") + "custom D germline multi-fasta file(s) for V(D)J designation") -> group(group) -> type_name("FILE"); app.add_option("-J", v_reps_J, diff --git a/browser/css/dark.css b/browser/css/dark.css index bfc0b897a199abbbe07a18a4bd562c61cd85e88a..25a9e90faeb8f7d0f9e036f7db0bf43f837e86b7 100644 --- a/browser/css/dark.css +++ b/browser/css/dark.css @@ -4,9 +4,15 @@ /* default tag color */ /* #dcffed also available */ #vmi-menu { - position: unset; - bottom: unset; + top: 32px; + right: 0; width: unset; + background-color: #000000; + margin: 6px 0 0 0; +} +#vmi-menu div { + padding: 5px; + border: 1px solid; } html { height: 100%; @@ -52,14 +58,15 @@ ul { } #visu-container { position: relative; + display: flex; flex: 1 1 auto; + flex-flow: column; -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; - height: 100%; - margin: auto; + width: 100%; overflow: hidden; background: #000000; } @@ -107,28 +114,38 @@ ul { user-select: none; overflow: hidden; } -#mid-container { +#vidjil-panels { position: fixed; - display: flex; - flex: 1 1 auto; top: 32px; + left: 0; bottom: 125px ; - width: calc(100% - 6px + 6px); - overflow: hidden; background: #000000; margin: 6px; + display: flex; + flex: auto; + overflow: hidden; +} +.vidjil-panels-left { + width: calc(100% - 6px - 70px); +} +.vidjil-panels-full { + width: calc(100% - 6px); +} +#mid-container { + display: flex; + flex: auto; + overflow: hidden; } #right-container { - -khtml-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; - -ms-user-select: none; - user-select: none; + display: flex; + flex: 1 0 auto; + flex-flow: column; float: right; - width: 0px; + width: 475px; } #left-container { display: flex; + flex: 1 0 auto; flex-flow: column; position: relative; width: 475px; @@ -142,11 +159,16 @@ ul { #visu, #visu2 { height: 50%; + display: flex; + flex: auto; width: 100%; } #visu2 { max-height: calc(100% - 6px); } +#visu3 { + height: 100%; +} line { stroke: #586e75; stroke-width: 0.5; @@ -414,6 +436,7 @@ line { #list { flex: 1 1 auto; height: 0px; + min-height: 20%; max-height: 100%; display: flex; flex-direction: column; @@ -445,12 +468,9 @@ line { padding-right: 30px; } .list { - width: 445px; - display: block; padding: 2px; } .listElem { - width: 445px; font-size: 13px; cursor: pointer; -webkit-transition: color 0.2s; @@ -459,19 +479,20 @@ line { transition: color 0.2s; padding: 1px 4px 4px 1px; height: 14px; + display: flex; } .selected { color: #fdf6e3; } .nameBox { - width: 300px; margin-right: 10px; overflow: hidden; display: inline-block; height: 16px; position: relative; - float: left; white-space: nowrap; + display: flex; + flex: 1 1 auto; } .seq-fixed .nameBox { width: 250px; @@ -479,7 +500,6 @@ line { .list .axisBox, .axisBox span { max-width: 52px; - float: right; overflow: hidden; display: inline-block; max-height: 16px; @@ -500,9 +520,8 @@ line { } .starBox { width: 16px; - float: right; height: 16px; - display: inline-block; + display: inline-flex; user-select: none; overflow: hidden; } @@ -517,9 +536,8 @@ line { .infoBox { font-size: 90%; width: 16px; - float: right; height: 15px; - display: inline-block; + display: inline-flex; user-select: none; text-align: center; border: solid; @@ -588,8 +606,6 @@ line { } /*style segmenter element*/ .list_select { - width: 445px; - display: block; border: solid; border-width: 2px; padding: 0px; @@ -606,7 +622,7 @@ line { } .seq-fixed { position: relative; - display: inline-block; + display: inline-flex; width: auto; margin: -2px; padding: 2px; @@ -974,6 +990,10 @@ div.button { padding-left: 10px; padding-right: 10px; } +.clipboard-button { + margin-left: -5px; + padding: 3px; +} .smallbutton { cursor: pointer; font-size: 13px; @@ -1063,9 +1083,8 @@ span.logo { } #bot-container { position: fixed; - left: 0; bottom: 0; - width: 100%; + left: 6px; border-top: solid; border-width: 6px; min-height: 125px; @@ -1339,11 +1358,9 @@ span.warningReads { .axis_select select[selected=selected] { color: #fdf6e3; } -#visu-separator { +.visu-separator { position: relative; height: 6px; - cursor: move; - cursor: -webkit-grab; background: #333333; } #bot-separator { @@ -1354,15 +1371,17 @@ span.warningReads { position: relative; top: -6px; } -#vertical-separator { +#vertical-separator, +#vertical-separator-right { position: relative; float: left; - height: 100%; width: 6px; - line-height: calc(100% - 1px); background: #333333; cursor: pointer; } +#vertical-separator-right { + float: right; +} #visu-separator:hover, #vertical-separator:hover, #bot-separator:hover { @@ -1906,11 +1925,12 @@ table.log textarea { border: 1px solid #333333; overflow-wrap: break-word; overflow-y: hidden; - max-width: 457px; min-height: 32px; max-height: 32px; - width: 100%; + width: 99%; background-color: #000000; + margin-left: auto; + margin-right: auto; } .patient_info_text { margin-bottom: 5px; @@ -2284,3 +2304,30 @@ form .form_label { .list_lock_on { color: #839496; } +.set_group { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + margin-bottom: 25px; + margin-right: 15px; + flex-flow: column; + width: 48%; +} +.set_group_header { + width: 100%; +} +.set_cell { + word-break: break-all; +} +.set_data { + width: 100%; +} +.analysis_button { + display: inline-flex; +} +.margined-top { + margin-top: 10px; +} +.margined-bottom { + margin-bottom: 10px; +} diff --git a/browser/css/icons/Makefile b/browser/css/icons/Makefile index e4bc08e9fa53e1aaeed93424f7443fde168adfce..f17099d3b4c00a0dffdf2e7f76be91d73d2db738 100644 --- a/browser/css/icons/Makefile +++ b/browser/css/icons/Makefile @@ -11,7 +11,7 @@ retrieve: ### Don't edit below ### -FONTELLO_HOST ?= http://fontello.com +FONTELLO_HOST ?= https://fontello.com fontopen: @if test ! `which curl` ; then \ diff --git a/browser/css/light.css b/browser/css/light.css index 3e50bd3339925f27381883fe1fa2480a4d3f50f1..c710956c3cc3ced0dfa76830c6dd4e0353daed33 100644 --- a/browser/css/light.css +++ b/browser/css/light.css @@ -4,9 +4,15 @@ /* default tag color */ /* #dcffed also available */ #vmi-menu { - position: unset; - bottom: unset; + top: 32px; + right: 0; width: unset; + background-color: #ffffff; + margin: 6px 0 0 0; +} +#vmi-menu div { + padding: 5px; + border: 1px solid; } html { height: 100%; @@ -52,14 +58,15 @@ ul { } #visu-container { position: relative; + display: flex; flex: 1 1 auto; + flex-flow: column; -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; - height: 100%; - margin: auto; + width: 100%; overflow: hidden; background: #ffffff; } @@ -107,28 +114,38 @@ ul { user-select: none; overflow: hidden; } -#mid-container { +#vidjil-panels { position: fixed; - display: flex; - flex: 1 1 auto; top: 32px; + left: 0; bottom: 125px ; - width: calc(100% - 6px + 6px); - overflow: hidden; background: #ffffff; margin: 6px; + display: flex; + flex: auto; + overflow: hidden; +} +.vidjil-panels-left { + width: calc(100% - 6px - 70px); +} +.vidjil-panels-full { + width: calc(100% - 6px); +} +#mid-container { + display: flex; + flex: auto; + overflow: hidden; } #right-container { - -khtml-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; - -ms-user-select: none; - user-select: none; + display: flex; + flex: 1 0 auto; + flex-flow: column; float: right; - width: 0px; + width: 475px; } #left-container { display: flex; + flex: 1 0 auto; flex-flow: column; position: relative; width: 475px; @@ -142,11 +159,16 @@ ul { #visu, #visu2 { height: 50%; + display: flex; + flex: auto; width: 100%; } #visu2 { max-height: calc(100% - 6px); } +#visu3 { + height: 100%; +} line { stroke: #93a1a1; stroke-width: 0.5; @@ -248,10 +270,9 @@ line { fill: #ffffff; opacity: 1; pointer-events: none; - } #resolution5 { - fill: #cccccc; + fill: #ffffff; opacity: 0.6; pointer-events: none; } @@ -415,6 +436,7 @@ line { #list { flex: 1 1 auto; height: 0px; + min-height: 20%; max-height: 100%; display: flex; flex-direction: column; @@ -446,12 +468,9 @@ line { padding-right: 30px; } .list { - width: 445px; - display: block; padding: 2px; } .listElem { - width: 445px; font-size: 13px; cursor: pointer; -webkit-transition: color 0.2s; @@ -460,19 +479,20 @@ line { transition: color 0.2s; padding: 1px 4px 4px 1px; height: 14px; + display: flex; } .selected { color: #002b36; } .nameBox { - width: 300px; margin-right: 10px; overflow: hidden; display: inline-block; height: 16px; position: relative; - float: left; white-space: nowrap; + display: flex; + flex: 1 1 auto; } .seq-fixed .nameBox { width: 250px; @@ -480,7 +500,6 @@ line { .list .axisBox, .axisBox span { max-width: 52px; - float: right; overflow: hidden; display: inline-block; max-height: 16px; @@ -501,9 +520,8 @@ line { } .starBox { width: 16px; - float: right; height: 16px; - display: inline-block; + display: inline-flex; user-select: none; overflow: hidden; } @@ -518,9 +536,8 @@ line { .infoBox { font-size: 90%; width: 16px; - float: right; height: 15px; - display: inline-block; + display: inline-flex; user-select: none; text-align: center; border: solid; @@ -589,8 +606,6 @@ line { } /*style segmenter element*/ .list_select { - width: 445px; - display: block; border: solid; border-width: 2px; padding: 0px; @@ -607,7 +622,7 @@ line { } .seq-fixed { position: relative; - display: inline-block; + display: inline-flex; width: auto; margin: -2px; padding: 2px; @@ -820,7 +835,7 @@ span .end-codon { transition-delay: 0s, 0s; } #add_clone_menu > #addclone_input.error { - border: 1px solid #8b0000; + border: 1px solid darkred; } #menu_right_part { float: right; @@ -893,7 +908,7 @@ a.tag-link { .modal.info-container { top: 50px; left: 495px; - max-width: calc(100% - 535px); + max-width: calc(100% - (475px + 60px)); height: calc(100% - 215px); } .modal.jstree-container { @@ -975,6 +990,10 @@ div.button { padding-left: 10px; padding-right: 10px; } +.clipboard-button { + margin-left: -5px; + padding: 3px; +} .smallbutton { cursor: pointer; font-size: 13px; @@ -1064,9 +1083,8 @@ span.logo { } #bot-container { position: fixed; - left: 0; bottom: 0; - width: 100%; + left: 6px; border-top: solid; border-width: 6px; min-height: 125px; @@ -1340,11 +1358,9 @@ span.warningReads { .axis_select select[selected=selected] { color: #002b36; } -#visu-separator { +.visu-separator { position: relative; height: 6px; - cursor: move; - cursor: -webkit-grab; background: #cccccc; } #bot-separator { @@ -1355,15 +1371,17 @@ span.warningReads { position: relative; top: -6px; } -#vertical-separator { +#vertical-separator, +#vertical-separator-right { position: relative; float: left; - height: 100%; width: 6px; - line-height: calc(100% - 1px); background: #cccccc; cursor: pointer; } +#vertical-separator-right { + float: right; +} #visu-separator:hover, #vertical-separator:hover, #bot-separator:hover { @@ -1656,18 +1674,18 @@ h3 .uid { .flash_1, .log_1 { font-weight: bold; - background-color: #dff0d8; + background-color: #DFF0D8; } .flash_2, .log_2 { font-weight: bold; - background-color: #f2deae; + background-color: #F2DEAE; } .flash_3, .log_3 { font-weight: bold; border-color: darkred; - background-color: #f2dede; + background-color: #F2DEDE; } .tip_1 { width: 400px; @@ -1677,7 +1695,7 @@ h3 .uid { border-radius: 5px; padding: 5px; margin: 5px; - background: #dff0d8; + background: #DFF0D8; border-color: #cccccc; } #tip_img { @@ -1803,7 +1821,7 @@ table.log textarea { flex-grow: 1; } .tagColor0 { - background: #dc322f; + background: #DC322F; } .tagColor1 { background: #cb4b16; @@ -1844,15 +1862,15 @@ table.log textarea { text-align: center; } .urgent_message { - border: 2px solid #8b0000; + border: 2px solid darkred; margin: 3px; font-weight: bold; - background-color: #f2dede; + background-color: #F2DEDE; } .info_message { border: 1px solid #cccccc; margin: 4px; - background-color: #dff0d8; + background-color: #DFF0D8; } .notification { padding: 3px; @@ -1907,11 +1925,12 @@ table.log textarea { border: 1px solid #cccccc; overflow-wrap: break-word; overflow-y: hidden; - max-width: 457px; min-height: 32px; max-height: 32px; - width: 100%; + width: 99%; background-color: #ffffff; + margin-left: auto; + margin-right: auto; } .patient_info_text { margin-bottom: 5px; @@ -2285,3 +2304,30 @@ form .form_label { .list_lock_on { color: #657b83; } +.set_group { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + margin-bottom: 25px; + margin-right: 15px; + flex-flow: column; + width: 48%; +} +.set_group_header { + width: 100%; +} +.set_cell { + word-break: break-all; +} +.set_data { + width: 100%; +} +.analysis_button { + display: inline-flex; +} +.margined-top { + margin-top: 10px; +} +.margined-bottom { + margin-bottom: 10px; +} diff --git a/browser/css/segmenter_page.css b/browser/css/segmenter_page.css index f063b879a074125b5dafa520295e08cbc71c7356..24f321ce5684d77b6ef48e4f2c038a810a46a896 100644 --- a/browser/css/segmenter_page.css +++ b/browser/css/segmenter_page.css @@ -4,9 +4,15 @@ /* default tag color */ /* #dcffed also available */ #vmi-menu { - position: unset; - bottom: unset; + top: 32px; + right: 0; width: unset; + background-color: #ffffff; + margin: 6px 0 0 0; +} +#vmi-menu div { + padding: 5px; + border: 1px solid; } html { height: 100%; @@ -52,14 +58,15 @@ ul { } #visu-container { position: relative; + display: flex; flex: 1 1 auto; + flex-flow: column; -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; - height: 100%; - margin: auto; + width: 100%; overflow: hidden; background: #ffffff; } @@ -106,30 +113,39 @@ ul { -ms-user-select: none; user-select: none; overflow: hidden; - height : 100%; } -#mid-container { +#vidjil-panels { position: fixed; - display: flex; - flex: 1 1 auto; top: 32px; + left: 0; bottom: 125px ; - width: calc(100% - 6px + 6px); - overflow: hidden; background: #ffffff; margin: 6px; + display: flex; + flex: auto; + overflow: hidden; +} +.vidjil-panels-left { + width: calc(100% - -64px); +} +.vidjil-panels-full { + width: calc(100% - 6px); +} +#mid-container { + display: flex; + flex: auto; + overflow: hidden; } #right-container { - -khtml-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; - -ms-user-select: none; - user-select: none; + display: flex; + flex: 1 0 auto; + flex-flow: column; float: right; - width: 0px; + width: 475px; } #left-container { display: flex; + flex: 1 0 auto; flex-flow: column; position: relative; width: 475px; @@ -143,11 +159,16 @@ ul { #visu, #visu2 { height: 50%; + display: flex; + flex: auto; width: 100%; } #visu2 { max-height: calc(100% - 6px); } +#visu3 { + height: 100%; +} line { stroke: #93a1a1; stroke-width: 0.5; @@ -191,7 +212,7 @@ line { fill: #ffffff; } .graph_line { - stroke-width: 2.5px; + stroke-width: 1.5px; cursor: pointer; stroke: #657b83; } @@ -205,7 +226,7 @@ line { opacity: 0.8; } .graph_inactive { - stroke-width: 1.5px; + stroke-width: 0.5px; cursor: pointer; display: none; } @@ -222,12 +243,12 @@ line { } .axis_m { stroke: #657b83; - opacity: 0.5; + opacity: 0.5 ; stroke-width: 20px; } .axis_m_other { stroke: #657b83; - opacity: 0.25; + opacity: 0.25 ; stroke-width: 10px; display: none; } @@ -248,10 +269,12 @@ line { #resolution1 { fill: #ffffff; opacity: 1; + pointer-events: none; } #resolution5 { - fill: #cccccc; + fill: #ffffff; opacity: 0.6; + pointer-events: none; } .graph_time { fill: #657b83; @@ -313,7 +336,7 @@ line { .circle { cursor: pointer; -webkit-transition: fill 0.2s; - -o-transition: fill 0.2s; + -o-transition: fill 0.2s; -ms-transition: fill 0.2s; transition: fill 0.2s; fill: #657b83; @@ -413,6 +436,7 @@ line { #list { flex: 1 1 auto; height: 0px; + min-height: 20%; max-height: 100%; display: flex; flex-direction: column; @@ -444,33 +468,31 @@ line { padding-right: 30px; } .list { - width: 445px; - display: block; padding: 2px; } .listElem { - width: 445px; font-size: 13px; cursor: pointer; -webkit-transition: color 0.2s; - -o-transition: color 0.2s; + -o-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; padding: 1px 4px 4px 1px; height: 14px; + display: flex; } .selected { color: #002b36; } .nameBox { - width: 300px; margin-right: 10px; overflow: hidden; display: inline-block; height: 16px; position: relative; - float: left; white-space: nowrap; + display: flex; + flex: 1 1 auto; } .seq-fixed .nameBox { width: 250px; @@ -478,7 +500,6 @@ line { .list .axisBox, .axisBox span { max-width: 52px; - float: right; overflow: hidden; display: inline-block; max-height: 16px; @@ -499,9 +520,8 @@ line { } .starBox { width: 16px; - float: right; height: 16px; - display: inline-block; + display: inline-flex; user-select: none; overflow: hidden; } @@ -516,9 +536,8 @@ line { .infoBox { font-size: 90%; width: 16px; - float: right; height: 15px; - display: inline-block; + display: inline-flex; user-select: none; text-align: center; border: solid; @@ -582,13 +601,11 @@ line { font-weight: bold; } .list_sort { - margin-right: 30px; + margin-right: 20px; float: right; } /*style segmenter element*/ .list_select { - width: 445px; - display: block; border: solid; border-width: 2px; padding: 0px; @@ -605,7 +622,7 @@ line { } .seq-fixed { position: relative; - display: inline-block; + display: inline-flex; width: auto; margin: -2px; padding: 2px; @@ -662,13 +679,13 @@ line { bottom: 1px; } .highlight_seq { - top: 0.9em; + top: .9em; padding-bottom: 1px; opacity: 0.6; font-size: 70%; - letter-spacing: 0.428em; + letter-spacing: .428em; /* (1-.7) / .7 */ - left: 0.214em; + left: .214em; } .highlight { display: inline-block; @@ -818,7 +835,7 @@ span .end-codon { transition-delay: 0s, 0s; } #add_clone_menu > #addclone_input.error { - border: 1px solid darkred; + border: 1px solid #8b0000; } #menu_right_part { float: right; @@ -891,7 +908,7 @@ a.tag-link { .modal.info-container { top: 50px; left: 495px; - max-width: calc(100% - (475px + 60px)); + max-width: calc(100% - 535px); height: calc(100% - 215px); } .modal.jstree-container { @@ -973,6 +990,10 @@ div.button { padding-left: 10px; padding-right: 10px; } +.clipboard-button { + margin-left: -5px; + padding: 3px; +} .smallbutton { cursor: pointer; font-size: 13px; @@ -989,7 +1010,7 @@ span.logo { font-size: 60% ; font-weight: bold; vertical-align: super; - opacity: 0.8; + opacity: .8; color: #f88; } .bot-bar { @@ -1026,7 +1047,7 @@ span.logo { position: relative; text-align: center; float: left; - width: calc(100% - (475px + 350px + 300px + 50)); + width: calc(100% - 1175px); overflow: hidden; height: 1.1em; } @@ -1053,7 +1074,7 @@ span.logo { min-width: 150px; margin-left: -6px; border-top: none; - margin-top: calc(32px - 24px); + margin-top: calc(8px); z-index: 5; overflow: hidden; } @@ -1062,9 +1083,8 @@ span.logo { } #bot-container { position: fixed; - left: 0; bottom: 0; - width: 100%; + left: 6px; border-top: solid; border-width: 6px; min-height: 125px; @@ -1154,9 +1174,11 @@ span.logo { text-align: center; vertical-align: middle; } -#info_timepoint td { +#info_timepoint, +#info_timepoint td, +.info_overlaps td { min-width: 150px; - max-width: 700px; + max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; border-style: solid; @@ -1165,16 +1187,22 @@ span.logo { vertical-align: middle; } #info_window table, -#info_timepoint table { +#info_timepoint table, +.info_overlaps { border-style: solid; border-color: #cccccc; border-collapse: collapse; } #info_window table .header, -#info_timepoint table .header { +#info_timepoint table .header, +.info_overlaps table .header { border-width: 2px; background-color: #cccccc; } +.info_overlaps_line { + background-color: #cccccc; + font-weight: bold; +} span.ok { color: green; } @@ -1206,7 +1234,7 @@ text.alert { fill: red; } span.warningReads { - margin-left: 0.5em; + margin-left: .5em; display: inline-block; width: 1em; text-align: center; @@ -1330,11 +1358,9 @@ span.warningReads { .axis_select select[selected=selected] { color: #002b36; } -#visu-separator { +.visu-separator { position: relative; height: 6px; - cursor: move; - cursor: -webkit-grab; background: #cccccc; } #bot-separator { @@ -1345,15 +1371,17 @@ span.warningReads { position: relative; top: -6px; } -#vertical-separator { +#vertical-separator, +#vertical-separator-right { position: relative; float: left; - height: 100%; width: 6px; - line-height: calc(100% - 1px); background: #cccccc; cursor: pointer; } +#vertical-separator-right { + float: right; +} #visu-separator:hover, #vertical-separator:hover, #bot-separator:hover { @@ -1507,7 +1535,7 @@ h3 .uid { #db_table_container { overflow-y: scroll; overflow-x: hidden; - height: calc(100% -30px); + height: calc(70%); position: relative; } #db_fixed_header { @@ -1646,18 +1674,18 @@ h3 .uid { .flash_1, .log_1 { font-weight: bold; - background-color: #DFF0D8; + background-color: #dff0d8; } .flash_2, .log_2 { font-weight: bold; - background-color: #F2DEAE; + background-color: #f2deae; } .flash_3, .log_3 { font-weight: bold; border-color: darkred; - background-color: #F2DEDE; + background-color: #f2dede; } .tip_1 { width: 400px; @@ -1667,7 +1695,7 @@ h3 .uid { border-radius: 5px; padding: 5px; margin: 5px; - background: #DFF0D8; + background: #dff0d8; border-color: #cccccc; } #tip_img { @@ -1793,7 +1821,7 @@ table.log textarea { flex-grow: 1; } .tagColor0 { - background: #DC322F; + background: #dc322f; } .tagColor1 { background: #cb4b16; @@ -1819,6 +1847,10 @@ table.log textarea { .tagColor8 { background: #657b83; } +.tagColor9 { + background: #bdbdbd; + margin-left: 7px; +} .inactiveTag { background-image: linear-gradient(45deg, transparent -25%, #ffffff 100%, #ffffff 100%, transparent 0%); } @@ -1830,15 +1862,15 @@ table.log textarea { text-align: center; } .urgent_message { - border: 2px solid darkred; + border: 2px solid #8b0000; margin: 3px; font-weight: bold; - background-color: #F2DEDE; + background-color: #f2dede; } .info_message { border: 1px solid #cccccc; margin: 4px; - background-color: #DFF0D8; + background-color: #dff0d8; } .notification { padding: 3px; @@ -1893,11 +1925,12 @@ table.log textarea { border: 1px solid #cccccc; overflow-wrap: break-word; overflow-y: hidden; - max-width: 457px; min-height: 32px; max-height: 32px; - width: 100%; + width: 99%; background-color: #ffffff; + margin-left: auto; + margin-right: auto; } .patient_info_text { margin-bottom: 5px; @@ -2271,6 +2304,33 @@ form .form_label { .list_lock_on { color: #657b83; } +.set_group { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + margin-bottom: 25px; + margin-right: 15px; + flex-flow: column; + width: 48%; +} +.set_group_header { + width: 100%; +} +.set_cell { + word-break: break-all; +} +.set_data { + width: 100%; +} +.analysis_button { + display: inline-flex; +} +.margined-top { + margin-top: 10px; +} +.margined-bottom { + margin-bottom: 10px; +} body { line-height: 20px; } @@ -2378,7 +2438,6 @@ textarea { -moz-flex: 2 32%; -ms-flex: 2 32%; flex: 2 32%; - height : 100%; } #segmenter_panel { bottom: 0; @@ -2427,3 +2486,22 @@ textarea { left: 50%; top: 50%; } +.scatterplot, +.graph { + height: 100%; +} +.graph_line { + stroke-width: 2.5px; +} +.graph_inactive { + stroke-width: 1.5px; +} +.list_sort { + margin-right: 30px; +} +#db_table_container { + height: calc(100% -30px); +} +#scatter_panel { + height: 100%; +} diff --git a/browser/css/segmenter_page.less b/browser/css/segmenter_page.less index f865d4acda1e70b77c23dd5f3798eda01dd52d2c..ec9c2fc54a9e8862d3cba3d2d276ea589c17a1b3 100644 --- a/browser/css/segmenter_page.less +++ b/browser/css/segmenter_page.less @@ -171,3 +171,25 @@ textarea { left: 50%; top: 50%; } + + +.scatterplot, +.graph { + height: 100%; +} + +.graph_line { + stroke-width: 2.5px; +} +.graph_inactive { + stroke-width: 1.5px; +} +.list_sort { + margin-right: 30px; +} +#db_table_container { + height: calc(100% -30px); +} +#scatter_panel { + height: 100%; +} \ No newline at end of file diff --git a/browser/css/svg.css b/browser/css/svg.css index 3cfb441b7ae633580f578af275c56c88cc2dc868..34baa637901fc59911024ffe7d5024f05d3bae5f 100644 --- a/browser/css/svg.css +++ b/browser/css/svg.css @@ -3,9 +3,15 @@ /* default tag color */ /* #dcffed also available */ #vmi-menu { - position: unset; - bottom: unset; + top: 32px; + right: 0; width: unset; + background-color: #ffffff; + margin: 6px 0 0 0; +} +#vmi-menu div { + padding: 5px; + border: 1px solid; } html { height: 100%; @@ -51,22 +57,23 @@ ul { } #visu-container { position: relative; + display: flex; flex: 1 1 auto; + flex-flow: column; -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; - height: 100%; - margin: auto; + width: 100%; overflow: hidden; - background: #FFFFFF; + background: #ffffff; } #top-container { flex: 0 1 auto; height: 32px; width: 100%; - background: #FFFFFF; + background: #ffffff; } #top-container.alert { background: yellow; @@ -89,7 +96,7 @@ ul { #upload_summary { display: none; z-index: 10; - background-color: #FFFFFF; + background-color: #ffffff; } .upload_field { width: 100%; @@ -106,28 +113,38 @@ ul { user-select: none; overflow: hidden; } -#mid-container { +#vidjil-panels { position: fixed; - display: flex; - flex: 1 1 auto; top: 32px; + left: 0; bottom: 125px ; - width: calc(100% - 6px + 6px); - overflow: hidden; - background: #FFFFFF; + background: #ffffff; margin: 6px; + display: flex; + flex: auto; + overflow: hidden; +} +.vidjil-panels-left { + width: calc(100% - -64px); +} +.vidjil-panels-full { + width: calc(100% - 6px); +} +#mid-container { + display: flex; + flex: auto; + overflow: hidden; } #right-container { - -khtml-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; - -ms-user-select: none; - user-select: none; + display: flex; + flex: 1 0 auto; + flex-flow: column; float: right; - width: 0px; + width: 475px; } #left-container { display: flex; + flex: 1 0 auto; flex-flow: column; position: relative; width: 475px; @@ -141,11 +158,16 @@ ul { #visu, #visu2 { height: 50%; + display: flex; + flex: auto; width: 100%; } #visu2 { max-height: calc(100% - 6px); } +#visu3 { + height: 100%; +} line { stroke: #586e75; stroke-width: 0.5; @@ -155,7 +177,7 @@ line { flex: 0 0 auto; font-size: 13px; padding: 3px; - background: #FFFFFF; + background: #ffffff; } .info_line { border-bottom: solid; @@ -183,13 +205,13 @@ line { } /*Style polyline / graph*/ .background_graph { - fill: #FFFFFF; + fill: #ffffff; } .background_graph2 { - fill: #FFFFFF; + fill: #ffffff; } .graph_line { - stroke-width: 2.5px; + stroke-width: 1.5px; cursor: pointer; stroke: #777777; } @@ -203,7 +225,7 @@ line { opacity: 0.8; } .graph_inactive { - stroke-width: 1.5px; + stroke-width: 0.5px; cursor: pointer; display: none; } @@ -220,12 +242,12 @@ line { } .axis_m { stroke: #777777; - opacity: 0.5; + opacity: 0.5 ; stroke-width: 20px; } .axis_m_other { stroke: #777777; - opacity: 0.25; + opacity: 0.25 ; stroke-width: 10px; display: none; } @@ -244,12 +266,14 @@ line { fill: #777777; } #resolution1 { - fill: #FFFFFF; + fill: #ffffff; opacity: 1; + pointer-events: none; } #resolution5 { - fill: #333333; + fill: #ffffff; opacity: 0.6; + pointer-events: none; } .graph_time { fill: #777777; @@ -286,7 +310,7 @@ line { border-bottom: solid; border-left: solid; border-color: #333333; - background: #FFFFFF; + background: #ffffff; z-index: 1; overflow: auto; max-height: 100%; @@ -306,12 +330,12 @@ line { } /*style scatterPlot element*/ .background_sp { - fill: #FFFFFF; + fill: #ffffff; } .circle { cursor: pointer; -webkit-transition: fill 0.2s; - -o-transition: fill 0.2s; + -o-transition: fill 0.2s; -ms-transition: fill 0.2s; transition: fill 0.2s; fill: #777777; @@ -411,6 +435,7 @@ line { #list { flex: 1 1 auto; height: 0px; + min-height: 20%; max-height: 100%; display: flex; flex-direction: column; @@ -442,33 +467,31 @@ line { padding-right: 30px; } .list { - width: 445px; - display: block; padding: 2px; } .listElem { - width: 445px; font-size: 13px; cursor: pointer; -webkit-transition: color 0.2s; - -o-transition: color 0.2s; + -o-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; padding: 1px 4px 4px 1px; height: 14px; + display: flex; } .selected { color: #777777; } .nameBox { - width: 300px; margin-right: 10px; overflow: hidden; display: inline-block; height: 16px; position: relative; - float: left; white-space: nowrap; + display: flex; + flex: 1 1 auto; } .seq-fixed .nameBox { width: 250px; @@ -476,7 +499,6 @@ line { .list .axisBox, .axisBox span { max-width: 52px; - float: right; overflow: hidden; display: inline-block; max-height: 16px; @@ -497,9 +519,8 @@ line { } .starBox { width: 16px; - float: right; height: 16px; - display: inline-block; + display: inline-flex; user-select: none; overflow: hidden; } @@ -514,14 +535,13 @@ line { .infoBox { font-size: 90%; width: 16px; - float: right; height: 15px; - display: inline-block; + display: inline-flex; user-select: none; text-align: center; border: solid; border-width: 1px; - border-color: #FFFFFF; + border-color: #ffffff; border-radius: 5px; margin: 0px 1px; } @@ -580,13 +600,11 @@ line { font-weight: bold; } .list_sort { - margin-right: 30px; + margin-right: 20px; float: right; } /*style segmenter element*/ .list_select { - width: 445px; - display: block; border: solid; border-width: 2px; padding: 0px; @@ -603,7 +621,7 @@ line { } .seq-fixed { position: relative; - display: inline-block; + display: inline-flex; width: auto; margin: -2px; padding: 2px; @@ -660,13 +678,13 @@ line { bottom: 1px; } .highlight_seq { - top: 0.9em; + top: .9em; padding-bottom: 1px; opacity: 0.6; font-size: 70%; - letter-spacing: 0.428em; + letter-spacing: .428em; /* (1-.7) / .7 */ - left: 0.214em; + left: .214em; } .highlight { display: inline-block; @@ -699,7 +717,7 @@ span .end-codon { width: 220px; border: solid; display: none; - background: #FFFFFF; + background: #ffffff; } .dataMenu { padding: 5px; @@ -709,7 +727,7 @@ span .end-codon { width: 220px; border: solid; display: none; - background: #FFFFFF; + background: #ffffff; } .tagElem { margin: 1px; @@ -772,7 +790,7 @@ span .end-codon { margin: -2px 0px 0px 5px; } .menu-selector { - background: #FFFFFF; + background: #ffffff; color: #657B83; height: 18px; width: 60px; @@ -793,7 +811,7 @@ span .end-codon { left: 50%; font-size: 13px; padding: 10px; - background: #FFFFFF; + background: #ffffff; display: none; } #add_clone_menu { @@ -816,7 +834,7 @@ span .end-codon { transition-delay: 0s, 0s; } #add_clone_menu > #addclone_input.error { - border: 1px solid darkred; + border: 1px solid #8b0000; } #menu_right_part { float: right; @@ -824,7 +842,7 @@ span .end-codon { justify-content: flex-end; } .buttonSelector { - background: #FFFFFF; + background: #ffffff; cursor: pointer; font-size: 13px; margin: 2px; @@ -849,7 +867,7 @@ span .end-codon { max-width: 80%; font-size: 13px; padding: 10px; - background: #FFFFFF; + background: #ffffff; display: none; position: fixed; left: 50%; @@ -882,14 +900,14 @@ a.tag-link { position: fixed; font-size: 13px; padding: 10px; - background: #FFFFFF; + background: #ffffff; display: none; } .modal.data-container, .modal.info-container { top: 50px; left: 495px; - max-width: calc(100% - (475px + 60px)); + max-width: calc(100% - 535px); height: calc(100% - 215px); } .modal.jstree-container { @@ -913,7 +931,7 @@ a.tag-link { #bot-container, #segmenter_axis_menu, .seq-fixed { - background: #FFFFFF; + background: #ffffff; } .closeButton { position: absolute; @@ -971,6 +989,10 @@ div.button { padding-left: 10px; padding-right: 10px; } +.clipboard-button { + margin-left: -5px; + padding: 3px; +} .smallbutton { cursor: pointer; font-size: 13px; @@ -987,7 +1009,7 @@ span.logo { font-size: 60% ; font-weight: bold; vertical-align: super; - opacity: 0.8; + opacity: .8; color: #f88; } .bot-bar { @@ -1024,7 +1046,7 @@ span.logo { position: relative; text-align: center; float: left; - width: calc(100% - (475px + 350px + 300px + 50)); + width: calc(100% - 1175px); overflow: hidden; height: 1.1em; } @@ -1051,7 +1073,7 @@ span.logo { min-width: 150px; margin-left: -6px; border-top: none; - margin-top: calc(32px - 24px); + margin-top: calc(8px); z-index: 5; overflow: hidden; } @@ -1060,9 +1082,8 @@ span.logo { } #bot-container { position: fixed; - left: 0; bottom: 0; - width: 100%; + left: 6px; border-top: solid; border-width: 6px; min-height: 125px; @@ -1152,9 +1173,11 @@ span.logo { text-align: center; vertical-align: middle; } -#info_timepoint td { +#info_timepoint, +#info_timepoint td, +.info_overlaps td { min-width: 150px; - max-width: 700px; + max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; border-style: solid; @@ -1163,16 +1186,22 @@ span.logo { vertical-align: middle; } #info_window table, -#info_timepoint table { +#info_timepoint table, +.info_overlaps { border-style: solid; border-color: #333333; border-collapse: collapse; } #info_window table .header, -#info_timepoint table .header { +#info_timepoint table .header, +.info_overlaps table .header { border-width: 2px; background-color: #333333; } +.info_overlaps_line { + background-color: #333333; + font-weight: bold; +} span.ok { color: green; } @@ -1204,7 +1233,7 @@ text.alert { fill: red; } span.warningReads { - margin-left: 0.5em; + margin-left: .5em; display: inline-block; width: 1em; text-align: center; @@ -1242,7 +1271,7 @@ span.warningReads { min-width: 22px; min-height: 18px; border-color: #333333; - background: #FFFFFF; + background: #ffffff; display: inline-block; padding: 2px; } @@ -1285,7 +1314,7 @@ span.warningReads { border-width: 2px; border-radius: 5px; margin: 5px auto; - border-color: #FFFFFF; + border-color: #ffffff; } .sp_menu_icon:hover { background: #333333; @@ -1311,7 +1340,7 @@ span.warningReads { white-space: nowrap; } .axis_select select { - background: #FFFFFF; + background: #ffffff; color: #777777; height: 20px; width: 120px; @@ -1328,11 +1357,9 @@ span.warningReads { .axis_select select[selected=selected] { color: #777777; } -#visu-separator { +.visu-separator { position: relative; height: 6px; - cursor: move; - cursor: -webkit-grab; background: #333333; } #bot-separator { @@ -1343,15 +1370,17 @@ span.warningReads { position: relative; top: -6px; } -#vertical-separator { +#vertical-separator, +#vertical-separator-right { position: relative; float: left; - height: 100%; width: 6px; - line-height: calc(100% - 1px); background: #333333; cursor: pointer; } +#vertical-separator-right { + float: right; +} #visu-separator:hover, #vertical-separator:hover, #bot-separator:hover { @@ -1372,7 +1401,7 @@ span.warningReads { width: 100%; height: calc(100% - 35px); font-size: 14px; - background: #FFFFFF; + background: #ffffff; display: none; left: 0%; } @@ -1411,7 +1440,7 @@ span.warningReads { background-color: #777777; } .db_table_split td { - border-top: 2ex solid #FFFFFF; + border-top: 2ex solid #ffffff; } .db_table .column_200 { width: 200px; @@ -1441,8 +1470,8 @@ span.warningReads { width: 50px; border: solid; border-width: 1px; - border-color: #FFFFFF; - background: #FFFFFF; + border-color: #ffffff; + background: #ffffff; } h3 .uid { font-size: 70%; @@ -1505,7 +1534,7 @@ h3 .uid { #db_table_container { overflow-y: scroll; overflow-x: hidden; - height: calc(100% -30px); + height: calc(70%); position: relative; } #db_fixed_header { @@ -1623,7 +1652,7 @@ h3 .uid { border-radius: 5px; padding: 5px; margin: 5px; - background: #FFFFFF; + background: #ffffff; border-color: #333333; transition: background 1s linear; } @@ -1635,27 +1664,27 @@ h3 .uid { min-height: 20px; display: block; margin: 5px; - background: #FFFFFF; + background: #ffffff; border: solid; border-width: 2px; border-radius: 2px; - border-color: #FFFFFF; + border-color: #ffffff; } .flash_1, .log_1 { font-weight: bold; - background-color: #DFF0D8; + background-color: #dff0d8; } .flash_2, .log_2 { font-weight: bold; - background-color: #F2DEAE; + background-color: #f2deae; } .flash_3, .log_3 { font-weight: bold; border-color: darkred; - background-color: #F2DEDE; + background-color: #f2dede; } .tip_1 { width: 400px; @@ -1665,7 +1694,7 @@ h3 .uid { border-radius: 5px; padding: 5px; margin: 5px; - background: #DFF0D8; + background: #dff0d8; border-color: #333333; } #tip_img { @@ -1709,7 +1738,7 @@ select > option:hover { border: solid; border-width: 1px; min-height: 20px; - background: #FFFFFF; + background: #ffffff; border-color: #333333; max-height: 100px; display: none; @@ -1735,7 +1764,7 @@ input:focus, textarea:focus, #add_clone_menu > #addclone_input:focus { border-color: #333333; - box-shadow: inset 0 1px 1px #FFFFFF, 0 0 8px #333333; + box-shadow: inset 0 1px 1px #ffffff, 0 0 8px #333333; outline: 0; outline: thin dotted \9; } @@ -1791,7 +1820,7 @@ table.log textarea { flex-grow: 1; } .tagColor0 { - background: #DC322F; + background: #dc322f; } .tagColor1 { background: #cb4b16; @@ -1817,8 +1846,12 @@ table.log textarea { .tagColor8 { background: #777777; } +.tagColor9 { + background: #bdbdbd; + margin-left: 7px; +} .inactiveTag { - background-image: linear-gradient(45deg, transparent -25%, #FFFFFF 100%, #FFFFFF 100%, transparent 0%); + background-image: linear-gradient(45deg, transparent -25%, #ffffff 100%, #ffffff 100%, transparent 0%); } .message_container { display: none; @@ -1828,15 +1861,15 @@ table.log textarea { text-align: center; } .urgent_message { - border: 2px solid darkred; + border: 2px solid #8b0000; margin: 3px; font-weight: bold; - background-color: #F2DEDE; + background-color: #f2dede; } .info_message { border: 1px solid #333333; margin: 4px; - background-color: #DFF0D8; + background-color: #dff0d8; } .notification { padding: 3px; @@ -1891,11 +1924,12 @@ table.log textarea { border: 1px solid #333333; overflow-wrap: break-word; overflow-y: hidden; - max-width: 457px; min-height: 32px; max-height: 32px; - width: 100%; - background-color: #FFFFFF; + width: 99%; + background-color: #ffffff; + margin-left: auto; + margin-right: auto; } .patient_info_text { margin-bottom: 5px; @@ -2225,7 +2259,7 @@ form .form_label { margin-top: -20%; } .meter span.value_container span.meter_value { - background-color: #FFFFFF; + background-color: #ffffff; opacity: 0.5; color: #777777; height: 50%; @@ -2237,7 +2271,7 @@ form .form_label { display: block; height: 100%; background-color: #777777; - background-image: linear-gradient(center bottom, #777777 37%, #FFFFFF 69%); + background-image: linear-gradient(center bottom, #777777 37%, #ffffff 69%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; @@ -2248,7 +2282,7 @@ form .form_label { .bar_chart .bar { display: inline-block; background-color: #777777; - background-image: linear-gradient(center bottom, #777777 37%, #FFFFFF 69%); + background-image: linear-gradient(center bottom, #777777 37%, #ffffff 69%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.4); min-width: 0.2%; } @@ -2269,6 +2303,33 @@ form .form_label { .list_lock_on { color: #777777; } +.set_group { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + margin-bottom: 25px; + margin-right: 15px; + flex-flow: column; + width: 48%; +} +.set_group_header { + width: 100%; +} +.set_cell { + word-break: break-all; +} +.set_data { + width: 100%; +} +.analysis_button { + display: inline-flex; +} +.margined-top { + margin-top: 10px; +} +.margined-bottom { + margin-bottom: 10px; +} #resolution5 { opacity: 0; } diff --git a/browser/css/talk.css b/browser/css/talk.css index 6e07a4a2a5576f1d1b76505d8f8aff07b31e8d5a..34bbe473007c216f4908d32d112f243578f23ab4 100644 --- a/browser/css/talk.css +++ b/browser/css/talk.css @@ -4,9 +4,15 @@ /* default tag color */ /* #dcffed also available */ #vmi-menu { - position: unset; - bottom: unset; + top: 32px; + right: 0; width: unset; + background-color: #ffffff; + margin: 6px 0 0 0; +} +#vmi-menu div { + padding: 5px; + border: 1px solid; } html { height: 100%; @@ -52,14 +58,15 @@ ul { } #visu-container { position: relative; + display: flex; flex: 1 1 auto; + flex-flow: column; -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; - height: 100%; - margin: auto; + width: 100%; overflow: hidden; background: #ffffff; } @@ -107,28 +114,38 @@ ul { user-select: none; overflow: hidden; } -#mid-container { +#vidjil-panels { position: fixed; - display: flex; - flex: 1 1 auto; top: 32px; + left: 0; bottom: 125px ; - width: calc(100% - 6px + 6px); - overflow: hidden; background: #ffffff; margin: 6px; + display: flex; + flex: auto; + overflow: hidden; +} +.vidjil-panels-left { + width: calc(100% - -64px); +} +.vidjil-panels-full { + width: calc(100% - 6px); +} +#mid-container { + display: flex; + flex: auto; + overflow: hidden; } #right-container { - -khtml-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; - -ms-user-select: none; - user-select: none; + display: flex; + flex: 1 0 auto; + flex-flow: column; float: right; - width: 0px; + width: 475px; } #left-container { display: flex; + flex: 1 0 auto; flex-flow: column; position: relative; width: 475px; @@ -142,11 +159,16 @@ ul { #visu, #visu2 { height: 50%; + display: flex; + flex: auto; width: 100%; } #visu2 { max-height: calc(100% - 6px); } +#visu3 { + height: 100%; +} line { stroke: #93a1a1; stroke-width: 0.5; @@ -190,7 +212,7 @@ line { fill: #ffffff; } .graph_line { - stroke-width: 2.5px; + stroke-width: 1.5px; cursor: pointer; stroke: #657b83; } @@ -204,7 +226,7 @@ line { opacity: 0.8; } .graph_inactive { - stroke-width: 1.5px; + stroke-width: 0.5px; cursor: pointer; display: none; } @@ -221,12 +243,12 @@ line { } .axis_m { stroke: #657b83; - opacity: 0.5; + opacity: 0.5 ; stroke-width: 20px; } .axis_m_other { stroke: #657b83; - opacity: 0.25; + opacity: 0.25 ; stroke-width: 10px; display: none; } @@ -247,10 +269,12 @@ line { #resolution1 { fill: #ffffff; opacity: 1; + pointer-events: none; } #resolution5 { - fill: #cccccc; + fill: #ffffff; opacity: 0.6; + pointer-events: none; } .graph_time { fill: #657b83; @@ -312,7 +336,7 @@ line { .circle { cursor: pointer; -webkit-transition: fill 0.2s; - -o-transition: fill 0.2s; + -o-transition: fill 0.2s; -ms-transition: fill 0.2s; transition: fill 0.2s; fill: #657b83; @@ -412,6 +436,7 @@ line { #list { flex: 1 1 auto; height: 0px; + min-height: 20%; max-height: 100%; display: flex; flex-direction: column; @@ -443,33 +468,31 @@ line { padding-right: 30px; } .list { - width: 445px; - display: block; padding: 2px; } .listElem { - width: 445px; font-size: 13px; cursor: pointer; -webkit-transition: color 0.2s; - -o-transition: color 0.2s; + -o-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; padding: 1px 4px 4px 1px; height: 14px; + display: flex; } .selected { color: #002b36; } .nameBox { - width: 300px; margin-right: 10px; overflow: hidden; display: inline-block; height: 16px; position: relative; - float: left; white-space: nowrap; + display: flex; + flex: 1 1 auto; } .seq-fixed .nameBox { width: 250px; @@ -477,7 +500,6 @@ line { .list .axisBox, .axisBox span { max-width: 52px; - float: right; overflow: hidden; display: inline-block; max-height: 16px; @@ -498,9 +520,8 @@ line { } .starBox { width: 16px; - float: right; height: 16px; - display: inline-block; + display: inline-flex; user-select: none; overflow: hidden; } @@ -515,9 +536,8 @@ line { .infoBox { font-size: 90%; width: 16px; - float: right; height: 15px; - display: inline-block; + display: inline-flex; user-select: none; text-align: center; border: solid; @@ -581,13 +601,11 @@ line { font-weight: bold; } .list_sort { - margin-right: 30px; + margin-right: 20px; float: right; } /*style segmenter element*/ .list_select { - width: 445px; - display: block; border: solid; border-width: 2px; padding: 0px; @@ -604,7 +622,7 @@ line { } .seq-fixed { position: relative; - display: inline-block; + display: inline-flex; width: auto; margin: -2px; padding: 2px; @@ -661,13 +679,13 @@ line { bottom: 1px; } .highlight_seq { - top: 0.9em; + top: .9em; padding-bottom: 1px; opacity: 0.6; font-size: 70%; - letter-spacing: 0.428em; + letter-spacing: .428em; /* (1-.7) / .7 */ - left: 0.214em; + left: .214em; } .highlight { display: inline-block; @@ -817,7 +835,7 @@ span .end-codon { transition-delay: 0s, 0s; } #add_clone_menu > #addclone_input.error { - border: 1px solid darkred; + border: 1px solid #8b0000; } #menu_right_part { float: right; @@ -890,7 +908,7 @@ a.tag-link { .modal.info-container { top: 50px; left: 495px; - max-width: calc(100% - (475px + 60px)); + max-width: calc(100% - 535px); height: calc(100% - 215px); } .modal.jstree-container { @@ -972,6 +990,10 @@ div.button { padding-left: 10px; padding-right: 10px; } +.clipboard-button { + margin-left: -5px; + padding: 3px; +} .smallbutton { cursor: pointer; font-size: 13px; @@ -988,7 +1010,7 @@ span.logo { font-size: 60% ; font-weight: bold; vertical-align: super; - opacity: 0.8; + opacity: .8; color: #f88; } .bot-bar { @@ -1025,7 +1047,7 @@ span.logo { position: relative; text-align: center; float: left; - width: calc(100% - (475px + 350px + 300px + 50)); + width: calc(100% - 1175px); overflow: hidden; height: 1.1em; } @@ -1052,7 +1074,7 @@ span.logo { min-width: 150px; margin-left: -6px; border-top: none; - margin-top: calc(32px - 24px); + margin-top: calc(8px); z-index: 5; overflow: hidden; } @@ -1061,9 +1083,8 @@ span.logo { } #bot-container { position: fixed; - left: 0; bottom: 0; - width: 100%; + left: 6px; border-top: solid; border-width: 6px; min-height: 125px; @@ -1153,9 +1174,11 @@ span.logo { text-align: center; vertical-align: middle; } -#info_timepoint td { +#info_timepoint, +#info_timepoint td, +.info_overlaps td { min-width: 150px; - max-width: 700px; + max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; border-style: solid; @@ -1164,16 +1187,22 @@ span.logo { vertical-align: middle; } #info_window table, -#info_timepoint table { +#info_timepoint table, +.info_overlaps { border-style: solid; border-color: #cccccc; border-collapse: collapse; } #info_window table .header, -#info_timepoint table .header { +#info_timepoint table .header, +.info_overlaps table .header { border-width: 2px; background-color: #cccccc; } +.info_overlaps_line { + background-color: #cccccc; + font-weight: bold; +} span.ok { color: green; } @@ -1205,7 +1234,7 @@ text.alert { fill: red; } span.warningReads { - margin-left: 0.5em; + margin-left: .5em; display: inline-block; width: 1em; text-align: center; @@ -1329,11 +1358,9 @@ span.warningReads { .axis_select select[selected=selected] { color: #002b36; } -#visu-separator { +.visu-separator { position: relative; height: 6px; - cursor: move; - cursor: -webkit-grab; background: #cccccc; } #bot-separator { @@ -1344,15 +1371,17 @@ span.warningReads { position: relative; top: -6px; } -#vertical-separator { +#vertical-separator, +#vertical-separator-right { position: relative; float: left; - height: 100%; width: 6px; - line-height: calc(100% - 1px); background: #cccccc; cursor: pointer; } +#vertical-separator-right { + float: right; +} #visu-separator:hover, #vertical-separator:hover, #bot-separator:hover { @@ -1506,7 +1535,7 @@ h3 .uid { #db_table_container { overflow-y: scroll; overflow-x: hidden; - height: calc(100% -30px); + height: calc(70%); position: relative; } #db_fixed_header { @@ -1645,18 +1674,18 @@ h3 .uid { .flash_1, .log_1 { font-weight: bold; - background-color: #DFF0D8; + background-color: #dff0d8; } .flash_2, .log_2 { font-weight: bold; - background-color: #F2DEAE; + background-color: #f2deae; } .flash_3, .log_3 { font-weight: bold; border-color: darkred; - background-color: #F2DEDE; + background-color: #f2dede; } .tip_1 { width: 400px; @@ -1666,7 +1695,7 @@ h3 .uid { border-radius: 5px; padding: 5px; margin: 5px; - background: #DFF0D8; + background: #dff0d8; border-color: #cccccc; } #tip_img { @@ -1792,7 +1821,7 @@ table.log textarea { flex-grow: 1; } .tagColor0 { - background: #DC322F; + background: #dc322f; } .tagColor1 { background: #cb4b16; @@ -1818,6 +1847,10 @@ table.log textarea { .tagColor8 { background: #657b83; } +.tagColor9 { + background: #bdbdbd; + margin-left: 7px; +} .inactiveTag { background-image: linear-gradient(45deg, transparent -25%, #ffffff 100%, #ffffff 100%, transparent 0%); } @@ -1829,15 +1862,15 @@ table.log textarea { text-align: center; } .urgent_message { - border: 2px solid darkred; + border: 2px solid #8b0000; margin: 3px; font-weight: bold; - background-color: #F2DEDE; + background-color: #f2dede; } .info_message { border: 1px solid #cccccc; margin: 4px; - background-color: #DFF0D8; + background-color: #dff0d8; } .notification { padding: 3px; @@ -1892,11 +1925,12 @@ table.log textarea { border: 1px solid #cccccc; overflow-wrap: break-word; overflow-y: hidden; - max-width: 457px; min-height: 32px; max-height: 32px; - width: 100%; + width: 99%; background-color: #ffffff; + margin-left: auto; + margin-right: auto; } .patient_info_text { margin-bottom: 5px; @@ -2270,6 +2304,33 @@ form .form_label { .list_lock_on { color: #657b83; } +.set_group { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + margin-bottom: 25px; + margin-right: 15px; + flex-flow: column; + width: 48%; +} +.set_group_header { + width: 100%; +} +.set_cell { + word-break: break-all; +} +.set_data { + width: 100%; +} +.analysis_button { + display: inline-flex; +} +.margined-top { + margin-top: 10px; +} +.margined-bottom { + margin-bottom: 10px; +} #mid-container { font-size: 125%; } diff --git a/browser/css/vidjil.less b/browser/css/vidjil.less index 2ddd97e0ec733a6b5cf1e8fb050887b2264d157d..cb026a06d797dd13cc296256e4f39c97eefac566 100644 --- a/browser/css/vidjil.less +++ b/browser/css/vidjil.less @@ -23,9 +23,15 @@ /* #dcffed also available */ #vmi-menu { - position: unset; - bottom: unset; + top: @top_container_height; + right: 0; width: unset; + background-color: @background; + margin: @margin 0 0 0; + div { + padding: 5px; + border: 1px solid; + } } html{ @@ -85,14 +91,15 @@ ul{ #visu-container{ position: relative; + display: flex; flex: 1 1 auto; + flex-flow: column; -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; - height :100%; - margin : auto; + width: 100%; overflow : hidden; background : @background; } @@ -151,30 +158,43 @@ ul{ overflow:hidden; } -#mid-container { +#vidjil-panels { position : fixed; - display: flex; - flex: 1 1 auto; top : @top_container_height; + left : 0; bottom : 125px ; - width: calc(~"100%" - @margin + @margin); - overflow: hidden; background: @background; margin: @margin; + display: flex; + flex: auto; + overflow: hidden; +} + +.vidjil-panels-left { + width: calc(~"100%" - @margin - @vmi_menu_width); +} + +.vidjil-panels-full { + width: calc(~"100%" - @margin); +} + +#mid-container { + display: flex; + flex: auto; + overflow: hidden; } #right-container{ - -khtml-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; - -ms-user-select: none; - user-select: none; + display: flex; + flex: 1 0 auto; + flex-flow: column; float : right; - width : 0px; + width : @width_left_container; } #left-container { display: flex; + flex: 1 0 auto; flex-flow: column; position: relative; width : @width_left_container; @@ -188,6 +208,8 @@ ul{ #visu, #visu2 { height : 50%; + display: flex; + flex: auto; width : 100%; } @@ -195,6 +217,10 @@ ul{ max-height: calc(~"100%" - @margin) } +#visu3 { + height: 100%; +} + line { stroke: @secondary; stroke-width: 0.5; @@ -514,9 +540,9 @@ line { @width_axisBox : 52px; @width_infoBox : 20px; @width_systemBox : 12px; -@width_listElem : (@width_left_container - @width_scrollbar); @margin : 6px; @margin_nameBox : 10px; +@vmi_menu_width : 70px; .list:hover, .tagElem:hover, .data:hover{ background :@border; @@ -531,6 +557,7 @@ line { #list{ flex: 1 1 auto; height: 0px; // set scrollbar flex will override height + min-height: 20%; max-height: 100%; display: flex; flex-direction: column; @@ -571,13 +598,10 @@ line { } .list{ - width : 445px; - display : block; padding : 2px; } .listElem{ - width : @width_listElem; font-size: 13px; cursor:pointer; -webkit-transition: color 0.2s; @@ -586,6 +610,7 @@ line { transition: color 0.2s; padding: 1px 4px 4px 1px; height :14px; + display: flex; } .selected{ @@ -593,14 +618,14 @@ line { } .nameBox { - width: 300px; margin-right: @margin_nameBox; overflow: hidden; display: inline-block; height: 16px; position: relative; - float:left; white-space:nowrap; + display: flex; + flex: 1 1 auto; } .seq-fixed .nameBox { @@ -609,7 +634,6 @@ line { .list .axisBox, .axisBox span { max-width: @width_axisBox; - float: right; overflow: hidden; display: inline-block; max-height: 16px; @@ -635,9 +659,8 @@ line { .starBox{ width: @width_starBox; - float: right; height: 16px; - display: inline-block; + display: inline-flex; user-select :none; overflow: hidden; } @@ -655,9 +678,8 @@ line { .infoBox{ font-size: 90%; width: 16px; - float: right; height: 15px; - display: inline-block; + display: inline-flex; user-select: none; text-align: center; border: solid; @@ -736,8 +758,6 @@ line { /*style segmenter element*/ .list_select{ - width : 445px; - display : block; border : solid; border-width : 2px; padding : 0px; @@ -756,7 +776,7 @@ line { .seq-fixed { position: relative; - display: inline-block; + display: inline-flex; // width: (@width_left_container - @width_scrollbar); width : auto; margin: -2px; @@ -1155,6 +1175,11 @@ div.button { padding-right: 10px; } +.clipboard-button { + margin-left: -5px; + padding: 3px; +} + .smallbutton { cursor:pointer; font-size: 13px; @@ -1257,9 +1282,8 @@ span.logo #bot-container { position: fixed; - left: 0; bottom: 0; - width: 100%; + left: @margin; border-top: solid; border-width: 6px; min-height: 125px; @@ -1531,11 +1555,9 @@ span.warningReads { color: @select; } -#visu-separator { +.visu-separator { position: relative; height: @margin; - cursor: move; - cursor: -webkit-grab; background: @border; } @@ -1548,16 +1570,18 @@ span.warningReads { top: -@margin; } -#vertical-separator { +#vertical-separator, #vertical-separator-right { position: relative; float: left; - height: 100%; width: @margin; - line-height: calc(~"100% - 1px"); background : @border; cursor: pointer; } +#vertical-separator-right { + float: right; +} + #visu-separator:hover , #vertical-separator:hover, #bot-separator:hover { background: @highlight; } @@ -2157,11 +2181,12 @@ flex-grow : 1; border: 1px solid @border; overflow-wrap: break-word; overflow-y: hidden; - max-width: 457px; min-height: @infoContainerHeight; max-height: @infoContainerHeight; - width: 100%; + width: 99%; background-color: @background; + margin-left: auto; + margin-right: auto; } .patient_info_text { @@ -2626,4 +2651,38 @@ form { } .list_lock_on { color: @default; -} \ No newline at end of file +} + +.set_group { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + margin-bottom: 25px; + margin-right: 15px; + flex-flow: column; + width: 48%; +} + +.set_group_header { + width: 100%; +} + +.set_cell { + word-break: break-all; +} + +.set_data { + width: 100%; +} + +.analysis_button { + display: inline-flex; +} + +.margined-top { + margin-top: 10px; +} + +.margined-bottom { + margin-bottom: 10px; +} diff --git a/browser/css/vmi/vmi.css b/browser/css/vmi/vmi.css index 1c6e61bcc6b8b0b9451f25d85d43111615862124..c0db06c43a8a2fb7c9b39c58239099833a151132 100644 --- a/browser/css/vmi/vmi.css +++ b/browser/css/vmi/vmi.css @@ -8,7 +8,7 @@ } #vmi-menu div { - text-align: center; + /*text-align: center;*/ font-size: 1.5em; padding: 20px; border: solid; @@ -67,4 +67,14 @@ height: 100%; /*height: 200px;*/ } + +.cancel-container { + position: relative; + left: 35px; + top: -10px; +} + +.cancel-button { + position:absolute; +} /*##############################################*/ diff --git a/browser/index.html b/browser/index.html index ba7c955b8b95760cc9f81cd389d9656422c26fd4..5dc9a1a0f8508d6f1beb5e203fcb5e1b2422d5d3 100644 --- a/browser/index.html +++ b/browser/index.html @@ -84,10 +84,6 @@