prepare for new lazar-gui

author: gebele <gebele@alfadeo.de> 2011-08-16 13:01:57 +0200
committer: gebele <gebele@alfadeo.de> 2011-08-16 13:01:57 +0200
commit: 2aaa0e7bfa3ae61040e707a84c9585b5664510bc (patch)
tree: 99253e8ccfd6edd17b27ae4159629c2f07dd8713
parent: 8b63e71e9cb0c6b377e83f793370039410012ed4 (diff)
5 files changed, 312 insertions, 74 deletions
diff --git a/application.rb b/application.rb
index c155d1f..bc0dbc0 100644
--- a/application.rb
+++ b/application.rb
@@ -71,7 +71,7 @@ before do
 end
 
 get '/?' do
-  redirect url_for('/create')
+  redirect url_for('/predict')
 end
 
 get '/login' do
@@ -165,11 +165,11 @@ get '/predict/?' do
   @models = @models.collect{|m| m if m.status == 'Completed'}.compact
   haml :predict
 end
-
+=begin
 get '/create' do
   haml :create
 end
-
+=end
 get '/help' do
   haml :help
 end
diff --git a/views/jme_help.html b/views/jme_help.html
new file mode 100644
index 0000000..adf3e1f
--- /dev/null
+++ b/views/jme_help.html
@@ -0,0 +1,197 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+  <meta name="generator" content=
+  "HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org">
+  <meta http-equiv="content-type" content=
+  "text/html; charset=us-ascii">
+
+  <title>JME Help</title>
+  <meta name="author" content="Peter Ertl, Novartis Pharma AG">
+  <link rel="stylesheet" href="../style.css" type="text/css">
+<style type="text/css">
+ body {
+  background-color: white;
+ }
+ h2.c3 {text-align: center}
+ p.c2 {font-style: italic; text-align: right}
+ p.c1 {text-align: center}
+</style>
+</head>
+
+<body>
+<h1>JME Molecular Editor</h1>
+
+        <p class="c2">Written by Peter Ertl, Novartis Pharma
+        AG</p>
+
+        <h2 class="c3">Basic Instructions</h2>
+
+        <p>This editor is intended to be used without any special
+        documentation or training, but there are some tricks which
+        can help you to work with it more efficiently.</p>
+
+        <h3>Menu Buttons</h3>
+
+        <ul>
+          <li><b>D-R</b> deletes functional groups - choose this
+          option and then click on the bond connecting the group
+          with the main skeleton</li>
+
+          <li><b>UDO</b> undo last editing step</li>
+
+          <li><b>QRY</b> (if enabled in the param tag) allows easy
+          specification of atomic queries for substructure
+          searches</li>
+
+          <li><b>Stereo bonds</b> - the type of stereo bond (up,
+          down) may be changed by clicking on the already created
+          stereo bond; this cycles through two / four possible
+          stereo bond types</li>
+
+          <li><b>Atomic charges</b> may be changed by the
+          <b>+/-</b> button. Editor enables modification of charges
+          only in "reasonable" cases. If you are not satisfied with
+          the editor's inteligence (concerning charges and the
+          explicit number of hydrogens) you can force your will by
+          using the <b>X</b> button</li>
+
+          <li><b>"Non-organic" atoms</b> or atoms with nonstandard
+          valence may be entered with help of <b>X</b> button by
+          specifying atomic SMILES (without [ ] brackets, i.e. Si,
+          Fe++, NH3+).</li>
+        </ul>
+
+        <h3>Keyboard Shortcuts</h3>
+
+        <p>Most of the commands may be accessed also by keyboard
+        shortcuts. It is possible to:</p>
+
+        <ul>
+          <li>change <b>atom type</b> by pressing <b>C</b>,
+          <b>N</b>, <b>O</b>, <b>S</b>, <b>F</b>, <b>L</b> (for Cl)
+          <b>B</b> (for Br) <b>I</b>, <b>P</b>, <b>H</b>, <b>X</b>,
+          <b>R</b> and clicking the respective atom</li>
+
+          <li>choose <b>bond order</b>: <b>-</b> for single bond,
+          <b>=</b> for double bond, <b>#</b> for triple bond</li>
+
+          <li>choose <b>ring type</b> by pressing <b>3</b>,
+          <b>4</b>, <b>5</b>, <b>6</b>, <b>7</b>, <b>8</b>,
+          <b>9</b> or <b>1</b> for phenyl, <b>0</b> for furyl</li>
+
+          <li>start <b>delete mode</b> by pressing <b>D</b> or
+          <b>Del</b> and</li>
+
+          <li>return to the <b>standard state</b> (carbon, single
+          bond) with <b>Esc</b></li>
+        </ul>
+
+        <p><b>common functional groups</b> may also be added by
+        keyboard shortcuts. Use <b>t</b> for t-butyl, <b>ft</b> for
+        trifluoromethyl, <b>lt</b> for trichloromethyl, <b>a</b>
+        for COOH, <b>z</b> for SO2Me and <b>y</b> for nitro, and
+        then click the atom where the group should be
+        connected.</p>
+
+        <h3>Moving and Rotation</h3>
+
+        <p>You can move molecule by "dragging free space" with the
+        left mouse button and rotate it by using the left mouse
+        button and <b>Shift</b> key (or left and right mouse
+        buttons together).</p>
+
+        <h3>Adding rings</h3>
+
+        <p>When a ring template is selected and multivalent atom is
+        clicked, a new ring will be created connected by single
+        bond to this atom. When spiro ring is required, the
+        <b>Shift</b> key must be pressed when clicking on the atom.
+        Spiro ring may be added only to atom with 2 single
+        bonds.</p>
+
+        <h3>Multivalent nitrogen groups</h3>
+
+        <p>Multivalent nitrogen groups, such as nitro, azide,
+        N-oxide, nitrile etc, should be drawn with a pentavalent
+        nitrogen as shown below.</p>
+
+        <p class="c1"><img src="images/nitro.gif" alt=
+        "nitro stuff"></p>
+
+        <p>The program automatically converts polar form of these
+        groups into non-polar one with pentavalent nitrogen. If you
+        prefer polar nitro (and similar) groups, use keyword
+        "polarnitro" in the applet param tag.</p>
+
+        <h3>Stereochemistry</h3>
+
+        <p>Stereochemistry at C4 centers, double bonds and allenes
+        is supported. Use the up/down wedge bonds to indicate
+        stereochemistry at the C4 centers. Remember, that only
+        bonds with a "sharp point" towards the atom are considered.
+        When creating SMILES the editor tries to guess missing
+        stereo features, in unresolvable cases an error message is
+        issued and the SMILES without stereo information is
+        created.</p>
+
+        <p>When the autoez keyword is set, SMILES with E,Z
+        stereochemistry on all non-ring double bonds is generated
+        automatically. Without this keyword (or for ring double
+        bonds) you have to mark a double bond as stereo by clicking
+        on it with the stereo bond button selected. The bond color
+        will change to violet.</p>
+
+        <p>Stereochemistry may be completely disabled by the
+        "nostereo" option in the param tag.</p>
+
+        <h3>Input of Multipart Structures</h3>
+
+        <p>By default only non-disconnected structures are allowed.
+        This may be changed by a "multipart" option in the applet
+        param tag. A button <b>NEW</b> appears in the JME menu.
+        Creation of a new molecule may be started only after
+        clicking the <b>NEW</b> button, selecting a proper template
+        (atom, ring, bond) and clicking free space in the drawing
+        area. Without <b>NEW</b> button the click on the free space
+        has the same effect as in the standard mode (i.e moving or
+        rotation of the last touched molecule). In the multipart
+        mode <b>CLR</b> button deletes the last touched
+        molecule.</p>
+
+        <h3>Atom Numbering</h3>
+
+        <p>Atom numbering (marking) is enabled with the option
+        "number" in the applet param tag (for reaction input this
+        is default). Button <b>123</b> appears in the JME menu. To
+        mark an atom press the <b>123</b> button and then the atom.
+        You can mark more atoms with the same number when pressing
+        <b>Shift</b> while clicking the 2nd and further atoms.
+        Second click on the marked atom deletes the number.</p>
+
+        <h3>Reaction Input</h3>
+
+        <p>Reaction input is enabled with the option "reaction" in
+        the applet param tag. Button with an arrow, <b>NEW</b>
+        button and <b>123</b> button appear in the JME menu and
+        arrow appears also in the drawing area. Now simply draw
+        reactant(s), product(s) and modulator(s) (modulators have
+        to be above the arrow) as explained in the description of
+        input of multipart structures. The arrow button enables
+        simplified input of reactions. After clicking it, the
+        reactant will be copied to the product (including atom
+        numbering, if any). When the <b>Shift</b> is pressed during
+        this action all atoms will be automatically numbered.</p>
+
+        <h3>Query Features</h3>
+
+        <p>Query button (when enabled in the option tag) launches a
+        query window which allows creation of SMARTS atom queries
+        by combining various atom attributes. Create a SMARTS query
+        and then click the respective atom in the
+        molecule.</p>
+</body>
+</html>
+
+
diff --git a/views/layout.haml b/views/layout.haml
index c76396d..bc2ed1e 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -12,22 +12,22 @@
 
   %body
     .logo
