onclick function for main page buttons are done

static/index.js

@@ -116,6 +116,8 @@ host.BrowserHost = class {
         });
     }
 
+
+
     start() {
         this.window.addEventListener('error', (e) => {
             this.exception(e.error, true);
@@ -199,6 +201,41 @@ host.BrowserHost = class {
             click: () => this._about()
         });
 
+        const refreshButton = this.document.getElementById('refresh-graph');
+        refreshButton.addEventListener('click', () => {
+            this._view._updateGraph();
+        })
+
+        const resetButton = this.document.getElementById('reset-graph');
+        resetButton.addEventListener('click', () => {
+            this._view._graph.resetGraph();
+            this._view._updateGraph();
+        })
+
+        const downloadButton = this.document.getElementById('download-graph');
+        downloadButton.addEventListener('click', () => {
+            // console.log(this._host._view._graph._modelNodeName2State)
+            // https://healeycodes.com/talking-between-languages
+            fetch('/download', {
+                // Declare what type of data we're sending
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                // Specify the method
+                method: 'POST',
+                // https://blog.csdn.net/Crazy_SunShine/article/details/80624366
+                body: JSON.stringify(
+                    this._mapToJson(this._view._graph._modelNodeName2State)
+                )
+            }).then(function (response) {
+                return response.text();
+            }).then(function (text) {
+                console.log('POST response: ');
+                // Should be 'OK' if everything was successful
+                console.log(text);
+            });
+        });
+
         this.document.getElementById('version').innerText = this.version;
 
         if (this._meta.file) {
@@ -565,6 +602,19 @@ host.BrowserHost = class {
         this.document.body.addEventListener('click', eventHandler);
         this._view.show('about');
     }
+
+    _strMapToObj(strMap){
+        let obj = Object.create(null);
+        for (let[k, v] of strMap) {
+            obj[k] = v;
+        }
+        return obj;
+    }
+
+    _mapToJson(map) {
+        return JSON.stringify(this._strMapToObj(map));
+    }
+
 };
 
 host.Dropdown = class {
@@ -880,6 +930,8 @@ host.BrowserHost.BrowserContext = class {
     }
 };
 
+
+
 if (typeof TextDecoder === "undefined") {
     TextDecoder = function TextDecoder(encoding) {
         this._encoding = encoding;

templates/index.html

@@ -251,9 +251,9 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
         </svg>
     </button>
 
-    <button id="refresh-graph" class="graph-op-button-refresh" type=button>Refresh</button>
-    <button id="reset-graph" class="graph-op-button-reset" type=button>Reset</button>
-    <button id="download-graph" class="graph-op-button-download" type=button>Download</button>
+    <button id="refresh-graph" class="graph-op-button-refresh">Refresh</button>
+    <button id="reset-graph" class="graph-op-button-reset">Reset</button>
+    <button id="download-graph" class="graph-op-button-download">Download</button>
 
     <button id="back-button" class="toolbar-back-button" title="Back">
         &#x276E;