Improve ICONCLASS visualization with Tufte-inspired partial match display

- Add hierarchical matching logic to detect partial code overlaps
- Redesign UI with grouped layout (Exact/Partial/No Matches)
- Add visual match depth bars showing percentage of code overlap
- Display matched pairs on same line with clear PREDICTION/GROUND TRUTH labels
- Use typography to highlight matched vs unmatched code portions
- Simplify statistics to clear format (e.g., "2 exact • 1 partial • 2 unmatched")

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

index.html

@@ -143,51 +143,131 @@
         text-transform: uppercase;
       }
 
-      .label {
-        padding: 3px 0 3px 6px;
-        margin: 2px 0;
+      /* Clean, minimal label styles following Tufte principles */
+
+      /* Match statistics */
+      .match-stats {
+        font-size: 11px;
+        color: #999;
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid #f0f0f0;
+      }
+
+      /* Tufte-inspired styles for clear match visualization */
+      .match-groups {
+        margin-top: 12px;
+      }
+
+      .match-group {
+        margin-bottom: 20px;
+      }
+
+      .group-header {
+        font-size: 10px;
+        color: #999;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 6px;
+        padding-bottom: 3px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+
+      .match-pair {
+        display: flex;
+        align-items: baseline;
+        margin: 4px 0;
         position: relative;
-        border-left: 2px solid transparent;
-        font-size: 13px;
-        line-height: 1.4;
       }
-      
-      .label:hover {
-        background: #fafafa;
+
+      .match-connection {
+        position: absolute;
+        left: 85px;
+        width: 1px;
+        height: 100%;
+        background: #e0e0e0;
       }
 
-      /* Prediction styles */
-      .prediction {
-        color: #333;
+      .iconclass-code {
+        font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+        font-size: 11px;
+        letter-spacing: 0.3px;
       }
 
-      .prediction.invalid {
+      .code-part {
+        display: inline-block;
+      }
+
+      .code-matched {
+        color: #000;
+        font-weight: 600;
+      }
+
+      .code-unmatched {
+        color: #ccc;
+      }
+
+      .match-depth-bar {
+        display: inline-block;
+        width: 40px;
+        height: 10px;
+        margin: 0 8px;
+        background: #f5f5f5;
+        position: relative;
+        border-radius: 1px;
+      }
+
+      .match-depth-fill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        background: #666;
+        border-radius: 1px;
+      }
+
+      .prediction-side, .gt-side {
+        flex: 1;
+        display: flex;
+        align-items: baseline;
+        position: relative;
+      }
+
+      .side-label {
+        position: absolute;
+        top: -14px;
+        left: 0;
+        font-size: 9px;
         color: #999;
-        text-decoration: line-through;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
       }
 
-      .prediction.match {
-        border-left-color: #4caf50;
-        font-weight: 500;
+      .code-column {
+        width: 80px;
+        flex-shrink: 0;
+        margin-right: 12px;
       }
 
-      /* Ground truth styles */
-      .ground-truth {
-        color: #333;
+      .description-column {
+        flex: 1;
+        font-size: 12px;
+        color: #666;
+        line-height: 1.4;
       }
 
-      .ground-truth.matched {
-        border-left-color: #4caf50;
-        font-weight: 500;
+      .unmatched-item {
+        display: flex;
+        align-items: baseline;
+        margin: 3px 0;
+        opacity: 0.7;
       }
 
-      /* Match statistics */
-      .match-stats {
-        font-size: 11px;
+      .match-symbol {
+        font-size: 10px;
         color: #999;
-        margin-top: 10px;
-        padding-top: 10px;
-        border-top: 1px solid #f0f0f0;
+        margin: 0 6px;
+        font-weight: normal;
       }
 
       .controls {
@@ -263,6 +343,83 @@
       let totalRows = null;
       let isLoading = false;
 
+      // Extract Iconclass code from a full label (e.g., "71H713 Bathsheba alone" -> "71H713")
+      function extractIconclassCode(label) {
+        if (!label || label === "Not a valid iconclass label") return null;
+        // Match alphanumeric codes, optionally followed by parentheses content
+        const match = label.match(/^([A-Z0-9]+(?:\([^)]*\))?)/i);
+        return match ? match[1] : null;
+      }
+
+      // Calculate the depth of match between two Iconclass codes
+      function calculateMatchDepth(code1, code2) {
+        if (!code1 || !code2) return 0;
+        
+        let matchLength = 0;
+        const minLength = Math.min(code1.length, code2.length);
+        
+        for (let i = 0; i < minLength; i++) {
+          if (code1[i] === code2[i]) {
+            matchLength++;
+          } else {
+            break;
+          }
+        }
+        
+        return {
+          matchLength,
+          code1Length: code1.length,
+          code2Length: code2.length,
+          isExact: code1 === code2,
+          isPartial: matchLength > 0 && matchLength < Math.max(code1.length, code2.length),
+          matchRatio: matchLength / Math.max(code1.length, code2.length)
+        };
+      }
+
+      // Find best matching ground truth for a prediction
+      function findBestMatch(predLabel, groundTruthLabels) {
+        const predCode = extractIconclassCode(predLabel);
+        if (!predCode) return null;
+        
+        let bestMatch = null;
+        let bestMatchDepth = 0;
+        
+        for (const gtLabel of groundTruthLabels) {
+          const gtCode = extractIconclassCode(gtLabel);
+          if (!gtCode) continue;
+          
+          const matchInfo = calculateMatchDepth(predCode, gtCode);
+          if (matchInfo.matchLength > bestMatchDepth) {
+            bestMatchDepth = matchInfo.matchLength;
+            bestMatch = {
+              gtLabel,
+              gtCode,
+              predCode,
+              ...matchInfo
+            };
+          }
+        }
+        
+        return bestMatch;
+      }
+
+      // Format code with matched/unmatched portions highlighted
+      function formatCodeWithMatch(code, matchLength) {
+        if (!code) return '';
+        const matched = code.substring(0, matchLength);
+        const unmatched = code.substring(matchLength);
+        return `<span class="code-matched">${matched}</span><span class="code-unmatched">${unmatched}</span>`;
+      }
+
+      // Get match indicator symbol
+      function getMatchSymbol(matchInfo) {
+        if (!matchInfo) return '≠';
+        if (matchInfo.isExact) return '=';
+        if (matchInfo.matchRatio > 0.5) return '≈';
+        if (matchInfo.matchRatio > 0) return '∼';
+        return '≠';
+      }
+
       async function loadDatasetPage() {
         if (isLoading) return;
 
@@ -362,90 +519,294 @@
           const predictions = row["iconclass-predictions-parsed"] || [];
           const groundTruth = row["iconclass-gt-parsed"] || [];
 
-          // Check for invalid labels (simple heuristic)
+          // Check for invalid labels
           const invalidPredictions = predictions.map((pred) => {
-            // If it says "Not a valid iconclass label" or similar
             return (
               pred.toLowerCase().includes("not a valid") ||
               pred.toLowerCase().includes("invalid")
             );
           });
 
-          // Find matches
-          const matches = predictions.filter((pred) =>
-            groundTruth.some(
-              (gt) =>
-                gt.toLowerCase().includes(pred.toLowerCase()) ||
-                pred.toLowerCase().includes(gt.toLowerCase())
-            )
-          );
+          // Build match data structure
+          const exactMatches = [];
+          const partialMatches = [];
+          const unmatchedPredictions = [];
+          const unmatchedGroundTruth = new Set(groundTruth);
 
-          // Create comparison view
-          const comparison = document.createElement("div");
-          comparison.className = "comparison";
+          // Find all matches
+          predictions.forEach((pred, idx) => {
+            if (invalidPredictions[idx]) {
+              unmatchedPredictions.push({ prediction: pred, invalid: true });
+            } else {
+              const bestMatch = findBestMatch(pred, groundTruth);
+              if (bestMatch && bestMatch.matchLength > 0) {
+                unmatchedGroundTruth.delete(bestMatch.gtLabel);
+                if (bestMatch.isExact) {
+                  exactMatches.push({ prediction: pred, groundTruth: bestMatch.gtLabel, match: bestMatch });
+                } else {
+                  partialMatches.push({ prediction: pred, groundTruth: bestMatch.gtLabel, match: bestMatch });
+                }
+              } else {
+                unmatchedPredictions.push({ prediction: pred });
+              }
+            }
+          });
 
-          // Predictions column
-          const predColumn = document.createElement("div");
-          predColumn.className = "column";
+          // Sort partial matches by match quality
+          partialMatches.sort((a, b) => b.match.matchRatio - a.match.matchRatio);
 
-          const predTitle = document.createElement("div");
-          predTitle.className = "column-title";
-          predTitle.textContent = "Predictions";
-          predColumn.appendChild(predTitle);
+          // Create new visualization
+          const matchGroups = document.createElement("div");
+          matchGroups.className = "match-groups";
 
-          predictions.forEach((pred, idx) => {
-            const label = document.createElement("div");
-            const isInvalid = invalidPredictions[idx];
-            const isMatch = matches.includes(pred);
-
-            label.className = `label prediction ${isInvalid ? "invalid" : ""} ${
-              isMatch && !isInvalid ? "match" : ""
-            }`;
-            label.textContent = pred;
-            predColumn.appendChild(label);
-          });
+          // Helper function to extract description
+          function getDescription(label) {
+            const idx = label.indexOf(' ');
+            return idx > -1 ? label.substring(idx + 1) : '';
+          }
 
-          // Ground truth column
-          const gtColumn = document.createElement("div");
-          gtColumn.className = "column";
-
-          const gtTitle = document.createElement("div");
-          gtTitle.className = "column-title";
-          gtTitle.textContent = "Ground Truth";
-          gtColumn.appendChild(gtTitle);
-
-          groundTruth.forEach((gt) => {
-            const label = document.createElement("div");
-            const isMatched = matches.some(
-              (pred) =>
-                gt.toLowerCase().includes(pred.toLowerCase()) ||
-                pred.toLowerCase().includes(gt.toLowerCase())
-            );
-            label.className = `label ground-truth ${
-              isMatched ? "matched" : ""
-            }`;
-            label.textContent = gt;
-            gtColumn.appendChild(label);
-          });
+          // Helper function to create match depth bar
+          function createMatchBar(match) {
+            const bar = document.createElement("div");
+            bar.className = "match-depth-bar";
+            const fill = document.createElement("div");
+            fill.className = "match-depth-fill";
+            fill.style.width = `${Math.round(match.matchRatio * 100)}%`;
+            bar.appendChild(fill);
+            return bar;
+          }
 
-          comparison.appendChild(predColumn);
-          comparison.appendChild(gtColumn);
-          content.appendChild(comparison);
+          // Exact matches group
+          if (exactMatches.length > 0) {
+            const group = document.createElement("div");
+            group.className = "match-group";
+            
+            const header = document.createElement("div");
+            header.className = "group-header";
+            header.textContent = `Exact Matches (${exactMatches.length})`;
+            group.appendChild(header);
+
+            // Add labels for first match only
+            let isFirst = true;
+
+            exactMatches.forEach(item => {
+              const pair = document.createElement("div");
+              pair.className = "match-pair";
+              if (isFirst) {
+                pair.style.marginTop = "16px"; // Space for labels
+              }
 
-          // Add match statistics
+              const predSide = document.createElement("div");
+              predSide.className = "prediction-side";
+              
+              if (isFirst) {
+                const predLabel = document.createElement("span");
+                predLabel.className = "side-label";
+                predLabel.textContent = "PREDICTION";
+                predSide.appendChild(predLabel);
+              }
+              
+              const predCode = document.createElement("span");
+              predCode.className = "code-column iconclass-code";
+              predCode.innerHTML = `<span class="code-matched">${extractIconclassCode(item.prediction)}</span>`;
+              
+              const predDesc = document.createElement("span");
+              predDesc.className = "description-column";
+              predDesc.textContent = getDescription(item.prediction);
+
+              predSide.appendChild(predCode);
+              predSide.appendChild(predDesc);
+
+              const symbol = document.createElement("span");
+              symbol.className = "match-symbol";
+              symbol.textContent = "=";
+
+              const gtSide = document.createElement("div");
+              gtSide.className = "gt-side";
+              
+              if (isFirst) {
+                const gtLabel = document.createElement("span");
+                gtLabel.className = "side-label";
+                gtLabel.textContent = "GROUND TRUTH";
+                gtSide.appendChild(gtLabel);
+              }
+              
+              const gtCode = document.createElement("span");
+              gtCode.className = "code-column iconclass-code";
+              gtCode.innerHTML = `<span class="code-matched">${extractIconclassCode(item.groundTruth)}</span>`;
+              
+              const gtDesc = document.createElement("span");
+              gtDesc.className = "description-column";
+              gtDesc.textContent = getDescription(item.groundTruth);
+
+              gtSide.appendChild(gtCode);
+              gtSide.appendChild(gtDesc);
+
+              pair.appendChild(predSide);
+              pair.appendChild(symbol);
+              pair.appendChild(gtSide);
+              group.appendChild(pair);
+              
+              isFirst = false;
+            });
+
+            matchGroups.appendChild(group);
+          }
+
+          // Partial matches group
+          if (partialMatches.length > 0) {
+            const group = document.createElement("div");
+            group.className = "match-group";
+            
+            const header = document.createElement("div");
+            header.className = "group-header";
+            header.textContent = `Partial Matches (${partialMatches.length})`;
+            group.appendChild(header);
+
+            // Add labels for first match only
+            let isFirst = true;
+
+            partialMatches.forEach(item => {
+              const pair = document.createElement("div");
+              pair.className = "match-pair";
+              if (isFirst) {
+                pair.style.marginTop = "16px"; // Space for labels
+              }
+
+              const predSide = document.createElement("div");
+              predSide.className = "prediction-side";
+              
+              if (isFirst) {
+                const predLabel = document.createElement("span");
+                predLabel.className = "side-label";
+                predLabel.textContent = "PREDICTION";
+                predSide.appendChild(predLabel);
+              }
+              
+              const predCode = document.createElement("span");
+              predCode.className = "code-column iconclass-code";
+              predCode.innerHTML = formatCodeWithMatch(item.match.predCode, item.match.matchLength);
+              
+              const predDesc = document.createElement("span");
+              predDesc.className = "description-column";
+              predDesc.textContent = getDescription(item.prediction);
+
+              predSide.appendChild(predCode);
+              predSide.appendChild(predDesc);
+
+              const matchBar = createMatchBar(item.match);
+
+              const gtSide = document.createElement("div");
+              gtSide.className = "gt-side";
+              
+              if (isFirst) {
+                const gtLabel = document.createElement("span");
+                gtLabel.className = "side-label";
+                gtLabel.textContent = "GROUND TRUTH";
+                gtSide.appendChild(gtLabel);
+              }
+              
+              const gtCode = document.createElement("span");
+              gtCode.className = "code-column iconclass-code";
+              gtCode.innerHTML = formatCodeWithMatch(item.match.gtCode, item.match.matchLength);
+              
+              const gtDesc = document.createElement("span");
+              gtDesc.className = "description-column";
+              gtDesc.textContent = getDescription(item.groundTruth);
+
+              gtSide.appendChild(gtCode);
+              gtSide.appendChild(gtDesc);
+
+              pair.appendChild(predSide);
+              pair.appendChild(matchBar);
+              pair.appendChild(gtSide);
+              group.appendChild(pair);
+              
+              isFirst = false;
+            });
+
+            matchGroups.appendChild(group);
+          }
+
+          // Unmatched items group
+          if (unmatchedPredictions.length > 0 || unmatchedGroundTruth.size > 0) {
+            const group = document.createElement("div");
+            group.className = "match-group";
+            
+            const header = document.createElement("div");
+            header.className = "group-header";
+            header.textContent = `No Matches`;
+            group.appendChild(header);
+
+            // Unmatched predictions
+            unmatchedPredictions.forEach(item => {
+              const div = document.createElement("div");
+              div.className = "unmatched-item";
+              
+              const label = document.createElement("span");
+              label.style.marginRight = "20px";
+              label.innerHTML = `<span class="iconclass-code" style="color: #999">P:</span> `;
+              
+              const code = extractIconclassCode(item.prediction);
+              if (code) {
+                label.innerHTML += `<span class="iconclass-code code-unmatched">${code}</span> `;
+              }
+              label.innerHTML += `<span class="description-column">${getDescription(item.prediction)}</span>`;
+              
+              div.appendChild(label);
+              group.appendChild(div);
+            });
+
+            // Unmatched ground truth
+            unmatchedGroundTruth.forEach(gt => {
+              const div = document.createElement("div");
+              div.className = "unmatched-item";
+              
+              const label = document.createElement("span");
+              label.innerHTML = `<span class="iconclass-code" style="color: #999">G:</span> `;
+              
+              const code = extractIconclassCode(gt);
+              if (code) {
+                label.innerHTML += `<span class="iconclass-code" style="color: #666">${code}</span> `;
+              }
+              label.innerHTML += `<span class="description-column">${getDescription(gt)}</span>`;
+              
+              div.appendChild(label);
+              group.appendChild(div);
+            });
+
+            matchGroups.appendChild(group);
+          }
+
+          content.appendChild(matchGroups);
+
+          // Add compact match statistics
           const validPredictions = predictions.filter(
             (_, idx) => !invalidPredictions[idx]
           );
-          const matchScore =
-            validPredictions.length > 0
-              ? Math.round((matches.length / validPredictions.length) * 100)
-              : 0;
-
+          
           const statsDiv = document.createElement("div");
           statsDiv.className = "match-stats";
-          statsDiv.textContent = validPredictions.length > 0 
-            ? `${matches.length}/${validPredictions.length} matches` 
-            : `No valid predictions`;
+          
+          if (validPredictions.length > 0) {
+            const totalMatches = exactMatches.length + partialMatches.length;
+            const statsParts = [];
+            
+            if (exactMatches.length > 0) {
+              statsParts.push(`${exactMatches.length} exact`);
+            }
+            if (partialMatches.length > 0) {
+              statsParts.push(`${partialMatches.length} partial`);
+            }
+            if (unmatchedPredictions.length > 0) {
+              statsParts.push(`${unmatchedPredictions.length} unmatched`);
+            }
+            
+            statsDiv.textContent = statsParts.join(' • ');
+          } else {
+            statsDiv.textContent = 'No valid predictions';
+          }
+          
           content.appendChild(statsDiv);
 
           card.appendChild(content);