@explorable-viz/fluid 0.11.0 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorable-viz/fluid",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "A functional programming language which integrates a bidirectional dynamic analysis, connecting outputs to data sources in a fine-grained way. Fluid is implemented in PureScript and runs in the browser.",
   "main": "index.js",
   "repository": {

package/website/article/convolution/index.html

@@ -91,7 +91,7 @@
    }
 
    loadCode("../fluid/convolution.fld")()
-   loadFigure(jsonSpec)("../fluid/convolution.fld")()
+   loadFigure(jsonSpec)("fig")("../fluid/convolution.fld")()
 </script>
 </body>
 </html>

package/website/article/css/styles.css

@@ -279,6 +279,10 @@ nav ul li.active-page a {
    display: none;
 }
 
+.data-pane {
+  padding-right: 0.25em;
+}
+
 .data-pane * {
    font-size: 10pt;
 }

package/website/article/css/view-styles.css

@@ -13,6 +13,10 @@
    font-size: 9pt;
 }
 
+.table-caption {
+   border-bottom: 0.5px solid lightgray;
+}
+
 .table-view th {
    font-size: 11px;
    text-align: left;
@@ -32,7 +36,6 @@ table {
 }
 
 thead {
-   border-top: 0.5px solid lightgray;
 }
 
 .table-cell {
@@ -57,7 +60,6 @@ td.table-cell {
 
 .table-cell.selected-primary-transient {
    color: blue;
-   font-weight: 600;
 }
 
 .table-cell.selected-secondary-transient {
@@ -72,6 +74,11 @@ td.table-cell {
    visibility: collapse;
 }
 
+/* To hide a column, add 'hidden' to every cell in the column. visibility: collapse doesn't work here. */
+.table-cell.hidden {
+   display: none;
+}
+
 /* hack to match Safari-only */
 @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    .table-row.hidden {

package/website/article/energy-scatter/index.html

@@ -41,7 +41,7 @@
       "linking": true
    }
 
-   loadFigure(spec)("../fluid/energyscatter.fld")()
+   loadFigure(spec)("fig")("../fluid/energyscatter.fld")()
 </script>
 </body>
 </html>

package/website/article/fluid/1805.02474v1-10.fld

@@ -12,35 +12,35 @@ def model_3_stacked_CNN: model("3 stacked CNN", tableData)
 def mostEfficient:
    findWithKey_("time_s", minimum(map(lambda y: y.time_s, tableData)), tableData)
 
-"""As shown in Table 3, BiLSTM gives significantly
-   ${trendWord(model_BiLSTM.acc, model_LSTM.acc, betterWorse)}
+f"""As shown in Table 3, BiLSTM gives significantly
+   {trendWord(model_BiLSTM.acc, model_LSTM.acc, betterWorse)}
    accuracies compared to uni-directional LSTM2, with the training time per epoch
-   ${trendWord(model_BiLSTM.time_s, model_LSTM.time_s, growShrink)} from
-   ${model_LSTM.time_s} seconds to ${model_BiLSTM.time_s} seconds.
-   Stacking 2 layers of BiLSTM gives ${trendWord(model_2_stacked_BiLSTM.acc, model_BiLSTM.acc, improvements)}
-   to development results, with a ${trendWord(model_2_stacked_BiLSTM.time_s, model_BiLSTM.time_s, smallerHigher)}
-   time of ${model_2_stacked_BiLSTM.time_s} seconds. 3 layers of stacked BiLSTM
-   ${trendWord(model_3_stacked_BiLSTM.acc, model_BiLSTM.acc, improve)} the results.
-   In contrast, S-LSTM gives a development result of ${model_S_LSTM.acc}%, which is significantly
-   ${trendWord(model_S_LSTM.acc, model_2_stacked_BiLSTM.acc, betterWorse)}
+   {trendWord(model_BiLSTM.time_s, model_LSTM.time_s, growShrink)} from
+   {model_LSTM.time_s} seconds to {model_BiLSTM.time_s} seconds.
+   Stacking 2 layers of BiLSTM gives {trendWord(model_2_stacked_BiLSTM.acc, model_BiLSTM.acc, improvements)}
+   to development results, with a {trendWord(model_2_stacked_BiLSTM.time_s, model_BiLSTM.time_s, smallerHigher)}
+   time of {model_2_stacked_BiLSTM.time_s} seconds. 3 layers of stacked BiLSTM
+   {trendWord(model_3_stacked_BiLSTM.acc, model_BiLSTM.acc, improve)} the results.
+   In contrast, S-LSTM gives a development result of {model_S_LSTM.acc}%, which is significantly
+   {trendWord(model_S_LSTM.acc, model_2_stacked_BiLSTM.acc, betterWorse)}
    compared to 2-layer stacked BiLSTM, with a
-   ${trendWord(model_S_LSTM.param, model_2_stacked_BiLSTM.param, smallerHigher)}
+   {trendWord(model_S_LSTM.param, model_2_stacked_BiLSTM.param, smallerHigher)}
    number of model parameters and a
-   ${trendWord(model_S_LSTM.time_s, model_2_stacked_BiLSTM.time_s, shorterLonger)}
-   time of ${model_S_LSTM.time_s} seconds. We additionally make comparisons with
+   {trendWord(model_S_LSTM.time_s, model_2_stacked_BiLSTM.time_s, shorterLonger)}
+   time of {model_S_LSTM.time_s} seconds. We additionally make comparisons with
    stacked CNNs and hierarchical attention (Vaswani et al., 2017), shown in Table 3 (the CNN and Transformer rows),
-   ${mostEfficient.model} is the
-   ${rankLabel("most efficient", findIndex("model", "CNN", insertionSort(lambda a, b: a.time_s < b.time_s, tableData)))}
+   {mostEfficient.model} is the
+   {rankLabel("most efficient", findIndex("model", "CNN", insertionSort(lambda a, b: a.time_s < b.time_s, tableData)))}
    among all models compared, with the
-   ${rankLabel("smallest", findIndex("model", "CNN", insertionSort(lambda a, b: a.param < b.param, tableData)))}
+   {rankLabel("smallest", findIndex("model", "CNN", insertionSort(lambda a, b: a.param < b.param, tableData)))}
    model size. On the other hand, a 3-layer stacked CNN gives an accuracy of
-   ${numToStr(model_3_stacked_CNN.acc)}%, which is also the
-   ${rankLabel("lowest", findIndex("model", "CNN", insertionSort(lambda a, b: a.time_s < b.time_s, tableData)))}
+   {numToStr(model_3_stacked_CNN.acc)}%, which is also the
+   {rankLabel("lowest", findIndex("model", "CNN", insertionSort(lambda a, b: a.time_s < b.time_s, tableData)))}
    compared with BiLSTM, hierarchical attention and S-LSTM. The
-   ${rankLabel("best", findIndex("model", "S-LSTM+Attention", insertionSort(lambda a, b: b.acc < a.acc, tableData)))}
+   {rankLabel("best", findIndex("model", "S-LSTM+Attention", insertionSort(lambda a, b: b.acc < a.acc, tableData)))}
    performance of hierarchical attention is obtained by S-LSTM+Attention in terms of both accuracy and efficiency.
-   S-LSTM gives significantly ${trendWord(model_S_LSTM.acc, model_CNN.acc, betterWorse)}
+   S-LSTM gives significantly {trendWord(model_S_LSTM.acc, model_CNN.acc, betterWorse)}
    accuracies compared with both CNN and hierarchical attention. Table 3 additionally shows the results of
    BiLSTM and S-LSTM when external attention is used Attention leads to improved accuracies for both BiLSTM and
    S-LSTM in classification, with S-LSTM still
-   ${trendWord(model_S_LSTM.acc, model_BiLSTM.acc, underOverPerforming)} BiLSTM significantly."""
+   {trendWord(model_S_LSTM.acc, model_BiLSTM.acc, underOverPerforming)} BiLSTM significantly."""

package/website/article/fluid/bar-chart-line-chart.fld

@@ -15,13 +15,15 @@ def series(energyType, country):
     if row.year == year if row.energyType == energyType if row.country == country
   ]
 
-MultiView({
-  barChart: BarChart({
+MultiView([
+  BarChart({
     caption: "Total renewables output by country",
     size: { width: 275, height: 185 },
-    stackedBars: countryData
+    tickLabels: { x: Default, y: Default },
+    stackedBars: countryData,
+    legend: True
   }),
-  lineChart: LineChart({
+  LineChart({
     tickLabels: { x: Default, y: Default },
     size: { width: 330, height: 285 },
     caption: "Renewables output of USA relative to China",
@@ -34,4 +36,4 @@ MultiView({
      for (usa, china) in [(series(energyType, "USA"), series(energyType, "China"))]
    ]
  })
-})
+])

package/website/article/fluid/convolution.fld

@@ -19,7 +19,7 @@ def convolve(image, kernel):
   def area: i * j
 
   def interMatrix(m_, n_):
-   #  @doc("""average these values to compute element""")
+   #  @doc(f"""average these values to compute element""")
     [| kernel!(i_, j_) *
        lookup(m_ + i_ - 1 - half_i, n_ + j_ - 1 - half_j, image)
        for (i_, j_) in (i, j) |]

package/website/article/fluid/moving-average.fld

@@ -4,11 +4,11 @@ def nthPad(n, xs):
   nth(min(max(n, 0), length(xs) - 1), xs)
 def movingAvg(ys, window):
   [sum([nthPad(n, ys) for n in [i - window .. i + window]]) / (1 + 2 * window) for i in [0 .. length(ys) - 1]]
-def movingAvg'(rs, window):
-  zipWith((lambda x, y: { x: x, y: y }), map((lambda r: r.x), rs), movingAvg(map((lambda r: r.y), rs), window));
+def movingAvg_(rs, window):
+  zipWith(lambda x, y: { x: x, y: y }, map(lambda r: r.x, rs), movingAvg(map(lambda r: r.y, rs), window))
 
 def points:
-  [{ x: r.year, y: r.emissions } for r in methane if r.type == "Agriculture"];
+  [{ x: r.year, y: r.emissions } for r in methane if r.type == "Agriculture"]
 
 LineChart({
   tickLabels: { x: Rotated, y: Default },
@@ -17,7 +17,7 @@ LineChart({
   plots: [
     LinePlot({
       name: "Moving average",
-      points: movingAvg'(points, 1)
+      points: movingAvg_(points, 1)
     }),
     LinePlot({ name: "Original curve", points: points })
   ]

package/website/article/fluid/non-renewables.fld

@@ -14,13 +14,15 @@ def stack(year):
 def yearData(year):
   [row for row in nonRenewables if row.year == year if row.country |elem| countries]
 
-MultiView({
-  barChart: BarChart({
+MultiView([
+  BarChart({
     caption: "Non-renewables output",
     size: { width: 275, height: 185 },
-    stackedBars: [{ x: numToStr(year), segments: stack(year) } for year in [2014 .. 2018]]
+    tickLabels: { x: Default, y: Default },
+    stackedBars: [{ x: numToStr(year), segments: stack(year) } for year in [2014 .. 2018]],
+    legend: True
   }),
-  scatterPlot: ScatterPlot({
+  ScatterPlot({
     caption: "",
     points: [{
       x: sum([row.nuclearOut for row in yearData(year)]),
@@ -28,4 +30,4 @@ MultiView({
     } for year in [2014 .. 2018]],
     labels: { x: "Nuclear capacity", y: "Nuclear output" }
   })
-})
+])

package/website/article/index.html

@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-   <title>Fluid Demo Articles</title>
+   <title>Fluid Demos</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="https://kit.fontawesome.com/20cf8b42c0.js" crossorigin="anonymous"></script>
 </head>
@@ -15,13 +15,25 @@
    <div></div>
    <div class="flex-left-align">
       <div></div>
-      <h2>Fluid Demo Articles</h2>
+      <h2>Fluid: Transparent Research Outputs</h2>
 
-      <a href="non-renewables">Non-renewable energy stacked bar chart/scatter plot</a><br>
-      <a href="renewables-linked">Non-renewable energy bar chart/line chart</a><br>
-      <a href="moving-average">Moving average</a><br>
-      <a href="convolution">Matrix convolution</a><br>
-      <a href="scigen-1805.02474v1-10">SciGen 1805.02474v1-10 benchmark</a><br>
+      <a href="renewables-linked">Transparent visualisations</a><br>
+      <ul>
+        <li>Linking visualisations to data</li>
+        <li>Transparent brushing-and-linking</li>
+      </ul>
+      <br>
+      <a href="convolution">Infrastructure for explorable explanations</a><br>
+      <ul>
+        <li>Visualising intermediate values</li>
+        <li>Literate execution</li>
+      </ul>
+      <br>
+      <a href="scigen-1805.02474v1-10">Transparent text</a><br>
+      <ul>
+        <li>Linking natural language to data</li>
+        <li>AI-assisted authoring tool</li>
+      </ul>
    </div>
 </div>
 </body>

package/website/article/methane/index.html

@@ -40,7 +40,7 @@
       "linking": true
     }
 
-    loadFigure(spec)("../fluid/methane.fld")()
+    loadFigure(spec)("fig")("../fluid/methane.fld")()
 </script>
 </body>
 </html>

package/website/article/moving-average/index.html

@@ -58,7 +58,7 @@
       "linking": false
    }
 
-   loadFigure(jsonSpec)("../fluid/moving-average.fld")()
+   loadFigure(jsonSpec)("fig")("../fluid/moving-average.fld")()
 </script>
 </body>
 </html>

package/website/article/non-renewables/index.html

@@ -46,7 +46,7 @@
       "query": false,
       "linking": true
    }
-   loadFigure(jsonSpec)("../fluid/non-renewables.fld")()
+   loadFigure(jsonSpec)("fig")("../fluid/non-renewables.fld")()
 </script>
 </body>
 </html>

package/website/article/publications.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <title>Some publications</title>
+   <link href="css/styles.css" rel="stylesheet" type="text/css">
+   <script src="https://kit.fontawesome.com/20cf8b42c0.js" crossorigin="anonymous"></script>
+</head>
+<body>
+
+<div class="grid-container double-size">
+   <div></div>
+   <div></div>
+   <div class="flex-left-align">
+      <div></div>
+      <h2>Preprints</h2>
+
+      <a href="https://dynamicaspects.org/papers/authoring-assistant.pdf">AI-Assisted Authoring for Transparent, Data-Driven Documents</a>
+      Alfonso Piscitelli, Cristina David, Mattia De Rosa, Ali Muhammad, Federico Nanni, Jacob Pake, Roly Perera, Jessy Sodimu, Chenyiqiu Zheng
+      <br>(Under review)
+      <br><br>
+      <a href="https://bentnib.org/galois-autodiff.pdf">
+        <strong>Galois Slicing as Automatic Differentiation</strong>
+      </a>
+      Robert Atkey, Roly Perera
+      <br>(Under review)
+
+      <h2>Recent papers</h2>
+      <a href="https://link.springer.com/chapter/10.1007/978-3-031-91118-7_6">
+         Cognacy Queries over Dependence Graphs for Transparent Visualisations
+      </a>
+      Joseph Bond, Cristina David, Minh Nguyen, Dominic Orchard, Roly Perera
+      <br>European Symposium on Programming (ESOP 2025)
+      <br><br>
+      <a href="https://arxiv.org/abs/2109.00445">Linked Visualisations via Galois Dependencies</a>
+      Roly Perera, Minh Nguyen, Tomas Petricek, Meng Wang
+      <br>
+      ACM SIGPLAN Conference on Principles of Programming Languages (POPL 2022)
+   </div>
+</div>
+</body>
+</html>

package/website/article/renewables-linked/index.html

@@ -40,7 +40,7 @@
     "query": false,
     "linking": true
    }
-   loadFigure(jsonSpec)("../fluid/bar-chart-line-chart.fld")()
+   loadFigure(jsonSpec)("fig")("../fluid/bar-chart-line-chart.fld")()
 </script>
 </body>
 </html>

package/website/article/scigen-1805.02474v1-10/index.html

@@ -48,7 +48,7 @@
       "linking": true
    }
 
-   loadFigure(jsonSpec)("../fluid/1805.02474v1-10.fld")()
+   loadFigure(jsonSpec)("fig")("../fluid/1805.02474v1-10.fld")()
 </script>
 </body>
 </html>

package/website/article/test.mjs

@@ -1,14 +1,14 @@
-import { click, clickToggle, runTests, testURL, waitFor } from "./shared/webtest-lib.js"
+import { runTests, testURL, waitFor } from "./shared/webtest-lib.js"
 
 export const main = async () => {
    await runTests(testURL("convolution")([ page => waitFor("svg#fig-output")(page) ]))()
    const point = "div#fig .scatterplot-point"
-   await runTests(testURL("methane")([ page => waitFor("#fig > svg:nth-of-type(1)")(page) ]))()
+   await runTests(testURL("methane")([ page => waitFor("#fig svg:nth-of-type(1)")(page) ]))()
    await runTests(testURL("moving-average")([ page => waitFor("svg")(page) ]))()
    await runTests(testURL("non-renewables")([
-      page => waitFor("#fig-output > svg:nth-child(1)")(page),
-      page => waitFor("#fig-output > svg:nth-child(2)")(page),
+      page => waitFor("#fig-output > svg:nth-of-type(1)")(page),
+      page => waitFor("#fig-output > svg:nth-of-type(2)")(page),
    ]))()
-   await runTests(testURL("renewables-linked")([page => waitFor("#fig-output > svg:nth-child(1)")(page)]))()
+   await runTests(testURL("renewables-linked")([page => waitFor("#fig-output > svg:nth-of-type(1)")(page)]))()
    await runTests(testURL("scigen-1805.02474v1-10")([ page => waitFor("div#fig-output")(page) ]))()
 }

package/dist/fluid/fluid/lib/pi.fld

@@ -1 +0,0 @@
-def pi: 3