Styled accordions, sorted coloured dots with filter tags

src/app.css

@@ -10,7 +10,7 @@ body {
 	min-height: 100%;
 	padding: 1em;
 	width: 100%;
-	font-size: 1.3em;
+	font-size: 1.2em;
 	border: double 3px #ddd;
 	border-top: none;
 	border-bottom: none;
@@ -30,3 +30,10 @@ a:hover {
 a:visited {
 	color: #437fad;
 }
+.y-accordions,
+.y-accordion-header-button {
+	background-color: #ddd;
+}
+.yaccordion .y-accordians .y-accordion-header-button {
+	background-color: #eee;
+}

src/lib/components/Filterable.svelte

@@ -7,8 +7,9 @@
 	export let context = 'none';
 	export let filterValues;
 	export let histogram; // an array with key = filter value, val = number of technologies
-	export const colours = []; // an array of colour values with
+	export let colours = false; // an array of colour values with
 	//console.log('Filterable contextFilter: ', filterValues);
+	export let colour_type = 'circle';
 	let activeFiltersString = 'None';
 
 	//
@@ -74,6 +75,7 @@
 		isActive = getActive($filterValues);
 		activeFiltersString = joinActive(isActive);
 		filterText = filterVerbage(isActive);
+		//if (colours) { console.log('we have colours! ', colours); }
 	}
 
 	//console.log('histogram: ', histogram);
@@ -92,7 +94,8 @@
 	<span class="filter {context}" class:active={filter.active}
 		on:click="{() => { filter.active = !filter.active; updateFilterValues(filter);}}"
 		on:keypress="{() => {filter.active = !filter.active; updateFilterValues(filter);}}"
-		name="{filter.id}" role="button" tabindex={tabindex + filter.id}>{filter.name}{#if (histogram[filter.name] > 1) } <span class='histogram' title="There are {histogram[filter.name]} webservices in this category">&nbsp;({histogram[filter.name]})</span>{/if}</span><wbr/>
+		name="{filter.id}" role="button" tabindex={tabindex + filter.id}>{filter.name}{#if (histogram[filter.name] > 1) }<span class='histogram' title="There are {histogram[filter.name]} webservices in this category">&nbsp;({histogram[filter.name]})</span>{/if}{#if
+		(colours && colour_type == 'circle')}<span class='circle' style="background-color: {colours[filter.name].colour}"></span>{/if}</span><wbr/>
 {/each}
 </div>
 
@@ -157,7 +160,7 @@
 		white-space: nowrap;
 		word-break: normal;
 		box-shadow: 3px 3px 3px #6a6d6a;
-		color: #222;
+		color: #888;
 	}
 	.filter:hover { box-shadow: 6px 6px 5px #aaa; color: #000; }
 	.filter:active { box-shadow: 0px 0px 3px #727372; color: #fff;}
@@ -188,4 +191,18 @@
 	.filter .histogram {
 		color: #aaa;
 	}
+	.circle {
+		vertical-align: middle;
+		margin-left: 4px;
+		height: 20px;
+		width: 20px;
+		background-color: #555;
+		border: 1px solid #555;
+		border-radius: 50%;
+		display: inline-block;
+		opacity: .2;
+	}
+	.active .circle {
+		opacity: 1;
+	}
 </style>

src/lib/components/TechnologyTile.svelte

@@ -34,9 +34,43 @@
 		) return true;
 		return false;
 	}
+
+	function handleClick() {
+		console.log('clicked!');
+	}
+
+	/*document.addEventListener('keydown', (event) => {
+		const { activeElement } = document;
+		const hasButtonRole = activeElement?.getAttribute('role') === 'button';
+
+		if (hasButtonRole) {
+			// prevent default behaviour, including scrolling on spacebar
+			if (['Spacebar', ' ', 'Enter'].includes(event.key)) {
+				event.preventDefault();
+			}
+
+			if (event.key === 'Enter') {
+				activeElement.click();
+			}
+		}
+	});
+
+	document.addEventListener('keyup', (event) => {
+		const { activeElement } = document;
+		const hasButtonRole = activeElement?.getAttribute('role') === 'button';
+
+		if (hasButtonRole && ['Spacebar', ' '].includes(event.key)) {
+			event.preventDefault();
+			activeElement.click();
+		}
+	});*/
+
+	//onclick="handleClick()"
 </script>
 
-<div on:click={() => (showModal = !showModal)} class="tile technology">
+<!-- making a dive act like a button: https://kvack.dev/blog/make-that-div-behave-like-a-button -->
+
+<div on:click={() => (showModal = !showModal)} onclick="handleClick()" role="button" tabindex=0 class="tile technology">
     <div class="links">
 		<span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span>
         {#if technology.repository}<span class="repository"><a
@@ -49,11 +83,11 @@
     <p class="description">{technology.description}{#if technology.extended_description}<span
         title={technology.extended_description}>i</span>{/if}
     </p>
-    {#if technology.categories}<p class="categories">{pluraliser('Category',
+    {#if technology.categories}<p class="property categories">{pluraliser('Category',
 		'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
-    {#if technology.analogues}<p class="analogues">Alternative to <span
+    {#if technology.analogues}<p class="property analogues">Alternative to <span
 		class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
-    {#if technology.license}<p class="license"
+    {#if technology.license}<p class="property license"
         title="The libre license for this project is {technology.license}">License: <span
 		class="value">{technology.license}</span></p>{/if}
     {#if hasInstances(technology)}
@@ -110,10 +144,6 @@
 		box-shadow: 0 0 0;
 		border-color: #000;
 	}
-	.tile p.description {
-	    height: 200px;
-	    overflow: scroll;
-	}
 	.tile .links h2 a {
 		color: #e6c4fc;
 	}
@@ -140,22 +170,29 @@
 		color: #fff;
 	}
 	.tile .description {
-		height: 260px;
+		height: 200px;
 		text-overflow: ellipsis;
 		overflow: hidden;
+		padding-top: 0.5em;
 	}
 	.tile p {
-		padding: 0 1em 0.2em 1em;
+		padding: 0 0.7em 0.2em 0.7em;
 		font-size: 80%;
 		color: #555;
 	}
+	.tile p.property {
+		padding: 0.2em 0.7em;
+		margin: 0;
+	}
 	.instances {
 		background-color: #ddd;
 		position: absolute;
 		bottom: 0;
-		height: 3em;
+		height: 2.5em;
 		width: 100%;
+		vertical-align: middle;
 	}
+	.instances p { padding-top: 0.7em; vertical-align: middle; }
 	.instances .marker {
 		margin-right: 3px;
 	}
@@ -170,15 +207,19 @@
 		vertical-align: middle;
 	}
 	.circle {
-		height: 26px;
-		width: 26px;
+		height: 20px;
+		width: 20px;
 		background-color: #555;
 		border-radius: 50%;
 		display: inline-block;
+		border: 1px solid #777;
+	}
+	.circle:hover {
+		border: 1px solid #000;
 	}
 	.square {
-		height: 26px;
-		width: 26px;
+		height: 20px;
+		width: 20px;
 		background-color: #555;
 		display: inline-block;
 	}

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
-    import '../app.css';
    	import tabler from 'yesvelte/css/tabler.min.css?url';
 	import daisyui from 'yesvelte/css/daisyui.min.css?url';
+    import '../app.css';
 
     	// you can change theme of your project from here.
 	let theme = 'tabler';

src/routes/+page.svelte

@@ -16,10 +16,16 @@
 
 	let tabindex = 0; // a counter which facilitates keyboard navigation.
 
+
+	// return the % a is of b
+	function percent(a, b) {
+		return new Intl.NumberFormat('en', { style: "percent" }).format(a/b);
+	}
+
 	//
 	// digest and return useful info from the Webservices JSON feed
 	function processData(webservices) {
-        let stats = { 'instances': 0, 'technologies': 0, 'licenses': 0,'weak': 0, 'copyleft': 0 };
+		let stats = { instances: 0, technologies: 0, licenses: 0, weak: 0, copyleft: 0 };
 		let all = []; // all services
 		let current = []; // those with active instances
 		let future = []; // those that are planned
@@ -43,8 +49,9 @@
 		// pull out relevant info in useful chunks.
 		for (let key in webservices.technologies) {
 			let tech = webservices.technologies[key];
+			console.log('considering ' + countArray(webservices.technologies) + ' technologies at the start.');
 			tech['name'] = key;
-            console.log('tech '+key+' ('+tech.categories.length+'):', tech.categories);
+			//console.log('tech '+key+' ('+tech.categories.length+'):', tech.categories);
 			if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array) {
 				//console.log('tech '+key+' ('+tech.categories.length+'):', tech.categories);
 				tech.categories.forEach(function (category, index) {
@@ -63,7 +70,8 @@
 				if (license_list.hasOwnProperty(license)) license_list[license]++;
 				else license_list[license] = 1;
 			}
-            if (hasInstances(tech)) {
+			if (hasInstances(tech) || tech.instances == 'all') {
+				if (tech.instances != 'all') {
 					current.push(tech);
 					//console.log(tech.name + ': ' + tech.instances.length + ' instances...');
 					tech.instances.forEach(function (instance, i) {
@@ -85,6 +93,9 @@
 							else host_list[tag] = 1;
 						}
 					});
+				} else {
+					console.log('tech ' + tech.name + ' applies to *all* instances');
+				}
 			} else {
 				future[key] = tech;
 			}
@@ -109,9 +120,17 @@
 
 		// assign stats based on gathered data...
 		stats.current = current.length;
-		stats.future = future.length;
+		console.log('future technologies: ', future);
+		stats.future = countArray(future);
 		console.log('license_list: ', license_list);
-		stats.licenses = license_list.length;
+		stats.licenses = countArray(license_list);
+		stats.licensed_technologies = numLicensedTechnologies(license_list);
+		stats.strong = numCopyleft(license_list, references.copyleft_list);
+		stats.weak = stats.licensed_technologies - stats.strong;
+		console.log('host_list: ', host_list);
+		console.log('number of hosts: ', countArray(host_list));
+		stats.hosts = countArray(host_list);
+		console.log('stats: ', stats);
 
 		return {
 			stats: stats,
@@ -133,6 +152,36 @@
 		};
 	}
 
+	// when compound arrays don't have a valid .length key, use this
+	function countArray(arr) {
+		var count = 0;
+		for (var k in arr) {
+			if (arr.hasOwnProperty(k)) {
+				count++;
+			}
+		}
+		return count;
+	}
+
+	// count copyleft licenses, by only checking the copyleft totals
+	function numCopyleft(list, copyleft) {
+		var count = 0;
+		copyleft.forEach(function (license) {
+			//console.log('found ' + list[license] + ' technologies using ' + license);
+			count += list[license];
+		});
+		return count;
+	}
+
+	function numLicensedTechnologies(list) {
+		var count = 0;
+		for (var key in list) {
+			//console.log('found ' + list[key] + ' apps for license ' + key);
+			count += list[key];
+		}
+		return count;
+	}
+
 	// return an object with ob's keys ordered alphabetically, with an id from an object
 	function getSortedFilter(ob) {
 		let keys = [];
@@ -145,23 +194,22 @@
 		// sort the array alphabetically
 		keys.sort();
 		// then create a dictionary of them
-		keys.forEach(function(name) {
-			key_array.push({ "id": i++, "name": name, "active": true });
+		keys.forEach(function (name) {
+			key_array.push({ id: i++, name: name, active: true });
 		});
 		return key_array;
 	}
 
 	// return true if a tech object includes valid instances
 	function hasInstances(tech) {
-		if (
-			tech.hasOwnProperty('instances') &&
+		if (tech.hasOwnProperty('instances') &&
 			tech.instances.constructor === Array &&
-			tech.instances.length
-		) return true;
+			tech.instances.length) {
+			return true;
+		}
 		return false;
 	}
 
-
 	// get intersection: ref https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
 	function getIntersection(a, b) {
 		const set1 = new Set(a);
@@ -172,7 +220,6 @@
 		return intersection;
 	}
 
-
 	// assign colours from a set of differentiated colours to a list of tags...
 	// this one is for 'hosts'
 	//
@@ -187,7 +234,10 @@
 		for (let index in host_list) {
 			console.log(host_list[index]);
 			let hostname = host_list[index].name;
-			if (hosts[hostname].hasOwnProperty('domain') && hosts[hostname].hasOwnProperty('affiliation')) {
+			if (
+				hosts[hostname].hasOwnProperty('domain') &&
+				hosts[hostname].hasOwnProperty('affiliation')
+			) {
 				host_array[hostname] = {
 					colour: colours[i++],
 					domain: hosts[hostname].domain,
@@ -208,8 +258,8 @@
 		//console.log('affiliate_list:', affiliate_list);
 
 		for (let index in affiliate_list) {
-			//console.log('affiliate:', affiliate);
 			let affiliate = affiliate_list[index].name;
+			//console.log('affiliate:', affiliate);
 			if (
 				affiliates[affiliate].hasOwnProperty('name') &&
 				affiliates[affiliate].hasOwnProperty('website')
@@ -244,7 +294,9 @@
 	function flattenFilter(filter) {
 		let flat = [];
 		if (filter.constructor === Array) {
-			filter.forEach(function(e) { if (e.active) flat.push(e.name) });
+			filter.forEach(function (e) {
+				if (e.active) flat.push(e.name);
+			});
 		}
 		return flat;
 	}
@@ -253,8 +305,10 @@
 	function filterTechnologiesByArray(technologies, field, list) {
 		const included = [];
 		technologies.forEach(function (tech) {
-			if (hasInstances(tech)) {
-			    let arr = tech[field]
+			if (hasInstances(tech) || tech.instances == 'all') {
+				if (typeof tech[field] != 'undefined') {
+					let arr = tech[field];
+					//if (field == 'analogues') console.log('tech['+field+'] = ', tech[field]);
 					const intersection = inCommon(arr, list);
 					if (intersection && intersection.constructor === Array) {
 						//console.log('intersection length: ', intersection.length);
@@ -262,6 +316,12 @@
 							included.push(tech);
 						}
 					}
+					// this tech doesn't define that field, so don't eliminate it from the list
+				} else {
+					included.push(tech);
+				}
+			} else {
+				console.log('not including tech ', tech.name);
 			}
 		});
 		//console.log('found ' + included.length + ' technologies.');
@@ -272,7 +332,8 @@
 	function filterTechnologiesByValue(technologies, field, list) {
 		const included = [];
 		technologies.forEach(function (tech) {
-			if (hasInstances(tech)) {
+			if (hasInstances(tech) || tech.instances == 'all') {
+				if (typeof tech[field] != 'undefined') {
 					let arr = [tech[field]];
 					const intersection = inCommon(arr, list);
 					if (intersection && intersection.constructor === Array) {
@@ -281,6 +342,44 @@
 							included.push(tech);
 						}
 					}
+				} else {
+					included.push(tech);
+				}
+			}
+		});
+		//console.log('found ' + included.length + ' technologies.');
+		return included;
+	}
+
+	function filterTechnologiesByInstanceValue(technologies, field, list) {
+		const included = [];
+		technologies.forEach(function (tech) {
+			var to_include = false;
+			if (hasInstances(tech)) {
+				console.log('instances: ', tech.instances);
+				for (let instance in tech.instances) {
+					console.log('instance = ', instance);
+					if (instance.hasOwnProperty(field)) {
+						const intersection = inCommon([instance[field]], list);
+						if (intersection && intersection.constructor === Array) {
+							console.log('intersection length: ', intersection.length);
+							// if any one instance belonging to the tech is in the set, add the tech.
+							if (intersection.length > 0) {
+								console.log('setting to include ',instance.domain);
+								to_include = true;
+							} else {
+								// if an instance doesn't belong in the set, remove it.
+								tech.instances[instance.domain].pop();
+							}
+						}
+					} else {
+						console.log('instance missing field ', field);
+					}
+				}
+			}
+			if (to_include) {
+				console.log('including ', tech.name);
+				included.push(tech);
 			}
 		});
 		//console.log('found ' + included.length + ' technologies.');
@@ -323,30 +422,73 @@
 	const affiliates = results.affiliates;
 	//console.log('affiliate_data: ', results.affiliates);
 	const host_colours = hostColours($hostFilter, colours, hosts);
-	 //console.log('host_colours:', host_colours);
+	console.log('host_colours:', host_colours);
 	colours.sort();
 	const affiliate_colours = affiliateColours($affiliateFilter, colours, affiliates);
-	//console.log('affiliate_colours:',affiliate_colours);
+	console.log('affiliate_colours:',affiliate_colours);
 
 	let filteredTechnologies;
 	let technologies;
 
 	// reactive stuff...
 	$: {
-		console.log('about to filterTechnologiesByCategoryList');
+		console.log(
+			'about to filter technologies by categories - starting with ' +
+				results.active_services.length +
+				' technologies...'
+		);
 		// filter by categories
-		filteredTechnologies = filterTechnologiesByArray(results.active_services, 'categories',
-			flattenFilter($categoryFilter));
+		filteredTechnologies = filterTechnologiesByArray(
+			results.active_services,
+			'categories',
+			flattenFilter($categoryFilter)
+		);
+		console.log(
+			'about to filter technologies by analogues - starting with ' +
+				filteredTechnologies.length +
+				' technologies...'
+		);
 		// filter by analogues
-		filteredTechnologies = filterTechnologiesByArray(filteredTechnologies, 'analogues',
-			flattenFilter($analogueFilter));
-		filteredTechnologies = filterTechnologiesByValue(filteredTechnologies, 'license',
-			flattenFilter($licenseFilter));
+		filteredTechnologies = filterTechnologiesByArray(
+			filteredTechnologies,
+			'analogues',
+			flattenFilter($analogueFilter)
+		);
+		/*console.log(
+			'about to filter technologies by license - starting with ' +
+				filteredTechnologies.length +
+				' technologies...'
+		);*/
+		filteredTechnologies = filterTechnologiesByValue(
+			filteredTechnologies,
+			'license',
+			flattenFilter($licenseFilter)
+		);
+		/*console.log(
+			'about to sort technologies alphabetically - starting with ' +
+				filteredTechnologies.length +
+				' technologies...'
+		);*/
+		/*filteredTechnologies = filterTechnologiesByInstanceValue(
+			filteredTechnologies,
+			'status',
+			flattenFilter($statusFilter)
+		)*/
+		/*filteredTechnologies = filterTechnologiesByInstanceValue(
+			filteredTechnologies,
+			'affiliate',
+			flattenFilter($affiliateFilter)
+		)
+		filteredTechnologies = filterTechnologiesByInstanceValue(
+			filteredTechnologies,
+			'host',
+			flattenFilter($hostFilter)
+		)*/
 
 		//filteredTechnologies = filterTechnologiesByCategoryList(results.all_services, flattenFilter($categoryFilter));
 		const technologies = sortTechnologies(filteredTechnologies);
+		console.log('finally have ' + technologies.length + ' technologies left to show...');
 	}
-
 </script>
 
 <div class="webservices">
@@ -355,41 +497,108 @@
 			<div class="summary">
 				<h2>Statistics</h2>
 				<ul>
-					<li><span class="label">Number of individual services: <span class="number">{results.stats.instances}</span></li>
-					<li><span class="label">Number of individual technologies: <span class="number">{results.stats.current}</span></li>
-					<li><span class="label">Number of new technologies to be added: <span class="number">{results.stats.future}</span></li>
-					<li><span class="label">Number of libre licenses used by these technologies: <span class="number">{results.stats.licenses}</span>
+					<li>
+						<span class="label">Current web service instances:
+							<span class="number">{results.stats.instances}</span>
+						</span>
+					</li>
+					<li>
+						<span class="label">Active web service technologies:
+							<span class="number">{results.stats.current}</span>
+						</span>
+					</li>
+					<li>
+						<span class="label">New technologies to be added:
+							<span class="number">{results.stats.future}</span>
+						</span>
+					</li>
+					<li>
+						<span class="label">Licenses used by these
+							<span class="number">{results.stats.licensed_technologies}</span>
+							technologies:
+							<span class="number">{results.stats.licenses}</span>
 							<ul>
-						<li><span class="label">'weak' corporate-exploitation-friendly open source licenses : <span class="number">{results.stats.weak}</span></li>
-						<li><span class="label">'strong' user-protecting copyleft licenses: <span class="number">{results.stats.copyleft}</span></li>
+								<li>
+									<span class="label">'strong' copyleft licenses:
+										<span class="number">{results.stats.strong}</span>
+										(<span class="number">{percent(results.stats.strong, results.stats.licensed_technologies)}</span>)
+									</span>
+								</li>
+								<li>
+									<span class="label">'weak' open source licenses :
+										<span class="number">{results.stats.weak}</span>
+										(<span class="number">{percent(results.stats.weak, results.stats.licensed_technologies)}</span>)
+									</span>
+								</li>
 							</ul>
+						</span>
 					</li>
 
-					<li><span class="label">Total number of services: <span class="number">{results.stats.instances}</span></li>
+					<li>
+						<span class="label">Number of hosts:
+							<span class="number">{results.stats.hosts}</span>
+						</span>
+					</li>
 				</ul>
 			</div>
 		</div>
 		<h1>Web Services</h1>
-		<p>This sites exists to provide an 'always-up-to-date', in-depth description of the
+		<p>
+			This sites exists to provide an 'always-up-to-date', in-depth description of the
 			<a href="https://tech.oeru.org/foss-libresoftware-its-about-clarity-and-values"
-			title="What do I mean by 'libre' software?">libre software</a> web services I (<a href="https://davelane.nz" title="Who is this Dave Lane character?">Dave Lane</a>) have set up and maintain.
+				title="What do I mean by 'libre' software?">libre software</a>
+			web services I (<a href="https://davelane.nz"
+			title="Who is this Dave Lane character?">Dave Lane</a>) have set up and maintain.
 		</p>
-		<p>These services are run primarily on commodity Linux Virtual Private Servers, aka 'hosts', which I also maintain. Some systems are also run on real physical hosts either in my home hosting facility or in commercial hosting facilities. These hosts are based in Aotearoa NZ, Singapore, the US, and in Germany. Almost all run an LTS (Long Term Support) version of Ubuntu Linux although a few hosts run Debian Linux.</p>
-		<p>Almost all the hosts are <a href="https://tech.oeru.org/creating-your-own-oer-foundation-style-libre-self-hosting-infrastructure-docker-compose-and-ubuntu">configured in a particular way</a> which allows multiple services to run harmoniously on the same host. I use a set of somewhere between one and twenty-one Docker containers (which I run via Docker Compose) for each service, to keep different services, each of which has different software dependencies, from interfering with one another. Each service is made available to the Internet via a 'reverse proxy' (for which I use Nginx) and user interactions with them are secured (encrypted) with Let's Encrypt SSL certificates (which renew automatically).
+		<p>
+			These services are run primarily on commodity Linux Virtual Private Servers, aka 'hosts',
+			which I also maintain. Some systems are also run on real physical hosts either in my home
+			hosting facility or in commercial hosting facilities. These hosts are based in Aotearoa NZ,
+			Singapore, the US, and in Germany. Almost all run an LTS (Long Term Support) version of Ubuntu
+			Linux although a few hosts run Debian Linux.
+		</p>
+		<p>
+			Almost all the hosts are <a href="https://tech.oeru.org/creating-your-own-oer-foundation-style-libre-self-hosting-infrastructure-docker-compose-and-ubuntu">configured in a particular way</a> which allows multiple services to run harmoniously on the same host. I use a set of somewhere
+			between one and twenty-one Docker containers (which I run via Docker Compose) for each service,
+			to keep different services, each of which has different software dependencies, from interfering
+			with one another. Each service is made available to the Internet via a 'reverse proxy' (for which
+			I use Nginx) and user interactions with them are secured (encrypted) with Let's Encrypt SSL certificates (which renew automatically).
+		</p>
+		<p>
+			To manage the servers and keep them up-to-date, I use SSH to establish secure encrypted
+			connections to them (via key-based authentication). I run updates of the hosts manually, and
+			update individual services when required (urgently if updates are security-related). Some of
+			the Docker containers I run I have built myself, in other cases I use those supplied by the
+			communities developing the service.
+		</p>
+		<p>
+			One huge advantage of the Docker Compose pattern is that I can rapidly move services between
+			different hosts, or even replicate services very rapidly for development or staging purposes.
+			Using them has revolutionised my hosting processes.
 		</p>
-		<p>To manage the servers and keep them up-to-date, I use SSH to establish secure encrypted connections to them (via key-based authentication). I run updates of the hosts manually, and update individual services when required (urgently if updates are security-related). Some of the Docker containers I run I have built myself, in other cases I use those supplied by the communities developing the service.</p>
-		<p>One huge advantage of the Docker Compose pattern is that I can rapidly move services between different hosts, or even replicate services very rapidly for development or staging purposes. Using them has revolutionised my hosting processes.</p>
 	</div>
 	<Accordions>
 		<Accordion title="Filters">
 			<AccordionBody>
+				<p>
+					You can filter the software services listed below by the following filtering dimensions.
+					Click a tag to remove or re-add it or select all or none, or invert your selection if it's
+					more useful.
+				</p>
 				<Accordions>
 					<Accordion title="Software Catergory Filter">
 						<AccordionBody>
 							<div class="filter-group categories">
-								<Filterable filterValues={categoryFilter}
-									histogram={results.tech_lists.category_list} context={'categories'}>
+								<Filterable
+									filterValues={categoryFilter}
+									histogram={results.tech_lists.category_list}
+									context={'categories'}>
 									<h2 slot="title">Categories</h2>
+									<p slot="description">
+										You can These are general categories of software which help you understand the
+										sort of software you're looking at, as well as identifying functionally similar
+										software for comparison.
+									</p>
 								</Filterable>
 							</div>
 						</AccordionBody>
@@ -397,10 +606,21 @@
 					<Accordion title="Software Analogue Filter">
 						<AccordionBody>
 							<div class="filter-group analogues">
-								<Filterable filterValues={analogueFilter}
-									tabindex={tabindex}
-									histogram={results.tech_lists.analogue_list} context={'analogues'}>
+								<Filterable
+									filterValues={analogueFilter}
+									{tabindex}
+									histogram={results.tech_lists.analogue_list}
+									context={'analogues'}>
 									<h2 slot="title">Analogues</h2>
+									<p slot="description">
+										Because all the software listed here is '<a
+											href="https://tech.oeru.org/foss-libresoftware-its-about-clarity-and-values"
+											>libre</a
+										>', I've included the names of functionally similar but heavily marketed
+										<a href="https://davelane.nz/proprietary">proprietary</a> software that is therefore
+										better known to the general population, also for the purposes of understanding the
+										use of the software shown and to what it can be compared.
+									</p>
 								</Filterable>
 							</div>
 						</AccordionBody>
@@ -408,10 +628,18 @@
 					<Accordion title="License Filter">
 						<AccordionBody>
 							<div class="filter-group licenses">
-								<Filterable filterValues={licenseFilter}
-									tabindex={tabindex}
-									histogram={results.tech_lists.license_list} context={'licenses'}>
+								<Filterable
+									filterValues={licenseFilter}
+									{tabindex}
+									histogram={results.tech_lists.license_list}
+									context={'licenses'}
+								>
 									<h2 slot="title">Open Source & Copyleft Licenses</h2>
+									<p slot="description">
+										These are the various '<a href="https://opensource.org/licenses">open source</a
+										>' and '<a href="https://copyleft.org">copyleft</a>' licenses that apply to the
+										software listed. You can chose
+									</p>
 								</Filterable>
 							</div>
 						</AccordionBody>
@@ -419,10 +647,14 @@
 					<Accordion title="Service Status Filter">
 						<AccordionBody>
 							<div class="filter-group statuses">
-								<Filterable filterValues={statusFilter}
-									tabindex={tabindex}
-									histogram={results.instance_lists.status_list} context={'statuses'}>
+								<Filterable
+									filterValues={statusFilter}
+									{tabindex}
+									histogram={results.instance_lists.status_list}
+									context={'statuses'}
+								>
 									<h2 slot="title">Statuses</h2>
+									<p slot="description"></p>
 								</Filterable>
 							</div>
 						</AccordionBody>
@@ -431,9 +663,10 @@
 						<AccordionBody>
 							<div class="filter-group affilates">
 								<Filterable filterValues={affiliateFilter}
-									tabindex={tabindex}
-									histogram={results.instance_lists.affiliate_list}
-									context={'affiliates'}><h2 slot="title">Affiliates</h2>
+									{tabindex} 								histogram={results.instance_lists.affiliate_list}
+									context={'affiliates'}
+									colours={affiliate_colours}><h2 slot="title">Affiliates</h2>
+									<p slot="description"></p>
 								</Filterable>
 							</div>
 						</AccordionBody>
@@ -442,9 +675,11 @@
 						<AccordionBody>
 							<div class="filter-group hosts">
 								<Filterable	filterValues={hostFilter}
-									tabindex={tabindex}
-									histogram={results.instance_lists.host_list} context={'hosts'}>
-									<h2 slot="title">Hosts</h2>
+									{tabindex}
+									histogram={results.instance_lists.host_list}
+									context={'hosts'}
+									colours={host_colours}><h2 slot="title">Hosts</h2>
+									<p slot="description"></p>
 								</Filterable>
 							</div>
 						</AccordionBody>
@@ -453,9 +688,10 @@
 			</AccordionBody>
 		</Accordion>
 	</Accordions>
+	<p>Showing {filteredTechnologies.length} technology tiles.</p>
 	<div class="tiles">
 		{#each filteredTechnologies as technology}
-		<TechnologyTile technology={technology} affiliate_colours={affiliate_colours} />
+			<TechnologyTile {technology} {affiliate_colours} />
 		{/each}
 	</div>
 </div>
@@ -491,21 +727,12 @@
 		padding: 0 20px;
 		box-shadow: 6px 6px 20px #999;
 	}
-	.summary .label { color: #666; }
-	.summary .number { color: #000; }
-/*	.accordion-item {
-	    width: 30em;
-	    display: flex;
-	    text-align: left;
+	.summary .label {
+		color: #666;
 	}
-	.accordion-item h2 {
-	    display: inline;
+	.summary .number {
+		color: #000;
 	}
-	.accordion-item svg {
-		width: 12px;
-		display: block;
-		vertical-align: middle;
-	}*/
 	@media screen and (max-width: 600px) {
 		.summary {
 			float: none;