fix: don't hard code discovery accessbility link location (#1585)

Author: mfshao

src/Discovery/Discovery.css

@@ -1,6 +1,6 @@
 .discovery-container {
   background-color: #f2f2f2;
-  padding: 30px 32px;
+  padding: 0 32px 30px 32px;
   min-height: calc(100vh - 221px);
   display: flex;
   flex-direction: column;
@@ -503,9 +503,9 @@
   font-weight: bold;
 }
 
-#discovery-page-accessibility-links {
-  top: 129px;
-  padding-right: 16px;
+.discovery-page-accessibility-links {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .discovery-hidden-link {

src/Discovery/Discovery.tsx

@@ -1,5 +1,6 @@
 import React, {
   useState, useEffect, ReactNode, useMemo,
+  useRef,
 } from 'react';
 import * as JsSearch from 'js-search';
 import jsonpath from 'jsonpath';
@@ -236,6 +237,8 @@ const Discovery: React.FunctionComponent<Props> = (props: Props) => {
       || config.features.search.tagSearchDropdown.collapseOnDefault === undefined),
   );
   const [visibleResources, setVisibleResources] = useState([]);
+  const [discoveryTopPadding, setDiscoveryTopPadding] = useState(30);
+  const discoveryAccessibilityLinksRef = useRef(null);
 
   const handleSearchChange = (ev) => {
     const { value } = ev.currentTarget;
@@ -340,6 +343,13 @@ const Discovery: React.FunctionComponent<Props> = (props: Props) => {
     }
   });
 
+  // to dynamically set the top padding for discovery panel to compensate for the height of the accessibility links
+  useEffect(() => {
+    if (discoveryAccessibilityLinksRef.current) {
+      setDiscoveryTopPadding(30 - discoveryAccessibilityLinksRef.current.clientHeight);
+    }
+  }, [setDiscoveryTopPadding]);
+
   // Set up table columns
   // -----
   const columns = config.studyColumns.map((column) => ({
@@ -647,11 +657,11 @@ const Discovery: React.FunctionComponent<Props> = (props: Props) => {
   // Disabling noninteractive-tabindex rule because the span tooltip must be focusable as per https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#tooltip
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
   return (
-    <div className='discovery-container'>
+    <div className='discovery-container' style={{ paddingTop: discoveryTopPadding }}>
       {(config.features.pageTitle && config.features.pageTitle.enabled)
         && <h1 className='discovery-page-title'>{config.features.pageTitle.text || 'Discovery'}</h1>}
 
-      <DiscoveryAccessibilityLinks />
+      <DiscoveryAccessibilityLinks ref={discoveryAccessibilityLinksRef} />
 
       {/* Header with stats */}
       <div className='discovery-header'>

src/Discovery/DiscoveryAccessibilityLinks.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Tooltip from 'rc-tooltip';
 
 const tooltipText = 'These accessibility links assist with keyboard navigation of the site. Selecting a link will bring tab focus to the specified page content.';
@@ -23,8 +23,8 @@ const viewLinkedElement = (elementId) => {
   });
 };
 
-const DiscoveryAccessibilityLinks = () => (
-  <div className='g3-accessibility-links' id='discovery-page-accessibility-links'>
+const DiscoveryAccessibilityLinks = forwardRef((props, ref) => (
+  <div className='discovery-page-accessibility-links' ref={ref}>
     <Tooltip
       placement='left'
       overlay={tooltipText}
@@ -80,6 +80,6 @@ const DiscoveryAccessibilityLinks = () => (
       <span>Pagination</span>
     </a>
   </div>
-);
+));
 
 export default DiscoveryAccessibilityLinks;

testSchema.sh

@@ -8,7 +8,6 @@ testCases=(
 bpa "data.bloodpac.org"
 dcf "nci-crdc.datacommons.io"
 gtex "gen3.biodatacatalyst.nhlbi.nih.gov"
-anvil "gen3.theanvil.io"
 genomel "genomel.bionimbus.org"
 )
 index=0