From 93bb3a51e2b06966335b0581a49da7924acc2fa7 Mon Sep 17 00:00:00 2001 From: sepro Date: Wed, 26 Oct 2016 17:35:05 +0200 Subject: [PATCH] layout improved --- planet/controllers/help.py | 4 +- planet/static/css/tabbed_panel.css | 255 ++++++++++++++++++ planet/templates/base.html | 1 + .../macros/neighborhood_actions.html | 10 + planet/templates/modals/help/cluster.html | 9 + .../templates/modals/help/neighborhood.html | 9 + planet/templates/sequence.html | 201 +++++++------- 7 files changed, 377 insertions(+), 112 deletions(-) create mode 100644 planet/static/css/tabbed_panel.css create mode 100644 planet/templates/macros/neighborhood_actions.html create mode 100644 planet/templates/modals/help/cluster.html create mode 100644 planet/templates/modals/help/neighborhood.html diff --git a/planet/controllers/help.py b/planet/controllers/help.py index e05bf1b..301c9bd 100644 --- a/planet/controllers/help.py +++ b/planet/controllers/help.py @@ -9,7 +9,9 @@ "ecc": "modals/help/ecc.html", "spm": "modals/help/spm.html", "entropy": "modals/help/entropy.html", - "tau": "modals/help/tau.html"} + "tau": "modals/help/tau.html", + "cluster": "modals/help/cluster.html", + "neighborhood": "modals/help/neighborhood.html"} help = Blueprint('help', __name__) diff --git a/planet/static/css/tabbed_panel.css b/planet/static/css/tabbed_panel.css new file mode 100644 index 0000000..48cc350 --- /dev/null +++ b/planet/static/css/tabbed_panel.css @@ -0,0 +1,255 @@ + +.panel.with-nav-tabs .panel-heading{ + padding: 5px 5px 0 5px; +} +.panel.with-nav-tabs .nav-tabs{ + border-bottom: none; +} +.panel.with-nav-tabs .nav-justified{ + margin-bottom: -1px; +} +/********************************************************************/ +/*** PANEL DEFAULT ***/ +.with-nav-tabs.panel-default .nav-tabs > li > a, +.with-nav-tabs.panel-default .nav-tabs > li > a:hover, +.with-nav-tabs.panel-default .nav-tabs > li > a:focus { + color: #777; +} +.with-nav-tabs.panel-default .nav-tabs > .open > a, +.with-nav-tabs.panel-default .nav-tabs > .open > a:hover, +.with-nav-tabs.panel-default .nav-tabs > .open > a:focus, +.with-nav-tabs.panel-default .nav-tabs > li > a:hover, +.with-nav-tabs.panel-default .nav-tabs > li > a:focus { + color: #777; + background-color: #ddd; + border-color: transparent; +} +.with-nav-tabs.panel-default .nav-tabs > li.active > a, +.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover, +.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus { + color: #555; + background-color: #fff; + border-color: #ddd; + border-bottom-color: transparent; +} +.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu { + background-color: #f5f5f5; + border-color: #ddd; +} +.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a { + color: #777; +} +.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, +.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { + background-color: #ddd; +} +.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a, +.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, +.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #555; +} +/********************************************************************/ +/*** PANEL PRIMARY ***/ +.with-nav-tabs.panel-primary .nav-tabs > li > a, +.with-nav-tabs.panel-primary .nav-tabs > li > a:hover, +.with-nav-tabs.panel-primary .nav-tabs > li > a:focus { + color: #fff; +} +.with-nav-tabs.panel-primary .nav-tabs > .open > a, +.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover, +.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus, +.with-nav-tabs.panel-primary .nav-tabs > li > a:hover, +.with-nav-tabs.panel-primary .nav-tabs > li > a:focus { + color: #fff; + background-color: #3071a9; + border-color: transparent; +} +.with-nav-tabs.panel-primary .nav-tabs > li.active > a, +.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, +.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { + color: #428bca; + background-color: #fff; + border-color: #428bca; + border-bottom-color: transparent; +} +.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu { + background-color: #428bca; + border-color: #3071a9; +} +.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a { + color: #fff; +} +.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, +.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { + background-color: #3071a9; +} +.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a, +.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, +.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { + background-color: #4a9fe9; +} +/********************************************************************/ +/*** PANEL SUCCESS ***/ +.with-nav-tabs.panel-success .nav-tabs > li > a, +.with-nav-tabs.panel-success .nav-tabs > li > a:hover, +.with-nav-tabs.panel-success .nav-tabs > li > a:focus { + color: #3c763d; +} +.with-nav-tabs.panel-success .nav-tabs > .open > a, +.with-nav-tabs.panel-success .nav-tabs > .open > a:hover, +.with-nav-tabs.panel-success .nav-tabs > .open > a:focus, +.with-nav-tabs.panel-success .nav-tabs > li > a:hover, +.with-nav-tabs.panel-success .nav-tabs > li > a:focus { + color: #3c763d; + background-color: #d6e9c6; + border-color: transparent; +} +.with-nav-tabs.panel-success .nav-tabs > li.active > a, +.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover, +.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus { + color: #3c763d; + background-color: #fff; + border-color: #d6e9c6; + border-bottom-color: transparent; +} +.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu { + background-color: #dff0d8; + border-color: #d6e9c6; +} +.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a { + color: #3c763d; +} +.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, +.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { + background-color: #d6e9c6; +} +.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a, +.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, +.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #3c763d; +} +/********************************************************************/ +/*** PANEL INFO ***/ +.with-nav-tabs.panel-info .nav-tabs > li > a, +.with-nav-tabs.panel-info .nav-tabs > li > a:hover, +.with-nav-tabs.panel-info .nav-tabs > li > a:focus { + color: #31708f; +} +.with-nav-tabs.panel-info .nav-tabs > .open > a, +.with-nav-tabs.panel-info .nav-tabs > .open > a:hover, +.with-nav-tabs.panel-info .nav-tabs > .open > a:focus, +.with-nav-tabs.panel-info .nav-tabs > li > a:hover, +.with-nav-tabs.panel-info .nav-tabs > li > a:focus { + color: #31708f; + background-color: #bce8f1; + border-color: transparent; +} +.with-nav-tabs.panel-info .nav-tabs > li.active > a, +.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover, +.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus { + color: #31708f; + background-color: #fff; + border-color: #bce8f1; + border-bottom-color: transparent; +} +.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu { + background-color: #d9edf7; + border-color: #bce8f1; +} +.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a { + color: #31708f; +} +.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, +.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { + background-color: #bce8f1; +} +.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a, +.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, +.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #31708f; +} +/********************************************************************/ +/*** PANEL WARNING ***/ +.with-nav-tabs.panel-warning .nav-tabs > li > a, +.with-nav-tabs.panel-warning .nav-tabs > li > a:hover, +.with-nav-tabs.panel-warning .nav-tabs > li > a:focus { + color: #8a6d3b; +} +.with-nav-tabs.panel-warning .nav-tabs > .open > a, +.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover, +.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus, +.with-nav-tabs.panel-warning .nav-tabs > li > a:hover, +.with-nav-tabs.panel-warning .nav-tabs > li > a:focus { + color: #8a6d3b; + background-color: #faebcc; + border-color: transparent; +} +.with-nav-tabs.panel-warning .nav-tabs > li.active > a, +.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover, +.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus { + color: #8a6d3b; + background-color: #fff; + border-color: #faebcc; + border-bottom-color: transparent; +} +.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu { + background-color: #fcf8e3; + border-color: #faebcc; +} +.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a { + color: #8a6d3b; +} +.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, +.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { + background-color: #faebcc; +} +.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a, +.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, +.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #8a6d3b; +} +/********************************************************************/ +/*** PANEL DANGER ***/ +.with-nav-tabs.panel-danger .nav-tabs > li > a, +.with-nav-tabs.panel-danger .nav-tabs > li > a:hover, +.with-nav-tabs.panel-danger .nav-tabs > li > a:focus { + color: #a94442; +} +.with-nav-tabs.panel-danger .nav-tabs > .open > a, +.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover, +.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus, +.with-nav-tabs.panel-danger .nav-tabs > li > a:hover, +.with-nav-tabs.panel-danger .nav-tabs > li > a:focus { + color: #a94442; + background-color: #ebccd1; + border-color: transparent; +} +.with-nav-tabs.panel-danger .nav-tabs > li.active > a, +.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover, +.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus { + color: #a94442; + background-color: #fff; + border-color: #ebccd1; + border-bottom-color: transparent; +} +.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu { + background-color: #f2dede; /* bg color */ + border-color: #ebccd1; /* border color */ +} +.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a { + color: #a94442; /* normal text color */ +} +.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, +.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { + background-color: #ebccd1; /* hover bg color */ +} +.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a, +.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, +.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { + color: #fff; /* active text color */ + background-color: #a94442; /* active bg color */ +} \ No newline at end of file diff --git a/planet/templates/base.html b/planet/templates/base.html index b4ac2fc..08abd2b 100644 --- a/planet/templates/base.html +++ b/planet/templates/base.html @@ -11,6 +11,7 @@ + diff --git a/planet/templates/macros/neighborhood_actions.html b/planet/templates/macros/neighborhood_actions.html new file mode 100644 index 0000000..3eb8c2c --- /dev/null +++ b/planet/templates/macros/neighborhood_actions.html @@ -0,0 +1,10 @@ +{% macro neighborhood_actions(network_id) -%} + + + + +{%- endmacro %} \ No newline at end of file diff --git a/planet/templates/modals/help/cluster.html b/planet/templates/modals/help/cluster.html new file mode 100644 index 0000000..c1d442b --- /dev/null +++ b/planet/templates/modals/help/cluster.html @@ -0,0 +1,9 @@ +
+ +
+
+ +
+
+ +
\ No newline at end of file diff --git a/planet/templates/modals/help/neighborhood.html b/planet/templates/modals/help/neighborhood.html new file mode 100644 index 0000000..f51161e --- /dev/null +++ b/planet/templates/modals/help/neighborhood.html @@ -0,0 +1,9 @@ +
+ +
+
+ +
+
+ +
\ No newline at end of file diff --git a/planet/templates/sequence.html b/planet/templates/sequence.html index 80be711..523942c 100644 --- a/planet/templates/sequence.html +++ b/planet/templates/sequence.html @@ -2,6 +2,7 @@ {% block container %} {% import "macros/cluster_actions.html" as ca %} +{% import "macros/neighborhood_actions.html" as na %}
{% if sequence %} @@ -25,12 +26,14 @@

{{ sequence.name }} ({{ sequence.readable_type }}) +

Sequence: coding (download) {%- if sequence.type == 'protein_coding' -%}, protein (download) {% endif %}

+
{% if expression_profiles|count > 0 %} {% for profile in expression_profiles %} {% if loop.first %} -

Expression profile (view details)

+

Expression Profile (view details)

@@ -58,22 +61,91 @@

Expression profile (No expression profile available

{% endif %}
-

Sequence details

-
-
-
-
GO annotation (Toggle parental)
+
+

Co-expression Networks

+ {% if network_nodes|count > 0 or coexpression_clusters|count > 0 %} +
+ + + + + + + + + + {% for network in network_nodes %} + + + + + + {% endfor %} + {% for cluster in coexpression_clusters %} + + + + + + {% endfor %} + +
TypeDescriptionActions
Neighborhood{{ network.method.description }}: {{ network.probe }}{{ na.neighborhood_actions(network.id) }}
Cluster{{ cluster.method.method }}: {{ cluster.name }}{{ ca.cluster_actions(cluster.id) }}
+
+ {% else %} +

No co-expressed genes found

+ {% endif %} +
+
+

Expression Context Conservation (ECC)

+
+ + + + + + + + + + + + + + {% for ecc_query_association in sequence.ecc_query_associations %} + + + + + + + + + {% endfor %} + +
TargetECC scorep-Valuep-Value (adjusted)Gene Family MethodActions
{{ ecc_query_association.target_sequence.name }}{{ ecc_query_association.ecc|round(2) }}{% if ecc_query_association.p_value %}{{ ecc_query_association.p_value|round(3) }}{% else %}None{% endif %}{% if ecc_query_association.corrected_p_value %}{{ ecc_query_association.corrected_p_value|round(3) }}{% else %}None{% endif %}{{ ecc_query_association.gene_family_method.method }}
+
+
+

Functional Annotation

+
+
+ +
+
+
+
{% if go_associations|count > 0 %} -
- + @@ -94,25 +166,18 @@

Sequence details

LabelGO Term Name Evidence
-
+ Toggle parental {% else %} -

No GO annotation available for this sequence

-
{% endif %}
-
- -
-
-
InterPro domains
+
{% if interpro_associations|count > 0 %} -
- + @@ -140,14 +205,13 @@

Sequence details

LabelInterPro domains Description Start Stop
-
{% else %} -

No InterPro domains available for this sequence

-
{% endif %}
-
+
+
+
@@ -180,58 +244,8 @@

Sequence details

{% endif %}
-
-
-
Networks
- {% if network_nodes|count > 0 %} -
-
- - - {% for network in network_nodes %} - - - - {% endfor %} - -
{{ network.method.description }}: {{ network.probe }}
-
-
- {% else %} -
-

This sequence isn't included in a network

-
- {% endif %} -
-
-
-
-
Coexpression Clusters
- {% if coexpression_clusters|count > 0 %} -
-
- - - {% for cluster in coexpression_clusters %} - - - - - {% endfor %} - -
{{ cluster.name }} - {{ ca.cluster_actions(cluster.id) }} -
-
-
- {% else %} -
-

This sequence isn't included in a network

-
- {% endif %} -
-
+ +
External Links
@@ -263,42 +277,6 @@

Sequence details

{% endif %}
-
-
-
ECC
-
-
- - - - - - - - - - - - - - {% for ecc_query_association in sequence.ecc_query_associations %} - - - - - - - - - - {% endfor %} - -
TargetECC scorep-valuecorrected p-valuegene family methodaction
{{ ecc_query_association.target_sequence.name }}{{ ecc_query_association.ecc|round(2) }}{% if ecc_query_association.p_value %}{{ ecc_query_association.p_value|round(3) }}{% else %}None{% endif %}{% if ecc_query_association.corrected_p_value %}{{ ecc_query_association.corrected_p_value|round(3) }}{% else %}None{% endif %}{{ ecc_query_association.gene_family_method.method }}
-
-
-
-