Skip to content

Commit

Permalink
WID-223: implement edge bundle viewer - make it visible - lacks perfo…
Browse files Browse the repository at this point in the history 
…rmance (wip)
  • Loading branch information
@davidbacter01
davidbacter01 committed Aug 23, 2023
1 parent eb7f9f7 commit 37bb049
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 3,790 deletions.
14 changes: 7 additions & 7 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": [
"22-08-2023 05:58:01 - DEBUG - tvbwidgets - Package is not fully installed\n",
"22-08-2023 05:58:01 - DEBUG - tvbwidgets - Version read from the internal package.json file\n",
"22-08-2023 05:58:01 - INFO - tvbwidgets - Version: 1.5.0\n",
"2023-08-22 17:58:07,660 - INFO - tvb.storage.h5.encryption.data_encryption_handler - Cannot import syncrypto library.\n",
"22-08-2023 05:58:07 - INFO - tvbwidgets.core.pse.parameters - ImportError: Dask dependency is not included, so this functionality won't be available\n",
"2023-08-22 17:58:07,848 - WARNING - tvb.basic.readers - File 'hemispheres' not found in ZIP.\n",
"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",
"Connectivity (\n",
" Number of connections ..... 0\n",
" Number of regions ......... 0\n",
Expand All @@ -41,7 +41,7 @@
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "a1385b6d305543dc8a088515a4c1e8bf",
"model_id": "45c65c965a6d486aa6df4795e7a7bcba",
"version_major": 2,
"version_minor": 0
},
Expand Down
6 changes: 6 additions & 0 deletions tvbwidgets/ui/connectivity/Connectivity.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.link {
fill: none;
stroke: #999;
stroke-opacity: 0.6;
stroke-width: 1.5px;
}
258 changes: 126 additions & 132 deletions tvbwidgets/ui/connectivity/Connectivity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@ import * as d3 from "d3";
*/
const HIERARCHY_SEPARATOR = ".";
const HIERARCHY_SEPARATOR_REPLACEMENT = "_";
const colorin = "#00f";
const colorout = "#f00";
const colornone = "#ccc";

