summaryrefslogtreecommitdiff
path: root/views/layout.haml
blob: a41a3f7b9c36d371595b75093e9552408069ed15 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
!!! 5
%html
  %head
    %meta{ :charset => "utf-8" }
    %title= "PubChem read across"
    %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/favicon.ico'}
    %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"}
    %script{:type => "text/javascript", :src  => "/jquery-1.8.2.js"}
    :javascript
      function show(title,element,uri) {
        $(element).html("<h4>"+title+"</h4>"+"Retrieving data from PubChem. This may take some time, please be patient."+"<img src=\"/spinning-wait-icons/wait30trans.gif\" alt=\"Searching PubChem\">");
        $.ajax({
          cache: true,
          url: uri,
          //timeout: 120000;
          success: function(data){
            var slash = new RegExp("/","g");
            data = "<h4>"+title+"</h4>"+"<button onclick='hide(\"" + title + "\",\"" + element + "\",\"" + uri + "\");'>Hide</button> <a href=\"" + uri + "/" + uri.replace("/cid/", "").replace(slash,'-') + ".csv\"> (csv)</a>" + data;
            $(element).html(data);
          },
          error: function(data,textStatus,message){
            $(element).html(message);
          }
        });
      }

      function hide(title,element,uri) {
        data = "<h4>"+title+"</h4>"+"<button onclick='show(\"" + title + "\",\""  + element + "\",\"" + uri + "\");'>Show</button>";
        $(element).html(data);
      }

      function display(element,uri) {
        $(element).html("Retrieving data from PubChem. This may take some time, please be patient."+"<img src=\"/spinning-wait-icons/wait30trans.gif\" alt=\"Searching PubChem\">");
        $.ajax({
          cache: true,
          url: uri,
          //timeout: 120000;
          success: function(data){
            $(element).html(data);
          },
          error: function(data,textStatus,message){
            $(element).html(message);
          }
        });
      }

  %body
    %noscript
      %div{ :style=>"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"}
        Your web browser must have JavaScript enabled in order for this application to display correctly.

    .logo
      %a{:href => "/"}
        %img{:src => "/ist_logo.png", :alt => "logo"}
    %h1 PubChem read across
    %button{:id=>"about", :style => "margin-left:80%;margin-right:20px;z-index:4;position:absolute;top:10px;right:0px;"}
      About this service 
    :javascript
      $("#about").click(function() {
        $("#info").toggle();
      });

    #info{:style => "display:none;z-index:5;position:fixed; top:10px; left:25%; width: 50%; background-color:#F5F5F5;border:solid 1px black;"}
      %button{:id => "x", :style => "position:absolute;right:0px;"} x
      :javascript
        $("#x").click(function() {
          $("#info").toggle();
        });
        
      %div{:style => "align:justify;padding:1em;"}
        %h3
          Predict targets potentially affected by a given chemical structure.
        Enter a chemical name, smiles structure, etc and press "Search" to obtain search results and predictions. |
        The system will search the <a href="http://pubchem.ncbi.nlm.nih.gov/">PubChem</a> database for | 
        (i) experimental data of the query compound and |
        (ii) structurally similar compounds (neighbors) and their experimental data. |
        Predictions for the query compound are derived from the neighbors experimental data using an automated |
        read-across algorithm.
        %br
        %br
        The results page is organized according to the following dimensions:
        %dl
          %dt
            Gene/protein targets vs. other assays:
          %dd
            PubChem Assays with known Gene/Protein targets are listed in the first column, assays without known |
            targets are in the "Other assays" column.
            %br
            %br
          %dt
            Active vs. inactive targets/assays:
          %dd
            Targets/assays with positive outcomes are listed as targets/active assays, negative outcomes are |
            filed under non-targets/ inactive assays.
            %br
            %br
          %dt
            Experimental vs. read across:
          %dd
            Experimental data for the query compound is labelled with "experimental", read-across predictions |
            are labelled with "read across". In case of insufficient data no results will be displayed.i
            %br
            %br
          %dt
            Similar compounds
          %dd
            Detailed information about the compounds used for read across predictions (and their experimental data)
        %br
        <small>Source code for the project can be obtained from <a href="https://github.com/opentox/pubchem-read-across">Github</a></small>.

    %form{:name => "form", :action => '/search', :method => "GET"}
      %fieldset
        %label{:for => 'name'} Compound name:
        %input{:type => 'text', :name => 'name', :id => 'name'}
        %input{ :type => "submit", :value => "Search" }
    %em This is an experimental version. Loading data from PubChem can be slow. Please use the "Back" button and retry the offending operation if you have timeout problems.



    = yield

    .footer
      &copy;
      %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2013 - #{Time.now.year.to_s}
      :javascript
        $('A[rel="external"]').each(function(){
          $(this).attr('target', 'external');
        });
    #back-top{:style => "z-index:100;position:fixed;bottom:0%;width:97%;"}
      %hr{:style => "margin-bottom:0;"}
      %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
        %img{:src => "/rect.png", :alt => "top", :style=>"width:100%;height:50px"}
      %div{:style => "margin-top:-50px;font-size:x-small;text-align:center;z-index:101;"}
        TOP
    :javascript
      $("#back-top").hide();
      $(function () {
        $(window).scroll(function () {
          if ($(this).scrollTop() > 600) {
            $('#back-top').fadeIn();
          } else {
            $('#back-top').fadeOut();
          }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
          $('body,html').animate({
            scrollTop: 0
          }, 500);
          return false;
        });
      });