more metadata fields

src/components/DatasetMetadataModal.module.css

@@ -134,6 +134,53 @@
 	overflow-wrap: anywhere;
 }
 
+.coordinate {
+	font-family: var(--ifm-code-font-family);
+	font-size: 0.74rem;
+	color: var(--agml-muted);
+	white-space: nowrap;
+}
+
+.locationColumns {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 1.25rem;
+	margin: 1.25rem 0 1.75rem;
+}
+
+.locationColumn {
+	display: flex;
+	flex-direction: column;
+	gap: 0.85rem;
+	min-width: 0;
+}
+
+.siteList {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.2rem;
+}
+
+.siteRow {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 0.5rem;
+	font-size: 0.8rem;
+	line-height: 1.35;
+	color: var(--agml-text);
+	overflow-wrap: anywhere;
+	padding: 0.15rem 0;
+}
+
+.siteRow:not(:last-child) {
+	border-bottom: 1px solid var(--agml-border);
+}
+
 .section {
 	margin-bottom: 1.75rem;
 }
@@ -222,6 +269,17 @@
 	white-space: pre;
 }
 
+.citationCode {
+	font-family: var(--ifm-code-font-family);
+	font-size: 0.78rem;
+	line-height: 1.6;
+	color: var(--agml-text);
+	overflow-x: auto;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	margin: 0;
+}
+
 .snippetCopyButton {
 	flex-shrink: 0;
 	align-self: center;
@@ -542,4 +600,12 @@
 	.detailGrid {
 		grid-template-columns: repeat(2, 1fr) !important;
 	}
+
+	.locationColumns {
+		grid-template-columns: 1fr;
+	}
+
+	.locationColumn .detailGrid {
+		grid-template-columns: 1fr !important;
+	}
 }

src/components/DatasetMetadataModal.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import type { Dataset } from '../lib/datasets';
-import { formatDisplayLocation } from '../lib/datasets';
+import { formatCoordinateList, formatDisplayLocation, formatLocationList } from '../lib/datasets';
 import { METRIC_CATEGORY_LABELS, useDatasetPerformance } from '../lib/performance';
 import type { MetricCategory, PerformanceEntry } from '../lib/performance';
 import styles from './DatasetMetadataModal.module.css';
