lazar-gui 1.3.1 → 1.4.0.pre.0

data/views/model_details.haml

@@ -1,7 +1,6 @@
-%div.panel.panel-default
-  %div.panel-heading
-    %b Model:
-  %div.panel-body
+%div.card.bg-light
+  %div.card-body
+    %h6.card-title Model:
     Source:
     %a{:href=>model.source, :rel=>"external"}
       = model.source
@@ -10,152 +9,188 @@
     = "Type:\t"
     = type
     %br
-    - training_dataset = OpenTox::Dataset.find model.model.training_dataset_id
     = "Training compounds:\t"
-    = training_dataset.data_entries.size
+    = data_entries.count/3
     %br
     = "Training dataset:\t"
-    %a{:href=>"#{to("/predict/dataset/#{training_dataset.name}")}"}
+    %a{:href=>"//#{$host_with_port}/predict/dataset/#{training_dataset.name}"}
       = training_dataset.name
 
-%div.panel.panel-default
-  %div.panel-heading
-    %b Algorithms:
-  %div.panel-body
-    Similarity:
-    %a{:href=> "http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["similarity"]["method"].sub("::", "%2F")}", :rel=>"external"}
-      = model.model.algorithms["similarity"]["method"]
-    = ", min: #{model.model.algorithms["similarity"]["min"]}"
-    %br
-    Prediction:
-    - if model.model.algorithms["prediction"]["method"] !~ /Caret/
-      %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"}
-        = model.model.algorithms["prediction"]["method"]
+%div.card.bg-light
+  %div.card-body
+    %h6.card-title Algorithms:
+    %p.card-text
+      Similarity:
+      %a.card-link{:href=> "http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["similarity"]["method"].sub("::", "%2F")}", :rel=>"external"}
+        = model.model.algorithms["similarity"]["method"]
+      = ", min: #{model.model.algorithms["similarity"]["min"]}"
+      %br
+      Prediction:
+      - if model.model.algorithms["prediction"]["method"] !~ /Caret/
+        %a.card-link{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"}
+          = model.model.algorithms["prediction"]["method"]
+      - else
+        %a.card-link{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox/Algorithm/Caret", :rel=>"external"}
+          = model.model.algorithms["prediction"]["method"]
+
+      %br
+      Descriptors:
+      = model.model.algorithms["descriptors"]["method"]+","
+      = model.model.algorithms["descriptors"]["type"]
+
+%div.card.bg-light
+  %div.card-body
+    - if type == "Classification"
+      %h6.card-title #{crossvalidations.size} independent 10-fold crossvalidations:
     - else
-      %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox/Algorithm/Caret", :rel=>"external"}
-        = model.model.algorithms["prediction"]["method"]
+      %h6.card-title #{crossvalidations.size} independent 10-fold crossvalidations (-log10 transformed):
+    - crossvalidations.each_with_index do |cv,idx|
+      %p.card-text
+        - if model.classification?
+          / accuracy, confusion matrixes
+          - accept_values = cv.accept_values
+          - av = []
+          - if accept_values[1] =~ /^non/
+            - av << accept_values[0]
+            - av << accept_values[1]
+          - else
+            - av = accept_values
+          - keys = cv.accuracy.collect{|key, value| key}
+          - acc = cv.accuracy.collect{|key, value| value.signif(3)}
+          - tpr = cv.true_rate.collect{|key, hash| hash[av[0]].signif(3)}
+          - fpr = cv.true_rate.collect{|key, hash| hash[av[1]].signif(3)}
+          - pp = cv.predictivity.collect{|key, hash| hash[av[0]].signif(3)}
+          - np = cv.predictivity.collect{|key, hash| hash[av[1]].signif(3)}
+          %table.table.table-bordered.table-responsive.text-center.bg-white
+            %tr
+              %td.text-center.bg-light
+                = "Nr.#{idx+1}"
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Accuracy_and_precision", :rel=>"external"}
+                  Accuracy
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Sensitivity_and_specificity", :rel=>"external"}
+                  True positive rate (Sensitivity, Recall)
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Sensitivity_and_specificity", :rel=>"external"}
+                  True negative rate (Specificity)
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Positive_and_negative_predictive_values", :rel=>"external"}
+                  Positive predictive value (Precision)
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Positive_and_negative_predictive_values", :rel=>"external"}
+                  Negative predictive value
+            - keys.each_with_index do |key,idx|
+              %tr
+                / keys
+                %td.fit.text-right= key.gsub("_", " ")
+                / acc,accuray value:
+                %td= acc[idx]
+                / tpr,true positive rate
+                %td= tpr[idx]
+                / fpr,false positive rate
+                %td= fpr[idx]
+                / pp,positive predictions
+                %td= pp[idx]
+                / np,negative predictions
+                %td= np[idx]
+          %div.row.justify-content-center
+            %h6 Confusion matrix
+          %div.row{:id=>"matrix#{model.id}#{idx}"}
+            %table.table.table-borderless.table-responsive
+              %tr
+                %td.fit.text-center all
+                %td.fit.text-center confidence high
+                %td.fit.text-center confidence low
+              %tr.justify-content-around
+                / confusion matrix
+                - keys.each do |key|
+                  - matrix = cv.confusion_matrix[key]
+                  %td
+                    %table.table-sm.text-center
+                      %tr
+                        %td
+                        %td
+                        %td{:colspan=>"2"} measured
+                        %td
+                      %tr
+                        %td
+                        %td
+                        %td.border.bg-secondary.text-white active
+                        %td.border.bg-secondary.text-white inactive
+                      %tr
+                        %td.align-middle{:rowspan=>"2"} predicted
+                        %td.border.bg-secondary.text-white active
+                        %td.border.bg-white
+                          %b= matrix[0][0]
+                        %td.border.bg-white
+                          = matrix[0][1]
+                      %tr
+                        //%td
+                        %td.border.bg-secondary.text-white inactive
+                        %td.border.bg-white
+                          = matrix[1][0]
+                        %td.border.bg-white
+                          %b= matrix[1][1]
+          %div.row.justify-content-center
+            %h6 Probability plot
+          %div.row
+            %div.plot.mx-auto{:id=>"pplot#{model.id}#{idx}"}
+              %img{:src=>"/#{cv.id}.png", :alt=>"#{cv.id}.png"}
 
-    %br
-    Descriptors:
-    = model.model.algorithms["descriptors"]["method"]+","
-    = model.model.algorithms["descriptors"]["type"]
+        / regression
+        - if model.regression?
+          / rmse, mae, r_squared, pred nr, within intv, out intv
+          - keys = cv.rmse.collect{|key, value| key}
+          - rmse = cv.rmse.collect{|key, value| value.signif(3)}
+          - mae = cv.mae.collect{|key, value| value.signif(3)}
+          - rsq = cv.r_squared.collect{|key, value| value.signif(3)}
+          - nrp = cv.nr_predictions.collect{|key,value| value}
+          - wpi = cv.within_prediction_interval.collect{|key,value| value}
+          - opi = cv.out_of_prediction_interval.collect{|key,value| value}
+          %table.table.table-bordered.table-responsive.text-center.bg-white
+            %tr
+              %td.text-center.bg-light
+                = "Nr.#{idx+1}"
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"}
+                  RMSE
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"}
+                  MAE
+              %td
+                %a{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"<sup>2</sup>"
+              %td Number of predictions
+              %td Within prediction interval
+              %td Out of prediction interval
+            - keys.each_with_index do |key,idx|
+              %tr
+                / keys
+                %td.fit.text-right= key.gsub("_", " ")
+                / rsme:
+                %td= rmse[idx]
+                / mae:
+                %td= mae[idx]
+                / r_squared:
+                %td= rsq[idx]
+                / Predictions number:
+                %td= nrp[idx]
+                / Within prediction interval:
+                %td= wpi[idx]
+                / Out of prediction interval:
+                %td= opi[idx]
+          %div.row.justify-content-center
+            %h6 Correlation plot
+          %div.row
+            %div.plot.mx-auto{:id=>"cplot#{model.id}#{idx}"}
+              %img{:src=>"/#{cv.id}.png", :alt=>"#{cv.id}.png"}
+        - unless idx == crossvalidations.size-1
+          %hr
 
-%div.panel.panel-default
-  - if type == "Classification"
-    %div.panel-heading
-      %b Independent crossvalidations:
-  - else
-    %div.panel-heading
-      %b Independent crossvalidations (-log10 transformed):
-  %div.panel-body
-    /%div.row{:id=>"validations#{model.id}", :style=>"background-color:#f5f5f5;"}
-    %div.row{:id=>"validations#{model.id}"}
-      - crossvalidations.each do |cv|
-        %span.col-xs-4.col-sm-4.col-md-4.col-lg-4
-          = "Num folds:\t"
-          = cv.folds
-          %br
-          = "Num instances:\t"
-          = cv.nr_instances
-          %br
-          = "Num unpredicted"
-          = cv.nr_unpredicted
-          - if model.classification? 
-            %br
-            = "Accuracy:\t"
-            = cv.accuracy.round(3) if cv.accuracy
-            %br
-            = "Weighted accuracy:\t"
-            = cv.weighted_accuracy.round(3) if cv.weighted_accuracy
-            - if cv.true_rate
-              %br
-              = "True positive rate:\t"
-              = cv.true_rate[cv.accept_values[0]].round(3)
-              %br
-              = "True negative rate:\t"
-              = cv.true_rate[cv.accept_values[1]].round(3)
-            - if cv.predictivity
-              %br 
-              = "Positive predictive value:\t"
-              = cv.predictivity[cv.accept_values[0]].round(3)
-              %br
-              = "Negative predictive value:\t"
-              = cv.predictivity[cv.accept_values[1]].round(3)
-            %p
-            - ["confusion_matrix", "weighted_confusion_matrix"].each_with_index do |matrix,idx|
-              %b= (idx == 0 ? "Confusion Matrix" : "Weighted Confusion Matrix")
-              %table.table.table-condensed.table-borderless{:style=>"width:20%;"}
-                %tbody
-                  %tr
-                    %td
-                    %td
-                    %td 
-                      %b actual
-                    %td
-                    %td
-                  %tr
-                    %td
-                    %td
-                    %td active
-                    %td inactive
-                    -#%td total
-                  %tr
-                    %td 
-                      %b predicted
-                    %td active
-                    %td 
-                      =( idx == 1 ? cv.send(matrix)[0][0].round(3) : cv.send(matrix)[0][0])
-                    %td 
-                      =( idx == 1 ? cv.send(matrix)[0][1].round(3) : cv.send(matrix)[0][1])
-                    -#%td 
-                      =cv.confusion_matrix[0][0]+cv.confusion_matrix[0][1]
-                  %tr
-                    %td
-                    %td inactive
-                    %td 
-                      =( idx == 1 ? cv.send(matrix)[1][0].round(3) : cv.send(matrix)[1][0])
-                    %td 
-                      =( idx == 1 ? cv.send(matrix)[1][1].round(3) : cv.send(matrix)[1][1])
-                    -#%td 
-                      =cv.confusion_matrix[1][0]+cv.confusion_matrix[1][1]
-                  -#%tr
-                    %td
-                    %td total
-                    %td
-                      =cv.confusion_matrix[0][0]+cv.confusion_matrix[1][0]
-                    %td
-                      =cv.confusion_matrix[0][1]+cv.confusion_matrix[1][1]
-                    %td
-                      -#= "Confusion Matrix:\t"
-                      -#= cv.confusion_matrix
-                  %br
-            %br
-            /= "Confidence plot:"
-            /%p.plot
-            /  %img{:src=>"confp#{cv.id}.svg"}
-          - if model.regression?
-            %br
-            %a.ht5{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE:
-            = cv.rmse.round(3) if cv.rmse
-            %br
-            %a.ht5{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE:
-            = cv.mae.round(3) if cv.mae
-            %br 
-            %a.ht5{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"<sup>2</sup>"+":"
-            = cv.r_squared.round(3) if cv.r_squared
-            %br
-            /= "Confidence plot:"
-            /%p.plot
-            /  %img{:src=>"/confp#{cv.id}.svg"}
-            /%br
-            /= "Correlation plot"
-            /%p.plot
-            /  %img{:src=>"/corrp#{cv.id}.svg"}
-          
-%div.panel.panel-default
-  %div.panel-heading
-    %b QMRF:
-  %div.panel-body
-    %a.btn.btn-default.btn-xs{:href=>"#{to("/report/#{model.id}")}", :id=>"report#{model.id}", :style=>"font-size:small;"}
-      %span.glyphicon.glyphicon-download-alt
+%div.card.bg-light
+  %div.card-body
+    %h6.card-title QMRF:
+    %a.btn.btn-outline-info{:href=>"//#{$host_with_port}/predict/report/#{model.id}", :id=>"report#{model.id}", :style=>"font-size:small;"}
+      %span.fa.fa-download
       XML
+%br

data/views/neighbors.haml

@@ -1,83 +1,101 @@
-%div.results
-  %h3 Neighbors:
-  / tabs div
-  #tabs
-    %ul.nav.nav-tabs.nav-justified{:id=>"neighborTabs", :role=>"tablist", :style=>"width:100%;overflow-x:auto;"}
-      - @models.each_with_index do |model,i|
-        / get predictionFeature type
-        - m = Model::Lazar.find model.model_id.to_s
-        %li{:class => ("active" if i == 0)}
-          %a{:href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}}
-            = "#{model.endpoint} (#{model.species})"
-    %div.tab-content
-      - @predictions.each_with_index do |prediction,j|
-        #results.tab-pane{:id=>"#{j+1}", :class => ("active" if j == 0)}
-          :javascript
-            $(document).ready(function(){
-              $("table##{j+1}").tablesorter({
-                debug: false,
-                theme: "bootstrap",
-                headerTemplate: '',
-                widgets: ['columns', 'uitheme', 'stickyHeaders'],
-                widgetOptions: {
-                  stickyHeaders_attachTo : '.tab-content',
-                  stickyHeaders : '',
-                  stickyHeaders_offset : 0,
-                  stickyHeaders_cloneId : '-sticky',
-                  stickyHeaders_addResizeEvent : true,
-                  stickyHeaders_includeCaption : true,
-                  stickyHeaders_zIndex : 2,
-                  stickyHeaders_attachTo : null,
-                  stickyHeaders_xScroll : null,
-                  stickyHeaders_yScroll : null,
-                  stickyHeaders_filteredToTop: true
-                },
-                sortList: [[2,1]],
-                headers: {sorter: false},
-                widthFixed: false
-              });
-            });
-          - if prediction[:neighbors]
-            %div.table-responsive
-              %table{:id=>"#{j+1}", :style=>"border-style: solid;"}
-                %thead
-                  %tr
-                    %th.sorter-false{:style =>"vertical-align:middle;"}
-                      Compound
-                    %th.sorter-false{:style =>"vertical-align:middle;"}
-                      Measured Activity
-                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
-                    %th.sorter-false{:style =>"vertical-align:middle;"}
-                      Similarity
-                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"<a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://en.wikipedia.org/wiki/Jaccard_index\">Tanimoto/Jaccard</a> similarity based on <a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://openbabel.org/docs/dev/FileFormats/MolPrint2D_format.html\">Molprint2D</a> fingerprints."}, :style=>"z-index:auto+10;"}
-                %tbody
-                  - type = @model_types[j]
-                  - unit = @models[j].unit
-                - prediction[:neighbors].uniq.each_with_index do |neighbor,count|
-                  %tr
-                    / Compound
-                    - c = Compound.find(neighbor)
-                    %td{:style =>"vertical-align:middle;padding-left:1em;width:50%;"}
-                      %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(c.id.to_s)}/details"), :id=>"link#{j+1}#{count}"}}
-                        = c.svg
-                      %p= c.smiles
-                    
-                    / Measured Activity
-                    %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;white-space:nowrap;"}
-                      - if neighbor[:measurement].is_a?(Array)
-                        = (type == "Regression") ? neighbor[:measurement].collect{|value| "#{value.delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : neighbor[:measurement].join(", ")
-                      - else
-                        - if !neighbor[:measurement].nil?
-                          = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement]
-                    / Similarity = tanimoto
-                    %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;"}
-                      = neighbor[:similarity].round(3)
+%div.card.bg-light
+  %div.card-body
+    %div.card-title
+      %h3 Neighbors:
+    #tabs
+      %ul.nav.nav-pills.nav-justified{:id=>"neighborTabs", :role=>"tablist"}
+        - @models.each_with_index do |model,i|
+          / get predictionFeature type
+          - m = Model::Lazar.find model.model_id.to_s
+          %li.nav-item
+            %a.nav-link{:class => ("active" if i ==0), :href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}}
+              = "#{model.endpoint} (#{model.species})"
+      %div.tab-content
+        - @predictions.each_with_index do |prediction,j|
+          #results.tab-pane{:id=>"#{j+1}", :class => ("active" if j == 0)}
+            - if prediction[:neighbors]
+              %div.table-responsive
+                %table.table.table-bordered.table-hover{:id=>"nTable#{j+1}"}
+                  %thead
+                    %tr
+                      %th{:scope=>"col"}
+                        Compound
+                      %th{:scope=>"col"}
+                        Measured Activity
+                        %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
+                      %th{:scope=>"col"}
+                        Similarity
+                        %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"<a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://en.wikipedia.org/wiki/Jaccard_index\">Tanimoto/Jaccard</a> similarity based on <a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://openbabel.org/docs/dev/FileFormats/MolPrint2D_format.html\">Molprint2D</a> fingerprints."}, :style=>"z-index:auto+10;"}
+                  %tbody
+                    - type = @model_types[j]
+                    - unit = @models[j].unit
+                    - prediction[:neighbors].uniq.each_with_index do |neighbor,count|
+                      %tr
+                        / Compound
+                        - c = Compound.find(neighbor)
+                        %td
+                          %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: "//#{$host_with_port}/prediction/#{CGI.escape(c.id.to_s)}/details", :id=>"link#{j+1}#{count}"}}
+                            = embedded_svg(c.svg, :title=>"click for details")
+                        
+                        / Measured Activity
+                        %td
+                          - if neighbor[:measurement].is_a?(Array)
+                            = (type == "Regression") ? neighbor[:measurement].collect{|value| "#{value.delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : neighbor[:measurement].join(", ")
+                          - else
+                            - if !neighbor[:measurement].nil?
+                              = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement]
+                          - if c.cid && c.cid != "0"
+                            %p
+                              %a{:href=>PUBCHEM_CID_URI+c.cid, :rel => "external"}
+                                PubChem
+                                %span.fa.fa-xs.fa-external-link
+                        / Similarity = tanimoto
+                        %td
+                          = neighbor[:similarity].round(3)
 
