@explorable-viz/fluid 0.12.1 → 0.12.3

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@explorable-viz/fluid",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "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": {
     "type": "git",
     "url": "git+https://github.com/explorable-viz/fluid.git#release"
@@ -20,31 +19,19 @@
   "files": [
     "dist/fluid/shared",
     "dist/fluid/fluid/lib",
-    "script/bundle-website.sh",
-    "script/bundle-page.sh",
-    "script/util/clean.sh",
-    "script/util/lisp-case.sh",
-    "website/article",
-    "script/install-website.sh",
-    "script/util/serve.sh"
+    "web/lib",
+    "website/article"
   ],
   "scripts": {
-    "benchmark": "./script/benchmark.sh",
     "build": "./script/build.sh",
     "build-prod": "BUILD_ENV=prod ./script/build.sh",
-    "build-publish": "yarn build-prod && yarn publish",
+    "build-publish": "yarn build-prod && ./script/stage-website.sh article && yarn npm publish --access public",
     "build-test": "./script/build-test.sh",
     "bundle-fluid": "./script/bundle-fluid.sh",
-    "bundle-serve": "sh -c './script/bundle-website.sh \"$@\" && ./script/serve.sh \"$1\"' _",
-    "bundle-website": "./script/bundle-website.sh",
-    "bundle-website-all": "./script/bundle-website-all.sh",
     "fluid": "node ./dist/fluid/shared/fluid.mjs",
-    "serve": "./script/serve.sh",
     "test": "./script/test.sh",
     "test-all": "./script/test-all.sh",
     "test-browser": "./script/test.sh --browsers=Chrome --singleRun=false",
-    "test-website": "./script/test-website.sh",
-    "test-website-all": "./script/test-website-all.sh",
     "tidy": "./script/tidy.sh"
   },
   "dependencies": {
@@ -58,11 +45,6 @@
     "commander": "^12.1.0",
     "d3": "^7.9.0",
     "datetime": "^0.0.3",
-    "express": "^4.19.2",
-    "express-static": "^1.2.6",
-    "http-server": "^14.1.1",
-    "http-shutdown": "^1.2.2",
-    "node": "^22.11.0",
     "node-process": "^1.0.1",
     "os": "^0.1.2",
     "util": "^0.12.5"
@@ -84,11 +66,15 @@
     "spago": "^0.21.0",
     "typescript": "^5.5.3"
   },
+  "engines": {
+    "node": ">=22"
+  },
   "bin": {
     "fluid": "./dist/fluid/shared/fluid.mjs",
-    "test-website": "./dist/fluid/shared/website-test.js",
-    "install-website": "./script/install-website.sh",
-    "bundle-website": "./script/bundle-website.sh"
+    "install-website": "./script/install-website.sh"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "svelte": "./web/lib/index.js",
+  "exports": {
+    ".": "./web/lib/index.js"
+  }
 }

package/script/install-website.sh

@@ -1,15 +1,33 @@
 #!/usr/bin/env bash
-set -xeu
+set -e
 
-# Run from root of repo
+WEBSITE="${1:-article}"
+NPM_ROOT="node_modules/@explorable-viz/fluid"
+SRC="$NPM_ROOT/website/$WEBSITE"
+DEST="website/$WEBSITE"
 
-WEBSITE=$1
-NPM_ROOT=node_modules/@explorable-viz/fluid
+if [ ! -d "$SRC" ]; then
+   echo "Error: website '$WEBSITE' not found in $NPM_ROOT" >&2
+   echo "Available websites:"
+   ls "$NPM_ROOT/website/" 2>/dev/null || echo "  (none)"
+   exit 1
+fi
 
-if [ -e "website/$WEBSITE" ]; then
-  echo "Error: website/$WEBSITE already exists" >&2
-  exit 1
+if [ -e "$DEST" ]; then
+   echo "Error: $DEST already exists. Remove it first to reinstall." >&2
+   exit 1
 fi
 
