Spaces:
Runtime error
Runtime error
File size: 3,907 Bytes
da957b0 290ad35 da957b0 290ad35 da957b0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | "use client";
import { useState, useEffect, useRef } from 'react';
const DATASET_TAGS = [
{ value: 'named', label: 'Named Dataset', description: 'A specific, named dataset (e.g. "2022 national census")' },
{ value: 'descriptive', label: 'Descriptive', description: 'A described but not formally named dataset' },
{ value: 'vague', label: 'Vague', description: 'An unclear or ambiguous data reference' },
];
export default function AnnotationModal({
isOpen,
selectedText,
annotatorName,
onAnnotatorChange,
onSubmit,
onClose,
}) {
const [datasetTag, setDatasetTag] = useState('named');
const [saving, setSaving] = useState(false);
const noteRef = useRef(null);
useEffect(() => {
if (isOpen && noteRef.current) {
noteRef.current.focus();
}
}, [isOpen]);
useEffect(() => {
const handleEsc = (e) => { if (e.key === 'Escape') onClose(); };
if (isOpen) window.addEventListener('keydown', handleEsc);
return () => window.removeEventListener('keydown', handleEsc);
}, [isOpen, onClose]);
if (!isOpen) return null;
const handleSubmit = async () => {
setSaving(true);
await onSubmit({ dataset_tag: datasetTag });
setSaving(false);
setDatasetTag('named');
};
return (
<div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
<div className="modal-content">
<div className="modal-header">
<h3>Add Annotation</h3>
<button className="modal-close" onClick={onClose}>×</button>
</div>
<div className="modal-body">
{/* Selected text preview */}
<div className="form-group">
<label>Selected Text</label>
<div className="selected-text-preview">"{selectedText}"</div>
</div>
{/* Dataset tag dropdown */}
<div className="form-group">
<label htmlFor="dataset-tag">Dataset Tag</label>
<select
id="dataset-tag"
className="form-select"
value={datasetTag}
onChange={(e) => setDatasetTag(e.target.value)}
>
{DATASET_TAGS.map(tag => (
<option key={tag.value} value={tag.value}>
{tag.label}
</option>
))}
</select>
<p className="form-help">
{DATASET_TAGS.find(t => t.value === datasetTag)?.description}
</p>
</div>
{/* Annotator name */}
<div className="form-group">
<label htmlFor="annotator-name">Annotator</label>
<input
id="annotator-name"
type="text"
className="form-input"
value={annotatorName || 'Not signed in'}
readOnly
/>
</div>
</div>
<div className="modal-footer">
<button className="btn btn-secondary" onClick={onClose} disabled={saving}>
Cancel
</button>
<button className="btn btn-primary" onClick={handleSubmit} disabled={saving}>
{saving ? 'Saving...' : 'Save Annotation'}
</button>
</div>
</div>
</div>
);
}
|