formatting + some styling

src/lib/DatasetViewer.svelte

@@ -1,34 +1,35 @@
 <script lang="ts">
-  import { fetchAllRows } from './huggingfaceApi';
-  import type { TermDefinition, EquivalencyScore } from './types';
-  import { marked } from 'marked';
+  import { fetchAllRows } from "./huggingfaceApi";
+  import type { TermDefinition, EquivalencyScore } from "./types";
+  import { marked } from "marked";
 
   // Available jurisdictions
   const availableJurisdictions = [
-    { code: 'en-us', label: 'English (US)' },
-    { code: 'sv-se', label: 'Swedish (SE)' }
+    { code: "en-us", label: "English (US)" },
+    { code: "sv-se", label: "Swedish (SE)" },
   ];
 
   // Hardcoded configuration
-  const dataset = import.meta.env.VITE_HUGGINGFACE_ORG + '/structured-answers';
-  const scoresDataset = import.meta.env.VITE_HUGGINGFACE_ORG + '/equivalency-scores';
-  
+  const dataset = import.meta.env.VITE_HUGGINGFACE_ORG + "/structured-answers";
+  const scoresDataset =
+    import.meta.env.VITE_HUGGINGFACE_ORG + "/equivalency-scores";
+
   // Direct translations dictionary (English -> Swedish)
   const directTranslations: Record<string, string> = {
     "proximate cause": "adekvat kausalitet",
     "articles of association": "bolagsordning",
-    "bylaws": "bolagsordning",
-    "condominium": "bostadrätt",
+    bylaws: "bolagsordning",
+    condominium: "bostadrätt",
     "cooperative apartment": "bostadrätt",
     "company name": "firma",
-    "company": "firma",
+    company: "firma",
     "dispose of": "förfoga över",
     "rights of first refusal": "hembud",
     "implied consent": "konkludent handlande",
     "aiding and abetting": "medverkande",
     "trading prohibition": "näringsförbud",
     "affiliated company": "närstående bolag",
-    "molestation": "ofredande",
+    molestation: "ofredande",
     "dismiss on the merits": "ogilla",
     "the rule of contra proferentem": "oklarhetsregeln",
     "joinder of parties": "processgemenskap",
@@ -42,32 +43,33 @@
     translationMap.set(en.toLowerCase(), sv.toLowerCase());
     translationMap.set(sv.toLowerCase(), en.toLowerCase());
   });
-  
+
   // Form inputs
-  let jurisdiction1 = $state('en-us');
-  let jurisdiction2 = $state('sv-se');
-  
+  let jurisdiction1 = $state("en-us");
+  let jurisdiction2 = $state("sv-se");
+
   // Data state
   let data1 = $state<TermDefinition[]>([]);
   let data2 = $state<TermDefinition[]>([]);
   let equivalencyScores = $state<EquivalencyScore[]>([]);
   let selectedTerm1 = $state<string | null>(null);
   let selectedTerm2 = $state<string | null>(null);
-  
+
   // UI state
   let loading = $state(false);
-  let error = $state('');
+  let error = $state("");
   let hasLoaded = $state(false);
+  let selectedCategory = $state<string>("All");
 
   // Track previous values to detect changes
