Skip to content

Commit

Permalink
Merge pull request #3 from cns-iu/edges-signal-improvements
Browse files Browse the repository at this point in the history 
feat: Improve order of edges' signal updates
  • Loading branch information
@bherr2
bherr2 authored May 23, 2024
2 parents f9a278b + 9e4d061 commit d087685
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 47 deletions.
76 changes: 51 additions & 25 deletions docs/hra-node-dist-vis.wc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62032,10 +62032,11 @@ void main(void) {
viewState = a();
toDispose = [];
initialized = false;
edgesVersion = 0;
nodes = a([]);
nodes$ = p(async () => {
let nodes = [];
if (this.nodesData.value?.length > 0) {
if (this.nodesData.value) {
nodes = this.nodesData.value;
} else if (this.nodesUrl.value) {
nodes = await fetchCsv(this.nodesUrl.value);
Expand All @@ -62048,31 +62049,37 @@ void main(void) {
edges = a([]);
edges$ = p(async () => {
const nodes = this.nodes.value;
if (this.edgesData.value?.length > 0 && nodes.length > 0) {
const version = this.edgesVersion += 1;
if (nodes.length === 0) {
return void 0;
} else if (this.edgesData.value) {
return this.edgesData.value;
} else if (this.edgesUrl.value && nodes.length > 0) {
await delay(100);
const edges = await fetchCsv(this.edgesUrl.value, { header: false });
return edges;
} else if (nodes.length > 0) {
}
const url = this.edgesUrl.value;
await delay(100);
if (version !== this.edgesVersion) {
return void 0;
}
let edges = [];
if (url) {
edges = await fetchCsv(url, { header: false });
} else {
const nodeKey = this.nodeTargetKey.value;
const nodeValue = this.nodeTargetValue.value;
const maxDist = this.maxEdgeDistance.value;
console.log("start", /* @__PURE__ */ new Date());
const edges = await distanceEdges(nodes, nodeKey, nodeValue, maxDist);
edges = await distanceEdges(nodes, nodeKey, nodeValue, maxDist);
console.log("end", /* @__PURE__ */ new Date());
return edges;
} else {
return [];
}
return version === this.edgesVersion ? edges : void 0;
});
colorCoding = a();
colorCoding$ = p(async () => {
const nodes = this.nodes.value;
let data;
let colorDomain = [];
let colorRange = [];
if (this.colorMapData.value?.length > 0) {
if (this.colorMapData.value) {
data = this.colorMapData.value;
} else if (this.colorMapUrl.value) {
data = await fetchCsv(this.colorMapUrl.value);
Expand Down Expand Up @@ -62102,13 +62109,16 @@ void main(void) {
} else {
return void 0;
}
return (attr) => colorCategories({
attr,
domain: colorDomain,
colors: colorRange,
othersColor: [255, 255, 255],
nullColor: [255, 255, 255]
});
return {
range: colorRange,
create: (attr) => colorCategories({
attr,
domain: colorDomain,
colors: colorRange,
othersColor: [255, 255, 255],
nullColor: [255, 255, 255]
})
};
});
positionScaling = p(() => {
let minDimSize = Number.MAX_VALUE;
Expand All @@ -62134,10 +62144,13 @@ void main(void) {
id: "nodes",
data: this.nodes.value,
getPosition: this.positionScaling.value((d2) => d2.position),
getColor: this.colorCoding.value((d2) => d2[nodeKey]),
getColor: this.colorCoding.value.create((d2) => d2[nodeKey]),
pickable: true,
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
pointSize: 1.5
pointSize: 1.5,
updateTriggers: {
getColor: this.colorCoding.value.range
}
});
} else {
return void 0;
Expand All @@ -62152,10 +62165,13 @@ void main(void) {
data: this.edges.value,
getSourcePosition: this.positionScaling.value(([node_index, sx, sy, sz, tx, ty, tz]) => [sx, sy, sz]),
getTargetPosition: this.positionScaling.value(([node_index, sx, sy, sz, tx, ty, tz]) => [tx, ty, tz]),
getColor: this.colorCoding.value(([node_index]) => nodes[node_index][nodeKey]),
getColor: this.colorCoding.value.create(([node_index]) => nodes[node_index][nodeKey]),
pickable: false,
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
getWidth: 1
getWidth: 1,
updateTriggers: {
getColor: this.colorCoding.value.range
}
});
} else {
return void 0;
Expand Down Expand Up @@ -62243,8 +62259,11 @@ void main(void) {
this.trackDisposal(
O(async () => {
this.edges.value = [];
this.edges.value = await this.edges$.value;
this.dispatch("edges", this.edges.value);
const edges = await this.edges$.value;
if (edges) {
this.edges.value = edges;
this.dispatch("edges", this.edges.value);
}
})
);
this.trackDisposal(
Expand Down Expand Up @@ -62292,6 +62311,13 @@ void main(void) {
this.toDispose.forEach((dispose) => dispose());
this.toDispose = [];
}
toDataUrl(type, quality) {
if (!this.deck) {
return void 0;
}
this.deck.redraw(true);
return this.$canvas.toDataURL(type, quality);
}
};
window.customElements.define("hra-node-dist-vis", HraNodeDistanceVisualization);
})();
Expand Down
77 changes: 55 additions & 22 deletions src/hra-node-dist-vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ class HraNodeDistanceVisualization extends HTMLElement {
viewState = signal();
toDispose = [];
initialized = false;
edgesVersion = 0;

nodes = signal([]);
nodes$ = computed(async () => {
Expand All @@ -97,23 +98,33 @@ class HraNodeDistanceVisualization extends HTMLElement {
edges = signal([]);
edges$ = computed(async () => {
const nodes = this.nodes.value;
if (this.edgesData.value && nodes.length > 0) {
const version = (this.edgesVersion += 1);

if (nodes.length === 0) {
return undefined;
} else if (this.edgesData.value) {
return this.edgesData.value;
} else if (this.edgesUrl.value && nodes.length > 0) {
await delay(100);
const edges = await fetchCsv(this.edgesUrl.value, { header: false });
return edges;
} else if (nodes.length > 0) {
}

const url = this.edgesUrl.value;
await delay(100);
if (version !== this.edgesVersion) {
return undefined;
}

let edges = [];
if (url) {
edges = await fetchCsv(url, { header: false });
} else {
const nodeKey = this.nodeTargetKey.value;
const nodeValue = this.nodeTargetValue.value;
const maxDist = this.maxEdgeDistance.value;
console.log('start', new Date());
const edges = await distanceEdges(nodes, nodeKey, nodeValue, maxDist);
edges = await distanceEdges(nodes, nodeKey, nodeValue, maxDist);
console.log('end', new Date());
return edges;
} else {
return [];
}

return version === this.edgesVersion ? edges : undefined;
});

colorCoding = signal();
Expand Down Expand Up @@ -154,14 +165,17 @@ class HraNodeDistanceVisualization extends HTMLElement {
return undefined;
}

return (attr) =>
colorCategories({
attr,
domain: colorDomain,
colors: colorRange,
othersColor: [255, 255, 255],
nullColor: [255, 255, 255],
});
return {
range: colorRange,
create: (attr) =>
colorCategories({
attr,
domain: colorDomain,
colors: colorRange,
othersColor: [255, 255, 255],
nullColor: [255, 255, 255],
}),
}
});

positionScaling = computed(() => {
Expand Down Expand Up @@ -189,10 +203,13 @@ class HraNodeDistanceVisualization extends HTMLElement {
id: 'nodes',
data: this.nodes.value,
getPosition: this.positionScaling.value((d) => d.position),
getColor: this.colorCoding.value((d) => d[nodeKey]),
getColor: this.colorCoding.value.create((d) => d[nodeKey]),
pickable: true,
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
pointSize: 1.5,
updateTriggers: {
getColor: this.colorCoding.value.range
},
});
} else {
return undefined;
Expand All @@ -208,10 +225,13 @@ class HraNodeDistanceVisualization extends HTMLElement {
data: this.edges.value,
getSourcePosition: this.positionScaling.value(([node_index, sx, sy, sz, tx, ty, tz]) => [sx, sy, sz]),
getTargetPosition: this.positionScaling.value(([node_index, sx, sy, sz, tx, ty, tz]) => [tx, ty, tz]),
getColor: this.colorCoding.value(([node_index]) => nodes[node_index][nodeKey]),
getColor: this.colorCoding.value.create(([node_index]) => nodes[node_index][nodeKey]),
pickable: false,
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
getWidth: 1,
updateTriggers: {
getColor: this.colorCoding.value.range
},
});
} else {
return undefined;
Expand Down Expand Up @@ -307,8 +327,11 @@ class HraNodeDistanceVisualization extends HTMLElement {
this.trackDisposal(
effect(async () => {
this.edges.value = [];
this.edges.value = await this.edges$.value;
this.dispatch('edges', this.edges.value);
const edges = await this.edges$.value;
if (edges) {
this.edges.value = edges;
this.dispatch('edges', this.edges.value);
}
})
);

Expand Down Expand Up @@ -362,6 +385,16 @@ class HraNodeDistanceVisualization extends HTMLElement {
this.toDispose.forEach((dispose) => dispose());
this.toDispose = [];
}

toDataUrl(type, quality) {
if (!this.deck) {
return undefined;
}

// See https://github.com/visgl/deck.gl/discussions/6909#discussioncomment-5167898
this.deck.redraw(true);
return this.$canvas.toDataURL(type, quality);
}
}

window.customElements.define('hra-node-dist-vis', HraNodeDistanceVisualization);

0 comments on commit d087685

Please sign in to comment.