All files / web/src/app/vision-training/train/components/data-panel DataPanelDetailPanel.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { css } from '../../../../../../styled-system/css'
import type { ModelType } from '../wizard/types'
import type { AnyDataItem, ColumnDataItem } from './types'
import { isBoundaryDataItem, isColumnDataItem } from './types'
import { BoundaryDetailContent } from './BoundaryDetailContent'
import { ColumnDetailContent } from './ColumnDetailContent'

export interface DataPanelDetailPanelProps {
  /** Model type */
  modelType: ModelType
  /** Selected item (or null if nothing selected) */
  selectedItem: AnyDataItem | null
  /** Handler to close the detail panel */
  onClose: () => void
  /** Handler to delete the selected item */
  onDelete: (item: AnyDataItem) => void
  /** Whether delete is in progress */
  isDeleting: boolean
  /** Handler to reclassify (column classifier only) */
  onReclassify?: (item: ColumnDataItem, newDigit: number) => void
  /** Whether reclassification is in progress */
  isReclassifying?: boolean
}

/**
 * Shared detail panel that renders model-specific content.
 * Shows when an item is selected from the grid.
 */
export function DataPanelDetailPanel({
  modelType,
  selectedItem,
  onClose,
  onDelete,
  isDeleting,
  onReclassify,
  isReclassifying = false,
}: DataPanelDetailPanelProps) {
  if (!selectedItem) return null

  return (
    <div
      data-component="data-panel-detail"
      className={css({
        width: '320px',
        flexShrink: 0,
        bg: 'gray.800',
        borderRadius: 'lg',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      })}
    >
      {/* Header with close button */}
      <div
        className={css({
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          p: 3,
          borderBottom: '1px solid',
          borderColor: 'gray.700',
        })}
      >
        <div className={css({ fontWeight: 'medium', color: 'gray.200' })}>
          {modelType === 'boundary-detector' ? 'Frame Details' : 'Image Details'}
        </div>
        <button
          type="button"
          onClick={onClose}
          className={css({
            p: 1,
            bg: 'transparent',
            border: 'none',
            color: 'gray.400',
            cursor: 'pointer',
            borderRadius: 'md',
            _hover: { bg: 'gray.700', color: 'gray.200' },
          })}
        >
          ✕
        </button>
      </div>

      {/* Content area */}
      <div className={css({ flex: 1, p: 4, overflow: 'auto' })}>
        {modelType === 'boundary-detector' && isBoundaryDataItem(selectedItem) && (
          <BoundaryDetailContent
            item={selectedItem}
            onDelete={() => onDelete(selectedItem)}
            isDeleting={isDeleting}
          />
        )}

        {modelType === 'column-classifier' && isColumnDataItem(selectedItem) && (
          <ColumnDetailContent
            item={selectedItem}
            onDelete={() => onDelete(selectedItem)}
            isDeleting={isDeleting}
            onReclassify={(newDigit) => onReclassify?.(selectedItem, newDigit)}
            isReclassifying={isReclassifying}
          />
        )}
      </div>
    </div>
  )
}