From ee3db4b95117262afb41f1fa6c2c390ce2c106cc Mon Sep 17 00:00:00 2001
From: vzpgb <45467497+vzpgb@users.noreply.github.com>
Date: Wed, 6 Nov 2024 11:10:03 -0600
Subject: [PATCH 1/9] VADC-1482:  Updated buttons' colors in Eurler diagram
 according to 508 (#1626)

* fix(cardDescriptionParsing): initial commit (#1612)

* fix(cardDescriptionParsing): initial commit

* fix(cardDescriptionParsing): ranner linter and fixed error

* Bugfix/combo box labels (#1611)

* bugfix(comboBoxLabels): Began dev of new select box component, need to resolve issues with setting selectedValue

* bugfix(comboBoxLabels): made select box a controllable component, moved IsEnterOrSpace into accessibilityUtils folder

* bugfix(comboBoxLabels): removed console.log statements

* bugfix(comboBoxLabels): ran linter

* bugfix(comboBoxLabels): removed commented code

* bugfix(comboBoxLabels): ran linter

* bugfix(comboBoxLabels): Added Teams Dropdown test

* bugfix(comboBoxLabels): updated  Teams Dropdown test

* bugfix(comboBoxLabels): removed unneeded div element from TeamDropdown

* fix(comboBoxLabels): Updated label text

* fix(comboBoxLabels): Updated unit test

* VADC-1420: Fixed modal button color to ensure accessibility (#1615)

* fix(vadc-1420): Fixed modal button color to ensure accessibility

* Updated background/border/hover colors for modal window

* (VADC-1430): fix(vaLogoAltText)

* VADC-1479: Updated Previous/Next buttons' colors for VA GWAS according to 508 (#1618)

* fix(vadc-1479): Updated colors for the GWAS next/previous buttons

* fix(vadc-1479): Undo automatic discovery style changes

* fix(vadc-1479): Updated class in CSS for Previous/Next buttons

* Use updated colors only for active button (#1620)

* VADC-1516: Updated colors for the buttons in the GWAS modal according to 508 (#1621)

* fix(vadc-1516): Updated colors for the buttons in the GWAS modal

* fix(vadc-1516): Unify style order

* fix(vadc-1516): Refactor CSS

* fix(vadc-1516): Added comment

* fix(vadc-1516): Updated text color for the dropdown in the Team's modal

* fix(vadc-1516): formatting

* fix(vadc-1516): formatting

* fix(vadc-1516): formatting

* fix(vadc-1516): formatting

* fix(vadc-1482):  Updated button colors in Eurler diagram

* fix(vadc-1482): Updated focus color for the Eurler diagram

---------

Co-authored-by: Jarvis <113449836+jarvisraymond-uchicago@users.noreply.github.com>
---
 .../AccessibilityCSS/AccessibilityGWAS.css    | 43 ++++++++++++++-----
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AccessibilityCSS/AccessibilityGWAS.css b/src/Analysis/SharedUtils/AccessibilityUtils/AccessibilityCSS/AccessibilityGWAS.css
index 2ac34ec05..2b1431372 100644
--- a/src/Analysis/SharedUtils/AccessibilityUtils/AccessibilityCSS/AccessibilityGWAS.css
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AccessibilityCSS/AccessibilityGWAS.css
@@ -5,26 +5,37 @@
   border-color: #194C90;
 }
 
-.GWASUI-navBtn:not([disabled]):hover,
-.GWASUI-navBtn:not([disabled]):focus {
-  background: #2466AC;
-  border-color: #2466AC;
+.gwas-modal .ant-btn-primary:not([disabled]) {
+  background: #194C90;
+  border-color: #194C90;
 }
 
-.gwas-modal .ant-btn-primary:not([disabled]) {
+.gwas-modal .ant-btn-default {
+  color: #194C90;
+  border-color: #194C90;
+}
+
+.euler-diagram-controls .ant-btn-primary:not([disabled]),
+.euler-diagram-controls  .ant-btn-primary:not([disabled]):focus {
   background: #194C90;
   border-color: #194C90;
 }
 
-.gwas-modal .ant-btn-primary:not([disabled]):hover,
-.gwas-modal .ant-btn-primary:not([disabled]):focus {
+.euler-diagram-controls  .ant-btn-secondary {
+  color: #194C90;
+  border-color: #194C90;
+}
+
+.GWASUI-navBtn:not([disabled]):hover,
+.GWASUI-navBtn:not([disabled]):focus {
   background: #2466AC;
   border-color: #2466AC;
 }
 
-.gwas-modal .ant-btn-default {
-  color: #194C90;
-  border-color: #194C90;
+.gwas-modal .ant-btn-primary:not([disabled]):hover,
+.gwas-modal .ant-btn-primary:not([disabled]):focus {
+  background: #2466AC;
+  border-color: #2466AC;
 }
 
 .gwas-modal .ant-btn-default:hover,
@@ -32,3 +43,15 @@
   color: #2466AC;
   border-color: #2466AC;
 }
+
+.euler-diagram-controls  .ant-btn-primary:not([disabled]):hover {
+  background: #2466AC;
+  border-color: #2466AC;
+}
+
+.euler-diagram-controls  .ant-btn-secondary:hover,
+.euler-diagram-controls  .ant-btn-secondary:focus {
+
+  color: #2466AC;
+  border-color: #2466AC;
+}

From 43acb19fdd30cc14b78980994beb2f0804f7b35e Mon Sep 17 00:00:00 2001
From: pieterlukasse <pieterlukasse@gmail.com>
Date: Mon, 4 Nov 2024 21:26:09 +0100
Subject: [PATCH 2/9] fix: improve error message for Euler diagram

...replacing it with a more generic error message that applies better to
all possible error scenarios
---
 src/Analysis/GWASApp/Utils/constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Analysis/GWASApp/Utils/constants.js b/src/Analysis/GWASApp/Utils/constants.js
index 243ad90fa..a9bb9bbed 100644
--- a/src/Analysis/GWASApp/Utils/constants.js
+++ b/src/Analysis/GWASApp/Utils/constants.js
@@ -19,7 +19,7 @@ export const GWASAppSteps = [
 export const MESSAGES = {
   OVERLAP_ERROR: {
     title:
-      'None of the persons in the (remaining) population of your selected cohorts overlap with the study population',
+      'One or more groups have no overlap with the (remaining) population of any of the other groups',
     messageType: 'warning',
   },
   NO_BINS_ERROR: {

From 13d7261a6182c3ab22a67c7c1c2c1a38f0d22cd9 Mon Sep 17 00:00:00 2001
From: pieterlukasse <pieterlukasse@gmail.com>
Date: Wed, 6 Nov 2024 21:25:48 +0100
Subject: [PATCH 3/9] Fix/enable legacy vs new data dictionary - part2 (#1629)

* fix: revert and bring back old data dictionary button component

...from https://github.com/uc-cdis/data-portal/tree/5dc09282573e93f8e11d44f53d65e3cf677256c6/src/Analysis/AtlasDataDictionary/AtlasDataDictionaryButton
...which in turn is a restore from older code https://github.com/uc-cdis/data-portal/pull/1478/

* fix: using AtlasLegacyDataDictionaryButton for the legacy scenario

* fix: remove unused variables

* fix: fix AtlasLegacyDataDictionaryButton tests

* feat: use feature flag legacyDataDictionary instead of analysis app attribute

* fix: remove duplicated AtlasDataDictionaryButton css file

* fix: use project specific feature flag name
---
 docs/portal_config.md                         |  2 +-
 src/Analysis/AnalysisApp.jsx                  |  8 +++-
 .../AtlasDataDictionaryContainer.tsx          | 22 ++++------
 .../AtlasLegacyDataDictionaryButton.jsx       | 43 +++++++++++++++++++
 .../AtlasLegacyDataDictionaryButton.test.jsx  | 19 ++++++++
 5 files changed, 77 insertions(+), 17 deletions(-)
 create mode 100644 src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.jsx
 create mode 100644 src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.test.jsx

diff --git a/docs/portal_config.md b/docs/portal_config.md
index b085cb7a8..9e422aec2 100644
--- a/docs/portal_config.md
+++ b/docs/portal_config.md
@@ -204,6 +204,7 @@ Below is an example, with inline comments describing what each JSON block config
     "studyRegistration": true, // optional, whether to enable the study registration feature
     "workspaceRegistration": true, // optional, whether to enable the workspace registration feature
     "workspaceTokenServiceRefreshTokenAtLogin": true, // optional, whether to refresh the WTS token directly at portal login (recommended mode). If not set, this refresh happens only when the user enters the workspace section of the portal (default/old/previous mode).
+    "legacyVADCDataDictionary": false, // optional, VADC specific. Set to "true" to ensure the new version of the /analysis/AtlasDataDictionary data dictionary is displayed the user navigates to /analysis/AtlasDataDictionary, and when the user clicks on the data dictionary button in when in the Atlas app page.
   },
   "dataExplorerConfig": { // required only if featureFlags.explorer is true; configuration for the Data Explorer (/explorer); can be replaced by explorerConfig, see Multi Tab Explorer doc
     "charts": { // optional; indicates which charts to display in the Data Explorer
@@ -749,7 +750,6 @@ Below is an example, with inline comments describing what each JSON block config
       "description": "My app description", // App title/name, also displayed on the App card in the /analysis page
       "image": "/src/img/analysis-icons/myapp-image.svg",  // App logo/image to be displayed on the App card in the /analysis page
       "needsTeamProject": true, // Optional. Whether the app needs a "team project" selection to be made by the user first. If true, it will force the user to select a "team project" first. See also https://github.com/uc-cdis/data-portal/pull/1445
-      "dataDictionaryVersion": "new", // Optional, for custom AtlasDataDictionary. Set to "new" to ensure the new version of the /analysis/AtlasDataDictionary data dictionary when the user navigates to /analysis/AtlasDataDictionary.
     },
     {
       "title": "My other app",
diff --git a/src/Analysis/AnalysisApp.jsx b/src/Analysis/AnalysisApp.jsx
index 6ae96918d..58aa48ec2 100644
--- a/src/Analysis/AnalysisApp.jsx
+++ b/src/Analysis/AnalysisApp.jsx
@@ -17,6 +17,8 @@ import CheckForTeamProjectApplication from './SharedUtils/TeamProject/Utils/Chec
 import TeamProjectHeader from './SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader';
 import './AnalysisApp.css';
 import AtlasDataDictionaryButton from './AtlasDataDictionary/AtlasDataDictionaryButton/AtlasDataDictionaryButton';
+import AtlasLegacyDataDictionaryButton from './AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton';
+import isEnabled from '../helpers/featureFlags';
 
 const queryClient = new QueryClient();
 
@@ -139,7 +141,7 @@ class AnalysisApp extends React.Component {
       return (
         <div className='analysis-app_flex_row'>
           <AtlasDataDictionaryContainer
-            dataDictionaryVersion={analysisApps[app].dataDictionaryVersion}
+            useLegacyDataDictionary={isEnabled('legacyVADCDataDictionary')}
           />
         </div>
       );
@@ -168,7 +170,9 @@ class AnalysisApp extends React.Component {
         <React.Fragment>
           <div className='analysis-app__iframe-wrapper'>
             {this.state.app.title === 'OHDSI Atlas' && (
-              <AtlasDataDictionaryButton />
+              isEnabled('legacyVADCDataDictionary')
+                ? <AtlasLegacyDataDictionaryButton />
+                : <AtlasDataDictionaryButton />
             )}
             <iframe
               className='analysis-app__iframe'
diff --git a/src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.tsx b/src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.tsx
index 0c3465c8a..74be73e6a 100644
--- a/src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.tsx
+++ b/src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useLocation, useHistory, useRouteMatch } from 'react-router-dom';
-import ProtectedContent from '../../Login/ProtectedContent';
 import AtlasDataDictionaryLoading from './AtlasDataDictionaryTable/AtlasDataDictionaryLoading';
-import AtlasDataDictionaryButton from './AtlasDataDictionaryButton/AtlasDataDictionaryButton';
+import AtlasLegacyDataDictionaryButton from './AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton';
 import './AtlasDataDictionary.css';
 
-const AtlasDataDictionaryContainer = ({ dataDictionaryVersion }) => {
-  const location = useLocation();
-  const history = useHistory();
-  const match = useRouteMatch();
-
-  if (!dataDictionaryVersion || !dataDictionaryVersion.includes('new')) {
-    // Default legacy component: render a div with AtlasDataDictionaryButton when
-    // no dataDictionaryVersion is set or it does not include 'new':
+const AtlasDataDictionaryContainer = ({ useLegacyDataDictionary }) => {
+  if (useLegacyDataDictionary) {
+    // Default legacy component: render a div with AtlasLegacyDataDictionaryButton when
+    // useLegacyDataDictionary is set to true:
     return (
-      <div style={{ width: '100%' }}><AtlasDataDictionaryButton /></div>
+      <div style={{ width: '100%' }}><AtlasLegacyDataDictionaryButton /></div>
     );
   }
   return (
@@ -26,11 +20,11 @@ const AtlasDataDictionaryContainer = ({ dataDictionaryVersion }) => {
 };
 
 AtlasDataDictionaryContainer.propTypes = {
-  dataDictionaryVersion: PropTypes.string,
+  useLegacyDataDictionary: PropTypes.bool,
 };
 
 AtlasDataDictionaryContainer.defaultProps = {
-  dataDictionaryVersion: null,
+  useLegacyDataDictionary: false,
 };
 
 export default AtlasDataDictionaryContainer;
diff --git a/src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.jsx b/src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.jsx
new file mode 100644
index 000000000..10df10cf8
--- /dev/null
+++ b/src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.jsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Modal } from 'antd';
+import Button from '@gen3/ui-component/dist/components/Button';
+import '../AtlasDataDictionaryButton/AtlasDataDictionaryButton.css';
+
+const AtlasLegacyDataDictionaryButton = () => {
+  const dataDictionaryURL = 'https://vincicentral.vinci.med.va.gov/SitePages/VINCI_University-VADC_Academy.aspx';
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className='atlas-data-dictionary-button' data-testid='atlas-data-dictionary-button'>
+      <Modal
+        title="You're now leaving the VA Data Commons"
+        open={isModalOpen}
+        className='atlas-data-dictionary-button-modal'
+        onOk={() => {
+          window.open(dataDictionaryURL, '_blank');
+          handleCancel();
+        }}
+        onCancel={handleCancel}
+      >
+        <p>
+          The VADC website, privacy and security policies don&apos;t apply to the
+          site or app you&apos;re about to visit.
+        </p>
+      </Modal>
+      <Button
+        className='analysis-app__button'
+        onClick={showModal}
+        label='MVP Data Dictionary'
+        buttonType='secondary'
+        rightIcon='external-link'
+      />
+    </div>
+  );
+};
+export default AtlasLegacyDataDictionaryButton;
diff --git a/src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.test.jsx b/src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.test.jsx
new file mode 100644
index 000000000..5542142a6
--- /dev/null
+++ b/src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.test.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import AtlasLegacyDataDictionaryButton from './AtlasLegacyDataDictionaryButton';
+
+describe('AtlasLegacyDataDictionaryButton', () => {
+  it('renders the AtlasLegacyDataDictionaryButton component with an "MVP Data Dictionary" Button', () => {
+    const { getByRole, getByTestId } = render(<AtlasLegacyDataDictionaryButton />);
+    expect(getByRole('button')).toBeInTheDocument();
+    expect(getByRole('button')).toHaveTextContent('MVP Data Dictionary');
+    expect(getByTestId('atlas-data-dictionary-button')).toBeInTheDocument();
+  });
+
+  it('shows the Modal when the button is clicked', () => {
+    const { getByRole, queryByText } = render(<AtlasLegacyDataDictionaryButton />);
+    fireEvent.click(getByRole('button'));
+    expect(queryByText('You\'re now leaving the VA Data Commons')).toBeInTheDocument();
+  });
+});

From 3cc31364748e688d7bcf4d009ccf338d2741534f Mon Sep 17 00:00:00 2001
From: Jarvis Raymond <jarvisraymond@uchicago.edu>
Date: Thu, 14 Nov 2024 11:55:43 -0600
Subject: [PATCH 4/9] feat(spikeAntDStrategy): Created working prototype for
 CohortDefinations error

---
 .../SelectCohort/Utils/CohortDefinitions.jsx  | 64 +++++++++++--------
 .../AntDAccessibilityFixes/SetDOMAttribute.js | 17 +++++
 .../AntDAccessibilityFixes/index.js           | 11 ++++
 3 files changed, 64 insertions(+), 28 deletions(-)
 create mode 100644 src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
 create mode 100644 src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js

diff --git a/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx b/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx
index 9c453dc6b..99be8c02e 100644
--- a/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx
+++ b/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx
@@ -6,6 +6,7 @@ import { fetchCohortDefinitions } from '../../../Utils/cohortMiddlewareApi';
 import queryConfig from '../../../../SharedUtils/QueryConfig';
 import { useFetch, useFilter } from '../../../Utils/formHooks';
 import { useSourceContext } from '../../../Utils/Source';
+import { addAriaLabelsToCohortDefinationsTable } from '../../../../SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index';
 
 const CohortDefinitions = ({
   selectedCohort = undefined,
@@ -19,7 +20,7 @@ const CohortDefinitions = ({
     ['cohortdefinitions', source, selectedTeamProject],
     () => fetchCohortDefinitions(source, selectedTeamProject),
     // only call this once the source is not undefined
-    { enabled: source !== undefined, ...queryConfig },
+    { enabled: source !== undefined, ...queryConfig }
   );
   const fetchedCohorts = useFetch(cohorts, 'cohort_definitions_and_stats');
   const displayedCohorts = useFilter(fetchedCohorts, searchTerm, 'cohort_name');
@@ -46,34 +47,41 @@ const CohortDefinitions = ({
       key: 'size',
     },
   ];
-  if (cohorts?.status === 'error') return <React.Fragment>Error getting data for table</React.Fragment>;
+  if (cohorts?.status === 'error')
+    return <React.Fragment>Error getting data for table</React.Fragment>;
 
-  return cohorts?.status === 'success' ? (
-    <Table
-      className='GWASUI-table1'
-      rowKey='cohort_definition_id'
-      size='middle'
-      pagination={{
-        defaultPageSize: 10,
-        showSizeChanger: true,
-        pageSizeOptions: ['10', '20', '50', '100', '500'],
-      }}
-      onRow={(selectedRow) => ({
-        onClick: () => {
-          handleCohortSelect(selectedRow);
-        },
-      })}
-      rowSelection={cohortSelection(selectedCohort)}
-      columns={cohortTableConfig}
-      dataSource={displayedCohorts}
-    />
-  ) : (
-    <React.Fragment>
-      <div className='GWASUI-spinnerContainer GWASUI-emptyTable'>
-        <Spin />
-      </div>
-    </React.Fragment>
-  );
+  if (cohorts?.status === 'success') {
+    addAriaLabelsToCohortDefinationsTable();
+    return (
+      <Table
+        className='GWASUI-table1'
+        onChange={addAriaLabelsToCohortDefinationsTable}
+        rowKey='cohort_definition_id'
+        size='middle'
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+          pageSizeOptions: ['10', '20', '50', '100', '500'],
+        }}
+        onRow={(selectedRow) => ({
+          onClick: () => {
+            handleCohortSelect(selectedRow);
+          },
+        })}
+        rowSelection={cohortSelection(selectedCohort)}
+        columns={cohortTableConfig}
+        dataSource={displayedCohorts}
+      />
+    );
+  } else {
+    return (
+      <React.Fragment>
+        <div className='GWASUI-spinnerContainer GWASUI-emptyTable'>
+          <Spin />
+        </div>
+      </React.Fragment>
+    );
+  }
 };
 
 CohortDefinitions.propTypes = {
diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
new file mode 100644
index 000000000..91de8cc81
--- /dev/null
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
@@ -0,0 +1,17 @@
+/*
+ * Used to update DOM attributes after component mounts
+ * example: useSetDOMAttribute('.ant-radio-input',' aria-label', 'radio button')
+ */
+
+const SetDOMAttribute = (selector, attribute, value) => {
+  const elements = document.querySelectorAll(selector);
+  elements?.forEach((element) => {
+    if (element) {
+      element.setAttribute(attribute, value);
+    } else {
+      console.error('Unable to find selector in setDOMAttribute: ', selector);
+    }
+  });
+};
+
+export default SetDOMAttribute;
diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
new file mode 100644
index 000000000..8edc98e0d
--- /dev/null
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
@@ -0,0 +1,11 @@
+import SetDOMAttribute from './SetDOMAttribute';
+
+const addAriaLabelsToCohortDefinationsTable = () => {
+  console.log(Math.random());
+  SetDOMAttribute(
+    '.GWASUI-table1 input.ant-radio-input',
+    'aria-label',
+    'Select row for study population'
+  );
+};
+export { addAriaLabelsToCohortDefinationsTable };

From e04b536e200a5985593dcef2efe8354611d37129 Mon Sep 17 00:00:00 2001
From: Jarvis Raymond <jarvisraymond@uchicago.edu>
Date: Thu, 14 Nov 2024 13:02:42 -0600
Subject: [PATCH 5/9] feat(spikeAntDStrategy): Updated function to use a delay,
 added to second table

---
 .../Components/Covariates/Covariates.jsx      | 11 +++++++---
 .../SelectCohort/SelectCohortDropDown.jsx     | 20 ++++++++++++++----
 .../SelectCohort/Utils/CohortDefinitions.jsx  | 20 ++++++++----------
 .../AntDAccessibilityFixes/SetDOMAttribute.js | 19 ++++++++++-------
 .../AntDAccessibilityFixes/index.js           | 21 ++++++++++++++++---
 5 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx b/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
index 5fe7996e7..33905806a 100644
--- a/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
+++ b/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
@@ -7,6 +7,7 @@ import queryConfig from '../../../SharedUtils/QueryConfig';
 import { useFetch, useFilter } from '../../Utils/formHooks';
 import { useSourceContext } from '../../Utils/Source';
 import SearchBar from '../SearchBar/SearchBar';
+import { addAriaLabelsToCovariatesTable } from '../../../SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index';
 
 const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const { source } = useSourceContext();
@@ -14,7 +15,7 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const covariates = useQuery(
     ['covariates', source],
     () => fetchCovariates(source),
-    queryConfig,
+    queryConfig
   );
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -26,11 +27,13 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const filteredCovariates = useFilter(
     fetchedCovariates,
     searchTerm,
-    'concept_name',
+    'concept_name'
   );
 
   // remove already selected Covariates from list
-  const displayedCovariates = filteredCovariates.filter((x) => !submittedCovariateIds.includes(x.concept_id));
+  const displayedCovariates = filteredCovariates.filter(
+    (x) => !submittedCovariateIds.includes(x.concept_id)
+  );
 
   const covariateSelection = () => ({
     type: 'radio',
@@ -76,6 +79,7 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   }
 
   if (covariates?.status === 'success') {
+    addAriaLabelsToCovariatesTable();
     return (
       <div data-tour='select-concept'>
         <SearchBar
@@ -85,6 +89,7 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
         />
         <Table
           className='GWASUI-table1'
+          onChange={addAriaLabelsToCovariatesTable}
           data-tour='concept-table'
           rowKey='concept_id'
           size='middle'
diff --git a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
index f6b735266..0d3e5e984 100644
--- a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
+++ b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { Select, Spin } from 'antd';
@@ -12,17 +12,26 @@ const SelectCohortDropDown = ({ handleCohortSelect, selectedTeamProject }) => {
   const cohorts = useQuery(
     ['cohortdefinitions', source, selectedTeamProject],
     () => fetchCohortDefinitions(source, selectedTeamProject),
-    queryConfig,
+    queryConfig
   );
   const fetchedCohorts = useFetch(cohorts, 'cohort_definitions_and_stats');
 
   const onChange = (selectedCohortDefinitionId) => {
     // find cohort object based on id:
     const selectedCohort = fetchedCohorts.find(
-      (item) => item.cohort_definition_id === selectedCohortDefinitionId,
+      (item) => item.cohort_definition_id === selectedCohortDefinitionId
     );
     handleCohortSelect(selectedCohort);
   };
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const handleDropdownVisibleChange = (open) => {
+    setIsDropdownVisible(open);
+    if (open) {
+      alert('open');
+    } else {
+      alert('closed');
+    }
+  };
 
   if (cohorts?.status === 'loading') {
     return (
@@ -40,11 +49,14 @@ const SelectCohortDropDown = ({ handleCohortSelect, selectedTeamProject }) => {
   return (
     <Select
       showSearch
+      onDropdownVisibleChange={handleDropdownVisibleChange}
       className='select-cohort'
       placeholder='Select a cohort'
       optionFilterProp='children'
       onChange={onChange}
-      filterOption={(input, option) => (option?.cohort_name ?? '').toLowerCase().includes(input.toLowerCase())}
+      filterOption={(input, option) =>
+        (option?.cohort_name ?? '').toLowerCase().includes(input.toLowerCase())
+      }
       options={fetchedCohorts}
       fieldNames={{ label: 'cohort_name', value: 'cohort_definition_id' }}
     />
diff --git a/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx b/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx
index 99be8c02e..b40d07d36 100644
--- a/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx
+++ b/src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx
@@ -20,7 +20,7 @@ const CohortDefinitions = ({
     ['cohortdefinitions', source, selectedTeamProject],
     () => fetchCohortDefinitions(source, selectedTeamProject),
     // only call this once the source is not undefined
-    { enabled: source !== undefined, ...queryConfig }
+    { enabled: source !== undefined, ...queryConfig },
   );
   const fetchedCohorts = useFetch(cohorts, 'cohort_definitions_and_stats');
   const displayedCohorts = useFilter(fetchedCohorts, searchTerm, 'cohort_name');
@@ -47,8 +47,7 @@ const CohortDefinitions = ({
       key: 'size',
     },
   ];
-  if (cohorts?.status === 'error')
-    return <React.Fragment>Error getting data for table</React.Fragment>;
+  if (cohorts?.status === 'error') return <React.Fragment>Error getting data for table</React.Fragment>;
 
   if (cohorts?.status === 'success') {
     addAriaLabelsToCohortDefinationsTable();
@@ -73,15 +72,14 @@ const CohortDefinitions = ({
         dataSource={displayedCohorts}
       />
     );
-  } else {
-    return (
-      <React.Fragment>
-        <div className='GWASUI-spinnerContainer GWASUI-emptyTable'>
-          <Spin />
-        </div>
-      </React.Fragment>
-    );
   }
+  return (
+    <React.Fragment>
+      <div className='GWASUI-spinnerContainer GWASUI-emptyTable'>
+        <Spin />
+      </div>
+    </React.Fragment>
+  );
 };
 
 CohortDefinitions.propTypes = {
diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
index 91de8cc81..65560d1f4 100644
--- a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
@@ -3,15 +3,18 @@
  * example: useSetDOMAttribute('.ant-radio-input',' aria-label', 'radio button')
  */
 
+const delayToAllowDOMRendering = 500;
 const SetDOMAttribute = (selector, attribute, value) => {
-  const elements = document.querySelectorAll(selector);
-  elements?.forEach((element) => {
-    if (element) {
-      element.setAttribute(attribute, value);
-    } else {
-      console.error('Unable to find selector in setDOMAttribute: ', selector);
-    }
-  });
+  setTimeout(() => {
+    const elements = document.querySelectorAll(selector);
+    elements?.forEach((element) => {
+      if (element) {
+        element.setAttribute(attribute, value);
+      } else {
+        console.error('Unable to find selector in setDOMAttribute: ', selector);
+      }
+    });
+  }, delayToAllowDOMRendering);
 };
 
 export default SetDOMAttribute;
diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
index 8edc98e0d..5f8ec2c91 100644
--- a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
@@ -1,11 +1,26 @@
 import SetDOMAttribute from './SetDOMAttribute';
 
+const delayToAllowDOMRendering = 500;
 const addAriaLabelsToCohortDefinationsTable = () => {
-  console.log(Math.random());
   SetDOMAttribute(
-    '.GWASUI-table1 input.ant-radio-input',
+    '.GWASUI-mainTable input.ant-radio-input',
     'aria-label',
     'Select row for study population'
   );
 };
-export { addAriaLabelsToCohortDefinationsTable };
+
+const addAriaLabelsToCovariatesTable = () => {
+  console.log('called');
+  setTimeout(() => {
+    SetDOMAttribute(
+      '.continuous-covariates-table input.ant-radio-input',
+      'aria-label',
+      'Select row for outcome phenotype'
+    );
+  }, delayToAllowDOMRendering);
+};
+
+export {
+  addAriaLabelsToCohortDefinationsTable,
+  addAriaLabelsToCovariatesTable,
+};

From 675e57068e6af99d65007261d53ecc5d9c12ee6f Mon Sep 17 00:00:00 2001
From: Jarvis Raymond <jarvisraymond@uchicago.edu>
Date: Thu, 14 Nov 2024 14:33:50 -0600
Subject: [PATCH 6/9] feat(spikeAntDStrategy): Resolved ESLINT issues

---
 src/Analysis/GWASApp/Components/Covariates/Covariates.jsx     | 1 +
 .../GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx  | 1 -
 .../AccessibilityUtils/AntDAccessibilityFixes/index.js        | 4 ++--
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx b/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
index 33905806a..1dcfa21b2 100644
--- a/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
+++ b/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
@@ -116,6 +116,7 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
 Covariates.propTypes = {
   selected: PropTypes.object,
   handleSelect: PropTypes.func.isRequired,
+  submittedCovariateIds: PropTypes.object.isRequired,
 };
 
 Covariates.defaultProps = {
diff --git a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
index 0d3e5e984..88ed6878b 100644
--- a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
+++ b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
@@ -23,7 +23,6 @@ const SelectCohortDropDown = ({ handleCohortSelect, selectedTeamProject }) => {
     );
     handleCohortSelect(selectedCohort);
   };
-  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const handleDropdownVisibleChange = (open) => {
     setIsDropdownVisible(open);
     if (open) {
diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
index 5f8ec2c91..3f3146a73 100644
--- a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
@@ -5,7 +5,7 @@ const addAriaLabelsToCohortDefinationsTable = () => {
   SetDOMAttribute(
     '.GWASUI-mainTable input.ant-radio-input',
     'aria-label',
-    'Select row for study population'
+    'Select row for study population',
   );
 };
 
@@ -15,7 +15,7 @@ const addAriaLabelsToCovariatesTable = () => {
     SetDOMAttribute(
       '.continuous-covariates-table input.ant-radio-input',
       'aria-label',
-      'Select row for outcome phenotype'
+      'Select row for outcome phenotype',
     );
   }, delayToAllowDOMRendering);
 };

From 4e6bdfe66d578112e8c724b7dbf0f1c777b72467 Mon Sep 17 00:00:00 2001
From: Jarvis Raymond <jarvisraymond@uchicago.edu>
Date: Thu, 14 Nov 2024 14:41:32 -0600
Subject: [PATCH 7/9] feat(spikeAntDStrategy): Resolved ESLINT issues

---
 src/Analysis/GWASApp/Components/Covariates/Covariates.jsx | 6 +++---
 .../Components/SelectCohort/SelectCohortDropDown.jsx      | 8 +++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx b/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
index 1dcfa21b2..751ad9239 100644
--- a/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
+++ b/src/Analysis/GWASApp/Components/Covariates/Covariates.jsx
@@ -15,7 +15,7 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const covariates = useQuery(
     ['covariates', source],
     () => fetchCovariates(source),
-    queryConfig
+    queryConfig,
   );
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -27,12 +27,12 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const filteredCovariates = useFilter(
     fetchedCovariates,
     searchTerm,
-    'concept_name'
+    'concept_name',
   );
 
   // remove already selected Covariates from list
   const displayedCovariates = filteredCovariates.filter(
-    (x) => !submittedCovariateIds.includes(x.concept_id)
+    (x) => !submittedCovariateIds.includes(x.concept_id),
   );
 
   const covariateSelection = () => ({
diff --git a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
index 88ed6878b..e998567ee 100644
--- a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
+++ b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
@@ -12,14 +12,14 @@ const SelectCohortDropDown = ({ handleCohortSelect, selectedTeamProject }) => {
   const cohorts = useQuery(
     ['cohortdefinitions', source, selectedTeamProject],
     () => fetchCohortDefinitions(source, selectedTeamProject),
-    queryConfig
+    queryConfig,
   );
   const fetchedCohorts = useFetch(cohorts, 'cohort_definitions_and_stats');
 
   const onChange = (selectedCohortDefinitionId) => {
     // find cohort object based on id:
     const selectedCohort = fetchedCohorts.find(
-      (item) => item.cohort_definition_id === selectedCohortDefinitionId
+      (item) => item.cohort_definition_id === selectedCohortDefinitionId,
     );
     handleCohortSelect(selectedCohort);
   };
@@ -53,9 +53,7 @@ const SelectCohortDropDown = ({ handleCohortSelect, selectedTeamProject }) => {
       placeholder='Select a cohort'
       optionFilterProp='children'
       onChange={onChange}
-      filterOption={(input, option) =>
-        (option?.cohort_name ?? '').toLowerCase().includes(input.toLowerCase())
-      }
+      filterOption={(input, option) => (option?.cohort_name ?? '').toLowerCase().includes(input.toLowerCase())}
       options={fetchedCohorts}
       fieldNames={{ label: 'cohort_name', value: 'cohort_definition_id' }}
     />

From 2fe6d79e3ad75ca7b903949ef5557de9fd920c70 Mon Sep 17 00:00:00 2001
From: Jarvis Raymond <jarvisraymond@uchicago.edu>
Date: Fri, 15 Nov 2024 09:16:51 -0600
Subject: [PATCH 8/9] feat(spikeAntDStrategy): reverted unneeded file changes

---
 .../Components/SelectCohort/SelectCohortDropDown.jsx  | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
index e998567ee..f6b735266 100644
--- a/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
+++ b/src/Analysis/GWASApp/Components/SelectCohort/SelectCohortDropDown.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { Select, Spin } from 'antd';
@@ -23,14 +23,6 @@ const SelectCohortDropDown = ({ handleCohortSelect, selectedTeamProject }) => {
     );
     handleCohortSelect(selectedCohort);
   };
-  const handleDropdownVisibleChange = (open) => {
-    setIsDropdownVisible(open);
-    if (open) {
-      alert('open');
-    } else {
-      alert('closed');
-    }
-  };
 
   if (cohorts?.status === 'loading') {
     return (
@@ -48,7 +40,6 @@ const SelectCohortDropDown = ({ handleCohortSelect, selectedTeamProject }) => {
   return (
     <Select
       showSearch
-      onDropdownVisibleChange={handleDropdownVisibleChange}
       className='select-cohort'
       placeholder='Select a cohort'
       optionFilterProp='children'

From c41b40b6ecd3e4cff70a734df6214c160ccf1aa1 Mon Sep 17 00:00:00 2001
From: Jarvis Raymond <jarvisraymond@uchicago.edu>
Date: Fri, 15 Nov 2024 09:27:48 -0600
Subject: [PATCH 9/9] feat(spikeAntDStrategy): refactored code for readability,
 ESLINT warnings

---
 .../AntDAccessibilityFixes/SetDOMAttribute.js    |  4 +++-
 .../AntDAccessibilityFixes/index.js              | 16 ++++++----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
index 65560d1f4..35b14db86 100644
--- a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/SetDOMAttribute.js
@@ -1,6 +1,6 @@
 /*
  * Used to update DOM attributes after component mounts
- * example: useSetDOMAttribute('.ant-radio-input',' aria-label', 'radio button')
+ * example: useSetDOMAttribute('.ant-radio-input','aria-label', 'Select row for study population')
  */
 
 const delayToAllowDOMRendering = 500;
@@ -11,7 +11,9 @@ const SetDOMAttribute = (selector, attribute, value) => {
       if (element) {
         element.setAttribute(attribute, value);
       } else {
+        /* eslint-disable no-console */
         console.error('Unable to find selector in setDOMAttribute: ', selector);
+        /* eslint-enable no-console */
       }
     });
   }, delayToAllowDOMRendering);
diff --git a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
index 3f3146a73..1c7ec6ba7 100644
--- a/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
+++ b/src/Analysis/SharedUtils/AccessibilityUtils/AntDAccessibilityFixes/index.js
@@ -1,23 +1,19 @@
 import SetDOMAttribute from './SetDOMAttribute';
 
-const delayToAllowDOMRendering = 500;
 const addAriaLabelsToCohortDefinationsTable = () => {
   SetDOMAttribute(
     '.GWASUI-mainTable input.ant-radio-input',
     'aria-label',
-    'Select row for study population',
+    'Select row for study population'
   );
 };
 
 const addAriaLabelsToCovariatesTable = () => {
-  console.log('called');
-  setTimeout(() => {
-    SetDOMAttribute(
-      '.continuous-covariates-table input.ant-radio-input',
-      'aria-label',
-      'Select row for outcome phenotype',
-    );
-  }, delayToAllowDOMRendering);
+  SetDOMAttribute(
+    '.continuous-covariates-table input.ant-radio-input',
+    'aria-label',
+    'Select row for outcome phenotype'
+  );
 };
 
 export {