Use bundling (#30)

weas and weas-widget are separate repos, but if we want to debug/develop a new feature of weas for the widget, using bundling makes the development more convenient.

The js code was moved to the `js` folder, run `npm run build-watch` will bundle these assets into the `src/weas_widget/static` folder, and watch the changes.

If we want to use the weas package, then clone the weas repo, and the two repo folders are in the same level.

If we want to use the release version from unpkg

- Use the release version
- run `npm run build`
- python -m build
- twine upload dist/*

.github/workflows/ci.yml

@@ -48,6 +48,8 @@ jobs:
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
+          npm install
+          npm run build
           pip install -e .
           pip install "pytest<8"
       - name: Test with pytest
@@ -74,6 +76,8 @@ jobs:
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
+          npm install
+          npm run build
           python -m pip install -U jupyterlab==4.1.2 jupyter-packaging~=0.12
           pip install -e .
 

.gitignore

@@ -153,6 +153,9 @@ npm-debug.log
 .vscode/*
 !.vscode/extensions.json
 
+# do not upload static files
+src/weas_widget/static/*
+
 #
 *.pdf
 tests/work

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Xing Wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -26,14 +26,16 @@ Features:
 Use the pip:
 
 ```console
-    pip install weas-widget
+pip install weas-widget
 ```
 
 To install the latest version from source, first clone the repository and then install using pip:
 
 ```console
-    $ git clone https://github.com/superstar54/weas-widget
-    $ pip install -e weas-widget
+git clone https://github.com/superstar54/weas-widget
+cd weas-widget
+npm run build
+pip install -e .
 ```
 
 ## How to use
@@ -170,8 +172,14 @@ viewer
 <img src="docs/source/_static/images/example-phonon.gif"  width="300px"/>
 
 
+### Save image
+Save image to a path by:
+```python
+viewer.save_image("/home/xing/filename.png")
+```
 
 ### Download image
+This will open a download panel.
 
 ```python
 viewer.download_image("filename.png")

docs/source/gui.rst

@@ -69,7 +69,7 @@ Here is a example of a molecule with `index` label:
 
 
 Other parameters:
-----------------
+------------------
 
 - **Atom Scale**: change scale for all atoms.
 - **Unit Cell**: show or hide the unit cell.
@@ -80,7 +80,7 @@ Other parameters:
 
 
 Buttons
--------
+---------
 There are several buttons on the top right of the GUI. They are:
 
 .. figure:: _static/images/gui-buttons.png
@@ -99,7 +99,7 @@ Configuration
 One can use a configuration dict to specify their GUI preferences, such as enabling/disabling the GUI entirely or choosing specific components to display.
 
 Disable the GUI entirely
-~~~~~~~~~~~~~~~~~~~~~~~~
+--------------------------
 .. code-block:: python
 
    from weas_widget import WeasWidget
@@ -108,7 +108,7 @@ Disable the GUI entirely
 
 
 Select specific components
-~~~~~~~~~~~~~~~~~~~~~~~~~~
+--------------------------
 
 .. code-block:: python
 

docs/source/quick_start.ipynb

@@ -394,7 +394,7 @@
     "viewer = WeasWidget()\n",
     "viewer.from_ase(trajectory)\n",
     "# set a vector field to show the arrow\n",
-    "viewer.vectorField = {\"origins\": \"positions\", \"vectors\": \"movement\", \"radius\": 0.1}\n",
+    "viewer.vectorField = [{\"origins\": \"positions\", \"vectors\": \"movement\", \"radius\": 0.1}]\n",
     "viewer"
    ]
   },

weas_widget/index.js → js/widget.js

@@ -1,5 +1,12 @@
-// use the latest version of weas from unpkg
+// if we want test weas package, then use the following import
+// clone the weas repo and import the weas module
+// import * as weas from "../../weas/src/index.js";
+// if not, then use the release version from unpkg
 import * as weas from "https://unpkg.com/weas/dist/weas.mjs";
+import "./widget.css";
+
+
+
 function render({ model, el }) {
     let avr; // Declare avr here
     let viewerElement = document.createElement("div");
@@ -49,10 +56,29 @@ function render({ model, el }) {
     setTimeout(() => {
         avr = renderAtoms();
             }, 10
-    ); // Delay rendering by 10ms
-    // Listen for changes in the '_update' property
-    model.on("change:_drawModels", () => {
-        avr.drawModels();
+    );
+    // js task
+    model.on("change:js_task", () => {
+        const task = model.get("js_task");
+        function run_task(task) {
+            switch (task.name) {
+                case "drawModels":
+                    avr.drawModels();
+                    break;
+                case "exportImage":
+                    const imageData = avr.tjs.exportImage(task.kwargs.resolutionScale);
+                    model.set("imageData", imageData);
+                    model.save_changes();
+                    break;
+                case "downloadImage":
+                    avr.tjs.downloadImage(task.kwargs.filename);
+                    break;
+                case "setCameraPosition":
+                    avr.tjs.updateCameraAndControls(avr.atoms.getCenterOfGeometry(), task.kwargs.position);
+                    break;
+            }
+        }
+        run_task(task);
     });
     // Listen for changes in the 'atoms' property
     model.on("change:atoms", () => {
@@ -103,7 +129,6 @@ function render({ model, el }) {
     model.on("change:modelPolyhedras", () => {avr.modelPolyhedras = model.get("modelPolyhedras");});
     model.on("change:selectedAtomsIndices", () => {avr.selectedAtomsIndices = model.get("selectedAtomsIndices");});
     model.on("change:boundary", () => {avr.boundary = model.get("boundary");});
-
     // volumetric data
     model.on("change:volumetricData", () => {
         const data = model.get("volumetricData");
@@ -122,20 +147,7 @@ function render({ model, el }) {
         avr.VFManager.drawVectorFields();
     });
 
-    // export image
-    model.on("change:_exportImage", () => {
-        const imageData = avr.tjs.exportImage();
-        model.set("imageData", imageData);
-        model.save_changes();
-    });
-    // download image
-    model.on("change:_downloadImage", () => {
-        const filename = model.get("_imageFileName");
-        console.log("filename: ", filename);
-        avr.tjs.downloadImage(filename);
-    });
 }
-
 function createVolumeData(data, cell=[[1, 0, 0], [0, 1, 0], [0, 0, 1]]) {
     // get the dimensions
     const dims = [data.values.length, data.values[0].length, data.values[0][0].length];