@explorable-viz/fluid 0.7.29 → 0.7.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorable-viz/fluid",
-  "version": "0.7.29",
+  "version": "0.7.31",
   "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": {
@@ -39,7 +39,8 @@
     "test-website-all": "./script/test-website-all.sh",
     "test-all": "./script/test-all.sh",
     "npm-publish": "./script/npm-publish.sh",
-    "fluid": "./script/fluid.sh"
+    "fluid": "./script/fluid.sh",
+    "benchmark": "./script/benchmark.sh"
   },
   "dependencies": {
     "@codemirror/commands": "6.2.2",

package/script/bundle-website.sh

@@ -1,94 +1,53 @@
 #!/usr/bin/env bash
-set -xe
-
-WEBSITE="Misc"
-SCRIPT_ROOT=false
+set -xeu
 
+PREFIX=""
 
 while getopts "w:r:" opt; do
    case $opt in
       w) WEBSITE="$OPTARG";;
-      r) SCRIPT_ROOT="$OPTARG";;
+      r) PREFIX=node_modules/@explorable-viz/fluid;;
    esac
 done
 
-if [[ "$SCRIPT_ROOT" = true ]]; then
-    CLEAN=./node_modules/@explorable-viz/fluid/script/util/clean.sh
-    LISP_CASE=./node_modules/@explorable-viz/fluid/script/util/lisp-case.sh
-    DIST="node_modules/@explorable-viz/fluid/dist"
-else
-    CLEAN=./script/util/clean.sh
-    LISP_CASE=./script/util/lisp-case.sh
-    DIST="dist"
-fi
-
+WEBSITE_LISP_CASE=$(./$PREFIX/script/util/lisp-case.sh "$WEBSITE")
+echo "$WEBSITE -> $WEBSITE_LISP_CASE"
+mkdir -p "dist/$WEBSITE_LISP_CASE"
 
-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
+. script/bundle-page.sh $WEBSITE
 
 shopt -s nullglob
 
+# Only support one level of nesting for now
 set +x
 PAGES=($(for FILE in website/$WEBSITE/*.html; do
-    basename "$FILE" | sed 's/\.[^.]*$//'
+   basename "$FILE" | sed 's/\.[^.]*$//'
 done | sort -u))
 set -x
-for PAGE in "${PAGES[@]}"; do
-    MODULE=$WEBSITE.$PAGE
-    SRC_PATH=${MODULE//./\/}
-    SRC_PATH_LISP_CASE=$($LISP_CASE "$SRC_PATH")
-    echo "$SRC_PATH -> $SRC_PATH_LISP_CASE"
 
-    if [[ -e "website/$SRC_PATH.purs" ]]; then
-        . script/bundle-page.sh $WEBSITE.$PAGE
-    else
-        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
-    fi
-    
-    if [[ -e "website/$SRC_PATH.json" ]]; then
-        cp website/$SRC_PATH.json dist/$SRC_PATH_LISP_CASE/spec.json
-    fi
+for PAGE in "${PAGES[@]}"; do
+   . script/bundle-page.sh $WEBSITE.$PAGE
 done
 
-
-WEBSITE_LISP_CASE=$($LISP_CASE "$WEBSITE")
-
-set +x
+echo "Processing other static files:"
+set +xu  # try to remove +u
 TO_COPY=()
-for CHILD in website/$WEBSITE/*; do
+shopt -s extglob
+for CHILD in website/$WEBSITE/!(.|..); do
    BASENAME="$(basename "$CHILD")"
-   if [[ "$BASENAME" =~ ^[a-z] ]]; then
+   if [[ "$BASENAME" =~ ^[a-z.] ]]; then
       TO_COPY+=("$CHILD")
    fi
 done
-set -x
-
-echo "Processing shared files:"
-cp -r $DIST/fluid/shared dist/$WEBSITE_LISP_CASE/shared
-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:"
+shopt -u extglob
+set -xu
 
 for CHILD in "${TO_COPY[@]}"; do
-   BASENAME="$(basename "$CHILD")"
-   cp -r "$CHILD" "dist/$WEBSITE_LISP_CASE/$BASENAME"
-   done
+   cp -rL "$CHILD" dist/$WEBSITE_LISP_CASE
+done
+
+echo "Processing load-figure.js:"
+cp ${PREFIX}dist/fluid/load-figure.js dist/$WEBSITE_LISP_CASE/shared
 
-shopt -u nullglob
 cp -r fluid dist/$WEBSITE_LISP_CASE
 echo "Bundled website $WEBSITE"

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

@@ -1,343 +0,0 @@
-@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

@@ -1,182 +0,0 @@
-.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;
-}