@explorable-viz/fluid 0.7.101 → 0.7.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorable-viz/fluid",
-  "version": "0.7.101",
+  "version": "0.7.103",
   "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": {
@@ -25,6 +25,9 @@
     "script/util/clean.sh",
     "script/util/lisp-case.sh",
     "website/article",
+    "website/css",
+    "website/font",
+    "website/shared",
     "script/install-article.sh",
     "script/util/serve.sh"
   ],

package/script/bundle-website.sh

@@ -22,6 +22,11 @@ PREFIX_=${PREFIX:+$PREFIX/}
 echo "Cleaning dist/$WEBSITE"
 . "${PREFIX_}script/util/clean.sh" $WEBSITE
 
+for DIR in css font shared; do
+  echo "Processing $DIR files:"
+  cp -rL "website/$WEBSITE/$DIR" "dist/$WEBSITE/$DIR"
+done
+
 shopt -s nullglob
 
 echo "Processing other static files:"

package/website/css/styles.css

@@ -0,0 +1,357 @@
+@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;
+}
+
+.para-text {
+   font-size: 9pt;
+}
+
+p {
+   margin-top: 1em;
+   margin-bottom: 1em;
+}
+
+p + p {
+   margin-top: 0;
+}
+
+svg {
+   overflow: visible;
+}
+
+.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: 30% 1fr;
+   padding-top: 7px;
+   padding-bottom: 7px;
+}
+
+.footer-grid-container {
+   display: grid;
+   background-color: #f0f0f0;
+   width: 100%;
+   grid-template-columns: 30% 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-top-align {
+   display: flex;
+   flex-direction: row;
+   align-items: flex-start;
+}
+
+.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-column {
+   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/website/css/view-styles.css

@@ -0,0 +1,190 @@
+.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;
+   font-weight: 600;
+}
+
+.table-cell.selected-secondary-transient {
+   /* color: royalblue; */
+}
+
+.table-row {
+   display: table-row;
+}
+
+.table-row.hidden {
+   visibility: collapse;
+}
+
+/* hack to match Safari-only */
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+   .table-row.hidden {
+      display: none; /* suboptimal for table rows but Safari doesn't support 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/website/shared/footer.html

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

package/website/shared/header.html

@@ -0,0 +1,27 @@
+<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>
+            <li><a href="/student-projects">Student Projects</a></li>
+         </ul>
+      </nav>
+      <div></div>
+   </div>
+</div>

package/website/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/website/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(4, 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')
+   }
+}