Skip to content

Commit f915036

Browse files
julieg18julieg18
authored
Break up table file (#2165)
1 parent ad7d190 commit f915036

File tree

4 files changed

+128
-112
lines changed

4 files changed

+128
-112
lines changed

‎webview/src/experiments/components/table/ExperimentGroup.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react'
2+
import cx from 'classnames'
3+
import styles from './styles.module.scss'
4+
import { BatchSelectionProp } from './Row'
5+
import { InstanceProp, RowProp } from './interfaces'
6+
import { NestedRow } from './NestedRow'
7+
8+
export const ExperimentGroup: React.FC<
9+
RowProp & InstanceProp & BatchSelectionProp
10+
> = ({
11+
row,
12+
instance,
13+
contextMenuDisabled,
14+
projectHasCheckpoints,
15+
hasRunningExperiment,
16+
batchRowSelection
17+
}) => {
18+
instance.prepareRow(row)
19+
return (
20+
<div
21+
className={cx(
22+
styles.experimentGroup,
23+
row.isExpanded && row.subRows.length > 0 && styles.expandedGroup
24+
)}
25+
>
26+
<NestedRow
27+
row={row}
28+
instance={instance}
29+
contextMenuDisabled={contextMenuDisabled}
30+
projectHasCheckpoints={projectHasCheckpoints}
31+
hasRunningExperiment={hasRunningExperiment}
32+
batchRowSelection={batchRowSelection}
33+
/>
34+
{row.isExpanded &&
35+
row.subRows.map(row => (
36+
<NestedRow
37+
row={row}
38+
instance={instance}
39+
key={row.id}
40+
contextMenuDisabled={contextMenuDisabled}
41+
projectHasCheckpoints={projectHasCheckpoints}
42+
hasRunningExperiment={hasRunningExperiment}
43+
batchRowSelection={batchRowSelection}
44+
/>
45+
))}
46+
</div>
47+
)
48+
}

‎webview/src/experiments/components/table/NestedRow.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import styles from './styles.module.scss'
3+
import { BatchSelectionProp, RowContent } from './Row'
4+
import { InstanceProp, RowProp } from './interfaces'
5+
6+
export const NestedRow: React.FC<
7+
RowProp & InstanceProp & BatchSelectionProp
8+
> = ({
9+
row,
10+
instance,
11+
contextMenuDisabled,
12+
projectHasCheckpoints,
13+
hasRunningExperiment,
14+
batchRowSelection
15+
}) => {
16+
instance.prepareRow(row)
17+
return (
18+
<RowContent
19+
row={row}
20+
className={styles.nestedRow}
21+
contextMenuDisabled={contextMenuDisabled}
22+
projectHasCheckpoints={projectHasCheckpoints}
23+
hasRunningExperiment={hasRunningExperiment}
24+
batchRowSelection={batchRowSelection}
25+
/>
26+
)
27+
}

‎webview/src/experiments/components/table/Table.tsx‎

Lines changed: 1 addition & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -3,123 +3,12 @@ import { useSelector } from 'react-redux'
33
import cx from 'classnames'
44
import styles from './styles.module.scss'
55
import { TableHead } from './TableHead'
6-
import { BatchSelectionProp, RowContent } from './Row'
76
import { InstanceProp, RowProp } from './interfaces'
87
import { RowSelectionContext } from './RowSelectionContext'
8+
import { TableBody } from './TableBody'
99
import { useClickOutside } from '../../../shared/hooks/useClickOutside'
1010
import { ExperimentsState } from '../../store'
1111

12-
export const NestedRow: React.FC<
13-
RowProp & InstanceProp & BatchSelectionProp
14-
> = ({
15-
row,
16-
instance,
17-
contextMenuDisabled,
18-
projectHasCheckpoints,
19-
hasRunningExperiment,
20-
batchRowSelection
21-
}) => {
22-
instance.prepareRow(row)
23-
return (
24-
<RowContent
25-
row={row}
26-
className={styles.nestedRow}
27-
contextMenuDisabled={contextMenuDisabled}
28-
projectHasCheckpoints={projectHasCheckpoints}
29-
hasRunningExperiment={hasRunningExperiment}
30-
batchRowSelection={batchRowSelection}
31-
/>
32-
)
33-
}
34-
35-
export const ExperimentGroup: React.FC<
36-
RowProp & InstanceProp & BatchSelectionProp
37-
> = ({
38-
row,
39-
instance,
40-
contextMenuDisabled,
41-
projectHasCheckpoints,
42-
hasRunningExperiment,
43-
batchRowSelection
44-
}) => {
45-
instance.prepareRow(row)
46-
return (
47-
<div
48-
className={cx(
49-
styles.experimentGroup,
50-
row.isExpanded && row.subRows.length > 0 && styles.expandedGroup
51-
)}
52-
>
53-
<NestedRow
54-
row={row}
55-
instance={instance}
56-
contextMenuDisabled={contextMenuDisabled}
57-
projectHasCheckpoints={projectHasCheckpoints}
58-
hasRunningExperiment={hasRunningExperiment}
59-
batchRowSelection={batchRowSelection}
60-
/>
61-
{row.isExpanded &&
62-
row.subRows.map(row => (
63-
<NestedRow
64-
row={row}
65-
instance={instance}
66-
key={row.id}
67-
contextMenuDisabled={contextMenuDisabled}
68-
projectHasCheckpoints={projectHasCheckpoints}
69-
hasRunningExperiment={hasRunningExperiment}
70-
batchRowSelection={batchRowSelection}
71-
/>
72-
))}
73-
</div>
74-
)
75-
}
76-
77-
export const TableBody: React.FC<
78-
RowProp & InstanceProp & BatchSelectionProp
79-
> = ({
80-
row,
81-
instance,
82-
contextMenuDisabled,
83-
projectHasCheckpoints,
84-
hasRunningExperiment,
85-
batchRowSelection
86-
}) => {
87-
instance.prepareRow(row)
88-
return (
89-
<div
90-
{...instance.getTableBodyProps({
91-
className: cx(
92-
styles.rowGroup,
93-
styles.tbody,
94-
row.values.id === 'workspace'
95-
? styles.workspaceRowGroup
96-
: styles.normalRowGroup
97-
)
98-
})}
99-
>
100-
<RowContent
101-
row={row}
102-
projectHasCheckpoints={projectHasCheckpoints}
103-
hasRunningExperiment={hasRunningExperiment}
104-
contextMenuDisabled={contextMenuDisabled}
105-
batchRowSelection={batchRowSelection}
106-
/>
107-
{row.isExpanded &&
108-
row.subRows.map(subRow => (
109-
<ExperimentGroup
110-
row={subRow}
111-
instance={instance}
112-
key={subRow.values.id}
113-
contextMenuDisabled={contextMenuDisabled}
114-
projectHasCheckpoints={projectHasCheckpoints}
115-
hasRunningExperiment={hasRunningExperiment}
116-
batchRowSelection={batchRowSelection}
117-
/>
118-
))}
119-
</div>
120-
)
121-
}
122-
12312
export const Table: React.FC<InstanceProp> = ({ instance }) => {
12413
const { getTableProps, rows, flatRows } = instance
12514
const hasCheckpoints = useSelector(

‎webview/src/experiments/components/table/TableBody.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react'
2+
import cx from 'classnames'
3+
import styles from './styles.module.scss'
4+
import { BatchSelectionProp, RowContent } from './Row'
5+
import { InstanceProp, RowProp } from './interfaces'
6+
import { ExperimentGroup } from './ExperimentGroup'
7+
8+
export const TableBody: React.FC<
9+
RowProp & InstanceProp & BatchSelectionProp
10+
> = ({
11+
row,
12+
instance,
13+
contextMenuDisabled,
14+
projectHasCheckpoints,
15+
hasRunningExperiment,
16+
batchRowSelection
17+
}) => {
18+
instance.prepareRow(row)
19+
return (
20+
<div
21+
{...instance.getTableBodyProps({
22+
className: cx(
23+
styles.rowGroup,
24+
styles.tbody,
25+
row.values.id === 'workspace'
26+
? styles.workspaceRowGroup
27+
: styles.normalRowGroup
28+
)
29+
})}
30+
>
31+
<RowContent
32+
row={row}
33+
projectHasCheckpoints={projectHasCheckpoints}
34+
hasRunningExperiment={hasRunningExperiment}
35+
contextMenuDisabled={contextMenuDisabled}
36+
batchRowSelection={batchRowSelection}
37+
/>
38+
{row.isExpanded &&
39+
row.subRows.map(subRow => (
40+
<ExperimentGroup
41+
row={subRow}
42+
instance={instance}
43+
key={subRow.values.id}
44+
contextMenuDisabled={contextMenuDisabled}
45+
projectHasCheckpoints={projectHasCheckpoints}
46+
hasRunningExperiment={hasRunningExperiment}
47+
batchRowSelection={batchRowSelection}
48+
/>
49+
))}
50+
</div>
51+
)
52+
}

0 commit comments

Comments
 (0)