feat: deployment

src/lib/components/DropZone.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import type { ChangeEventHandler } from 'svelte/elements';
 
 	type DropHandler = (files: FileList) => void;
 
@@ -30,10 +31,20 @@
 			onFileDropped(files);
 		}
 	}
+
+	const onFileInput: ChangeEventHandler<HTMLInputElement> = (event) => {
+		if (!event.currentTarget || !event.currentTarget.files) {
+			return;
+		}
+		const files = event.currentTarget.files;
+		if (files && files.length > 0 && onFileDropped) {
+			onFileDropped(files);
+		}
+	};
 </script>
 
 <div
-	class="border-4 min-h-[320px] rounded-xl p-6 border-background-300/70 dark:border-background-700/60 text-center border-dotted"
+	class="border-4 min-h-[320px] relative rounded-xl p-6 border-background-300/70 dark:border-background-700/60 text-center border-dotted"
 	class:dragging={isDragging}
 	on:dragenter={handleDragEnter}
 	on:dragover={handleDragOver}
@@ -47,6 +58,12 @@
 			<span>Drag and drop files here <br /> or <br /> click to select</span>
 		{/if}
 	</span>
+	<input
+		on:change={onFileInput}
+		class="absolute left-0 right-0 top-0 bottom-0 opacity-0"
+		type="file"
+		accept="text/csv"
+	/>
 </div>
 
 <style lang="scss">

src/lib/components/graph/Graph2D.svelte

@@ -36,6 +36,7 @@
 	let xAxisTitle: d3.Selection<SVGTextElement, number[][], null, undefined>;
 	let yAxisTitle: d3.Selection<SVGTextElement, number[][], null, undefined>;
 	let curves: d3.Selection<SVGPathElement, number[][], null, undefined>[] | undefined = undefined;
+	let points: d3.Selection<SVGCircleElement, number[][], null, undefined>[] | undefined = undefined;
 
 	function setupGraph() {
 		svg = d3
@@ -75,6 +76,10 @@
 		}
 	}
 
+	const onMouseOver = (index: number) => (evt: MouseEvent) => {
+		console.log({ evt, idx: index });
+	};
+
 	function renderData(data: IGraph2dData) {
 		if (!data || data.points.length === 0) {
 			return;
@@ -98,13 +103,23 @@
 		if (!curves) {
 			curves = data.points.map(() => svg.append('path'));
 		}
+		if (points && points.length !== data.points.length) {
+			points.forEach((point) => point.remove());
+			points = undefined;
+		}
 
+		if (!points) {
+			points = data.points.map(() => svg.append('circle'));
+		}
 		xAxisTitle.text(data.xAxisLabel ?? 'X');
 		yAxisTitle.text(data.yAxisLabel ?? 'Y');
 
 		// Update curves
 		data.points.forEach((container, idx) => {
-			(curves?.[idx] as any)
+			if (!curves?.at(idx) || !points?.at(idx)) {
+				return;
+			}
+			(curves![idx] as any)
 				.datum(container.data)
 				.attr('class', 'line')
 				.attr('fill', container.color ?? '#69b3a2')
@@ -124,15 +139,14 @@
 						.curve(d3.curveLinear) as any
 				);
 
-			svg
-				.selectAll('circle')
-				.data(container.data)
-				.enter()
-				.append('circle')
+			points![idx]
+				.datum(container.data)
+				.attr('idx', idx)
 				.attr('cx', (d) => xAxisScale(Number(d[0])))
 				.attr('cy', (d) => yAxisScale(Number(d[1])))
+				.on('mouseover', onMouseOver(idx))
 				.transition()
-				.attr('r', 2) // Radius of the circle
+				.attr('r', 4) // Radius of the circle
 				.attr('fill', container.color ?? 'yellow'); // Color of the circle
 		});
 	}

src/lib/components/graph/Minimap.svelte

@@ -15,6 +15,10 @@
 
 	$: $SettingsStore, updateColor();
 
