<!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>