Conditional sticky table head shadows

webview/package.json

@@ -30,6 +30,7 @@
     "lodash.merge": "^4.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.3.5",
     "react-redux": "^8.0.2",
     "react-table": "^7.8.0",
     "react-vega": "^7.4.4",

webview/setup-tests.js

@@ -15,4 +15,13 @@ const mutationObserverMock = jest.fn().mockImplementation(() => {
 })
 global.MutationObserver = mutationObserverMock
 
+const intersectionObserverMock = jest.fn().mockImplementation(() => {
+  return {
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn()
+  }
+})
+global.IntersectionObserver = intersectionObserverMock
+
 StyleUtils.getThemeValue = jest.fn().mockImplementation(() => '#ffffff')

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

@@ -194,6 +194,7 @@ export const Table: React.FC<TableProps & WithChanges> = ({
           filteredCounts={filteredCounts}
           filters={filters}
           columns={columns}
+          root={tableRef.current}
         />
         {rows.map(row => (
           <TableBody

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

@@ -1,9 +1,11 @@
 import { SortDefinition } from 'dvc/src/experiments/model/sortBy'
 import { Experiment, Column } from 'dvc/src/experiments/webview/contract'
+import cx from 'classnames'
 import React, { useRef } from 'react'
 import { HeaderGroup, TableInstance } from 'react-table'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { FilteredCounts } from 'dvc/src/experiments/model/filterBy/collect'
+import { useInView } from 'react-intersection-observer'
 import styles from './styles.module.scss'
 import { MergedHeaderGroups } from './MergeHeaderGroups'
 import { Indicators } from './Indicators'
@@ -21,20 +23,22 @@ interface TableHeadProps {
   sorts: SortDefinition[]
   filteredCounts: FilteredCounts
   filters: string[]
+  root: HTMLElement | null
 }
 
-export const TableHead: React.FC<TableHeadProps> = ({
+export const TableHead = ({
   instance: {
     headerGroups,
     setColumnOrder,
     state: { columnOrder },
     allColumns
   },
+  root,
   filteredCounts,
   filters,
   columns,
   sorts
-}) => {
+}: TableHeadProps) => {
   const orderedColumns = useColumnOrder(columns, columnOrder)
   const allHeaders: HeaderGroup<Experiment>[] = []
   for (const headerGroup of headerGroups) {
@@ -85,9 +89,17 @@ export const TableHead: React.FC<TableHeadProps> = ({
       type: MessageFromWebviewType.REORDER_COLUMNS
     })
   }
+  const [ref, needsShadow] = useInView({
+    root,
+    rootMargin: '-15px 0px 0px 0px',
+    threshold: 1
+  })
 
   return (
-    <div className={styles.thead}>
+    <div
+      className={cx(styles.thead, needsShadow && styles.headWithShadow)}
+      ref={ref}
+    >
       <Indicators
         sorts={sorts}
         filters={filters}

webview/src/experiments/components/table/styles.module.scss

@@ -611,10 +611,15 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 .thead {
   background-color: $bg-color;
   border-bottom: $row-border;
-  box-shadow: 0 5px 8px -2px var(--vscode-widget-shadow);
+  transition: 0.25s all;
+  box-shadow: none;
   position: sticky;
   top: 0;
   z-index: 4;
+
+  &.headWithShadow {
+    box-shadow: 0 5px 8px -2px var(--vscode-widget-shadow);
+  }
 }
 
 .tableIndicators {

webview/src/stories/Table.stories.tsx

@@ -1,12 +1,18 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { ComponentStory } from '@storybook/react'
+import { Meta } from '@storybook/react/types-6-0'
 import rowsFixture from 'dvc/src/test/fixtures/expShow/rows'
 import columnsFixture from 'dvc/src/test/fixtures/expShow/columns'
 import { TableData } from 'dvc/src/experiments/webview/contract'
 import workspaceChangesFixture from 'dvc/src/test/fixtures/expShow/workspaceChanges'
 import deeplyNestedTableData from 'dvc/src/test/fixtures/expShow/deeplyNested'
 import { dataTypesTableData } from 'dvc/src/test/fixtures/expShow/dataTypes'
-import { within, userEvent } from '@storybook/testing-library'
+import {
+  within,
+  userEvent,
+  findByText,
+  getAllByRole
+} from '@storybook/testing-library'
 import Experiments from '../experiments/components/Experiments'
 
 import './test-vscode-styles.scss'
@@ -56,7 +62,7 @@ export default {
   title: 'Table'
 } as Meta
 
-const Template: Story<{ tableData: TableData }> = ({ tableData }) => {
+const Template: ComponentStory<typeof Experiments> = ({ tableData }) => {
   return <Experiments tableData={tableData} />
 }
 
@@ -116,3 +122,37 @@ WithNoSortsOrFilters.args = {
     sorts: []
   }
 }
+
+export const Scrolled: ComponentStory<typeof Experiments> = ({ tableData }) => {
+  return (
+    <div style={{ height: 400, width: 600 }}>
+      <Experiments tableData={tableData} />
+    </div>
+  )
+}
+Scrolled.play = async ({ canvasElement }) => {
+  await findByText(canvasElement, '90aea7f')
+  const rows = getAllByRole(canvasElement, 'row')
+  const lastRow = rows[rows.length - 1]
+  const lastRowCells = within(lastRow).getAllByRole('cell')
+  const lastCell = lastRowCells[lastRowCells.length - 1]
+  lastCell.scrollIntoView()
+}
+Scrolled.parameters = {
+  chromatic: {
+    viewports: [400]
+  },
+  viewport: {
+    defaultViewport: 'scrollable',
+    viewports: {
+      scrollable: {
+        name: 'Scrollable',
+        styles: {
+          height: '400px',
+          width: '600px'
+        },
+        type: 'desktop'
+      }
+    }
+  }
+}

yarn.lock

@@ -14300,6 +14300,11 @@ react-inspector@^5.1.0:
     is-dom "^1.0.0"
     prop-types "^15.0.0"
 
+react-intersection-observer@^9.3.5:
+  version "9.3.5"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.3.5.tgz#df97584c1ef1549a47d4af6380db2fb4b76d7bba"
+  integrity sha512-TiJXVUapzAaIrZCAMBLjyWvwGYNGm0Xpkcwm3NY23b9PsJEBavul0hRFmrwc/LOmBUA/8TlkjCj7lCvjM0q1Hg==
+
 react-is@17.0.2, react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"