Finalizing update.

CHANGES.md

 Changes
 =======
 
-
 2.0 WIP
 -------
 
@@ -13,6 +12,8 @@ Added output_json option.
 
 Created BINANA.js library, and made web app.
 
+Changed name of development branch to `main`.
+
 1.3
 ---
 

web_app/src/BINANAInterface.ts

@@ -139,6 +139,7 @@ export function highlight(interactionName: string): void {
 
     // Render sticks of protein model too.
     ThreeDMol.showSticksAsAppropriate();
+
     receptorMol["setStyle"](
         {
             "index": recAtomInfs.map(
@@ -149,9 +150,14 @@ export function highlight(interactionName: string): void {
         {
             "stick": { "radius": 0.1 },  // 0.15
             "cartoon": { "color": 'spectrum' },
-        }
+        },
+        true  // add
     );
 
+    // Show protein ribbon again (otherwise sometimes parts of ribbon
+    // disappear).
+    ThreeDMol.showProteinRibbon(true);
+
     viewer["render"]();
 }
 

web_app/src/UI/ThreeDMol.ts

@@ -35,15 +35,24 @@ export function showSticksAsAppropriate(): void {
         );
         viewer["render"]();
     } else {
-        // Set up the style.
+        showProteinRibbon();
+    }
+}
+
+export function showProteinRibbon(add=false): void {
+    // Set up the style.
+
+    if (!add) {
         store.state["receptorMol"].setStyle({}, {});  // This is better. Clear first.
-        viewer["render"]();
-        store.state["receptorMol"].setStyle(
-            {},
-            { "cartoon": { "color": 'spectrum' } }
-        );
-        viewer["render"]();
     }
+    
+    viewer["render"]();
+    store.state["receptorMol"].setStyle(
+        {},
+        { "cartoon": { "color": 'spectrum' } },
+        add
+    );
+    viewer["render"]();
 }
 
 /** An object containing the vue-component computed functions. */

web_app/src/UI/UI.ts

@@ -17,16 +17,16 @@ export function setup(): void {
     new Vue({
         "el": '#app',
         "store": Store.store,
-        "template": `
+        "template": /*html*/ `
             <div class="container-fluid">
                 <open-modal></open-modal>
                 <convert-file-modal></convert-file-modal>
                 <draw-smiles-modal></draw-smiles-modal>
-                <div id="no-mobile">
+                <!-- <div id="no-mobile">
                     <b-jumbotron class="jumbo" header="BINANA ${VERSION}" lead="BINding ANAlyzer: Identify and visualize ligand/receptor interactions">
                         <p>BINANA ${VERSION} is not designed to work on mobile phones. Please use a device with a larger screen.</p>
                     </b-jumbotron>
-                </div>
+                </div> -->
 
                 <b-jumbotron class="jumbo" style="background-image:url(${Utils.curPath()}binana_logo.jpg);" header="BINANA ${VERSION}" lead="BINding ANAlyzer: Identify and visualize ligand/receptor interactions">
                     <p>Brought to you by the <a target="_blank" href="http://durrantlab.com">Durrant Lab</a> and <a target="_blank" href="https://reporter.nih.gov/project-details/10189658">NIH 5R01GM132353</a>.</p>

web_app/src/Version.ts

@@ -2,4 +2,5 @@
 // LICENSE.md or go to https://opensource.org/licenses/Apache-2.0 for full
 // details. Copyright 2020 Jacob D. Durrant.
 
-export let VERSION = "1.0.0";
+// Good to match BINANA version here.
+export let VERSION = "2.0";

web_app/src/index.html

@@ -9,6 +9,7 @@
         -->
         <meta charset="utf-8">
         <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>BINANA</title>
     </head>
 

web_app/src/index.ts

@@ -9,6 +9,9 @@ import { VERSION } from "./Version";
 
 console.log("BINANA Web App " + VERSION);
 
+// @ts-ignore
+console.log(__BUILD_TIME__);
+
 declare var ga;
 
 VueSetup.setup();

web_app/src/styles/style.css

@@ -186,8 +186,15 @@ td {
 }
 
 @media (min-width: 600px) {
-  #no-mobile {
+  /* #no-mobile {
     display: none;
+  } */
+  /* Fix tab-title width on mobile. */
+}
+
+@media (max-width: 400px) {
+  .tabs .col-auto {
+    width: 100%;
   }
 }
 
@@ -232,4 +239,4 @@ div.better-btn-spacing {
 
 .btn-group-toggle.d-inline-block, .btn-group-toggle.d-inline-block label {
     width: 100%;
-}
+}
\ No newline at end of file

web_app/utils/webpack.configs/webpack.common.js

 const path = require('path');
 var DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
+const { DefinePlugin } = require('webpack');
 // const webpack = require('webpack');
 
 module.exports = {
     plugins: [
         new DuplicatePackageCheckerPlugin(),
         // new webpack.ExtendedAPIPlugin()  // Gives hash as __webpack_hash__
+        new DefinePlugin({
+            __BUILD_TIME__: '"Built on ' + new Date().toLocaleString() + '"'
+        })
     ],
     module: {
         rules: [