/**
* A function for drawing a hierarchical edge bundle
Expand All @@ -22,18 +19,15 @@ const colornone = "#ccc";
export function initHierarchicalEdgeBundle(data, testFn) {

const l = data.region_labels.length;
// let svgD3 = data.svg.d3;
let jsonified_region_labels = [];
let hasSpecialCharacters = false;

for (let i = 0; i < l; i++) {
let json_line = {
imports: undefined,
name: undefined,
// children: []
};
json_line.imports = [];
// json_line.children = [];
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;
Expand All @@ -47,53 +41,9 @@ export function initHierarchicalEdgeBundle(data, testFn) {
}
jsonified_region_labels[i] = json_line;
}
console.log('json: ', jsonified_region_labels);
return jsonified_region_labels;
}

function hierarchy(data, delimiter = HIERARCHY_SEPARATOR) {
console.log('data inside hierarchy: ', data);
let root;
const map = new Map;
let newData = []
data.forEach(function find(d) {
const {name} = d;
if (map.has(name)) {
return map.get(name);
}
const i = name.lastIndexOf(delimiter);
map.set(name, d);
if (node) {
find({name: name.substring(0, i), children: []}).children.push(d);
d.name = name.substring(i + 1);
} else {
root = d;
}
newData.push(root);
});
console.log('data after hierarchy: ', data);
console.log('map after hierarchy: ', map);
console.log('newData after hierarchy: ', newData);
return newData;
}

function bilink(root) {
console.log('before map');
const map = new Map(root.leaves().map(d => [id(d), d]));
console.log('after map');
for (const d of root.leaves()) {
d.incoming = [];
const imports = d.data.imports;
d.outgoing = imports ? imports.map(i => [d, map.get(i)]) : [];
}
for (const d of root.leaves()) for (const o of d.outgoing) o[1].incoming.push(o);
return root;
}

function id(node) {
return `${node.parent ? id(node.parent) + "." : ""}${node.data.name}`;
}

const BUNDLE = {
tracts: "tracts",
weights: "weights"
Expand All @@ -103,6 +53,10 @@ export default function Connectivity({connectivity, on_connectivity}) {
const ref = React.useRef();
const [bundle, setBundle] = React.useState(BUNDLE.weights);

const colorin = "#00f";
const colorout = "#f00";
const colornone = "#ccc";

const connectivityEdgesData = {
region_labels: [""],
matrix: [],
Expand All @@ -113,11 +67,8 @@ export default function Connectivity({connectivity, on_connectivity}) {
data_url: "",
state: bundle
};
let chart = () => {
};
React.useEffect(() => {
// const svg = d3.select("#middle-edge-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");
Expand All @@ -132,88 +83,131 @@ export default function Connectivity({connectivity, on_connectivity}) {
console.log(connectivityEdgesData.region_labels);
connectivityEdgesData.matrix = bundle === BUNDLE.weights ? weights1D : tracts1D;
const dataJson = initHierarchicalEdgeBundle(connectivityEdgesData, d => d !== 0);
// const data = hierarchy(dataJson);
const data = dataJson;

console.log("data=hierarchy(dataJson):: ", data);

// connectivityEdgesData.matrix = [2, 0, 1, 0];
chart = () => {
const width = 954;
const radius = width / 2;

const tree = d3.cluster()
.size([2 * Math.PI, radius - 100]);
const root = tree(bilink(d3.hierarchy(data, d => d && d.children || [])
.sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(a.data.name, b.data.name))));

const svg = d3.create("svg")
.attr("width", width)
.attr("height", width)
.attr("viewBox", [-width / 2, -width / 2, width, width])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
// ref.current && ref.current.appendChild(svg.node());

const node = svg.append("g")
.selectAll()
.data(root.leaves())
.join("g")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI ? "start" : "end")
.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)
.text(d => d.data.name)
.each(function (d) {
d.text = this;
})
.on("mouseover", overed)
.on("mouseout", outed)
.call(text => text.append("title").text(d => `${id(d)}
${d.outgoing.length} outgoing
${d.incoming.length} incoming`));

const line = d3.lineRadial()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x);

const link = svg.append("g")
.attr("stroke", colornone)
.attr("fill", "none")
.selectAll()
.data(root.leaves().flatMap(leaf => leaf.outgoing))
.join("path")
.style("mix-blend-mode", "multiply")
.attr("d", ([i, o]) => line(i.path(o)))
.each(function (d) {
d.path = this;
});

function overed(event, d) {
link.style("mix-blend-mode", null);
d3.select(this).attr("font-weight", "bold");
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");
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");
}
const data = {name: 'root', children: dataJson};

function id(node) {
return node.data.name;
}

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;
}
return data;
});
return root;
}

function outed(event, d) {
link.style("mix-blend-mode", "multiply");
d3.select(this).attr("font-weight", null);
d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", null);
d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", null).attr("font-weight", null);
d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", null);
d3.selectAll(d.outgoing.map(([, d]) => d.text)).attr("fill", null).attr("font-weight", null);
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]);
}
}
}
return root;
}

// 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)
.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")
.attr("width", width)
.attr("height", width)
.attr("viewBox", [-width / 2, -width / 2, width, width])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

const node = svg.append("g")
.selectAll()
.data(root.leaves())
.join("g")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI ? "start" : "end")
.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)
.text(d => d.data.name)
.each(function (d) {
d.text = this;
})
.on("mouseover", overed)
.on("mouseout", outed)
.call(text => text.append("title").text(d => `${id(d)}
${d.outgoing.length} outgoing
${d.incoming.length} incoming`));

const line = d3.lineRadial()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x);

const link = svg.append("g")
.attr("stroke", colornone)
.attr("fill", "none")
.selectAll()
.data(root.leaves().flatMap(leaf => leaf.outgoing))
.join("path")
.style("mix-blend-mode", "multiply")
.attr("d", ([i, o]) => line(i.path(o)))
.each(function (d) {
d.path = this;
});

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

// 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");

// 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");
}

// return svg.node();
ref.current && ref.current.appendChild(svg.node());
function outed(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.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.text)).attr("fill", null).attr("font-weight", null);
}

console.log('chart: ', chart());
// Append the SVG to the visualization container
ref.current?.appendChild(svg.node());

return () => svg.remove();

// chart();
}, [connectivity, bundle]);
Expand All @@ -227,7 +221,7 @@ ${d.incoming.length} incoming`));
<option value={"weights"} selected={bundle === BUNDLE.weights}>Weights</option>
</select>
</aside>
<div ref={ref}
<div ref={ref} id={"visualization"}
></div>
</div>)
}
Loading

0 comments on commit 37bb049

Please sign in to comment.