Add conditional shadow to sticky experiments column

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

@@ -1,9 +1,10 @@
 import React from 'react'
+import { useInView } from 'react-intersection-observer'
 import cx from 'classnames'
 import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'
 import { Indicator, IndicatorWithJustTheCounter } from './Indicators'
 import styles from './styles.module.scss'
-import { CellProp, RowProp } from './interfaces'
+import { CellProp, WithTableRoot, RowProp } from './interfaces'
 import ClockIcon from '../../../shared/components/icons/Clock'
 import { clickAndEnterProps } from '../../../util/props'
 import { StarFull, StarEmpty } from '../../../shared/components/icons'
@@ -129,27 +130,38 @@ export const RowActions: React.FC<RowActionsProps> = ({
 
 export const FirstCell: React.FC<
   CellProp &
-    RowActionsProps & {
+    RowActionsProps &
+    WithTableRoot & {
       bulletColor?: string
       toggleExperiment: () => void
+      isRowSelected: boolean
+      toggleRowSelection: () => void
+      toggleStarred: () => void
     }
-> = ({ cell, bulletColor, toggleExperiment, ...rowActionsProps }) => {
+> = ({ cell, bulletColor, toggleExperiment, root, ...rowActionsProps }) => {
   const { row, isPlaceholder } = cell
   const {
     original: { queued }
   } = row
-
   const {
     subRowStates: { plotSelections }
   } = rowActionsProps
 
+  const [ref, needsShadow] = useInView({
+    root,
+    rootMargin: '0px 0px 0px -15px',
+    threshold: 1
+  })
+
   return (
     <div
+      ref={ref}
       {...cell.getCellProps({
         className: cx(
           styles.td,
           styles.experimentCell,
-          isPlaceholder && styles.groupPlaceholder
+          isPlaceholder && styles.groupPlaceholder,
+          needsShadow && styles.withExpCellShadow
         )
       })}
     >

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

@@ -5,39 +5,44 @@ import { Experiment, Column } from 'dvc/src/experiments/webview/contract'
 import { HeaderGroup } from 'react-table'
 import { TableHeader } from './TableHeader'
 import styles from './styles.module.scss'
+import { WithTableRoot } from './interfaces'
 import {
   OnDragOver,
   OnDragStart,
   OnDrop
 } from '../../../shared/components/dragDrop/DragDropWorkbench'
 
-export const MergedHeaderGroups: React.FC<{
-  headerGroup: HeaderGroup<Experiment>
-  columns: HeaderGroup<Experiment>[]
-  sorts: SortDefinition[]
-  filters: string[]
-  orderedColumns: Column[]
-  onDragUpdate: OnDragOver
-  onDragStart: OnDragStart
-  onDragEnd: OnDrop
-}> = ({
+export const MergedHeaderGroups: React.FC<
+  {
+    headerGroup: HeaderGroup<Experiment>
+    columns: HeaderGroup<Experiment>[]
+    sorts: SortDefinition[]
+    filters: string[]
+    orderedColumns: Column[]
+    onDragUpdate: OnDragOver
+    onDragStart: OnDragStart
+    onDragEnd: OnDrop
+  } & WithTableRoot
+> = ({
   headerGroup,
   sorts,
   filters,
   columns,
   orderedColumns,
   onDragUpdate,
   onDragEnd,
-  onDragStart
+  onDragStart,
+  root
 }) => {
   return (
     <div
       {...headerGroup.getHeaderGroupProps({
         className: cx(styles.tr, styles.headRow)
       })}
     >
-      {headerGroup.headers.map((column: HeaderGroup<Experiment>) => (
+      {headerGroup.headers.map((column: HeaderGroup<Experiment>, ind) => (
         <TableHeader
+          isFirst={ind === 0}
           key={column.id}
           orderedColumns={orderedColumns}
           column={column}
@@ -47,6 +52,7 @@ export const MergedHeaderGroups: React.FC<{
           onDragOver={onDragUpdate}
           onDragStart={onDragStart}
           onDrop={onDragEnd}
+          root={root}
         />
       ))}
     </div>

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

@@ -2,7 +2,7 @@ import React from 'react'
 import cx from 'classnames'
 import { Experiment } from 'dvc/src/experiments/webview/contract'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
-import { RowProp, WithChanges } from './interfaces'
+import { RowProp, WithChanges, WithTableRoot } from './interfaces'
 import styles from './styles.module.scss'
 import { FirstCell, CellWrapper } from './Cell'
 import { RowSelectionContext } from './RowSelectionContext'
@@ -307,15 +307,18 @@ export type BatchSelectionProp = {
 }
 
 export const RowContent: React.FC<
-  RowProp & { className?: string } & WithChanges & BatchSelectionProp
+  RowProp & { className?: string } & WithChanges &
+    BatchSelectionProp &
+    WithTableRoot
 > = ({
   row,
   className,
   changes,
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection
+  batchRowSelection,
+  root
 }): JSX.Element => {
   const {
     getRowProps,
@@ -406,6 +409,7 @@ export const RowContent: React.FC<
         data-testid={isWorkspace && 'workspace-row'}
       >
         <FirstCell
+          root={root}
           cell={firstCell}
           bulletColor={displayColor}
           starred={starred}

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

@@ -3,23 +3,31 @@ import cx from 'classnames'
 import styles from './styles.module.scss'
 import { TableHead } from './TableHead'
 import { BatchSelectionProp, RowContent } from './Row'
-import { InstanceProp, RowProp, TableProps, WithChanges } from './interfaces'
+import {
+  InstanceProp,
+  RowProp,
+  TableProps,
+  WithChanges,
+  WithTableRoot
+} from './interfaces'
 import { RowSelectionContext } from './RowSelectionContext'
 import { useClickOutside } from '../../../shared/hooks/useClickOutside'
 
 export const NestedRow: React.FC<
-  RowProp & InstanceProp & BatchSelectionProp
+  RowProp & InstanceProp & BatchSelectionProp & WithTableRoot
 > = ({
   row,
   instance,
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection
+  batchRowSelection,
+  root
 }) => {
   instance.prepareRow(row)
   return (
     <RowContent
+      root={root}
       row={row}
       className={styles.nestedRow}
       contextMenuDisabled={contextMenuDisabled}
@@ -31,14 +39,15 @@ export const NestedRow: React.FC<
 }
 
 export const ExperimentGroup: React.FC<
-  RowProp & InstanceProp & BatchSelectionProp
+  RowProp & InstanceProp & BatchSelectionProp & WithTableRoot
 > = ({
   row,
   instance,
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection
+  batchRowSelection,
+  root
 }) => {
   instance.prepareRow(row)
   return (
@@ -49,6 +58,7 @@ export const ExperimentGroup: React.FC<
       )}
     >
       <NestedRow
+        root={root}
         row={row}
         instance={instance}
         contextMenuDisabled={contextMenuDisabled}
@@ -59,6 +69,7 @@ export const ExperimentGroup: React.FC<
       {row.isExpanded &&
         row.subRows.map(row => (
           <NestedRow
+            root={root}
             row={row}
             instance={instance}
             key={row.id}
@@ -73,15 +84,16 @@ export const ExperimentGroup: React.FC<
 }
 
 export const TableBody: React.FC<
-  RowProp & InstanceProp & WithChanges & BatchSelectionProp
+  RowProp & InstanceProp & WithChanges & BatchSelectionProp & WithTableRoot
 > = ({
   row,
   instance,
   changes,
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection
+  batchRowSelection,
+  root
 }) => {
   instance.prepareRow(row)
   return (
@@ -97,6 +109,7 @@ export const TableBody: React.FC<
       })}
     >
       <RowContent
+        root={root}
         row={row}
         projectHasCheckpoints={projectHasCheckpoints}
         hasRunningExperiment={hasRunningExperiment}
@@ -107,6 +120,7 @@ export const TableBody: React.FC<
       {row.isExpanded &&
         row.subRows.map(subRow => (
           <ExperimentGroup
+            root={root}
             row={subRow}
             instance={instance}
             key={subRow.values.id}
@@ -205,6 +219,7 @@ export const Table: React.FC<TableProps & WithChanges> = ({
             hasRunningExperiment={hasRunningExperiment}
             projectHasCheckpoints={hasCheckpoints}
             batchRowSelection={batchRowSelection}
+            root={tableRef.current}
           />
         ))}
       </div>

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

@@ -117,6 +117,7 @@ export const TableHead = ({
           onDragStart={onDragStart}
           onDragUpdate={onDragUpdate}
           onDragEnd={onDragEnd}
+          root={root}
         />
       ))}
     </div>