BUGFIX: Force-directed graph interactions not reliably working

js/force_graph.ts

@@ -1,59 +1,66 @@
 import ForceGraph3D from '3d-force-graph';
 
-function render({ model, el }: { model: DOMWidgetModel; el: HTMLElement; }) {
+function render({model, el}: { model: DOMWidgetModel; el: HTMLElement; }) {
 
-    let cell = el.getBoundingClientRect()
+    let elem = document.createElement("div");
+    el.appendChild(elem);
+    let Graph: any;
 
-      let elem = document.createElement("div");
-      el.appendChild(elem);
-        let graph_data = JSON.parse(model.get("_model_rep"))
-        let Graph = ForceGraph3D()(elem)
-          .graphData(graph_data)
-          .nodeLabel("id")
-          .linkOpacity(1)
-          .linkAutoColorBy("value")
-          .linkDirectionalParticles(1)
-          .linkDirectionalParticleSpeed(d => d["value"] * 0.001)
-          .linkDirectionalParticleWidth(4)
-          .warmupTicks(100)
-          .cooldownTicks(0)
-          .width(cell.width)
-          .height(cell.width/2)
+    // wait until el is finished and has a size
+    const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            const width = entry.contentRect.width;
+            if (width > 0) {
+                if (!Graph) {
+                    let graph_data = JSON.parse(model.get("_model_rep"))
+                    Graph = new ForceGraph3D(elem)
+                        .graphData(graph_data)
+                        .nodeLabel("id")
+                        .linkOpacity(1)
+                        .linkAutoColorBy("value")
+                        .linkDirectionalParticles(1)
+                        .linkDirectionalParticleSpeed(d => d["value"] * 0.001)
+                        .linkDirectionalParticleWidth(4)
+                        .warmupTicks(100)
+                        .cooldownTicks(0)
+                        .width(width)
+                        .height(width / 2)
 
-        model.on("change:_model_rep", () => {
+                    model.on("change:_model_rep", () => {
+                        Graph.graphData(JSON.parse(model.get("_model_rep")))
+                    });
 
-             Graph.graphData(JSON.parse(model.get("_model_rep")))
-
-        });
-
-        model.on("msg:custom", msg => {
-        switch (msg.type) {
-          case "create_layout":
-                let nodes = {}
-                Graph.graphData().nodes.forEach((n) => {
-                    nodes[n.id] = {"x": n.x, "y": n.y, "z": n.z};
-                });
-                model.send({ type: "layout", positions: nodes });
-                break;
-          case "load_layout":
-                let positions = msg.positions;
-                Graph.graphData().nodes.forEach((n) => {
-                    let pos = positions[n.id];
-                    n.fx = pos.x;
-                    n.fy = pos.y;
-                    n.fz = pos.z;
-                });
-                Graph.cooldownTicks(1)
-                Graph.d3ReheatSimulation()
-
-
-
-                break;
-
-          default:
-                console.log(`Unknown ${msg}.`);
+                    model.on("msg:custom", msg => {
+                        switch (msg.type) {
+                            case "create_layout":
+                                let nodes = {}
+                                Graph.graphData().nodes.forEach((n) => {
+                                    nodes[n.id] = {"x": n.x, "y": n.y, "z": n.z};
+                                });
+                                model.send({type: "layout", positions: nodes});
+                                break;
+                            case "load_layout":
+                                let positions = msg.positions;
+                                Graph.graphData().nodes.forEach((n) => {
+                                    let pos = positions[n.id];
+                                    n.fx = pos.x;
+                                    n.fy = pos.y;
+                                    n.fz = pos.z;
+                                });
+                                Graph.cooldownTicks(1)
+                                Graph.d3ReheatSimulation()
+                                break;
+                            default:
+                                console.log(`Unknown ${msg}.`);
+                        }
+                    });
+                } else {
+                    Graph.width(width).height(width / 2);
+                }
+            }
         }
-       });
-    }
+    });
+    ro.observe(el);
+}
 
-    export default { render };
+export default {render};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cobramod",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "scripts": {
     "start": "jupyter lab --config ./ui-tests/jupyter_server_config.py",
     "start:detached": "jlpm start&",

src/cobramod/__init__.py

@@ -38,7 +38,7 @@
     create_object,
 )
 from cobramod.core.crossreferences import add_crossreferences
-from cobramod.core.extension import test_non_zero_flux, add_pathway
+from cobramod.core.extension import add_pathway, test_non_zero_flux
 from cobramod.core.pathway import Pathway, model_convert
 from cobramod.retrieval import get_data
 
@@ -54,4 +54,4 @@
     "add_crossreferences",
 ]
 
-__version__ = "1.3.0"
+__version__ = "1.3.1"

src/cobramod/core/pathway.py