-      %img{:src => "ToxCreate_rgb_72.png", :alt => 'ToxCreate', :align => 'right'}/
-      %br
-      Creates computational models to predict toxicity
+      %h1= "Lazar Toxicity Predictions"
+        
     .index
       %ul
-        %li{:class => ("selected" if /\/create|echa|ambit|feature/ =~ request.path )}
-          = link_to "Create", "/create"
-        %li{:class => ("selected" if /models/ =~ request.path )}
-          = link_to "Inspect", "/models"
+        -#%li{:class => ("selected" if /\/create|echa|ambit|feature/ =~ request.path )}
+          -#= link_to "Create", "/create"
         %li{:class => ("selected" if /predict|lazar/ =~ request.path )}
-          = link_to "Predict", "/predict"
+          = link_to "Input", "/predict"
+        %li{:class => ("selected" if /models/ =~ request.path )}
+          = link_to "Validation", "/models"       
         - if AA_SERVER
           %li{:class => ("selected" if /login/ =~ request.path )}
             = link_to "Login", "/login"
         %li{:class => ("selected" if /help/ =~ request.path )}
-          = link_to "Help", "/help"
+          = link_to "Documentation", "/help"
+      %hr
 
     .content
       .login_info
@@ -48,18 +48,7 @@
       = yield
 
     .footer