-mkdir -p website/$WEBSITE
-cp -r $NPM_ROOT/website/$1 website
+echo "Installing $WEBSITE from $SRC..."
+mkdir -p "$(dirname "$DEST")"
+cp -r "$SRC" "$DEST"
+
+# Recreate symlinks pointing into node_modules
+rm -rf "$DEST/static/fluid/lib"
+ln -s "../../../../$NPM_ROOT/dist/fluid/fluid/lib" "$DEST/static/fluid/lib"
+
+echo ""
+echo "Installed to $DEST. To run:"
+echo "  cd $DEST"
+echo "  yarn install"
+echo "  yarn dev"

package/web/lib/CodeMirror.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { loadCode } from '../../output-es/App.LoadFigure';
+	import { onMount } from 'svelte';
+
+	let { name, src, details = true } = $props();
+
+	onMount(() => {
+		loadCode(src)();
+	});
+</script>
+
+{#if details}
+<details>
+	<summary>{name}.fld</summary>
+	<div id="codemirror-{name}"></div>
+</details>
+{:else}
+<div id="codemirror-{name}"></div>
+{/if}

package/web/lib/DataPane.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	let { children, showDataPane, toggle } = $props();
+</script>
+
+{@render children()}
+
+<div>
+	<button style="all:unset" title="Show data pane" onclick={toggle}>
+		<div class="data-pane-button toggle-button">
+			{#if showDataPane}
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+					<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+					<path
+						fill-rule="evenodd"
+						d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+					<path
+						fill-rule="evenodd"
+						d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+						clip-rule="evenodd"
+					/>
+					<path
+						d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+					/>
+				</svg>
+			{/if}
+		</div>
+	</button>
+</div>
+
+<style>
+	.toggle-button {
+		height: 18px;
+		width: 18px;
+		color: #cccccc;
+		cursor: pointer;
+	}
+
+	.toggle-button:hover {
+		color: #999999;
+	}
+</style>

package/web/lib/Figure.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { loadFigure } from '../../output-es/App.LoadFigure';
+	import { onMount } from 'svelte';
+	import './view-styles.css';
+
+	let { spec, fld } = $props();
+
+	onMount(() => {
+		loadFigure(spec)('fig')(fld)();
+	});
+</script>
+
+<div id="fig">
+	<div class="fig-loading">loading figure(s)</div>
+</div>
+
+<!-- CSS is scoped to the component and served only when
+the component is rendered, i.e. not a single big .css file
+for the whole site -->
+<style>
+	@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;
+	}
+</style>

package/web/lib/FigureSrc.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { loadFigureSrc } from '../../output-es/App.LoadFigure';
+	import { onMount } from 'svelte';
+	import './view-styles.css';
+
+	let { spec, src } = $props();
+
+	onMount(() => {
+		loadFigureSrc(spec)('fig')(src)();
+	});
+</script>
+
+<div id="fig">
+	<div class="fig-loading">loading figure(s)</div>
+</div>
+
+<style>
+	@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;
+	}
+</style>

package/web/lib/Grid.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+let {
+		children,
+		showDataPane,
+		doubleSize = false,
+      textPaneWidth = doubleSize ? `600px` : '800px'
+	} = $props();
+</script>
+
+<div
+   id="grid"
+   class={`grid-container
+      ${!showDataPane ? 'data-pane-hidden' : ''}
+      ${doubleSize ? 'double-size' : ''}`}
+   style={showDataPane
+      ? `grid-template-columns: auto var(--toggle-button-width) ${textPaneWidth};`
+      : `grid-template-columns: 0 var(--toggle-button-width) ${textPaneWidth};`
+   }
+>
+	{@render children()}
+</div>
+
+<style>
+   .grid-container {
+      display: grid;
+      justify-content: center;
+   }
+
+   .grid-container.double-size {
+      max-width: 66.7vw; /* undo effect of transform: scale(1.5) for layout purposes */
+   }
+</style>

