Skip to content

Commit 87fdcea

Browse files
rdhyeeclaude
rdhyee
and
claude
committed
Move output tables above explanations for better UX
Reorganized Cesium tutorial to show query results immediately after clicking a point, before technical explanations. Changes: - Moved "Samples at Location" section (HTML table output) directly after "getGeoRecord (selected)" section - "Understanding Paths in the iSamples Property Graph" now appears after results - Removed duplicate output section from old location Benefits: - Users see results immediately without scrolling through explanations - Technical details remain available below for those interested - Cleaner, more intuitive information hierarchy 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 1da00ff commit 87fdcea

File tree

1 file changed

+107
-108
lines changed

1 file changed

+107
-108
lines changed

‎tutorials/parquet_cesium.qmd‎

Lines changed: 107 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -914,6 +914,113 @@ ${JSON.stringify(testrecord, null, 2)}
914914
`
915915
```
916916

917+
## Samples at Location via Sampling Event (Eric Kansa's Query)
918+
919+
<div id="loading_combined" hidden>Loading samples…</div>
920+
921+
This query implements Eric Kansa's authoritative `get_samples_at_geo_cord_location_via_sample_event` function from [open-context-py](https://github.com/ekansa/open-context-py/blob/staging/opencontext_py/apps/all_items/isamples/isamples_explore.py).
922+
923+
**Query Strategy (Path 1 Only)**:
924+
- Starts at a GeospatialCoordLocation (clicked point)
925+
- Walks **backward** via `sample_location` edges to find SamplingEvents that reference this location
926+
- From those events, finds MaterialSampleRecords produced by them
927+
- Requires site context (INNER JOIN on `sampling_site` → SamplingSite)
928+
929+
**Returns**:
930+
- Geographic coordinates: `latitude`, `longitude`
931+
- Sample metadata: `sample_pid`, `sample_label`, `sample_description`, `sample_alternate_identifiers`
932+
- Site context: `sample_site_label`, `sample_site_pid`
933+
- Media: `sample_thumbnail_url`, `has_thumbnail`
934+
935+
**Ordering**: Prioritizes samples with images (`ORDER BY has_thumbnail DESC`)
936+
937+
**Important**: This query only returns samples whose **sampling events directly reference this geolocation** via `sample_location` (Path 1). Samples that reach this location only through their site's `site_location` (Path 2) are **not included**. This means site marker locations may return 0 results if no events were recorded at that exact coordinate.
938+
939+
```{ojs}
940+
//| echo: false
941+
samples_combined = selectedSamplesCombined
942+
```
943+
944+
```{ojs}
945+
//| echo: false
946+
html`${
947+
combinedLoading ?
948+
html`<div class="loading">Loading samples…</div>`
949+
:
950+
samples_combined && samples_combined.length > 0 ?
951+
html`<div style="max-height: 600px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px;">
952+
<table style="width: 100%; border-collapse: collapse; font-size: 0.9em;">
953+
<thead style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">
954+
<tr style="border-bottom: 2px solid #dee2e6;">
955+
<th style="padding: 12px; text-align: left;">Thumbnail</th>
956+
<th style="padding: 12px; text-align: left;">Sample</th>
957+
<th style="padding: 12px; text-align: left;">Description</th>
958+
<th style="padding: 12px; text-align: left;">Site</th>
959+
<th style="padding: 12px; text-align: left;">Location</th>
960+
</tr>
961+
</thead>
962+
<tbody>
963+
${samples_combined.map((sample, i) => html`
964+
<tr style="border-bottom: 1px solid #eee; ${i % 2 === 0 ? 'background: #f8f9fa;' : ''}">
965+
<td style="padding: 8px; width: 100px;">
966+
${sample.has_thumbnail ?
967+
html`<a href="${sample.sample_thumbnail_url}" target="_blank">
968+
<img src="${sample.sample_thumbnail_url}"
969+
alt="${sample.sample_label}"
970+
style="max-width: 80px; max-height: 80px; border-radius: 4px; border: 1px solid #ddd;">
971+
</a>`
972+
:
973+
html`<div style="width: 80px; height: 80px; background: #e9ecef; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 0.8em;">No image</div>`
974+
}
975+
</td>
976+
<td style="padding: 8px;">
977+
<div style="margin-bottom: 4px;">
978+
<strong>${sample.sample_label}</strong>
979+
</div>
980+
<div style="font-size: 0.85em; color: #666;">
981+
<a href="${sample.sample_pid.startsWith('http') ? sample.sample_pid : sample.sample_alternate_identifiers?.[0] || '#'}"
982+
target="_blank"
983+
style="color: #007bff; text-decoration: none;">
984+
${sample.sample_pid.replace('ark:/28722/', 'ark:…/')}
985+
</a>
986+
</div>
987+
</td>
988+
<td style="padding: 8px; max-width: 300px;">
989+
<div style="font-size: 0.85em; color: #495057; line-height: 1.4;">
990+
${sample.sample_description || 'No description'}
991+
</div>
992+
</td>
993+
<td style="padding: 8px;">
994+
<div style="margin-bottom: 2px;">
995+
<strong>${sample.sample_site_label}</strong>
996+
</div>
997+
<div style="font-size: 0.75em;">
998+
<a href="${sample.sample_site_pid}"
999+
target="_blank"
1000+
style="color: #007bff; text-decoration: none;">
1001+
View site
1002+
</a>
1003+
</div>
1004+
</td>
1005+
<td style="padding: 8px; font-size: 0.85em; color: #666;">
1006+
${sample.latitude.toFixed(5)}°N<br>
1007+
${sample.longitude.toFixed(5)}°E
1008+
</td>
1009+
</tr>
1010+
`)}
1011+
</tbody>
1012+
</table>
1013+
</div>
1014+
<div style="margin-top: 8px; font-size: 0.9em; color: #666;">
1015+
Found ${samples_combined.length} sample${samples_combined.length !== 1 ? 's' : ''}
1016+
</div>`
1017+
:
1018+
html`<div style="padding: 20px; background: #f8f9fa; border-radius: 4px; color: #6c757d;">
1019+
No samples found at this location via Path 1 (direct sampling events).
1020+
</div>`
1021+
}`
1022+
```
1023+
9171024
## Understanding Paths in the iSamples Property Graph
9181025

