Skip to content

Commit

Permalink
Break up table file (#2165)
Browse files Browse the repository at this point in the history
  • Loading branch information
julieg18 authored Aug 9, 2022
1 parent ad7d190 commit f915036
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 112 deletions.
48 changes: 48 additions & 0 deletions webview/src/experiments/components/table/ExperimentGroup.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react'
import cx from 'classnames'
import styles from './styles.module.scss'
import { BatchSelectionProp } from './Row'
import { InstanceProp, RowProp } from './interfaces'
import { NestedRow } from './NestedRow'

export const ExperimentGroup: React.FC<
RowProp & InstanceProp & BatchSelectionProp
> = ({
row,
instance,
contextMenuDisabled,
projectHasCheckpoints,
hasRunningExperiment,
batchRowSelection
}) => {
instance.prepareRow(row)
return (
<div
className={cx(
styles.experimentGroup,
row.isExpanded && row.subRows.length > 0 && styles.expandedGroup
)}
>
<NestedRow
row={row}
instance={instance}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
{row.isExpanded &&
row.subRows.map(row => (
<NestedRow
row={row}
instance={instance}
key={row.id}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
))}
</div>
)
}
27 changes: 27 additions & 0 deletions webview/src/experiments/components/table/NestedRow.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react'
import styles from './styles.module.scss'
import { BatchSelectionProp, RowContent } from './Row'
import { InstanceProp, RowProp } from './interfaces'

export const NestedRow: React.FC<
RowProp & InstanceProp & BatchSelectionProp
> = ({
row,
instance,
contextMenuDisabled,
projectHasCheckpoints,
hasRunningExperiment,
batchRowSelection
}) => {
instance.prepareRow(row)
return (
<RowContent
row={row}
className={styles.nestedRow}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
)
}
113 changes: 1 addition & 112 deletions webview/src/experiments/components/table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,123 +3,12 @@ import { useSelector } from 'react-redux'
import cx from 'classnames'
import styles from './styles.module.scss'
import { TableHead } from './TableHead'
import { BatchSelectionProp, RowContent } from './Row'
import { InstanceProp, RowProp } from './interfaces'
import { RowSelectionContext } from './RowSelectionContext'
import { TableBody } from './TableBody'
import { useClickOutside } from '../../../shared/hooks/useClickOutside'
import { ExperimentsState } from '../../store'

export const NestedRow: React.FC<
RowProp & InstanceProp & BatchSelectionProp
> = ({
row,
instance,
contextMenuDisabled,
projectHasCheckpoints,
hasRunningExperiment,
batchRowSelection
}) => {
instance.prepareRow(row)
return (
<RowContent
row={row}
className={styles.nestedRow}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
)
}

export const ExperimentGroup: React.FC<
RowProp & InstanceProp & BatchSelectionProp
> = ({
row,
instance,
contextMenuDisabled,
projectHasCheckpoints,
hasRunningExperiment,
batchRowSelection
}) => {
instance.prepareRow(row)
return (
<div
className={cx(
styles.experimentGroup,
row.isExpanded && row.subRows.length > 0 && styles.expandedGroup
)}
>
<NestedRow
row={row}
instance={instance}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
{row.isExpanded &&
row.subRows.map(row => (
<NestedRow
row={row}
instance={instance}
key={row.id}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
))}
</div>
)
}

export const TableBody: React.FC<
RowProp & InstanceProp & BatchSelectionProp
> = ({
row,
instance,
contextMenuDisabled,
projectHasCheckpoints,
hasRunningExperiment,
batchRowSelection
}) => {
instance.prepareRow(row)
return (
<div
{...instance.getTableBodyProps({
className: cx(
styles.rowGroup,
styles.tbody,
row.values.id === 'workspace'
? styles.workspaceRowGroup
: styles.normalRowGroup
)
})}
>
<RowContent
row={row}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
contextMenuDisabled={contextMenuDisabled}
batchRowSelection={batchRowSelection}
/>
{row.isExpanded &&
row.subRows.map(subRow => (
<ExperimentGroup
row={subRow}
instance={instance}
key={subRow.values.id}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
))}
</div>
)
}

export const Table: React.FC<InstanceProp> = ({ instance }) => {
const { getTableProps, rows, flatRows } = instance
const hasCheckpoints = useSelector(
Expand Down
52 changes: 52 additions & 0 deletions webview/src/experiments/components/table/TableBody.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react'
import cx from 'classnames'
import styles from './styles.module.scss'
import { BatchSelectionProp, RowContent } from './Row'
import { InstanceProp, RowProp } from './interfaces'
import { ExperimentGroup } from './ExperimentGroup'

export const TableBody: React.FC<
RowProp & InstanceProp & BatchSelectionProp
> = ({
row,
instance,
contextMenuDisabled,
projectHasCheckpoints,
hasRunningExperiment,
batchRowSelection
}) => {
instance.prepareRow(row)
return (
<div
{...instance.getTableBodyProps({
className: cx(
styles.rowGroup,
styles.tbody,
row.values.id === 'workspace'
? styles.workspaceRowGroup
: styles.normalRowGroup
)
})}
>
<RowContent
row={row}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
contextMenuDisabled={contextMenuDisabled}
batchRowSelection={batchRowSelection}
/>
{row.isExpanded &&
row.subRows.map(subRow => (
<ExperimentGroup
row={subRow}
instance={instance}
key={subRow.values.id}
contextMenuDisabled={contextMenuDisabled}
projectHasCheckpoints={projectHasCheckpoints}
hasRunningExperiment={hasRunningExperiment}
batchRowSelection={batchRowSelection}
/>
))}
</div>
)
}

0 comments on commit f915036

Please sign in to comment.