click interactive plot and trajectory traces to open in simularium

analysis.html

@@ -38,6 +38,9 @@ <h3>
                 <p class="instructions">
                     X
                 </p>
+                <p class="todo">
+                    [TODO: draft content]
+                </p>
             </div>
             <div class="right">
                 <p class="caption">

index.html

@@ -137,6 +137,9 @@ <h3>
                     <p class="instructions">
                         Use the matrix to explore results from different simulators at different compression velocities.
                     </p>
+                    <p class="todo">
+                        [TODO: take screenshots for each condition]
+                    </p>
                 </div>
                 <div class="right">
                     <div class="inputs" id="replicate">

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

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
+}