New update by using a dictionary

osscar-org · May 23, 2020 · 102a35e · 102a35e
1 parent ba11a7b
commit 102a35e
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 84 deletions.
diff --git a/docs/source/introduction.rst b/docs/source/introduction.rst
@@ -15,9 +15,9 @@ Besides, elements can be disabled by calling the Python variable
 Traitlets
 ************
 
-* **selected_element** : The list of the selected elements.
-* **selected_colors** : The list of the colors of the selected elements.
-* **selected_states** : The list of the states of the selected elements.
+* **selected_element** : The dictionary of the selected elements with their states.
+* **states** : The number of states for the periodic table.
+* **selected_colors** : The colors of the selected elements.
 * **selected_disabled** : The list of the disabled elements.
 
 Acknowledges

diff --git a/examples/introduction.ipynb b/examples/introduction.ipynb
@@ -9,7 +9,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 142,
+   "execution_count": 28,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -26,18 +26,18 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 143,
+   "execution_count": 29,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "1cfffa4578f84ba58b2a2f9b098ad06f",
+       "model_id": "8570bc95bb644a79b80ac79558ecb7a4",
        "version_major": 2,
        "version_minor": 0
       },
       "text/plain": [
-       "PTableWidget(selected_colors=['red', 'green', 'yellow'], states=3)"
+       "PTableWidget(selected_colors=['red', 'green', 'yellow', '#a6cee3', '#b2df8a', '#fdbf6f', '#6a3d9a', '#b15928',…"
       ]
      },
      "metadata": {},
@@ -46,7 +46,7 @@
    ],
    "source": [
     "# Show the widget\n",
-    "widget = PTableWidget(states = 3, selected_colors = ['red', 'green', 'yellow'], unselected_color='pink')\n",
+    "widget = PTableWidget(states = 100, selected_elements = {\"Be\":0}, selected_colors = ['red', 'green', 'yellow'], unselected_color='pink')\n",
     "widget"
    ]
   },
@@ -64,55 +64,77 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Select the element and set the state:\n",
+    "Init the selected elements by using a dictionary:\n",
     "\n",
     "```python\n",
-    "widget.set_element_state(\"Ce\", 2)\n",
-    "widget.set_element_state(\"Am\", 1)\n",
+    "widget.selected_elements = {\"La\": 0, \"Ce\": 1, \"Pr\": 2}\n",
     "```"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 144,
+   "execution_count": 30,
    "metadata": {},
    "outputs": [],
    "source": [
-    "widget.set_element_state(\"Ce\", 2)\n",
-    "widget.set_element_state(\"Am\", 1)"
+    "widget.selected_elements = {\"La\": 0, \"Ce\": 1, \"Pr\": 2}"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Only select the elements. If the element has been selected before, it will keep the previous state.\n",
-    "Ohterwise, the state will be set as zero. \n",
+    "Change or set element state by:\n",
+    "\n",
+    "```python\n",
+    "widget.set_element_state(\"Nd\",0)\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 31,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "widget.set_element_state(\"Nd\",0)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "However, you cannot use widget.selected_elements[\"Nd\"] = 1 to set the states of the elements."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Get the elements have the same state:\n",
     "\n",
     "```python\n",
-    "widget.selected_elements = [\"Ce\", \"Am\", \"Bk\", \"Cf\"]\n",
     "widget.get_elements_by_state(0)\n",
     "```"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 145,
+   "execution_count": 32,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "text/plain": [
-       "['Bk', 'Cf']"
+       "['La', 'Nd']"
       ]
      },
-     "execution_count": 145,
+     "execution_count": 32,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
-    "widget.selected_elements = [\"Ce\", \"Am\", \"Bk\", \"Cf\"]\n",
     "widget.get_elements_by_state(0)"
    ]
   },
@@ -132,13 +154,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 146,
+   "execution_count": 33,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "025efad6db12462bbf269a6557974515",
+       "model_id": "2d4a6739f3c447a18de4daf5b06cc8b1",
        "version_major": 2,
        "version_minor": 0
       },