+	export const setCameraState = (state: CameraState) => {
+		minimalRenderer?.setCameraState(state);
+	};
+
 	const updateColor = () => {
 		if (!minimalRenderer) {
 			return;

src/lib/components/graph/PlaneGraph.svelte

@@ -294,8 +294,9 @@
 						size={ButtonSize.SM}
 						on:click={() => {
 							if (selection) {
+								console.log(selection);
 								xSlice = selection.point[0];
-								ySlice = selection.point[2];
+								ySlice = selection.point[1];
 							}
 						}}><LayersIcon slot="leading" size="10" />Show</Button
 					>

src/lib/rendering/Minimap.ts

@@ -21,7 +21,7 @@ import {
 
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { Easing, Tween } from '@tweenjs/tween.js';
-import type { CameraState } from '$lib/views/CoreGraph.svelte';
+import type { CameraState } from '$lib/views/CoreGraph';
 import { TextTexture } from './textures/TextTexture';
 import type { ThemeColors } from '$lib/store/SettingsStore';
 

src/lib/store/dataStore/filterActions.ts

@@ -117,6 +117,7 @@ export const dataStoreFilterExtension = (store: BaseStoreType) => {
 		if (rows.length !== 1 || rows[0].min === null || rows[0].max === null) {
 			resp = await store.executeQuery(baseQuery);
 			if (!resp) {
+				console.error('could not query min max range', { tableName, columnName, scale });
 				throw new Error('Failed to get min/max');
 			}
 			rows = resp.toArray();
@@ -192,9 +193,6 @@ export const dataStoreFilterExtension = (store: BaseStoreType) => {
 		}
 	};
 
-	// const bigIntMax = (...args: bigint[]) => args.reduce((m, e) => (e > m ? e : m));
-	// const bigIntMin = (...args: bigint[]) => args.reduce((m, e) => (e < m ? e : m));
-
 	const getTiledData = async (
 		tableName: string,
 		_options: Partial<ITiledDataOptions> = {},
@@ -206,7 +204,6 @@ export const dataStoreFilterExtension = (store: BaseStoreType) => {
 		const options = {
 			..._options
 		} as ITiledDataOptions;
-
 		try {
 			let rows = await getTiledRows(tableName, options, xRange, yRange, zRange, where);
 

src/lib/store/dataStore/loadActions.ts

@@ -115,7 +115,7 @@ export const dataStoreLoadExtension = (store: BaseStoreType, dataStore: Writable
 		const { tables } = get(dataStore);
 		return Object.entries(tables).reduce((acc, [_, value], idx) => {
 			if (idx === 0) {
-				acc = value.schema;
+				acc = JSON.parse(JSON.stringify(value.schema));
 				return acc;
 			}
 

src/lib/store/dataStore/postProcessing.ts

@@ -12,6 +12,7 @@ import {
 } from './types';
 import notificationStore from '../notificationStore';
 import { PostProeccingError } from './errors';
+import { base } from '$app/paths';
 
 export const dataStorePostProcessingExtension = (
 	store: BaseStoreType,
@@ -83,11 +84,19 @@ export const dataStorePostProcessingExtension = (
 		required: true
 	};
 
-	const experimentTransformation: SqlTransformation = {
+	const constructTransformation: SqlTransformation = {
+		name: 'Gtest parser (Construct)',
+		type: TransformationType.SQL,
+		description: 'Splits Gtest name column into relevant values',
+		query: () => fetch(base + '/transformations/construct.sql').then((resp) => resp.text()),
+		required: true
+	};
+
+	const countTransformation: SqlTransformation = {
 		name: 'Gtest parser (Count)',
 		type: TransformationType.SQL,
 		description: 'Splits Gtest name column into relevant values',
-		query: () => fetch('/transformations/count.sql').then((resp) => resp.text()),
+		query: () => fetch(base + '/transformations/count.sql').then((resp) => resp.text()),
 		required: true
 	};
 
@@ -101,6 +110,11 @@ export const dataStorePostProcessingExtension = (
 			.replaceAll(/\${sourceTableName}/g, info.sourceTableName);
 	};
 
+	const getAnyValue = async (table: ILoadedTable) => {
+		const query = `SELECT name FROM "${table.sourceTableName}" LIMIT 1`;
+		return store.executeQuery(query);
+	};
+
 	const applyPostProcessing = async (table: ILoadedTable) => {
 		// clear output table
 		if (table.sourceTableName != table.tableName) {
@@ -116,14 +130,26 @@ export const dataStorePostProcessingExtension = (
 			table.transformations.push(idTransformation);
 		}
 
+		console.log('Applying post processing', table);
+
 		// handle internal database rewrites
-		// TODO: we should probably add a mixed or pure type to ILoadedTable to check if refs have same sourcetype
 		if (
 			table.refs[0].source === TableSource.BUILD_IN &&
-			table.transformations.indexOf(experimentTransformation) === -1
+			table.transformations.indexOf(countTransformation) === -1 &&
+			table.transformations.indexOf(constructTransformation) === -1
 		) {
-			if (table.sourceTableName.indexOf('count') !== -1) {
-				table.transformations.push(experimentTransformation);
+			// Check for fixture in name
+			const someValue = await getAnyValue(table);
+			if (someValue) {
+				const value = someValue.toArray().at(0);
+				if (value && value['name']) {
+					const name = (value['name'] as string).toLowerCase();
+					if (name.includes('construct')) {
+						table.transformations.push(constructTransformation);
+					} else if (name.includes('count')) {
+						table.transformations.push(countTransformation);
+					}
+				}
 			}
 		}
 

src/lib/store/filterStore/FilterStore.ts

@@ -14,8 +14,8 @@ import {
 } from '../dataStore/types';
 import { toStateObject, urlEncodeFilterState } from './restore';
 import type { IPlaneRenderOptions } from '$lib/rendering/PlaneRenderer';
-import { local } from 'd3';
 import { goto } from '$app/navigation';
+import { base } from '$app/paths';
 
 const initialStore: IFilterStore = {
 	isLoading: true,
@@ -273,7 +273,7 @@ const _filterStore = () => {
 			newInitialState.isLoading = false;
 			set(newInitialState);
 
-			goto('/graph/custom');
+			goto(`${base}/graph/custom`);
 		},
 
 		// Actions

src/lib/store/filterStore/graphs/plane.ts

@@ -459,11 +459,11 @@ export class PlaneGraphModel extends GraphOptions<
 		scaling: DataScaling
 	): Promise<ValueRange | null> {
 		const data = get(dataStore);
-		const tables = Object.keys(data.tables);
+		const tables = Object.values(data.tables);
 
 		try {
 			const result = await Promise.all(
-				tables.map((table) => dataStore.getMinMax(table, columnName, scaling))
+				tables.map((table) => dataStore.getMinMax(table.tableName, columnName, scaling))
 			);
 			return result.reduce(
 				(acc, [min, max]) => [Math.min(acc[0], min), Math.max(acc[1], max)],
@@ -495,7 +495,7 @@ export class PlaneGraphModel extends GraphOptions<
 				message: `Could not compute data range: ${err}`,
 				description: 'Verify databases are loaded correctly and contain the selected columns'
 			});
-			console.error({ msg: 'getGlobalRanges:', state });
+			console.error({ msg: 'getGlobalRanges:', state, err });
 			return null;
 		}
 	}

src/lib/views/CoreGraph.svelte

@@ -71,7 +71,7 @@
 	function setupControls() {
 		controls = new OrbitControls(camera, renderer.domElement);
 		controls.rotateSpeed = 1;
-		controls.zoomSpeed = 1;
+		controls.zoomSpeed = 0.75;
 		controls.panSpeed = 1;
 
 		controls.enablePan = false;
@@ -230,7 +230,8 @@
 	const getScreenshot = () => renderer.domElement.toDataURL('image/png');
 
 	const getCameraState = () => ({ rotation: camera.rotation, position: camera.position });
-	export const setCameraState = (state: CameraState) => {
+
+	export let setCameraState = (state: CameraState) => {
 		camera.rotation.copy(state.rotation);
 		camera.position.copy(state.position);
 		controls.update();

src/lib/views/FilterSidebar.svelte

@@ -33,6 +33,7 @@
 	import { imageFromGlContext } from '$lib/rendering/screenshot';
 	import SchemaMapper from './SchemaMapper.svelte';
 	import H3 from '$lib/components/base/H3.svelte';
+	import EditableText from '$lib/components/EditableText.svelte';
 
 	const graphService: GraphService = getGraphContext();
 	let optionsStore: GraphOptions['optionsStore'] | undefined;
@@ -177,7 +178,7 @@
 					{#each Object.entries($dataStore.tables) as [tableName, table]}
 						<li class="flex py-1 justify-between items-center">
 							<div class="flex gap-2">
-								<span>{table.displayName}</span>
+								<span><EditableText value={table.displayName} /></span>
 								<Dialog>
 									<Button slot="trigger" variant={ButtonVariant.DEFAULT} size={ButtonSize.SM}>
 										<Edit2Icon size="15" />

src/lib/views/SchemaMapper.svelte

@@ -20,6 +20,7 @@
 	} from '$lib/store/dataStore/types';
 	import { AlertTriangleIcon, EditIcon, PenToolIcon, PlusIcon, XIcon } from 'svelte-feather-icons';
 	import TransformerEditor, { type TransformerCreated } from './TransformerEditor.svelte';
+	import FilterStore from '$lib/store/filterStore/FilterStore';
 	export let initiallySelectedTable: ILoadedTable;
 
 	let table = initiallySelectedTable;
@@ -42,6 +43,7 @@
 		// NOTE: hack to force rerender
 		dataStore.updatePostProcessingTransformer(table, evt.detail.transformation).finally(() => {
 			table = table;
+			FilterStore.reload();
 		});
 	};
 
@@ -49,6 +51,7 @@
 		// NOTE: hack to force rerender
 		dataStore.addPostProcessingTransformer(table, evt.detail.transformation).finally(() => {
 			table = table;
+			FilterStore.reload();
 		});
 	};
 

src/lib/views/TransformerEditor.svelte

@@ -29,6 +29,7 @@
 	import notificationStore from '$lib/store/notificationStore';
 	import type { editor } from 'monaco-editor';
 	import CodeEditor from '$lib/components/CodeEditor.svelte';
+	import { base } from '$app/paths';
 
 	interface $$Events {
 		created: TransformerCreated;
@@ -124,7 +125,7 @@
 
 	const loadTransformation = async (fileName: string) => {
 		try {
-			currentTransformation = await fetch('/transformations/' + fileName).then((resp) =>
+			currentTransformation = await fetch(base + '/transformations/' + fileName).then((resp) =>
 				resp.text()
 			);
 			editor.setValue(currentTransformation);

src/lib/views/tableSelection/TableSelection.svelte

@@ -53,6 +53,7 @@
 	}
 
 	function onSelectTable(evt: DropdownSelectionEvent<DatasetItem>) {
+		console.log('Table selected', evt, selectedDataset);
 		dispatch('selectTable', {
 			buildInTables: {
 				dataset: selectedDataset!,

src/routes/+page.server.ts

@@ -1,7 +1,7 @@
 // Fetch all available data entries
 import fs from 'fs';
 import path from 'path';
-import base from '$app/paths';
+import { base } from '$app/paths';
 import type { Load } from '@sveltejs/kit';
 
 export type NamedGraph = {

src/routes/+page.svelte

@@ -6,6 +6,7 @@
 	import { ChevronRightIcon } from 'svelte-feather-icons';
 	import type { PageServerData } from './$types';
 	import { ButtonColor, ButtonSize, ButtonVariant } from '$lib/components/button/type';
+	import { base } from '$app/paths';
 
 	export let data: PageServerData;
 
@@ -35,7 +36,7 @@
 		</h1>
 		<p class="text-4xl max-w-[60vw]">visualization tool for comapring multidemsional data</p>
 		<p class="text-4xl max-w-[60vw]">
-			<a href="/graph/custom"
+			<a href="{base}/graph/custom"
 				><Button variant={ButtonVariant.DEFAULT} size={ButtonSize.LG} color={ButtonColor.PRIMARY}
 					>New Comparisson</Button
 				></a
@@ -46,7 +47,7 @@
 		<h2 class="text-3xl font-bold mb-4">Featured comparisons</h2>
 		<div class="-mx-6 grid gap-10 grid-cols-2 md:grid-cols-3">
 			{#each data.items as item}
-				<a href="/graph/{item.href}"
+				<a href="{base}/graph/{item.href}"
 					><MessageCard class="hover:shadow-2xl transition-shadow">
 						<div class="flex place-content-between items-center">
 							<div>

src/routes/graph/[slug]/+page.svelte

@@ -19,6 +19,7 @@
 	import type { PageServerData } from './$types';
 	import notificationStore from '$lib/store/notificationStore';
 	import EditableText from '$lib/components/EditableText.svelte';
+	import { base } from '$app/paths';
 
 	export let data: PageServerData;
 	let loadedGraph: GraphStateConfig | undefined = undefined;
@@ -71,13 +72,13 @@
 </script>
 
 <div class="h-screen w-full relative">
-	<CoreGraph bind:setCameraState>
+	<CoreGraph>
 		<svelte:fragment slot="inner">
 			{#if $filterStore.graphOptions}
 				{#if $filterStore.graphOptions instanceof PlaneGraphModel}
 					<PlaneGraph options={$filterStore.graphOptions} graphScale={0.6} />
 				{/if}
-				<Minimap />
+				<Minimap bind:setCameraState />
 			{:else}
 				<GridBackground />
 			{/if}
@@ -85,7 +86,7 @@
 		<FilterSidebar />
 	</CoreGraph>
 	<div class="absolute left-3 top-4 text-lg font-bold flex gap-2 items-center">
-		<a href="/"><Button variant={ButtonVariant.LINK}><ArrowLeftCircleIcon /></Button></a>
+		<a href="{base}/"><Button variant={ButtonVariant.LINK}><ArrowLeftCircleIcon /></Button></a>
 		{#if $filterStore.config}
 			<EditableText
 				value={graphName}

static/graphs/bloom-test.json

@@ -1,20 +0,0 @@
-{
-	"name": "Bloom Filter Test",
-	"description": "Some description can go here",
-	"selectedTables": [{ "source": 0, "tableName": "bloom-count-10k", "datasetName": "experiments" }],
-	"graphOptions": {
-		"type": "plane",
-		"state": {
-			"isRendered": false,
-			"isValid": true,
-			"xColumnName": "bits",
-			"yColumnName": "cpu_time",
-			"zColumnName": "fpr",
-			"scaleX": "linear",
-			"scaleY": "linear",
-			"scaleZ": "linear",
-			"tileCount": 10,
-			"aggregation": "min"
-		}
-	}
-}

static/graphs/compare-bloom-lookup-100m.json

@@ -0,0 +1,44 @@
+{
+	"name": "Bloom Throughput 100M",
+
+	"description": "Compares different Bloom varations in respect to lookup thoughput",
+	"selectedTables": [
+		{ "tableName": "bloom-count-100m", "refs": [{ "source": 0, "datasetName": "experiments" }] }
+	],
+	"graphOption": {
+		"type": "plane",
+		"data": {
+			"isRendered": false,
+			"isValid": true,
+			"aggregation": "max",
+			"xColumnName": "fpr",
+			"scaleX": "log",
+			"yColumnName": "lookup_throughput",
+			"scaleY": "linear",
+			"zColumnName": "size",
+			"scaleZ": "linear",
+			"xTileCount": 28,
+			"zTileCount": 28,
+			"lockTileCounts": true,
+			"groupBy": "mode"
+		},
+		"render": {
+			"pointCloudSize": 0.005,
+			"triangulation": "delaunay",
+			"showSelection": true,
+			"pointCloudColor": 15658734,
+			"color-bloom-count-1m-output-": "rgb(244,109,67)",
+			"color-cuckoo-count-1m-output-": "rgb(94,79,162)",
+			"color-morton-count-1m-output-": "rgb(158,1,66)",
+			"color-xor-count-1m-output-": "rgb(171,221,164)"
+		}
+	},
+	"ui": {
+		"rotation": { "x": -1.5707962929299748, "y": -9.994708936590934e-7, "z": -1.5369264350084104 },
+		"position": {
+			"x": -0.00029984126815695223,
+			"y": 299.9999999998495,
+			"z": 0.000010159476483488965
+		}
+	}
+}

static/graphs/compare-bloom-lookup-1m.json

@@ -0,0 +1,44 @@
+{
+	"name": "Bloom Throughput 1M",
+
+	"description": "Compares different Bloom varations in respect to lookup thoughput",
+	"selectedTables": [
+		{ "tableName": "bloom-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] }
+	],
+	"graphOption": {
+		"type": "plane",
+		"data": {
+			"isRendered": false,
+			"isValid": true,
+			"aggregation": "max",
+			"xColumnName": "fpr",
+			"scaleX": "log",
+			"yColumnName": "lookup_throughput",
+			"scaleY": "linear",
+			"zColumnName": "size",
+			"scaleZ": "linear",
+			"xTileCount": 28,
+			"zTileCount": 28,
+			"lockTileCounts": true,
+			"groupBy": "mode"
+		},
+		"render": {
+			"pointCloudSize": 0.005,
+			"triangulation": "delaunay",
+			"showSelection": true,
+			"pointCloudColor": 15658734,
+			"color-bloom-count-1m-output-": "rgb(244,109,67)",
+			"color-cuckoo-count-1m-output-": "rgb(94,79,162)",
+			"color-morton-count-1m-output-": "rgb(158,1,66)",
+			"color-xor-count-1m-output-": "rgb(171,221,164)"
+		}
+	},
+	"ui": {
+		"rotation": { "x": -1.5707962929299748, "y": -9.994708936590934e-7, "z": -1.5369264350084104 },
+		"position": {
+			"x": -0.00029984126815695223,
+			"y": 299.9999999998495,
+			"z": 0.000010159476483488965
+		}
+	}
+}

static/graphs/compare-construct-100m.json

@@ -0,0 +1,55 @@
+{
+	"name": "Constuct Throughput 100M",
+	"description": "Comparing 100M item constructions for Cuckoo, Morton, Xor and Bloom.",
+	"selectedTables": [
+		{
+			"tableName": "bloom-count-100m",
+			"refs": [{ "source": 0, "datasetName": "experiments" }]
+		},
+		{
+			"tableName": "cuckoo-count-100m",
+			"displayName": "Cuckoo",
+			"refs": [{ "source": 0, "datasetName": "experiments" }]
+		},
+		{
+			"tableName": "morton-count-100m",
+			"refs": [{ "source": 0, "datasetName": "experiments" }]
+		},
+		{ "tableName": "xor-count-100m", "refs": [{ "source": 0, "datasetName": "experiments" }] }
+	],
+	"graphOption": {
+		"type": "plane",
+		"data": {
+			"isRendered": false,
+			"isValid": true,
+			"aggregation": "max",
+			"xColumnName": "fpr",
+			"scaleX": "log",
+			"yColumnName": "construction_throughput",
+			"scaleY": "linear",
+			"zColumnName": "size",
+			"scaleZ": "linear",
+			"xTileCount": 28,
+			"zTileCount": 28,
+			"lockTileCounts": true
+		},
+		"render": {
+			"pointCloudSize": 0.005,
+			"triangulation": "delaunay",
+			"showSelection": true,
+			"pointCloudColor": 15658734,
+			"color-bloom-count-1m-output-": "rgb(244,109,67)",
+			"color-cuckoo-count-1m-output-": "rgb(94,79,162)",
+			"color-morton-count-1m-output-": "rgb(158,1,66)",
+			"color-xor-count-1m-output-": "rgb(171,221,164)"
+		}
+	},
+	"ui": {
+		"rotation": { "x": -1.570796342932043, "y": -9.99914242627742e-7, "z": -1.5869334562163329 },
+		"position": {
+			"x": -0.0002999742727708546,
+			"y": 299.999999999849,
+			"z": -0.000004841143892596219
+		}
+	}
+}

static/graphs/compare-construct-1m.json

@@ -0,0 +1,45 @@
+{
+	"name": "Construct Throughput 1M",
+	"description": "Comparing 1M lookups for Cuckoo, Morton, Xor and Bloom.",
+	"selectedTables": [
+		{ "tableName": "bloom-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{ "tableName": "cuckoo-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{ "tableName": "morton-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{ "tableName": "xor-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] }
+	],
+	"graphOption": {
+		"type": "plane",
+		"data": {
+			"isRendered": false,
+			"isValid": true,
+			"aggregation": "max",
+			"xColumnName": "fpr",
+			"scaleX": "log",
+			"yColumnName": "construction_throughput",
+			"scaleY": "linear",
+			"zColumnName": "size",
+			"scaleZ": "linear",
+			"xTileCount": 28,
+			"zTileCount": 28,
+			"lockTileCounts": true
+		},
+		"render": {
+			"pointCloudSize": 0.005,
+			"triangulation": "delaunay",
+			"showSelection": true,
+			"pointCloudColor": 15658734,
+			"color-bloom-count-1m-output-": "rgb(244,109,67)",
+			"color-cuckoo-count-1m-output-": "rgb(94,79,162)",
+			"color-morton-count-1m-output-": "rgb(158,1,66)",
+			"color-xor-count-1m-output-": "rgb(171,221,164)"
+		}
+	},
+	"ui": {
+		"rotation": { "x": -1.570796342932043, "y": -9.99914242627742e-7, "z": -1.5869334562163329 },
+		"position": {
+			"x": -0.0002999742727708546,
+			"y": 299.999999999849,
+			"z": -0.000004841143892596219
+		}
+	}
+}

static/graphs/compare-lookup-100m.json

@@ -0,0 +1,49 @@
+{
+	"name": "Lookup Throughput 100M",
+	"description": "Comparing 100M lookups for Cuckoo, Morton, Xor and Bloom.",
+	"selectedTables": [
+		{ "tableName": "bloom-count-100m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{
+			"tableName": "cuckoo-count-100m",
+			"displayName": "Cuckoo",
+			"refs": [{ "source": 0, "datasetName": "experiments" }]
+		},
+		{ "tableName": "morton-count-100m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{ "tableName": "xor-count-100m", "refs": [{ "source": 0, "datasetName": "experiments" }] }
+	],
+	"graphOption": {
+		"type": "plane",
+		"data": {
+			"isRendered": false,
+			"isValid": true,
+			"aggregation": "max",
+			"xColumnName": "fpr",
+			"scaleX": "log",
+			"yColumnName": "lookup_throughput",
+			"scaleY": "linear",
+			"zColumnName": "size",
+			"scaleZ": "linear",
+			"xTileCount": 28,
+			"zTileCount": 28,
+			"lockTileCounts": true
+		},
+		"render": {
+			"pointCloudSize": 0.005,
+			"triangulation": "delaunay",
+			"showSelection": true,
+			"pointCloudColor": 15658734,
+			"color-bloom-count-1m-output-": "rgb(244,109,67)",
+			"color-cuckoo-count-1m-output-": "rgb(94,79,162)",
+			"color-morton-count-1m-output-": "rgb(158,1,66)",
+			"color-xor-count-1m-output-": "rgb(171,221,164)"
+		}
+	},
+	"ui": {
+		"rotation": { "x": -1.570796342932043, "y": -9.99914242627742e-7, "z": -1.5869334562163329 },
+		"position": {
+			"x": -0.0002999742727708546,
+			"y": 299.999999999849,
+			"z": -0.000004841143892596219
+		}
+	}
+}

static/graphs/compare-lookup-1m.json

@@ -0,0 +1,45 @@
+{
+	"name": "Lookup Throughput 1M",
+	"description": "Comparing 1M lookups for Cuckoo, Morton, Xor and Bloom.",
+	"selectedTables": [
+		{ "tableName": "bloom-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{ "tableName": "cuckoo-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{ "tableName": "morton-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] },
+		{ "tableName": "xor-count-1m", "refs": [{ "source": 0, "datasetName": "experiments" }] }
+	],
+	"graphOption": {
+		"type": "plane",
+		"data": {
+			"isRendered": false,
+			"isValid": true,
+			"aggregation": "max",
+			"xColumnName": "fpr",
+			"scaleX": "log",
+			"yColumnName": "lookup_throughput",
+			"scaleY": "linear",
+			"zColumnName": "size",
+			"scaleZ": "linear",
+			"xTileCount": 28,
+			"zTileCount": 28,
+			"lockTileCounts": true
+		},
+		"render": {
+			"pointCloudSize": 0.005,
+			"triangulation": "delaunay",
+			"showSelection": true,
+			"pointCloudColor": 15658734,
+			"color-bloom-count-1m-output-": "rgb(244,109,67)",
+			"color-cuckoo-count-1m-output-": "rgb(94,79,162)",
+			"color-morton-count-1m-output-": "rgb(158,1,66)",
+			"color-xor-count-1m-output-": "rgb(171,221,164)"
+		}
+	},
+	"ui": {
+		"rotation": { "x": -1.570796342932043, "y": -9.99914242627742e-7, "z": -1.5869334562163329 },
+		"position": {
+			"x": -0.0002999742727708546,
+			"y": 299.999999999849,
+			"z": -0.000004841143892596219
+		}
+	}
+}

static/transformations/construct.sql

@@ -0,0 +1,51 @@
+	ALTER TABLE "${tableName}" ADD COLUMN family TEXT;
+	ALTER TABLE "${tableName}" ADD COLUMN mode TEXT;
+	ALTER TABLE "${tableName}" ADD COLUMN memory TEXT;
+	ALTER TABLE "${tableName}" ADD COLUMN vectorization TEXT;
+	ALTER TABLE "${tableName}" ADD COLUMN fixture TEXT;
+	ALTER TABLE "${tableName}" ADD COLUMN k INTEGER;
+	ALTER TABLE "${tableName}" ADD COLUMN s FLOAT;
+	ALTER TABLE "${tableName}" ADD COLUMN n_threads INTEGER;
+	ALTER TABLE "${tableName}" ADD COLUMN n_partitions INTEGER;
+	ALTER TABLE "${tableName}" ADD COLUMN n_elements_build INTEGER;
+	ALTER TABLE "${tableName}" ADD COLUMN n_elements_lookup INTEGER;
+	ALTER TABLE "${tableName}" ADD COLUMN shared_elements FLOAT;
+	ALTER TABLE "${tableName}" ADD COLUMN construction_throughput FLOAT;
+	ALTER TABLE "${tableName}" ADD COLUMN lookup_throughput FLOAT;
+
+	WITH SplitValues AS (
+		SELECT
+		name,
+		SPLIT_PART(name, '_', 1) AS family,
+		SPLIT_PART(name, '_', 2) AS memory,
+		SPLIT_PART(name, '_', 3) AS mode,
+		SPLIT_PART(name, '_', 4) AS vectorization,
+		SPLIT_PART(name, '_', 5) AS k,
+		SPLIT_PART(name, '/', 2) AS fixture,
+		CAST(SPLIT_PART(name, '/', 3) AS FLOAT) / 100 AS s,
+		CAST(SPLIT_PART(name, '/', 4) AS INTEGER) AS n_threads,
+		CAST(SPLIT_PART(name, '/', 5) AS INTEGER) AS n_partitions,
+		CAST(SPLIT_PART(name, '/', 6) AS FLOAT) AS n_elements_build,
+		CAST(SPLIT_PART(name, '/', 7) AS FLOAT) AS n_elements_lookup,
+		CAST(SPLIT_PART(name, '/', 8) AS FLOAT) / 100 AS shared_elements
+		FROM "${tableName}")
+	UPDATE "${tableName}" AS t
+		SET
+			family = sv.family,
+			mode = sv.mode,
+			vectorization = sv.vectorization,
+			fixture = sv.fixture,
+			s = sv.s,
+			n_threads = sv.n_threads,
+			n_partitions = sv.n_partitions,
+			n_elements_build = sv.n_elements_build,
+			n_elements_lookup = sv.n_elements_lookup,
+	shared_elements = sv.shared_elements
+	FROM SplitValues AS sv
+	WHERE t.name = sv.name;
+  
+  DELETE from "${tableName}" where "task-clock" == 'NaN';
+
+	UPDATE "${tableName}"
+	SET "construction_throughput" = (n_elements_build * 1000.0) / real_time
+	WHERE real_time IS NOT NULL AND real_time != 0;

static/transformations/count.sql

@@ -21,8 +21,8 @@
 		CAST(SPLIT_PART(name, '/', 3) AS FLOAT) / 100 AS s,
 		CAST(SPLIT_PART(name, '/', 4) AS INTEGER) AS n_threads,
 		CAST(SPLIT_PART(name, '/', 5) AS INTEGER) AS n_partitions,
-		CAST(SPLIT_PART(name, '/', 6) AS INTEGER) AS n_elements_build,
-		CAST(SPLIT_PART(name, '/', 7) AS INTEGER) AS n_elements_lookup,
+		CAST(SPLIT_PART(name, '/', 6) AS FLOAT) AS n_elements_build,
+		CAST(SPLIT_PART(name, '/', 7) AS FLOAT) AS n_elements_lookup,
 		CAST(SPLIT_PART(name, '/', 8) AS FLOAT) / 100 AS shared_elements
 		FROM "${tableName}")
 	UPDATE "${tableName}" AS t
@@ -39,11 +39,17 @@
 	shared_elements = sv.shared_elements
 	FROM SplitValues AS sv
 	WHERE t.name = sv.name;
+	
+  UPDATE "${tableName}"
+	SET "lookup_throughput" = (n_elements_lookup * 1000.0) / real_time
+	WHERE real_time IS NOT NULL AND real_time != 0;
 
 	UPDATE "${tableName}"
 	SET "construction_throughput" = (n_elements_build * 1000.0) / real_time
 	WHERE real_time IS NOT NULL AND real_time != 0;
 
+  DELETE from "${tableName}" where "task-clock" == 'NaN';
+
 	UPDATE "${tableName}" as t
 		SET fpr = 'NaN'
 		WHERE fpr = -1;

svelte.config.js

@@ -9,6 +9,7 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess({
+		fallback: '404.html',
 		postcss: {
 			plugins: [tailwind, autoprefixer]
 		}
@@ -21,7 +22,8 @@ const config = {
 		adapter: adapter(),
 		// Adapt paths for GitHub Pages
 		paths: {
-			base: process.env.NODE_ENV === 'production' ? '/partition-filter-visualization' : ''
+			base: process.argv.includes('dev') ? '' : '/partition-filter-visualization'
+			//base: process.env.NODE_ENV === 'production' ? '/partition-filter-visualization' : ''
 		},
 		alias: {
 			$lib: './src/lib',