Sticky header using intersection observer for recordset page #2608

KenyShah24 · 2025-02-11T17:49:08Z

This PR includes code changes to ensure the table header remains sticky while scrolling content on the recordset page using the Intersection Observer.

Issues Identified During Testing:

E2E Testing with Docker:

The Docker image build process encounters compatibility issues with Node.js and npm versions required for the Chaise project.
Additionally, openjdk-8-sdk is missing when running the script.
The included changes address these dependency errors

E2E Testing Locally:

On Windows, the mkdir -p command is not functioning as expected.
A solution for this issue is still being explored.

…into sticky-header-intersection-observer

RFSH

The implemented solution is not responsive and therefore we cannot merge it as is.

The vertical position of the sticky header is calculated on the initial load and remains the same. So if the user squeezes the page or remove a banner/alert (which changes the height of the top section), the sticky header shows up in the wrong spot.

Also there's no reason to keep the height in the React state. It's only used for manipulating the position of sticky header and not used in the render logic, so we shouldn't add it to state.

Other changes that should be applied:

Please remove .last-run.json.
Revert the docker file changes that you did.
Revert the changes in locators/recordset.ts. Instead of using filter, we just need to change the selector to use the :not(.sticky-header) stynax. You can just revert you changes. Once we think this PR is ready, I'll take care of test cases myself.

…or recordsettable

RFSH

We had a call about this and I'm going to summarize what we talked about here:

The attachContainerHeightSensors function already does the calculations that we need and so we shouldn't add another resizeSensor for doing similar calculations.

Instead we can add a callback as an argument to attachContainerHeightSensors which would tell us about the height changes. And then we can use that callback for setting the top of the sticky header.

RFSH

With the latest changes, the sticky header is now properly adjusting as the available space above the table changes. The width of the headers are also adjusting properly.

But there are still two functionality issues that I mentioned in my comments and I'll summarize here:

The top calculation is not working properly for the popups. It's not honoring the vertical space outside of the modal, so the sticky header shows up on top of the page size dropdown.
This implementation is forcing React to rerender the recordset component and all its children after each height/width change. This can cause performance issues on busier pages.

By the way, please update this branch with the latest changes of the main branch.

RFSH · 2025-04-17T19:40:33Z

src/components/recordset/recordset-table.tsx

@@ -33,13 +33,16 @@ type RecordsetTableProps = {
   * Determines if both horizontal scrollbars should always be visible, or if only one should appear at a time.
   */
  showSingleScrollbar?: boolean,
+  // Determines the top for the sticky header


Use JSDoc style of comment like the previous prop that you see. So

/** * Determines the top for the sticky header */ headerTop?: number,

RFSH · 2025-04-17T19:42:58Z

src/assets/scss/_recordset-table.scss

  position: absolute !important;
 }
+.sticky-header {


Please rename this to chaise-table-sticky-header to be more specific.

RFSH · 2025-04-17T19:44:22Z

src/components/recordset/recordset-table.tsx

@@ -423,6 +495,15 @@ const RecordsetTable = ({
    })
  }

