Add button to change background color of protein

dms-viz · Mar 12, 2024 · 911f695 · 911f695
1 parent c39745a
commit 911f695
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/v0/css/style.css b/v0/css/style.css
@@ -459,6 +459,7 @@ kbd {
   min-width: 300px;
   min-height: 300px;
   max-height: 600px;
+  border-radius: 10px
 }
 
 .heatmap-tooltip,

diff --git a/v0/index.html b/v0/index.html
@@ -251,6 +251,10 @@ <h1 class="logo">
                 <label for="ligandColor">Ligand Color </label>
                 <input type="color" id="ligandColor" />
               </div>
+              <div class="accordion-option color">
+                <label for="screenColor">Background Color </label>
+                <input type="color" id="screenColor" />
+              </div>
               <div class="accordion-option">
                 <label for="proteinElement"
                   >Color Protein By Element

diff --git a/v0/js/main.js b/v0/js/main.js
@@ -343,6 +343,9 @@ function setUpProteinOptionListeners() {
   d3.select("#ligandColor").on("change", function () {
     State.updateProteinOptions(this);
   });
+  d3.select("#screenColor").on("change", function () {
+    State.updateProteinOptions(this);
+  });
   d3.select("#ligandElement").on("change", function () {
     this.value = this.checked ? "true" : "false";
     State.updateProteinOptions(this);

diff --git a/v0/js/protein.js b/v0/js/protein.js
@@ -32,7 +32,7 @@ export class Protein extends EventTarget {
 
     // Initialize the stage object for the target element
     protein.stage = new NGL.Stage(protein.config.parentElement, {
-      backgroundColor: "#FFFFFF",
+      backgroundColor: protein.config.screenColor,
     });
 
     // Set the initial size of the stage
@@ -183,6 +183,10 @@ export class Protein extends EventTarget {
   updateRepresentation() {
     let protein = this;
 
+    // Set the background color of the stage
+    protein.stage.setParameters({
+      backgroundColor: protein.config.screenColor,
+    });
     protein.stage.getRepresentationsByName("dataChains").dispose();
     protein.component.addRepresentation(protein.config.proteinRepresentation, {
       sele: protein.config.showNonCarbonHydrogens
@@ -439,7 +443,6 @@ export class Protein extends EventTarget {
       ? `protein and (${selectedSitesStrings.join(" or ")})`
       : undefined;
 
-    console.log(protein.currentSelectionSiteString);
     // Create a representation of the selected sites on the protein structure
     if (protein.currentSelectionSiteString !== undefined) {
       protein.stage.getRepresentationsByName("currentSelection").dispose();

diff --git a/v0/js/tool.js b/v0/js/tool.js
@@ -127,6 +127,7 @@ export class Tool {
     tool.initColorPicker(d3.select("#proteinColor"), tool.proteinColor);
     tool.initColorPicker(d3.select("#backgroundColor"), tool.backgroundColor);
     tool.initColorPicker(d3.select("#ligandColor"), tool.ligandColor);
+    tool.initColorPicker(d3.select("#screenColor"), tool.screenColor);
     tool.initCheckbox(d3.select("#ligandElement"), tool.ligandElement);
     tool.initCheckbox(d3.select("#proteinElement"), tool.proteinElement);
     tool.initCheckbox(d3.select("#proteinElement"), tool.proteinElement);
@@ -219,6 +220,7 @@ export class Tool {
         proteinColor: tool.proteinColor,
         backgroundColor: tool.backgroundColor,
         ligandColor: tool.ligandColor,
+        screenColor: tool.screenColor,
         ligandElement: tool.ligandElement,
         proteinElement: tool.proteinElement,
         backgroundOpacity: tool.backgroundOpacity,
@@ -608,6 +610,7 @@ export class Tool {
       proteinColor: { abbrev: "pc", default: "#c9c9c9", json: false },
       backgroundColor: { abbrev: "bc", default: "#c9c9c9", json: false },
       ligandColor: { abbrev: "lc", default: "#c9c9c9", json: false },
+      screenColor: { abbrev: "sc", default: "#FFFFFF", json: false },
       ligandElement: { abbrev: "le", default: false, json: false },
       proteinElement: { abbrev: "pce", default: false, json: false },
       proteinOpacity: { abbrev: "po", default: "1", json: false },