[CORE-747] Enable IGV scrolling when tracks are tall (#5452)

Author: eweitz

src/components/igv/IGVBrowser.js

@@ -484,7 +484,6 @@ const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace
       {
         ref: containerRef,
         style: {
-          overflowY: 'visible',
           padding: '10px 0',
           margin: 8,
           border: `1px solid ${colors.dark(0.25)}`,

src/workspace-data/Data.js

@@ -74,7 +74,7 @@ const styles = {
   },
   tableViewPanel: {
     position: 'relative',
-    overflow: 'hidden',
+    overflow: 'auto',
     width: '100%',
     flex: 1,
     display: 'flex',

src/workspace-data/Data.test.ts

@@ -133,4 +133,45 @@ describe('WorkspaceData', () => {
       { timeout: 10000 }
     );
   }, 15000);
+
+  it('has scrollable tableViewPanel to allow vertical scrolling when content is too tall', async () => {
+    // Setup mocks for the test
+    const mockEntityMetadata = jest.fn();
+    mockEntityMetadata.mockResolvedValue(entityMetadata);
+
+    asMockedFn(Workspaces).mockReturnValue({
+      workspace: (_namespace: string, _name: string) => ({
+        entityMetadata: mockEntityMetadata,
+      }),
+    } as any);
+
+    (getIgvUrlParams as jest.Mock).mockReturnValue({
+      igvSession: null,
+      igvGenome: null,
+    });
+
+    const workspaceDataProps = {
+      namespace: 'test-namespace',
+      name: 'test-name',
+      workspace: defaultGoogleWorkspace,
+      refreshWorkspace: () => {},
+      storageDetails: { ...defaultGoogleBucketOptions },
+    };
+
+    await act(async () => {
+      render(h(WorkspaceData, workspaceDataProps));
+    });
+
+    await waitFor(() => {
+      // Find the element with the tableViewPanel styles
+      // The tableViewPanel should have overflow: 'auto' to enable scrolling
+      const tableViewPanels = document.querySelectorAll('[style*="overflow"]');
+      const hasScrollablePanel = Array.from(tableViewPanels).some((el) => {
+        const style = (el as HTMLElement).style;
+        return style.overflow === 'auto' || style.overflowY === 'auto';
+      });
+
+      expect(hasScrollablePanel).toBe(true);
+    });
+  });
 });