From 1f5271658174d0402f4f00c7914d754ed93d1bb5 Mon Sep 17 00:00:00 2001 From: Blair Lyons Date: Tue, 30 Jul 2024 18:35:54 -0700 Subject: [PATCH] click interactive plot and trajectory traces to open in simularium --- analysis.html | 3 +++ index.html | 3 +++ scripts/figures.js | 36 +++++++++++++++++++++++------------- scripts/utilities.js | 21 +++++++++++++++++++++ 4 files changed, 50 insertions(+), 13 deletions(-) diff --git a/analysis.html b/analysis.html index 8ff34a6..15ba05b 100644 --- a/analysis.html +++ b/analysis.html @@ -38,6 +38,9 @@

X

+

+ [TODO: draft content] +

diff --git a/index.html b/index.html index a3197a9..8ba0890 100644 --- a/index.html +++ b/index.html @@ -137,6 +137,9 @@

Use the matrix to explore results from different simulators at different compression velocities.

+

+ [TODO: take screenshots for each condition] +

diff --git a/scripts/figures.js b/scripts/figures.js index 3661cf0..8a24ebd 100644 --- a/scripts/figures.js +++ b/scripts/figures.js @@ -1,19 +1,8 @@ -function individual_viz_link(simulator, velocity, replicate_name) { - let base_link = `https://simularium.allencell.org/viewer?trajUrl=https://${simulator}-working-bucket.s3.us-west-2.amazonaws.com` - let series = (velocity == "0000") ? "NO_COMPRESSION" : "COMPRESSION_VELOCITY" - if (simulator == "readdy") { - series = `ACTIN_${series}` - } - let velocity_name = (velocity == "0000") ? "" : "_" + velocity - return `${base_link}/${series}/viz/${series}${velocity_name}_${replicate_name}.simularium` -} - function generate_filaments_table() { const ID = "filaments_table" // Get selected replicate. let replicate = document.querySelector("input[name=replicate]:checked").id.replace("replicate_", "") - let replicate_name = "00000" + (Number(replicate) + 1) let velocities = ["0000", "0047", "0150", "0470", "1500"] @@ -22,7 +11,7 @@ function generate_filaments_table() { .html(null) .append("a") .attr("target", "_blank") - .attr("href", individual_viz_link("readdy", velocity, replicate_name)) + .attr("href", individualVizLink("readdy", velocity, replicate)) .append("img") .attr("src", `img/actin_compression_matrix_placeholder_replicate_${replicate}.jpg`)) @@ -31,7 +20,7 @@ function generate_filaments_table() { .html(null) .append("a") .attr("target", "_blank") - .attr("href", individual_viz_link("cytosim", velocity, replicate_name)) + .attr("href", individualVizLink("cytosim", velocity, replicate)) .append("img") .attr("src", `img/actin_compression_matrix_placeholder_replicate_${replicate}.jpg`)) } @@ -195,6 +184,7 @@ function generate_compression_metrics() { "y": entry["y"], "stroke": shadeColor(COLORS[simulator], percent), "label": makeLabel(simulator, null, repeat), + "link": individualVizLink(simulator, velocity, repeat), } }) @@ -223,6 +213,7 @@ function generate_compression_metrics() { SVG .on("pointerenter", pointerentered) .on("pointermove", pointermoved) + .on("pointerdown", pointerdown) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()) @@ -252,6 +243,15 @@ function generate_compression_metrics() { .html(k["label"]) } + function pointerdown(event) { + const [xm, ym] = d3.pointer(event) + + const i = d3.leastIndex(points, e => Math.hypot(e[0] - xm + MARGIN.left, e[1] - ym + MARGIN.top)) + const [x, y, k] = points[i] + + window.open(k["link"], '_blank').focus(); + } + function pointerentered() { trajectory_paths.style("stroke", "#47444D") markers.attr("display", null) @@ -394,6 +394,7 @@ function generate_pca_trajectories(ID, SVG, G, MARGIN, width, height, xscale, ys "y": entry["y"], "stroke": shadeColor(COLORS[entry["simulator"]], percent), "label": makeLabel(entry["simulator"], entry["velocity"], entry["replicate"]), + "link": individualVizLink(entry["simulator"], formatVelocity(entry["velocity"]), entry["replicate"]), } }) @@ -454,6 +455,7 @@ function generate_pca_trajectories(ID, SVG, G, MARGIN, width, height, xscale, ys SVG .on("pointerenter", pointerentered) .on("pointermove", pointermoved) + .on("pointerdown", pointerdown) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()) .on("click", click) @@ -510,6 +512,14 @@ function generate_pca_trajectories(ID, SVG, G, MARGIN, width, height, xscale, ys .attr("transform", `translate(${x},${y - 24})`) .html(k["label"]) } + function pointerdown(event) { + const [xm, ym] = d3.pointer(event) + + const i = d3.leastIndex(points, e => Math.hypot(e[0] - xm + MARGIN.left, e[1] - ym + MARGIN.top)) + const [x, y, k] = points[i] + + window.open(k["link"], '_blank').focus(); + } function pointerentered() { trajectory_paths.style("stroke", "#47444D") diff --git a/scripts/utilities.js b/scripts/utilities.js index e5c80a4..4edd1e4 100644 --- a/scripts/utilities.js +++ b/scripts/utilities.js @@ -156,3 +156,24 @@ function createInset(g, width, height, a, b) { .attr("text-anchor", "middle") .text(a) } + +function individualVizLink(simulator, velocity, replicate) { + let base_link = `https://simularium.allencell.org/viewer?trajUrl=https://${simulator.toLowerCase()}-working-bucket.s3.us-west-2.amazonaws.com` + let series = (velocity === "0000") ? "NO_COMPRESSION" : "COMPRESSION_VELOCITY" + if (simulator.toLowerCase() == "readdy") { + series = `ACTIN_${series}` + } + let velocity_name = (velocity === "0000") ? "" : "_" + velocity + let replicate_name = "00000" + (Number(replicate) + 1) + return `${base_link}/${series}/viz/${series}${velocity_name}_${replicate_name}.simularium` +} + +function formatVelocity(velocity) { + let v = velocity.toString() + v = v.includes(".") ? "0" + v.replace(".", "") : v + "0" + while (v.length < 4) + { + v = "0" + v + } + return v +} \ No newline at end of file