-      Disclaimer: ToxCreate uses state-of-the-art published and tested algorithms and methodologies with full validation information. However, just as with experimental measurements, computational predictions are subject to varying degrees of accuracy and uncertainty, so please read the full report carefully, particularly the validation information.  No liability is accepted for any inaccuracy in predictions.
-      %p
-        - tag = `git tag`.split("\n").last
-        - tagdate = `git show #{tag}|grep Date`.chomp
-        Version:
-        = tag
-        ,
-        = tagdate
       &copy;
-      %a{:href => 'http://www.in-silico.ch', :rel => "external"} in silico toxicology
-      2009-2011, powered by
-      %a{:href => 'http://www.opentox.org', :rel => "external"} <span style="color:#5D308A;font-family:arial,sans-serif,helvetica;letter-spacing:-1px;">Open</span><span style="color:#000;font-family:arial,sans-serif,helvetica;font-weight:bold;letter-spacing:-1px;">Tox</span>
-      (a project funded by the 
-      %a{:href => "http://cordis.europa.eu/fp7/", :rel => "external"} 7th Framework Programme
-      of the European Commission)
+      %a{:href => 'http://www.in-silico.ch', :rel => "external"} 
+      %span{:style=> "font-style:italic"} in silico
+      toxicology gmbh 2004-2011
diff --git a/views/predict.haml b/views/predict.haml
index ec667e6..09bd743 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -6,38 +6,72 @@
   }
 
 .input
