Merge pull request #125 from sulcgroup/plugin

ErikPoppleton · web-flow · commit cb1584639b2e · 2024-09-19T09:16:34.000+02:00
addig plugin functionality with a demo in examples
diff --git a/dist/UI/UI.js b/dist/UI/UI.js
@@ -994,7 +994,7 @@ class fluxGraph {
                 //    this.chart.toBase64Image();
                 //}
             },
-            responsiveAnimationDuration: 0,
+            responsiveAnimationDuration: 0, // animation duration after a resize
             responsive: true,
             title: {
                 display: true,
diff --git a/dist/api/plugin_api.js b/dist/api/plugin_api.js
@@ -0,0 +1,33 @@
+// let's define a storage structure for the plugin API
+// it will sit in local storage and load the code for the individual plugins named as key 
+// and the code as value packed away in a JSON object hidden at the key "plugins" in local storage
+// this is the object that will be stored in local storage
+// it will contain the code for the individual plugins
+// the key will be the name of the plugin, the value will be the code
+let plugins = {};
+// this function will load the plugins from local storage
+// it will be called at the beginning of the program
+function loadPlugins() {
+    let pluginsString = localStorage.getItem("plugins");
+    if (pluginsString) {
+        plugins = JSON.parse(pluginsString);
+    }
+    // if there are no plugins in local storage, we will create an empty object
+    else {
+        plugins = {}; //"test": plugin_code};
+    }
+    //iterate over all the plugins and load them
+    for (let plugin in plugins) {
+        eval(plugins[plugin]);
+    }
+}
+// this function will save the plugins to local storage (it will be called any time we add a new plugin)
+function savePlugins() {
+    localStorage.setItem("plugins", JSON.stringify(plugins));
+}
+function addPlugin(name, plugin_code) {
+    plugins[name] = plugin_code;
+    eval(plugin_code);
+    savePlugins();
+}
+loadPlugins();
diff --git a/dist/file_handling/order_parameter_selector.js b/dist/file_handling/order_parameter_selector.js
@@ -58,12 +58,12 @@ let loadHyperSelector = () => {
                 // mode:"dataset", // it is possible to remove the line view from the plot 
                 // intersect:true  // on hover, but i find it to distracting 
             },
-            responsiveAnimationDuration: 0,
+            responsiveAnimationDuration: 0, // animation duration after a resize
             scales: {
                 xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Time' }, gridLines: { drawOnChartArea: false } }],
                 yAxes: [{ display: true, gridLines: { drawOnChartArea: false } }],
             },
-            spanGaps: true,
+            spanGaps: true, // handle null in the chart data
             annotation: {
                 events: ["click"],
                 annotations: [
@@ -143,7 +143,7 @@ let handleParameterDrop = (files) => {
             else {
                 console.log("adding new axis");
                 myChart.options.scales.yAxes.push({
-                    type: 'linear',
+                    type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                     display: true,
                     position: 'left',
                     id: `y-axis-id${axis_counter}`,
@@ -159,7 +159,7 @@ let handleParameterDrop = (files) => {
                         labels: labels,
                         datasets: [
                             {
-                                label: parameter_name,
+                                label: parameter_name, //files[0].name.split(".")[0],
                                 data: data,
                                 fill: false,
                                 borderColor: chartColorMap.get(),
@@ -170,7 +170,7 @@ let handleParameterDrop = (files) => {
                 }
                 else {
                     myChart.data.datasets.push({
-                        label: parameter_name,
+                        label: parameter_name, //files[i].name.split(".")[0],
                         data: data,
                         fill: false,
                         borderColor: chartColorMap.get(),
diff --git a/dist/file_handling/output_file.js b/dist/file_handling/output_file.js
@@ -128,9 +128,9 @@ function getNewIds(useNew = false) {
     });
     // these subtypes are not implemented in the CG-oxDNA model, just used for a 'relative' subtype that oxDNA will take as input
     let gsSubtypes = {
-        subtypelist: [],
-        masses: [],
-        radii: [],
+        subtypelist: [], // per particle subtype assignment
+        masses: [], //
+        radii: [], //
         subtype: -1
     };
     // Next, generic sphere objects
@@ -477,9 +477,9 @@ function makeUNFOutput(name) {
             let naStrandsSchema = {
                 "id": strand.id,
                 "name": strand.label,
-                "isScaffold": strand.getLength() > 1000 ? true : false,
-                "naType": strand.end5.isDNA() ? "DNA" : "RNA",
-                "color": strand.end5.color ? '#'.concat(strand.end5.color.getHexString()) : '',
+                "isScaffold": strand.getLength() > 1000 ? true : false, //entirely arbitrary, but generally right.
+                "naType": strand.end5.isDNA() ? "DNA" : "RNA", // Nucleotide type is actually pretty poorly defined in oxView, so this is the best I can do
+                "color": strand.end5.color ? '#'.concat(strand.end5.color.getHexString()) : '', // OxView defines colors on a per-nucleotide level while UNF defines it at the strand level.
                 "fivePrimeId": strand.end5.id,
                 "threePrimeId": strand.end3.id,
                 "pdbFileId": 0,
@@ -504,7 +504,7 @@ function makeUNFOutput(name) {
             let aaChainSchema = {
                 "id": strand.id,
                 "chainName": strand.label,
-                "color": strand.end5.color ? '#'.concat(strand.end5.color.getHexString()) : '',
+                "color": strand.end5.color ? '#'.concat(strand.end5.color.getHexString()) : '', // OxView defines colors on a per-nucleotide level while UNF defines it at the strand level.
                 "pdbFileId": 0,
                 "nTerm": strand.end5.id,
                 "cTerm": strand.end3.id,
diff --git a/dist/file_handling/pdb_worker.js b/dist/file_handling/pdb_worker.js
@@ -20,48 +20,48 @@ this.onmessage = function (e) {
     postMessage(ret, undefined);
 };
 var backboneColors = [
-    new THREE.Color(0xfdd291),
-    new THREE.Color(0xffb322),
-    new THREE.Color(0x437092),
+    new THREE.Color(0xfdd291), //light yellow
+    new THREE.Color(0xffb322), //goldenrod
+    new THREE.Color(0x437092), //dark blue
     new THREE.Color(0x6ea4cc), //light blue
 ];
 var nucleosideColors = [
-    new THREE.Color(0x4747B8),
-    new THREE.Color(0xFFFF33),
+    new THREE.Color(0x4747B8), //A or K; Royal Blue
+    new THREE.Color(0xFFFF33), //G or C; Medium Yellow
     //C or A
-    new THREE.Color(0x8CFF8C),
+    new THREE.Color(0x8CFF8C), //Medium green
     //T/U or T
-    new THREE.Color(0xFF3333),
+    new THREE.Color(0xFF3333), //Red
     //E
-    new THREE.Color(0x660000),
+    new THREE.Color(0x660000), //Dark Brown
     //S
-    new THREE.Color(0xFF7042),
+    new THREE.Color(0xFF7042), //Medium Orange
     //D
-    new THREE.Color(0xA00042),
+    new THREE.Color(0xA00042), //Dark Rose
     //N
-    new THREE.Color(0xFF7C70),
+    new THREE.Color(0xFF7C70), //Light Salmon
     //Q
-    new THREE.Color(0xFF4C4C),
+    new THREE.Color(0xFF4C4C), //Dark Salmon
     //H
-    new THREE.Color(0x7070FF),
+    new THREE.Color(0x7070FF), //Medium Blue
     //G
-    new THREE.Color(0xEBEBEB),
+    new THREE.Color(0xEBEBEB), // light GREY
     //P
-    new THREE.Color(0x525252),
+    new THREE.Color(0x525252), //Dark Grey
     //R
-    new THREE.Color(0x00007C),
+    new THREE.Color(0x00007C), //Dark Blue
     //V
-    new THREE.Color(0x5E005E),
+    new THREE.Color(0x5E005E), //Dark Purple
     //I
-    new THREE.Color(0x004C00),
+    new THREE.Color(0x004C00), //Dark Green
     //L
-    new THREE.Color(0x455E45),
+    new THREE.Color(0x455E45), //Olive Green
     //M
-    new THREE.Color(0xB8A042),
+    new THREE.Color(0xB8A042), //Light Brown
     //F
-    new THREE.Color(0x534C42),
+    new THREE.Color(0x534C42), //Olive Grey
     //Y
-    new THREE.Color(0x8C704C),
+    new THREE.Color(0x8C704C), //Medium Brown
     //W
     new THREE.Color(0x4F4600), //Olive Brown
 ];
diff --git a/dist/main.js b/dist/main.js
@@ -122,6 +122,7 @@ var lut, devs;
 const editHistory = new EditHistory(); // Track do/undo
 var tmpSystems = []; // Track memory for newly created systems
 var topologyEdited = false; // to keep track of if the topology was edited at any point.
+
 function resetScene(resetCamera = true) {
     elements.clear();
     while (systems.length > 0) {
@@ -177,6 +178,7 @@ function resetScene(resetCamera = true) {
     if (resetCamera) {
         controls.reset();
     }
+
     render();
 }
 ///////////////////////////////////////////////////////////////////////////////////////////////////
diff --git a/dist/scene/mesh_setup.js b/dist/scene/mesh_setup.js
@@ -38,49 +38,49 @@ function switchMaterial(material) {
 }
 // Default colors for the backbones
 var backboneColors = [
-    new THREE.Color(0xfdd291),
-    new THREE.Color(0xffb322),
-    new THREE.Color(0x437092),
+    new THREE.Color(0xfdd291), //light yellow
+    new THREE.Color(0xffb322), //goldenrod
+    new THREE.Color(0x437092), //dark blue
     new THREE.Color(0x6ea4cc), //light blue
 ];
 // define nucleoside colors
 var nucleosideColors = [
-    new THREE.Color(0x4747B8),
-    new THREE.Color(0xFFFF33),
+    new THREE.Color(0x4747B8), //A or K; Royal Blue
+    new THREE.Color(0xFFFF33), //G or C; Medium Yellow
     //C or A
-    new THREE.Color(0x8CFF8C),
+    new THREE.Color(0x8CFF8C), //Medium green
     //T/U or T
-    new THREE.Color(0xFF3333),
+    new THREE.Color(0xFF3333), //Red
     //E
-    new THREE.Color(0x660000),
+    new THREE.Color(0x660000), //Dark Brown
     //S
-    new THREE.Color(0xFF7042),
+    new THREE.Color(0xFF7042), //Medium Orange
     //D
-    new THREE.Color(0xA00042),
+    new THREE.Color(0xA00042), //Dark Rose
     //N
-    new THREE.Color(0xFF7C70),
+    new THREE.Color(0xFF7C70), //Light Salmon
     //Q
-    new THREE.Color(0xFF4C4C),
+    new THREE.Color(0xFF4C4C), //Dark Salmon
     //H
-    new THREE.Color(0x7070FF),
+    new THREE.Color(0x7070FF), //Medium Blue
     //G
-    new THREE.Color(0xEBEBEB),
+    new THREE.Color(0xEBEBEB), // light GREY
     //P
-    new THREE.Color(0x525252),
+    new THREE.Color(0x525252), //Dark Grey
     //R
-    new THREE.Color(0x00007C),
+    new THREE.Color(0x00007C), //Dark Blue
     //V
-    new THREE.Color(0x5E005E),
+    new THREE.Color(0x5E005E), //Dark Purple
     //I
-    new THREE.Color(0x004C00),
+    new THREE.Color(0x004C00), //Dark Green
     //L
-    new THREE.Color(0x455E45),
+    new THREE.Color(0x455E45), //Olive Green
     //M
-    new THREE.Color(0xB8A042),
+    new THREE.Color(0xB8A042), //Light Brown
     //F
-    new THREE.Color(0x534C42),
+    new THREE.Color(0x534C42), //Olive Grey
     //Y
-    new THREE.Color(0x8C704C),
+    new THREE.Color(0x8C704C), //Medium Brown
     //W
     new THREE.Color(0x4F4600), //Olive Brown
 ];
diff --git a/examples/demo_plugin/highlight_overstretched.js b/examples/demo_plugin/highlight_overstretched.js
@@ -0,0 +1,44 @@
+//This is a demo plugin that highlights overstretched positions in red.
+
+let plugin_name = "HOS";
+
+// The actual plugin code has to be a string, so we will define it here
+let plugin_code = `
+//let's write a test plugin, adding a button to the UI
+// this function will add a button to the UI
+function HSO_Plugin() {
+    let button = document.createElement("button");
+    // we will set the inner text of the button
+    button.innerText = "Highlight Overstretched DNA";
+    // we will add an event listener to the button
+    button.addEventListener("click", () => {
+        // we go over all the elements, collecting the strands of the ones that are overstretched
+        // you can change the threshold to a different value but say anything which is longer than .6 is overstretched
+        const delta = 0.6;
+
+            // find everything that is more than 5 ox units away from its n3
+            let p3_extended = new Set();
+            elements.forEach((b,id) => {
+                if(b.n3){
+                    let p1 = b.getPos();
+                    let p2 = b.n3.getPos();
+                    let dist = p1.distanceTo(p2);
+                    if(dist > delta){ 
+                        p3_extended.add(b);
+                        p3_extended.add(b.n3);
+                    }
+            }});
+            if(p3_extended.size == 0){
+                notify("No overstretched DNA found");
+                return;
+            }
+            colorElements(new THREE.Color(1,0,0),[... p3_extended])
+    });
+    // we will add the button to the UI
+    document.querySelector("#plugin-pane").appendChild(button);
+}
+HSO_Plugin();
+`;
+
+// register the plugin with view
+addPlugin(plugin_name, plugin_code);
diff --git a/index.html b/index.html
@@ -382,6 +382,8 @@ <h2>TacoxDNA importer</h2>
             <li ondblclick="view.sectionClicked()"><a href="#section-camera">Camera</a></li>
             <li ondblclick="view.sectionClicked()"><a href="#section-dynamics">Dynamics</a></li>
             <li ondblclick="view.sectionClicked()"><a href="#section-protein">Protein</a></li>
+            <li ondblclick="view.sectionClicked()"><a href="#section-plugins">Plugins</a></li>
+            
         </ul>
 
         <div class="content-holder">
@@ -1178,6 +1180,32 @@ <h2>TacoxDNA importer</h2>
                     </button>
                 </div>
             </div>
+
+
+            <!-- Plugin pane-->
+            <div class="section" id="section-plugins">
+                <div class=" group" style="height: 100px">
+                    <div class="row flex-align-center" >
+                        <div class="row">   
+                            <div class="group">
+                                <div >
+                                    <button class="ribbon-button" onclick="localStorage.setItem('plugins', {});"
+                                        title="Clean all plugins from memory.">
+                                        <!-- <span class="mif-2x">VR</span> -->
+                                        <img src="img/ico/delete.svg" height="18px">
+                                        <span class="caption">Clean Plugins</span>
+                                    </button>
+
+                                </div>
+                                <span class="title">Plugin control</span>
+                            </div>
+                         
+                            <div class="group" id="plugin-pane"></div>
+                        </div>     
+                    </div>
+                </div>
+            </div>
+
         </div>
     </nav>
 
@@ -1343,6 +1371,8 @@ <h2>TacoxDNA importer</h2>
         <script src="./dist/file_handling/plateDB.js"></script>
         <script src="./dist/editing/distance.js"></script>
         <script src="./dist/editing/selections.js"></script>
+        <script src="./dist/api/plugin_api.js"></script>
+        
         <script>
             //https://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t
             function inIframe () {
diff --git a/ts/api/plugin_api.ts b/ts/api/plugin_api.ts
diff --git a/ts/main.ts b/ts/main.ts
diff --git a/tsconfig.json b/tsconfig.json
