@explorable-viz/fluid 0.12.1 → 0.12.3

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;

package/website/article/{index.html → src/routes/+page.svelte}

@@ -1,18 +1,10 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-   <meta charset="UTF-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-   <title>Fluid Demos</title>
-   <link href="css/styles.css" rel="stylesheet" type="text/css">
-   <script src="https://kit.fontawesome.com/20cf8b42c0.js" crossorigin="anonymous"></script>
-</head>
-<body>
+<script>
+   import { Grid } from '@explorable-viz/fluid';
+</script>
 
-<div class="grid-container double-size">
-   <div></div>
-   <div></div>
+<Grid>
+	<div></div>
+	<div></div>
    <div class="flex-left-align">
       <div></div>
       <h2>Fluid: Transparent Research Outputs</h2>
@@ -35,6 +27,5 @@
         <li>AI-assisted authoring tool</li>
       </ul>
    </div>
-</div>
-</body>
-</html>
+	<div></div>
+</Grid>

package/website/article/src/routes/convolution/+page.svelte

@@ -0,0 +1,62 @@
+<script>
+	import { CodeMirror, DataPane, Figure, Grid } from '@explorable-viz/fluid';
+
+	let showDataPane = false;
+
+	const spec = {
+		fluidSrcPath: ['../fluid'],
+		inputs: ['inputImage', 'filter'],
+		query: true,
+		linking: false
+	};
+
+	const toggleDataPane = () => {
+		showDataPane = !showDataPane;
+	};
+</script>
+
+<Grid {showDataPane}>
+	<div></div>
+	<div></div>
+	<div class="flex-left-align">
+		<h3>Matrix convolution</h3>
+	</div>
+
+	<DataPane {showDataPane} toggle={toggleDataPane}>
+		<div id="fig-data-pane" class="data-pane">
+			<div id="fig-input" class="flex-right-align data-pane-column"></div>
+			<div id="fig-intermediate" class="flex-right-align intermediates"></div>
+		</div>
+	</DataPane>
+
+	<div class="flex-left-align">
+		<div class="flex-top-align">
+			<Figure {spec} fld="../fluid/convolution.fld" />
+			<div></div>
+		</div>
+		<CodeMirror name="convolution" src="../fluid/convolution.fld" />
+	</div>
+</Grid>
+
+<style>
+	.data-pane {
+		display: grid;
+		grid-template-columns: min-content min-content;
+		vertical-align: top;
+		justify-content: end;
+	}
+
+	.data-pane * {
+		font-size: 9pt;
+	}
+
+	:global(.intermediates .para-text) {
+		margin-left: 5pt;
+		margin-right: 3pt;
+	}
+
+   /* global can cause preload flicker so use sparingly  */
+	:global(.intermediates:has(> *)) {
+		border-right: 1px dotted #cccccc;
+	}
+</style>

package/website/article/src/routes/energy-scatter/+page.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { DataPane, Figure, Grid } from '@explorable-viz/fluid';
+
+	let showDataPane = false;
+
+	const spec = {
+		fluidSrcPath: ['../fluid'],
+		inputs: ['nonRenewables', 'renewables'],
+		query: false,
+		linking: true
+	};
+
+	const toggleDataPane = () => {
+		showDataPane = !showDataPane;
+	};
+</script>
+
+<Grid {showDataPane}>
+	<div></div>
+	<div></div>
+	<div class="flex-left-align">
+		<h3>Clean energy efficiency scatter plot</h3>
+	</div>
+
+	<DataPane {showDataPane} toggle={toggleDataPane}>
+		<div id="fig-data-pane" class="flex-right-align data-pane">
+			<div id="fig-input" class="data-pane-column"></div>
+		</div>
+	</DataPane>
+
+	<div class="flex-left-align">
+		<Figure {spec} fld="../fluid/energyscatter.fld" />
+	</div>
+</Grid>

package/website/article/src/routes/methane/+page.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { DataPane, Figure, Grid } from '@explorable-viz/fluid';
+
+	let showDataPane = false;
+
+	const spec = {
+		fluidSrcPath: ['../fluid'],
+		inputs: ['methane'],
+		query: false,
+		linking: true
+	};
+
+	const toggleDataPane = () => {
+		showDataPane = !showDataPane;
+	};
+</script>
+
+<Grid {showDataPane}>
+	<div></div>
+	<div></div>
+	<div class="flex-left-align">
+		<h3>Methane</h3>
+		<p>Methane emissions example</p>
+	</div>
+
+	<DataPane {showDataPane} toggle={toggleDataPane}>
+		<div id="fig-data-pane" class="flex-right-align data-pane">
+			<div id="fig-input" class="data-pane-column"></div>
+		</div>
+	</DataPane>
+
+	<div class="flex-left-align">
+		<Figure {spec} fld="../fluid/methane.fld" />
+	</div>
+</Grid>

