rev: tip chemfp_examples/templates/neighbor_browser.html -rw-r--r-- 2.7 KiB View raw Log this file
871d0037866b — Andrew Dalke added description of how the cli output SDF is generated 8 days ago 
                                                                                
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
<!doctype html>
<html>
<head>
<title>ChEMBL Neighbor Browser</title>
</head>
<body>

<style>
.warning {
  color: red;
}

/* The boxes containing each neighbor hit. */
.neighbor {
  min-width: 9em;
  display: inline-block;
  text-align: center;
  border-style: outset;
}
/* Define a simple color gradient, ranging from "0" to "10". */
/* "10" is exactly 1.0. "9" is 0.9 <= score < 1.0, etc. */
/* The colors comes from matplotlib's "viridis" color map. */
.neighbor .score[data-category="0"] {
  color: white; 
  background-color: rgb(68, 1, 84);
}
.neighbor .score[data-category="1"] {
  color: white; 
  background-color: rgb(72, 36, 117);
}
.neighbor .score[data-category="2"] {
  color: white; 
  background-color: rgb(65, 67, 135);
}
.neighbor .score[data-category="3"] {
  color: white; 
  background-color: rgb(52, 95, 141);
}
.neighbor .score[data-category="4"] {
  color: yellow; 
  background-color: rgb(41, 120, 142);
}
.neighbor .score[data-category="5"] {
  color: yellow; 
  background-color: rgb(32, 145, 140);
}
.neighbor .score[data-category="6"] {
  color: yellow; 
  background-color: rgb(34, 168, 132);
}
.neighbor .score[data-category="7"] {
  color: black; 
  background-color: rgb(68, 191, 112);
}
.neighbor .score[data-category="8"] {
  color: black; 
  background-color: rgb(122, 210, 81);
}
.neighbor .score[data-category="9"] {
  color: black; 
  background-color: rgb(189, 223, 38);
}
.neighbor .score[data-category="10"] {
  color: black; 
  background-color: rgb(254, 231, 36);
}
</style>

{% if errmsg %}
<span class="warning">Unable to use query '{{ chembl_id }}': {{ errmsg }}</span>
<h1>ChEMBL neighbor browser</h1>
{% else %}
<h1>Neighbors of {{ chembl_id }}</h1>
  <img src="{{ depict_url(chembl_id)}}" width="100px" height="100px">

{% endif %}


<form>
 <label>
  ChEMBL ID:
 <input type="text" name="id" value="{{ chembl_id }}">
 </label>
 <label>
 k:
 <select name="k" onchange="javascript:this.form.submit()">
   {% for k_value in app_config.k_values %}
   <option value="{{ k_value }}"{% if k == k_value %} selected="selected"{% endif %}>{{ k_value }}</option>
   {% endfor %}
  </select>
</label>
  
<button type="submit">Search</button>
</form>

{% if hits is not none %}
Number of neighbors: {{ hits|length }}<br/>
Search time: {{ "%.1f" % (search_time*1000.0) }} milliseconds.<br>

{% for hit in hits %}
<div class="neighbor">
  <div class="score" data-category="{{ "%d" % (hit[1] * 10) }}">{{ "%.4f" % hit[1] }}</div>
  <div class="image">
    <a href="{{ search_url(hit[0]) }}">
      <img src="{{ depict_url(hit[0]) }}" width="100px" height="100px">
    </a>
  </div>
  <div class="title">
    <a href="{{ chembl_url(hit[0]) }}">{{ hit[0] }}</a>
  </div>
</div>
{% endfor %}

{% endif %}

</body>
</html>