All files / web/src/app/vision-training/train/components TrainingDataHubModal.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import * as Dialog from '@radix-ui/react-dialog'
import { css } from '../../../../../styled-system/css'
import { Z_INDEX } from '@/constants/zIndex'
import { UnifiedDataPanel } from './data-panel/UnifiedDataPanel'

interface TrainingDataHubModalProps {
  isOpen: boolean
  onClose: () => void
  onDataChanged: () => void
}

/**
 * Training Data Hub Modal
 *
 * Modal wrapper for column classifier data panel.
 * Provides quick access to column classifier training data management.
 */
export function TrainingDataHubModal({
  isOpen,
  onClose,
  onDataChanged,
}: TrainingDataHubModalProps) {
  return (
    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <Dialog.Portal>
        <Dialog.Overlay
          className={css({
            position: 'fixed',
            inset: 0,
            bg: 'black/80',
            backdropFilter: 'blur(4px)',
            animation: 'fadeIn 0.2s ease',
          })}
          style={{ zIndex: Z_INDEX.MODAL }}
        />
        <Dialog.Content
          className={css({
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: { base: '100vw', lg: '95vw' },
            maxWidth: '1400px',
            height: { base: '100vh', lg: '90vh' },
            maxHeight: '900px',
            bg: 'gray.900',
            borderRadius: { base: '0', lg: 'xl' },
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column',
            animation: 'slideIn 0.3s ease',
          })}
          style={{ zIndex: Z_INDEX.MODAL + 1 }}
        >
          {/* Accessible title (visually hidden) */}
          <Dialog.Title className={css({ srOnly: true })}>Training Data Hub</Dialog.Title>
          <Dialog.Description className={css({ srOnly: true })}>
            Manage and capture training data for the digit classifier
          </Dialog.Description>

          {/* Close button */}
          <Dialog.Close
            className={css({
              position: 'absolute',
              top: 2,
              right: 2,
              p: 2,
              bg: 'transparent',
              border: 'none',
              color: 'gray.400',
              cursor: 'pointer',
              borderRadius: 'md',
              zIndex: 10,
              _hover: { color: 'gray.200', bg: 'gray.800' },
            })}
          >
            ✕
          </Dialog.Close>

          {/* Panel content */}
          <div className={css({ flex: 1, overflow: 'hidden' })}>
            <UnifiedDataPanel modelType="column-classifier" onDataChanged={onDataChanged} />
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

export default TrainingDataHubModal