@@ -234,6 +234,7 @@ export function DatasetMetadataModal({
 	const [cropsExpanded, setCropsExpanded] = useState(false);
 	const [classesExpanded, setClassesExpanded] = useState(false);
 	const [copied, setCopied] = useState(false);
+	const [citationCopied, setCitationCopied] = useState(false);
 
 	const [expandedRowKeys, setExpandedRowKeys] = useState<Set<string>>(new Set());
 	const toggleExpandedRow = (key: string) => {
@@ -249,7 +250,6 @@ export function DatasetMetadataModal({
 	if (!open || dataset == null) return null;
 
 	const metadataRows = [
-		['Location', formatDisplayLocation(dataset.location)],
 		['Sensor modality', formatValue(dataset.sensor_modality)],
 		['Platform', formatValue(dataset.platform)],
 		['Number of images', formatImageCount(dataset.num_images)],
@@ -264,6 +264,14 @@ export function DatasetMetadataModal({
 	const loader = formatLoaderInstructions(dataset);
 	const cropList = dataset.crop_types ?? [];
 	const classList = dataset.classes ? dataset.classes.split(', ').filter(Boolean) : [];
+	const locationList = formatLocationList(dataset);
+	const coordinateList = formatCoordinateList(dataset.lat_lon);
+	// Pairs each location with the coordinate at the same index (same shape the source data uses
+	// for both fields) into single compact rows, instead of two separate full lists.
+	const siteRows = Array.from({ length: Math.max(locationList?.length ?? 0, coordinateList?.length ?? 0) }, (_, index) => ({
+		location: locationList?.[index] ?? null,
+		coordinate: coordinateList?.[index] ?? null,
+	}));
 
 	return (
 		<div className={styles.backdrop} role="presentation" onClick={onClose}>
@@ -287,6 +295,7 @@ export function DatasetMetadataModal({
 							)}
 							{dataset.agricultural_task && <span className={styles.tag}>{formatValue(dataset.agricultural_task)}</span>}
 							{dataset.real_or_synthetic && <span className={styles.tag}>{formatValue(dataset.real_or_synthetic)}</span>}
+							{dataset.license && <span className={styles.tag}>{formatValue(dataset.license)}</span>}
 						</div>
 					</div>
 					<button type="button" className={styles.closeButton} onClick={onClose} aria-label="Close dataset details">
@@ -303,6 +312,55 @@ export function DatasetMetadataModal({
 					))}
 				</dl>
 
+				{(dataset.country || dataset.location || dataset.lat_lon || dataset.imaging_equipment || dataset.collection_period) && (
+					<section className={styles.section}>
+						<h3 className={styles.sectionTitle}>Location &amp; collection</h3>
+						<div className={styles.locationColumns}>
+							<div className={styles.locationColumn}>
+								{dataset.country && (
+									<dl className={styles.detailGrid} style={{ gridTemplateColumns: '1fr', margin: 0 }}>
+										<div className={styles.detailItem}>
+											<dt className={styles.detailLabel}>Country</dt>
+											<dd className={styles.detailValue}>{formatDisplayLocation(dataset.country)}</dd>
+										</div>
+									</dl>
+								)}
+								{siteRows.length > 0 && (
+									<div>
+										<p className={styles.detailLabel}>Locations</p>
+										<ul className={styles.siteList}>
+											{siteRows.map((site, index) => (
+												<li key={index} className={styles.siteRow}>
+													{site.location && <span>{site.location}</span>}
+													{site.coordinate && <span className={styles.coordinate}>{site.coordinate}</span>}
+												</li>
+											))}
+										</ul>
+									</div>
+								)}
+							</div>
+							{(dataset.imaging_equipment || dataset.collection_period) && (
+								<div className={styles.locationColumn}>
+									<dl className={styles.detailGrid} style={{ gridTemplateColumns: '1fr', margin: 0 }}>
+										{dataset.imaging_equipment && (
+											<div className={styles.detailItem}>
+												<dt className={styles.detailLabel}>Imaging equipment</dt>
+												<dd className={styles.detailValue}>{formatDisplayLocation(dataset.imaging_equipment)}</dd>
+											</div>
+										)}
+										{dataset.collection_period && (
+											<div className={styles.detailItem}>
+												<dt className={styles.detailLabel}>Collection period</dt>
+												<dd className={styles.detailValue}>{formatDisplayLocation(dataset.collection_period)}</dd>
+											</div>
+										)}
+									</dl>
+								</div>
+							)}
+						</div>
+					</section>
+				)}
+
 				{cropList.length > 0 && (
 					<section className={styles.section}>
 						<h3 className={styles.sectionTitle}>Crops</h3>
@@ -532,6 +590,26 @@ export function DatasetMetadataModal({
 						<p className={styles.bodyText}>No leaderboard results have been submitted for this dataset yet.</p>
 					)}
 				</section>
+
+				{dataset.citation && (
+					<section className={styles.section}>
+						<h3 className={styles.sectionTitle}>Citation</h3>
+						<div className={styles.snippetRow}>
+							<pre className={styles.citationCode}>{dataset.citation}</pre>
+							<button
+								type="button"
+								className={styles.snippetCopyButton}
+								onClick={() => {
+									navigator.clipboard.writeText(dataset.citation ?? '');
+									setCitationCopied(true);
+									setTimeout(() => setCitationCopied(false), 1500);
+								}}
+							>
+								{citationCopied ? 'Copied!' : 'Copy'}
+							</button>
+						</div>
+					</section>
+				)}
 			</div>
 		</div>
 	);