9191026
### Why "Path 1" and "Path 2"?
@@ -1218,114 +1325,6 @@ html`${
12181325
}`
12191326
```
12201327

1221-
1222-
## Samples at Location via Sampling Event (Eric Kansa's Query)
1223-
1224-
<div id="loading_combined" hidden>Loading samples…</div>
1225-
1226-
This query implements Eric Kansa's authoritative `get_samples_at_geo_cord_location_via_sample_event` function from [open-context-py](https://github.com/ekansa/open-context-py/blob/staging/opencontext_py/apps/all_items/isamples/isamples_explore.py).
1227-
1228-
**Query Strategy (Path 1 Only)**:
1229-
- Starts at a GeospatialCoordLocation (clicked point)
1230-
- Walks **backward** via `sample_location` edges to find SamplingEvents that reference this location
1231-
- From those events, finds MaterialSampleRecords produced by them
1232-
- Requires site context (INNER JOIN on `sampling_site` → SamplingSite)
1233-
1234-
**Returns**:
1235-
- Geographic coordinates: `latitude`, `longitude`
1236-
- Sample metadata: `sample_pid`, `sample_label`, `sample_description`, `sample_alternate_identifiers`
1237-
- Site context: `sample_site_label`, `sample_site_pid`
1238-
- Media: `sample_thumbnail_url`, `has_thumbnail`
1239-
1240-
**Ordering**: Prioritizes samples with images (`ORDER BY has_thumbnail DESC`)
1241-
1242-
**Important**: This query only returns samples whose **sampling events directly reference this geolocation** via `sample_location` (Path 1). Samples that reach this location only through their site's `site_location` (Path 2) are **not included**. This means site marker locations may return 0 results if no events were recorded at that exact coordinate.
1243-
1244-
```{ojs}
1245-
//| echo: false
1246-
samples_combined = selectedSamplesCombined
1247-
```
1248-
1249-
```{ojs}
1250-
//| echo: false
1251-
html`${
1252-
combinedLoading ?
1253-
html`<div class="loading">Loading samples…</div>`
1254-
:
1255-
samples_combined && samples_combined.length > 0 ?
1256-
html`<div style="max-height: 600px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px;">
1257-
<table style="width: 100%; border-collapse: collapse; font-size: 0.9em;">
1258-
<thead style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">
1259-
<tr style="border-bottom: 2px solid #dee2e6;">
1260-
<th style="padding: 12px; text-align: left;">Thumbnail</th>
1261-
<th style="padding: 12px; text-align: left;">Sample</th>
1262-
<th style="padding: 12px; text-align: left;">Description</th>
1263-
<th style="padding: 12px; text-align: left;">Site</th>
1264-
<th style="padding: 12px; text-align: left;">Location</th>
1265-
</tr>
1266-
</thead>
1267-
<tbody>
1268-
${samples_combined.map((sample, i) => html`
1269-
<tr style="border-bottom: 1px solid #eee; ${i % 2 === 0 ? 'background: #f8f9fa;' : ''}">
1270-
<td style="padding: 8px; width: 100px;">
1271-
${sample.has_thumbnail ?
1272-
html`<a href="${sample.sample_thumbnail_url}" target="_blank">
1273-
<img src="${sample.sample_thumbnail_url}"
1274-
alt="${sample.sample_label}"
1275-
style="max-width: 80px; max-height: 80px; border-radius: 4px; border: 1px solid #ddd;">
1276-
</a>`
1277-
:
1278-
html`<div style="width: 80px; height: 80px; background: #e9ecef; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 0.8em;">No image</div>`
1279-
}
1280-
</td>
1281-
<td style="padding: 8px;">
1282-
<div style="margin-bottom: 4px;">
1283-
<strong>${sample.sample_label}</strong>
1284-
</div>
1285-
<div style="font-size: 0.85em; color: #666;">
1286-
<a href="${sample.sample_pid.startsWith('http') ? sample.sample_pid : sample.sample_alternate_identifiers?.[0] || '#'}"
1287-
target="_blank"
1288-
style="color: #007bff; text-decoration: none;">
1289-
${sample.sample_pid.replace('ark:/28722/', 'ark:…/')}
1290-
</a>
1291-
</div>
1292-
</td>
1293-
<td style="padding: 8px; max-width: 300px;">
1294-
<div style="font-size: 0.85em; color: #495057; line-height: 1.4;">
1295-
${sample.sample_description || 'No description'}
1296-
</div>
1297-
</td>
1298-
<td style="padding: 8px;">
1299-
<div style="margin-bottom: 2px;">
1300-
<strong>${sample.sample_site_label}</strong>
1301-
</div>
1302-
<div style="font-size: 0.75em;">
1303-
<a href="${sample.sample_site_pid}"
1304-
target="_blank"
1305-
style="color: #007bff; text-decoration: none;">
1306-
View site
1307-
</a>
1308-
</div>
1309-
</td>
1310-
<td style="padding: 8px; font-size: 0.85em; color: #666;">
1311-
${sample.latitude.toFixed(5)}°N<br>
1312-
${sample.longitude.toFixed(5)}°E
1313-
</td>
1314-
</tr>
1315-
`)}
1316-
</tbody>
1317-
</table>
1318-
</div>
1319-
<div style="margin-top: 8px; font-size: 0.9em; color: #666;">
1320-
Found ${samples_combined.length} sample${samples_combined.length !== 1 ? 's' : ''}
1321-
</div>`
1322-
:
1323-
html`<div style="padding: 20px; background: #f8f9fa; border-radius: 4px; color: #6c757d;">
1324-
No samples found at this location via Path 1 (direct sampling events).
1325-
</div>`
1326-
}`
1327-
```
1328-
13291328
## Geographic Location Classification
13301329

13311330
::: {.callout-tip icon=false}

0 commit comments

Comments
 (0)