-  let prevJurisdiction1 = $state('en-us');
-  let prevJurisdiction2 = $state('sv-se');
+  let prevJurisdiction1 = $state("en-us");
+  let prevJurisdiction2 = $state("sv-se");
 
   // Reload when jurisdictions change (but not on initial mount)
   $effect(() => {
     const j1 = jurisdiction1;
     const j2 = jurisdiction2;
-    
+
     if (hasLoaded && (j1 !== prevJurisdiction1 || j2 !== prevJurisdiction2)) {
       prevJurisdiction1 = j1;
       prevJurisdiction2 = j2;
@@ -77,12 +79,12 @@
 
   async function loadComparison() {
     if (jurisdiction1 === jurisdiction2) {
-      error = 'Please select two different jurisdictions';
+      error = "Please select two different jurisdictions";
       return;
     }
 
     loading = true;
-    error = '';
+    error = "";
     data1 = [];
     data2 = [];
     equivalencyScores = [];
@@ -97,50 +99,56 @@
 
       // Fetch both jurisdictions and equivalency scores in parallel
       const [rows1, rows2, scoresRows] = await Promise.all([
-        fetchAllRows(dataset, jurisdiction1, 'train', undefined),
-        fetchAllRows(dataset, jurisdiction2, 'train', undefined),
-        fetchAllRows(scoresDataset, scoresConfig, 'train', undefined)
+        fetchAllRows(dataset, jurisdiction1, "train", undefined),
+        fetchAllRows(dataset, jurisdiction2, "train", undefined),
+        fetchAllRows(scoresDataset, scoresConfig, "train", undefined),
       ]);
 
-      data1 = (rows1 as TermDefinition[]).sort((a, b) => a.term.localeCompare(b.term));
-      data2 = (rows2 as TermDefinition[]).sort((a, b) => a.term.localeCompare(b.term));
+      data1 = (rows1 as TermDefinition[]).sort((a, b) =>
+        a.term.localeCompare(b.term)
+      );
+      data2 = (rows2 as TermDefinition[]).sort((a, b) =>
+        a.term.localeCompare(b.term)
+      );
       equivalencyScores = scoresRows as EquivalencyScore[];
-      
-      console.log('Jurisdiction 1 data:', data1);
-      console.log('Jurisdiction 2 data:', data2);
-      console.log('Equivalency scores:', equivalencyScores);
-      
+
+      console.log("Jurisdiction 1 data:", data1);
+      console.log("Jurisdiction 2 data:", data2);
+      console.log("Equivalency scores:", equivalencyScores);
+
       hasLoaded = true;
 
       // Auto-select first term if available
       if (data1.length > 0) selectedTerm1 = data1[0].term;
       if (data2.length > 0) selectedTerm2 = data2[0].term;
-
     } catch (e) {
-      error = e instanceof Error ? e.message : 'Failed to load jurisdictions';
-      console.error('Jurisdiction loading error:', e);
+      error = e instanceof Error ? e.message : "Failed to load jurisdictions";
+      console.error("Jurisdiction loading error:", e);
     } finally {
       loading = false;
     }
   }
 
   function getSelectedDefinition1(): string {
-    if (!selectedTerm1) return '';
-    const found = data1.find(item => item.term === selectedTerm1);
-    return found?.definition || '';
+    if (!selectedTerm1) return "";
+    const found = data1.find((item) => item.term === selectedTerm1);
+    return found?.definition || "";
   }
 
   function getSelectedDefinition2(): string {
-    if (!selectedTerm2) return '';
-    const found = data2.find(item => item.term === selectedTerm2);
-    return found?.definition || '';
+    if (!selectedTerm2) return "";
+    const found = data2.find((item) => item.term === selectedTerm2);
+    return found?.definition || "";
   }
 
   function normalizeTermForComparison(term: string): string {
     // Replace underscores with spaces and normalize whitespace for comparison
-    return term.replace(/_/g, ' ').replace(/\s+/g, ' ').trim().toLowerCase();
+    return term.replace(/_/g, " ").replace(/\s+/g, " ").trim().toLowerCase();
+  }
+  function formatCategoryName(name: string): string {
+    // Replace underscores with spaces for display
+    return name.replace(/_/g, " ");
   }
-
   // Get direct translation equivalent for a term
   function getDirectTranslation(term: string): string | null {
     const normalized = normalizeTermForComparison(term);
@@ -148,12 +156,17 @@
   }
 
   // Check if a term should be highlighted based on the selected term in the other jurisdiction
-  function shouldHighlightTerm(term: string, selectedInOtherJurisdiction: string | null): boolean {
+  function shouldHighlightTerm(
+    term: string,
+    selectedInOtherJurisdiction: string | null
+  ): boolean {
     if (!selectedInOtherJurisdiction) return false;
-    
-    const equivalentOfSelected = getDirectTranslation(selectedInOtherJurisdiction);
+
+    const equivalentOfSelected = getDirectTranslation(
+      selectedInOtherJurisdiction
+    );
     if (!equivalentOfSelected) return false;
-    
+
     const normalizedTerm = normalizeTermForComparison(term);
     return normalizedTerm === equivalentOfSelected;
   }
@@ -168,28 +181,47 @@
     const normalizedTerm2 = normalizeTermForComparison(selectedTerm2);
 
     // Look for the score in both directions, comparing normalized terms
-    const score = equivalencyScores.find(s => {
+    const score = equivalencyScores.find((s) => {
       const normalizedJ1 = normalizeTermForComparison(s.term_j1);
       const normalizedJ2 = normalizeTermForComparison(s.term_j2);
-      
+
       return (
-        (normalizedJ1 === normalizedTerm1 && normalizedJ2 === normalizedTerm2) ||
+        (normalizedJ1 === normalizedTerm1 &&
+          normalizedJ2 === normalizedTerm2) ||
         (normalizedJ1 === normalizedTerm2 && normalizedJ2 === normalizedTerm1)
       );
     });
 
     return score || null;
   }
+
+  // Get unique categories from comparisons
+  function getUniqueCategories(score: EquivalencyScore | null): string[] {
+    if (!score || !score.comparisons) return [];
+    const categories = new Set(score.comparisons.map((c) => c.category));
+    return Array.from(categories).sort();
+  }
+
+  // Filter comparisons by selected category
+  function getFilteredComparisons(score: EquivalencyScore | null) {
+    if (!score || !score.comparisons) return [];
+    if (selectedCategory === "All") return score.comparisons;
+    return score.comparisons.filter((c) => c.category === selectedCategory);
+  }
 </script>
 
 <div class="jurisdiction-comparison">
   <h2>Jurisdiction Term Comparison</h2>
-  
+
   <div class="form">
     <div class="form-row">
       <div class="form-group">
         <label for="jurisdiction1">Jurisdiction 1:</label>
-        <select id="jurisdiction1" bind:value={jurisdiction1} disabled={loading}>
+        <select
+          id="jurisdiction1"
+          bind:value={jurisdiction1}
+          disabled={loading}
+        >
           {#each availableJurisdictions as jur}
             <option value={jur.code}>{jur.label}</option>
           {/each}
@@ -198,7 +230,11 @@
 
       <div class="form-group">
         <label for="jurisdiction2">Jurisdiction 2:</label>
-        <select id="jurisdiction2" bind:value={jurisdiction2} disabled={loading}>
+        <select
+          id="jurisdiction2"
+          bind:value={jurisdiction2}
+          disabled={loading}
+        >
           {#each availableJurisdictions as jur}
             <option value={jur.code}>{jur.label}</option>
           {/each}
@@ -208,14 +244,15 @@
 
     {#if !hasLoaded}
       <button onclick={loadComparison} disabled={loading}>
-        {loading ? 'Loading...' : 'Load Comparison'}
+        {loading ? "Loading..." : "Load Comparison"}
       </button>
     {/if}
   </div>
 
   {#if error}
     <div class="error">
-      <strong>Error:</strong> {error}
+      <strong>Error:</strong>
+      {error}
     </div>
   {/if}
 
@@ -223,17 +260,24 @@
     <div class="comparison-container">
       <!-- Jurisdiction 1 -->
       <div class="jurisdiction-column">
-        <h3>{availableJurisdictions.find(j => j.code === jurisdiction1)?.label}</h3>
+        <h3>
+          {availableJurisdictions.find((j) => j.code === jurisdiction1)?.label}
+        </h3>
         <div class="term-selector">
           <label for="term1">Select Term:</label>
           <select id="term1" bind:value={selectedTerm1}>
             {#each data1 as item}
               <option value={item.term}>
-                {shouldHighlightTerm(item.term, selectedTerm2) ? '★ ' : ''}{item.term}
+                {shouldHighlightTerm(item.term, selectedTerm2)
+                  ? "★ "
+                  : ""}{item.term}
               </option>
             {/each}
           </select>
-          <small class="translation-hint">★ = Direct translation of the term selected in the opposite jurisdiction</small>
+          <small class="translation-hint"
+            >★ = Direct translation of the term selected in the opposite
+            jurisdiction</small
+          >
         </div>
         {#if selectedTerm1}
           <div class="definition-box">
@@ -250,17 +294,24 @@
 
       <!-- Jurisdiction 2 -->
       <div class="jurisdiction-column">
-        <h3>{availableJurisdictions.find(j => j.code === jurisdiction2)?.label}</h3>
+        <h3>
+          {availableJurisdictions.find((j) => j.code === jurisdiction2)?.label}
+        </h3>
         <div class="term-selector">
           <label for="term2">Select Term:</label>
           <select id="term2" bind:value={selectedTerm2}>
             {#each data2 as item}
               <option value={item.term}>
-                {shouldHighlightTerm(item.term, selectedTerm1) ? '★ ' : ''}{item.term}
+                {shouldHighlightTerm(item.term, selectedTerm1)
+                  ? "★ "
+                  : ""}{item.term}
               </option>
             {/each}
           </select>
-          <small class="translation-hint">★ = Direct translation of the term selected in the opposite jurisdiction</small>
+          <small class="translation-hint"
+            >★ = Direct translation of the term selected in the opposite
+            jurisdiction</small
+          >
         </div>
         {#if selectedTerm2}
           <div class="definition-box">
@@ -287,33 +338,72 @@
           </div>
           {#if score.comparative_law_note}
             <div class="comparative-note">
-              <h4>Comparative Law Note</h4>
               <div class="markdown-content">
                 {@html marked(score.comparative_law_note)}
               </div>
             </div>
           {/if}
-          
+
           {#if score.comparisons && score.comparisons.length > 0}
+            {@const categories = getUniqueCategories(score)}
+            {@const filteredComparisons = getFilteredComparisons(score)}
             <div class="comparisons-section">
-              <h4>Detailed Comparisons</h4>
+              <h3>Detailed Comparisons</h3>
+
+              <!-- Category Filter Pills -->
+              {#if categories.length > 0}
+                <div class="category-filters">
+                  <button
+                    class="filter-pill"
+                    class:active={selectedCategory === "All"}
+                    onclick={() => (selectedCategory = "All")}
+                  >
+                    All ({score.comparisons.length})
+                  </button>
+                  {#each categories as category}
+                    {@const count = score.comparisons.filter(
+                      (c) => c.category === category
+                    ).length}
+                    <button
+                      class="filter-pill"
+                      class:active={selectedCategory === category}
+                      onclick={() => (selectedCategory = category)}
+                    >
+                      {formatCategoryName(category)} ({count})
+                    </button>
+                  {/each}
+                </div>
+              {/if}
+
               <div class="comparisons-list">
-                {#each score.comparisons as comparison}
+                {#each filteredComparisons as comparison}
                   <div class="comparison-item">
                     <div class="comparison-header">
-                      <span class="comparison-category">{comparison.category}</span>
+                      <span class="comparison-category">
+                        {formatCategoryName(comparison.category)}
+                      </span>
                       {#if comparison.subcategory}
-                        <span class="comparison-subcategory"> › {comparison.subcategory}</span>
+                        <span class="comparison-subcategory">
+                          › {formatCategoryName(comparison.subcategory)}
+                        </span>
                       {/if}
-                      <span class="comparison-score">{comparison.similarity_score.toFixed(2)}</span>
+                      <span class="comparison-score"
+                        >{comparison.similarity_score.toFixed(2)}</span
+                      >
                     </div>
                     <div class="comparison-meta">
-                      <span class="comparison-weight">Weight: {comparison.weight.toFixed(2)}</span>
-                      <span class="comparison-weighted-score">Weighted Score: {comparison.weighted_similarity_score.toFixed(2)}</span>
+                      <span class="comparison-weight"
+                        >Weight: {comparison.weight.toFixed(2)}</span
+                      >
+                      <span class="comparison-weighted-score"
+                        >Weighted Score: {comparison.weighted_similarity_score.toFixed(
+                          2
+                        )}</span
+                      >
                     </div>
                     {#if comparison.reasoning}
                       <div class="comparison-reasoning">
-                        <strong>Reasoning:</strong> {comparison.reasoning}
+                        {comparison.reasoning}
                       </div>
                     {/if}
                   </div>
@@ -383,7 +473,8 @@
     color: #555;
   }
 
-  input, select {
+  input,
+  select {
     width: 100%;
     padding: 0.5rem;
     border: 1px solid #ddd;
@@ -394,7 +485,8 @@
     color: #333;
   }
 
-  input:disabled, select:disabled {
+  input:disabled,
+  select:disabled {
     background: #e9e9e9;
     cursor: not-allowed;
   }
@@ -658,7 +750,7 @@
   }
 
   .comparison-subcategory {
-    color: #666;
+    color: #464444;
     font-size: 0.9rem;
   }
 
@@ -696,9 +788,49 @@
     font-size: 0.9rem;
     line-height: 1.5;
     color: #444;
+    text-align: left;
   }
 
   .comparison-reasoning strong {
     color: #333;
   }
+
+  /* Category filter pills */
+  .category-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .filter-pill {
+    background: #f0f0f0;
+    color: #555;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    width: auto;
+  }
+
+  .filter-pill:hover {
+    background: #e0e0e0;
+    border-color: #999;
+  }
+
+  .filter-pill.active {
+    background: #646cff;
+    color: white;
+    border-color: #646cff;
+    font-weight: 600;
+  }
+
+  .filter-pill.active:hover {
+    background: #535bf2;
+    border-color: #535bf2;
+  }
 </style>