Add a button to download bandstructure and DOS Json data (#46) (#47)

* make it possible to download json files from single bandstructure plot

* make download jsons for both bandstructure and DOS data

* clean example cache

* upgrade pre-commit package to fix the fail of the workflow

* change back pre-commit version to v2.11.1

* fix the pre-commit error by using isort v5.12.0

* fix the pre-commit error by upgrading pre-commit v3.0.4

* install isort firstly

* fix the pre-commit error by changing pre-commit-config file

Author: dou-du

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
 
             - name: Install dependencies
               run: |
-                  python -m pip install pre-commit==2.11.1
+                  python -m pip install pre-commit==3.0.4
 
             - name: Run pre-commit
               run: pre-commit run --all-files || ( git status --short ; git diff ; exit 1 )

.pre-commit-config.yaml

@@ -30,7 +30,7 @@ repos:
             exclude: widget_bandsplot/__init__.py
 
     - repo: https://github.com/pycqa/isort
-      rev: 5.10.1
+      rev: 5.12.0
       hooks:
           - id: isort
             args: [--profile, black, --filter-files]

examples/bandsplot-example.ipynb

@@ -188,6 +188,11 @@
     "## Plot two bandstructure data"
    ]
   },
+  {
+   "cell_type": "raw",
+   "metadata": {},
+   "source": []
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -208,7 +213,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -222,7 +227,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.13"
+   "version": "3.9.12"
   },
   "voila": {
    "authors": "Dou Du and Giovanni Pizzi"

js/lib/bands.js

@@ -139,6 +139,20 @@ function bandPlot(bandDivId, bandPathTextBoxId, dataFilePaths, dosFile, showFerm
                 a.click();
             }
         }
+
+        var theDownloadJsonButton = document.getElementById(bandDivId + "bt-downloadJson");
+        theDownloadJsonButton.onclick = function () {
+            if ($.isEmptyObject(dosFile)) {
+                var a = document.createElement('a');
+                if (dataFilePaths.length) {
+                    dataFilePaths.forEach(function (dataFilePath, dataIdx) {
+                        a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(dataFilePath));
+                        a.download = 'bandData' + dataIdx + '.json';
+                        a.click();
+                    })
+                }
+            }
+        }
     };
 
     if (!$.isEmptyObject(dosFile)) {
@@ -192,6 +206,28 @@ function bandPlot(bandDivId, bandPathTextBoxId, dataFilePaths, dosFile, showFerm
             };
             a.click();
         }
+
+        var theDownloadJsonButton = document.getElementById(bandDivId + "bt-downloadJson");
+        theDownloadJsonButton.onclick = function () {
+            var a = document.createElement('a');
+
+            if (dataFilePaths.length) {
+                dataFilePaths.forEach(function (dataFilePath, dataIdx) {
+                    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(dataFilePath));
+                    a.download = 'bandData' + dataIdx + '.json';
+                    a.click();
+
+                })
+                a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(dosFile));
+                a.download = 'dosData.json';
+                a.click();
+            }
+            else {
+                a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(dosFile));
+                a.download = 'dosData.json';
+                a.click();
+            }
+        }
     };
 
     // theBandPlot.myChart.options.pan.enabled = true ;

js/lib/bandsplot.js

@@ -90,6 +90,7 @@ var BandsplotView = widgets.DOMWidgetView.extend({
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-dragPan" class="button-white"> Drag to pan </button>'
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-togglePdos" class="button"> Toggle PDOS </button>'
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-downloadFigure" class="button"> Download Figure </button>'
+                + '<button type="button" id="' + this.uuidCanvas + 'bt-downloadJson" class="button"> Download Json </button>'
                 + '</div>');
         };
 
@@ -100,6 +101,7 @@ var BandsplotView = widgets.DOMWidgetView.extend({
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-dragPan" class="button-white"> Drag to pan </button>'
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-togglePdos" class="button"> Toggle PDOS </button>'
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-downloadFigure" class="button"> Download Figure </button>'
+                + '<button type="button" id="' + this.uuidCanvas + 'bt-downloadJson" class="button"> Download Json </button>'
                 + '</div>');
         };
 
@@ -111,6 +113,7 @@ var BandsplotView = widgets.DOMWidgetView.extend({
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-dragZoom" class="button"> Drag (or pinch) to zoom </button>'
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-dragPan" class="button-white"> Drag to pan </button>'
                 + '<button type="button" id="' + this.uuidCanvas + 'bt-downloadFigure" class="button"> Download Figure </button>'
+                + '<button type="button" id="' + this.uuidCanvas + 'bt-downloadJson" class="button"> Download Json </button>'
                 + '</div>');
         };
     },