add grading templates answers

src/lib/DatasetViewer.svelte

@@ -4,7 +4,11 @@
     fetchDatasetConfigYaml,
     type DatasetConfigYaml,
   } from "./huggingfaceApi";
-  import type { TermDefinition, EquivalencyScore } from "./types";
+  import type {
+    TermDefinition,
+    EquivalencyScore,
+    GradingTemplateEntry,
+  } from "./types";
   import { marked } from "marked";
   import { config, getDatasetName } from "./config";
 
@@ -12,6 +16,7 @@
   const availableJurisdictions = config.jurisdictions;
   const dataset = getDatasetName("structured-answers");
   const scoresDataset = getDatasetName("equivalency-scores");
+  const gradingTemplatesDataset = getDatasetName("grading-templates");
   const directTranslations = config.directTranslations;
   const equivalencyScoreLabels = config.equivalencyScoreLabels;
 
@@ -33,6 +38,8 @@
   let selectedTerm1 = $state<string | null>(null);
   let selectedTerm2 = $state<string | null>(null);
   let datasetConfig = $state<DatasetConfigYaml | null>(null);
+  let gradingTemplates_j1 = $state<GradingTemplateEntry[]>([]);
+  let gradingTemplates_j2 = $state<GradingTemplateEntry[]>([]);
 
   // Track previous selected terms for detecting user-initiated changes (loop prevention)
   let prevSelectedTerm1 = $state<string | null>(null);
@@ -42,6 +49,7 @@
   let loading = $state(false);
   let error = $state("");
   let hasLoaded = $state(false);
+  let loadingDetails = $state(false);
   let selectedCategory = $state<string>("All");
 
   // Track previous values to detect changes
@@ -77,6 +85,9 @@
     prevSelectedTerm2 = null;
     hasLoaded = false;
 
+    // Start loading grading templates/details concurrently to reduce wait time
+    const detailsPromise = loadDetails();
+
     try {
       // Determine the config name for equivalency scores (alphabetically sorted)
       const sortedJurisdictions = [jurisdiction1, jurisdiction2].sort();
@@ -97,10 +108,6 @@
       );
       equivalencyScores = scoresRows as EquivalencyScore[];
 
-      console.log("Jurisdiction 1 data:", data1);
-      console.log("Jurisdiction 2 data:", data2);
-      console.log("Equivalency scores:", equivalencyScores);
-
       hasLoaded = true;
 
       // Fetch config.yaml for this jurisdiction pair
@@ -147,6 +154,41 @@
       console.error("Jurisdiction loading error:", e);
     } finally {
       loading = false;
+      // Ensure details loading finishes (any error already handled in loadDetails)
+      try {
+        await detailsPromise;
+      } catch (e) {
+        console.warn("loadDetails failed:", e);
+      }
+    }
+  }
+
+  async function loadDetails() {
+    loadingDetails = true;
+    try {
+      const [rows_j1, rows_j2] = await Promise.all([
+        fetchAllRows(
+          gradingTemplatesDataset,
+          jurisdiction1,
+          "train",
+          undefined
+        ),
+        fetchAllRows(
+          gradingTemplatesDataset,
+          jurisdiction2,
+          "train",
+          undefined
+        ),
+      ]);
+      gradingTemplates_j1 = rows_j1 as GradingTemplateEntry[];
+      gradingTemplates_j2 = rows_j2 as GradingTemplateEntry[];
+    } catch (e) {
+      // Non-fatal: templates may not exist for all jurisdictions
+      gradingTemplates_j1 = [];
+      gradingTemplates_j2 = [];
+      console.warn("Failed to load grading templates:", e);
+    } finally {
+      loadingDetails = false;
     }
   }
 
@@ -162,7 +204,8 @@
     return found?.definition || "";
   }
 
-  function normalizeTermForComparison(term: string): string {
+  function normalizeTermForComparison(term: string | undefined): string {
+    if (term === undefined) return "";
     // Replace underscores with spaces and normalize whitespace for comparison
     return term.replace(/_/g, " ").replace(/\s+/g, " ").trim().toLowerCase();
   }
@@ -303,6 +346,67 @@
     if (selectedCategory === "All") return score.comparisons;
     return score.comparisons.filter((c) => c.category === selectedCategory);
   }
