[WIP] Add gamma tutorial with the new GUI

doc/gui/basic_gui_usage.ipynb

@@ -192,7 +192,55 @@
    "outputs": [
     {
      "data": {
-      "application/javascript": "\n        function sleep(ms) {\n        return new Promise(resolve => setTimeout(resolve, ms));\n        }\n        function getRunningStatus(idx){\n            const htmlContent = Jupyter.notebook.get_cell(idx).element[0];\n            return htmlContent.childNodes[0].childNodes[0].textContent;\n        }\n        function cellContainsInit(idx){\n            const textVal = Jupyter.notebook.get_cell(\n                idx).element[0].childNodes[0].textContent;\n            return textVal.includes('HNNGUI()') || textVal.includes('HNNGUI');\n        }\n        function cellContainsRunCells(idx){\n            const textVal = Jupyter.notebook.get_cell(\n                idx).element[0].childNodes[0].textContent;\n            return textVal.includes('run_notebook_cells()');\n        }\n        async function runNotebook() {\n            console.log(\"run notebook cell by cell\");\n            const cellHtmlContents = Jupyter.notebook.element[0].children[0];\n            const nCells = cellHtmlContents.childElementCount;\n            console.log(`In total we have ${nCells} cells`);\n\n            for(let i=1; i<nCells-1; i++){\n                if(cellContainsRunCells(i)){\n                    break\n                }\n                else if(cellContainsInit(i)){\n                    console.log(`Skip init cell ${i}...`);\n                    continue\n                }\n\n                else{\n                    console.log(`About to execute cell ${i}..`);\n                    Jupyter.notebook.execute_cells([i]);\n                    while (getRunningStatus(i).includes(\"*\")){\n                        console.log(\"Still running, wait for another 2 secs\");\n                        await sleep(2000);\n                    }\n                    await sleep(1000);\n                }\n            }\n            console.log('Done');\n        }\n        runNotebook();\n        ",
+      "application/javascript": [
+       "\n",
+       "        function sleep(ms) {\n",
+       "        return new Promise(resolve => setTimeout(resolve, ms));\n",
+       "        }\n",
+       "        function getRunningStatus(idx){\n",
+       "            const htmlContent = Jupyter.notebook.get_cell(idx).element[0];\n",
+       "            return htmlContent.childNodes[0].childNodes[0].textContent;\n",
+       "        }\n",
+       "        function cellContainsInit(idx){\n",
+       "            const textVal = Jupyter.notebook.get_cell(\n",
+       "                idx).element[0].childNodes[0].textContent;\n",
+       "            return textVal.includes('HNNGUI()') || textVal.includes('HNNGUI');\n",
+       "        }\n",
+       "        function cellContainsRunCells(idx){\n",
+       "            const textVal = Jupyter.notebook.get_cell(\n",
+       "                idx).element[0].childNodes[0].textContent;\n",
+       "            return textVal.includes('run_notebook_cells()');\n",
+       "        }\n",
+       "        async function runNotebook() {\n",
+       "            console.log(\"run notebook cell by cell\");\n",
+       "            const cellHtmlContents = Jupyter.notebook.element[0].children[0];\n",
+       "            const nCells = cellHtmlContents.childElementCount;\n",
+       "            console.log(`In total we have ${nCells} cells`);\n",
+       "\n",
+       "            for(let i=1; i<nCells-1; i++){\n",
+       "                if(cellContainsRunCells(i)){\n",
+       "                    break\n",
+       "                }\n",
+       "                else if(cellContainsInit(i)){\n",
+       "                    console.log(`Skip init cell ${i}...`);\n",
+       "                    continue\n",
+       "                }\n",
+       "\n",
+       "                else{\n",
+       "                    console.log(`About to execute cell ${i}..`);\n",
+       "                    Jupyter.notebook.execute_cells([i]);\n",
+       "                    while (getRunningStatus(i).includes(\"*\")){\n",
+       "                        console.log(\"Still running, wait for another 2 secs\");\n",
+       "                        await sleep(2000);\n",
+       "                    }\n",
+       "                    await sleep(1000);\n",
+       "                }\n",
+       "            }\n",
+       "            console.log('Done');\n",
+       "        }\n",
+       "        runNotebook();\n",
+       "        "
+      ],
       "text/plain": [
        "<IPython.core.display.Javascript object>"
       ]
@@ -213,7 +261,7 @@
    "trusted": true
   },
   "kernelspec": {
-   "display_name": "Python 3.8.12 ('gsoc')",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },

doc/gui/tutorial_erp.ipynb

@@ -114,7 +114,7 @@
     "##   Load/view parameters to define network structure & to “activate” the network\n",
     "\n",
     "\n",
-    "An initial parameter set that will simulate an evoked response in close agreement with the SI data described in [Step 1 in this tutorial](https://jonescompneurolab.github.io/hnn-tutorials/erp/erp#toc_1) can be downloaded using the following hyperlink: [ERPYes100Trials.param](https://github.com/jonescompneurolab/hnn/blob/master/param/ERPYes100Trials.param).\n",
+    "An initial parameter set that will simulate an evoked response in close agreement with the SI data described in [Step 1 in this tutorial](https://jonescompneurolab.github.io/hnn-tutorials/erp/erp#toc_1) can be downloaded using the following hyperlink: [default.json](https://raw.githubusercontent.com/chenghuzi/hnn-core/hnn_gui_gamma_tutorial/hnn_core/param/default.json).\n",
     "\n",
     "But before uploading files, we need to first clear existing drives:"
    ]
@@ -166,7 +166,10 @@
    "id": "b1950d00",
    "metadata": {},
    "source": [
-    "Once you have this param file downloaded and existing drive deleted, upload the file to the GUI through the `Load connectivity` button under \"Cell connectivity\" tab and `Load drives` under \"Drices\" tab."
+    "Once you have this param file downloaded:\n",
+    "1. Clear the existing drives via clicking the `Delete drives` button under the `External drives` tab.\n",
+    "1. Upload connectivity parameters by clicking the `Load local network connectivity` button under the `Network connectivity` tab.\n",
+    "1. Upload new drive parameters by clicking the `Load external drives` button under the `External drives` tab.\n"
    ]
   },
   {
@@ -176,7 +179,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "param_url = \"https://raw.githubusercontent.com/jonescompneurolab/hnn/master/param/ERPYes100Trials.param\"\n",
+    "param_url = \"https://raw.githubusercontent.com/chenghuzi/hnn-core/hnn_gui_gamma_tutorial/hnn_core/param/default.json\"\n",
     "gui._simulate_upload_connectivity(param_url)\n",
     "gui._simulate_upload_drives(param_url)"
    ]
