Add rich HTML table UI for sample query results

[rdhyee]

Summary

Replace raw JSON output with a beautiful, scrollable HTML table for Eric's query results.

Features

Visual Improvements

• 📷 Thumbnail column - Clickable images (80x80px) or grey "No image" placeholder boxes
• 🔗 Clickable sample PIDs - Links to OpenContext records
• 📍 Site information - Site names with "View site" links
• 📝 Formatted descriptions - Proper text wrapping in 300px column
• 🌍 Geographic coordinates - Formatted lat/lon (5 decimal places)

User Experience

• 🎨 Zebra-striped rows - Alternating background colors (#f8f9fa)
• 📌 Sticky header - Stays visible while scrolling
• 📊 Result count - "Found X samples" below table
• ⏳ Loading state - Shows "Loading samples…" while querying
• ❌ Empty state - Friendly message when no results

Technical Details

• Scrollable - Max height 600px with overflow-y: auto
• Responsive - Column widths: Thumbnail (100px), Description (300px max), others flexible
• Accessible - Proper semantic HTML table structure
• Clean styling - Bootstrap-inspired color palette (#f8f9fa, #dee2e6, #007bff)

Before vs After

Before

{
  "latitude": 34.990756602927,
  "longitude": 33.708768506146,
  "sample_site_label": "PKAP Survey Area",
  "sample_site_pid": "https://opencontext.org/subjects/48fd434c...",
  "sample_pid": "ark:/28722/k20g43t0z",
  "sample_label": "Batch 9",
  "sample_description": "Open Context published...",
  "sample_thumbnail_url": null,
  "has_thumbnail": false
}

After

A styled table with:

• Thumbnail image or placeholder
• "Batch 9" as bold title
• Clickable "ark:…/k20g43t0z" link
• Formatted multi-line description
• "PKAP Survey Area" with "View site" link
• "34.99075°N / 33.70877°E"

Edge Cases Handled

1. No thumbnail → Grey placeholder box with "No image" text
2. No results → "No samples found at this location via Path 1..." message
3. Long descriptions → Max-width 300px with wrapping
4. Loading → "Loading samples…" indicator
5. ARK vs HTTP URLs → Handles both formats, prefers alternate_identifiers for links

Changes

• tutorials/parquet_cesium.qmd (line 897-980):
  • Replace raw JSON display with HTML table
  • Separate reactive cell for data vs rendering
  • Template literals with conditional rendering

Testing

• Table renders with proper styling
• Thumbnails display and link to full size
• Sample PIDs link to OpenContext
• Site links work correctly
• Scrolling works with sticky header
• Empty state shows friendly message
• Loading state displays correctly
• Tested with PKAP samples (some with images, some without)

Demo

Test with this geocode in the search box:

geoloc_04d6e816218b1a8798fa90b3d1d43bf4c043a57f

Should show 5 samples in the new table format.

🤖 Generated with Claude Code