@@ -386,8 +386,9 @@ def _repr_html_(self):
 <td>{self.name}</td> </tr> <tr> <td><strong>Memory address</strong></td>
 <td>0x0{id(self)}</td> </tr> <tr> <td><strong>Reactions involved</strong></td>
 <td> <p>{", ".join([rxn.id for rxn in self.members])}</p> </td> </tr> <tr>
-<td><strong>Genes involved<br /></strong></td> <td> <p>{", ".join([gene.id for
-rxn in self.members for gene in rxn.genes])}</p> </td> </tr> <tr>
+<td><strong>Genes involved<br /></strong></td> <td> <p>{
+            ", ".join([gene.id for rxn in self.members for gene in rxn.genes])
+        }</p> </td> </tr> <tr>
 <td><strong>Visualization attributes</strong></td> <td> <ul> <li>vertical =
 {self.vertical}</li> <li>color_negative = {self.color_negative}</li>
 <li>color_positive = {self.color_positive}</li> <li>color_quantile =

src/cobramod/core/summary.py

@@ -356,28 +356,28 @@ def summary(
         + "|"
         + ("=" * 19)
         + "*"
-        + "\n" "{:13} {:^7} | {:^7} {:10}".format(
+        + "\n{:13} {:^7} | {:^7} {:10}".format(
             "Reactions", len(additions.reactions), len(deletions.reactions), ""
         )
-        + "\n" "{:13} {:^7} | {:^7} {:10}".format(
+        + "\n{:13} {:^7} | {:^7} {:10}".format(
             "Metabolites",
             len(additions.metabolites),
             len(deletions.metabolites),
             "",
         )
-        + "\n" "{:13} {:^7} | {:^7} {:10}".format(
+        + "\n{:13} {:^7} | {:^7} {:10}".format(
             "Exchange", len(additions.exchanges), len(deletions.exchanges), ""
         )
-        + "\n" "{:13} {:^7} | {:^7} {:10}".format(
+        + "\n{:13} {:^7} | {:^7} {:10}".format(
             "Demand", len(additions.demands), len(deletions.demands), ""
         )
-        + "\n" "{:13} {:^7} | {:^7} {:10}".format(
+        + "\n{:13} {:^7} | {:^7} {:10}".format(
             "Sinks", len(additions.sinks), len(deletions.sinks), ""
         )
-        + "\n" "{:13} {:^7} | {:^7} {:10}".format(
+        + "\n{:13} {:^7} | {:^7} {:10}".format(
             "Genes", len(additions.genes), len(deletions.genes), ""
         )
-        + "\n" "{:13} {:^7} | {:^7} {:10}".format(
+        + "\n{:13} {:^7} | {:^7} {:10}".format(
             "Groups", len(additions.groups), len(deletions.groups), ""
         )
         + "\n"

src/cobramod/retrieval.py

@@ -329,7 +329,7 @@ def parse(
 
         """
         identifier = replacement.get(self.identifier, self.identifier)
-        identifier = f"{identifier.replace('-','_')}_{compartment}"
+        identifier = f"{identifier.replace('-', '_')}_{compartment}"
 
         if self.mode == "Metabolite":
             try:

src/cobramod/utils.py

@@ -143,7 +143,7 @@ def compare_type(first: Any, second: Any):
     """
     Returns True is both objects are the same type, else raise TypeError.
     """
-    if type(first) == type(second):
+    if type(first) is type(second):
         return True
     else:
         raise TypeError("Given objects are not the same type.")

tests/test_crossreferences.py

@@ -9,6 +9,8 @@
 import pandas as pd
 from cobra import Metabolite, Reaction
 from cobra import __version__ as cobra_version
+from numpy import nan
+
 from cobramod import __version__ as cmod_version
 from cobramod.core.crossreferences import (
     add2dict_unique,
@@ -21,7 +23,6 @@
 )
 from cobramod.debug import debug_log
 from cobramod.parsing.db_version import DataVersionConfigurator
-from numpy import NaN
 
 debug_log.setLevel(DEBUG)
 data_conf = DataVersionConfigurator()
@@ -166,7 +167,7 @@ def test_get_reac_prop_with_ec(self, mock):
                     "ID": ["test1", "test2"],
                     "mnx_equation": ["test1", "test2"],
                     "reference": ["test1", "test2"],
-                    "classifs": [NaN, "test2"],
+                    "classifs": [nan, "test2"],
                     "is_balanced": ["test1", "test2"],
                     "is_transport": ["test1", "test2"],
                 }

vite.config.js

@@ -4,6 +4,9 @@ import anywidget from "@anywidget/vite";
 import license from 'rollup-plugin-license';
 
 export default defineConfig({
+	resolve: {
+		dedupe: ['three'],
+	},
 	build: {
 		outDir: "./src/cobramod/static",
 		lib: {