Merge pull request #1204 from explorable-viz/text-viz

NPM package without installing purescript

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorable-viz/fluid",
-  "version": "0.7.17",
+  "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": {
@@ -18,7 +18,10 @@
   },
   "homepage": "https://f.luid.org",
   "files": [
-    "dist/fluid/"
+    "dist/fluid/",
+    "script/bundle-website.sh",
+    "script/util/clean.sh",
+    "script/util/lisp-case.sh"
   ],
   "scripts": {
     "tidy": "./script/tidy.sh",

script/build-test.sh

@@ -2,6 +2,6 @@
 set -xe
 
 yarn build # bundles FluidOrg
-yarn bundle-website Esop2025Artifact
-yarn bundle-website Misc
+yarn bundle-website -w Esop2025Artifact
+yarn bundle-website -w Misc
 yarn test-all

script/build.sh

@@ -5,4 +5,5 @@ rm -rf dist/
 ./script/util/compile.sh
 ./script/bundle.sh test Test.Test
 ./script/bundle-fluid.sh
+./script/bundle-load-figure.sh
 ./script/bundle-fluid-org.sh

script/bundle-fluid-org.sh

@@ -2,7 +2,7 @@
 set -xe
 
 WEBSITE=FluidOrg
-yarn bundle-website $WEBSITE
+yarn bundle-website -w $WEBSITE
 
 WEBSITE_LISP_CASE=$(./script/util/lisp-case.sh "$WEBSITE")
 unzip -o archive/0.3.1.zip -d dist/$WEBSITE_LISP_CASE > /dev/null # already has 0.3.1 as top-level folder

script/bundle-fluid.sh

@@ -1,17 +1,13 @@
 #!/usr/bin/env bash
 set -xe
 
-
 FLUID_EXECUTABLE="dist/fluid/fluid.mjs"
 
 yarn purs-backend-es bundle-app --main Fluid --to $FLUID_EXECUTABLE --platform=node
 yarn purs-backend-es bundle-app --main Test.Fluid --to dist/test/fluid/fluid.mjs --platform=node
 
-
-
 SHEBANG="#!/usr/bin/env node"
 
-# Check if the file exists
 if [[ ! -f "$FLUID_EXECUTABLE" ]]; then
   echo "Error: File $FLUID_EXECUTABLE not found."
   exit 1
@@ -22,5 +18,4 @@ if [[ $(head -n 1 "$FLUID_EXECUTABLE") != "$SHEBANG" ]]; then
 fi
 
 chmod +x "$FLUID_EXECUTABLE"
-
 cp -r fluid dist/fluid

script/bundle-load-figure.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+set -xe
+
+echo "Processing shared files:"
+cp -r website/shared dist/fluid
+cp -r website/font dist/fluid
+cp -r website/css dist/fluid
+cp -r website/image dist/fluid
+cp website/favicon.ico dist/fluid
+
+yarn purs-backend-es bundle-module -m Website.LoadFigure --to dist/fluid/load-figure.js

script/bundle-website.sh

@@ -1,28 +1,59 @@
 #!/usr/bin/env bash
-# run from project root
-set -xe
+set -xeu
 
-WEBSITE=$1
-. script/bundle-page.sh $WEBSITE
+PREFIX=""
+
+while getopts "w:r:" opt; do
+   case $opt in
+      w) WEBSITE="$OPTARG";;
+      r) PREFIX=node_modules/@explorable-viz/fluid;;
+   esac
+done
+
+LISP_CASE=./$PREFIX/script/util/lisp-case.sh
+DIST="${PREFIX}dist"
+
+SRC_PATH=${WEBSITE//./\/}
+SRC_PATH_LISP_CASE=$($LISP_CASE "$SRC_PATH")
+echo "$SRC_PATH -> $SRC_PATH_LISP_CASE"
+./$PREFIX/script/util/clean.sh $SRC_PATH_LISP_CASE
+
+if [[ -e "website/$SRC_PATH.html" ]]; then
+   cp website/$SRC_PATH.html dist/$SRC_PATH_LISP_CASE/index.html
+fi
 
-# Only support one level of nesting for now
 shopt -s nullglob
 
 set +x
-PAGES=($(for FILE in website/$WEBSITE/*.purs; do
-   basename "$FILE" | sed 's/\.[^.]*$//'
+PAGES=($(for FILE in website/$WEBSITE/*.html; do
+    basename "$FILE" | sed 's/\.[^.]*$//'
 done | sort -u))
 set -x
 
-echo "Processing ${WEBSITE} pages: ${PAGES[@]}"
-
 for PAGE in "${PAGES[@]}"; do
-   . script/bundle-page.sh $WEBSITE.$PAGE
-   done
+   MODULE=$WEBSITE.$PAGE
+   SRC_PATH=${MODULE//./\/}
+   SRC_PATH_LISP_CASE=$($LISP_CASE "$SRC_PATH")
+   echo "$SRC_PATH -> $SRC_PATH_LISP_CASE"
+   mkdir dist/$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
+         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
+done
 
-WEBSITE_LISP_CASE=$(./script/util/lisp-case.sh "$WEBSITE")
+WEBSITE_LISP_CASE=$($LISP_CASE "$WEBSITE")
 
 set +x
+set +u # try and remove this
 TO_COPY=()
 for CHILD in website/$WEBSITE/*; do
    BASENAME="$(basename "$CHILD")"
@@ -32,11 +63,19 @@ for CHILD in website/$WEBSITE/*; do
 done
 set -x
 
-echo "Processing static files:"
+echo "Processing shared files:"
+cp -r $DIST/fluid/shared dist/$WEBSITE_LISP_CASE
+# or just bundle load-figure.js to $DIST/fluid/shared instead?
+cp $DIST/fluid/load-figure.js dist/$WEBSITE_LISP_CASE/shared
+cp -r $DIST/fluid/font dist/$WEBSITE_LISP_CASE
+cp -r $DIST/fluid/css dist/$WEBSITE_LISP_CASE
+cp $DIST/fluid/favicon.ico dist/$WEBSITE_LISP_CASE
+cp -r $DIST/fluid/image dist/$WEBSITE_LISP_CASE
 
+echo "Processing other static files:"
 for CHILD in "${TO_COPY[@]}"; do
    BASENAME="$(basename "$CHILD")"
-   cp -rL "$CHILD" "dist/$WEBSITE_LISP_CASE/$BASENAME"
+   cp -r "$CHILD" "dist/$WEBSITE_LISP_CASE/$BASENAME"
    done
 
 shopt -u nullglob

spago.dhall

@@ -8,6 +8,8 @@ You can edit this file as you like.
   , "aff-promise"
   , "affjax"
   , "affjax-web"
+  , "argonaut"
+  , "argonaut-codecs"
   , "arrays"
   , "bifunctors"
   , "console"
@@ -31,6 +33,7 @@ You can edit this file as you like.
   , "maybe"
   , "newtype"
   , "node-buffer"
+  , "node-child-process"
   , "node-fs"
   , "nonempty"
   , "numbers"

src/App/View/BarChart.js

@@ -13,7 +13,7 @@ d3.selection.prototype.attrs = function(m) {
 // SVG patterns don't support per-usage styling so generate one per colour
 // Masks eliminate dependency on specific colours but seem to clip the stroke a bit
 function addHatchPattern (rootElement, j, col_j) {
-   pattern = rootElement.append('pattern')
+   let pattern = rootElement.append('pattern')
       .attr('id', 'diagonalHatch-' + j)
       .attr('patternUnits', 'userSpaceOnUse')
       .attr('width', 2)
@@ -152,7 +152,7 @@ function drawBarChart_ (
 
          const legendLineHeight = 15,
                legendStart = width + margin.left / 2
-               names = stackedBars[0].bars.map(bar => val(bar.y))
+         let   names = stackedBars[0].bars.map(bar => val(bar.y))
          rootElement.append('rect')
             .attr('class', 'legend-box')
             .attr('transform', `translate(${legendStart}, ${height / 2 - margin.top - 2})`)

src/App/View/Util/D3.js

@@ -118,7 +118,7 @@ export function dimensions (sel) {
       if (sel.nodes().length != 1) {
          throw "Expected singleton selection"
       }
-      [ node ] = sel.nodes()
+      const [ node ] = sel.nodes()
       let { width, height } = node.getBBox()
       return { width: Math.ceil(width), height: Math.ceil(height) }
    }

src/Fluid.purs

@@ -3,7 +3,7 @@ module Fluid where
 import Prelude hiding (between)
 
 import Bind (Bind, (↦))
-import Data.Array (filter, fromFoldable)
+import Data.Array (filter, fold, fromFoldable)
 import Data.Either (Either(..))
 import Data.List (List)
 import Data.Maybe (Maybe(..))
@@ -15,10 +15,12 @@ import Effect.Class (liftEffect)
 import Effect.Class.Console (log, logShow)
 import EvalGraph (graphEval)
 import Lattice (erase)
-import Module.Node (File(..), loadProgCxt, prepConfig)
-import Options.Applicative (Parser, eitherReader, execParser, fullDesc, header, help, helper, long, many, option, progDesc, short, strOption, (<**>))
+import Module.Node (File(..), Folder(..), loadProgCxt, prepConfig)
+import Node.Buffer (toString)
+import Node.ChildProcess (ChildProcess, ExecOptions, exec)
+import Node.Encoding (Encoding(..))
+import Options.Applicative (Parser, command, eitherReader, execParser, fullDesc, header, help, helper, long, many, option, progDesc, short, strOption, subparser, switch, value, (<**>))
 import Options.Applicative.Builder (info)
-import Pretty (prettyP)
 import Util (Endo)
 import Val (Val)
 
@@ -28,9 +30,11 @@ data Program = Program
    , fileName :: String
    }
 
+data Command = Evaluate Program | Publish Folder Boolean
+
 between :: forall a. Pattern -> Pattern -> Endo (String -> Either String a)
-between p1 p2 = \f s -> do
-   case (stripPrefix p1) s >>= (stripSuffix p2) of
+between p1 p2 f s =
+   case (stripPrefix p1) s >>= stripSuffix p2 of
       Just rest -> f rest
       Nothing -> Left ("Expected " <> show p1 <> "..." <> show p2 <> " but got ...")
 
@@ -72,21 +76,66 @@ program = ado
    fileName <- strOption (long "file" <> short 'f' <> help "The file to parse")
    in Program { imports, datasets, fileName }
 
+commands :: { publish :: Parser Command, evaluate :: Parser Command }
+commands =
+   { publish: Publish <$> (Folder <$> strOption (long "website" <> short 'w' <> help "root directory of website under dist/" <> value "Misc"))
+        <*> switch (fold [ long "local", short 'l', help "Are you publishing from source (false), or an npm package (true)?" ])
+   , evaluate: Evaluate <$> program
+   }
+
+commandParser :: Parser Command
+commandParser = subparser
+   ( command "evaluate" (info commands.evaluate (progDesc "Evaluate a file"))
+        <> command "publish" (info commands.publish (progDesc "Publish a file"))
+   )
+
+dispatchCommand ∷ Command → Aff Unit
+dispatchCommand (Evaluate p) =
+   void $ evaluate p
+dispatchCommand (Publish (Folder website) b) = do -- Publish -> BundleWebsite?
+   void $ liftEffect $ publish website b
+   log "Published"
+
+copyOptions :: ExecOptions
+copyOptions =
+   { cwd: Nothing
+   , env: Nothing
+   , timeout: Nothing
+   , killSignal: Nothing
+   , maxBuffer: Nothing
+   , uid: Nothing
+   , gid: Nothing
+   , encoding: Nothing
+   , shell: Nothing
+   }
+
+-- Rename to bundleWebsite?
+publish ∷ String -> Boolean -> Effect ChildProcess
+publish website b =
+   exec cmd copyOptions \{ error, stdout } ->
+      case error of
+         (Just err) -> logShow err
+         Nothing -> do
+            out <- toString ASCII stdout
+            log out
+   where
+   cmd =
+      if b then "./node_modules/@explorable-viz/fluid/script/bundle-website.sh -w " <> website <> " -r true"
+      else "./script/bundle-website.sh -w " <> website
+
 main :: Effect Unit
-main = runAff_ callback do
-   output =<< (liftEffect $ execParser opts)
+main = runAff_ callback (dispatchCommand =<< liftEffect (execParser opts))
    where
-   opts = info (program <**> helper) (fullDesc <> progDesc "Parse a file" <> header "parse - a simple parser")
+   opts = info (commandParser <**> helper) (fullDesc <> progDesc "Parse a file" <> header "parse - a simple parser")
 
-callback :: Either Error (Val Unit) -> Effect Unit
+callback :: Either Error Unit -> Effect Unit
 callback = case _ of
    Left err -> logShow err
-   Right v -> log (prettyP v)
+   Right _ -> log "Success"
 
-output :: Program -> Aff (Val Unit)
-output (Program { imports, datasets, fileName }) = do
+evaluate :: Program -> Aff (Val Unit)
+evaluate (Program { imports, datasets, fileName }) = do
    progCxt <- loadProgCxt imports datasets
    { e, gconfig } <- prepConfig (File fileName) progCxt
    { outα } <- graphEval gconfig e
    pure (erase outα)
-

test/Fluid.purs

@@ -6,7 +6,7 @@ import Control.Promise (fromAff)
 import Data.Foldable (sequence_)
 import Effect (Effect)
 import Effect.Aff (Aff)
-import Fluid (Program(..), output)
+import Fluid (Program(..), evaluate)
 import Lattice (erase)
 import Pretty (prettyP)
 import Test.Util (testCondition)
@@ -17,9 +17,9 @@ main = do
 
 testFluid :: Aff Unit
 testFluid = do
-   outα <- output $ Program
+   outα <- evaluate $ Program
       { imports: []
       , datasets: []
       , fileName: "length"
       }
-   testCondition "length" ((prettyP $ erase outα) == "2") (prettyP outα)
+   testCondition "length" ((prettyP $ erase outα) == "2") (prettyP outα)

website/Esop2025Artifact/Fig2.html

@@ -36,6 +36,9 @@ <h3>Moving Average</h3>
    </div>
 </div>
 
-<script src="fluid.js"></script>
+<script type="module">
+   import { loadFigure } from "/shared/load-figure.js"
+   loadFigure("spec.json")();
+</script>
 </body>
 </html>

website/Esop2025Artifact/Fig2.json

@@ -0,0 +1,6 @@
+{
+    "file": "linked-outputs/moving-average",
+    "imports": [],
+    "inputs": ["methane"],
+    "datasets": [["methane", "dataset/methane-emissions"]]
+}

website/Esop2025Artifact/Fig4.html

@@ -35,6 +35,9 @@ <h3>Non-renewables energy output</h3>
    </div>
 </div>
 
-<script src="fluid.js"></script>
+<script type="module">
+   import { loadFigure } from "/shared/load-figure.js"
+   loadFigure("spec.json")();
+</script>
 </body>
 </html>