Skip to content

Commit

Permalink
WID-223: implement edge bundle viewer - improve code and start work o…
Browse files Browse the repository at this point in the history 
…n new widget using ipywidgets (wip)
  • Loading branch information
@davidbacter01
davidbacter01 committed Aug 24, 2023
1 parent 37bb049 commit 746e3a2
Show file tree
Hide file tree
Showing 9 changed files with 287 additions and 90 deletions.
20 changes: 10 additions & 10 deletions notebooks/Connectivity.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@
"name": "stdout",
"output_type": "stream",
"text": [
"23-08-2023 04:08:30 - DEBUG - tvbwidgets - Package is not fully installed\n",
"23-08-2023 04:08:30 - DEBUG - tvbwidgets - Version read from the internal package.json file\n",
"23-08-2023 04:08:30 - INFO - tvbwidgets - Version: 1.5.0\n",
"2023-08-23 16:08:36,608 - INFO - tvb.storage.h5.encryption.data_encryption_handler - Cannot import syncrypto library.\n",
"23-08-2023 04:08:36 - INFO - tvbwidgets.core.pse.parameters - ImportError: Dask dependency is not included, so this functionality won't be available\n",
"2023-08-23 16:08:36,810 - WARNING - tvb.basic.readers - File 'hemispheres' not found in ZIP.\n",
"24-08-2023 11:07:43 - DEBUG - tvbwidgets - Package is not fully installed\n",
"24-08-2023 11:07:43 - DEBUG - tvbwidgets - Version read from the internal package.json file\n",
"24-08-2023 11:07:43 - INFO - tvbwidgets - Version: 1.5.0\n",
"2023-08-24 11:07:49,077 - INFO - tvb.storage.h5.encryption.data_encryption_handler - Cannot import syncrypto library.\n",
"24-08-2023 11:07:49 - INFO - tvbwidgets.core.pse.parameters - ImportError: Dask dependency is not included, so this functionality won't be available\n",
"2023-08-24 11:07:49,252 - WARNING - tvb.basic.readers - File 'hemispheres' not found in ZIP.\n",
"Connectivity (\n",
" Number of connections ..... 0\n",
" Number of regions ......... 0\n",
Expand All @@ -41,26 +41,26 @@
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "45c65c965a6d486aa6df4795e7a7bcba",
"model_id": "fc29a4e3b227463b80e0086a8537fcb3",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"ConnectivityWidget(connectivity={'areas': [396.44065, 937.50289, 1903.8602, 2099.4259, 1808.146, 1114.739, 191…"
"ConnectivityWidgetReact(connectivity={'areas': [396.44065, 937.50289, 1903.8602, 2099.4259, 1808.146, 1114.739…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from tvbwidgets.api import ConnectivityWidget\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",
"print(connectivity)\n",
"\n",
"wid = ConnectivityWidget(connectivity=connectivity)\n",
"wid = ConnectivityWidgetReact(connectivity=connectivity)\n",
"wid"
]
},
Expand Down
2 changes: 1 addition & 1 deletion tvbwidgets/api.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
# (c) 2022-2023, TVB Widgets Team
#

from .ui.connectivity.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
Expand Down
0 tvbwidgets/ui/connectivity/Connectivity.css → ...ts/ui/connectivity_react/Connectivity.css
View file
File renamed without changes.
145 changes: 67 additions & 78 deletions tvbwidgets/ui/connectivity/Connectivity.tsx → ...ts/ui/connectivity_react/Connectivity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,37 @@ const HIERARCHY_SEPARATOR = ".";
const HIERARCHY_SEPARATOR_REPLACEMENT = "_";