+
+  // Find a grading template entry matching a comparison's category/subcategory and optional term
+  function findGradingTemplate(
+    category: string,
+    subcategory: string | undefined,
+    templates: GradingTemplateEntry[],
+    term?: string
+  ): GradingTemplateEntry | null {
+    if (!templates || templates.length === 0) return null;
+
+    const normalizedTarget = term ? normalizeTermForComparison(term) : null;
+
+    return (
+      templates.find((t) => {
+        const catMatch =
+          t.category === category &&
+          (t.subcategory || "") === (subcategory || "");
+        if (!catMatch) return false;
+        if (!normalizedTarget) return true;
+        return normalizeTermForComparison(t.term) === normalizedTarget;
+      }) || null
+    );
+  }
+
+  // Helper getters for templates + question text to avoid {@const} in template
+  function getTemplateJ1(comparison: {
+    category: string;
+    subcategory?: string;
+    term_j1?: string;
+  }) {
+    return findGradingTemplate(
+      comparison.category,
+      comparison.subcategory,
+      gradingTemplates_j1,
+      comparison.term_j1
+    );
+  }
+  function getTemplateJ2(comparison: {
+    category: string;
+    subcategory?: string;
+    term_j2?: string;
+  }) {
+    return findGradingTemplate(
+      comparison.category,
+      comparison.subcategory,
+      gradingTemplates_j2,
+      comparison.term_j2
+    );
+  }
+  function getQuestionText(comparison: {
+    category: string;
+    subcategory?: string;
+    term_j1?: string;
+    term_j2?: string;
+  }) {
+    return (
+      getTemplateJ1(comparison)?.question ||
+      getTemplateJ2(comparison)?.question ||
+      ""
+    );
+  }
 </script>
 
 <div class="jurisdiction-comparison">
@@ -511,67 +615,111 @@
             <div class="comparisons-section">
               <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}
