Feat/globalize vadc charts

src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/CohortsOverlapDiagram.jsx

@@ -4,9 +4,9 @@ import { useQueries } from 'react-query';
 import { Spin, Button } from 'antd';
 import { fetchSimpleOverlapInfo, addCDFilter } from '../../../Utils/cohortMiddlewareApi';
 import queryConfig from '../../../../SharedUtils/QueryConfig';
-import Simple3SetsEulerDiagram from './Simple3SetsEulerDiagram';
-import CohortsOverlapLegend from './CohortsOverlapLegend';
-import CohortsOverlapTextVersion from './Simple3SetsOverlapTextVersion';
+import Simple3SetsEulerDiagram from '../../../../SharedUtils/DataViz/Simple3Sets/Simple3SetsEulerDiagram';
+import Simple3SetsLegend from '../../../../SharedUtils/DataViz/Simple3Sets/Simple3SetsLegend';
+import Simple3SetsTextVersion from '../../../../SharedUtils/DataViz/Simple3Sets/Simple3SetsTextVersion';
 import { useSourceContext } from '../../../Utils/Source';
 import ACTIONS from '../../../Utils/StateManagement/Actions';
 import { MESSAGES } from '../../../Utils/constants';
@@ -188,7 +188,7 @@ const CohortsOverlapDiagram = ({
     <React.Fragment>
       {!showTextVersion && (
         <React.Fragment>
-          <CohortsOverlapLegend
+          <Simple3SetsLegend
             cohort1Label={eulerArgs.set1Label}
             cohort2Label={eulerArgs.set2Label}
             cohort3Label={eulerArgs.set3Label}
@@ -197,7 +197,7 @@ const CohortsOverlapDiagram = ({
         </React.Fragment>
       )}
       {showTextVersion && (
-        <CohortsOverlapTextVersion
+        <Simple3SetsTextVersion
           title='Cohort Intersections'
           eulerArgs={eulerArgs}
         />

src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx

@@ -4,7 +4,7 @@ import { useQuery } from 'react-query';
 import { Spin } from 'antd';
 import { fetchHistogramInfo } from '../../../Utils/cohortMiddlewareApi';
 import queryConfig from '../../../../SharedUtils/QueryConfig';
-import Histogram from './Histogram';
+import Histogram from '../../../../SharedUtils/DataViz/Histogram/Histogram';
 import { useSourceContext } from '../../../Utils/Source';
 import ACTIONS from '../../../Utils/StateManagement/Actions';
 import { MESSAGES } from '../../../Utils/constants';
@@ -39,7 +39,8 @@ const PhenotypeHistogram = ({
 
   useEffect(() => {
     // Validate and give error message if there is no data:
-    if (data?.bins === null) {
+    if (data?.bins === null
+      || (status === 'success' && data?.bins === undefined)) {
       dispatch({
         type: ACTIONS.ADD_MESSAGE,
         payload: MESSAGES.NO_BINS_ERROR,

src/Analysis/GWASApp/Utils/constants.js

@@ -14,8 +14,6 @@ export const GWASAppSteps = [
   },
 ];
 
-export const formatNumber = (number) => (Math.round(number * 10) / 10).toLocaleString();
-
 export const MESSAGES = {
   OVERLAP_ERROR: {
     title:

src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/Histogram.jsx → src/Analysis/SharedUtils/DataViz/Histogram/Histogram.jsx

@@ -9,9 +9,10 @@ import {
   Label,
 } from 'recharts';
 import PropTypes from 'prop-types';
-import { formatNumber } from '../../../Utils/constants';
 import './Histogram.css';
 
+const formatNumber = (number) => (Math.round(number * 10) / 10).toLocaleString();
+
 const CustomTooltip = ({ active, payload, label }) => {
   if (active && payload && payload.length) {
     return (

src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/Simple3SetsEulerDiagram.jsx → src/Analysis/SharedUtils/DataViz/Simple3Sets/Simple3SetsEulerDiagram.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import * as d3 from 'd3-selection';
 import * as venn from '@upsetjs/venn.js';
-import './CohortsOverlapDiagram.css';
+import './Simple3SetsEulerDiagram.css';
 
 const Simple3SetsEulerDiagram = ({
   set1Size,

src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/CohortsOverlapLegend.jsx → src/Analysis/SharedUtils/DataViz/Simple3Sets/Simple3SetsLegend.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const CohortsOverlapLegend = ({ cohort1Label, cohort2Label, cohort3Label }) => (
+const Simple3SetsLegend = ({ cohort1Label, cohort2Label, cohort3Label }) => (
   <div className='euler-diagram-legend'>
     <div className='legend-item'>
       <span className='legend-mark legend-mark-1' />
@@ -18,10 +18,10 @@ const CohortsOverlapLegend = ({ cohort1Label, cohort2Label, cohort3Label }) => (
   </div>
 );
 
-CohortsOverlapLegend.propTypes = {
+Simple3SetsLegend.propTypes = {
   cohort1Label: PropTypes.string.isRequired,
   cohort2Label: PropTypes.string.isRequired,
   cohort3Label: PropTypes.string.isRequired,
 };
 
-export default CohortsOverlapLegend;
+export default Simple3SetsLegend;

src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/CohortsOverlapLegend.test.jsx → src/Analysis/SharedUtils/DataViz/Simple3Sets/Simple3SetsLegend.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import CohortsOverlapLegend from './CohortsOverlapLegend';
+import Simple3SetsLegend from './Simple3SetsLegend';
 
 describe('CohortsOverlapLegend', () => {
   const cohort1Label = 'Cohort 1';
@@ -10,7 +10,7 @@ describe('CohortsOverlapLegend', () => {
 
   it('renders the legend items with the correct labels', () => {
     render(
-      <CohortsOverlapLegend
+      <Simple3SetsLegend
         cohort1Label={cohort1Label}
         cohort2Label={cohort2Label}
         cohort3Label={cohort3Label}

src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/Simple3SetsOverlapTextVersion.jsx → src/Analysis/SharedUtils/DataViz/Simple3Sets/Simple3SetsTextVersion.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Simple3SetsOverlapTextVersion = ({ title, eulerArgs }) => {
+const Simple3SetsTextVersion = ({ title, eulerArgs }) => {
   const {
     set12Size,
     set13Size,
@@ -33,9 +33,9 @@ const Simple3SetsOverlapTextVersion = ({ title, eulerArgs }) => {
   );
 };
 
-Simple3SetsOverlapTextVersion.propTypes = {
+Simple3SetsTextVersion.propTypes = {
   title: PropTypes.string.isRequired,
   eulerArgs: PropTypes.object.isRequired,
 };
 
-export default Simple3SetsOverlapTextVersion;
+export default Simple3SetsTextVersion;

src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/Simple3SetsOverlapTextVersion.test.jsx → src/Analysis/SharedUtils/DataViz/Simple3Sets/Simple3SetsTextVersion.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import CohortsOverlapTextVersion from './Simple3SetsOverlapTextVersion';
+import Simple3SetsTextVersion from './Simple3SetsTextVersion';
 
-describe('CohortsOverlapTextVersion', () => {
+describe('Simple3SetsTextVersion', () => {
   const eulerArgs = {
     set12Size: 10,
     set13Size: 5,
@@ -15,7 +15,7 @@ describe('CohortsOverlapTextVersion', () => {
   };
 
   it('renders the correct cohort intersections', () => {
-    render(<CohortsOverlapTextVersion eulerArgs={eulerArgs} />);
+    render(<Simple3SetsTextVersion title='' eulerArgs={eulerArgs} />);
     expect(
       screen.getByText(
         `${eulerArgs.set1Label} ∩ ${