Skip to content

Commit 853e7ac

Browse files
rdhyeeclaude
andauthored
About page, How to Use page, and Interactive Explorer with search (#65)
* Restructure About page and create How to Use page About (#61): - Restructured into wireframe sections: Objectives, Technical Perspective (collapsible), Team with PIs + Contributors (collapsible), Photo Gallery, Background & History - Merged content from about.qmd and people.qmd into single cohesive page How to Use (#62): - New getting-started page with Quick Start steps, data overview table, tech requirements, developer links, and data files inventory - Added to navbar and sidebar Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * Consolidate explorer: add search, reframe as Interactive Explorer Explorer consolidation (#59): - Renamed from "Progressive Globe" to "Interactive Explorer" - Added search bar: search samples by label, results fly to location - Search results show in side panel with source links - Click a search result to fly to its coordinates - Sidebar hidden for full-width explorer experience - Preserved "How It Works" as collapsible callout - All existing features intact (source filtering, zoom levels, sample cards, share URLs) Note: Material and sampled-feature filtering requires denormalized columns in the parquet files (tracked in pqg#20). Source filtering already works via checkboxes. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>
1 parent d6e9043 commit 853e7ac

File tree

4 files changed

+262
-34
lines changed

4 files changed

+262
-34
lines changed

_quarto.yml

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ website:
1212
text: Home
1313
- href: tutorials/progressive_globe.qmd
1414
text: Interactive Explorer
15+
- href: how-to-use.qmd
16+
text: How to Use
1517
- href: tutorials/index.qmd
1618
text: Tutorials
1719
- href: about.qmd
@@ -55,9 +57,11 @@ website:
5557
- section: "About"
5658
contents:
5759
- href: about.qmd
58-
text: Goals
60+
text: About iSamples
61+
- href: how-to-use.qmd
62+
text: How to Use
5963
- href: people.qmd
60-
text: People
64+
text: Contributors
6165
- section: "Information Architecture"
6266
contents:
6367
- design/index.qmd

about.qmd

Lines changed: 79 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,103 @@
11
---
22
title: "About iSamples"
3+
subtitle: "A multi-disciplinary cyberinfrastructure for material samples"
4+
number-sections: false
35
---
46

5-
# Project Objectives
7+
## Objectives {.unnumbered}
68

7-
1. Design and develop iSamples infrastructure (iSamples in a Box and distributed data systems);
8-
2. Build four initial implementations of iSamples for adoption and use case testing (Open Context, GEOME, SESAR, and Smithsonian Institution);
9-
3. Conduct outreach and community engagement to developers, individual researchers, and international organizations concerned with material samples.
9+
1. Design and develop iSamples infrastructure (iSamples in a Box and distributed data systems)
10+
2. Build four initial implementations of iSamples for adoption and use case testing (Open Context, GEOME, SESAR, and Smithsonian Institution)
11+
3. Conduct outreach and community engagement to developers, individual researchers, and international organizations concerned with material samples
1012

11-
## Current Data Access
13+
::: {.callout-note collapse="true"}
14+
### Technical Perspective
1215

13-
**Note**: iSamples Central is currently unavailable. The project has transitioned to a **geoparquet-based approach** for data access and analysis:
16+
The iSamples project will:
1417

15-
- **Primary Data Source**: Comprehensive geoparquet files containing millions of sample records
16-
- **Analysis Platform**: Browser-based tools using DuckDB-WASM and Observable
17-
- **Coverage**: Complete datasets from SESAR, OpenContext, GEOME, and Smithsonian collections
18+
* Create a flexible and scalable architecture to ensure broad adoption and implementation by diverse stakeholders.
19+
* Build upon existing identifier infrastructure such as IGSNs (Global Sample Number) and ARKs (Archival Resource Keys), but is agnostic to identifier type.
20+
* Encourage a high-level metadata standard for natural history samples (across biosciences, geosciences, and archaeology), while supporting community-developed metadata standards in specialist domains.
21+
* Extend existing capabilities, enhance consistency, and expand their reach to serve science and society much more broadly through integration with established discipline-specific infrastructure at SESAR (geoscience), CyVerse (bioscience), Open Context (archaeology), and the Smithsonian Institution.
1822

19-
![iSamples diagram](assets/iSamplesArchitecture.png)
23+
**Current data access**: The project now uses **geoparquet files + DuckDB-WASM** for efficient, browser-based data access and analysis. See the [Interactive Explorer](/tutorials/progressive_globe.html) for a live demo.
2024

25+
![iSamples Architecture](assets/iSamplesArchitecture.png)
26+
:::
2127

22-
# Background
28+
## Team {.unnumbered}
2329

24-
Research frequently uses material samples as a basic element for reference, study, and experimentation in many scientific disciplines, especially in the natural and environmental sciences, material sciences, agriculture, physical anthropology, archaeology, and biomedicine. Observations made on samples collected in the field and in the laboratory constitute a critical data resource for research that addresses grand challenges of our planet’s future sustainability, from environmental change; to food, energy, and water resources; to natural hazards and their mitigation; to public health. The large investments of public funds being made to curate huge volumes of samples acquired over decades or even centuries, and to collect and analyze new samples demand these samples to be openly accessible, easily discoverable, and documented with sufficient information to make them reusable. The current ecosystem of sample and sample data management in the U.S. and globally is highly fragmented across stakeholders, including museums, federal agencies, academic institutions, and individual researchers, with a multitude of institutional and discipline-specific catalogs, practices for sample identification, and protocols for describing samples.
30+
### Principal Investigators {.unnumbered}
2531

26-
The iSamples project is a multi-disciplinary collaboration that will develop a national digital infrastructure that will provide services for globally unique, consistent, and convenient identification of material samples; metadata about them; and linking them to other samples, derived data, and research results published in the literature. iSamples builds on previous initiatives to achieve this by providing material samples with globally unique, persistent identifiers that reliably link to landing pages with metadata describing the sample and its provenance, and which allow unambiguously linking samples with data and publications.
32+
* [Kerstin Lehnert](https://orcid.org/0000-0001-7036-1977), Columbia University
33+
* [Andrea Thomer](https://orcid.org/0000-0001-6238-3498), University of Arizona
34+
* [Neil Davies](https://orcid.org/0000-0001-8085-5014), The Regents of the University of California, Berkeley
35+
* [David Vieglais](https://orcid.org/0000-0002-6513-4996), University of Kansas Biodiversity Institute
2736

28-
Leveraging significant national investments, iSamples provides the missing link among:
37+
::: {.callout-note collapse="true"}
38+
### Contributors
2939

30-
1. physical collections (e.g., natural history museums, herbaria, biobanks),
31-
2. field stations, marine laboratories, long-term ecological research sites, and observatories, and
32-
3. data repositories and cyberinfrastructure. iSamples delivers enhanced infrastructure for STEM research and education, decision-makers, and the general public.
40+
:::: {.columns}
41+
::: {.column width="34%"}
42+
* Cao, Sean
43+
* Choe, Saebyl
44+
* Cui, Hong
45+
* Davies, Neil (PI)
46+
* Deck, John
47+
* Kansa, Eric C
48+
* Kansa, Sarah Whitcher
49+
:::
50+
::: {.column width="34%"}
51+
* Kunze, John
52+
* Lehnert, Kerstin (PI)
53+
* Mandel, Danny
54+
* Meyer, Christopher
55+
* Ramdeen, Sarah
56+
* Raia, Natalie
57+
* Richard, Steve
58+
:::
59+
::: {.column width="32%"}
60+
* Robinson, Erin
61+
* Snyder, Rebecca
62+
* Song, Lu-lin
63+
* Thomer, Andrea (PI)
64+
* Vieglais, Dave (PI)
65+
* Walls, Ramona L
66+
* Yee, Raymond
67+
:::
68+
::::
69+
:::
3370

34-
iSamples benefits national security and resource management by offering a means to assure sample provenance, improving scientific reproducibility and demonstrating compliance with ethical standards, national regulations, and international treaties, (e.g., automated audits of sensitive archaeological specimens, endangered species, or specimens containing controlled substances).
71+
## Photo Gallery {.unnumbered}
3572

36-
# Technical perspective
73+
::: {layout-ncol=3}
3774

38-
The iSamples project will:
75+
![RCN Workshop, NYU](assets/RCN_workshop_NYU.jpg){group="gallery"}
3976

40-
* Create a flexible and scalable architecture to ensure broad adoption and implementation by diverse stakeholders.
41-
* Build upon on existing identifier infrastructure such as IGSNs (Global Sample Number;) and ARKs (Archival Resource Keys), but is agnostic to identifier type.
42-
* Encourage a high-level metadata standard for natural history samples (across biosciences, geosciences, and archaeology), while supporting community-developed metadata standards in specialist domains.
43-
* Extend existing capabilities, enhance consistency, and expand their reach to serve science and society much more broadly through integration with established discipline-specific infrastructure at the System for Earth Sample Registration SESAR (geoscience), CyVerse (bioscience), Open Context (archaeology), and the Smithsonian Institution.
77+
![Workshop, Tucson](assets/workshop_Tucson.jpg){group="gallery"}
4478

79+
![Workshop, Smithsonian](assets/workshop_SI.jpg){group="gallery"}
4580

46-
# Principal Investigators
81+
![Outside Smithsonian MSC](assets/outside_SI_MSC.jpg){group="gallery"}
4782

48-
* [Kerstin Lehnert](https://orcid.org/0000-0001-7036-1977), Columbia University
49-
* [Andrea Thomer](https://orcid.org/0000-0001-6238-3498), University of Arizona
50-
* [Neil Davies](https://orcid.org/0000-0001-8085-5014), The Regents of the University of California, Berkeley
51-
* [David Vieglais](https://orcid.org/0000-0002-6513-4996), University of Kansas Biodiversity Institute
83+
![Tour, Smithsonian MSC](assets/tour_SI_MSC.jpg){group="gallery"}
84+
85+
![Workshop, Moorea](assets/workshop_Moorea.jpg){group="gallery"}
86+
87+
:::
88+
89+
## Background & History {.unnumbered}
90+
91+
Research frequently uses material samples as a basic element for reference, study, and experimentation in many scientific disciplines, especially in the natural and environmental sciences, material sciences, agriculture, physical anthropology, archaeology, and biomedicine. Observations made on samples collected in the field and in the laboratory constitute a critical data resource for research that addresses grand challenges of our planet's future sustainability, from environmental change; to food, energy, and water resources; to natural hazards and their mitigation; to public health.
92+
93+
The large investments of public funds being made to curate huge volumes of samples acquired over decades or even centuries, and to collect and analyze new samples demand these samples to be openly accessible, easily discoverable, and documented with sufficient information to make them reusable.
94+
95+
The iSamples project is a multi-disciplinary collaboration that developed a national digital infrastructure providing services for globally unique, consistent, and convenient identification of material samples; metadata about them; and linking them to other samples, derived data, and research results published in the literature.
96+
97+
Leveraging significant national investments, iSamples provides the missing link among:
5298

99+
1. Physical collections (e.g., natural history museums, herbaria, biobanks)
100+
2. Field stations, marine laboratories, long-term ecological research sites, and observatories
101+
3. Data repositories and cyberinfrastructure
53102

103+
iSamples benefits national security and resource management by offering a means to assure sample provenance, improving scientific reproducibility and demonstrating compliance with ethical standards, national regulations, and international treaties.

how-to-use.qmd

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: "How to Use iSamples"
3+
subtitle: "Get started exploring 6.7 million scientific samples"
4+
number-sections: false
5+
---
6+
7+
## Quick Start {.unnumbered}
8+
9+
1. **Open the [Interactive Explorer](/tutorials/progressive_globe.html)** — a 3D globe loads with clustered sample data
10+
2. **Zoom in** — clusters break into finer detail as you zoom (resolution 4 → 6 → 8 → individual samples)
11+
3. **Filter by source** — use the checkboxes to show/hide data from SESAR, OpenContext, GEOME, or Smithsonian
12+
4. **Click a cluster** — see sample count and nearby samples with links to source records
13+
5. **Click an individual sample** — view metadata and follow the "View at source" link to the original repository
14+
6. **Share your view** — copy the URL to share your exact position, zoom level, and selected sample
15+
16+
## What's in the Data? {.unnumbered}
17+
18+
| Source | Samples | Focus |
19+
|--------|---------|-------|
20+
| **SESAR** | 4.6M | Earth science — rocks, minerals, sediments, soils |
21+
| **OpenContext** | 1M | Archaeology — artifacts, excavation materials |
22+
| **GEOME** | 605K | Biology — genomic and tissue specimens |
23+
| **Smithsonian** | 322K | Natural history — museum collections |
24+
25+
## No Installation Required {.unnumbered}
26+
27+
Everything runs in your browser using:
28+
29+
- **DuckDB-WASM** — a fast analytical database running client-side
30+
- **HTTP range requests** — only the data you need is downloaded (typically < 1 MB to start)
31+
- **Cesium** — 3D globe visualization
32+
33+
Works in Chrome, Firefox, Edge, Safari, and Brave. No plugins, no downloads, no accounts.
34+
35+
## For Developers {.unnumbered}
36+
37+
All code is visible and foldable on tutorial pages. Want to build your own analysis?
38+
39+
- **[Tutorials](/tutorials/)** — step-by-step guides from basic exploration to advanced analysis
40+
- **[Deep-Dive Analysis](/tutorials/zenodo_isamples_analysis.html)** — statistical exploration with Observable Plot
41+
- **[GitHub](https://github.com/isamplesorg/)** — all source code and data pipelines
42+
- **[Zenodo](https://zenodo.org/communities/isamples)** — archived datasets for reproducible research
43+
44+
## Data Files {.unnumbered}
45+
46+
All data is hosted on Cloudflare R2 with HTTP range request support:
47+
48+
| File | Size | Description |
49+
|------|------|-------------|
50+
| Wide format (H3-indexed) | ~292 MB | 20M rows, all entity types with H3 spatial indices |
51+
| H3 summary (res4) | ~70 KB | Pre-aggregated cluster counts for instant globe load |
52+
| H3 summary (res6) | ~200 KB | Mid-zoom cluster detail |
53+
| H3 summary (res8) | ~600 KB | Fine-zoom cluster detail |
54+
| Samples lite | ~150 MB | Individual sample points with coordinates |
55+
| Facet summaries | 2 KB | Pre-computed filter counts (source, material, context, specimen type) |

tutorials/progressive_globe.qmd

Lines changed: 122 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
title: "Progressive Globe: Instant H3 → Detail on Demand"
2+
title: "Interactive Explorer"
3+
subtitle: "Search and explore 6.7 million material samples"
34
categories: [parquet, spatial, h3, performance, isamples]
5+
sidebar: false
46
---
57

6-
Explore **6.7 million material samples** from iSamples — the globe loads instantly with H3 hexagonal aggregates, then refines as you zoom down to individual samples.
7-
88
::: {.callout-note collapse="true"}
99
## How It Works
1010

@@ -92,9 +92,49 @@ Circle size = log(sample count). Color = dominant data source.
9292
}
9393
.share-btn:hover { background: #0d47a1; }
9494
.share-toast { font-size: 12px; color: #2e7d32; opacity: 0; transition: opacity 0.3s; }
95+
.search-bar { display: flex; gap: 6px; margin-bottom: 12px; }
96+
.search-bar input {
97+
flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px;
98+
font-size: 14px; outline: none;
99+
}
100+
.search-bar input:focus { border-color: #1565c0; box-shadow: 0 0 0 2px rgba(21,101,192,0.15); }
101+
.search-bar button {
102+
background: #1565c0; color: white; border: none; padding: 8px 16px;
103+
border-radius: 4px; cursor: pointer; font-size: 14px; white-space: nowrap;
104+
}
105+
.search-bar button:hover { background: #0d47a1; }
106+
.search-results { font-size: 12px; color: #666; padding: 4px 0; }
107+
.filter-section { border-top: 1px solid #eee; padding-top: 8px; margin-top: 8px; }
108+
.filter-header {
109+
font-size: 12px; font-weight: 600; color: #555; cursor: pointer;
110+
display: flex; justify-content: space-between; align-items: center;
111+
padding: 4px 0; user-select: none;
112+
}
113+
.filter-header:hover { color: #1565c0; }
114+
.filter-body { padding: 4px 0; }
115+
.filter-body label { display: block; font-size: 12px; padding: 2px 0; cursor: pointer; }
116+
.filter-body label:hover { color: #1565c0; }
95117
</style>
96118

119+
::: {.callout-note collapse="true"}
120+
## How It Works
121+
122+
1. **Instant** (<1s): Pre-aggregated H3 res4 summary (580 KB) → 38K colored circles
123+
2. **Zoom in**: Automatically switches to res6 (112K) then res8 (176K) clusters
124+
3. **Zoom deeper** (<120 km): Individual sample points from 60 MB lite parquet
125+
4. **Click**: Cluster info or individual sample card with full metadata
126+
5. **Search**: Find samples by name — results fly to the location on the globe
127+
128+
Circle size = log(sample count). Color = dominant data source.
129+
:::
130+
97131
<!-- Static layout: globe + side panel. Updated via DOM, not OJS reactivity. -->
132+
<div class="search-bar">
133+
<input type="text" id="sampleSearch" placeholder="Search samples (e.g., basalt, pottery, coral...)" />
134+
<button id="searchBtn">Search</button>
135+
</div>
136+
<div id="searchResults" class="search-results"></div>
137+
98138
<div class="globe-layout">
99139
<div id="cesiumContainer"></div>
100140
<div class="side-panel">
@@ -911,6 +951,85 @@ zoomWatcher = {
911951
});
912952
}
913953
954+
// --- Search handler ---
955+
const searchBtn = document.getElementById('searchBtn');
956+
const searchInput = document.getElementById('sampleSearch');
957+
const searchResults = document.getElementById('searchResults');
958+
959+
async function doSearch() {
960+
const term = searchInput.value.trim();
961+
if (!term || term.length < 2) {
962+
searchResults.textContent = 'Type at least 2 characters';
963+
return;
964+
}
965+
searchResults.textContent = 'Searching...';
966+
try {
967+
const escaped = term.replace(/'/g, "''");
968+
const results = await db.query(`
969+
SELECT pid, label, source, latitude, longitude, place_name
970+
FROM read_parquet('${lite_url}')
971+
WHERE label ILIKE '%${escaped}%'
972+
${sourceFilterSQL('source')}
973+
LIMIT 50
974+
`);
975+
if (results.length === 0) {
976+
searchResults.textContent = `No results for "${term}"`;
977+
return;
978+
}
979+
searchResults.textContent = `${results.length}${results.length === 50 ? '+' : ''} results for "${term}"`;
980+
981+
// Show results in the samples panel
982+
const sampEl = document.getElementById('samplesSection');
983+
if (sampEl) {
984+
let h = `<h4>Search: "${term}" (${results.length})</h4>`;
985+
for (const s of results) {
986+
const color = SOURCE_COLORS[s.source] || '#666';
987+
const name = SOURCE_NAMES[s.source] || s.source;
988+
const sUrl = sourceUrl(s.pid);
989+
h += `<div class="sample-row" style="cursor: pointer;" data-lat="${s.latitude}" data-lng="${s.longitude}" data-pid="${s.pid}">
990+
<div style="display: flex; align-items: center; gap: 6px;">
991+
${sUrl ? `<a class="sample-label" href="${sUrl}" target="_blank" rel="noopener noreferrer" style="color: #1565c0; text-decoration: none;">${s.label || s.pid}</a>` : `<span class="sample-label">${s.label || s.pid}</span>`}
992+
<span class="source-badge" style="background: ${color}; font-size: 10px;">${name}</span>
993+
</div>
994+
</div>`;
995+
}
996+
sampEl.innerHTML = h;
997+
998+
// Click search result → fly to it
999+
sampEl.querySelectorAll('.sample-row[data-lat]').forEach(row => {
1000+
row.addEventListener('click', (e) => {
1001+
if (e.target.tagName === 'A') return; // let links work
1002+
const lat = parseFloat(row.dataset.lat);
1003+
const lng = parseFloat(row.dataset.lng);
1004+
const pid = row.dataset.pid;
1005+
if (!isNaN(lat) && !isNaN(lng)) {
1006+
viewer.camera.flyTo({
1007+
destination: Cesium.Cartesian3.fromDegrees(lng, lat, 50000),
1008+
duration: 1.5
1009+
});
1010+
}
1011+
});
1012+
});
1013+
}
1014+
1015+
// Fly to the first result
1016+
if (results[0].latitude && results[0].longitude) {
1017+
viewer.camera.flyTo({
1018+
destination: Cesium.Cartesian3.fromDegrees(results[0].longitude, results[0].latitude, 200000),
1019+
duration: 1.5
1020+
});
1021+
}
1022+
} catch(err) {
1023+
console.error("Search failed:", err);
1024+
searchResults.textContent = `Search error: ${err.message}`;
1025+
}
1026+
}
1027+
1028+
if (searchBtn) searchBtn.addEventListener('click', doSearch);
1029+
if (searchInput) searchInput.addEventListener('keydown', (e) => {
1030+
if (e.key === 'Enter') doSearch();
1031+
});
1032+
9141033
// --- Deep-link: restore selection from initial hash ---
9151034
const ih = viewer._initialHash;
9161035
if (ih.pid) {

0 commit comments

Comments
 (0)