+  const renderHeader = () => {
+    return(
+            <tr>


Fix the indentation to match the rest of the file.

RFSH · 2025-04-17T19:49:52Z

src/utils/ui-utils.ts

@@ -22,7 +23,7 @@ import Tooltip from 'bootstrap/js/dist/tooltip';
 *
 * TODO offsetHeight is a rounded integer, should we use getBoundingClientRect().height in this function instead?
 */
-export function attachContainerHeightSensors(parentContainer?: any, parentContainerSticky?: any, useDocHeight?: boolean) {
+export function attachContainerHeightSensors(parentContainer?: any, parentContainerSticky?: any, useDocHeight?: boolean, onContainerHeightChange?: (dimensions: any) => void) {


Don't use any. Create a proper type here and for the state variable in src/components/recordset/recordset.tsx import that type:

export type ContainerHeightSensorDimensions = { /** * explain what it is here */ top: number; }

Also this line is now too long (you should see it being highlighted as a warning on VSCode if you have eslint installed). So please break it into multiple lines.

RFSH · 2025-04-17T19:50:33Z

src/utils/ui-utils.ts

@@ -53,6 +54,7 @@ export function attachContainerHeightSensors(parentContainer?: any, parentContai
      appContent.style.overflowY = 'auto';
      appContent.style.height = ((parentUsableHeight / windowRef.innerHeight) * 100) + 'vh';
      container.style.height = 'unset';
+      appContent.classList.add('app-content-container-scrollable');


Add this to CLASS_NAMES in src/utils/constants.ts.

RFSH · 2025-04-17T19:53:14Z

src/components/recordset/recordset-table.tsx

@@ -534,7 +612,14 @@ const RecordsetTable = ({
      </div>
      {/*  This div will be used as the target (end of table) for the intersection observer to hide the 
      top scrollbar when the bottom one is visible */}
-      <div className='dummy-table-end-div' ref={tableEndRef}/>
+      <div className='dummy-table-end-div' ref={tableEndRef} />
+      {config.displayMode.indexOf(RecordsetDisplayMode.RELATED) !== 0 && <div className='sticky-header' id='sticky-header' ref={stickyHeaderRef}>


Create a variable for config.displayMode.indexOf(RecordsetDisplayMode.RELATED) !== 0 at the beginning of this component. Call it something like enableStickyHeader. And then use this boolean for all the different places that you have the sticky header logic.

Remove the id attribute.

RFSH · 2025-04-17T20:16:54Z

src/utils/ui-utils.ts

+      if (onContainerHeightChange) {
+        //To notify height change
+        onContainerHeightChange({
+          top: containerSticky.offsetHeight + parentContainerSticky.offsetHeight,


Instead of recalculating this, is it possible to change the code above to first calculate the top. And then sets the container height using this?

What you have is not working properly for popups. You can test this on isa:dataset table (https://dev.derivacloud.org/chaise/recordset/#1/isa:dataset@sort(accession::desc::). For example the Title facet is a good example.

RFSH · 2025-04-17T20:28:52Z

src/components/recordset/recordset-table.tsx

+    const syncWidths = () => {
+      if (stickyHeaderRef.current && tableRef.current) {
+
+        const originalThs = tableRef.current.querySelectorAll('tbody > tr > td');


Why is this selecting tds? and not th?

RFSH · 2025-04-17T20:32:59Z

src/components/recordset/recordset.tsx

@@ -367,7 +369,8 @@ const RecordsetInner = ({
    }

    // handle the scrollable container
-    const resizeSensors = attachContainerHeightSensors(parentContainer, parentStickyArea);
+    const resizeSensors = attachContainerHeightSensors(parentContainer, parentStickyArea, undefined, setTopPanelDimensions);


The more I think about it, the more I don't like this solution. Since the callback is called on each height or width change, React is rerendering recordset component and all its children on each height/width change. So this solution would never work on record page, and it can slow the page down on long recordset pages.

As I mentioned before, we're just manipulating the styles attached to the elements, so there's no reason to involve React state in this. Instead of calling setTopPanelDimensions and passing the state variable to RecordsetTable, is there anyway that we can pass the top value from here? Maybe attach it as a data-* attribute to an element and then grab it from that page?

KenyShah24 added 10 commits December 11, 2024 09:11

sticky-header-intersection-observer

e4366eb

Cleanup code

35cfd8b

Merge branch 'master' of https://github.com/informatics-isi-edu/chaise …

1061ab1

…into sticky-header-intersection-observer

Fix test for recorset table header

314c1d9

Merge branch 'master' of https://github.com/informatics-isi-edu/chaise …

a6b4083

…into sticky-header-intersection-observer

Reverse playwright setup changes

084ab9d

Fix 2 locators for recordset

b5f6adc

Fix locators for recordset

2fb2a86

Add new node version for Docker that's compatible with project

e7a17f3

CLeanup

f6e1cf6

KenyShah24 requested a review from RFSH February 11, 2025 17:49

RFSH self-assigned this Feb 11, 2025

RFSH requested changes Feb 21, 2025

View reviewed changes

Different approach for calculating header top to show sticky header f…

d51e1f5

…or recordsettable

RFSH requested changes Mar 26, 2025

View reviewed changes

KenyShah24 added 8 commits April 1, 2025 10:36

Approach refined as per comments

ae4f216

Removed redundant styles

4459ba9

Remove redundant styles

60bb669

Cleanup files

60a366d

Cleanup files

08c8c06

Add resize observer to sync width

ca340f9

Added comments wherever needed and variable name changes

a5fba7c

Added comments wherever needed and variable name changes

f2dfff2

RFSH requested changes Apr 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sticky header using intersection observer for recordset page #2608

Sticky header using intersection observer for recordset page #2608

KenyShah24 commented Feb 11, 2025

RFSH left a comment

RFSH left a comment

RFSH left a comment

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

RFSH Apr 17, 2025

Sticky header using intersection observer for recordset page #2608

Are you sure you want to change the base?

Sticky header using intersection observer for recordset page #2608

Conversation

KenyShah24 commented Feb 11, 2025

RFSH left a comment

Choose a reason for hiding this comment

RFSH left a comment

Choose a reason for hiding this comment

RFSH left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment