@explorable-viz/fluid 0.7.27 → 0.7.29

package/dist/fluid/css/css/styles.css

@@ -0,0 +1,343 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
+
+@font-face {
+   font-family: 'OdiseanTech';
+   src: url('/font/OdiseanTech.woff2') format('woff2');
+   font-weight: normal;
+   font-style: normal;
+}
+
+@font-face {
+   font-family: 'GraphikLight';
+   src: url('/font/GraphikLight.woff2') format('woff2');
+   font-weight: 300;
+   font-style: normal;
+}
+
+@font-face {
+   font-family: 'GraphikLightItalic';
+   src: url('/font/GraphikLightItalic.woff2') format('woff2');
+   font-weight: 300;
+   font-style: italic;
+}
+
+@font-face {
+   font-family: 'GraphikMedium';
+   src: url('/font/GraphikMedium.woff2') format('woff2');
+   font-weight: 500;
+   font-style: normal;
+}
+
+@font-face {
+   font-family: 'GraphikMediumItalic';
+   src: url('/font/GraphikMediumItalic.woff2') format('woff2');
+   font-weight: 500;
+   font-style: italic;
+}
+
+.fluid-logo {
+   margin-bottom: 0;
+}
+
+.fluid-subtitle {
+   margin-bottom: 0;
+   margin-top: 0;
+   font-size: 12pt;
+}
+
+a:link {
+  color: darkslategray;
+}
+
+a:visited {
+  color: #004d40;
+}
+
+a:hover {
+  color: #009688;
+}
+
+a:active {
+  color: #003d33;
+}
+
+.right-justified {
+   margin-left: auto;
+   width: fit-content;
+}
+
+.nowrap {
+   white-space: nowrap;
+}
+
+code {
+   font-family: 'Ubuntu Mono', monospace;
+}
+
+body {
+   font-size: 12pt;
+   font-family: "GraphikLight", sans-serif;
+   font-weight: 300;
+   line-height: 1.25;
+   padding: 0;
+   margin: 0;
+   background-color: #FFFFFF;
+   color: #404040;
+   margin-bottom: 10em;
+}
+
+p {
+   margin-top: 1em;
+   margin-bottom: 1em;
+}
+
+p + p {
+   margin-top: 0;
+}
+
+.faq-question {
+   font-family: 'GraphikMedium';
+   color: darkslategrey;
+}
+
+.highlight {
+   font-family: 'GraphikMedium';
+}
+
+.align-right {
+   text-align: right;
+}
+
+h2 {
+   font-size: 18pt;
+}
+
+h3 {
+   width: 100%;
+   font-size: 16pt;
+   font-weight: bold;
+   margin-top: 10pt;
+   margin-bottom: 4pt;
+   border-bottom: 0.5px solid lightgray;
+}
+
+h4 {
+   font-size: 16pt;
+   font-weight: bold;
+   margin-top: 0.4em;
+   margin-bottom: 0;
+}
+
+.sub-header * {
+   font-size: 16pt;
+   margin-bottom: 4px;
+}
+
+ul {
+   padding-left: 20px;
+   margin-top: 0;
+   margin-bottom: 0;
+}
+
+li {
+   margin-bottom: 1ex;
+}
+
+li:last-child {
+   margin-bottom: 0;
+}
+
+.table-caption {
+   text-align: left;
+}
+
+nav ul {
+   padding-left: 0;
+   list-style: none;
+}
+
+nav ul li {
+   float: left;
+   overflow: hidden;
+   margin-bottom: 0;
+}
+
+nav ul li:not(:last-child)::after {
+   content: "•";
+   margin-right: 5px;
+   margin-left: 5px;
+}
+
+nav ul li.active-page a {
+   pointer-events: none;
+   color: inherit;
+   text-decoration: none;
+   cursor: default;
+   font-weight: bold;
+   color: rgb(135, 129, 255);
+}
+
+.cm-editor {
+   background: #2D2D2D;
+   color: #F0F0F0;
+}
+
+.cm-line {
+   font-family: 'Ubuntu Mono';
+   font-size: 10pt;
+}
+
+.cm-gutter {
+   background-color: #232323;
+}
+
+.cm-gutterElement {
+   font-family: 'Ubuntu Mono';
+   font-size: 10pt;
+   color: #88C0D0;
+}
+
+.right-border {
+   border-right: 0.5px solid lightgray;
+   padding-right: 6px;
+}
+
+.right-border + div {
+   padding-left: 4px
+}
+
+.header-grid-container {
+   display: grid;
+   background-color: #f0f0f0;
+   width: 100%;
+   grid-template-columns: 35% 1fr;
+   padding-top: 7px;
+   padding-bottom: 7px;
+}
+
+.footer-grid-container {
+   display: grid;
+   background-color: #f0f0f0;
+   width: 100%;
+   grid-template-columns: 35% 1fr;
+   margin-top: 10px;
+}
+
+:root {
+  --toggle-button-width: 24px;
+  --text-pane-width: 800px;
+}
+
+.grid-container {
+   display: grid;
+   grid-template-columns: auto var(--toggle-button-width) var(--text-pane-width);
+   justify-content: center;
+}
+
+.grid-container.data-pane-hidden {
+   grid-template-columns: 0 var(--toggle-button-width) var(--text-pane-width);
+}
+
+.grid-container.double-size {
+   max-width: 66.7vw; /* undo effect of transform: scale(1.5) for layout purposes */
+}
+
+.grid-container > :last-child {
+  padding-right: 10px;
+}
+
+.flex-bottom-align {
+   display: flex;
+   flex-direction: row;
+}
+
+.flex-bottom-align:first-child {
+   margin-top: auto;
+}
+
+.flex-left-align {
+   display: flex;
+   flex-direction: column;
+   align-items: start;
+}
+
+.flex-right-align {
+   display: flex;
+   flex-direction: column;
+   align-items: flex-end;
+}
+
+.flex-bottom-align {
+   display: flex;
+   flex-direction: row;
+   align-items: flex-end;
+}
+
+.data-pane-button {
+   font-size: 10pt;
+}
+
+.toggle-button {
+   color: #CCCCCC;
+   user-select: none;
+}
+
+.toggle-button:hover {
+   color: #999999;
+   cursor: pointer;
+}
+
+.data-pane {
+   border-right: 1px dotted #CCCCCC;
+}
+
+.data-pane-hidden .data-pane {
+   visibility: hidden;
+}
+
+.data-pane-hidden .data-pane * {
+   display: none;
+}
+
+.data-pane * {
+   font-size: 10pt;
+}
+
+.data-pane p {
+   margin-right: 3px;
+}
+
+/* Not actually double-size any more.. */
+.double-size {
+   transform: scale(1.5);
+   transform-origin: top;
+   --text-pane-width: 600px;
+}
+
+body.standalone {
+   height: 100%;
+   display: grid;
+   justify-items: center;
+   align-items: start;
+}
+
+/* Needed for contained height specifications to work */
+html {
+   height: 100%;
+}
+
+@keyframes fadeIn {
+   from { opacity: 0; }
+   to { opacity: 1; }
+}
+
+.fig-loading:only-child {
+   color: fuchsia;
+   animation: fadeIn 2s ease-in-out infinite alternate;
+}
+
+.fig-loading:not(:only-child) {
+   display: none;
+}

package/dist/fluid/css/css/view-styles.css

@@ -0,0 +1,182 @@
+.legend-box {
+   stroke: lightgray;
+   stroke-width: 0.5px;
+   fill: none;
+}
+
+.legend-text {
+   font-size: 9pt;
+}
+
+.title-text {
+   fill: Black;
+   font-size: 9pt;
+}
+
+.table-view th {
+   font-size: 11px;
+   text-align: left;
+   border-bottom: 'thin solid';
+}
+
+.table-view td {
+   font-size: 11px;
+}
+
+.table-view td:nth-child(1) {
+   color: lightgray;
+}
+
+table {
+   border-collapse: collapse;
+}
+
+thead {
+   border-top: 0.5px solid lightgray;
+}
+
+.table-cell {
+   border-radius: 0px;
+}
+
+td.table-cell {
+   background-color: white;
+}
+
+.table-cell.inert {
+   color: lightgrey;
+}
+
+.table-cell.selected-primary-persistent {
+   background-color: #93E9BE;
+}
+
+.table-cell.selected-secondary-persistent {
+   background-color: rgb(226, 226, 226);
+}
+
+.table-cell.selected-primary-transient {
+   color: blue;
+}
+
+.table-cell.selected-secondary-transient {
+   color: royalblue;
+}
+
+.table-row {
+   display: table-row;
+}
+
+.table-row.hidden {
+   visibility: collapse;
+}
+
+.linked-text {
+   border-radius: 0px;
+   background-color: White;
+   border-bottom-style: solid;
+   border-bottom-color: white;
+   border-bottom-width: 1px;
+   display: inline;
+}
+
+.linked-text.inert {
+   fill: lightgrey;
+}
+
+.linked-text.selected-primary-persistent {
+   background-color: #93E9BE;
+}
+
+.linked-text.selected-primary-transient {
+   border-bottom-color: blue;
+}
+
+.linked-text.selected-secondary-persistent {
+   background-color: rgb(226, 226, 226);
+}
+
+.linked-text.selected-secondary-transient {
+   border-bottom-color: lightblue;
+}
+
+.matrix-cell {
+   stroke: DarkGray;
+   fill: White;
+}
+
+.matrix-cell.inert {
+   stroke: DarkGray;
+   fill: rgb(185, 185, 185);
+}
+
+.matrix-cell.selected-primary-persistent {
+   fill: LightGreen;
+}
+
+.matrix-cell.selected-secondary-persistent {
+   fill: rgb(214, 240, 214)
+}
+
+.matrix-cell.selected-primary-transient {
+}
+
+.matrix-cell.selected-secondary-transient {
+}
+
+.matrix-cell-text {
+   font-size: 10pt;
+   font-family: "GraphikLight", sans-serif;
+   color: rgb(205, 205, 205)
+}
+
+.matrix-cell-text.selected-primary-persistent {
+   font-weight: 400;
+   color: darkgreen
+}
+
+.matrix-cell-text.selected-secondary-persistent {
+   color: green
+}
+
+.matrix-cell-text.selected-primary-transient {
+   font-weight: 400;
+   color: blue
+}
+
+.matrix-cell-text.selected-secondary-transient {
+   color: royalblue
+}
+
+.scatterplot-point {
+   fill: white;
+   stroke: black;
+}
+
+.scatterplot-point.inert {
+   fill: rgb(185,185,185);
+   stroke: black;
+}
+
+.scatterplot-point.selected-primary-persistent {
+   fill: LightGreen;
+   stroke: teal;
+}
+
+.scatterplot-point.selected-secondary-transient {
+   stroke: blue;
+   stroke-width: 1;
+}
+
+.scatterplot-point.selected-primary-transient {
+   stroke: blue;
+   stroke-width: 1;
+}
+
+.scatterplot-point.selected-secondary-persistent {
+   fill: rgb(226, 226, 226);
+}
+
+.scatterplot-point.selected-secondary-transient {
+   stroke-width: 1;
+}