package/web/lib/index.js

@@ -0,0 +1,5 @@
+export { default as CodeMirror } from './CodeMirror.svelte';
+export { default as DataPane } from './DataPane.svelte';
+export { default as Figure } from './Figure.svelte';
+export { default as FigureSrc } from './FigureSrc.svelte';
+export { default as Grid } from './Grid.svelte';

package/web/lib/view-styles.css

@@ -0,0 +1,262 @@
+/* Styles for dynamically-generated content (PureScript/D3).
+   Imported by Figure and FigureSrc components.
+   These are global because PureScript renders into multiple containers
+   (#fig, #fig-input, #fig-intermediate) outside the Svelte component tree. */
+
+.legend-box {
+	stroke: lightgray;
+	stroke-width: 0.5px;
+	fill: none;
+}
+
+.legend-text {
+	font-size: 8pt;
+}
+
+.title-text {
+	fill: Black;
+	font-size: 9pt;
+}
+
+.table-caption {
+	box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25);
+	background: #fafafa;
+	padding: 0.1em 0.2em;
+	border-radius: 1px;
+	display: inline-block;
+}
+
+.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 th {
+	vertical-align: top;
+}
+
+.table-cell {
+	border-radius: 0px;
+}
+
+td,
+th {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 120px;
+}
+
+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-row {
+	display: table-row;
+}
+
+.table-row.hidden {
+	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 {
+		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: rgb(214, 240, 214);
+}
+
+.matrix-cell.selected-secondary-persistent {
+	fill: rgb(214, 240, 214);
+}
+
+.matrix-cell-text {
+	font-size: 10pt;
+	font-family: 'Roboto', 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;
+}
+
+.para-text + .para-text {
+	margin-top: 0.75em;
+}
+
+.para-text {
+	font-size: 10pt;
+}
+
+.bar {
+	stroke-width: 1;
+}
+
+.tree-node {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 8px;
+	align-items: start;
+}
+
+.tree-children {
+	display: grid;
+	grid-auto-rows: min-content;
+	gap: 4px;
+	border-left: 2px solid #ccc;
+	padding-left: 8px;
+}
+
+.tree-label {
+	background: #f8f8f8;
+	border: 1px solid #ccc;
+	padding: 2px 6px;
+	border-radius: 4px;
+}
+
+.node {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 6px;
+	align-items: start;
+}
+
+.tree-children.columnar {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	column-gap: 12px;
+	row-gap: 4px;
+}
+
+.tree-children.columnar > .tree-node {
+	display: contents;
+}
+
+.tree-children.columnar .tree-children {
+	border-left: none;
+	padding-left: 0;
+}

package/website/article/eslint.config.js

@@ -0,0 +1,45 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+	globalIgnores(['static/**', 'src/lib/fluid/**']),
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: { globals: { ...globals.browser, ...globals.node } },
+
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		},
+		rules: {
+			'svelte/no-navigation-without-resolve': 'off'
+		}
+	}
+);

package/website/article/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "article",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test": "../../script/test-website.sh"
+	},
+	"dependencies": {
+		"@explorable-viz/fluid": "workspace:*"
+	},
+	"devDependencies": {
+		"@codemirror/commands": "^6.8.1",
+		"@codemirror/lang-python": "^6.2.1",
+		"@codemirror/state": "^6.5.2",
+		"@codemirror/theme-one-dark": "^6.1.3",
+		"@codemirror/view": "^6.38.3",
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.39.1",
+		"@fontsource/roboto": "^5.2.9",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@types/node": "^24",
+		"d3": "^7.9.0",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.1",
+		"globals": "^16.5.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-svelte": "^3.4.0",
+		"svelte": "^5.45.6",
+		"svelte-check": "^4.3.4",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.48.1",
+		"vite": "^7.2.6"
+	}
+}

package/website/article/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/website/article/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+		<title>Fluid</title>
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>