@@ -186,7 +189,7 @@
    "id": "c6d26ba2",
    "metadata": {},
    "source": [
-    "After uploading, you'll notice that drives in `ERPYes100Trials.param` have been successfully added to the new GUI."
+    "After uploading, you'll notice that drives in `default.json` have been successfully added to the new GUI."
    ]
   },
   {
@@ -210,7 +213,7 @@
    "id": "0030deba",
    "metadata": {},
    "source": [
-    "You can also view all cell connectivity paramters, i.e., weight and connectivity probability, in the `Cell connectivity` tab:"
+    "You can also view all cell connectivity parameters, i.e., weight and connectivity probability, in the `Network connectivity` tab:"
    ]
   },
   {
@@ -291,7 +294,7 @@
    "id": "6c7c3da2",
    "metadata": {},
    "source": [
-    "After simulation, you can immediately find simulation results (dipoles) at the right side of the GUI. In the figures below, the thin gray traces are dipole signals from individual trials while the green trace is the average ERP. In the left panel, the aggregated dipole data is plotted while in the right panel layer-specific dipole data are also shwon so you can check the contribution per layer."
+    "After simulation, you can immediately find simulation results (dipoles) at the right side of the GUI. In the figures below, the thin gray traces are dipole signals from individual trials while the green trace is the average ERP. In the left panel, the aggregated dipole data is plotted while in the right panel layer-specific dipole data are also shown so you can check the contribution per layer."
    ]
   },
   {
@@ -313,7 +316,18 @@
    "source": [
     "## Viewing network spiking activity\n",
     "\n",
-    "By selecting \"spikes\" from dropdown menus, you can check the spiking activity produced in each population in response to the evoked inputs."
+    "To customize/make new figures, go to the `visualization` tab. By default, the GUI will show a 2x1 figure, with the upper panel presenting the spike counts and the lower one showing the dipole moment.\n",
+    "\n",
+    "You can either edit some panels or add a new figure to check the spiking activity. Here we edit the lower panel to do so. If you're familiar with the matplotlib API, you'll see the lower panel is controlled by the `ax1` tab on the left side under `Visualization`.\n",
+    "\n",
+    "Now:\n",
+    "1. Click the `Clear axis` button, which will leave us a clean `ax1` for further visualizations.\n",
+    "2. Select `spikes` in the `Type` dropdown menu. Notice this menu is disabled when the axis is not clean.\n",
+    "3. Click the `Add plot` button.\n",
+    "\n",
+    "Several things to note:\n",
+    "- You may have multiple simulations in the same GUI window, and each of them has its distinct name. Make sure you're visualizing the one you want to show by checking the `Simulation` dropdown menu.\n",
+    "- The default simulation name is default and the `Simulation` menu will be disabled if there's only one simulation."
    ]
   },
   {
@@ -351,8 +365,7 @@
    "source": [
     "## Viewing ERP Spectrograms\n",
     "\n",
-    "<!-- By selecting \"spectrogram\" from dropdown menus, you can check the spectrograms. -->\n",
-    "Next, you can click the 'Make figure' button to create another figure and show thespectrogram there."
+    "By default the GUI wil provide a figure so you can edit it. But if you want to create a new figure, select a layout and click the `Make figure` button under `Visualization`, which will give you a new figure called `Figure 2`. Then you can edit the figure 2 to create a spectrogram in the same way we just demonstrated above."
    ]
   },
   {
@@ -384,7 +397,7 @@
    },
    "outputs": [],
    "source": [
-    "gui.capture()\n"
+    "gui.capture()"
    ]
   },
   {