package/website/article/src/routes/moving-average/+page.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { DataPane, Figure, Grid } from '@explorable-viz/fluid';
+   import { text } from 'stream/consumers';
+
+	let showDataPane = false;
+
+	const spec = {
+		fluidSrcPath: ['../fluid'],
+		inputs: ['methane'],
+		query: false,
+		linking: false
+	};
+
+	const toggleDataPane = () => {
+		showDataPane = !showDataPane;
+	};
+</script>
+
+<Grid {showDataPane} textPaneWidth = '400px'>
+	<div></div>
+	<div></div>
+	<div class="flex-left-align">
+		<h3>Moving Average</h3>
+		<p>
+			The following chart shows a moving average (or rolling average) plot for methane emissions
+			under projected emissions scenario
+			<a href="https://en.wikipedia.org/wiki/Shared_Socioeconomic_Pathways">SSP5-8.5</a>.
+		</p>
+	</div>
+
+	<DataPane {showDataPane} toggle={toggleDataPane}>
+		<div class="flex-right-align data-pane">
+			<p>
+				Every <code>year</code> value is used in both the original curve and its moving average.
+			</p>
+
+			<div id="fig-input"></div>
+
+			<p>
+				With <code>emissions</code>, each value contributes to
+				<span class="highlight">one</span> point in the original curve but
+				<span class="highlight">three</span>
+				in the moving average.
+			</p>
+		</div>
+	</DataPane>
+
+	<div class="flex-left-align">
+		<Figure {spec} fld="../fluid/moving-average.fld" />
+	</div>
+</Grid>
+
+<style>
+	.data-pane {
+		max-width: 300px;
+	}
+</style>

package/website/article/src/routes/non-renewables/+page.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { DataPane, Figure, Grid } from '@explorable-viz/fluid';
+
+	let showDataPane = false;
+
+	const spec = {
+		fluidSrcPath: ['../fluid'],
+		inputs: ['nonRenewables'],
+		query: false,
+		linking: true
+	};
+
+	const toggleDataPane = () => {
+		showDataPane = !showDataPane;
+	};
+</script>
+
+<Grid {showDataPane}>
+	<div></div>
+	<div></div>
+	<div class="flex-left-align">
+		<h3>Non-Renewable Energy plots</h3>
+	</div>
+
+	<DataPane {showDataPane} toggle={toggleDataPane}>
+		<div class="flex-right-align data-pane">
+			<div id="fig-input"></div>
+		</div>
+	</DataPane>
+
+	<div class="flex-left-align">
+		<Figure {spec} fld="../fluid/non-renewables.fld" />
+	</div>
+</Grid>
+
+<style>
+	.data-pane {
+		max-width: 475px;
+	}
+</style>

package/website/article/src/routes/renewables-linked/+page.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { DataPane, Figure, Grid } from '@explorable-viz/fluid';
+
+	let showDataPane = false;
+
+	const spec = {
+		fluidSrcPath: ['../fluid'],
+		inputs: ['renewables'],
+		query: false,
+		linking: true
+	};
+
+	const toggleDataPane = () => {
+		showDataPane = !showDataPane;
+	};
+</script>
+
+<Grid {showDataPane}>
+	<div></div>
+	<div></div>
+	<div>
+		<h3>Non-renewable energy output</h3>
+	</div>
+
+	<DataPane {showDataPane} toggle={toggleDataPane}>
+		<div id="fig-data-pane" class="flex-right-align data-pane">
+			<div id="fig-input" class="data-pane-column"></div>
+		</div>
+	</DataPane>
+
+	<div class="flex-left-align">
+		<Figure {spec} fld="../fluid/bar-chart-line-chart.fld" />
+	</div>
+</Grid>

package/website/article/src/routes/scigen-1805.02474v1-10/+page.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { DataPane, Figure, Grid } from '@explorable-viz/fluid';
+
+	let showDataPane = false;
+
+	const spec = {
+		fluidSrcPath: ['../fluid'],
+		inputs: ['tableData'],
+		query: true,
+		linking: true
+	};
+
+	const toggleDataPane = () => {
+		showDataPane = !showDataPane;
+	};
+</script>
+
+<Grid {showDataPane} textPaneWidth = '530px'>
+	<div></div>
+	<div></div>
+	<div class="flex-left-align">
+		<h3>1805.02474v1-10</h3>
+	</div>
+
+	<DataPane {showDataPane} toggle={toggleDataPane}>
+		<div class="flex-right-align data-pane">
+			<div id="fig-input"></div>
+		</div>
+	</DataPane>
+
+	<div class="flex-left-align">
+		<Figure {spec} fld="../fluid/1805.02474v1-10.fld" />
+	</div>
+</Grid>
+
+<style>
+	.data-pane {
+		max-width: 400px;
+	}
+</style>