Polish dataset catalog role density

frontend/src/components/datasets/DatasetPanel.tsx

@@ -53,6 +53,30 @@ function formatBounds(bounds: Record<string, number> | null | undefined): string
   return `${bounds.min_x?.toFixed(4)}, ${bounds.min_y?.toFixed(4)} -> ${bounds.max_x?.toFixed(4)}, ${bounds.max_y?.toFixed(4)}`
 }
 
+function isVectorDatasetType(datasetType: string): boolean {
+  return datasetType === 'vector' || datasetType === 'geojson'
+}
+
+function normalizeDatasetRole(dataset: DatasetCreateResponse): 'reference' | 'candidate' | 'source' {
+  if (dataset.dataset_role === 'reference') {
+    return 'reference'
+  }
+  if (dataset.dataset_role === 'derived' || isVectorDatasetType(dataset.dataset_type)) {
+    return 'candidate'
+  }
+  return 'source'
+}
+
+function datasetRoleLabel(role: string): string {
+  if (role === 'reference') {
+    return 'Reference'
+  }
+  if (role === 'candidate') {
+    return 'Candidate'
+  }
+  return 'Source'
+}
+
 export function DatasetPanel({
   selectedProjectId,
   selectedDatasetId,
@@ -68,6 +92,36 @@ export function DatasetPanel({
   onOpenDatasetExport,
 }: DatasetPanelProps) {
   const readyDatasets = datasets.filter((dataset) => dataset.status === 'ready').length
+  const roleSummaries = [
+    {
+      key: 'selected',
+      label: 'Selected',
+      count: selectedDatasetId ? 1 : 0,
+      hint: 'Active',
+      className: 'dataset-role-selected',
+    },
+    {
+      key: 'reference',
+      label: 'Reference',
+      count: datasets.filter((dataset) => normalizeDatasetRole(dataset) === 'reference').length,
+      hint: 'QA truth',
+      className: 'dataset-role-reference',
+    },
+    {
+      key: 'candidate',
+      label: 'Candidate',
+      count: datasets.filter((dataset) => normalizeDatasetRole(dataset) === 'candidate').length,
+      hint: 'QA candidate',
+      className: 'dataset-role-candidate',
+    },
+    {
+      key: 'source',
+      label: 'Source',
+      count: datasets.filter((dataset) => normalizeDatasetRole(dataset) === 'source').length,
+      hint: 'Uploads',
+      className: 'dataset-role-source',
+    },
+  ]
 
   return (
     <section className="workspace-panel" data-testid="dataset-panel">
@@ -126,6 +180,16 @@ export function DatasetPanel({
         </button>
       </form>
 
+      <div className="dataset-role-summary-grid" aria-label="Dataset role summary">
+        {roleSummaries.map((summary) => (
+          <div className={`dataset-role-summary ${summary.className}`} key={summary.key}>
+            <span>{summary.label}</span>
+            <strong>{summary.count}</strong>
+            <small>{summary.hint}</small>
+          </div>
+        ))}
+      </div>
+
       {loadingDatasets ? <p>Loading datasets...</p> : null}
       {datasets.length === 0 ? (
         <div className="empty-state">
@@ -134,57 +198,65 @@ export function DatasetPanel({
         </div>
       ) : null}
       <ul className="dataset-list">
-        {datasets.map((dataset) => (
-          <li className={dataset.id === selectedDatasetId ? 'dataset-card dataset-card-active' : 'dataset-card'} key={dataset.id}>
-            <div className="dataset-card-header">
-              <div>
-                <strong>{dataset.name}</strong>
-                <div className="entity-meta">
-                  <span>{dataset.dataset_type}</span>
-                  <span>{dataset.dataset_role ?? 'source'}</span>
-                  <span>{dataset.status}</span>
+        {datasets.map((dataset) => {
+          const datasetRole = normalizeDatasetRole(dataset)
+          const roleLabel = datasetRoleLabel(datasetRole)
+          return (
+            <li className={dataset.id === selectedDatasetId ? 'dataset-card dataset-card-active' : 'dataset-card'} key={dataset.id}>
+              <div className="dataset-card-header">
+                <div>
+                  <div className="dataset-card-kicker">
+                    <span className={`dataset-role-badge dataset-role-${datasetRole}`}>{roleLabel}</span>
+                    <span>{dataset.dataset_type}</span>
+                  </div>
+                  <strong className="dataset-card-title">{dataset.name}</strong>
+                  <div className="entity-meta">
+                    <span>Source: {dataset.source_name ?? dataset.source}</span>
+                    {dataset.reference_layer_name ? <span>Layer: {dataset.reference_layer_name}</span> : null}
+                    <span>CRS: {dataset.crs ?? dataset.vector_summary?.crs ?? 'n/a'}</span>
+                  </div>
                 </div>
+                <span className={dataset.status === 'ready' ? 'status-badge status-badge-ready' : 'status-badge'}>
+                  {dataset.status === 'ready' ? 'ready' : dataset.status === 'failed' ? 'failed' : 'pending'}
+                </span>
               </div>
-              <span className={dataset.status === 'ready' ? 'status-badge status-badge-ready' : 'status-badge'}>
-                {dataset.status === 'ready' ? 'ready' : dataset.status === 'failed' ? 'failed' : 'pending'}
-              </span>
-            </div>
-            <div className="dataset-metrics data-density-grid">
-              <span>size: {formatBytes(dataset.size_bytes)}</span>
-              <span>features: {dataset.feature_count ?? dataset.vector_summary?.feature_count ?? 'n/a'}</span>
-              <span>bbox: {formatBounds(dataset.bounds_json ?? dataset.vector_summary?.bounds_json)}</span>
-            </div>
-            <div className="button-row">
-              <button
-                className="primary-action"
-                type="button"
-                onClick={() => onLoadDatasetDetails(selectedProjectId ?? '', dataset)}
-                data-testid={`dataset-select-${dataset.id}`}
-              >
-                Select / details
-              </button>
-              <button className="secondary-action" type="button" onClick={() => onOpenDatasetInMap(dataset)}>
-                Open in map
-              </button>
-              <button
-                className="secondary-action"
-                type="button"
-                onClick={() => onOpenDatasetExport(dataset)}
-                disabled={!(dataset.dataset_type === 'vector' || dataset.dataset_type === 'geojson')}
-              >
-                Export / QA
-              </button>
-              <button
-                className="secondary-action"
-                type="button"
-                onClick={() => onRefreshMetadata(dataset.id)}
-                disabled={dataset.dataset_type === 'raster'}
-              >
-                Refresh metadata
-              </button>
-            </div>
-          </li>
-        ))}
+              <div className="dataset-metrics data-density-grid">
+                <span>size: {formatBytes(dataset.size_bytes)}</span>
+                <span>features: {dataset.feature_count ?? dataset.vector_summary?.feature_count ?? 'n/a'}</span>
+                <span>bbox: {formatBounds(dataset.bounds_json ?? dataset.vector_summary?.bounds_json)}</span>
+              </div>
+              <div className="button-row">
+                <button
+                  className="primary-action"
+                  type="button"
+                  onClick={() => onLoadDatasetDetails(selectedProjectId ?? '', dataset)}
+                  data-testid={`dataset-select-${dataset.id}`}
+                >
+                  Select / details
+                </button>
+                <button className="secondary-action" type="button" onClick={() => onOpenDatasetInMap(dataset)}>
+                  Open in map
+                </button>
+                <button
+                  className="secondary-action"
+                  type="button"
+                  onClick={() => onOpenDatasetExport(dataset)}
+                  disabled={!(dataset.dataset_type === 'vector' || dataset.dataset_type === 'geojson')}
+                >
+                  Export / QA
+                </button>
+                <button
+                  className="secondary-action"
+                  type="button"
+                  onClick={() => onRefreshMetadata(dataset.id)}
+                  disabled={dataset.dataset_type === 'raster'}
+                >
+                  Refresh metadata
+                </button>
+              </div>
+            </li>
+          )
+        })}
       </ul>
     </section>
   )

frontend/src/styles/app.css

@@ -946,6 +946,61 @@ section th {
   background: #ffffff;
 }
 
+.dataset-role-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+  gap: 0.55rem;
+  margin-top: 0.75rem;
+}
+
+.dataset-role-summary {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.65rem;
+  background: #ffffff;
+}
+
+.dataset-role-summary span,
+.dataset-role-summary small {
+  color: var(--muted);
+  font-size: 0.76rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.dataset-role-summary strong {
+  color: var(--ink);
+  font-size: 1.18rem;
+  line-height: 1;
+}
+
+.dataset-role-selected {
+  border-color: rgba(15, 23, 42, 0.24);
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.dataset-role-reference {
+  border-color: rgba(15, 118, 110, 0.28);
+  background: #ecfdf5;
+  color: #115e59;
+}
+
+.dataset-role-candidate {
+  border-color: rgba(37, 99, 235, 0.24);
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.dataset-role-source {
+  border-color: rgba(100, 116, 139, 0.22);
+  background: #f8fafc;
+  color: #334155;
+}
+
 .entity-list,
 .dataset-list,
 .model-list,
@@ -1037,6 +1092,36 @@ button.entity-card {
   align-items: start;
 }
 
+.dataset-card-kicker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  align-items: center;
+  margin-bottom: 0.28rem;
+  color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.dataset-role-badge {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 1.45rem;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  padding: 0.16rem 0.5rem;
+  font-size: 0.72rem;
+  line-height: 1;
+}
+
+.dataset-card-title {
+  display: block;
+  overflow-wrap: anywhere;
+  line-height: 1.25;
+}
+
 .model-card p {
   grid-column: 1 / -1;
   margin: 0.25rem 0 0;