Clean up table file structure

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 → 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 → 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 → 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 → 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 → 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,

webview/src/experiments/components/table/NestedRow.tsx → webview/src/experiments/components/table/body/NestedRow.tsx

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

webview/src/experiments/components/table/Row.tsx → webview/src/experiments/components/table/body/Row.tsx

@@ -1,63 +1,17 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
+import cx from 'classnames'
 import React, { useCallback, useContext, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
-import cx from 'classnames'
-import {
-  Experiment,
-  isQueued,
-  isRunning
-} from 'dvc/src/experiments/webview/contract'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { EXPERIMENT_WORKSPACE_ID } from 'dvc/src/cli/dvc/contract'
-import { RowProp } from './interfaces'
-import styles from './styles.module.scss'
+import { isQueued, isRunning } from 'dvc/src/experiments/webview/contract'
 import { FirstCell, CellWrapper } from './Cell'
-import { RowSelectionContext } from './RowSelectionContext'
 import { RowContextMenu } from './RowContextMenu'
-import { sendMessage } from '../../../shared/vscode'
-import { ContextMenu } from '../../../shared/components/contextMenu/ContextMenu'
-import { HandlerFunc } from '../../../util/props'
-import { cond } from '../../../util/helpers'
-import { ExperimentsState } from '../../store'
-
-const getExperimentTypeClass = ({ status, selected }: Experiment) => {
-  if (isRunning(status)) {
-    return styles.runningExperiment
-  }
-  if (isQueued(status)) {
-    return styles.queuedExperiment
-  }
-  if (selected === false) {
-    return styles.unselectedExperiment
-  }
-
-  return styles.normalExperiment
-}
-
-const getRowClassNames = (
-  original: Experiment,
-  flatIndex: number,
-  isRowFocused: boolean,
-  isRowSelected: boolean,
-  isWorkspace: boolean,
-  className?: string
-) => {
-  return cx(
-    className,
-    styles.experimentsTr,
-    styles.bodyRow,
-    getExperimentTypeClass(original),
-    cond(
-      flatIndex % 2 !== 0 && !isRowSelected,
-      () => styles.oddRow,
-      () => styles.evenRow
-    ),
-    isWorkspace ? styles.workspaceRow : styles.normalRow,
-    styles.row,
-    isRowSelected && styles.rowSelected,
-    isRowFocused && styles.rowFocused
-  )
-}
+import styles from '../styles.module.scss'
+import { RowProp } from '../../../util/interfaces'
+import { RowSelectionContext } from '../RowSelectionContext'
+import { ContextMenu } from '../../../../shared/components/contextMenu/ContextMenu'
+import { HandlerFunc } from '../../../../util/props'
+import { ExperimentsState } from '../../../store'
+import { toggleExperiment, toggleStarred } from '../../../util/messages'
 
 export type BatchSelectionProp = {
   batchRowSelection: (prop: RowProp) => void
@@ -77,25 +31,10 @@ export const RowContent: React.FC<
     (state: ExperimentsState) => state.tableData.changes
   )
   const { getVisibleCells, original, index, getIsExpanded, subRows } = row
-  const { id } = original
+  const { displayColor, error, starred, id, status, selected } = original
   const [firstCell, ...cells] = getVisibleCells()
-  const { displayColor, error, starred } = original
   const isWorkspace = id === EXPERIMENT_WORKSPACE_ID
   const changesIfWorkspace = isWorkspace ? changes : undefined
-  const toggleExperiment = () => {
-    sendMessage({
-      payload: id,
-      type: MessageFromWebviewType.TOGGLE_EXPERIMENT
-    })
-  }
-
-  const toggleStarred = () => {
-    !isWorkspace &&
-      sendMessage({
-        payload: [id],
-        type: MessageFromWebviewType.TOGGLE_EXPERIMENT_STAR
-      })
-  }
 
   const { toggleRowSelected, selectedRows } = useContext(RowSelectionContext)
 
@@ -131,6 +70,11 @@ export const RowContent: React.FC<
 
   const [menuActive, setMenuActive] = useState<boolean>(false)
 
+  const running = isRunning(status)
+  const queued = isQueued(status)
+  const unselected = selected === false
+  const isOdd = index % 2 !== 0 && !isRowSelected
+
   return (
     <ContextMenu
       disabled={contextMenuDisabled}
@@ -149,13 +93,23 @@ export const RowContent: React.FC<
       }
     >
       <tr
-        className={getRowClassNames(
-          original,
-          index,
-          menuActive,
-          isRowSelected,
-          isWorkspace,
-          className
+        className={cx(
+          className,
+          styles.experimentsTr,
+          styles.bodyRow,
+          styles.row,
+          {
+            [styles.runningExperiment]: running,
+            [styles.queuedExperiment]: queued,
+            [styles.unselectedExperiment]: !running && !queued && unselected,
+            [styles.normalExperiment]: !running && !queued && !unselected,
+            [styles.oddRow]: isOdd,
+            [styles.evenRow]: !isOdd,
+            [styles.workspaceRow]: isWorkspace,
+            [styles.normalRow]: !isWorkspace,
+            [styles.rowSelected]: isRowSelected,
+            [styles.rowFocused]: menuActive
+          }
         )}
         tabIndex={0}
         aria-selected={isRowSelected}
@@ -169,9 +123,9 @@ export const RowContent: React.FC<
           isRowSelected={isRowSelected}
           showSubRowStates={!getIsExpanded() && !isWorkspace}
           subRowStates={subRowStates}
-          toggleExperiment={toggleExperiment}
+          toggleExperiment={() => toggleExperiment(id)}
           toggleRowSelection={toggleRowSelection}
-          toggleStarred={toggleStarred}
+          toggleStarred={() => !isWorkspace && toggleStarred(id)}
         />
         {cells.map(cell => {
           const cellId = `${cell.column.id}___${cell.row.original.id}`