Remove dead code and fix typescript

src/components/card/LabelCard.svelte

@@ -1,13 +1,35 @@
 <script lang="ts">
-    import { type PortfolioGlobals, type Label, type ClassifierSlug } from '$types';
+    import { type PortfolioGlobals, type Label, type ClassifierSlug, type LabelSlug } from '$types';
     import Card from './Card.svelte';
-    import { ChipList, LabelChip } from '$components/chip';
-    import { Separator } from '..';
+    import { ChipList } from '$components/chip';
+    import { orderedRecord, type OrderedRecord } from '$lib/orderedRecord';
 
     export let label: Label;
     export let globals: PortfolioGlobals;
 
-    $: usedClassifiers = globals.classifierOrder.filter(c => c in label.info.associations);
+    // List of classifier slugs associated by this label
+    $: usedClassifiers = globals.classifiers.keys().filter(c => c in label.info.associations);
+    // List of associated labels, grouped by classifier
+    $: associatedLabels = orderedRecord(
+      // This feels absolutely disgusting but I simply cannot think of a nicer
+      // way to do it
+      Object.fromEntries(usedClassifiers.map(
+        c => [
+          c,
+          orderedRecord(
+            Object.fromEntries(
+              label.info.associations[c].map(slug => [
+                slug,
+                { label: globals.classifiers.get(c).labels.get(slug) }
+              ]),
+            ),
+            label.info.associations[c],
+          ),
+        // Another manual type cast because Object.fromEntries is kinda stupid
+        ] as [ClassifierSlug, OrderedRecord<LabelSlug, { label: Label}>]
+      )),
+      usedClassifiers,
+    );
 </script>
 
 <Card
@@ -16,18 +38,5 @@
     color={label.info.color}
 >
     <p>{label.info.description}</p>
-    {#if usedClassifiers.length}
-        <ChipList>
-            {#each usedClassifiers.slice(0, -1) as classifier}
-                {#each label.info.associations[classifier] as linkedLabel}
-                    <LabelChip label={globals.classifiers[classifier].labels[linkedLabel]} />
-                {/each}
-                <Separator />
-            {/each}
-            <!-- Last classifier doesn't have a separator -->
-            {#each label.info.associations[usedClassifiers.slice(-1)[0]] as linkedLabel}
-                <LabelChip label={globals.classifiers[usedClassifiers.slice(-1)[0]].labels[linkedLabel]} />
-            {/each}
-        </ChipList>
-    {/if}
+    <ChipList labels={associatedLabels} />
 </Card>

src/components/chip/ChipList.svelte

@@ -1,6 +1,58 @@
-<div>
-    <slot />
-</div>
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import { Separator } from '$components';
+    import { type ClassifierSlug, type Label, type LabelSlug } from '$types';
+    import { LabelChip } from '.';
+    import type { OrderedRecord } from '$lib/orderedRecord';
+
+    /** Labels to use as chips, grouped by classifier */
+    export let labels: OrderedRecord<
+      ClassifierSlug,
+      OrderedRecord<
+      LabelSlug,
+      { label: Label, selected?: boolean }
+      >
+    >;
+
+    const dispatch = createEventDispatcher<{
+        click: {
+            classifier: ClassifierSlug,
+            label: LabelSlug,
+            e: MouseEvent,
+        },
+    }>();
+
+    const bubbleClick = (classifier: ClassifierSlug, label: LabelSlug, e: MouseEvent) => {
+      dispatch('click', {
+        classifier,
+        label,
+        e,
+      });
+    };
+</script>
+
+{#if labels.keys().length}
+    <div class="chip-list">
+        {#each labels.values().slice(0, -1) as labelGroup}
+            {#each labelGroup.values() as { label, selected }}
+                <LabelChip
+                    {label}
+                    {selected}
+                    on:click={e => bubbleClick(label.classifier, label.slug, e)}
+                />
+            {/each}
+            <Separator />
+        {/each}
+        <!-- Last classifier doesn't have a separator -->
+        {#each labels.values().slice(-1)[0].values() as { label, selected }}
+            <LabelChip
+                {label}
+                {selected}
+                on:click={e => bubbleClick(label.classifier, label.slug, e)}
+            />
+        {/each}
+    </div>
+{/if}
 
 <style>
     div {

src/lib/orderedRecord.ts

@@ -0,0 +1,39 @@
+
+/** Ordered record, basically a record + ordering */
+export type OrderedRecord <K extends string, V> = {
+  entries: Record<K, V>
+  order: K[]
+  get: (key: K) => V
+  set: (key: K, value: V) => void
+  keys: () => K[]
+  values: () => V[]
+  items: () => [K, V][]
+  map: <T>(fn: (key: K, value: V) => T) => OrderedRecord<K, T>
+}
+
+/** Create an ordered record of the given entries and ordering */
+export function orderedRecord<K extends string, V>(entries: Record<K, V>, order: K[]): OrderedRecord<K, V> {
+  const values = () => order.map(k => entries[k]);
+  const items: () => [K, V][] = () => order.map(k => [k, entries[k]]);
+  const map: OrderedRecord<K, V>['map'] = fn => orderedRecord(
+    // @ts-expect-error -- Object.fromEntries produces a Record<string, T>
+    // instead of a Record<K, T>, but since we can't introduce the type var T
+    // in a way that allows us to use it in this expression, there is no way
+    // for us to cast it to the correct type. Therefore, we just need to
+    // silence the error. Yucky.
+    Object.fromEntries(
+      items().map(([k, v]) => [k, fn(k, v)])
+    ),
+    order,
+  );
+  return {
+    entries,
+    order,
+    get: k => entries[k],
+    set: (k, v) => { entries[k] = v; },
+    keys: () => order,
+    values,
+    items,
+    map,
+  };
+}