@explorable-viz/fluid 0.12.2 → 0.12.4

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>

package/website/article/src/lib/assets/css/styles.css

@@ -0,0 +1,245 @@
+@charset "UTF-8";
+
+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: 'Fira Code', monospace;
+   font-size: 11pt;
+}
+
+body {
+	font-size: 12pt;
+	font-family: 'Roboto', 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;
+}
+
+svg {
+	overflow: visible;
+}
+
+.highlight {
+	font-style: oblique;
+}
+
+.align-right {
+	text-align: right;
+}
+
+h2 {
+	font-size: 18pt;
+}
+
+h3 {
+	width: 100%;
+	font-size: 16pt;
+	font-weight: 500;
+	margin-top: 10pt;
+	margin-bottom: 4pt;
+	border-bottom: 0.5px solid lightgray;
+   font-variant: all-small-caps;
+}
+
+h4 {
+	font-size: 16pt;
+	font-weight: 500;
+	margin-top: 0.4em;
+	margin-bottom: 0;
+}
+
+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 a {
+	font-size: 16pt;
+   font-variant: all-small-caps;
+}
+
+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;
+/*	color: rgb(135, 129, 255); */
+}
+
+.cm-editor {
+	background: #2d2d2d;
+	color: #f0f0f0;
+}
+
+.cm-line {
+	font-family: 'Fira Code';
+	font-size: 9pt;
+}
+
+.cm-gutter {
+	background-color: #232323;
+}
+
+.cm-gutterElement {
+	font-family: 'Fira Code';
+	font-size: 9pt;
+	color: #88c0d0;
+}
+
+.right-border {
+	border-right: 0.5px solid lightgray;
+	padding-right: 6px;
+}
+
+.right-border + div {
+	padding-left: 4px;
+}
+
+:root {
+	--toggle-button-width: 24px;
+}
+
+.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;
+}
+
+.data-pane-column {
+	border-right: 1px dotted #cccccc;
+}
+
+.data-pane-hidden .data-pane {
+	visibility: hidden;
+}
+
+.data-pane-hidden .data-pane * {
+	display: none;
+}
+
+.data-pane {
+	padding-right: 0.25em;
+}
+
+.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;
+}
+
+body.standalone {
+	height: 100%;
+	display: grid;
+	justify-items: center;
+	align-items: start;
+}
+
+/* Needed for contained height specifications to work */
+html {
+	height: 100%;
+}

package/website/article/src/lib/config/nav.ts

@@ -0,0 +1,7 @@
+export const headerLinks = [
+	{ url: '/', title: 'Overview' },
+	{ url: '/faq', title: 'FAQ' },
+	{ url: '/supporters', title: 'Supporters' },
+	{ url: '/research', title: 'Research' },
+	{ url: 'https://github.com/explorable-viz/fluid', title: 'GitHub' }
+];

package/website/article/src/lib/config/supporters.ts

@@ -0,0 +1,27 @@
+import BristolLogo from '$lib/assets/image/bristol.png';
+import ICCSLogo from '$lib/assets/image/iccs.png';
+import SchmidtLogo from '$lib/assets/image/schmidt.png';
+import TuringLogo from '$lib/assets/image/turing.jpg';
+
+export const supporters = [
+	{
+		url: 'https://www.turing.ac.uk/',
+		name: 'The Alan Turing Institute',
+		logo: TuringLogo
+	},
+	{
+		url: 'https://plrg-bristol.github.io/',
+		name: 'University of Bristol',
+		logo: BristolLogo
+	},
+	{
+		url: 'https://iccs.cam.ac.uk/',
+		name: 'Institute of Computing for Climate Science',
+		logo: ICCSLogo
+	},
+	{
+		url: 'https://www.schmidtsciences.org/',
+		name: 'Schmidt Sciences',
+		logo: SchmidtLogo
+	}
+] as const;

package/website/article/src/routes/+layout.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import '$lib/assets/css/styles.css';
+	import '@fontsource/roboto/latin-300.css';
+	import '@fontsource/roboto/latin-500.css';
+
+	import favicon from '$lib/assets/image/favicon.ico';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+
+{@render children()}

package/website/article/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;