@@ -179,13 +201,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 147,
+   "execution_count": 34,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "89001b02f50b4aabaafc2a86457d337f",
+       "model_id": "35ecada85d6b4088b8359bc140b4c5ec",
        "version_major": 2,
        "version_minor": 0
       },
@@ -232,13 +254,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 148,
+   "execution_count": 35,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "e0753276121f49b5a977eb4e96ceafbe",
+       "model_id": "682a3d7e344d413a830e85954880f60f",
        "version_major": 2,
        "version_minor": 0
       },
@@ -274,13 +296,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 149,
+   "execution_count": 36,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ee04372070ca45e4a9c70d057bf1836d",
+       "model_id": "06fb30933f3e4f61905c2c1e54c2f4bd",
        "version_major": 2,
        "version_minor": 0
       },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "widget-periodictable",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A jupyter widget to select chemical elements from the periodic table.",
   "keywords": [
     "jupyter",

diff --git a/src/widget.ts b/src/widget.ts
@@ -28,10 +28,10 @@ var elementTable: string[][] = [
   ["K", "Ca", "Sc", "Ti", "V", "Cr", "Mn", "Fe", "Co","Ni", "Cu", "Zn", "Ga", "Ge", "As", "Se", "Br", "Kr"],
   ["Rb", "Sr", "Y", "Zr", "Nb", "Mo", "Tc", "Ru", "Rh","Pd", "Ag", "Cd", "In", "Sn", "Sb", "Te", "I", "Xe"],
   ["Cs", "Ba", "*", "Hf", "Ta", "W", "Re", "Os", "Ir","Pt", "Au", "Hg", "Tl", "Pb", "Bi", "Po", "At", "Rn"],
-  ["Fr", "Ra", "*", "Rf", "Db", "Sg", "Bh", "Hs", "Mt","Ds", "Rg", "Cn", "Nh", "Fi", "Mc", "Lv", "Ts", "Og"],
+  ["Fr", "Ra", "#", "Rf", "Db", "Sg", "Bh", "Hs", "Mt","Ds", "Rg", "Cn", "Nh", "Fi", "Mc", "Lv", "Ts", "Og"],
   ["", "", "", "", "", "", "", "", "","", "", "", "", "", "", "", "", ""],
   ["", "", "*", "La", "Ce", "Pr", "Nd", "Pm", "Sm", "Eu","Gd", "Tb", "Dy", "Ho", "Er", "Tm", "Yb", "Lu"],
-  ["", "", "*", "Ac", "Th", "Pa", "U", "Np", "Pu", "Am","Cm", "Bk", "Cf", "Es", "Fm", "Md", "No", "Lr"]
+  ["", "", "#", "Ac", "Th", "Pa", "U", "Np", "Pu", "Am","Cm", "Bk", "Cf", "Es", "Fm", "Md", "No", "Lr"]
 ];
 
 // Flat list of elements, used for validation and cleaning up of the
@@ -81,7 +81,7 @@ class MCPTableView extends DOMWidgetView {
   // http://codebeerstartups.com/2012/12/how-to-improve-templates-in-backbone-js-learning-backbone-js/
   tableTemplate =  _.template( '<% for (let elementRow of elementTable)'+
   ' { print("<div class=\'periodic-table-row\'>"); for (let elementName of elementRow)'+
-  ' { if ( (elementName === "") || (elementName == "*" ) ) { %>' +
+  ' { if ( (elementName === "") || (elementName == "*" ) || (elementName == "#" ) ) { %>' +
   '  <span class="periodic-table-empty noselect"><%= elementName %></span>' + '<% } else { %>' +
   '  <span class="<% if (disabledElements.includes(elementName))' +
   ' { print(" periodic-table-disabled"); } else { print(" periodic-table-entry"); }%> '+
@@ -99,7 +99,6 @@ class MCPTableView extends DOMWidgetView {
     this.rerenderScratch();
     // I bind on_change events
     this.model.on('change:selected_elements', this.rerenderScratch, this);
-    this.model.on('change:selected_states', this.rerenderScratch, this);
     this.model.on('change:disabled_elements', this.rerenderScratch, this);
     this.model.on('change:display_names_replacements', this.rerenderScratch, this);
   }
@@ -127,22 +126,30 @@ class MCPTableView extends DOMWidgetView {
     // Check if we understood which element we are
     if (typeof elementName !== 'undefined') {
       var currentList = this.model.get('selected_elements');
-      var currentStatesList = this.model.get('selected_states');
       // NOTE! it is essential to duplicate the list,
       // otherwise the value will not be updated.
-      var newList = currentList.slice();
-      var newStatesList = currentStatesList.slice();
+
+      var newList = [];
+      var newStatesList = [];
+
+      for (let key in currentList){
+        newList.push(key);
+        newStatesList.push(currentList[key])
+      };
+
       var num = newList.indexOf(elementName);
 
       if (isOn) {
         // remove the element from the selected_elements
 
         if (newStatesList[num] < states -1){
           newStatesList[num]++;
+          currentList[elementName] = newStatesList[num];
         }
         else{
           newList = _.without(newList, elementName);
           newStatesList.splice(num, 1);
+          delete currentList[elementName];
           // Swap CSS state
           event.target.classList.remove('elementOn');
         }
@@ -151,15 +158,20 @@ class MCPTableView extends DOMWidgetView {
         // add the element from the selected_elements
         newList.push(elementName);
         newStatesList.push(0);
+        currentList[elementName] = 0;
         // Swap CSS state
         event.target.classList.add('elementOn');
       }
 
       // Update the model (send back data to python)
-      this.model.set('selected_elements', newList);
-      this.model.set('selected_states', newStatesList);
+      // I have to make some changes, since there is some issue
+      // for Dict in Traitlets, which cannot triggle the update
+      this.model.set('selected_elements', {"test":100});
+      this.touch();
+      this.model.set('selected_elements', currentList);
       this.touch();
     }
+
   }
 
   rerenderScratch() {
@@ -170,10 +182,15 @@ class MCPTableView extends DOMWidgetView {
     var disabledColor = this.model.get('disabled_color');
     var unselectedColor = this.model.get('unselected_color');
     var selectedColors = this.model.get('selected_colors');
-    var selectedStates = this.model.get('selected_states');
-    var newSelectedElements = selectedElements.slice();
     var newSelectedColors = selectedColors.slice();
-    var newSelectedStates = selectedStates.slice();
+
+    var newSelectedElements = [];
+    var newSelectedStates = [];
+
+    for (let key in selectedElements){
+      newSelectedElements.push(key);
+      newSelectedStates.push(selectedElements[key])
+    };
 
     if (newSelectedElements.length != newSelectedStates.length){
       return;
@@ -201,8 +218,7 @@ class MCPTableView extends DOMWidgetView {
       //   newSelectedStates.push(0);
       // };
 
-      this.model.set('selected_elements', newSelectedElements);
-      this.model.set('selected_states', newSelectedStates);
+      this.model.set('selected_elements', selectedElements);
       this.touch();
     }
 

diff --git a/widget_periodictable/_frontend.py b/widget_periodictable/_frontend.py
@@ -9,4 +9,4 @@
 """
 
 module_name = "widget-periodictable"
-module_version = "^1.1.0"
+module_version = "^1.2.0"
diff --git a/widget_periodictable/_version.py b/widget_periodictable/_version.py
@@ -4,5 +4,5 @@
 # Copyright (c) Giovanni Pizzi and Dou Du.
 # Distributed under the terms of the Modified BSD License.
 
-version_info = (1, 1, 0)
+version_info = (1, 2, 0)
 __version__ = ".".join(map(str, version_info))