Clean up table file structure (#3706)

* Clean up table file structure

* Reduce complexity

* Fix bad merge

Author: sroy3

webview/src/experiments/components/App.tsx

@@ -26,7 +26,7 @@ import {
   updateRows,
   updateSelectedForPlotsCount,
   updateSorts
-} from './table/tableDataSlice'
+} from '../state/tableDataSlice'
 import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
 
 export const App: React.FC<Record<string, unknown>> = () => {

webview/src/experiments/components/Experiments.tsx

@@ -27,7 +27,7 @@ import styles from './table/styles.module.scss'
 import { AddColumns, Welcome } from './GetStarted'
 import { RowSelectionProvider } from './table/RowSelectionContext'
 import { CellValue } from './table/content/Cell'
-import { CellSecondaryName } from './table/CellSecondaryName'
+import { CellSecondaryName } from './table/body/CellSecondaryName'
 import { AddStage } from './AddStage'
 import { buildColumns, columnHelper } from '../util/buildColumns'
 import { sendMessage } from '../../shared/vscode'

webview/src/experiments/components/table/Indicators.tsx

@@ -1,8 +1,12 @@
 import React, { MouseEventHandler, ReactElement, ReactNode } from 'react'
 import { useSelector } from 'react-redux'
 import styles from './styles.module.scss'
-import { CellHintTooltip } from './CellHintTooltip'
-import { focusFiltersTree, focusSortsTree, openPlotsWebview } from './messages'
+import { CellHintTooltip } from './body/CellHintTooltip'
+import {
+  focusFiltersTree,
+  focusSortsTree,
+  openPlotsWebview
+} from '../../util/messages'
 import { Icon } from '../../../shared/components/Icon'
 import {
   Filter,

webview/src/experiments/components/table/RowSelectionContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState } from 'react'
-import { RowProp } from './interfaces'
+import { RowProp } from '../../util/interfaces'
 
 export interface RowSelectionContextValue {
   selectedRows: Record<string, RowProp | undefined>

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

@@ -1,21 +1,13 @@
-import React, {
-  useRef,
-  useState,
-  CSSProperties,
-  useContext,
-  useCallback
-} from 'react'
-import { useSelector } from 'react-redux'
+import React, { useRef, useState, CSSProperties, useContext } from 'react'
 import { ColumnOrderState } from '@tanstack/react-table'
 import cx from 'classnames'
 import styles from './styles.module.scss'
 import { TableHead } from './header/TableHead'
-import { InstanceProp, RowProp } from './interfaces'
 import { RowSelectionContext } from './RowSelectionContext'
-import { TableBody } from './TableBody'
 import { Indicators } from './Indicators'
 import { CommitsAndBranchesNavigation } from './commitsAndBranches/CommitsAndBranchesNavigation'
-import { ExperimentsState } from '../../store'
+import { TableContent } from './body/TableContent'
+import { InstanceProp } from '../../util/interfaces'
 
 interface TableProps extends InstanceProp {
   onColumnOrderChange: (order: ColumnOrderState) => void
@@ -25,51 +17,12 @@ export const Table: React.FC<TableProps> = ({
   instance,
   onColumnOrderChange
 }) => {
-  const { rows, flatRows } = instance.getRowModel()
-
-  const hasCheckpoints = useSelector(
-    (state: ExperimentsState) => state.tableData.hasCheckpoints
-  )
-  const hasRunningExperiment = useSelector(
-    (state: ExperimentsState) => state.tableData.hasRunningExperiment
-  )
-
-  const { clearSelectedRows, batchSelection, lastSelectedRow } =
-    useContext(RowSelectionContext)
+  const { clearSelectedRows } = useContext(RowSelectionContext)
   const [expColumnNeedsShadow, setExpColumnNeedsShadow] = useState(false)
   const [tableHeadHeight, setTableHeadHeight] = useState(55)
 
   const tableRef = useRef<HTMLTableElement>(null)
 
-  const batchRowSelection = useCallback(
-    ({ row: { id } }: RowProp) => {
-      const lastSelectedRowId = lastSelectedRow?.row.id ?? ''
-      const lastIndex =
-        flatRows.findIndex(flatRow => flatRow.id === lastSelectedRowId) || 1
-      const selectedIndex =
-        flatRows.findIndex(flatRow => flatRow.id === id) || 1
-      const rangeStart = Math.min(lastIndex, selectedIndex)
-      const rangeEnd = Math.max(lastIndex, selectedIndex)
-
-      const collapsedIds = flatRows
-        .filter(flatRow => !flatRow.getIsExpanded())
-        .map(flatRow => flatRow.id)
-
-      const batch = flatRows
-        .slice(rangeStart, rangeEnd + 1)
-        .filter(
-          flatRow =>
-            !collapsedIds.some(collapsedId =>
-              flatRow.id.startsWith(`${collapsedId}.`)
-            )
-        )
-        .map(row => ({ row }))
-
-      batchSelection?.(batch)
-    },
-    [flatRows, batchSelection, lastSelectedRow]
-  )
-
   return (
     <div
       className={styles.tableContainer}
@@ -95,18 +48,11 @@ export const Table: React.FC<TableProps> = ({
           setTableHeadHeight={setTableHeadHeight}
           onOrderChange={onColumnOrderChange}
         />
-        {rows.map(row => (
-          <TableBody
-            tableHeaderHeight={tableHeadHeight}
-            root={tableRef.current}
-            row={row}
-            instance={instance}
-            key={row.id}
-            hasRunningExperiment={hasRunningExperiment}
-            projectHasCheckpoints={hasCheckpoints}
-            batchRowSelection={batchRowSelection}
-          />
-        ))}
+        <TableContent
+          instance={instance}
+          tableRef={tableRef}
+          tableHeadHeight={tableHeadHeight}
+        />
       </table>
       <CommitsAndBranchesNavigation />
       <Indicators />

webview/src/experiments/components/table/Cell.tsx renamed to webview/src/experiments/components/table/body/Cell.tsx

@@ -1,12 +1,12 @@
 import { flexRender } from '@tanstack/react-table'
 import React, { ReactNode } from 'react'
 import cx from 'classnames'
-import styles from './styles.module.scss'
-import { CellProp, RowProp } from './interfaces'
 import { CellRowActionsProps, CellRowActions } from './CellRowActions'
-import { CellValue, isValueWithChanges } from './content/Cell'
-import { clickAndEnterProps } from '../../../util/props'
-import { ErrorTooltip } from '../../../shared/components/tooltip/ErrorTooltip'
+import styles from '../styles.module.scss'
+import { CellValue, isValueWithChanges } from '../content/Cell'
+import { CellProp, RowProp } from '../../../util/interfaces'
+import { clickAndEnterProps } from '../../../../util/props'
+import { ErrorTooltip } from '../../../../shared/components/tooltip/ErrorTooltip'
 
 const cellHasChanges = (cellValue: CellValue) =>
   isValueWithChanges(cellValue) ? cellValue.changes : false

webview/src/experiments/components/table/CellHintTooltip.tsx renamed to webview/src/experiments/components/table/body/CellHintTooltip.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode, ReactElement } from 'react'
 import { TippyProps } from '@tippyjs/react'
-import styles from './styles.module.scss'
+import styles from '../styles.module.scss'
 import Tooltip, {
   NORMAL_TOOLTIP_DELAY
-} from '../../../shared/components/tooltip/Tooltip'
+} from '../../../../shared/components/tooltip/Tooltip'
 
 export type CellHintTooltipProps = {
   tooltipContent: ReactNode

webview/src/experiments/components/table/CellRowActions.tsx renamed to webview/src/experiments/components/table/body/CellRowActions.tsx

@@ -4,12 +4,12 @@ import {
   ExperimentStatus,
   isQueued
 } from 'dvc/src/experiments/webview/contract'
-import { Indicator } from './Indicators'
-import { addStarredFilter, openPlotsWebview } from './messages'
-import styles from './styles.module.scss'
 import { CellHintTooltip } from './CellHintTooltip'
-import { clickAndEnterProps } from '../../../util/props'
-import { Clock, StarFull, StarEmpty } from '../../../shared/components/icons'
+import { Indicator } from '../Indicators'
+import { addStarredFilter, openPlotsWebview } from '../../../util/messages'
+import styles from '../styles.module.scss'
+import { clickAndEnterProps } from '../../../../util/props'
+import { Clock, StarFull, StarEmpty } from '../../../../shared/components/icons'
 
 export type CellRowActionsProps = {
   bulletColor?: string

webview/src/experiments/components/table/CellSecondaryName.tsx renamed to webview/src/experiments/components/table/body/CellSecondaryName.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { VSCodeTag } from '@vscode/webview-ui-toolkit/react'
 import { CommitData } from 'dvc/src/experiments/webview/contract'
-import styles from './styles.module.scss'
-import Tooltip from '../../../shared/components/tooltip/Tooltip'
-import { Icon } from '../../../shared/components/Icon'
-import { GitCommit } from '../../../shared/components/icons'
+import styles from '../styles.module.scss'
+import Tooltip from '../../../../shared/components/tooltip/Tooltip'
+import { Icon } from '../../../../shared/components/Icon'
+import { GitCommit } from '../../../../shared/components/icons'
 
 export const CellSecondaryName: React.FC<{
   displayName: string

webview/src/experiments/components/table/ExperimentGroup.tsx renamed to webview/src/experiments/components/table/body/ExperimentGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { BatchSelectionProp } from './Row'
-import { RowProp } from './interfaces'
 import { NestedRow } from './NestedRow'
+import { RowProp } from '../../../util/interfaces'
 
 export const ExperimentGroup: React.FC<RowProp & BatchSelectionProp> = ({
   row,