~philipwhite/nix-package-search

680102606a0c2e5bf57a51c63505ce41f606b81e — Philip White 2 years ago 58bbfea
Restructure to optionally use web workers
3 files changed, 63 insertions(+), 90 deletions(-)

M index.html
M index.js
M split.js
M index.html => index.html +1 -0
@@ 20,6 20,7 @@
		/>
		<table id="packages-list"></table>

		<script src="worker.js"></script>
		<script src="index.js"></script>
	</body>
</html>

M index.js => index.js +51 -83
@@ 1,16 1,6 @@
const filter_input = document.getElementById("filter-input");
const packages_list = document.getElementById("packages-list");
console.log("hello world");

// The json object returned from the AJAX request - this is only loaded once per
// page load.
let channel_data = {};

// This is the list of packages that gets displayed on the screen. All major
// work should happen in the background; when it is finished it should update
// this variable and refresh the package list.
let current_packages = {};
let previous_search = "";
let current_expansion = null;

let header_row = document.createElement("tr");


@@ 105,84 95,62 @@ function insert_details(package_item, even_or_odd_class, package, package_key) {
	}
}

function refresh_list() {
	if (channel_data !== null) {
		let prefiltered_channel_data = channel_data;
		if (filter_input.value.includes(previous_search)) {
			prefiltered_channel_data = current_packages;
		}
		previous_search = filter_input.value;
		current_packages = {};

		packages_list.innerHTML = "";
		packages_list.appendChild(header_row);
function refresh_list(search_results) {
	packages_list.innerHTML = "";
	packages_list.appendChild(header_row);

		let index = 0;
		for (let package_key in prefiltered_channel_data) {
			let package = prefiltered_channel_data[package_key];
			let filter_items = filter_input.value.toLowerCase().split(" ");
			let passed = true;
			for (let filter_item of filter_items) {
				if (
					!(
						package.name.toLowerCase().includes(filter_item) ||
						package_key.toLowerCase().includes(filter_item) ||
						(package.meta.discription &&
							package.meta.description.toLowerCase().includes(filter_item))
					)
				) {
					passed = false;
					break;
				}
			}
			if (passed) {
				current_packages[package_key] = package;

				if (index < 100) {
					let package = prefiltered_channel_data[package_key];
					let package_div = document.createElement("tr");
					package_div.classList.add("result");
					let even_or_odd_class = "odd";
					if (index % 2 === 0) {
						even_or_odd_class = "even";
					}
					package_div.classList.add(even_or_odd_class);
					let package_name_div = document.createElement("td");
					let package_key_div = document.createElement("td");
					let package_description_div = document.createElement("td");
					package_name_div.innerHTML = package.name;
					package_key_div.innerHTML = package_key;
					if (package.meta.description) {
						package_description_div.innerHTML = package.meta.description;
					}
					package_div.appendChild(package_name_div);
					package_div.appendChild(package_key_div);
					package_div.appendChild(package_description_div);
					packages_list.appendChild(package_div);
					package_div.addEventListener("click", function() {
						insert_details(package_div, even_or_odd_class, package, package_key);
					});
				}
				index++;
			}
	let index = 0;
	for (let package_key in search_results) {
		let package = search_results[package_key];
		let package_div = document.createElement("tr");
		package_div.classList.add("result");
		let even_or_odd_class = "odd";
		if (index % 2 === 0) {
			even_or_odd_class = "even";
		}
		package_div.classList.add(even_or_odd_class);
		let package_name_div = document.createElement("td");
		let package_key_div = document.createElement("td");
		let package_description_div = document.createElement("td");
		package_name_div.innerHTML = package.name;
		package_key_div.innerHTML = package_key;
		if (package.meta.description) {
			package_description_div.innerHTML = package.meta.description;
		}
		package_div.appendChild(package_name_div);
		package_div.appendChild(package_key_div);
		package_div.appendChild(package_description_div);
		packages_list.appendChild(package_div);
		package_div.addEventListener("click", function() {
			insert_details(package_div, even_or_odd_class, package, package_key);
		});
		index++;
	}
}

filter_input.addEventListener("keyup", function() {
	console.log(filter_input.value);
	refresh_list();
});
function on_worker_message(e) {
	refresh_list(e.data);
}

async function fetch_stuff() {
	for (let i of [0, 1, 2, 3, 4]) {
		let response = await fetch(`packages.${i}.json`);
		let data = await response.json();
		console.log(data);
		Object.assign(channel_data, data);
		current_packages = channel_data;
		refresh_list();
	}
let myPostMessage;

if (window.Worker && ENABLE_WEB_WORKERS) {
	let worker = new Worker("worker.js");
	worker.onmessage = on_worker_message;
	myPostMessage = function(data) {
		worker.postMessage(data);
	};
} else {
	self.postMessage = function(data) {
		on_worker_message({ data });
	};
	myPostMessage = function(data) {
		self.onmessage({ data });
	};
}

fetch_stuff();
filter_input.focus();
myPostMessage(filter_input.value);
filter_input.addEventListener("keyup", function() {
	myPostMessage(filter_input.value);
});

M split.js => split.js +11 -7
@@ 6,12 6,16 @@ let file_index = 0;
let new_file_contents = {};
let count = 0;
for (let package_key in contents.packages) {
	new_file_contents[package_key] = contents.packages[package_key];
	count++;
	if (count > 10000) {
		count = 0;
		fs.writeFileSync(`packages.${file_index}.json`, JSON.stringify(new_file_contents));
		file_index++;
		new_file_contents = {};
	let package = contents.packages[package_key];
	new_file_contents[package_key] = {
		name: package.name,
		meta: {}
	};
	if (package.meta.description) {
		new_file_contents[package_key].meta.description = package.meta.description;
	}
	if (package.meta.longDescription) {
		new_file_contents[package_key].meta.longDescription = package.meta.longDescription;
	}
}
fs.writeFileSync(`packages.small.json`, JSON.stringify(new_file_contents));