-          - else
-            %span.btn.btn-default.disabled
-              = "Not enough similar compounds in training dataset"
+            - else
+              %span.btn.btn-default.disabled
+                = "Not enough similar compounds in training dataset"
 
-          %div.modal.fade{:id=>"details#{j+1}", :role=>"dialog"}
-            %div.modal-dialog.modal-lg
-              %div.modal-content
+            %div.modal.fade{:id=>"details#{j+1}", :role=>"dialog"}
+              %div.modal-dialog.modal-lg{:role=>"document"}
+                %div.modal-content
+- @models.each_with_index do |model,i|
+  :javascript
+    // sort all neighbors tables by similarity
+    document.addEventListener('DOMContentLoaded', function() {
+      var id = '#{i+1}';
+      var table, rows, switching, i, x, y, shouldSwitch;
+      table = document.getElementById("nTable"+id);
+      switching = true;
+      /* Make a loop that will continue until
+      no switching has been done: */
+      while (switching) {
+        // Start by saying: no switching is done:
+        switching = false;
+        rows = table.rows;
+        /* Loop through all table rows (except the
+        first, which contains table headers): */
+        for (i = 1; i < (rows.length - 1); i++) {
+          // Start by saying there should be no switching:
+          shouldSwitch = false;
+          /* Get the two elements you want to compare,
+          one from current row and one from the next: */
+          x = rows[i].getElementsByTagName("TD")[2];
+          y = rows[i + 1].getElementsByTagName("TD")[2];
+          // Check if the two rows should switch place:
+          if (parseFloat(x.innerHTML) < parseFloat(y.innerHTML)) {
+            // If so, mark as a switch and break the loop:
+            shouldSwitch = true;
+            break;
+          }
+        }
+        if (shouldSwitch) {
+          /* If a switch has been marked, make the switch
+          and mark that a switch has been done: */
+          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+          switching = true;
+        }
+      }
+    }, false);