-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcraigplot.html
120 lines (108 loc) · 3.83 KB
/
craigplot.html
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
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="rgroups.js"></script>
<script src="plot.js"></script>
<style>
.ui-dialog .ui-dialog-content {
position: relative;
font-size: 1.2em;
}
#canvas {
position: absolute;
left: 0;
top: 0;
}
#canvas2 {
position: absolute;
left: 0;
top: 0;
background-color: transparent;
pointer-events: none;
}
</style>
</head>
<body>
<div style="position: relative;">
<canvas id="canvas" style="z-index: 1;"></canvas>
<canvas id="canvas2" style="z-index: 2;"></canvas>
</div>
<div id="pop" style="background-color:#fff; visibility:hidden; z-index: 1;"><img id="molimage"></img></div>
<span id="tags"></span>
<div id="info" title="About Craig plot 2.0" style="visibility:hidden;">
<p><b>Craig plot 2.0 by Peter Ertl</b></p>
<ul>
<li>click the point to select it</li>
<li>shift click to "glue" the molecule image to the point</li>
<li>use the option menu (the cogged wheel) to select subset of substituents based on their type, attachment point, size etc and set other options</li>
<li>use the menu items top left to clean the selection or download the selected substituents</li>
<li>you may zoom to a part of the plot by drag-select</li>
<li>the following shortcut keys are available: Esc (reset all), a (select all visible points), t (show tags for all visible points), c (show the "original" Craig plot)</li>
</ul>
When you find this tool useful, cite please the <a href="https://jcheminf.biomedcentral.com/">corresponding paper</a> (coming) in the Journal of Cheminformatics.
<p>This tool is released under the BSD-3-Clause license. The code is available at the <a href="https://github.com/peter-ertl/craigplot">Github</a>.
</div>
<div id="options" title="Options" style="visibility:hidden;">
Show substituents with root type:<br>
<select multiple id="opt-type">
<option value=0>all</option>
<option value=1>aliphatic carbon</option>
<option value=2>aromatic carbon</option>
<option value=3>carbonyl</option>
<option value=4>oxygen</option>
<option value=5>nitrogen</option>
<option value=6>other</option>
</select><br>
<small>(multiple selections are possible)</small>
<p>
Show only
<select id="opt-upto">
<option>all</option>
<option>100</option>
<option>200</option>
<option>500</option>
<option>1000</option>
<option>2000</option>
<option>5000</option>
<option>Craig set</option>
</select>
most common substituents
<p>
Show only substituents attached to:<br>
<select multiple id="opt-attachedto">
<option value=0>any atom</option>
<option value=1>aliphatic carbon</option>
<option value=2>aromatic carbon</option>
<option value=3>carbonyl</option>
<option value=4>oxygen</option>
<option value=5>nitrogen</option>
</select>
<br>
<small>(multiple selections are possible)</small>
<p>
Show substituents with up to:
<select id="opt-natoms">
<option>all</option>
<option>10</option>
<option>8</option>
<option>5</option>
</select>
atoms
<p>
<input type="checkbox" id="opt-legend" checked>Show legend
<input type="checkbox" id="opt-axes">Show axes
<input type="checkbox" id="opt-smallimg">Small molecule images
<p>
<button id="opt-submit">Update plot</button>
<button id="opt-reset">Reset all</button>
<button id="opt-cancel">Cancel</button>
</div>
<a href="#" id="download" download="selected.txt" type="text/plain"></a>
</body>
</html>