From 96619f2a02aa33391aade0f56fa5682e72c1b591 Mon Sep 17 00:00:00 2001
From: Jack Sundberg <jacksundberg123@gmail.com>
Date: Mon, 19 Jun 2023 14:45:21 -0400
Subject: [PATCH] =?UTF-8?q?update=20molecule=20web=20ui=20=F0=9F=8D=85=20?=
 =?UTF-8?q?=20(#467)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base_data_types/molecule.html             | 191 ++++++++++++++----
 .../templates/core_components/site_base.html  |  11 +-
 .../core_components/table_entry.html          |  34 ++--
 3 files changed, 171 insertions(+), 65 deletions(-)

diff --git a/src/simmate/website/templates/core_components/base_data_types/molecule.html b/src/simmate/website/templates/core_components/base_data_types/molecule.html
index 21afc2324..9810d75a3 100644
--- a/src/simmate/website/templates/core_components/base_data_types/molecule.html
+++ b/src/simmate/website/templates/core_components/base_data_types/molecule.html
@@ -1,46 +1,149 @@
 <!-- Molecule Info -->
-<div class="container p-4">
-    <h3>Molecule:</h3>
-    <script>doodle_molecule('{{ calculation.sdf_str }}', {{ calculation.id }}, 200)</script>
-    <ul>
-        <li>
-            <b>SMILES string:</b> {{ calculation.smiles }}
-        </li>
-        <li>
-            <b>INCHI:</b> {{ calculation.inchi }}
-        </li>
-        <li>
-            <b>INCHI key:</b> {{ calculation.inchi_key }}
-        </li>
-        <li>
-            <b>Number of atoms (non-Hydrogen):</b> {{ calculation.num_atoms }}
-        </li>
-        <li>
-            <b>Number of stereocenters:</b> {{ calculation.num_stereocenters }}
-        </li>
-        <li>
-            <b>Number of rings:</b> {{ calculation.num_rings }}
-        </li>
-        <li>
-            <b>Number of H acceptors:</b> {{ calculation.num_h_acceptors }}
-        </li>
-        <li>
-            <b>Number of H donors:</b> {{ calculation.num_h_donors }}
-        </li>
-        <li>
-            <b>Functional Groups (+ counts):</b> {{ calculation.functional_groups }}
-        </li>
-        <li>
-            <b>LogP (predicted):</b> {{ calculation.log_p_rdkit }}
-        </li>
-        <li>
-            <b>TPSA (predicted):</b> {{ calculation.tpsa_rdkit }}
-        </li>
-        <li>
-            <b>SDF (c-tab) string:</b> <small>{{ calculation.molecule|linebreaks }}</small>
-        </li>
-        <li>
-            <b>Original input:</b> <small>{{ calculation.molecule_original|linebreaks }}</small>
-        </li>
-    </ul>
+<div class="row py-2">
+    <div class="col-xl-4">
+        <div class="border border-dark mt-4">
+            <script>doodle_molecule('{{ calculation.sdf_str }}', {{ calculation.id }}, 300)</script>
+        </div>
+    </div>
+    <div class="col-xl-8">
+        <!-- Molecule formats -->
+        <ul class="nav nav-tabs nav-bordered mb-3">
+            <li class="nav-item">
+                <a href="#smiles"
+                   data-bs-toggle="tab"
+                   aria-expanded="false"
+                   class="nav-link active ">
+                    <i class="mdi mdi-home-variant d-md-none d-block"></i>
+                    <span class="d-none d-md-block">SMILES</span>
+                </a>
+            </li>
+            <li class="nav-item">
+                <a href="#inchi"
+                   data-bs-toggle="tab"
+                   aria-expanded="true"
+                   class="nav-link">
+                    <i class="mdi mdi-account-circle d-md-none d-block"></i>
+                    <span class="d-none d-md-block">INCHI</span>
+                </a>
+            </li>
+            <li class="nav-item">
+                <a href="#inchi_key"
+                   data-bs-toggle="tab"
+                   aria-expanded="false"
+                   class="nav-link">
+                    <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+                    <span class="d-none d-md-block">INCHI KEY</span>
+                </a>
+            </li>
+            <li class="nav-item">
+                <a href="#sdf_ctab"
+                   data-bs-toggle="tab"
+                   aria-expanded="false"
+                   class="nav-link">
+                    <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+                    <span class="d-none d-md-block">SDF (c-tab)</span>
+                </a>
+            </li>
+            <li class="nav-item">
+                <a href="#origmol"
+                   data-bs-toggle="tab"
+                   aria-expanded="false"
+                   class="nav-link">
+                    <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+                    <span class="d-none d-md-block">Original Input</span>
+                </a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div class="tab-pane show active" id="smiles">
+                <p class="text-center">{{ calculation.smiles }}</p>
+            </div>
+            <div class="tab-pane" id="inchi">
+                <p class="text-center">{{ calculation.inchi }}</p>
+            </div>
+            <div class="tab-pane" id="inchi_key">
+                <p class="text-center">{{ calculation.inchi_key }}</p>
+            </div>
+            <div class="tab-pane" id="sdf_ctab">
+                <p>
+                    <small>{{ calculation.molecule|linebreaks }}</small>
+                </p>
+            </div>
+            <div class="tab-pane" id="origmol">
+                <p>
+                    <small>{{ calculation.molecule_original|linebreaks }}</small>
+                </p>
+            </div>
+        </div>
+        <!-- end molecule formats -->
+        <!-- table of properties -->
+        <div class="row pt-2">
+            <div class="col-xl-6">
+                <table class="table table-centered table-striped mb-0 border">
+                    <tbody>
+                        <tr>
+                            <td>non-H Atoms</td>
+                            <td>{{ calculation.num_atoms }}</td>
+                        </tr>
+                        <tr>
+                            <td>Stereocenters</td>
+                            <td>{{ calculation.num_stereocenters }}</td>
+                        </tr>
+                        <tr>
+                            <td>Rings</td>
+                            <td>{{ calculation.num_rings }}</td>
+                        </tr>
+                        <tr>
+                            <td>H acceptors</td>
+                            <td>{{ calculation.num_h_acceptors }}</td>
+                        </tr>
+                        <tr>
+                            <td>H donors</td>
+                            <td>{{ calculation.num_h_donors }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="col-xl-6">
+                <table class="table table-centered table-striped mb-0 border">
+                    <tbody>
+                        <tr>
+                            <td>
+                                Log P (predicted)
+                            </br>
+                            <small>(octanol-water)</small>
+                        </td>
+                        <td>{{ calculation.log_p_rdkit|floatformat:1 }}</td>
+                    </tr>
+                    <tr>
+                        <td>TPSA (predicted)</td>
+                        <td>{{ calculation.tpsa_rdkit|floatformat:1 }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <!-- end table of properties -->
+</div>
+</div>
+<hr>
+<div class="row pt-4">
+    <div class="col-xl-5">
+        <table class="table table-centered table-striped mb-0 border">
+            <thead class="table-primary">
+                <tr>
+                    <th>Functional Group / Substructure</th>
+                    <th>Counts (#)</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for key, value in calculation.functional_groups.items %}
+                    <tr>
+                        <td>{{ key }}</td>
+                        <td>{{ value }}</td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 </div>
diff --git a/src/simmate/website/templates/core_components/site_base.html b/src/simmate/website/templates/core_components/site_base.html
index b8b020fab..1a996f076 100644
--- a/src/simmate/website/templates/core_components/site_base.html
+++ b/src/simmate/website/templates/core_components/site_base.html
@@ -47,11 +47,11 @@
         <!-- Custom Javascript (this should move to a static file)-->
         <script>
             //ChemDoodle.DEFAULT_STYLES.
-            ChemDoodle.DEFAULT_STYLES.bondLength_2D = 14.4;
-            ChemDoodle.DEFAULT_STYLES.bonds_width_2D = .6;
-            ChemDoodle.DEFAULT_STYLES.bonds_saturationWidthAbs_2D = 2.6;
-            ChemDoodle.DEFAULT_STYLES.bonds_hashSpacing_2D = 2.5;
-            ChemDoodle.DEFAULT_STYLES.atoms_font_size_2D = 10;
+            ChemDoodle.DEFAULT_STYLES.bondLength_2D = 40;
+            ChemDoodle.DEFAULT_STYLES.bonds_width_2D = 1.6;
+            ChemDoodle.DEFAULT_STYLES.bonds_saturationWidthAbs_2D = 5.2;
+            ChemDoodle.DEFAULT_STYLES.bonds_hashSpacing_2D = 5;
+            ChemDoodle.DEFAULT_STYLES.atoms_font_size_2D = 20;
             ChemDoodle.DEFAULT_STYLES.atoms_font_families_2D = ['Helvetica', 'Arial', 'sans-serif'];
             ChemDoodle.DEFAULT_STYLES.atoms_displayTerminalCarbonLabels_2D = false;
             ChemDoodle.DEFAULT_STYLES.atoms_useJMOLColors = true;
@@ -104,6 +104,7 @@
                 let canvas = document.getElementById(canvas_id);
                 canvas.removeAttribute("hidden");
                 canvas.classList.remove("ChemDoodleWebComponent");
+                canvas.classList.add("p-0"); // bug-fix for aspect ratio
             };
         </script>
         <!-- Some pages may require extra lines in the header such as loading extra libraries -->
diff --git a/src/simmate/website/templates/core_components/table_entry.html b/src/simmate/website/templates/core_components/table_entry.html
index d76107673..65c872e3a 100644
--- a/src/simmate/website/templates/core_components/table_entry.html
+++ b/src/simmate/website/templates/core_components/table_entry.html
@@ -1,22 +1,24 @@
 {% load getattribute %}
+<hr>
 <!-- Fields from the base database table -->
-<div class="container p-4">
-    <h3>Base Information:</h3>
-    <ul>
-        <li>
-            <b>Database Entry ID:</b> {{ calculation.id }}
-        </li>
-        <li>
-            <b>Created at:</b> {{ calculation.created_at }}
-        </li>
-        <li>
-            <b>Last updated at:</b> {{ calculation.updated_at }}
-        </li>
-        <li>
-            <b>Input Source:</b> {{ calculation.source }}
-        </li>
-    </ul>
+<div class="row">
+    <div class="col-xl-4">
+        <div class="text-center p-1 bg-primary text-light opacity-90">
+            <b>{{ calculation.source }} ID:</b> {{ calculation.id }}
+        </div>
+    </div>
+    <div class="col-xl-4">
+        <div class="text-center p-1 bg-secondary text-light opacity-75">
+            <b>Created:</b> {{ calculation.created_at }}
+        </div>
+    </div>
+    <div class="col-xl-4">
+        <div class="text-center p-1 bg-secondary text-light opacity-75">
+            <b>Last updated:</b> {{ calculation.updated_at }}
+        </div>
+    </div>
 </div>
+<hr>
 <!-- Iterate through the main tables that we've prebuilt pages for -->
 {% if calculation.table_name == "StaticEnergy" %}
     {% include "core_components/base_data_types/static-energy.html" %}