diff --git a/js/force_graph.ts b/js/force_graph.ts index 1e40dbf..86e3a53 100644 --- a/js/force_graph.ts +++ b/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 }; \ No newline at end of file +export default {render}; \ No newline at end of file diff --git a/package.json b/package.json index 4b7724d..22aaeeb 100644 --- a/package.json +++ b/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&", diff --git a/src/cobramod/__init__.py b/src/cobramod/__init__.py index 1150d3c..8ebbfff 100644 --- a/src/cobramod/__init__.py +++ b/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" diff --git a/src/cobramod/core/pathway.py b/src/cobramod/core/pathway.py index 0c3d975..c7ca3e6 100644 --- a/src/cobramod/core/pathway.py +++ b/src/cobramod/core/pathway.py @@ -386,8 +386,9 @@ def _repr_html_(self): {self.name} Memory address 0x0{id(self)} Reactions involved

{", ".join([rxn.id for rxn in self.members])}

-Genes involved

{", ".join([gene.id for -rxn in self.members for gene in rxn.genes])}

+Genes involved

{ + ", ".join([gene.id for rxn in self.members for gene in rxn.genes]) + }

Visualization attributes