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
153
|
%div.well
%a.btn.btn-xs.btn-warning{:href => to('/predict'), :style=>"margin-bottom:1em;"}
%i.glyphicon.glyphicon-menu-left
New Prediction
%ul.nav.nav-tabs
%li
%a{:href=>"#query", :data=>{:toggle=>"tab"}} Query
%li
%a{:href=>"#match", :data=>{:toggle=>"tab"}} Match
%li.active
%a{:href=>"#prediction", :data=>{:toggle=>"tab"}} Prediction
%li
%a{:href=>"#neighbors", :data=>{:toggle=>"tab"}} Neighbors
%div.tab-content
#query.tab-pane.fade
%span.help-block
your query was
- @input.each_with_index do |v,id|
- key = v[0]
- val = v[1]
%h5= key
%input.form-control{:id=>id,:type=>"text",:value=>"#{val}", :disabled=>"true"}
#match.tab-pane.fade
- if @prediction[:match]
%table{:id=>"match", :style=>"border-style: 1px solid black;margin-top:10px;"}
%thead
%tr
%th
ID
%th
Composition
%th
Tox
%th
Physchem
%tbody
%tr
/ ID
%td
%h5= @prediction[:match].keys[0]
/ composition
%td
- @prediction[:match].values[0]["composition"].each do |k,v|
%h5= k
%p= v
/ tox
%td
- @prediction[:match].values[0]["tox"].each do |k,v|
%h5= k
%p= v
/ physchem
%td
- @prediction[:match].values[0]["physchem"].each do |k,v|
%h5= k
%p= v
- else
%h5 No match
#prediction.tab-pane.in.active
- if @prediction[:prediction]
- @prediction[:prediction].each do |k,v|
%h5= k
- if v == nil
%p no value
- else
%p= v.round(5)
#neighbors.tab-pane.fade
- if @prediction[:neighbors]
:javascript
$(document).ready(function(){
$("table#match").tablesorter({
debug: false,
theme: "bootstrap",
headerTemplate: '{content} {icon}',
widgets: ['uitheme', 'stickyHeaders'],
widgetOptions: {
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
},
headers: {0: {sorter: false}, 1: {sorter: false}, 2: {sorter: false}, 3: {sorter: false}},
sortList: [[1,1]],
widthFixed: false
});
});
$(document).ready(function(){
$("table#neighbors").tablesorter({
debug: false,
theme: "bootstrap",
headerTemplate: '{content} {icon}',
widgets: ['uitheme', 'stickyHeaders'],
widgetOptions: {
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: [[1,1]],
widthFixed: false
});
});
%div.table-responsive
%table.tablesorter{:id=>"neighbors", :style=>"border-style: 1px solid black;margin-top:10px;"}
%thead
%tr
%th{:style =>"vertical-align:middle;"}
ID
%th{:style =>"vertical-align:middle;"}
Similarity
%th{:style =>"vertical-align:middle;"}
Composition
%th{:style =>"vertical-align:middle;"}
Tox
%th{:style =>"vertical-align:middle;"}
Physchem
%tbody
- @prediction[:neighbors].each do |neighbor|
%tr
/ ID
%td
%h5= neighbor["id"]
/ Similarity
%td
%h5= neighbor["similarity"].round(3)
/ Composition
%td
- neighbor["composition"].each do |k,v|
%h5= k
%p= v
/ Tox
%td
- neighbor["tox"].each do |k,v|
%h5= k
%p= v.round(3)
/ Physchem
%td
- neighbor["physchem"].each do |k,v|
%h5= k
%p= v
|