/**
* A function for drawing a hierarchical edge bundle
* A function for preparing the regions hierarchy
*
* @param data The data structure that has the region labels and the adjiacence matrix
* @param data The data structure that has the region labels and the adjacency matrix
* @param testFn Callable for filtering edges
*/
export function initHierarchicalEdgeBundle(data, testFn) {

const l = data.region_labels.length;
let jsonified_region_labels = [];
let regionLabels = [];
let hasSpecialCharacters = false;

for (let i = 0; i < l; i++) {
let json_line = {
let region = {
imports: undefined,
name: undefined,
};
json_line.imports = [];
region.imports = [];
let k = 0; //k is a counter for connected regions with the j-th region
for (let j = 0; j < l; j++) {
let w = 0;
w = data.matrix[i * l + j];
hasSpecialCharacters = hasSpecialCharacters || (data.region_labels[i].lastIndexOf(HIERARCHY_SEPARATOR) > 0);
json_line.name = data.region_labels[i].replace(HIERARCHY_SEPARATOR, HIERARCHY_SEPARATOR_REPLACEMENT);
region.name = data.region_labels[i].replace(HIERARCHY_SEPARATOR, HIERARCHY_SEPARATOR_REPLACEMENT);
if (testFn(w)) {
json_line.imports[k] = data.region_labels[j].replace(HIERARCHY_SEPARATOR, HIERARCHY_SEPARATOR_REPLACEMENT);
region.imports[k] = data.region_labels[j].replace(HIERARCHY_SEPARATOR, HIERARCHY_SEPARATOR_REPLACEMENT);
k++;
}
}
jsonified_region_labels[i] = json_line;
regionLabels[i] = region;
}
return jsonified_region_labels;
return regionLabels;
}

const BUNDLE = {
Expand All @@ -57,82 +57,71 @@ export default function Connectivity({connectivity, on_connectivity}) {
const colorout = "#f00";
const colornone = "#ccc";

const connectivityEdgesData = {
region_labels: [""],
matrix: [],
svg: {
d3: null,
svg: null,
},
data_url: "",
state: bundle
};

React.useEffect(() => {
connectivityEdgesData.region_labels = connectivity.region_labels;
connectivityEdgesData.svg.d3 = d3.select("#middle-edge-bundle");
connectivityEdgesData.svg.svg = document.querySelector("#middle-edge-bundle");
/**
* Data to visualise shaped as a node hierarchy
*/
const connectivityEdgesData = React.useMemo(() => {
let tracts1D = [];
let weights1D = [];
for (const subArr of connectivity.tract_lengths) {
tracts1D = tracts1D.concat(subArr);
}
for (const subArr of connectivity.weights) {
weights1D = weights1D.concat(subArr);
if (bundle === BUNDLE.tracts) {
for (const subArr of connectivity.tract_lengths) {
tracts1D = tracts1D.concat(subArr);
}
} else {
for (const subArr of connectivity.weights) {
weights1D = weights1D.concat(subArr);
}
}
console.log(connectivityEdgesData.region_labels);
connectivityEdgesData.matrix = bundle === BUNDLE.weights ? weights1D : tracts1D;
const dataJson = initHierarchicalEdgeBundle(connectivityEdgesData, d => d !== 0);
const data = {name: 'root', children: dataJson};

function id(node) {
return node.data.name;
}
const connData = {
region_labels: connectivity.region_labels,
matrix: bundle === BUNDLE.weights ? weights1D : tracts1D,
state: bundle
};
const edgeBundle = initHierarchicalEdgeBundle(connData, d => d !== 0);
return {name: 'root', children: edgeBundle};
}, [connectivity, bundle]);

function hierarchy(data, delimiter = ".") {
let root;
const map = new Map;
data.forEach(function find(data) {
const {name} = data;
if (map.has(name)) return map.get(name);
const i = name.lastIndexOf(delimiter);
map.set(name, data);
if (i >= 0) {
find({name: name.substring(0, i), children: []}).children.push(data);
data.name = name.substring(i + 1);
} else {
root = data;
/**
* Utility function to get the name of a node's data
*/
const id = React.useCallback((node) => node.data.name, []);

/**
*
*/
const bilink = React.useCallback((root) => {
const map = new Map(root.leaves().map(d => [id(d), d]));
for (const d of root.leaves()) {
d.incoming = [];
d.outgoing = [];

for (const i of d.data.imports) {
const target = map.get(i);
if (target) {
d.outgoing.push([d, target]);
if (!target.incoming) target.incoming = [];
target.incoming.push([d, target]);
}
return data;
});
return root;
}
}

function bilink(root) {
const map = new Map(root.leaves().map(d => [id(d), d]));
for (const d of root.leaves()) {
d.incoming = [];
d.outgoing = [];

for (const i of d.data.imports) {
const target = map.get(i);
if (target) {
d.outgoing.push([d, target]);
if (!target.incoming) target.incoming = [];
target.incoming.push([d, target]);
}
}
for (const [, target] of d.incoming) {
if (!target.outgoing) target.outgoing = [];
target.outgoing.push([target, d]);
}
return root;
}
return root;
}, [])


React.useEffect(() => {
// Visualization code
const width = 954;
const radius = width / 2;

const tree = d3.cluster()
.size([2 * Math.PI, radius - 100]);
const root = tree(bilink(d3.hierarchy(data)
const root = tree(bilink(d3.hierarchy(connectivityEdgesData)
.sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(a.data.name, b.data.name))));
console.log('root: ', root);
const svg = d3.create("svg")
Expand All @@ -141,7 +130,7 @@ export default function Connectivity({connectivity, on_connectivity}) {
.attr("viewBox", [-width / 2, -width / 2, width, width])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

const node = svg.append("g")
svg.append("g")
.selectAll()
.data(root.leaves())
.join("g")
Expand All @@ -155,8 +144,8 @@ export default function Connectivity({connectivity, on_connectivity}) {
.each(function (d) {
d.text = this;
})
.on("mouseover", overed)
.on("mouseout", outed)
.on("mouseover", mouseOverNode)
.on("mouseout", mouseOutNode)
.call(text => text.append("title").text(d => `${id(d)}
${d.outgoing.length} outgoing
${d.incoming.length} incoming`));
Expand All @@ -178,38 +167,38 @@ export default function Connectivity({connectivity, on_connectivity}) {
d.path = this;
});

function overed(event, d) {
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");
}

function outed(event, d) {
function mouseOutNode(event, d) {
link.style("mix-blend-mode", "multiply");
d3.select(this).attr("font-weight", null);

// Reset styles for incoming lines and text
d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", null);
d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", "gray");
d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", null).attr("font-weight", null);

// Reset styles for outgoing lines and text
d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", null);
d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", "gray");
d3.selectAll(d.outgoing.map(([, d]) => d.text)).attr("fill", null).attr("font-weight", null);
}

// Append the SVG to the visualization container
ref.current?.appendChild(svg.node());

return () => svg.remove();

// chart();
}, [connectivity, bundle]);

return (<div>
Expand Down
0 tvbwidgets/ui/connectivity/__init__.py → tvbwidgets/ui/connectivity_react/__init__.py
View file
File renamed without changes.
0 ...ets/ui/connectivity/connectivity_model.py → .../connectivity_react/connectivity_model.py
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion ...ts/ui/connectivity/connectivity_widget.py → ...connectivity_react/connectivity_widget.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
from .connectivity_model import ConnectivityDTO


class ConnectivityWidget(ipyreact.ReactWidget):
class ConnectivityWidgetReact(ipyreact.ReactWidget):
_esm = pathlib.Path(__file__).resolve().parent / 'Connectivity.tsx'
css_rules = (pathlib.Path(__file__).resolve().parent / 'Connectivity.css').read_text()
HTML("<style>" + css_rules + "</style>")
Expand Down
Empty file added tvbwidgets/ui/connectivity_widget/__init__.py
View file
Empty file.
Loading

0 comments on commit 746e3a2

Please sign in to comment.