@glossarist/concept-browser 0.7.76 → 0.7.78

package/src/config/use-site-config.ts

@@ -157,6 +157,9 @@ function synthesizeDatasetPages(features?: Record<string, unknown>, pages?: Page
   if (features?.stats !== false && !declaredRoutes.has('stats')) {
     result.push({ type: 'stats', route: 'stats', title: 'Statistics', icon: 'chart', datasetScoped: true });
   }
+  if (!declaredRoutes.has('sources')) {
+    result.push({ type: 'sources', route: 'sources', title: 'Sources', icon: 'database', datasetScoped: true });
+  }
   if (features?.about !== false && !declaredRoutes.has('about')) {
     result.push({ type: 'about', route: 'about', title: 'About', icon: 'info', datasetScoped: true });
   }

package/src/i18n/locales/eng.yml

@@ -9,6 +9,7 @@ nav.ontology: Ontology
 nav.concepts: Concepts
 nav.stats: Statistics
 nav.about: About
+nav.sources: Sources
 nav.navigation: Navigation
 nav.datasets: Datasets
 
@@ -121,6 +122,8 @@ lang.termOnlyIn: Term only in
 # Dataset view
 dataset.concepts: concepts
 dataset.languages: languages
+dataset.sources: sources
+dataset.relationships: relationships
 dataset.filterPlaceholder: "Filter concepts... (press /)"
 dataset.of: of
 dataset.in: in

package/src/pages/[...path].astro

@@ -15,6 +15,7 @@ export async function getStaticPaths() {
   for (const ds of datasets) {
     paths.push({ params: { path: `dataset/${ds.data.id}/about` } });
     paths.push({ params: { path: `dataset/${ds.data.id}/stats` } });
+    paths.push({ params: { path: `dataset/${ds.data.id}/sources` } });
     for (const g of await getCollection('groups')) {
       paths.push({ params: { path: `group/${g.data.id}/about` } });
     }

package/src/router/index.ts

@@ -31,6 +31,12 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('../views/PageView.vue'),
     props: true,
   },
+  {
+    path: '/dataset/:registerId/sources',
+    name: 'sources',
+    component: () => import('../views/SourcesView.vue'),
+    props: true,
+  },
   {
     path: '/group/:groupId',
     name: 'group',

package/src/utils/hyperedge-styling.ts

@@ -0,0 +1,48 @@
+/**
+ * Hyperedge styling — colors for partitive decompositions.
+ *
+ * Independent of relationship-categories.ts (which handles binary edges).
+ * Hyperedges have their own visual language: teal base color, enumeration
+ * affects opacity, markers add accent badges.
+ */
+
+const BASE_LIGHT = '#0d9488';
+const BASE_DARK = '#2dd4bf';
+const ACCENT_DOUBLE_LIGHT = '#3b82f6';
+const ACCENT_DOUBLE_DARK = '#60a5fa';
+const ACCENT_DASHED_LIGHT = '#f59e0b';
+const ACCENT_DASHED_DARK = '#fbbf24';
+
+export interface HyperedgeStyle {
+  color: string;
+  badgeClass: string;
+  opacity: number;
+}
+
+export function hyperedgeStyle(
+  enumeration: 'closed' | 'open',
+  markers: string[],
+  isDark: boolean,
+): HyperedgeStyle {
+  const base = isDark ? BASE_DARK : BASE_LIGHT;
+  const opacity = enumeration === 'open' ? 0.6 : 1.0;
+
+  let badgeClass = 'badge-teal';
+  if (markers.includes('double')) {
+    badgeClass = isDark ? 'badge-blue' : 'badge-blue';
+  } else if (markers.includes('dashed')) {
+    badgeClass = 'badge-yellow';
+  }
+
+  return { color: base, badgeClass, opacity };
+}
+
+export function markerColor(marker: string, isDark: boolean): string {
+  if (marker === 'double') return isDark ? ACCENT_DOUBLE_DARK : ACCENT_DOUBLE_LIGHT;
+  if (marker === 'dashed') return isDark ? ACCENT_DASHED_DARK : ACCENT_DASHED_LIGHT;
+  return isDark ? BASE_DARK : BASE_LIGHT;
+}
+
+export function enumerationLabel(enumeration: 'closed' | 'open'): string {
+  return enumeration === 'open' ? 'Open (partial)' : 'Closed (complete)';
+}

package/src/utils/sphere-math.ts

@@ -0,0 +1,54 @@
+/** Deterministic hash from string → positive integer (for seeding positions). */
+export function hashSeed(s: string): number {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0;
+  return Math.abs(h);
+}
+
+/** Expand-slider → simulation parameters. Maps [0, 10] to physical constants. */
+export function expandParams(v: number): {
+  linkDist: number;
+  linkStrength: number;
+  repMin: number;
+  repStrength: number;
+} {
+  const t = Math.max(0, Math.min(10, v)) / 10;
+  return {
+    linkDist: 0.5 + t * 1.45,
+    linkStrength: 0.08,
+    repMin: 0.55 + t * 0.40,
+    repStrength: 0.05,
+  };
+}
+
+/** Which side of a card does an edge connect to? */
+export function portSide(
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+): 'top' | 'bottom' | 'left' | 'right' {
+  const dx = to.x - from.x, dy = to.y - from.y;
+  if (Math.abs(dx) > Math.abs(dy)) return dx > 0 ? 'right' : 'left';
+  return dy > 0 ? 'bottom' : 'top';
+}
+
+/** Connection point on a card's side, with offset to prevent stacking. */
+export function portPoint(
+  center: { x: number; y: number },
+  side: 'top' | 'bottom' | 'left' | 'right',
+  w: number,
+  h: number,
+  offset: number,
+): { x: number; y: number } {
+  switch (side) {
+    case 'right':  return { x: center.x + w / 2, y: center.y + (h / 2 - 6) * offset };
+    case 'left':   return { x: center.x - w / 2, y: center.y + (h / 2 - 6) * offset };
+    case 'bottom': return { x: center.x + (w / 2 - 12) * offset, y: center.y + h / 2 };
+    case 'top':    return { x: center.x + (w / 2 - 12) * offset, y: center.y - h / 2 };
+  }
+}
+
+/** Reverse lookup: find the node ID whose URI matches, in an ID→URI map. */
+export function idToUriGet(map: Map<string, string>, uri: string): string | undefined {
+  for (const [id, u] of map) if (u === uri) return id;
+  return undefined;
+}

package/src/views/DatasetView.vue

@@ -331,6 +331,10 @@ function clearSection() {
         <router-link :to="{ name: 'about', params: { registerId } }" class="badge badge-purple hover:opacity-80 transition-opacity">
           {{ t('nav.about') }}
         </router-link>
+        <router-link v-if="manifest.sourceCount" :to="{ name: 'sources', params: { registerId } }" class="badge badge-gray hover:opacity-80 transition-opacity">
+          {{ manifest.sourceCount }} {{ t('dataset.sources') }}
+        </router-link>
+        <span v-if="manifest.relationshipCount" class="badge badge-yellow">{{ manifest.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
       </div>
     </div>
 

package/src/views/SourcesView.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useDatasetLoader } from '../composables/use-dataset-loader';
+import { useDsStyle } from '../utils/dataset-style';
+import { useI18n } from '../i18n';
+
+const props = defineProps<{ registerId?: string }>();
+
+const store = useVocabularyStore();
+const { getColor } = useDsStyle();
+const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
+const { t } = useI18n();
+
+const manifest = computed(() => store.manifests.get(resolvedId.value));
+
+interface SourceEntry {
+  ref: string;
+  types: string[];
+  conceptCount: number;
+  conceptIds: string[];
+}
+
+const stats = ref<{ sources: SourceEntry[]; sourceCount: number; relationshipCount: number; relationshipTypes: Record<string, number> } | null>(null);
+const expandedSource = ref<string | null>(null);
+const filterText = ref('');
+
+async function loadStats() {
+  if (!resolvedId.value) return;
+  const base = import.meta.env.BASE_URL;
+  try {
+    const resp = await fetch(`${base}data/${resolvedId.value}/stats.json`);
+    if (resp.ok) {
+      stats.value = await resp.json();
+    }
+  } catch (e) {
+    console.warn('Failed to load stats:', e);
+  }
+}
+
+watch(() => resolvedId.value, () => { loadStats(); }, { immediate: true });
+
+const filteredSources = computed(() => {
+  if (!stats.value?.sources) return [];
+  const q = filterText.value.toLowerCase().trim();
+  if (!q) return stats.value.sources;
+  return stats.value.sources.filter(s =>
+    s.ref.toLowerCase().includes(q) ||
+    s.types.some(t => t.toLowerCase().includes(q))
+  );
+});
+
+function sourceTypeBadge(type: string): string {
+  if (type === 'authoritative') return 'badge-green';
+  if (type === 'lineage') return 'badge-yellow';
+  return 'badge-gray';
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto">
+    <div v-if="loading" class="flex items-center justify-center py-20">
+      <div class="skeleton h-8 w-64"></div>
+    </div>
+
+    <div v-else-if="localError" class="card p-8 text-center">
+      <p class="text-red-600">{{ localError }}</p>
+    </div>
+
+    <template v-else-if="manifest">
+      <div class="mb-6">
+        <div class="text-xs text-ink-400 mb-2">
+          <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-blue-600">{{ manifest.title }}</router-link>
+          <span class="mx-1">›</span>
+          <span>{{ t('nav.sources') }}</span>
+        </div>
+        <h1 class="font-serif text-3xl text-ink-800 dark:text-ink-100">{{ t('nav.sources') }}</h1>
+        <p class="text-ink-400 mt-1" v-if="stats">{{ stats.sourceCount }} {{ t('dataset.sources') }} · {{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</p>
+      </div>
+
+      <div v-if="!stats" class="card p-8 text-center text-ink-400">
+        Loading sources…
+      </div>
+
+      <template v-else>
+        <div class="card p-3 mb-4">
+          <input
+            v-model="filterText"
+            type="text"
+            :placeholder="'Filter sources...'"
+            class="w-full px-3 py-2 text-sm border border-ink-100 dark:border-ink-700 rounded-lg bg-surface-raised dark:bg-ink-800 text-ink-700 dark:text-ink-200 focus:outline-none focus:border-blue-400"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <div v-for="src in filteredSources" :key="src.ref" class="card overflow-hidden">
+            <button
+              class="w-full text-left p-4 flex items-center gap-3 hover:bg-ink-50/50 dark:hover:bg-ink-800/30 transition-colors"
+              @click="expandedSource = expandedSource === src.ref ? null : src.ref"
+            >
+              <span
+                class="w-3 h-3 rounded-full flex-shrink-0"
+                :style="{ backgroundColor: getColor(resolvedId) }"
+              ></span>
+              <div class="flex-1 min-w-0">
+                <div class="font-medium text-ink-800 dark:text-ink-100 truncate">{{ src.ref }}</div>
+                <div class="flex items-center gap-1.5 mt-1">
+                  <span v-for="tp in src.types" :key="tp" class="badge text-[9px]" :class="sourceTypeBadge(tp)">{{ tp }}</span>
+                  <span class="text-xs text-ink-400">{{ src.conceptCount }} {{ t('dataset.concepts') }}</span>
+                </div>
+              </div>
+              <svg class="w-4 h-4 text-ink-300 transition-transform flex-shrink-0" :class="{ 'rotate-180': expandedSource === src.ref }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </button>
+
+            <div v-if="expandedSource === src.ref" class="border-t border-ink-100/60 dark:border-ink-700/40 p-4">
+              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1">
+                <router-link
+                  v-for="cid in src.conceptIds"
+                  :key="cid"
+                  :to="{ name: 'concept', params: { registerId, conceptId: cid } }"
+                  class="block px-2 py-1 rounded text-sm text-ink-600 dark:text-ink-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+                >
+                  <code class="text-xs text-ink-400 font-mono mr-1">{{ cid }}</code>
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>

package/src/views/StatsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
@@ -15,51 +15,37 @@ const { t } = useI18n();
 
 const manifest = computed(() => store.manifests.get(resolvedId.value));
 
-interface LangStat {
-  lang: string;
-  terms: number;
-  definitions: number;
-}
+interface LangStat { lang: string; terms: number; definitions: number; }
 
-const stats = computed(() => {
+const langStats = computed(() => {
   const m = manifest.value;
   if (!m) return { langs: [], total: 0 };
-
-  // Scan the index for actual language coverage
   const adapter = store.datasets.get(resolvedId.value);
   const conceptCounts: Record<string, number> = {};
-
   if (adapter) {
-    const concepts = adapter.getConcepts();
-    for (const c of concepts) {
+    for (const c of adapter.getConcepts()) {
       if (!c) continue;
       for (const lang of Object.keys(c.designations)) {
         conceptCounts[lang] = (conceptCounts[lang] || 0) + 1;
       }
     }
   }
-
-  // Merge with manifest languageStats (for definition counts)
   const ls = m.languageStats || {};
   const allLangs = new Set([...Object.keys(conceptCounts), ...m.languages]);
-
   const langs: LangStat[] = [...allLangs].map(lang => ({
     lang,
     terms: ls[lang]?.terms ?? conceptCounts[lang] ?? 0,
     definitions: ls[lang]?.definitions ?? conceptCounts[lang] ?? 0,
   }));
-
-  // Sort: eng first, then by term count descending
   langs.sort((a, b) => {
     if (a.lang === 'eng') return -1;
     if (b.lang === 'eng') return 1;
     return b.terms - a.terms;
   });
-
   return { langs, total: m.conceptCount };
 });
 
-const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms), 1));
+const maxTerms = computed(() => Math.max(...langStats.value.langs.map(l => l.terms), 1));
 
 function coverageColor(ratio: number): string {
   if (ratio >= 0.8) return 'bg-emerald-500';
@@ -67,11 +53,49 @@ function coverageColor(ratio: number): string {
   if (ratio >= 0.25) return 'bg-amber-500';
   return 'bg-red-400';
 }
+
+interface StatsData {
+  sourceCount: number;
+  sources: Array<{ ref: string; types: string[]; conceptCount: number }>;
+  relationshipCount: number;
+  relationshipTypes: Record<string, number>;
+}
+
+const statsData = ref<StatsData | null>(null);
+
+async function loadStats() {
+  if (!resolvedId.value) return;
+  const base = import.meta.env.BASE_URL;
+  try {
+    const resp = await fetch(`${base}data/${resolvedId.value}/stats.json`);
+    if (resp.ok) statsData.value = await resp.json();
+  } catch {}
+}
+
+watch(() => resolvedId.value, () => { loadStats(); }, { immediate: true });
+
+const relEntries = computed(() => {
+  if (!statsData.value?.relationshipTypes) return [];
+  return Object.entries(statsData.value.relationshipTypes)
+    .sort(([, a], [, b]) => b - a);
+});
+
+const maxRel = computed(() => Math.max(...relEntries.value.map(([, n]) => n), 1));
+
+const topSources = computed(() => {
+  if (!statsData.value?.sources) return [];
+  return statsData.value.sources.slice(0, 10);
+});
+
+function sourceTypeBadge(type: string): string {
+  if (type === 'authoritative') return 'badge-green';
+  if (type === 'lineage') return 'badge-yellow';
+  return 'badge-gray';
+}
 </script>
 
 <template>
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <!-- Breadcrumb -->
     <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
       <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
@@ -84,9 +108,7 @@ function coverageColor(ratio: number): string {
       <div class="animate-pulse space-y-6">
         <div class="h-8 bg-ink-100 rounded w-32"></div>
         <div class="h-4 bg-ink-100 rounded w-64"></div>
-        <div class="card overflow-hidden">
-          <div class="h-80 bg-ink-50"></div>
-        </div>
+        <div class="card overflow-hidden"><div class="h-80 bg-ink-50"></div></div>
       </div>
     </template>
     <template v-else-if="localError">
@@ -99,46 +121,83 @@ function coverageColor(ratio: number): string {
     <template v-else-if="manifest">
       <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ t('stats.title') }}</h1>
       <p class="text-ink-400 mb-8">
-        {{ t('stats.summary', { count: stats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
+        {{ t('stats.summary', { count: langStats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
       </p>
 
-      <!-- Language stats table -->
-      <div class="card -mx-4 sm:mx-0 overflow-x-auto">
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-ink-100/60 bg-ink-50">
-              <th class="text-left px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.language') }}</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.terms') }}</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.definitions') }}</th>
-              <th class="px-5 py-3 text-ink-600 font-medium w-40"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="s in stats.langs" :key="s.lang" class="border-b border-ink-50 last:border-0">
-              <td class="px-5 py-3">
-                <div class="flex items-center gap-2">
-                  <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(s.lang) }}</span>
-                  <span class="font-medium text-ink-800">{{ langName(s.lang) }}</span>
-                  <span class="text-ink-300 text-xs">({{ s.lang }})</span>
-                </div>
-              </td>
-              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.terms.toLocaleString() }}</td>
-              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.definitions.toLocaleString() }}</td>
-              <td class="px-5 py-3">
-                <div class="flex items-center gap-2">
-                  <div class="h-2 rounded-full bg-ink-50 overflow-hidden flex-1">
-                    <div
-                      class="h-full rounded-full transition-all duration-500"
-                      :class="coverageColor(s.terms / maxTerms)"
-                      :style="{ width: (s.terms / maxTerms * 100) + '%' }"
-                    ></div>
-                  </div>
-                  <span class="text-xs text-ink-300 w-10 text-right tabular-nums">{{ Math.round(s.terms / maxTerms * 100) }}%</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <div v-if="statsData" class="flex flex-wrap gap-2 mb-8">
+        <span class="badge badge-purple">{{ statsData.sourceCount }} {{ t('dataset.sources') }}</span>
+        <span class="badge badge-yellow">{{ statsData.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div>
+          <h2 class="section-label mb-3">{{ t('stats.language') }}</h2>
+          <div class="card overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-ink-100/60 bg-ink-50">
+                  <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.language') }}</th>
+                  <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.terms') }}</th>
+                  <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.definitions') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="s in langStats.langs" :key="s.lang" class="border-b border-ink-50 last:border-0">
+                  <td class="px-4 py-2.5">
+                    <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(s.lang) }}</span>
+                    <span class="ml-2 font-medium text-ink-800">{{ langName(s.lang) }}</span>
+                  </td>
+                  <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ s.terms.toLocaleString() }}</td>
+                  <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ s.definitions.toLocaleString() }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div v-if="relEntries.length">
+          <h2 class="section-label mb-3">{{ t('dataset.relationships') }}</h2>
+          <div class="card p-4 space-y-3">
+            <div v-for="[type, count] in relEntries" :key="type">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-sm font-medium text-ink-700">{{ type }}</span>
+                <span class="text-sm font-mono text-ink-500">{{ count.toLocaleString() }}</span>
+              </div>
+              <div class="h-2 rounded-full bg-ink-50 overflow-hidden">
+                <div class="h-full rounded-full bg-blue-500 transition-all duration-500" :style="{ width: (count / maxRel * 100) + '%' }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="topSources.length" class="mt-8">
+        <div class="flex items-center justify-between mb-3">
+          <h2 class="section-label">{{ t('dataset.sources') }}</h2>
+          <router-link :to="{ name: 'sources', params: { registerId: resolvedId } }" class="text-xs text-blue-600 hover:underline">
+            View all {{ statsData?.sourceCount }} →
+          </router-link>
+        </div>
+        <div class="card overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="border-b border-ink-100/60 bg-ink-50">
+                <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Source</th>
+                <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Type</th>
+                <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Concepts</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="src in topSources" :key="src.ref" class="border-b border-ink-50 last:border-0">
+                <td class="px-4 py-2.5 font-medium text-ink-800">{{ src.ref }}</td>
+                <td class="px-4 py-2.5">
+                  <span v-for="tp in src.types" :key="tp" class="badge text-[9px] mr-1" :class="sourceTypeBadge(tp)">{{ tp }}</span>
+                </td>
+                <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ src.conceptCount.toLocaleString() }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </template>
   </div>