add plots with div toggles

4 files changed, 17 insertions, 73 deletions

diff --git a/views/layout.haml b/views/layout.haml
index f06a700..22a8583 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -84,8 +84,6 @@
       %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
         %span.fa.fa-caret-up{:style => "font-size:3em;color:black;"}
     :javascript
-      //var $j = jQuery.noConflict();
-      // $j is now an alias to the jQuery function; creating the new alias is optional.
       $("#back-top").hide();
       $(function () {
         $(window).scroll(function () {
diff --git a/views/model_details.haml b/views/model_details.haml
index 8faf785..8877de5 100644
--- a/views/model_details.haml
+++ b/views/model_details.haml
@@ -87,9 +87,11 @@
                 / np,negative predictions
                 %td= np[idx]
           %div.row
-            %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#matrix#{idx}"}, :aria=>{:expanded=>"false", :controls=>"matrix#{idx}"}, :style=>"font-size:small;"}
-              Confusion matrix:
-          %div.collapse{:id=>"matrix#{idx}"}
+            %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#pplot#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"pplot#{model.id}#{idx}"}, :style=>"font-size:small;"}
+              Probability plot
+            %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#matrix#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"matrix#{model.id}#{idx}"}, :style=>"font-size:small;"}
+              Confusion matrix
+          %div.collapse{:id=>"matrix#{model.id}#{idx}"}
             %table.table.table-borderless.table-responsive
               %tr
                 %td.fit.text-center all
@@ -128,6 +130,10 @@
                         %td
                           = matrix[1][1]
         
+          %div.row
+            %div.collapse.plot.mx-auto{:id=>"pplot#{model.id}#{idx}"}
+              = embedded_svg(cv.probability_plot(format: "svg"))
+
         / regression
         - if model.regression?
           / rmse, mae, r_squared, pred nr, within intv, out intv
@@ -169,6 +175,12 @@
                 %td= wpi[idx]
                 / Out of prediction interval:
                 %td= opi[idx]
+          %div.row
+            %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#cplot#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"cplot#{model.id}#{idx}"}, :style=>"font-size:small;"}
+              Correlation plot
+          %div.row
+            %div.collapse.plot.mx-auto{:id=>"cplot#{model.id}#{idx}"}
+              = embedded_svg(cv.correlation_plot(format: "svg"))
         - unless idx == crossvalidations.size-1
           %hr
 
diff --git a/views/significant_fragments.haml b/views/significant_fragments.haml
deleted file mode 100644
index bd3598d..0000000
--- a/views/significant_fragments.haml
+++ /dev/null
@@ -1,66 +0,0 @@
-%div.modal-body{:style=>"padding:10px;"}
-  %button.close{ :type=>" button", data: { dismiss:"modal"}} ×
-  - if @type =~ /classification/i
-    %div.row
-      %div.col-md-4
-        %h3{:style=>"margin-left:8px;"}
-          Significant fragments:
-        %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"}
-      - if !@significant_fragments.empty?
-        %div.col-md-8
-          %table{:id => "sf"}
-            %tr
-              / @value_map => hash; interpret the effect
-              %th{:style=>"border:2px solid #E6E6E6;"}
-                Predominantly in compounds with activity "inactive"
-              %th{:style=>"border:2px solid #E6E6E6;"}
-                p value
-              - @significant_fragments.each do |fragments|
-                / fragments == [effect, smarts, pValue]
-                / fragments[0] = effect
-                /- $logger.debug "effect:\t#{fragments[0]}\n"
-                - if fragments[0] == @value_map.index("inactive")
-                  %tr
-                    %td
-                      / fragments[1] = smarts 
-                      = fragments[1]
-                      -#%img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"}
-                    %td
-                      /fragments[2] = pValue
-                      = fragments[2]
-            %tr
-              %th{:style=>"border:2px solid #E6E6E6;"}
-                Predominantly in compounds with activity "active"   
-              %th{:style=>"border:2px solid #E6E6E6;"}
-                p value
-              - @significant_fragments.each do |fragments|
-                / fragments == [effect, smarts, pValue]
-                - if fragments[0] == @value_map.index("active")
-                  %tr
-                    %td
-                      -#%img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"}
-                      = fragments[1]
-                    %td
-                      = fragments[2]
-    %br
-  - if @type =~ /regression/i
-    %div.row
-      %div.col-md-4
-        %h3
-          Descriptors:
-        %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"}
-      - if !@significant_fragments.empty?
-        %div.col-md-8
-          %table{:id =>"de"}
-            %tr
-              %th{:style=>"border:2px solid #E6E6E6;"}
-                Descriptor
-              %th{:style=>"border:2px solid #E6E6E6;"}
-                value
-              - @significant_fragments.each do |fragments|
-                %tr
-                  %td
-                    = fragments[0]
-                  %td
-                    = fragments[1][0].round(3)
-    %br
diff --git a/views/style.scss b/views/style.scss
index e6f6100..63f9e74 100644
--- a/views/style.scss
+++ b/views/style.scss
@@ -36,8 +36,8 @@ img {
 }
 
 .plot {
-  height: 300px;
-  width: 300px;
+  height: 50%;
+  width: 50%;
 }
 .faq {
   text-align: block;