-  %p Use this service to obtain predictions from OpenTox models.
-  - unless @models.empty?
-
-    %form{:name => "form", :action => url_for('/predict'), :method => "post", :enctype => "multipart/form-data" }
-      %fieldset
-        %legend Draw a compound
-        %label &nbsp;
+  %ol
+    %li
+      %p 
+        Draw a chemical structure
+        %a{:href => "jme_help", :rel => "external"} (help) 
+      %form{:name => "form", :action => url_for("/predict"), :method => "post", :enctype => "multipart/form-data"}
         .jme
           %applet{:code => "JME.class",  :name => "JME", :archive => "JME.jar", :width => "500", :height => "360"}
             %param{ :name => "options", :value => "polarnitro"}
-            Please enable Java and JavaScript in your browser to use the JME editor. 
-
-          %jme_info
-            <span style="font-size:75%">&copy;
-            %a{:href => 'http://www.molinspiration.com/jme/index.html', :rel => "external"} JME Editor
-            courtesy of Peter Ertl, Novartis</span> 
-        %br  
-        %label{:for => 'identifier'} or enter a Name, InChI, Smiles, CAS, ...
-        %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
-      %br
-      %fieldset
-        %legend
-          Choose one or more prediction models
+            Please enable Java and JavaScript in your browser to use the JME editor.
+            
+          %span{:style=> "font-size:75%"}
+          &copy;
+            %a{:href => 'http://www.molinspiration.com/jme/index.html', :rel => "external"} JME Editor courtesy of Peter Ertl, Novartis</span>
+            
+        %br
+        %label{:for => 'identifier'}
+          or enter the 
+          %a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES 
+          string
+          
         %br
-        - @models.each do |model|
-          %input{:type => 'checkbox', :name => "selection[#{model.id}]", :value => true, :id => "model#{model.id}", :disabled => false}
-          %label{:for => "model#{model.id}"}
-            = model.name
-          -#%input{:type => 'checkbox', :name => "selection[#{model.id}]", :value => true, :id => model.id, :disabled => !is_authorized(model.uri, "GET")}            
-          %br
-      %br
+        %br
+        %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
+        
+        
+    %li
+      %p select a toxic endpoint
+      
+    %li
       %input{:type => 'hidden', :name => 'subjectid', :id => 'subjectid', :value => session[:subjectid]}
       %input{ :type => "submit", :value => "Predict", :onclick => "getsmiles();"}
-      = link_to 'Cancel', '/predict' 
+      -#= link_to 'Cancel', '/predict' 
+
+-#  %p Use this service to obtain predictions from OpenTox models.
+-#  - unless @models.empty?
+-#
+-#    %form{:name => "form", :action => url_for('/predict'), :method => "post", :enctype => "multipart/form-data" }
+-#      %fieldset
+-#        %legend Draw a compound
+-#        %label &nbsp;
+-#        .jme
+-#          %applet{:code => "JME.class",  :name => "JME", :archive => "JME.jar", :width => "500", :height => "360"}
+-#            %param{ :name => "options", :value => "polarnitro"}
+-#            Please enable Java and JavaScript in your browser to use the JME editor. 
+-#
+-#          %jme_info
+-#            <span style="font-size:75%">&copy;
+-#            %a{:href => 'http://www.molinspiration.com/jme/index.html', :rel => "external"} JME Editor
+-#            courtesy of Peter Ertl, Novartis</span> 
+-#        %br  
+-#        %label{:for => 'identifier'} or enter a Name, InChI, Smiles, CAS, ...
+-#        %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
+-#      %br
+-#      %fieldset
+-#        %legend
+-#          Choose one or more prediction models
+-#        %br
+-#        - @models.each do |model|
+-#          %input{:type => 'checkbox', :name => "selection[#{model.id}]", :value => true, :id => "model#{model.id}", :disabled => false}
+-#          %label{:for => "model#{model.id}"}
+-#            = model.name
+-#          -#%input{:type => 'checkbox', :name => "selection[#{model.id}]", :value => true, :id => model.id, :disabled => !is_authorized(model.uri, "GET")}            
+-#          %br
+-#      %br
+-#      %input{:type => 'hidden', :name => 'subjectid', :id => 'subjectid', :value => session[:subjectid]}
+-#      %input{ :type => "submit", :value => "Predict", :onclick => "getsmiles();"}
+-#      = link_to 'Cancel', '/predict' 
 
diff --git a/views/style.sass b/views/style.sass
index 15ae256..e760113 100644
--- a/views/style.sass
+++ b/views/style.sass
@@ -1,5 +1,6 @@
 $bg_color: #b9dcff
 $bg_color2: #e5e7eb
+$li_color: #ff8
 $fg_color: #424345
 $ot_purple: #5d308a
 $body_color: white
@@ -8,31 +9,40 @@ $notice_border: red
 
 body
   min-width: 30em
-  font-family: verdana, arial, helvetica, sans-serif
+  font-family: Verdana, sans-serif
   background-color: $body_color
   color: $text_color
-  padding: 1em
+  height: 93%
+  padding: 2% 0% 2% 1%
+  text-align: left
   a
     text-decoration: none
-    font-weight: bold
-    color: $ot_purple
+    //font-weight: bold
+    //color: $ot_purple
   a:hover
     color: black
   a[rel="external"]
     background: transparent url('../external.gif') center right no-repeat
     padding-right: 15px
 
-  .headline
-    .logo
-      float: right
 
+  .logo
+    h1
+      display: inline
+      float: right
+      margin-left: 10%
+      padding-right: 2%
+      
   .index
-    clear: both
+    //clear: both
+    margin: 2%
+
     ul
       margin: 0 0 2px 0
       padding: 0
       white-space: nowrap
       list-style-type: none
+      //text-align: left
     li
       margin: 0
       padding: 2px
@@ -44,22 +54,29 @@ body
       font-weight: bold
       a
         text-decoration: none
-        color: $bg_color
+        color: lightgrey
         &:hover
-          color: $body_color
+          color: $li_color
     li.selected
       font-weight: bold
-      background-color: $bg_color
-      border-bottom: 1px solid $bg_color
       a
-        color: $text_color
-
+        color: $li_color
+    hr
+      height: 2px
+      color: #333
+      background-color: #333
+      margin-top: 5px
+      border:
+        top: 0
+        bottom: 0
+        color: #555
+        
   .content
     clear: both
     background-color: $bg_color
-    height: 100%
     padding: 1em
-    border-top: 1px solid $body_color
+    margin: 4% 2% 0%
+    border: 1px solid #555555
     h2
       margin: 20px 3px 2px 3px
     .notice
@@ -82,8 +99,8 @@ body
       //clear: both
       text-align: left
       form
-        padding: 1em
-        background-color: $bg_color2
+        //padding: 1em
+        //background-color: $bg_color2
         fieldset
           //margin: 0
           padding: 0
@@ -218,8 +235,9 @@ body
             clear: right
           
   .footer
-    margin: 0.5em
-    padding: 0.5em
+    clear: both
+    //margin: 2%
+    padding: 2%
     font-size: small
 
 .active
author	gebele <gebele@alfadeo.de>	2011-08-16 13:01:57 +0200
committer	gebele <gebele@alfadeo.de>	2011-08-16 13:01:57 +0200
commit	2aaa0e7bfa3ae61040e707a84c9585b5664510bc (patch)
tree	99253e8ccfd6edd17b27ae4159629c2f07dd8713
parent	8b63e71e9cb0c6b377e83f793370039410012ed4 (diff)