Refactor Svelte components – Unification of categories and functors

src/components/CategoryImplicationItem.svelte

@@ -7,9 +7,12 @@
 	} from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
 	import { get_property_url } from '$lib/commons/property.url'
-	import type { ImplicationDisplay } from '$lib/commons/types'
+	import type { CategoryImplicationDisplay } from '$lib/commons/types'
 
-	type Props = { implication: ImplicationDisplay; highlighted_property?: string }
+	type Props = {
+		implication: CategoryImplicationDisplay
+		highlighted_property?: string
+	}
 
 	let { implication, highlighted_property }: Props = $props()
 </script>

src/components/CategoryImplicationList.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ImplicationDisplay } from '$lib/commons/types'
+	import type { CategoryImplicationDisplay } from '$lib/commons/types'
 	import CategoryImplicationItem from './CategoryImplicationItem.svelte'
 
 	type Props = {
-		implications: ImplicationDisplay[]
+		implications: CategoryImplicationDisplay[]
 		highlighted_property?: string
 	}
 

src/components/EntityList.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { EntityShort } from '$lib/commons/types'
+
+	type Props = {
+		entities: (EntityShort & { count?: number })[]
+		type: 'category' | 'functor'
+	}
+
+	let { entities, type }: Props = $props()
+</script>
+
+{#if entities.length}
+	<ul>
+		{#each entities as entity}
+			<li>
+				<a href="/{type}/{entity.id}">
+					{entity.name}
+				</a>
+				{#if entity.count !== undefined}
+					<span class="count">({entity.count})</span>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{:else}
+	<p>&mdash;</p>
+{/if}
+
+<style>
+	ul {
+		margin-block: 1rem;
+	}
+
+	.count {
+		color: var(--secondary-text-color);
+	}
+</style>

src/lib/commons/types.ts

@@ -4,6 +4,11 @@ export type Arrayed<T extends readonly unknown[]> = {
 
 type Replace<T, R extends Partial<Record<keyof T, any>>> = Omit<T, keyof R> & R
 
+export type EntityShort = {
+	id: string
+	name: string
+}
+
 export type CategoryDisplay = {
 	id: string
 	name: string
@@ -17,15 +22,13 @@ export type CategoryDisplay = {
 	dual_category_notation: string | null
 }
 
-export type CategoryShort = Pick<CategoryDisplay, 'id' | 'name'>
-
 export type RelatedCategory = Pick<CategoryDisplay, 'id' | 'name' | 'notation'>
 
 export type TagObject = { tag: string }
 
 export type CommentObject = { id: number; comment: string }
 
-export type ImplicationDB = {
+export type CategoryImplicationDB = {
 	id: string
 	is_equivalence: 0 | 1
 	reason: string
@@ -35,8 +38,8 @@ export type ImplicationDB = {
 	dualized_from?: string | null
 }
 
-export type ImplicationDisplay = Replace<
-	ImplicationDB,
+export type CategoryImplicationDisplay = Replace<
+	CategoryImplicationDB,
 	{
 		is_equivalence: boolean
 		is_deduced: boolean
@@ -45,6 +48,7 @@ export type ImplicationDisplay = Replace<
 	}
 >
 
+// used for both categories and functors
 export type PropertyDB = {
 	id: string
 	relation: string
@@ -61,19 +65,26 @@ export type PropertyDisplay = Replace<
 
 export type PropertyShort = Pick<PropertyDB, 'id' | 'relation'>
 
-export type DescriptionWithReason = {
-	description: string
-	reason: string | null
-}
-
-export type CategoryPropertyDB = {
+export type PropertyAssignmentDB = {
 	id: string
 	reason: string
 	relation: string
 	is_deduced: 0 | 1
+	is_satisfied: 0 | 1
 }
 
-export type CategoryProperty = Replace<CategoryPropertyDB, { is_deduced: boolean }>
+export type PropertyAssignmentDisplay = Replace<
+	PropertyAssignmentDB,
+	{
+		is_deduced: boolean
+		is_satisfied: boolean
+	}
+>
+
+export type DescriptionWithReason = {
+	description: string
+	reason: string | null
+}
 
 export type SpecialObject = {
 	type: string
@@ -88,11 +99,6 @@ export type SpecialMorphism = {
 
 export type Structure = 'categories' | 'functors'
 
-export type FunctorShort = {
-	id: string
-	name: string
-}
-
 export type FunctorDB = {
 	id: string
 	name: string
@@ -104,24 +110,6 @@ export type FunctorDB = {
 	nlab_link: string | null
 }
 
-export type FunctorPropertyDB = {
-	id: string
-	relation: string
-	description: string
-	nlab_link: string | null
-	invariant_under_equivalences: 0 | 1
-	dual_property_id: string | null
-}
-
-export type FunctorPropertyShort = Pick<FunctorPropertyDB, 'id' | 'relation'>
-
-export type FunctorProperty = Replace<
-	FunctorPropertyDB,
-	{
-		invariant_under_equivalences: boolean
-	}
->
-
 export type FunctorImplicationDB = {
 	id: string
 	is_equivalence: 0 | 1
@@ -143,15 +131,3 @@ export type FunctorImplicationDisplay = Replace<
 		target_assumptions: string[]
 	}
 >
-
-export type FunctorPropertyAssignmentDB = {
-	id: string
-	reason: string
-	relation: string
-	is_deduced: 0 | 1
-}
-
-export type FunctorPropertyAssignment = Replace<
-	FunctorPropertyAssignmentDB,
-	{ is_deduced: boolean }
->

src/lib/server/utils.ts

@@ -1,12 +1,12 @@
 import type {
 	FunctorImplicationDB,
 	FunctorImplicationDisplay,
-	FunctorProperty,
-	FunctorPropertyDB,
-	ImplicationDB,
-	ImplicationDisplay,
+	CategoryImplicationDB,
+	CategoryImplicationDisplay,
 	PropertyDB,
 	PropertyDisplay,
+	PropertyAssignmentDB,
+	PropertyAssignmentDisplay,
 } from '$lib/commons/types'
 
 export function is_object(obj: unknown): obj is Record<string, unknown> {
@@ -22,18 +22,7 @@ export function is_subset<T>(a: Set<T>, b: Set<T>) {
 
 export const sleep = (delay: number) => new Promise<void>((res) => setTimeout(res, delay))
 
-export function display_implication(implication: ImplicationDB): ImplicationDisplay {
-	return {
-		id: implication.id,
-		is_equivalence: Boolean(implication.is_equivalence),
-		reason: implication.reason,
-		is_deduced: Boolean(implication.is_deduced),
-		assumptions: JSON.parse(implication.assumptions),
-		conclusions: JSON.parse(implication.conclusions),
-		dualized_from: implication.dualized_from,
-	}
-}
-
+// this function is used for both categories and functors
 export function display_property(property: PropertyDB): PropertyDisplay {
 	return {
 		id: property.id,
@@ -45,14 +34,29 @@ export function display_property(property: PropertyDB): PropertyDisplay {
 	}
 }
 
-export function display_functor_property(property: FunctorPropertyDB): FunctorProperty {
+export function display_property_assignment(
+	property: PropertyAssignmentDB,
+): PropertyAssignmentDisplay {
 	return {
 		id: property.id,
+		reason: property.reason,
+		is_deduced: Boolean(property.is_deduced),
 		relation: property.relation,
-		description: property.description,
-		dual_property_id: property.dual_property_id,
-		nlab_link: property.nlab_link,
-		invariant_under_equivalences: Boolean(property.invariant_under_equivalences),
+		is_satisfied: Boolean(property.is_satisfied),
+	}
+}
+
+export function display_implication(
+	implication: CategoryImplicationDB,
+): CategoryImplicationDisplay {
+	return {
+		id: implication.id,
+		is_equivalence: Boolean(implication.is_equivalence),
+		reason: implication.reason,
+		is_deduced: Boolean(implication.is_deduced),
+		assumptions: JSON.parse(implication.assumptions),
+		conclusions: JSON.parse(implication.conclusions),
+		dualized_from: implication.dualized_from,
 	}
 }
 

src/routes/categories/+page.server.ts

@@ -1,10 +1,10 @@
-import type { CategoryShort, TagObject } from '$lib/commons/types'
+import type { EntityShort, TagObject } from '$lib/commons/types'
 import { batch } from '$lib/server/db.catdat'
 import { error } from '@sveltejs/kit'
 import sql from 'sql-template-tag'
 
 export const load = async () => {
-	const { results, err } = batch<[CategoryShort, TagObject]>([
+	const { results, err } = batch<[EntityShort, TagObject]>([
 		sql`SELECT id, name FROM categories ORDER BY lower(name)`,
 		sql`SELECT tag FROM tags ORDER BY id`,
 	])

src/routes/categories/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import CategoryList from '$components/CategoryList.svelte'
 	import Chip from '$components/Chip.svelte'
 	import ChipGroup from '$components/ChipGroup.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SearchFilter from '$components/SearchFilter.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
 	import { filter_by_tag, normalize_text, pluralize } from '$lib/client/utils'
+	import EntityList from '$components/EntityList.svelte'
 
 	let { data } = $props()
 
@@ -34,7 +34,7 @@
 		})}
 	</p>
 
-	<CategoryList categories={searched_categories} />
+	<EntityList entities={searched_categories} type="category" />
 </section>
 
 <section>

src/routes/categories/[tag]/+page.server.ts

@@ -1,4 +1,4 @@
-import type { CategoryShort, TagObject } from '$lib/commons/types'
+import type { EntityShort, TagObject } from '$lib/commons/types'
 import { query } from '$lib/server/db.catdat'
 import { error } from '@sveltejs/kit'
 import sql from 'sql-template-tag'
@@ -13,7 +13,7 @@ export const entries: EntryGenerator = async () => {
 export const load = async (event) => {
 	const tag = event.params.tag
 
-	const { rows: categories, err } = query<CategoryShort>(sql`
+	const { rows: categories, err } = query<EntityShort>(sql`
 		SELECT c.id, c.name FROM categories c
 		LEFT JOIN category_tag_assignments t ON c.id = t.category_id
 		WHERE t.tag = ${tag}