From f3de3d19931ee789d9305b1163d826f4e64a4dfd Mon Sep 17 00:00:00 2001
From: Saul Johnson <saul.a.johnson@gmail.com>
Date: Mon, 31 Jul 2017 13:55:40 +0100
Subject: [PATCH] Add SMILES rendering

---
 src/coffee/main.coffee    | 33 +++++++++++++++++++++++++++------
 templates/index.html.twig | 18 ++++++++++++++++++
 web/index.php             | 12 ++++++++++--
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/coffee/main.coffee b/src/coffee/main.coffee
index d29f29f..7371d5d 100644
--- a/src/coffee/main.coffee
+++ b/src/coffee/main.coffee
@@ -8,11 +8,15 @@ $(document).ready ->
 
   previewElement = $ 'body'
   compoundTextBox = $ '.comp-name'
+  smilesTextBox = $ '.comp-smiles'
   invalidCompoundMessage = $ '.row-error'
 
   getCompoundName = ->
     encodeURIComponent compoundTextBox.val().replace(/\s/g, '')
 
+  getCompoundSmiles = ->
+    encodeURIComponent smilesTextBox.val()
+
   # URL builder functions for API.
   
   buildUrl = (width, height, foreground, background, name) ->
@@ -21,23 +25,36 @@ $(document).ready ->
   buildMoleculeOnlyUrl = (width, height, foreground, name) ->
     "/api/name/#{width}/#{height}/#{foreground}/#{name}"
 
+  buildSmilesMoleculeOnlyUrl = (width, height, foreground, name) ->
+    "/api/smiles/#{width}/#{height}/#{foreground}/#{name}"
+
   checkMoleculeName = (name, success, fail) ->
     $.get "/api/name/exists/#{name}", (data) ->
       if data then success() else fail()
-    
+
+  checkSmiles = (smiles, success, fail) ->
+    success()
+
   # Actions to take when we refresh the preview.
 
   failPreview = ->
     invalidCompoundMessage.show()
 
-  refreshPreview = ->
-    compoundName = getCompoundName()
-    url = buildMoleculeOnlyUrl screenWidth, screenHeight, foregroundColor, getCompoundName()
-    previewElement.css 'background', "url(#{url})"
+  resetBackground = (url) ->
+    alert url
+    previewElement.css 'background', "url('#{url}')"
     previewElement.css 'background-color', "##{backgroundColor}"
     previewElement.css 'background-position', '50% 50%'
     previewElement.css 'background-repeat', 'no-repeat'
-    
+
+  refreshPreview = ->
+    url = buildMoleculeOnlyUrl screenWidth, screenHeight, foregroundColor, getCompoundName()
+    resetBackground(url)
+
+  refreshSmilesPreview = ->
+    url = buildSmilesMoleculeOnlyUrl screenWidth, screenHeight, foregroundColor, getCompoundSmiles()
+    resetBackground(url)
+
   # Let's initialize the color pickers.
     
   $('.picker-fg').spectrum
@@ -67,6 +84,10 @@ $(document).ready ->
   $('.update-btn').on 'click', (e) ->
     invalidCompoundMessage.hide()
     checkMoleculeName getCompoundName(), refreshPreview, failPreview
+
+  $('.update-smiles-btn').on 'click', (e) ->
+    # invalidCompoundMessage.hide()
+    checkSmiles getCompoundSmiles(), refreshSmilesPreview, failPreview
    
   # Download button should open rendered image for download.
    
diff --git a/templates/index.html.twig b/templates/index.html.twig
index 73fbe40..895cb60 100644
--- a/templates/index.html.twig
+++ b/templates/index.html.twig
@@ -62,6 +62,24 @@
                         </div>
                     </div>
                 </div>
+                <div class="tool-section">
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <div class="section-lbl">SMILES</div>
+                            <hr>
+                        </div>
+                    </div>
+                    <div class="row mtop-10">
+                        <div class="col-xs-12">
+                            <input type="text" class="comp-smiles dark-tbox" value="CCN(CC)C1=CC2=C(C=C1)N=C3C4=CC=CC=C4C(=O)C=C3O2">
+                        </div>
+                    </div>
+                    <div class="row mtop-10">
+                        <div class="col-xs-12 text-right">
+                            <button class="update-smiles-btn">Update</button>
+                        </div>
+                    </div>
+                </div>
                 <div class="tool-section mtop-10">
                     <div class="row">
                         <div class="col-xs-12">
diff --git a/web/index.php b/web/index.php
index 8a4b3d3..915b257 100644
--- a/web/index.php
+++ b/web/index.php
@@ -97,7 +97,11 @@ $app->get('/api/smiles/{width}/{height}/{bgcolor}/{fgcolor}/{smiles}', function
     $img->insert($molecule, 'center');
     
     // Send image out
-    echo $img->response();
+    return new \Symfony\Component\HttpFoundation\Response(
+        $img->response('png'),
+        200,
+        ['Content-Type' => 'image/png']
+    );
 });
 
 $app->get('/api/name/{width}/{height}/{bgcolor}/{fgcolor}/{name}', function ($width, $height, $bgcolor, $fgcolor, $name) use ($app, $twig, $config) {
@@ -116,7 +120,11 @@ $app->get('/api/name/{width}/{height}/{bgcolor}/{fgcolor}/{name}', function ($wi
 });
 
 $app->get('/api/smiles/{width}/{height}/{color}/{smiles}', function ($width, $height, $color, $smiles) use ($app, $twig, $config) {
-    echo renderScaledMolecule($width, $height, $color, $smiles)->response();
+    return new \Symfony\Component\HttpFoundation\Response(
+        renderScaledMolecule($width, $height, $color, $smiles)->response('png'),
+        200,
+        ['Content-Type' => 'image/png']
+    );
 });
 
 $app->get('/api/name/exists/{name}', function ($name) use ($config) {