From 859b796f5bce71f47207f2b3ef60632890259d2e Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 12:45:37 +0000 Subject: [PATCH 01/13] first commit for manually curated file --- style/fv-theme-grey.css | 282 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 282 insertions(+) create mode 100644 style/fv-theme-grey.css diff --git a/style/fv-theme-grey.css b/style/fv-theme-grey.css new file mode 100644 index 0000000..2acfb57 --- /dev/null +++ b/style/fv-theme-grey.css @@ -0,0 +1,282 @@ + +.up_pftv_navruler svg { + background-color: transparent; +} + +.up_pftv_aaviewer .background, .up_pftv_viewport .background { + fill: white; +} + +.up_pftv_container text.domain-label { + font-size: 12px !important; +} + +.up_pftv_container, .up_pftv_aaviewer text { + font-family: Helvetica, sans-serif; +} + +.up_pftv_container .up_pftv_navruler .resize { + font-size: 20px; + fill: #999; + fill-opacity: 1.0; +} + +.up_pftv_category-container { + border-right: 1px solid #ddd; + border-top: 1px solid #ddd; +} + +.up_pftv_category { + border-bottom-color: #ddd; +} + +.up_pftv_category-name { + background-color: #eee; + text-transform: uppercase; +} + +.up_pftv_category a:hover { + background-color: #eeeeee; +} + +.up_pftv_track-header { + background-color: #f3f3f3; + text-align: right; + text-transform: uppercase; +} + +.up_pftv_track { + border-top: 1px solid #eee; +} + +.up_pftv_disulphid { +} + + + +/* +d3.scale.category20() +#1f77b4 +#aec7e8 +#ff7f0e +#ffbb78 +#2ca02c +#98df8a +#d62728 +#ff9896 +#9467bd +#c5b0d5 +#8c564b +#c49c94 +#e377c2 +#f7b6d2 +#7f7f7f +#c7c7c7 +#bcbd22 +#dbdb8d +#17becf +#9edae5 +*/ + +/* Features */ +svg .up_pftv_chain { + stroke: #1f77b4; + fill: #1f77b4; +} + +svg .up_pftv_transit { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_init_met { + stroke: #ff7f0e; + fill: #ff7f0e; +} + +svg .up_pftv_propep { + stroke: #ffbb78; + fill: #ffbb78; +} + +svg .up_pftv_peptide { + stroke: #2ca02c; + fill: #2ca02c; +} + +svg .up_pftv_signal { + stroke: #98df8a; + fill: #98df8a; +} + +svg .up_pftv_turn { + stroke: #0571AF; + fill: #0571AF; +} + +svg .up_pftv_strand { + stroke: #FFCC00; + fill: #FFCC00; +} + +svg .up_pftv_helix { + stroke: #FF0066; + fill: #FF0066; +} + +svg .up_pftv_crosslnk { + stroke: #d62728; + fill: #d62728; +} + +svg .up_pftv_disulfid { + stroke: #ff9896; + fill: #ff9896; +} + +svg .up_pftv_region { + stroke: #9467bd; + fill: #9467bd; +} + +svg .up_pftv_coiled { + stroke: #9edae5; + fill: #9edae5; +} + +svg .up_pftv_motif { + stroke: #17becf; + fill: #17becf; +} + +svg .up_pftv_repeat { + stroke: #bcbd22; + fill: #bcbd22; +} + +svg .up_pftv_ca_bind { + stroke: #f7b6d2; + fill: #f7b6d2; +} + +svg .up_pftv_dna_bind { + stroke: #1f77b4; + fill: #1f77b4; +} + +svg .up_pftv_domain { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_zn_fing { + stroke: #ff7f0e; + fill: #ff7f0e; +} + +svg .up_pftv_np_bind { + stroke: #ffbb78; + fill: #ffbb78; +} + +svg .up_pftv_metal { + stroke: #f7b6d2; + fill: #f7b6d2; +} + +svg .up_pftv_site { + stroke: #1f77b4; + fill: #1f77b4; +} + +svg .up_pftv_binding { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_act_site { + stroke: #17becf; + fill: #17becf; +} + +svg .up_pftv_mod_res { + stroke: #0571AF; + fill: #0571AF; +} + +svg .up_pftv_lipid { + stroke: #d62728; + fill: #d62728; +} + +svg .up_pftv_carbohyd { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_variant { + stroke-width: 2; +} + +svg .up_pftv_compbias { + stroke: #0571AF; + fill: #0571AF; +} + +svg .up_pftv_mutagen { + stroke: #98df8a; + fill: #98df8a; +} + +svg .up_pftv_conflict { + stroke: #2ca02c; + fill: #2ca02c; +} + +svg .up_pftv_non_cons { + stroke: #ffbb78; + fill: #ffbb78; +} + +svg .up_pftv_non_ter { + stroke: #ff7f0e; + fill: #ff7f0e; +} + +svg .up_pftv_unsure { + stroke: #f7b6d2; + fill: #f7b6d2; +} + +svg .up_pftv_non_std { + stroke: #ffbb78; + fill: #ffbb78; +} + +svg .up_pftv_topo_dom { + stroke: #ff7f0e; + fill: #ff7f0e; +} + +svg .up_pftv_transmem { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_intramem { + stroke: #1f77b4; + fill: #1f77b4; +} + +svg .up_pftv_unique { + stroke: #f7b6d2; + fill: #f7b6d2; +} + +svg .up_pftv_non_unique { + stroke: #bcbd22; + fill: #bcbd22; +} + + + From 124a4348d22938fe32fd89b1d57a31105d3ed73f Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 13:02:32 +0000 Subject: [PATCH 02/13] first commit for less file --- style/fv-theme-grey.less | 206 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 206 insertions(+) create mode 100644 style/fv-theme-grey.less diff --git a/style/fv-theme-grey.less b/style/fv-theme-grey.less new file mode 100644 index 0000000..0e24053 --- /dev/null +++ b/style/fv-theme-grey.less @@ -0,0 +1,206 @@ +/* +d3.scale.category20() +*/ +@c_helix: #FF0066 +@c_strand: #FFCC00 +@c_turn: #0571AF + +@c1: #1f77b4 +@c2: #aec7e8 +@c3: #ff7f0e +@c4: #ffbb78 +@c5: #2ca02c +@c6: #98df8a +@c7: #d62728 +@c8: #ff9896 +@c9: #9467bd +@c10: #c5b0d5 +@c11: #8c564b +@c12: #c49c94 +@c13: #e377c2 +@c14: #f7b6d2 +@c15: #7f7f7f +@c16: #c7c7c7 +@c17: #bcbd22 +@c18: #dbdb8d +@c19: #17becf +@c20: #9edae5 + +.pv-theme-grey { + .up_pftv_navruler svg { + background-color: transparent; + } + + .up_pftv_aaviewer .background, .up_pftv_viewport .background { + fill: white; + } + + .up_pftv_container text.domain-label { + font-size: 12px !important; + } + + .up_pftv_container, .up_pftv_aaviewer text { + font-family: Helvetica, sans-serif; + } + + .up_pftv_container .up_pftv_navruler .resize { + font-size: 20px; + fill: #999; + fill-opacity: 1.0; + } + + .up_pftv_category-container { + border-right: 1px solid #ddd; + border-top: 1px solid #ddd; + } + + .up_pftv_category { + border-bottom-color: #ddd; + } + + .up_pftv_category-name { + background-color: #eee; + text-transform: uppercase; + } + + .up_pftv_category a:hover { + background-color: #eeeeee; + } + + .up_pftv_track-header { + background-color: #f3f3f3; + text-align: right; + text-transform: uppercase; + } + + .up_pftv_track { + border-top: 1px solid #eee; + } + + .up_pftv_disulphid { + } + + svg .up_pftv_chain { stroke: @c1; fill: @c1; } + svg .up_pftv_transit { stroke: @c2; fill: @c2; } + svg .up_pftv_init_met { stroke: @c3; fill: @c3; } + svg .up_pftv_propep { stroke: @c4; fill: @c4; } + svg .up_pftv_peptide { stroke: @c5; fill: @c5; } + svg .up_pftv_signal { stroke: @c6; fill: @c6; } + svg .up_pftv_crosslnk { stroke: @c10; fill: @c10; } + svg .up_pftv_disulfid { stroke: @c11; fill: @c11; } + svg .up_pftv_region { stroke: @c12; fill: @c12; } + svg .up_pftv_coiled { stroke: @c13; fill: @c13; } + svg .up_pftv_motif { stroke: @c14; fill: @c14; } + svg .up_pftv_repeat { stroke: @c15; fill: @c15; } + svg .up_pftv_ca_bind { stroke: @c16; fill: @c16; } + svg .up_pftv_dna_bind { stroke: @c17; fill: @c17; } + svg .up_pftv_domain { stroke: @c18; fill: @c18; } + svg .up_pftv_zn_fing { stroke: @c19; fill: @c19; } + svg .up_pftv_np_bind { stroke: @c20; fill: @c20; } + svg .up_pftv_metal { stroke: @c1; fill: @c1; } + svg .up_pftv_binding { stroke: @c2; fill: @c2; } + svg .up_pftv_act_site { stroke: @c3; fill: @c3; } + svg .up_pftv_mod_res { stroke: @c4; fill: @c4; } + svg .up_pftv_lipid { stroke: @c5; fill: @c5; } + svg .up_pftv_carbohyd { stroke: @c6; fill: @c6; } + svg .up_pftv_variant { stroke: @c7; fill: @c7; } + svg .up_pftv_compbias { stroke: @c8; fill: @c8; } + svg .up_pftv_mutagen { stroke: @c9; fill: @c9; } + + svg .up_pftv_turn { stroke: @c_turn; fill: @c_turn; } + svg .up_pftv_strand { stroke: @c_strand; fill: @c_strand; } + svg .up_pftv_helix { stroke: @c_helix; fill: @c_helix; } + +} + +svg .up_pftv_binding { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_act_site { + stroke: #17becf; + fill: #17becf; +} + +svg .up_pftv_mod_res { + stroke: #0571AF; + fill: #0571AF; +} + +svg .up_pftv_lipid { + stroke: #d62728; + fill: #d62728; +} + +svg .up_pftv_carbohyd { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_variant { + stroke-width: 2; +} + +svg .up_pftv_compbias { + stroke: #0571AF; + fill: #0571AF; +} + +svg .up_pftv_mutagen { + stroke: #98df8a; + fill: #98df8a; +} + +svg .up_pftv_conflict { + stroke: #2ca02c; + fill: #2ca02c; +} + +svg .up_pftv_non_cons { + stroke: #ffbb78; + fill: #ffbb78; +} + +svg .up_pftv_non_ter { + stroke: #ff7f0e; + fill: #ff7f0e; +} + +svg .up_pftv_unsure { + stroke: #f7b6d2; + fill: #f7b6d2; +} + +svg .up_pftv_non_std { + stroke: #ffbb78; + fill: #ffbb78; +} + +svg .up_pftv_topo_dom { + stroke: #ff7f0e; + fill: #ff7f0e; +} + +svg .up_pftv_transmem { + stroke: #aec7e8; + fill: #aec7e8; +} + +svg .up_pftv_intramem { + stroke: #1f77b4; + fill: #1f77b4; +} + +svg .up_pftv_unique { + stroke: #f7b6d2; + fill: #f7b6d2; +} + +svg .up_pftv_non_unique { + stroke: #bcbd22; + fill: #bcbd22; +} + + + From e8152fd6b6a7c99b6638ed7ec7717f8d8df332d6 Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 13:04:45 +0000 Subject: [PATCH 03/13] correct syntax --- style/fv-theme-grey.less | 152 ++++++++++----------------------------- 1 file changed, 37 insertions(+), 115 deletions(-) diff --git a/style/fv-theme-grey.less b/style/fv-theme-grey.less index 0e24053..f601b6a 100644 --- a/style/fv-theme-grey.less +++ b/style/fv-theme-grey.less @@ -1,30 +1,33 @@ +/* +specific colours +*/ +@c_helix: #FF0066; +@c_strand: #FFCC00; +@c_turn: #0571AF; + /* d3.scale.category20() */ -@c_helix: #FF0066 -@c_strand: #FFCC00 -@c_turn: #0571AF - -@c1: #1f77b4 -@c2: #aec7e8 -@c3: #ff7f0e -@c4: #ffbb78 -@c5: #2ca02c -@c6: #98df8a -@c7: #d62728 -@c8: #ff9896 -@c9: #9467bd -@c10: #c5b0d5 -@c11: #8c564b -@c12: #c49c94 -@c13: #e377c2 -@c14: #f7b6d2 -@c15: #7f7f7f -@c16: #c7c7c7 -@c17: #bcbd22 -@c18: #dbdb8d -@c19: #17becf -@c20: #9edae5 +@c1: #1f77b4; +@c2: #aec7e8; +@c3: #ff7f0e; +@c4: #ffbb78; +@c5: #2ca02c; +@c6: #98df8a; +@c7: #d62728; +@c8: #ff9896; +@c9: #9467bd; +@c10: #c5b0d5; +@c11: #8c564b; +@c12: #c49c94; +@c13: #e377c2; +@c14: #f7b6d2; +@c15: #7f7f7f; +@c16: #c7c7c7; +@c17: #bcbd22; +@c18: #dbdb8d; +@c19: #17becf; +@c20: #9edae5; .pv-theme-grey { .up_pftv_navruler svg { @@ -106,101 +109,20 @@ d3.scale.category20() svg .up_pftv_variant { stroke: @c7; fill: @c7; } svg .up_pftv_compbias { stroke: @c8; fill: @c8; } svg .up_pftv_mutagen { stroke: @c9; fill: @c9; } + svg .up_pftv_conflict { stroke: @c10; fill: @c10; } + svg .up_pftv_non_cons { stroke: @c11; fill: @c11; } + svg .up_pftv_non_ter { stroke: @c12; fill: @c12; } + svg .up_pftv_unsure { stroke: @c13; fill: @c13; } + svg .up_pftv_non_std { stroke: @c14; fill: @c14; } + svg .up_pftv_topo_dom { stroke: @c15; fill: @c15; } + svg .up_pftv_transmem { stroke: @c16; fill: @c16; } + svg .up_pftv_intramem { stroke: @c17; fill: @c17; } + svg .up_pftv_unique { stroke: @c18; fill: @c18; } + svg .up_pftv_non_unique { stroke: @c19; fill: @c19; } svg .up_pftv_turn { stroke: @c_turn; fill: @c_turn; } svg .up_pftv_strand { stroke: @c_strand; fill: @c_strand; } svg .up_pftv_helix { stroke: @c_helix; fill: @c_helix; } - -} - -svg .up_pftv_binding { - stroke: #aec7e8; - fill: #aec7e8; } -svg .up_pftv_act_site { - stroke: #17becf; - fill: #17becf; -} - -svg .up_pftv_mod_res { - stroke: #0571AF; - fill: #0571AF; -} - -svg .up_pftv_lipid { - stroke: #d62728; - fill: #d62728; -} - -svg .up_pftv_carbohyd { - stroke: #aec7e8; - fill: #aec7e8; -} - -svg .up_pftv_variant { - stroke-width: 2; -} - -svg .up_pftv_compbias { - stroke: #0571AF; - fill: #0571AF; -} - -svg .up_pftv_mutagen { - stroke: #98df8a; - fill: #98df8a; -} - -svg .up_pftv_conflict { - stroke: #2ca02c; - fill: #2ca02c; -} - -svg .up_pftv_non_cons { - stroke: #ffbb78; - fill: #ffbb78; -} - -svg .up_pftv_non_ter { - stroke: #ff7f0e; - fill: #ff7f0e; -} - -svg .up_pftv_unsure { - stroke: #f7b6d2; - fill: #f7b6d2; -} - -svg .up_pftv_non_std { - stroke: #ffbb78; - fill: #ffbb78; -} - -svg .up_pftv_topo_dom { - stroke: #ff7f0e; - fill: #ff7f0e; -} - -svg .up_pftv_transmem { - stroke: #aec7e8; - fill: #aec7e8; -} - -svg .up_pftv_intramem { - stroke: #1f77b4; - fill: #1f77b4; -} - -svg .up_pftv_unique { - stroke: #f7b6d2; - fill: #f7b6d2; -} - -svg .up_pftv_non_unique { - stroke: #bcbd22; - fill: #bcbd22; -} - - From 6d1686ad6217cd82955abd9f35ec644288d14f9b Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 13:05:31 +0000 Subject: [PATCH 04/13] created from less --- style/fv-theme-grey.css | 373 ++++++++++++++++------------------------ 1 file changed, 147 insertions(+), 226 deletions(-) diff --git a/style/fv-theme-grey.css b/style/fv-theme-grey.css index 2acfb57..aa1fe21 100644 --- a/style/fv-theme-grey.css +++ b/style/fv-theme-grey.css @@ -1,282 +1,203 @@ - -.up_pftv_navruler svg { +/* +specific colours +*/ +/* +d3.scale.category20() +*/ +.pv-theme-grey .up_pftv_navruler svg { background-color: transparent; } - -.up_pftv_aaviewer .background, .up_pftv_viewport .background { +.pv-theme-grey .up_pftv_aaviewer .background, +.pv-theme-grey .up_pftv_viewport .background { fill: white; } - -.up_pftv_container text.domain-label { +.pv-theme-grey .up_pftv_container text.domain-label { font-size: 12px !important; } - -.up_pftv_container, .up_pftv_aaviewer text { +.pv-theme-grey .up_pftv_container, +.pv-theme-grey .up_pftv_aaviewer text { font-family: Helvetica, sans-serif; } - -.up_pftv_container .up_pftv_navruler .resize { +.pv-theme-grey .up_pftv_container .up_pftv_navruler .resize { font-size: 20px; fill: #999; fill-opacity: 1.0; } - -.up_pftv_category-container { +.pv-theme-grey .up_pftv_category-container { border-right: 1px solid #ddd; border-top: 1px solid #ddd; } - -.up_pftv_category { +.pv-theme-grey .up_pftv_category { border-bottom-color: #ddd; } - -.up_pftv_category-name { +.pv-theme-grey .up_pftv_category-name { background-color: #eee; - text-transform: uppercase; + text-transform: uppercase; } - -.up_pftv_category a:hover { - background-color: #eeeeee; +.pv-theme-grey .up_pftv_category a:hover { + background-color: #eeeeee; } - -.up_pftv_track-header { - background-color: #f3f3f3; +.pv-theme-grey .up_pftv_track-header { + background-color: #f3f3f3; text-align: right; - text-transform: uppercase; + text-transform: uppercase; } - -.up_pftv_track { +.pv-theme-grey .up_pftv_track { border-top: 1px solid #eee; } - -.up_pftv_disulphid { -} - - - -/* -d3.scale.category20() -#1f77b4 -#aec7e8 -#ff7f0e -#ffbb78 -#2ca02c -#98df8a -#d62728 -#ff9896 -#9467bd -#c5b0d5 -#8c564b -#c49c94 -#e377c2 -#f7b6d2 -#7f7f7f -#c7c7c7 -#bcbd22 -#dbdb8d -#17becf -#9edae5 -*/ - -/* Features */ -svg .up_pftv_chain { - stroke: #1f77b4; - fill: #1f77b4; -} - -svg .up_pftv_transit { - stroke: #aec7e8; - fill: #aec7e8; -} - -svg .up_pftv_init_met { - stroke: #ff7f0e; - fill: #ff7f0e; -} - -svg .up_pftv_propep { - stroke: #ffbb78; - fill: #ffbb78; -} - -svg .up_pftv_peptide { - stroke: #2ca02c; - fill: #2ca02c; -} - -svg .up_pftv_signal { - stroke: #98df8a; - fill: #98df8a; -} - -svg .up_pftv_turn { - stroke: #0571AF; - fill: #0571AF; -} - -svg .up_pftv_strand { - stroke: #FFCC00; - fill: #FFCC00; -} - -svg .up_pftv_helix { - stroke: #FF0066; - fill: #FF0066; -} - -svg .up_pftv_crosslnk { - stroke: #d62728; - fill: #d62728; -} - -svg .up_pftv_disulfid { - stroke: #ff9896; - fill: #ff9896; -} - -svg .up_pftv_region { - stroke: #9467bd; - fill: #9467bd; -} - -svg .up_pftv_coiled { - stroke: #9edae5; - fill: #9edae5; -} - -svg .up_pftv_motif { - stroke: #17becf; - fill: #17becf; -} - -svg .up_pftv_repeat { - stroke: #bcbd22; - fill: #bcbd22; -} - -svg .up_pftv_ca_bind { - stroke: #f7b6d2; - fill: #f7b6d2; -} - -svg .up_pftv_dna_bind { - stroke: #1f77b4; - fill: #1f77b4; -} - -svg .up_pftv_domain { - stroke: #aec7e8; - fill: #aec7e8; -} - -svg .up_pftv_zn_fing { - stroke: #ff7f0e; - fill: #ff7f0e; -} - -svg .up_pftv_np_bind { - stroke: #ffbb78; - fill: #ffbb78; -} - -svg .up_pftv_metal { - stroke: #f7b6d2; - fill: #f7b6d2; -} - -svg .up_pftv_site { +.pv-theme-grey svg .up_pftv_chain { stroke: #1f77b4; fill: #1f77b4; } - -svg .up_pftv_binding { +.pv-theme-grey svg .up_pftv_transit { stroke: #aec7e8; fill: #aec7e8; } - -svg .up_pftv_act_site { +.pv-theme-grey svg .up_pftv_init_met { + stroke: #ff7f0e; + fill: #ff7f0e; +} +.pv-theme-grey svg .up_pftv_propep { + stroke: #ffbb78; + fill: #ffbb78; +} +.pv-theme-grey svg .up_pftv_peptide { + stroke: #2ca02c; + fill: #2ca02c; +} +.pv-theme-grey svg .up_pftv_signal { + stroke: #98df8a; + fill: #98df8a; +} +.pv-theme-grey svg .up_pftv_crosslnk { + stroke: #c5b0d5; + fill: #c5b0d5; +} +.pv-theme-grey svg .up_pftv_disulfid { + stroke: #8c564b; + fill: #8c564b; +} +.pv-theme-grey svg .up_pftv_region { + stroke: #c49c94; + fill: #c49c94; +} +.pv-theme-grey svg .up_pftv_coiled { + stroke: #e377c2; + fill: #e377c2; +} +.pv-theme-grey svg .up_pftv_motif { + stroke: #f7b6d2; + fill: #f7b6d2; +} +.pv-theme-grey svg .up_pftv_repeat { + stroke: #7f7f7f; + fill: #7f7f7f; +} +.pv-theme-grey svg .up_pftv_ca_bind { + stroke: #c7c7c7; + fill: #c7c7c7; +} +.pv-theme-grey svg .up_pftv_dna_bind { + stroke: #bcbd22; + fill: #bcbd22; +} +.pv-theme-grey svg .up_pftv_domain { + stroke: #dbdb8d; + fill: #dbdb8d; +} +.pv-theme-grey svg .up_pftv_zn_fing { stroke: #17becf; fill: #17becf; } - -svg .up_pftv_mod_res { - stroke: #0571AF; - fill: #0571AF; +.pv-theme-grey svg .up_pftv_np_bind { + stroke: #9edae5; + fill: #9edae5; } - -svg .up_pftv_lipid { - stroke: #d62728; - fill: #d62728; +.pv-theme-grey svg .up_pftv_metal { + stroke: #1f77b4; + fill: #1f77b4; } - -svg .up_pftv_carbohyd { +.pv-theme-grey svg .up_pftv_binding { stroke: #aec7e8; fill: #aec7e8; } - -svg .up_pftv_variant { - stroke-width: 2; -} - -svg .up_pftv_compbias { - stroke: #0571AF; - fill: #0571AF; +.pv-theme-grey svg .up_pftv_act_site { + stroke: #ff7f0e; + fill: #ff7f0e; } - -svg .up_pftv_mutagen { - stroke: #98df8a; - fill: #98df8a; +.pv-theme-grey svg .up_pftv_mod_res { + stroke: #ffbb78; + fill: #ffbb78; } - -svg .up_pftv_conflict { +.pv-theme-grey svg .up_pftv_lipid { stroke: #2ca02c; fill: #2ca02c; } - -svg .up_pftv_non_cons { - stroke: #ffbb78; - fill: #ffbb78; +.pv-theme-grey svg .up_pftv_carbohyd { + stroke: #98df8a; + fill: #98df8a; } - -svg .up_pftv_non_ter { - stroke: #ff7f0e; - fill: #ff7f0e; +.pv-theme-grey svg .up_pftv_variant { + stroke: #d62728; + fill: #d62728; } - -svg .up_pftv_unsure { - stroke: #f7b6d2; - fill: #f7b6d2; +.pv-theme-grey svg .up_pftv_compbias { + stroke: #ff9896; + fill: #ff9896; } - -svg .up_pftv_non_std { - stroke: #ffbb78; - fill: #ffbb78; +.pv-theme-grey svg .up_pftv_mutagen { + stroke: #9467bd; + fill: #9467bd; } - -svg .up_pftv_topo_dom { - stroke: #ff7f0e; - fill: #ff7f0e; +.pv-theme-grey svg .up_pftv_conflict { + stroke: #c5b0d5; + fill: #c5b0d5; } - -svg .up_pftv_transmem { - stroke: #aec7e8; - fill: #aec7e8; +.pv-theme-grey svg .up_pftv_non_cons { + stroke: #8c564b; + fill: #8c564b; } - -svg .up_pftv_intramem { - stroke: #1f77b4; - fill: #1f77b4; +.pv-theme-grey svg .up_pftv_non_ter { + stroke: #c49c94; + fill: #c49c94; } - -svg .up_pftv_unique { +.pv-theme-grey svg .up_pftv_unsure { + stroke: #e377c2; + fill: #e377c2; +} +.pv-theme-grey svg .up_pftv_non_std { stroke: #f7b6d2; fill: #f7b6d2; } - -svg .up_pftv_non_unique { +.pv-theme-grey svg .up_pftv_topo_dom { + stroke: #7f7f7f; + fill: #7f7f7f; +} +.pv-theme-grey svg .up_pftv_transmem { + stroke: #c7c7c7; + fill: #c7c7c7; +} +.pv-theme-grey svg .up_pftv_intramem { stroke: #bcbd22; fill: #bcbd22; } - - - +.pv-theme-grey svg .up_pftv_unique { + stroke: #dbdb8d; + fill: #dbdb8d; +} +.pv-theme-grey svg .up_pftv_non_unique { + stroke: #17becf; + fill: #17becf; +} +.pv-theme-grey svg .up_pftv_turn { + stroke: #0571AF; + fill: #0571AF; +} +.pv-theme-grey svg .up_pftv_strand { + stroke: #FFCC00; + fill: #FFCC00; +} +.pv-theme-grey svg .up_pftv_helix { + stroke: #FF0066; + fill: #FF0066; +} From bc770a725447cd9be6b9dd171bea3cd814fa64eb Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 14:45:29 +0000 Subject: [PATCH 05/13] move less src files to specific location --- {style => less}/fv-theme-grey.less | 6 ++++++ 1 file changed, 6 insertions(+) rename {style => less}/fv-theme-grey.less (97%) diff --git a/style/fv-theme-grey.less b/less/fv-theme-grey.less similarity index 97% rename from style/fv-theme-grey.less rename to less/fv-theme-grey.less index f601b6a..90a8262 100644 --- a/style/fv-theme-grey.less +++ b/less/fv-theme-grey.less @@ -34,6 +34,12 @@ d3.scale.category20() background-color: transparent; } + .up_pftv_buttons { + border: 1px solid #eee; + border-radius: 3px 3px; + padding: 5px; + } + .up_pftv_aaviewer .background, .up_pftv_viewport .background { fill: white; } From abfbb97a9b9ca4da3323cf66d0d9bfe60dde74be Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 14:46:03 +0000 Subject: [PATCH 06/13] add snippet to test theme --- snippets/with_theme.js | 24 ++++++++++++++++++++++++ snippets/with_theme.json | 3 +++ 2 files changed, 27 insertions(+) create mode 100644 snippets/with_theme.js create mode 100644 snippets/with_theme.json diff --git a/snippets/with_theme.js b/snippets/with_theme.js new file mode 100644 index 0000000..24d2bbd --- /dev/null +++ b/snippets/with_theme.js @@ -0,0 +1,24 @@ + +var app = require("ProtVista"); + +var themeClassName = 'pv-theme-grey'; + +var body = d3.select("body"); + +// add container without theme +body.append("h2").text("No Theme") +body.append("div") + .attr("id", "app-no-theme") + +// add container with theme +body.append("h2").text("With Theme") +body.append("div") + .attr("id", "app-with-theme") + .attr("class", themeClassName); + +// app instance without theme +var app1 = new app({el: document.getElementById('app-no-theme'), text: 'biojs', uniprotacc : 'P05067'}); + +// app instance with theme +var app2 = new app({el: document.getElementById('app-with-theme'), text: 'biojs', uniprotacc : 'P05067'}); + diff --git a/snippets/with_theme.json b/snippets/with_theme.json new file mode 100644 index 0000000..378a5e2 --- /dev/null +++ b/snippets/with_theme.json @@ -0,0 +1,3 @@ +{ + "css": ["style/fv-theme-grey.css"] +} \ No newline at end of file From 4e348124145cda15d1eb6652d093803f873df703 Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 18:41:17 +0000 Subject: [PATCH 07/13] Integrate LESS compiler to build CSS This should simplify some of the duplication involved in specifying colours and implementing themes. --- gulpfile.js | 30 +- less/fv-theme-grey.less | 145 ++++++---- less/includes/defaults.less | 86 ++++++ less/main.less | 538 ++++++++++++++++++++++++++++++++++++ package.json | 1 + style/README.md | 15 + 6 files changed, 758 insertions(+), 57 deletions(-) create mode 100644 less/includes/defaults.less create mode 100644 less/main.less create mode 100644 style/README.md diff --git a/gulpfile.js b/gulpfile.js index 931292a..68de15b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,6 +20,7 @@ var watchify = require('watchify'); var uglify = require('gulp-uglify'); var minifyCss = require('gulp-minify-css'); var concat = require('gulp-concat'); +var less = require('gulp-less'); // testing var mocha = require('gulp-mocha'); @@ -120,7 +121,7 @@ gulp.task('build-test',['init'], function() { }); gulp.task('test-watch', function() { - gulp.watch(['./src/**/*.js','./lib/**/*.js', './test/**/*.js', './style/main.css'], ['test']); + gulp.watch(['./src/**/*.js','./lib/**/*.js', './test/**/*.js', './less/**/*.less', './style/main.css'], ['test']); }); //build tasks @@ -136,17 +137,34 @@ gulp.task('init', ['clean'], function() { }); }); +gulp.task('compile-css', ['init'], function() { + return gulp.src("./less/*.less") + .pipe(less({ + paths: [ path.join(__dirname, 'less', 'includes') ] + })) + .pipe(gulp.dest('./style/')); +}); + gulp.task('copy-resources', ['init'], function() { gulp.src(["./font/**/*.*"]) .pipe(gulp.dest(buildDir + '/font/')); - return gulp.src("./style/*.css") - .pipe(minifyCss({compatibility: 'ie8'})) - .pipe(concat('main.css')) - .pipe(gulp.dest(buildDir + '/css/')); +}); + +gulp.task('build-css', ['copy-resources', 'compile-css'], function() { + return gulp.src(["./style/main.css", "./style/fontello.css"]) + .pipe(minifyCss({compatibility: 'ie8'})) + .pipe(concat('main.css')) + .pipe(gulp.dest(buildDir + '/css/')); +}); + +gulp.task('build-css-theme', ['compile-css'], function() { + return gulp.src(["./style/*theme*.css"]) + .pipe(minifyCss({compatibility: 'ie8'})) + .pipe(gulp.dest(buildDir + '/css/')); }); // browserify debug -gulp.task('build-browser',['copy-resources'], function() { +gulp.task('build-browser',['init', 'build-css', 'build-css-theme'], function() { var b = browserify({debug: true,hasExports: true}); exposeBundles(b); return b.bundle() diff --git a/less/fv-theme-grey.less b/less/fv-theme-grey.less index 90a8262..431fdbd 100644 --- a/less/fv-theme-grey.less +++ b/less/fv-theme-grey.less @@ -1,9 +1,4 @@ -/* -specific colours -*/ -@c_helix: #FF0066; -@c_strand: #FFCC00; -@c_turn: #0571AF; +@import "includes/defaults"; /* d3.scale.category20() @@ -29,15 +24,67 @@ d3.scale.category20() @c19: #17becf; @c20: #9edae5; +@c_chain: @c1; +@c_transit: @c2; +@c_init_met: @c3; +@c_propep: @c4; +@c_peptide: @c5; +@c_signal: @c6; +@c_turn: @c7; +@c_strand: @c8; +@c_helix: @c9; +@c_crosslnk: @c10; +@c_disulfid: @c11; +@c_region: @c12; +@c_coiled: @c13; +@c_motif: @c14; +@c_repeat: @c15; +@c_ca_bind: @c16; +@c_dna_bind: @c17; +@c_domain: @c18; +@c_zn_fing: @c19; +@c_np_bind: @c20; +@c_metal: @c1; +@c_site: @c2; +@c_binding: @c3; +@c_act_site: @c4; +@c_mod_res: @c5; +@c_lipid: @c6; +@c_carbohyd: @c7; +@c_compbias: @c8; +@c_mutagen: @c9; +@c_conflict: @c10; +@c_non_cons: @c11; +@c_non_ter: @c12; +@c_unsure: @c13; +@c_non_std: @c14; +@c_topo_dom: @c15; +@c_transmem: @c16; +@c_intramem: @c17; + .pv-theme-grey { .up_pftv_navruler svg { background-color: transparent; } .up_pftv_buttons { - border: 1px solid #eee; + padding: 0; + margin: 0; + width: 100%; + text-align: center; + } + + .up_pftv_buttons span { + background-color: #eee; + border: 1px solid #ccc; border-radius: 3px 3px; - padding: 5px; + padding: 2px; + margin: 2px; + } + + .up_pftv_buttons span:hover { + background-color: #fff; + border-color: #999; } .up_pftv_aaviewer .background, .up_pftv_viewport .background { @@ -64,7 +111,8 @@ d3.scale.category20() } .up_pftv_category { - border-bottom-color: #ddd; + margin-bottom: 0; + border-bottom: 1px solid #ddd; } .up_pftv_category-name { @@ -73,62 +121,57 @@ d3.scale.category20() } .up_pftv_category a:hover { - background-color: #eeeeee; + background-color: #ddd; } .up_pftv_track-header { background-color: #f3f3f3; text-align: right; - text-transform: uppercase; + text-transform: uppercase; + font-size: 12px; + font-style: italic; } .up_pftv_track { border-top: 1px solid #eee; } + .up_pftv_navruler path.trapezoid { + } + + .up_pftv_container .up_pftv_navruler .axis .tick, .up_pftv_container .up_pftv_navruler .axis .domain { + stroke: black; + } + .up_pftv_container .up_pftv_navruler .axis text { + stroke: none; + fill: black; + } + + .up_pftv_navruler .extent { + fill: steelblue; + stroke: none; + } + + .up_pftv_navruler .handle { + fill: #eee; + fill-opacity: 1.0; + stroke: #999; + stroke-opacity: 1.0; + stroke-width: 1; + } + + .up_pftv_navruler text.domain-label { + fill: black; + } + + .up_pftv_navruler .handle:hover { + fill: #ccc; + } + .up_pftv_disulphid { } - svg .up_pftv_chain { stroke: @c1; fill: @c1; } - svg .up_pftv_transit { stroke: @c2; fill: @c2; } - svg .up_pftv_init_met { stroke: @c3; fill: @c3; } - svg .up_pftv_propep { stroke: @c4; fill: @c4; } - svg .up_pftv_peptide { stroke: @c5; fill: @c5; } - svg .up_pftv_signal { stroke: @c6; fill: @c6; } - svg .up_pftv_crosslnk { stroke: @c10; fill: @c10; } - svg .up_pftv_disulfid { stroke: @c11; fill: @c11; } - svg .up_pftv_region { stroke: @c12; fill: @c12; } - svg .up_pftv_coiled { stroke: @c13; fill: @c13; } - svg .up_pftv_motif { stroke: @c14; fill: @c14; } - svg .up_pftv_repeat { stroke: @c15; fill: @c15; } - svg .up_pftv_ca_bind { stroke: @c16; fill: @c16; } - svg .up_pftv_dna_bind { stroke: @c17; fill: @c17; } - svg .up_pftv_domain { stroke: @c18; fill: @c18; } - svg .up_pftv_zn_fing { stroke: @c19; fill: @c19; } - svg .up_pftv_np_bind { stroke: @c20; fill: @c20; } - svg .up_pftv_metal { stroke: @c1; fill: @c1; } - svg .up_pftv_binding { stroke: @c2; fill: @c2; } - svg .up_pftv_act_site { stroke: @c3; fill: @c3; } - svg .up_pftv_mod_res { stroke: @c4; fill: @c4; } - svg .up_pftv_lipid { stroke: @c5; fill: @c5; } - svg .up_pftv_carbohyd { stroke: @c6; fill: @c6; } - svg .up_pftv_variant { stroke: @c7; fill: @c7; } - svg .up_pftv_compbias { stroke: @c8; fill: @c8; } - svg .up_pftv_mutagen { stroke: @c9; fill: @c9; } - svg .up_pftv_conflict { stroke: @c10; fill: @c10; } - svg .up_pftv_non_cons { stroke: @c11; fill: @c11; } - svg .up_pftv_non_ter { stroke: @c12; fill: @c12; } - svg .up_pftv_unsure { stroke: @c13; fill: @c13; } - svg .up_pftv_non_std { stroke: @c14; fill: @c14; } - svg .up_pftv_topo_dom { stroke: @c15; fill: @c15; } - svg .up_pftv_transmem { stroke: @c16; fill: @c16; } - svg .up_pftv_intramem { stroke: @c17; fill: @c17; } - svg .up_pftv_unique { stroke: @c18; fill: @c18; } - svg .up_pftv_non_unique { stroke: @c19; fill: @c19; } - - svg .up_pftv_turn { stroke: @c_turn; fill: @c_turn; } - svg .up_pftv_strand { stroke: @c_strand; fill: @c_strand; } - svg .up_pftv_helix { stroke: @c_helix; fill: @c_helix; } + @svg_features(); } diff --git a/less/includes/defaults.less b/less/includes/defaults.less new file mode 100644 index 0000000..88aa553 --- /dev/null +++ b/less/includes/defaults.less @@ -0,0 +1,86 @@ +@c_chain: #CC9933; +@c_transit: #009966; +@c_init_met: #996633; +@c_propep: #99CCCC; +@c_peptide: #006699; +@c_signal: #CC0033; +@c_turn: #0571AF; +@c_strand: #FFCC00; +@c_helix: #FF0066; +@c_crosslnk: #FF6600; +@c_disulfid: #23B14D; +@c_region: #B33E00; +@c_coiled: #006699; +@c_motif: #402060; +@c_repeat: #9900FF; +@c_ca_bind: #FF3399; +@c_dna_bind: #009933; +@c_domain: #9999FF; +@c_zn_fing: #990066; +@c_np_bind: #FF9900; +@c_metal: #009900; +@c_site: #660033; +@c_binding: #006699; +@c_act_site: #FF6666; +@c_mod_res: #000066; +@c_lipid: #99CC33; +@c_carbohyd: #CC3366; +@c_compbias: #FF3366; +@c_mutagen: #FF9900; +@c_conflict: #6633CC; +@c_non_cons: #FF0033; +@c_non_ter: #339933; +@c_unsure: #33FF00; +@c_non_std: #330066; +@c_topo_dom: #CC0000; +@c_transmem: #CC00CC; +@c_intramem: #0000CC; + +@c_variant: #fc3133; +@c_unique: #fc3133; +@c_non_unique: #8585fc; + +/* Features */ +@svg_features: { + svg .up_pftv_chain { stroke: @c_chain; fill: @c_chain; } + svg .up_pftv_transit { stroke: @c_transit; fill: @c_transit; } + svg .up_pftv_init_met { stroke: @c_init_met; fill: @c_init_met; } + svg .up_pftv_propep { stroke: @c_propep; fill: @c_propep; } + svg .up_pftv_peptide { stroke: @c_peptide; fill: @c_peptide; } + svg .up_pftv_signal { stroke: @c_signal; fill: @c_signal; } + svg .up_pftv_crosslnk { stroke: @c_crosslnk; fill: @c_crosslnk; } + svg .up_pftv_disulfid { stroke: @c_disulfid; fill: @c_disulfid; } + svg .up_pftv_region { stroke: @c_region; fill: @c_region; } + svg .up_pftv_coiled { stroke: @c_coiled; fill: @c_coiled; } + svg .up_pftv_motif { stroke: @c_motif; fill: @c_motif; } + svg .up_pftv_repeat { stroke: @c_repeat; fill: @c_repeat; } + svg .up_pftv_ca_bind { stroke: @c_ca_bind; fill: @c_ca_bind; } + svg .up_pftv_dna_bind { stroke: @c_dna_bind; fill: @c_dna_bind; } + svg .up_pftv_domain { stroke: @c_domain; fill: @c_domain; } + svg .up_pftv_zn_fing { stroke: @c_zn_fing; fill: @c_zn_fing; } + svg .up_pftv_np_bind { stroke: @c_np_bind; fill: @c_np_bind; } + svg .up_pftv_metal { stroke: @c_metal; fill: @c_metal; } + svg .up_pftv_binding { stroke: @c_binding; fill: @c_binding; } + svg .up_pftv_act_site { stroke: @c_act_site; fill: @c_act_site; } + svg .up_pftv_mod_res { stroke: @c_mod_res; fill: @c_mod_res; } + svg .up_pftv_lipid { stroke: @c_lipid; fill: @c_lipid; } + svg .up_pftv_carbohyd { stroke: @c_carbohyd; fill: @c_carbohyd; } + svg .up_pftv_variant { stroke: @c_variant; fill: @c_variant; } + svg .up_pftv_compbias { stroke: @c_compbias; fill: @c_compbias; } + svg .up_pftv_mutagen { stroke: @c_mutagen; fill: @c_mutagen; } + svg .up_pftv_conflict { stroke: @c_conflict; fill: @c_conflict; } + svg .up_pftv_non_cons { stroke: @c_non_cons; fill: @c_non_cons; } + svg .up_pftv_non_ter { stroke: @c_non_ter; fill: @c_non_ter; } + svg .up_pftv_unsure { stroke: @c_unsure; fill: @c_unsure; } + svg .up_pftv_non_std { stroke: @c_non_std; fill: @c_non_std; } + svg .up_pftv_topo_dom { stroke: @c_topo_dom; fill: @c_topo_dom; } + svg .up_pftv_transmem { stroke: @c_transmem; fill: @c_transmem; } + svg .up_pftv_intramem { stroke: @c_intramem; fill: @c_intramem; } + svg .up_pftv_unique { stroke: @c_unique; fill: @c_unique; } + svg .up_pftv_non_unique { stroke: @c_non_unique; fill: @c_non_unique; } + + svg .up_pftv_turn { stroke: @c_turn; fill: @c_turn; } + svg .up_pftv_strand { stroke: @c_strand; fill: @c_strand; } + svg .up_pftv_helix { stroke: @c_helix; fill: @c_helix; } +}; + diff --git a/less/main.less b/less/main.less new file mode 100644 index 0000000..3b95549 --- /dev/null +++ b/less/main.less @@ -0,0 +1,538 @@ +@import "includes/defaults"; + +.up_pftv_container svg { + overflow: hidden; +} + +.up_pftv_container rect { + shape-rendering: crispEdges; +} + +.up_pftv_buttons { + display: inline-block; + padding: 0 .5em 0 .5em; + width: 180px; + text-align: right; + vertical-align: bottom; + position: relative; +} + +.up_pftv_buttons a { + color: inherit; + text-decoration: none; +} +.up_pftv_buttons > span { + cursor: pointer; + font-size: 18px; + opacity: 0.8; +} + +.up_pftv_buttons > span:hover { + opacity: 1; +} + +.up_pftv_category-container { + position: relative; + border-right: 2px solid #b2f5ff; + border-top: 1px solid #b2f5ff; +} + +.up_pftv_category-container svg { + cursor: move; +} + +.up_pftv_container { + position: relative; + width: 960px; + color:#557071 !important; + font-family: 'Helvetica neue', Helvetica, Arial, sans-serif !important; + font-size: 13px !important; + line-height: 1.5 !important; +} + +.up_pftv_row { + width: 100%; + clear: both; + padding: 0; +} +.up_pftv_mainpanel { + margin-left: 200px; + padding: 0; +} +.up_pftv_leftpanel { + float: left; + width: 200px; + padding: 0; +} + +.up_pftv_category-name { + padding: 0; +} + +.up_pftv_container a { + color:#557071 !important; + border:none !important; +} + +.up_pftv_container h4 { + font-size: 1em !important; + font-weight: 500 !important; + border-bottom: 1px solid #cacaca; + margin-bottom: .7em; +} + +.up_pftv_keepWithPrevious { + margin-top: 0px; +} + +.up_ptfv_pp-container { + display: inline-block; + margin: 5em 0 0 0.5em; + vertical-align: top; +} + +.up_pftv_navruler svg { + vertical-align: bottom; + font-size: 14px; +} + +.up_pftv_aaviewer .background, .up_pftv_viewport .background { + fill: white; +} + +/*Category and type tracks*/ +.up_pftv_category { + margin-bottom: .1em; + border-bottom: .1em solid #b2f5ff; +} + +.up_pftv_category-name, .up_pftv_track-header { + font-weight: 400; + vertical-align: bottom; + display: block; + border: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + height: 40px; + line-height: 40px; + padding: 0 5px; +} + +.up_pftv_category-name { + background-color: #b2f5ff; +} +.up_pftv_track-header { +} + +.up_pftv_category a:hover { + background-color: #80EEFF; + text-decoration: none; +} + +.up_pftv_track-header { + background-color: #d9faff; +} + +.up_pftv_navruler .extent { + fill: #ccc; + stroke: none; +} + +.up_pftv_navruler .handle { + fill: #999; + fill-opacity: 1.0; + stroke: #999; + stroke-opacity: 1.0; + stroke-width: 1; +} + +.up_pftv_category-viewer, .up_pftv_track, .up_pftv_aaviewer { + position: relative; + display: inline-block; + vertical-align: bottom; + width: 760px; +} + +.up_pftv_category-viewer svg, .up_pftv_track svg, .up_pftv_aaviewer svg { + vertical-align: bottom; +} + +.up_pftv_category-name { + cursor: pointer; +} + +.up_pftv_track-header-container { + vertical-align: top; + margin-top: 1px; + background-color: #D9FAFF; +} + +.up_pftv_track { + border-top: 1px #b2f5ff solid; +} + +.up_pftv_category-name.up_pftv_arrow-right:before { + content: ' '; + display: inline-block; + width: 0; + height: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #333; + margin-right: 5px; +} + +.up_pftv_category-name.up_pftv_arrow-down:before { + content: ' '; + display: inline-block; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #333; + margin-right: 5px; +} + +.up_pftv_category-disabled { + opacity: 0; + display: none; +} + +/* Ruler */ +.up_pftv_container .axis { + font-size: 12px; +} + +.up_pftv_container .axis line, .up_pftv_container .axis path { + fill: none; + stroke: #666; +} + +.up_pftv_container .axis text { + fill: #666; +} + +.up_pftv_navruler { pointer-events: none } + +.up_pftv_shadow, .up_pftv_amino_acid_selector { + fill: #FFE999; + fill-opacity: 1; +} + +.fv-zoom-gradient-start { + stop-color: #eee; + stop-opacity: 1.0; +} +.fv-zoom-gradient-end { + stop-color: #eee; + stop-opacity: 1.0; +} + +.up_pftv_aaviewer text { + font-family: "Lucida Console", Monaco, monospace; + font-size: 12px; +} + +.up_pftv_feature { + cursor: pointer; + fill-opacity: .6; +} + +.up_pftv_feature:hover { + fill-opacity: .9; +} + +.up_pftv_activeFeature { + fill-opacity: .9 !important; +} + +.up_pftv_variation-chart .up_pftv_block-area { + fill: #ccc; +} + +.up_pftv_variation-chart .up_pftv_block-area:hover { + fill: #999; + cursor: pointer; +} + +.up_pftv_variation-chart .up_pftv_line { + stroke: #999; + stroke-width: 1px; +} + +.up_pftv_variation-chart .up_pftv_line:hover, .up_pftv_variation-chart .up_pftv_line:hover + .up_pftv_block-area { + stroke: darkslategrey; + cursor: pointer; +} + +/* Dialogs */ + +.up_pftv_dialog-container { + margin:0;padding:0; +} + +.up_pftv_dialog-container li a { + display: block; + line-height: 2em; + padding: 0 .2em; + cursor: pointer; +} + +.up_pftv_legend { + vertical-align: sub; + width: 1.5em; + display: inline-block; + height: 1em; + border-radius: .4em; + border: 2px solid #ABABAB; + margin-right: .5em; +} + +.up_pftv_legend_double { + height: 3em !important; +} + +.up_pftv_legend_text { + font-size: 12px; + line-height: 2em; + display: inline-block; + vertical-align: top; +} + +/* Close button */ +.up_pftv_tooltip-close { + color: #FFF; + background-color: #333333; + position: absolute; + top: -10px; + right: -10px; + cursor: pointer; + border-radius: 20px; + width: 20px; + height: 20px; + font-size: 14px !important; + text-align: center; + border: 1px solid #fff; +} + +/* Tooltip */ +.up_pftv_tooltip-pin-container { + display: inline-block; + float: left; + padding: 4px 10px 0 0; +} + +.up_pftv_iconContainer-unpinned { + background-color: lightgrey !important; + color: black !important; +} + +.up_pftv_iconContainer-unpinned:hover { + background-color: grey !important; +} + +.up_pftv_iconContainer-pinned { + background-color: black !important; + color: white !important; +} + +.up_pftv_tooltip-container, .up_pftv_popupDialog-container { + z-index: 50000; + position: absolute; + opacity: 0; + display: none; +} + +.up_pftv_tooltip-container { + min-width: 220px; +} + +.up_pftv_popupDialog-container { + border: 1px solid #557071; + background-color: #ffffff; + padding: 0.5em; + min-width: 210px; + text-align: left; + font-size: 13px; +} + +.up_pftv_tooltip-container table { + font-size: 13px; + border: 2px solid #CCC; + border-spacing: 0; + border-collapse: collapse; + background-color: #FFF; + -webkit-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.1); + box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.1); + width: 100%; +} + +.up_pftv_tooltip-container table th { + text-transform: capitalize; + font-weight: 400; + white-space: nowrap; + letter-spacing: .05em; + font-size: 1.1em; + background-color: #595959; + line-height: 2em; + padding: 0 .7em; + color: #FFF; + text-align: center; +} + +.up_pftv_tooltip-container table a { + text-decoration: underline !important; +} + +.up_pftv_tooltip-container table td { + padding: .4em; + margin: 0; + border: 1px solid #CCC; +} + +.up_pftv_tooltip-container td:first-child { + font-weight: bold; +} + +.up_pftv_tooltip-container .up_pftv_evidence-col { + background-color: #FFF; +} + +.up_pftv_tooltip-container .up_pftv_evidence-source { + background-color: #FFF; +} + +.up_pftv_tooltip-container .up_pftv_section { + background-color: #B3B3B3; + text-align: center; +} + +.up_pftv_tooltip-container .up_pftv_subsection { + color: black; +} + +@svg_features(); + +svg .up_pftv_variant { + stroke-width: 2; +} + +svg .up_pftv_unique { + stroke: #fc3133; + fill: #fd5a5d; +} + +svg .up_pftv_non_unique { + stroke: #8585fc; + fill: #5a60fb; +} + + +/* Variation */ +.up_pftv_variants-svg .axis path { + display: none; +} + +.up_pftv_variants-svg .axis text { + font-size: 10px; + font-family: 'Helvetica neue', Helvetica, Arial, sans-serif; +} + +.up_pftv_variants-svg .variation-y.axis line { + stroke: #ccc; + opacity: .4; +} + +.up_pftv_variants-svg .variation-x.axis line { + stroke: #000; +} + +.up_pftv_variants-svg circle.main-seq { + fill: #fff; + stroke: steelblue; + stroke-width: 1.5px; + /*display: none;*/ +} + +.up_pftv_variants-svg .main-sequence { + fill: green; +} + +.up_pftv_variants-svg circle { + cursor: pointer; + fill-opacity: .6; +} + +.up_pftv_variants-svg .up_pftv_variant_hidden { + cursor: default; + opacity: 0; +} + +.up_pftv_variants-svg circle:hover { + fill-opacity: 0.9; +} + +.up_pftv_dialog_checkboxLabel { + opacity: 0.9; +} + +.up_pftv_dialog_checkboxLabel:hover { + cursor: pointer; + opacity: 1; +} + +.up_pftv_message_wrapper { + margin: .7em; +} + +/*Taken from http://www.karimnassar.com/code/web/css-icons/*/ +.up_pftv_icon, .up_pftv_icon::before, .up_pftv_icon::after +{ + position: relative; + padding: 0; + margin: 0; +} + +.up_pftv_icon { + font-size: 20px; + color: transparent; +} +.up_pftv_icon.up_pftv_warning { + display: inline-block; + top: 0.225em; + width: 1.15em; + height: 1.15em; + overflow: hidden; + border: none; + background-color: transparent; + border-radius: 0.625em; +} + +.up_pftv_icon.up_pftv_warning::before { + content: ""; + display: block; + top: -0.08em; + left: 0.0em; + position: absolute; + border: transparent 0.6em solid; + border-bottom-color: #fd3; + border-bottom-width: 1em; + border-top-width: 0; + box-shadow: #999 0 1px 1px; +} + +.up_pftv_icon.up_pftv_warning::after { + display: block; + position: absolute; + top: 0.3em; + left: 0; + width: 100%; + padding: 0 1px; + text-align: center; + content: "!"; + font-size: 0.65em; + font-weight: bold; + color: #333; +} diff --git a/package.json b/package.json index 1e64d70..c644dc9 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "gulp-gzip": "0.0.8", "gulp-istanbul": "^0.10.0", "gulp-jshint": "^1.8.4", + "gulp-less": "^3.0.0", "gulp-minify-css": "^1.2.0", "gulp-mocha": "^1.0.0", "gulp-mocha-phantomjs": "^0.5.0", diff --git a/style/README.md b/style/README.md new file mode 100644 index 0000000..483a226 --- /dev/null +++ b/style/README.md @@ -0,0 +1,15 @@ +# WARNING + +The .css files in this directory are compiled from the LESS source files. Any changes here will be overwritten. + +If you want to make changes then edit the approrpiate LESS file: + + ./less/ + +Then rebuild: + + $ gulp build + +The final, minified CSS files get written out to: + + ./build/css/ \ No newline at end of file From 50373b78be6f074b04974e34e5b6ac9a7e1aa92c Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 18:47:08 +0000 Subject: [PATCH 08/13] fix sniper examples The code in the sniper examples expects d3 and jQuery to be available. This makes the locally installed versions available. There might be better alternatives but this seems better than it not working at all. --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index c644dc9..d86d925 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,9 @@ }, "sniper": { "js": [ - "/build/protvista.js" + "/build/protvista.js", + "/node_modules/d3/d3.js", + "/node_modules/jquery/dist/jquery.min.js" ], "css": [ "/build/css/main.css" From 5b183685da741df02cb6000d48ebfe096972cdcc Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 18:50:20 +0000 Subject: [PATCH 09/13] correct path of theme --- snippets/with_theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/with_theme.json b/snippets/with_theme.json index 378a5e2..0abd6a7 100644 --- a/snippets/with_theme.json +++ b/snippets/with_theme.json @@ -1,3 +1,3 @@ { - "css": ["style/fv-theme-grey.css"] + "css": ["build/css/fv-theme-grey.css"] } \ No newline at end of file From b6a6336586dcfe7d917fb634db66d37ea2ca103c Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 18:51:56 +0000 Subject: [PATCH 10/13] remove duplicate variant graph This seems to plot the 'stroke', then separately plot the 'fill'. The duplication doesn't seem necessary and the result is confusing on mouseovers, etc. This change combines the CSS classes to achieve a similar style. Also, this changes the interpolation from linear to step since that seems more appropriate for discrete data points? --- src/VariantCategoryViewer.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/VariantCategoryViewer.js b/src/VariantCategoryViewer.js index b4e1422..e0cbf91 100644 --- a/src/VariantCategoryViewer.js +++ b/src/VariantCategoryViewer.js @@ -34,22 +34,14 @@ var VariantCategoryViewer = function(category) { .y(function(d) { return varYScale(d); }) - .interpolate('linear'); + .interpolate('step-after'); this.init = function () { var varCatViewer = this; + varCatViewer.varChart.append("path") .data(varCatViewer.features) - .attr("class","up_pftv_block-area") - .attr("d",line(varCatViewer.variationCountArray)) - .on('click', function(){ - category.toggle(); - }) - .append('title').text('Number of variants per position'); - - varCatViewer.varChart.append("path") - .data(varCatViewer.features) - .attr("class","up_pftv_line") + .attr("class","up_pftv_block-area up_pftv_line") .attr("d",line(varCatViewer.variationCountArray)) .on('click', function(){ category.toggle(); From 1ffebd55d0b693045dcce06bce513b88d1490f0a Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 18:59:04 +0000 Subject: [PATCH 11/13] fix minor lint warnings --- src/DownloadDataLoader.js | 2 +- src/DownloadDialog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/DownloadDataLoader.js b/src/DownloadDataLoader.js index fd95048..c719e78 100644 --- a/src/DownloadDataLoader.js +++ b/src/DownloadDataLoader.js @@ -57,7 +57,7 @@ var DownloadDataLoader = function() { zip.generateAsync({type:"base64"}).then(function (base64) { window.location = "data:application/zip;base64," + base64; }, function (err) { - console.log('Error: ', err) + console.log('Error: ', err); }); } }); diff --git a/src/DownloadDialog.js b/src/DownloadDialog.js index 3399fd2..f9b71e1 100644 --- a/src/DownloadDialog.js +++ b/src/DownloadDialog.js @@ -10,7 +10,7 @@ var Constants = require("./Constants"); var DownloadDataLoader = require("./DownloadDataLoader"); var populateDialog = function (fv, wrapper) { - var isSafari = navigator.vendor.indexOf("Apple")==0 && /\sSafari\//.test(navigator.userAgent); + var isSafari = navigator.vendor.indexOf("Apple") === 0 && /\sSafari\//.test(navigator.userAgent); var selected = true; var allFormats = Constants.getExternalDataSource() === undefined From a32825508e1006a4f8f6ca6ca9e0449f461559f9 Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 19:02:08 +0000 Subject: [PATCH 12/13] use left/main panels to properly align columns there was some inconsistency in how the left column (categories) and the main column (header and features) were applied. It meant that the column edges didn't line up perfectly. This simplifies things by using a 'leftpanel' and 'mainpanel' container, the margins of which are only specified in a single place in the CSS. Also, the contents should now be able to happily fill up to 100% width of the container which may help when attempting to allow flexibility in changing the width. --- src/CategoryFactory.js | 11 +++++++++-- src/FeaturesViewer.js | 30 +++++++++++++++++++----------- src/TrackFactory.js | 9 ++++++--- 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/src/CategoryFactory.js b/src/CategoryFactory.js index 3ddef37..dc46e24 100644 --- a/src/CategoryFactory.js +++ b/src/CategoryFactory.js @@ -24,8 +24,11 @@ var Category = function(name, data, catInfo, fv, container) { category.categoryViewer = undefined; category.categoryContainer = container.append('div') - .attr('class', 'up_pftv_category'); - category.header = category.categoryContainer.append('a') + .attr('class', 'up_pftv_row up_pftv_category'); + + category.header = category.categoryContainer.append('div') + .attr('class', 'up_pftv_leftpanel') + .append('a') .attr('class', 'up_pftv_category-name up_pftv_arrow-right') .attr('title', category.name) .text(catInfo.label) @@ -35,9 +38,13 @@ var Category = function(name, data, catInfo, fv, container) { }); category.viewerContainer = category.categoryContainer.append('div') + .attr('class', 'up_pftv_mainpanel') + .append('div') .attr('class', 'up_pftv_category-viewer'); category.tracksContainer = category.categoryContainer.append('div') + .attr('class', 'up_pftv_row') + .append('div') .attr('class', 'up_pftv_category-tracks') .style('display','none'); }; diff --git a/src/FeaturesViewer.js b/src/FeaturesViewer.js index fbf2a10..3bcc627 100644 --- a/src/FeaturesViewer.js +++ b/src/FeaturesViewer.js @@ -617,19 +617,19 @@ FeaturesViewer.prototype.initLayout = function(opts, d) { closeTooltipAndPopup(fv); }); - fv.header = fvContainer.append('div'); + fv.header = fvContainer.append('div') + .classed('up_pftv_header up_pftv_row', true); - fv.container = fvContainer - .append('div') - .attr('class', 'up_pftv_category-container'); + fv.container = fvContainer.append('div') + .classed('up_pftv_category-container', true); fv.ontheFlyContainer = fv.container.append('div').classed('up_pftv_category_on_the_fly', true); _.each(Constants.getCategoryNamesInOrder(), function(catInfo) { - fv.container.append('div').classed('up_pftv_category_' + catInfo.name, true); + fv.container.append('div').classed('up_pftv_category_row up_pftv_category_' + catInfo.name, true); }); - fv.footer = fvContainer.append('div').attr('class','bottom-aa-container'); + fv.footer = fvContainer.append('div').attr('class', 'up_pftv_footer up_pftv_row'); }; FeaturesViewer.prototype.loadZoom = function(d) { @@ -640,14 +640,22 @@ FeaturesViewer.prototype.loadZoom = function(d) { fv.xScale = d3.scale.linear() .domain([1, d.sequence.length + 1]) - .range([fv.padding.left, fv.width - fv.padding.right]); + .range([fv.margin.left, fv.width - fv.margin.right]); + + fv.xZoomScale = d3.scale.linear() + .domain([1, d.sequence.length + 1]) + .range([fv.zoomMargin.left, fv.width - fv.zoomMargin.right]); + + var buttonsContainer = fv.header.append('div').classed('up_pftv_leftpanel', true); + var scaleContainer = fv.header.append('div').classed('up_pftv_mainpanel', true); + var bottomScaleContainer = fv.footer.append('div').classed('up_pftv_mainpanel', true); - fv.viewport = createNavRuler(fv, fv.header); - createButtons(fv, d, fv.header); - fv.aaViewer = createAAViewer(fv, fv.header, d.sequence); + fv.viewport = createNavRuler(fv, scaleContainer); + createButtons(fv, d, buttonsContainer); + fv.aaViewer = createAAViewer(fv, scaleContainer, d.sequence); fv.zoom = createZoom(fv); - fv.aaViewer2 = createAAViewer(fv, fv.footer, d.sequence); + fv.aaViewer2 = createAAViewer(fv, bottomScaleContainer, d.sequence); updateViewportFromChart(fv); updateZoomFromChart(fv); }; diff --git a/src/TrackFactory.js b/src/TrackFactory.js index 9bccf09..76ae0bf 100644 --- a/src/TrackFactory.js +++ b/src/TrackFactory.js @@ -19,10 +19,13 @@ var Track = function(typeFeatures, category) { track.category = category; track.id = track.type + '_track'; - track.titleContainer = category.tracksContainer.append('div').style('display', 'inline-block'); + track.titleContainer = category.tracksContainer + .append('div').attr('class', 'up_pftv_leftpanel') + .append('div').attr('class', 'up_pftv_track-header'); - track.trackContainer = category.tracksContainer.append('div') - .attr('class', 'up_pftv_track'); + track.trackContainer = category.tracksContainer + .append('div').attr('class', 'up_pftv_mainpanel') + .append('div').attr('class', 'up_pftv_track'); }; Track.prototype.update = function() { From 12d35cc8af882d048fc51ab42dbecfd942d26a4b Mon Sep 17 00:00:00 2001 From: Ian Sillitoe Date: Thu, 23 Feb 2017 19:08:34 +0000 Subject: [PATCH 13/13] Improvements to zoom and AA scale This is a pretty big commit (sorry) - overview: - make the trapezoid look nicer (curved edges) - make the zoom handles more obviously handle-like - move the domain labels to either side of the handles - tidy up stage margins and padding --- src/FeaturesViewer.js | 154 ++++++++++++++++++++++++++---------------- 1 file changed, 94 insertions(+), 60 deletions(-) diff --git a/src/FeaturesViewer.js b/src/FeaturesViewer.js index 3bcc627..f173c7e 100644 --- a/src/FeaturesViewer.js +++ b/src/FeaturesViewer.js @@ -108,15 +108,16 @@ var resetZoomAndSelection = function(fv) { }; var createZoom = function(fv) { + var scale = fv.xZoomScale; var zoom = d3.behavior.zoom() - .x(fv.xScale) + .x(scale) // .scaleExtent([1,1]) .on('zoom', function() { - if (fv.xScale.domain()[0] < 1) { - var tempX = zoom.translate()[0] - fv.xScale(1) + fv.xScale.range()[0]; + if (scale.domain()[0] < 1) { + var tempX = zoom.translate()[0] - scale(1) + scale.range()[0]; zoom.translate([tempX, 0]); - } else if (fv.xScale.domain()[1] > fv.maxPos) { - var translatedX = zoom.translate()[0] - fv.xScale(fv.maxPos) + fv.xScale.range()[1]; + } else if (scale.domain()[1] > fv.maxPos) { + var translatedX = zoom.translate()[0] - scale(fv.maxPos) + scale.range()[1]; zoom.translate([translatedX, 0]); } update(fv); @@ -142,11 +143,13 @@ var closeTooltipAndPopup = function(fv) { }; var createNavRuler = function(fv, container) { - var navHeight = 40, navWithTrapezoid = 50; - - var navXScale = d3.scale.linear() - .domain([1,fv.maxPos]) - .range([fv.padding.left, fv.width - fv.padding.right]); + var navHeight = 30, + trapezoidHeight = 40, + navdragHandleWidth = 10, + navdragHandleHeight = 30, + trapezoidCurveOffset = 30, + extentHeight = 6, + resizeLabelWidth = 15; var svg = container .append('div') @@ -154,18 +157,22 @@ var createNavRuler = function(fv, container) { .append('svg') .attr('id','up_pftv_svg-navruler') .attr('width', fv.width) - .attr('height', (navWithTrapezoid)); + .attr('height', trapezoidHeight + (navdragHandleHeight/2)); + + var defs = svg.append('defs'); + var gradient = defs.append('linearGradient').attr({id: "fv-zoom-gradient", x1: 0, x2: 0, y1: 0, y2: 1}); + gradient.append('stop').attr('class', 'fv-zoom-gradient-start').attr('offset', '0%'); + gradient.append('stop').attr('class', 'fv-zoom-gradient-end').attr('offset', '90%'); + + // move everything down to give space for brush handles + var canvas = svg.append('g').attr('transform', 'translate(0,'+navdragHandleHeight/2+')'); var navXAxis = d3.svg.axis() - .scale(fv.xScale) + .scale(fv.xZoomScale) .orient('bottom'); - svg.append('g') - .attr('class', 'x axis') - .call(navXAxis); - var viewport = d3.svg.brush() - .x(navXScale) + .x(fv.xZoomScale) .on("brush", function() { var s = d3.event.target.extent(); if((s[1] - s[0]) < fv.maxZoomSize) { @@ -182,51 +189,66 @@ var createNavRuler = function(fv, container) { viewport.on("brushend", function () { updateZoomFromChart(fv); var navigator = fv.globalContainer.select('.up_pftv_navruler .extent'); - if (+navigator.attr('width') >= fv.width - fv.padding.left - fv.padding.right) { + if (+navigator.attr('width') >= fv.width - fv.zoomMargin.left - fv.zoomMargin.right) { updateZoomButton(fv, 'fv-icon-zoom-out', 'fv-icon-zoom-in', 'Zoom in to sequence view'); } }); - var arc = d3.svg.arc() - .outerRadius(navHeight / 4) - .startAngle(0) - .endAngle(function(d, i) { return i ? -Math.PI : Math.PI; }); - - svg.append("g") + var vp = canvas.append("g") .attr("class", "up_pftv_viewport") - .call(viewport) - .selectAll("rect") + .call(viewport); + + var handles = vp.selectAll('.resize'); + + vp.selectAll("rect") .attr("height", navHeight); - viewport.trapezoid = svg.append("g") - .selectAll("path") - .data([0]).enter().append("path") - .classed("up_pftv_trapezoid", true); - - viewport.domainStartLabel = svg.append("text") - .attr('class', 'domain-label') - .attr('x',0) - .attr('y',navHeight); - - viewport.domainEndLabel = svg.append("text") - .attr('class', 'domain-label') - .attr('x',fv.width) - .attr('y',navHeight) - .attr('text-anchor','end'); - - svg.selectAll(".resize").append("path") - .attr("transform", "translate(0," + ((navHeight / 2) - 5) + ")") - .attr('class','handle') - .attr("d", arc); + // add axis to the background + vp.insert('g', ':first-child') + .attr('class', 'x axis') + .call(navXAxis); + // then add 'background' to the background + viewport.trapezoid = vp.insert("path", ":first-child") + .attr("fill", "url(#fv-zoom-gradient)") + .classed("trapezoid", true); + + var resizeLabels = vp.selectAll('.resize').append("text") + .attr('class', 'domain-label'); + + viewport.domainStartLabel = vp.select('.resize.w .domain-label') + .attr('text-anchor', 'end') + .attr('transform', 'translate(' + (-(navdragHandleWidth+2)) + ',-3)'); + + viewport.domainEndLabel = vp.select('.resize.e .domain-label') + .attr('text-anchor', 'start') + .attr('transform', 'translate(' + (navdragHandleWidth+2) + ',-3)'); + + handles.select('rect') + .classed('handle', true) + .attr('x', -(navdragHandleWidth/2)) + .attr('y', -(navdragHandleHeight/2)) + .attr('width', navdragHandleWidth ) + .attr('height', navdragHandleHeight ) + .style({visibility: 'visible'}); + + vp.select('.extent') + .attr('height', extentHeight) + .attr('transform', 'translate(0,'+(-extentHeight/2)+')'); + viewport.updateTrapezoid = function() { var begin = fv.globalContainer.select(".up_pftv_navruler .extent").attr("x"); var tWidth = fv.globalContainer.select(".up_pftv_navruler .extent").attr("width"); + var end = (+begin) + (+tWidth); - var path = "M0," + (navWithTrapezoid) + "L0" + "," + (navWithTrapezoid-2) - + "L" + begin + "," + (navHeight-12) + "L" + begin + "," + navHeight - + "L" + end + "," + navHeight + "L" + end + "," + (navHeight-12) - + "L" + fv.width + "," + (navWithTrapezoid-2) + "L" + fv.width + "," + (navWithTrapezoid) + "Z"; + + var path = "M" + [0,trapezoidHeight].join(',') + // C x1 y1 x2 y2 x y + + "C" + [0,trapezoidHeight-trapezoidCurveOffset, begin,0+trapezoidCurveOffset, begin,0 ].join(',') // left + + "L" + [end,0].join(',') // top + + "C" + [end,0+trapezoidCurveOffset, fv.width,trapezoidHeight-trapezoidCurveOffset, fv.width,trapezoidHeight ].join(',') // right + + "L" + [0,trapezoidHeight].join(',') // bottom + + "Z"; this.trapezoid.attr("d", path); this.domainStartLabel.text(Math.round(fv.xScale.domain()[0])); this.domainEndLabel.text(Math.min(Math.round(fv.xScale.domain()[1]), fv.maxPos)); @@ -278,7 +300,8 @@ var createButtons = function(fv, data, container) { }; var createAAViewer = function(fv, container, sequence) { - var aaViewer = {}, aaViewWidth = fv.width, aaViewHeight = 30; + var aaViewer = {}, aaViewWidth = fv.width, aaViewHeight = 30, aaViewFontSize=12; + var svg = container .append('div') .attr('class','up_pftv_aaviewer') @@ -286,6 +309,11 @@ var createAAViewer = function(fv, container, sequence) { .attr('width', aaViewWidth) .attr('height',aaViewHeight); + svg.append('rect') + .attr("width", aaViewWidth) + .attr("height", aaViewHeight) + .classed('background', true); + //amino acids selector var aaSelectorPlot = function(){ var series, aminoAcids; @@ -310,17 +338,20 @@ var createAAViewer = function(fv, container, sequence) { var selectorSeries = aaSelectorPlot(); var selectorGroup = svg.append('g') - .attr('clip-path','url(#aaSelectorViewClip)') + //.attr('clip-path','url(#aaSelectorViewClip)') .style('opacity',1); selectorGroup.datum([{"feature": {"begin": -10, "end": -10}}]) .call(selectorSeries); //scale + var xAxis = d3.svg.axis() - .scale(fv.xScale); + .scale(fv.xScale) + .orient( 'bottom' ); + var gAxis = svg.append("g") - .attr("class", "x axis") - .attr('transform','translate(0, -7)') - .call(xAxis); + .attr("class", "x axis") + .call(xAxis); + //amino acids var aaPlot = function(){ var series, aminoAcids; @@ -330,7 +361,6 @@ var createAAViewer = function(fv, container, sequence) { aminoAcids = series.selectAll('.up_pftv_amino-acid').data(data); aminoAcids.enter().append('text') .style('text-anchor','middle') - .attr('y', aaViewHeight / 2) .text(function(d) { return d.toUpperCase(); }) @@ -353,7 +383,7 @@ var createAAViewer = function(fv, container, sequence) { var g = svg.append('g') .attr('class','up_pftv_aa-text') .attr('clip-path','url(#aaViewClip)') - .attr('transform','translate(0,' + aaViewHeight/5 + ')') + .attr('transform','translate(0,' + aaViewHeight + ')') .style('opacity',0); g.datum(sequence.split('')).call(series); @@ -473,19 +503,23 @@ var FeaturesViewer = function(opts) { fv.dispatcher = d3.dispatch("featureSelected", "featureDeselected", "ready", "noDataAvailable", "noDataRetrieved", "notFound", "notConfigRetrieved"); - fv.width = 760; + fv.width = opts.width !== undefined && opts.width >= 760 ? opts.width : 760; fv.maxZoomSize = 30; fv.selectedFeature = undefined; fv.selectedFeatureElement = undefined; fv.sequence = ""; fv.categories = []; fv.filterCategories = []; - fv.padding = {top:2, right:10, bottom:2, left:10}; + fv.margin = {top:0, right:0, bottom:0, left:0}; + fv.zoomMargin = {top:10, right:50, bottom:10, left:50}; fv.data = []; fv.uniprotacc = opts.uniprotacc; fv.overwritePredictions = opts.overwritePredictions; fv.defaultSource = opts.defaultSources !== undefined ? opts.defaultSources : true; + fv.xScale = d3.scale.linear(); + fv.xZoomScale = d3.scale.linear(); + fv.load = function() { initSources(opts); var dataSources = Constants.getDataSources();