added guicolor

awesome-panel · May 25, 2021 · 4f9445a · 4f9445a
1 parent 618c560
commit 4f9445a
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 30 deletions.
diff --git a/examples/reference/JSMEEditor.ipynb b/examples/reference/JSMEEditor.ipynb
@@ -94,7 +94,7 @@
    "outputs": [],
    "source": [
     "settings = pn.Param(editor,\n",
-    "    parameters=[\"height\", \"width\", \"sizing_mode\", \"subscriptions\", \"format\", \"options\"],\n",
+    "    parameters=[\"height\", \"width\", \"sizing_mode\", \"subscriptions\", \"format\", \"options\", \"guicolor\"],\n",
     "    widgets={\n",
     "        \"options\": {\"height\": 300},\n",
     "    })"

diff --git a/panel_chemistry/bokeh_extensions/jsme_editor.py b/panel_chemistry/bokeh_extensions/jsme_editor.py
@@ -23,3 +23,5 @@ class JSMEEditor(HTMLBox):
     mol = String()
     mol3000 = String()
     sdf = String()
+
+    guicolor = String()
diff --git a/panel_chemistry/bokeh_extensions/jsme_editor.ts b/panel_chemistry/bokeh_extensions/jsme_editor.ts
@@ -115,6 +115,10 @@ export class JSMEEditorView extends HTMLBoxView {
             console.log("options change", this.model.options)
             this.setJSMEOptions()
         })
+        this.connect(this.model.properties.guicolor.change, () => {
+            console.log("options change", this.model.options)
+            this.setGUIColor()
+        })
     }
 
     render(): void {
@@ -124,32 +128,33 @@ export class JSMEEditorView extends HTMLBoxView {
         const container = div({class: "jsme-editor", id: id});
         this.el.appendChild(container)
         this.jsmeElement = new this.JSME(id, this.getHeight(), this.getWidth(), {
-            // "options": "query,hydrogens,fullScreenIcon",
+            "options": this.model.options.join(","),
+            "guicolor": this.model.guicolor
         });
         this.jsmeElement.readGenericMolecularInput(this.model.value)
         resetOtherModelValues(this.model, this.jsmeElement)
-        this.setJSMEOptions()
+        setModelValues(this.model, this.jsmeElement)
+
         const this_ = this;
-        // function handleTimeOut(){
-        //     this_.valueChanged=false
-        //     setModelValues(this_.model, this_.jsmeElement)
-        // }
         function showEvent(event: any){
             console.log("event", event)
             this_.valueChanging = true
             setModelValues(this_.model, this_.jsmeElement)
             this_.valueChanging = false
         }
         this.jsmeElement.setAfterStructureModifiedCallback(showEvent);
-        setModelValues(this.model, this.jsmeElement)
+
         console.log("render - end")
     }
 
-
+    setGUIColor(){
+        console.log("setGUIColor", this.model.guicolor)
+        this.jsmeElement.setUserInterfaceBackgroundColor(this.model.guicolor)
+    }
 
     setJSMEOptions(){
         const options = this.model.options.join(",")
-        console.log("options", options)
+        console.log("setJSMEOptions", options)
         this.jsmeElement.options(options)
     }
 
@@ -198,6 +203,8 @@ export namespace JSMEEditor {
         sdf: p.Property<string>,
 
         subscriptions: p.Property<string[]>
+
+        guicolor: p.Property<string>,
     }
 }
 
@@ -226,6 +233,7 @@ export class JSMEEditor extends HTMLBox {
             mol3000: [String, ""],
             sdf: [String, ""],
             subscriptions: [ Array(String),   [] ],
+            guicolor: [String, "#c0c0c0"],
         }))
     }
 }
diff --git a/panel_chemistry/widgets/jsme_editor.py b/panel_chemistry/widgets/jsme_editor.py
@@ -74,29 +74,68 @@ class JSMEEditor(Widget):
     }
 
     # Parameters to be mapped to Bokeh model properties
-    value = param.String(default="", doc="""A value definining the structure of the molecule. The
+    value = param.String(
+        default="",
+        doc="""A value definining the structure of the molecule. The
     value provided from Python can be any of the available `format` values. The value returned
-    from the client will be in the specified `format` value.""")
-    format = param.ObjectSelector("jme", objects=VALUE_FORMATS, doc="""
+    from the client will be in the specified `format` value.""",
+    )
+    format = param.ObjectSelector(
+        "jme",
+        objects=VALUE_FORMATS,
+        doc="""
     The format of the structure returned from the client. Can be any of "jme" (default), "smiles",
-    "mol", "mol3000", "sdf\"""")
+    "mol", "mol3000", "sdf\"""",
+    )
     # Note: Could be implemented as a child class of booleans/ checkboxes instead.
-    options = param.ListSelector(objects=OPTIONS, doc="""A list of options to apply to the editor.
-    Default is [], i.e. to use the default settings.""")
+    options = param.ListSelector(
+        objects=OPTIONS,
+        doc="""A list of options to apply to the editor.
+    Default is [], i.e. to use the default settings.""",
+    )
 
-    subscriptions = param.ListSelector(default=[],
-    objects=VALUE_FORMATS, doc="""
+    subscriptions = param.ListSelector(
+        default=[],
+        objects=VALUE_FORMATS,
+        doc="""
     A list of structure formats to "subscribe" to changes of. Can be any of "jme", "smiles",
-    "mol", "mol3000", "sdf". Default is []."""
+    "mol", "mol3000", "sdf". Default is [].""",
+    )
+
+    jme = param.String(
+        default=NOT_SUBSCRIBED,
+        constant=True,
+        doc="""
+    The structure in jme format""",
+    )
+    smiles = param.String(
+        default=NOT_SUBSCRIBED,
+        constant=True,
+        doc="""
+    The structure in smiles format""",
+    )
+    mol = param.String(
+        default=NOT_SUBSCRIBED,
+        constant=True,
+        doc="""
+    The structure in mol format""",
+    )
+    mol3000 = param.String(
+        default=NOT_SUBSCRIBED,
+        constant=True,
+        doc="""
+    The structure in mol3000 format""",
+    )
+    sdf = param.String(
+        default=NOT_SUBSCRIBED,
+        constant=True,
+        label="SDF",
+        doc="""
+    The structure in sdf format""",
     )
 
-    jme = param.String(default=NOT_SUBSCRIBED, constant=True, doc="""
-    The structure in jme format""")
-    smiles = param.String(default=NOT_SUBSCRIBED, constant=True, doc="""
-    The structure in smiles format""")
-    mol = param.String(default=NOT_SUBSCRIBED, constant=True, doc="""
-    The structure in mol format""")
-    mol3000 = param.String(default=NOT_SUBSCRIBED, constant=True, doc="""
-    The structure in mol3000 format""")
-    sdf = param.String(default=NOT_SUBSCRIBED, constant=True, label="SDF", doc="""
-    The structure in sdf format""")
+    guicolor = param.Color(
+        default="#c0c0c0",
+        doc="""
+    Background color of the GUI elements in RGB hex format. Default is "#c0c0c0".""",
+    )
diff --git a/tests/tests/test_jsme_editor.py b/tests/tests/test_jsme_editor.py
@@ -16,7 +16,15 @@ def test_jsme_editor_app():
 
     settings = pn.Param(
         editor,
-        parameters=["height", "width", "sizing_mode", "subscriptions", "format", "options"],
+        parameters=[
+            "height",
+            "width",
+            "sizing_mode",
+            "subscriptions",
+            "format",
+            "options",
+            "guicolor",
+        ],
         widgets={
             "options": {"height": 300},
         },