Commit bba643b4 authored by Hervé  MENAGER's avatar Hervé MENAGER
Browse files

synchronize MarvinJS and SMILES textarea

also about #83


Former-commit-id: 4d5800a515f12234019d909490d6ab55df11c6a1
parent a4391e4a
var molToSmiles = function(molStr, callback){
$.ajax({
url: '/utils/mol2smi',
data: {'molString':molStr},
success: function(data){
callback(data.smiles);
}
});
};
var smilesToMol = function(smiStr, callback){
$.ajax({
url: '/utils/smi2mol',
data: {'smiString':smiStr},
success: function(data){
var molStr = data.mol;
callback(molStr);
}
});
};
\ No newline at end of file
class MarvinModal {
constructor(iframeId, modalId, textAreaId, applyId){
this.iframeEl = $('#' + iframeId);
this.modalEl = $('#' + modalId);
this.applyEl = $('#' + applyId);
this.textAreaEl = $('#' + textAreaId);
this.marvinSketcherInstance = null;
MarvinJSUtil.getEditor("marviniframe").then(function(sketcherInstance) {
this.marvinSketcherInstance = sketcherInstance;
this.marvinSketcherInstance.on('molchange', function(){
this.exportSmiles(function(smilesString){
this.textAreaEl.val(smilesString);
}.bind(this));
}.bind(this));
}.bind(this));
this.modalEl.on('shown.bs.modal', function(){
//NB: this must be setup only once the modal is shown otherwise
// it doesn't work with Firefox (see https://bugzilla.mozilla.org/show_bug.cgi?id=941146)
var value = $('#marviniframe').attr('data-smiles');
this.importSmiles(value);
this.textAreaEl.val(value);
}.bind(this));
this.applyEl.click(function(){
this.modalEl.modal('hide');
this.exportSmiles(function(smilesString){
modifyUrl('similar_to',smilesString);
}.bind(this));
}.bind(this));
this.textAreaEl.on('input', function(){
this.importSmiles(this.textAreaEl.val())
}.bind(this));
}
exportSmiles(callback){
this.marvinSketcherInstance.exportStructure("mol").then(function(molStr) {
molToSmiles(molStr, callback);
}.bind(this));
}
importSmiles(smilesString){
if(smilesString!=''){
smilesToMol(smilesString, function(molString){
return this.marvinSketcherInstance.importStructure("mol", molString);
}.bind(this));
}
}
}
$(document).ready(function(){
var marvinModal = new MarvinModal("marviniframe",'modal-marvin', 'smiles-textarea', 'marvinApplyButton');
});
\ No newline at end of file
......@@ -7,6 +7,8 @@
<script src="/static/marvinjs-18/js/util.js"></script>
<script src="/static/marvinjs-18/js/marvinjslauncher.js"></script>
<script src="/static/marvinjs-18/gui/lib/promise-1.0.0.min.js"></script>
<script src="/static/js/ippidb-compoundws.js"></script>
<script src="/static/js/ippidb-marvinjsmodal.js"></script>
{% endblock %}
{% block content %}
......
......@@ -8,53 +8,17 @@
</button>
</div>
<div class="modal-body">
Sketch or upload (in .mol format and in 2D only) the query structure here
<iframe id="marviniframe" src="/static/marvin-ippidbeditor.html" data-smiles="{{ smiles }}" style="overflow: hidden; min-width: 700px; min-height: 500px; border: 1px solid darkgray;" />
<p>Paste the SMILES of your molecule here:</p>
<textarea id="smiles-textarea" style="width: 100%"></textarea>
<p><b>or</b></p>
<p>Sketch or upload (in .mol format and in 2D only) the query structure here:</p>
<iframe id="marviniframe" src="/static/marvin-ippidbeditor.html" data-smiles="{{ smiles }}" style="overflow: hidden; width:100%; min-height: 500px; border: 1px solid darkgray;" />
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="marvinApplyButton" type="button" class="btn btn-primary">Apply</button>
</div>
<script>
document.getElementById("marviniframe").addEventListener("load", function(){
var marvinSketcherInstance;
MarvinJSUtil.getEditor("marviniframe").then(function(sketcherInstance) {
marvinSketcherInstance = sketcherInstance;
$('#modal-marvin').on('shown.bs.modal', function (e) {
var smilesToLoad = $('#marviniframe').attr('data-smiles');
if(smilesToLoad!=''){
$.ajax({
url: '/utils/smi2mol',
data: {'smiString':smilesToLoad},
success: function(data){
var molString = data.mol;
marvinSketcherInstance.importStructure("mol", molString).catch(function(error, toto) {
console.log("error importing MOL file into MarvinJS:", error);
});
}
});
}
});
$('#marvinApplyButton').click(function(){
$('#modal-marvin').modal('hide');
marvinSketcherInstance.exportStructure("mol").then(function(source) {
$.ajax({
url: '/utils/mol2smi',
data: {'molString':source},
success: function(data){
modifyUrl('similar_to',data.smiles)
}
});
}, function(error) {
alert("Molecule export failed: "+error);
});
});
}, function(error) {
alert("Loading of the sketcher failed"+error);
});
});
</script>
</div>
</div>
</div>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment