WID-243. Fix connectivity widget with latest version of ipyreact (0.4…

….1) and expose it into our api; update notebook
peeplika · Mar 1, 2024 · 35d2a35 · 35d2a35
1 parent 4003ed7
commit 35d2a35
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 75 deletions.
diff --git a/notebooks/Connectivity.ipynb b/notebooks/Connectivity.ipynb
@@ -9,54 +9,27 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": null,
    "metadata": {
     "tags": []
    },
    "outputs": [],
    "source": [
-    "# from tvbwidgets.ui.connectivity_react.connectivity_widget import ConnectivityWidgetReact\n",
-    "# from tvb.datatypes.connectivity import Connectivity\n",
+    "from tvbwidgets.api import ConnectivityWidgetReact\n",
+    "from tvb.datatypes.connectivity import Connectivity\n",
     "\n",
-    "# connectivity = Connectivity.from_file() # defaults to connectivy_76.zip\n",
+    "connectivity = Connectivity.from_file() # defaults to connectivy_76.zip\n",
     "\n",
     "\n",
-    "# wid = ConnectivityWidgetReact(connectivity=connectivity)\n",
-    "# wid"
+    "wid = ConnectivityWidgetReact(connectivity=connectivity)\n",
+    "wid"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": null,
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "19-09-2023 10:57:09 - DEBUG - tvbwidgets - Package is not fully installed\n",
-      "19-09-2023 10:57:09 - DEBUG - tvbwidgets - Version read from the internal package.json file\n",
-      "19-09-2023 10:57:09 - INFO - tvbwidgets - Version: 1.5.0\n",
-      "2023-09-19 10:57:15,882 - INFO - tvb.storage.h5.encryption.data_encryption_handler - Cannot import syncrypto library.\n",
-      "19-09-2023 10:57:15 - INFO - tvbwidgets.core.pse.parameters - ImportError: Dask dependency is not included, so this functionality won't be available\n",
-      "2023-09-19 10:57:16,010 - WARNING - tvb.basic.readers - File 'hemispheres' not found in ZIP.\n"
-     ]
-    },
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "b3a81813058645ecbe8abedd7dd6d17f",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "ConnectivityWidget(children=(VBox(children=(HTML(value='<h1>Connectivity - 76</h1>'), HBox(children=(Checkbox(…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "from tvbwidgets.api import ConnectivityWidget\n",
     "from tvb.datatypes.connectivity import Connectivity\n",
@@ -74,44 +47,23 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": null,
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<table>\n",
-       "<thead><h3>Connectivity</h3></thead>\n",
-       "<tbody>\n",
-       "\n",
-       "<tr><th></th><th style=\"text-align:left;width:80%\">value</th></tr>\n",
-       "<tr><td>Number of connections</td><td style=\"text-align:left;\"><pre>1560</pre></td></tr>\n",
-       "<tr><td>Number of regions</td><td style=\"text-align:left;\"><pre>76</pre></td></tr>\n",
-       "<tr><td>Undirected</td><td style=\"text-align:left;\"><pre>False</pre></td></tr>\n",
-       "<tr><td>areas</td><td style=\"text-align:left;\"><pre> [min, median, max] = [0, 2580.89, 10338.2] dtype = float64 shape = (76,)</pre></td></tr>\n",
-       "<tr><td>tract_lengths</td><td style=\"text-align:left;\"><pre> [min, median, max] = [0, 71.6635, 153.486] dtype = float64 shape = (76, 76)</pre></td></tr>\n",
-       "<tr><td>tract_lengths (connections)</td><td style=\"text-align:left;\"><pre> [min, median, max] = [0, 55.8574, 138.454] dtype = float64 shape = (1560,)</pre></td></tr>\n",
-       "<tr><td>tract_lengths-non-zero</td><td style=\"text-align:left;\"><pre> [min, median, max] = [4.93328, 74.0646, 153.486] dtype = float64 shape = (5402,)</pre></td></tr>\n",
-       "<tr><td>weights</td><td style=\"text-align:left;\"><pre> [min, median, max] = [0, 0, 3] dtype = float64 shape = (76, 76)</pre></td></tr>\n",
-       "<tr><td>weights-non-zero</td><td style=\"text-align:left;\"><pre> [min, median, max] = [0.00462632, 2, 3] dtype = float64 shape = (1560,)</pre></td></tr>\n",
-       "</tbody></table>"
-      ],
-      "text/plain": [
-       "<tvb.datatypes.connectivity.Connectivity at 0x2f09c20e410>"
-      ]
-     },
-     "execution_count": 3,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "# replace None in the method below with the gid of the connectivity you wish to export\n",
     "# if no gid is provided it will export the connectivity currently viewed\n",
     "\n",
     "new_connectivity = wid.get_connectivity(gid=None)  \n",
     "new_connectivity"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -130,7 +82,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.10.12"
+   "version": "3.10.13"
   }
  },
  "nbformat": 4,

diff --git a/requirements.txt b/requirements.txt
@@ -9,7 +9,7 @@ numpy<1.24
 plotly==5.14.0
 pythreejs
 pyvista==0.37.0
-ipyreact==0.3.0
+ipyreact==0.4.1
 tvb-library>=2.5
 tvb-framework
 plotly-resampler

diff --git a/tvbwidgets/api.py b/tvbwidgets/api.py
@@ -6,6 +6,7 @@
 #
 
 from .ui.connectivity_ipy.connectivity_widget import ConnectivityWidget
+from .ui.connectivity_react.connectivity_widget import ConnectivityWidgetReact
 from .ui.phase_plane_widget import PhasePlaneWidget
 from .ui.storage_widget import StorageWidget
 from .ui.head_widget import HeadBrowser, HeadWidget, HeadWidgetConfig

diff --git a/tvbwidgets/ui/connectivity_react/Connectivity.tsx b/tvbwidgets/ui/connectivity_react/Connectivity.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as d3 from "d3";
+import * as d3 from "https://esm.sh/d3";
 
 
 /**
@@ -159,7 +159,7 @@ export default function Connectivity({connectivity, on_connectivity}) {
             .attr("stroke", colornone)
             .attr("fill", "none")
             .selectAll()
-            .data(root.leaves().flatMap(leaf => leaf.outgoing))
+            .data(root.leaves().flatMap(leaf => leaf.incoming.concat(leaf.outgoing)))
             .join("path")
             .style("mix-blend-mode", "multiply")
             .attr("d", ([i, o]) => line(i.path(o)))
@@ -170,16 +170,16 @@ export default function Connectivity({connectivity, on_connectivity}) {
         function mouseOverNode(event, d) {
             link.style("mix-blend-mode", null);
             d3.select(this).attr("font-weight", "bold");
-            console.log('d.incomming: ', d.incoming);
-
-            // Highlight incoming lines and text
-            d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", colorin).raise();
-            d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", colorin).attr("font-weight", "bold");
 
             console.log('outgoing: ', d.outgoing);
             // Highlight outgoing lines and text
             d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", colorout).raise();
             d3.selectAll(d.outgoing.map(([, d]) => d.text)).attr("fill", colorout).attr("font-weight", "bold");
+
+            console.log('d.incomming: ', d.incoming);
+            // Highlight incoming lines and text
+            d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", colorin).raise();
+            d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", colorin).attr("font-weight", "bold");
         }
 
         function mouseOutNode(event, d) {

diff --git a/tvbwidgets/ui/connectivity_react/connectivity_widget.py b/tvbwidgets/ui/connectivity_react/connectivity_widget.py
@@ -14,7 +14,7 @@
 from .connectivity_model import ConnectivityDTO
 
 
-class ConnectivityWidgetReact(ipyreact.ReactWidget):
+class ConnectivityWidgetReact(ipyreact.Widget):
     _esm = pathlib.Path(__file__).resolve().parent / 'Connectivity.tsx'
     css_rules = (pathlib.Path(__file__).resolve().parent / 'Connectivity.css').read_text()
     HTML("<style>" + css_rules + "</style>")