add score string + legend

src/lib/DatasetViewer.svelte

@@ -9,6 +9,7 @@
   const dataset = getDatasetName("structured-answers");
   const scoresDataset = getDatasetName("equivalency-scores");
   const directTranslations = config.directTranslations;
+  const equivalencyScoreLabels = config.equivalencyScoreLabels;
 
   // Create bidirectional lookup map (both English->Swedish and Swedish->English)
   const translationMap = new Map<string, string>();
@@ -230,6 +231,18 @@
     return Array.from(categories).sort();
   }
 
+  // Get label for equivalency score based on configured ranges
+  function getScoreLabel(scoreValue: number): string {
+    const match = equivalencyScoreLabels.find(
+      (range) => scoreValue >= range.min && scoreValue < range.max
+    );
+    // Handle edge case for max score (5.0)
+    if (!match && scoreValue >= 5.0) {
+      return equivalencyScoreLabels[equivalencyScoreLabels.length - 1].label;
+    }
+    return match?.label || "";
+  }
+
   // Filter comparisons by selected category
   function getFilteredComparisons(score: EquivalencyScore | null) {
     if (!score || !score.comparisons) return [];
@@ -362,8 +375,42 @@
         <div class="similarity-score">
           <h3>Equivalency Score</h3>
           <div class="score-display">
+            <span class="score-label">
+              {getScoreLabel(score.aggregated_similarity_score)}
+              <!-- Info icon with tooltip -->
+              <span class="info-tooltip">
+                <svg
+                  class="info-icon"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <line x1="12" y1="16" x2="12" y2="12"></line>
+                  <line x1="12" y1="8" x2="12.01" y2="8"></line>
+                </svg>
+                <span class="tooltip-content">
+                  <strong>Score Legend (1 – 5)</strong>
+                  {#each equivalencyScoreLabels as range}
+                    <span class="tooltip-row">
+                      <span class="tooltip-range"
+                        >{range.min.toFixed(2)}–{range.max.toFixed(2)}</span
+                      >
+                      <span>{range.label}</span>
+                    </span>
+                  {/each}
+                </span>
+              </span>
+            </span>
             <strong>{score.aggregated_similarity_score.toFixed(2)}</strong>
           </div>
+
           {#if score.comparative_law_note}
             <div class="comparative-note">
               <div class="markdown-content">
@@ -621,6 +668,16 @@
     text-align: center;
   }
 
+  .score-display .score-label {
+    display: block;
+    font-size: 1.1rem;
+    color: #555;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
   .score-display strong {
     display: block;
     font-size: 3rem;
@@ -628,6 +685,80 @@
     font-weight: 600;
   }
 
+  /* Info Tooltip Styles */
+  .info-tooltip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 0.35rem;
+    cursor: help;
+  }
+
+  .info-icon {
+    color: #888;
+    vertical-align: middle;
+    transition: color 0.2s;
+  }
+
+  .info-tooltip:hover .info-icon {
+    color: #646cff;
+  }
+
+  .tooltip-content {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #333;
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    z-index: 100;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    text-transform: none;
+    letter-spacing: normal;
+    text-align: left;
+  }
+
+  .tooltip-content::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: #333;
+  }
+
+  .info-tooltip:hover .tooltip-content {
+    display: block;
+  }
+
+  .tooltip-content strong {
+    display: block;
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+    color: #fff;
+    border-bottom: 1px solid #555;
+    padding-bottom: 0.4rem;
+  }
+
+  .tooltip-row {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.2rem 0;
+    font-weight: normal;
+  }
+
+  .tooltip-range {
+    font-family: monospace;
+    color: #a5a8ff;
+    min-width: 70px;
+  }
+
   .comparative-note {
     margin-top: 1.5rem;
     padding-top: 1.5rem;

src/lib/config.ts

@@ -38,6 +38,16 @@ export const config = {
     "ultimate facts": "rättsfakta",
     "apparent authority": "ställningsfullmakt",
   },
+
+  // Equivalency score labels based on score ranges
+  // Score is on a scale of 1-5
+  equivalencyScoreLabels: [
+    { min: 1.0, max: 1.75, label: "Very Low Equivalency" },
+    { min: 1.75, max: 2.5, label: "Low Equivalency" },
+    { min: 2.5, max: 3.25, label: "Medium Equivalency" },
+    { min: 3.25, max: 4.0, label: "High Equivalency" },
+    { min: 4.0, max: 5.0, label: "Very High Equivalency" },
+  ],
 } as const;
 
 // Helper to build dataset names