File size: 2,815 Bytes
6d08d46 | 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 | import React, { useState, useEffect } from 'react'
import {
Text,
Stack,
Box,
UnstyledButton,
Loader,
Group,
} from '@mantine/core'
import { IconDatabase, IconFlask } from '@tabler/icons-react'
import { useXRD } from '../context/XRDContext'
const ExampleDataPanel = ({ onSelect }) => {
const { loadExampleFile } = useXRD()
const [examples, setExamples] = useState([])
const [loading, setLoading] = useState(true)
const [loadingFile, setLoadingFile] = useState(null)
useEffect(() => {
const fetchExamples = async () => {
try {
const response = await fetch('/api/examples')
if (response.ok) {
const data = await response.json()
setExamples(data)
}
} catch (err) {
console.error('Failed to fetch examples:', err)
} finally {
setLoading(false)
}
}
fetchExamples()
}, [])
const handleSelect = async (filename) => {
setLoadingFile(filename)
const success = await loadExampleFile(filename)
setLoadingFile(null)
if (success && onSelect) onSelect()
}
if (loading) {
return (
<Box p="md" style={{ textAlign: 'center' }}>
<Loader size="sm" />
</Box>
)
}
if (examples.length === 0) return null
return (
<Box>
<Group gap="xs" mb="xs">
<IconDatabase size={16} color="#868e96" />
<Text size="sm" fw={600} c="dimmed">
Example Data
</Text>
</Group>
<Stack gap={8}>
{examples.map((ex) => (
<UnstyledButton
key={ex.filename}
onClick={() => handleSelect(ex.filename)}
disabled={loadingFile !== null}
style={{
padding: '10px 12px',
borderRadius: '8px',
border: '1px solid #dee2e6',
backgroundColor: loadingFile === ex.filename ? '#f1f3f5' : '#fff',
cursor: loadingFile !== null ? 'wait' : 'pointer',
transition: 'background-color 150ms ease',
}}
onMouseEnter={(e) => {
if (!loadingFile) e.currentTarget.style.backgroundColor = '#f8f9fa'
}}
onMouseLeave={(e) => {
if (loadingFile !== ex.filename) e.currentTarget.style.backgroundColor = '#fff'
}}
>
<Group justify="space-between" align="center" wrap="nowrap">
<Group gap={6}>
<IconFlask size={14} color="#7950f2" />
<Text size="sm" fw={500} truncate>
{ex.material_id || ex.filename}
</Text>
</Group>
{loadingFile === ex.filename && <Loader size={16} />}
</Group>
</UnstyledButton>
))}
</Stack>
</Box>
)
}
export default ExampleDataPanel
|