+              {#if loadingDetails}
+                <div class="details-loading">
+                  <div class="spinner" aria-hidden="true"></div>
+                  <div class="spinner-label">Loading details…</div>
+                </div>
+              {:else}
+                <!-- Category Filter Pills -->
+                {#if categories.length > 0}
+                  <div class="category-filters">
                     <button
                       class="filter-pill"
-                      class:active={selectedCategory === category}
-                      onclick={() => (selectedCategory = category)}
+                      class:active={selectedCategory === "All"}
+                      onclick={() => (selectedCategory = "All")}
                     >
-                      {formatCategoryName(category)} ({count})
+                      All ({score.comparisons.length})
                     </button>
-                  {/each}
-                </div>
-              {/if}
-
-              <div class="comparisons-list">
-                {#each filteredComparisons as comparison}
-                  <div class="comparison-item">
-                    <div class="comparison-header">
-                      <span class="comparison-category">
-                        {formatCategoryName(comparison.category)}
-                      </span>
-                      {#if comparison.subcategory}
-                        <span class="comparison-subcategory">
-                          › {formatCategoryName(comparison.subcategory)}
+                    {#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 filteredComparisons as comparison}
+                    <div class="comparison-item">
+                      <div class="comparison-header">
+                        <span class="comparison-category">
+                          {formatCategoryName(comparison.category)}
                         </span>
+                        {#if comparison.subcategory}
+                          <span class="comparison-subcategory">
+                            › {formatCategoryName(comparison.subcategory)}
+                          </span>
+                        {/if}
+                        <div class="category-meta">
+                          <span class="category-weight"
+                            >Weight: {comparison.weight.toFixed(2)}</span
+                          >
+                          <span class="category-weighted"
+                            >Weighted Score: {comparison.weighted_similarity_score.toFixed(
+                              2
+                            )}</span
+                          >
+                        </div>
+                        <span
+                          class={"comparison-score " +
+                            getScoreClass(comparison.similarity_score)}
+                          >{comparison.similarity_score.toFixed(2)}</span
+                        >
+                      </div>
+
+                      {#if getQuestionText(comparison)}
+                        <div class="detail-question-single">
+                          {getQuestionText(comparison)}
+                        </div>
                       {/if}
-                      <span
-                        class={"comparison-score " +
-                          getScoreClass(comparison.similarity_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
-                      >
-                    </div>
-                    {#if comparison.reasoning}
-                      <div class="comparison-reasoning">
-                        {comparison.reasoning}
+
+                      <div class="comparison-details">
+                        <div class="detail-column left">
+                          {#if getTemplateJ1(comparison)}
+                            <div class="detail-term">
+                              {getTemplateJ1(comparison)?.term}
+                            </div>
+                            <div class="detail-answer">
+                              {getTemplateJ1(comparison)?.answer}
+                            </div>
+                          {:else}
+                            <div class="detail-empty">—</div>
+                          {/if}
+                        </div>
+
+                        <div class="detail-column center">
+                          {#if comparison.reasoning}
+                            <div class="comparison-reasoning">
+                              {comparison.reasoning}
+                            </div>
+                          {/if}
+                        </div>
+
+                        <div class="detail-column right">
+                          {#if getTemplateJ2(comparison)}
+                            <div class="detail-term">
+                              {getTemplateJ2(comparison)?.term}
+                            </div>
+                            <div class="detail-answer">
+                              {getTemplateJ2(comparison)?.answer}
+                            </div>
+                          {:else}
+                            <div class="detail-empty">—</div>
+                          {/if}
+                        </div>
                       </div>
-                    {/if}
-                  </div>
-                {/each}
-              </div>
+                    </div>
+                  {/each}
+                </div>
+              {/if}
             </div>
           {/if}
         </div>
@@ -975,6 +1123,54 @@
     flex-wrap: wrap;
   }
 
+  .comparison-details {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1rem;
+    margin-top: 0.75rem;
+    align-items: start;
+  }
+
+  .detail-column {
+    background: #fff;
+    padding: 0.75rem;
+    border-radius: 6px;
+    border: 1px solid #f0f0f0;
+    min-height: 70px;
+  }
+
+  .detail-column.left {
+    border-left: 3px solid #646cff;
+  }
+  .detail-column.right {
+    border-right: 3px solid #646cff;
+  }
+
+  .detail-term {
+    font-weight: 600;
+    margin-bottom: 0.35rem;
+    color: #333;
+  }
+  .detail-question {
+    font-size: 0.95rem;
+    color: #555;
+    margin-bottom: 0.5rem;
+  }
+  .detail-answer {
+    font-size: 0.9rem;
+    color: #444;
+  }
+  .detail-empty {
+    color: #888;
+    font-style: italic;
+  }
+
+  @media (max-width: 900px) {
+    .comparison-details {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .comparison-category {
     font-weight: 600;
     color: #646cff;
@@ -987,13 +1183,29 @@
   }
 
   .comparison-score {
-    margin-left: auto;
     padding: 0.25rem 0.75rem;
     border-radius: 12px;
     font-weight: 600;
     font-size: 0.9rem;
   }
 
+  .category-meta {
+    margin-left: auto;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    color: #666;
+    font-size: 0.9rem;
+  }
+  .category-weight,
+  .category-weighted {
+    background: #f0f0f0;
+    padding: 0.15rem 0.5rem;
+    border-radius: 6px;
+    font-weight: 600;
+    color: #444;
+  }
+
   /* Score color variants */
   .comparison-score.score-high {
     background: #1a7f37;
@@ -1117,7 +1329,7 @@
   .dataset-model-info.subtle {
     background: none;
     border: none;
-    padding: 0.25rem 0;
+    padding: 2rem 0;
     margin: 0 0 0.5rem 0;
     max-width: 100%;
     color: #888;
@@ -1175,4 +1387,30 @@
     border-bottom: 1px solid #555;
     padding-bottom: 0.4rem;
   }
+  /* Details loading spinner */
+  .details-loading {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 0;
+    justify-content: center;
+    color: #666;
+  }
+  .spinner {
+    width: 28px;
+    height: 28px;
+    border: 4px solid #e6e6ff;
+    border-top-color: #646cff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  .spinner-label {
+    font-size: 0.95rem;
+    color: #444;
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
 </style>

src/lib/config.ts

@@ -52,7 +52,7 @@ export const config = {
 
 // Helper to build dataset names
 export function getDatasetName(
-  datasetType: "structured-answers" | "equivalency-scores"
+  datasetType: "structured-answers" | "equivalency-scores" | "grading-templates"
 ): string {
   return `${config.api.huggingfaceOrg}/${datasetType}`;
 }

src/lib/types.ts

@@ -97,3 +97,11 @@ export interface EquivalencyScore {
   comparative_law_note: string;
   comparisons?: Comparison[];
 }
+
+export interface GradingTemplateEntry {
+  term: string;
+  category: string;
+  subcategory: string;
+  question: string;
+  answer: string;
+}