package/dist/fluid/fluid.mjs

@@ -25986,6 +25986,7 @@ var mkCommand = (m) => {
   const $0 = v.cmdCommands;
   return $Tuple(v.cmdGroup, $Tuple(arrayMap(fst)($0), $Tuple((v1) => lookup4(v1)($0), void 0)));
 };
+var flagFieldsHasName = { name: (n) => (fields) => ({ flagNames: [n, ...fields.flagNames], flagActive: fields.flagActive }) };
 var modSemigroup = {
   append: (v) => (v1) => $Mod((x) => v1._1(v._1(x)), $DefaultProp(v1._2._1.tag === "Nothing" ? v._2._1 : v1._2._1, v1._2._2.tag === "Nothing" ? v._2._2 : v1._2._2), (x) => v1._3(v._3(x)))
 };
@@ -28364,6 +28365,41 @@ var graphEval2 = /* @__PURE__ */ graphEval(monadErrorAff);
 var fromFoldable29 = /* @__PURE__ */ (() => fromFoldableImpl(foldableList.foldr))();
 var Evaluate = (value0) => $Command("Evaluate", value0);
 var Publish = (value0) => (value1) => $Command("Publish", value0, value1);
+var publish = /* @__PURE__ */ (() => $Parser(
+  "MultP",
+  $MultPE(
+    parserFunctor.map(Publish)(parserFunctor.map(Folder)(option(readerAsk)((() => {
+      const $0 = help("root directory of website under dist/");
+      const $1 = $0._2._2.tag === "Nothing" ? Nothing : $0._2._2;
+      return $Mod(
+        (x) => $0._1({
+          optNames: [$OptName("OptShort", "w"), $OptName("OptLong", "website"), ...x.optNames],
+          optCompleter: x.optCompleter,
+          optNoArgError: x.optNoArgError
+        }),
+        $DefaultProp($Maybe("Just", "Misc"), $1.tag === "Nothing" ? Nothing : $1),
+        (x) => $0._3(x)
+      );
+    })()))),
+    $Parser(
+      "AltP",
+      flag$p(true)(foldableArray.foldMap(modMonoid)(identity3)([
+        $Mod(
+          flagFieldsHasName.name($OptName("OptLong", "local")),
+          $DefaultProp(Nothing, Nothing),
+          identity26
+        ),
+        $Mod(
+          flagFieldsHasName.name($OptName("OptShort", "l")),
+          $DefaultProp(Nothing, Nothing),
+          identity26
+        ),
+        help("Are you publishing from source (false), or an npm package (true)?")
+      ])),
+      $Parser("NilP", false)
+    )
+  )
+))();
 var parseImports = /* @__PURE__ */ $Parser(
   "BindP",
   /* @__PURE__ */ manyM(/* @__PURE__ */ option(readerAsk)(/* @__PURE__ */ (() => {
@@ -28400,7 +28436,7 @@ var copyOptions = {
   encoding: Nothing,
   shell: Nothing
 };
-var copyFiles = (website) => exec2("./node_modules/@explorable-viz/fluid/script/bundle-website.sh -w " + website + " -r true")(copyOptions)((v) => {
+var copyFiles = (website) => (b) => exec2(b ? "./node_modules/@explorable-viz/fluid/script/bundle-website.sh -w " + website + " -r true" : "./script/bundle-website.sh -w " + website)(copyOptions)((v) => {
   if (v.error.tag === "Just") {
     return log(showErrorImpl(v.error._1));
   }
@@ -28415,11 +28451,11 @@ var copyFiles = (website) => exec2("./node_modules/@explorable-viz/fluid/script/
 });
 var dispatchCommand = (v) => {
   if (v.tag === "Evaluate") {
-    return output(v._1);
+    return _map((v$1) => {
+    })(output(v._1));
   }
   if (v.tag === "Publish") {
-    const $0 = v._1;
-    return _bind(_liftEffect(copyFiles(v._2)))(() => _bind(_liftEffect(log("Published")))(() => output($0)));
+    return _bind(_liftEffect(copyFiles(v._1)(v._2)))(() => _liftEffect(log("Published")));
   }
   fail();
 };
@@ -28428,7 +28464,7 @@ var callback = (v) => {
     return log(showErrorImpl(v._1));
   }
   if (v.tag === "Right") {
-    return log(intercalate4("\n")(removeDocWS(prettyVal(highlightableUnit).pretty(v._1)).lines));
+    return log("Success");
   }
   fail();
 };
@@ -28515,25 +28551,6 @@ var program = /* @__PURE__ */ (() => $Parser(
     })())
   )
 ))();
-var publish = /* @__PURE__ */ (() => $Parser(
-  "MultP",
-  $MultPE(
-    parserFunctor.map(Publish)(program),
-    parserFunctor.map(Folder)(option(readerAsk)((() => {
-      const $0 = help("root directory of website under dist/");
-      const $1 = $0._2._2.tag === "Nothing" ? Nothing : $0._2._2;
-      return $Mod(
-        (x) => $0._1({
-          optNames: [$OptName("OptShort", "w"), $OptName("OptLong", "website"), ...x.optNames],
-          optCompleter: x.optCompleter,
-          optNoArgError: x.optNoArgError
-        }),
-        $DefaultProp($Maybe("Just", "Misc"), $1.tag === "Nothing" ? Nothing : $1),
-        (x) => $0._3(x)
-      );
-    })()))
-  )
-))();
 var commandParser = /* @__PURE__ */ subparser(/* @__PURE__ */ (() => {
   const $0 = command("evaluate")(progDesc("Evaluate a file")({
     infoParser: parserFunctor.map(Evaluate)(program),

package/dist/fluid/shared/shared/footer.html

@@ -0,0 +1,6 @@
+<div class="footer-grid-container">
+   <div></div>
+   <div class="flex-left-align">
+      <p>© Fluid Contributors 2019–2024</p>
+   </div>
+</div>

package/dist/fluid/shared/shared/header.html

@@ -0,0 +1,26 @@
+<div class="header-grid-container">
+   <div class="flex-right-align right-border">
+      <img class="fluid-logo" src="/image/fluid-logo.png" width="150px">
+      <h2 class="fluid-subtitle">explorable, self-explanatory research outputs</h2>
+   </div>
+   <div class="flex-left-align" style="justify-content: center; margin-left: 5px;">
+      <nav>
+         <ul>
+            <li><a href="https://github.com/explorable-viz/fluid">GitHub</a></li>
+            <li><a href="https://dl.acm.org/doi/10.1145/3498668">POPL 2022 paper</a></li>
+            <li><a href="https://www.youtube.com/watch?v=M_ePrtD9axk">POPL 2022 talk</a></li>
+            <li><a href="https://www.youtube.com/watch?v=2-S6yVyzypU">PROPL 2024</a></li>
+            <li><a href="https://www.youtube.com/watch?v=F3JaftEnFfM">ICCS Summer School</a></li>
+            <li><a href="https://arxiv.org/abs/2403.04403">ESOP 2025 preprint</a></li>
+         </ul>
+      </nav>
+      <nav>
+         <ul>
+            <li><a href="/">Overview</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/contributors">Contributors &amp; Funding</a></li>
+         </ul>
+      </nav>
+      <div></div>
+   </div>
+</div>

package/dist/fluid/shared/shared/sub-header.html

@@ -0,0 +1,12 @@
+<div></div>
+<div></div>
+<div>
+   <h3 class="title">Overview</h3>
+   <nav class="sub-header">
+      <ul>
+         <li><a href="/">Transparent research outputs</a></li>
+         <li><a href="/convolution">Matrix convolution</a></li>
+         <li><a href="/moving-average">Moving average</a></li>
+      </ul>
+   </nav>
+</div>

package/dist/fluid/shared/shared/util.js

@@ -0,0 +1,72 @@
+function loadHeader () {
+   fetch('/shared/header.html')
+      .then(response => response.text())
+      .then(data => {
+         const header = document.createElement('div')
+         header.innerHTML = data
+         activateCurrentLink(header)
+         const divElement = header.children[0]
+         const grid = document.getElementById('grid')
+         grid.parentNode.insertBefore(divElement, grid)
+      })
+      .catch(error => console.error('Error loading shared HTML:', error))
+
+   fetch('/shared/footer.html')
+      .then(response => response.text())
+      .then(data => {
+         const footer = document.createElement('div')
+         footer.innerHTML = data
+         const divElement = footer.children[0]
+         const grid = document.getElementById('grid')
+         grid.parentNode.appendChild(divElement)
+      })
+      .catch(error => console.error('Error loading shared HTML:', error))
+}
+
+function eqPaths (path1, path2) {
+   const trailingSlashes = /\/+$/
+   return path1.replace(trailingSlashes, '') === path2.replace(trailingSlashes, '')
+}
+
+function activateCurrentLink (el) {
+   const listItems = el.querySelectorAll('li')
+   const n_ = Array.from(listItems).findIndex(li => {
+      const link = li.querySelector('a')
+      return link && eqPaths(link.getAttribute('href'), window.location.pathname)
+   })
+   if (n_ !== -1) {
+      listItems[n_].classList.add('active-page')
+   }
+}
+
+function loadSubHeader () {
+   fetch('/shared/sub-header.html')
+      .then(response => response.text())
+      .then(data => {
+         const header = document.createElement('div')
+         header.innerHTML = data
+         activateCurrentLink(header)
+         const divElements = header.children
+         const grid = document.getElementById('grid')
+         for (let i = Math.min(3, divElements.length - 1); i >= 0; --i) {
+            grid.insertBefore(divElements[i], grid.firstChild)
+         }
+      })
+      .catch(error => console.error('Error loading shared HTML:', error))
+}
+
+function toggleDataPane(gridId) {
+   const grid = document.getElementById(gridId)
+   const hidden = grid.classList.contains('data-pane-hidden')
+   const dataPaneButton = document.querySelector('.data-pane-button')
+
+   if (hidden) {
+      grid.classList.remove('data-pane-hidden')
+      dataPaneButton.classList.remove('fa-eye-slash')
+      dataPaneButton.classList.add('fa-eye')
+   } else {
+      grid.classList.add('data-pane-hidden')
+      dataPaneButton.classList.remove('fa-eye')
+      dataPaneButton.classList.add('fa-eye-slash')
+   }
+}

package/package.json

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

package/script/bundle-website.sh

@@ -27,6 +27,11 @@ SRC_PATH=${WEBSITE//./\/}
 SRC_PATH_LISP_CASE=$($LISP_CASE "$SRC_PATH")
 echo "$SRC_PATH -> $SRC_PATH_LISP_CASE"
 
+if [[ -e "website/$SRC_PATH.html" ]]; then
+   $CLEAN $SRC_PATH_LISP_CASE
+   cp website/$SRC_PATH.html dist/$SRC_PATH_LISP_CASE/index.html
+fi
+
 shopt -s nullglob
 
 set +x
@@ -75,6 +80,7 @@ cp $DIST/fluid/load-fig.js dist/$WEBSITE_LISP_CASE/shared/load-fig.js
 cp -r $DIST/fluid/font dist/$WEBSITE_LISP_CASE/font
 cp -r $DIST/fluid/css dist/$WEBSITE_LISP_CASE/css
 cp $DIST/fluid/favicon.ico dist/$WEBSITE_LISP_CASE/favicon.ico
+cp -r $DIST/fluid/image dist/$WEBSITE_LISP_CASE/image
 
 echo "Processing static files:"