spike(PortDemo): Began porting team projects UI

src/pages/AnalysisApps/GWAS/GWASContainer.tsx

@@ -13,12 +13,12 @@ import SelectStudyPopulation from './Steps/SelectStudyPopulation/SelectStudyPopu
 // import DismissibleMessagesList from './Components/DismissibleMessagesList/DismissibleMessagesList';
 import MakeFullscreenButton from './Components/MakeFullscreenButton/MakeFullscreenButton';
 import InitializeCurrentState from './Utils/StateManagement/InitializeCurrentState';
+import TeamProjectHeader from '../SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader';
 // import WorkflowLimitsDashboard from '../SharedUtils/WorkflowLimitsDashboard/WorkflowLimitsDashboard';
 // import './GWASApp.css';
 
 const GWASContainer = () => {
   const [state, dispatch] = useReducer(reducer, InitializeCurrentState());
-
   const generateStep = () => {
     console.log('state.currentStep', state.currentStep);
     switch (state.currentStep) {
@@ -106,6 +106,16 @@ const GWASContainer = () => {
 
   return (
     <React.Fragment>
+      <div>
+        <div className="flex justify-between pb-4">
+          <h1 className="text-3xl pb-5 font-medium">Gen3 GWAS</h1>
+          <TeamProjectHeader />
+        </div>
+      </div>
+      <p className="pb-8 text-sm">
+        Use this App to perform high throughput GWAS on Million Veteran Program
+        (MVP) data, using the University of Washington Genesis pipeline
+      </p>
       <ProgressBar
         currentStep={state.currentStep}
         selectionMode={state.selectionMode}

src/pages/AnalysisApps/ResourceBrowser/ResourceBrowser.tsx

@@ -6,6 +6,7 @@ import GWASUIApp from './Icons/GWASUIApp.svg';
 import GWASResults from './Icons/GWASResults.svg';
 import AtlasLogo from './Icons/atlasLogo.svg';
 import DataDictionary from './Icons/dataDictionary.svg';
+import TeamProjectHeader from '../SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader';
 
 const ResourcesData = [
   {
@@ -39,7 +40,11 @@ const ResourcesData = [
 const ResourceBrowser = () => {
   return (
     <div className="p-5">
-      <h1 className="text-3xl pb-5 font-medium">Apps</h1>
+      <div className="flex justify-between py-4">
+        <h1 className="text-3xl pb-5 font-medium">Apps</h1>
+        <TeamProjectHeader isEditable />
+      </div>
+
       <Grid gutter="lg">
         {ResourcesData.map((resource) => (
           <Grid.Col key={resource.title} span={{ base: 12, md: 6, lg: 4 }}>
@@ -54,7 +59,6 @@ const ResourceBrowser = () => {
                 <Text className="text-center pb-2" size="lg" mt="md">
                   {resource.title}
                 </Text>
-
                 <Text className="text-center flex-grow pb-4" size="sm">
                   {resource.summary}
                 </Text>

src/pages/AnalysisApps/SharedUtils/AccessibilityUtils/AccessibilityStyles/Accessibility.less

@@ -0,0 +1,141 @@
+/* App-specific styles */
+
+@import "AccessibilityGWAS.less";
+@import "AccessibilityTeams.less";
+
+/* Global styles */
+
+:root {
+  --focus-outline-color: #007bff; /* Bright Blue */
+}
+
+.screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Rules for all VADC Apps */
+
+.analysis-app-wrapper {
+  .ant-modal-content button:focus {
+    outline: 1px dashed var(--focus-outline-color);
+    outline-offset: 1px;
+  }
+
+  .ant-btn-default {
+    color: #194C90;
+    border-color: #194C90;
+  }
+
+  .ant-btn-primary:not([disabled]) {
+    background: #194C90;
+    border-color: #194C90;
+  }
+
+  .ant-btn-secondary {
+    color: #194C90;
+    border-color: #194C90;
+  }
+
+  .ant-btn-default:hover,
+  .ant-btn-default:focus {
+    color: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .ant-btn-primary:not([disabled]):hover,
+  .ant-btn-primary:not([disabled]):focus {
+    background: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .back-link {
+    color: #215c9e;
+  }
+
+  .back-link:hover,
+  .back-link:focus {
+    color: #2E77B8;
+  }
+
+  .ant-pagination-item-active {
+    color: #194C90;
+    border-color: #194C90;
+  }
+
+  .ant-pagination-item-active a {
+    color: #194C90;
+  }
+
+  .ant-pagination-item-active:hover,
+  .ant-pagination-item-active:focus {
+    color: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .ant-pagination-item-active:hover a,
+  .ant-pagination-item-active:focus a {
+    color: #2466AC;
+  }
+
+  .ant-pagination-item:hover,
+  .ant-pagination-item:focus {
+    border-color: #2466AC;
+  }
+
+  .ant-pagination-item:hover a,
+  .ant-pagination-item:focus a {
+    color: #2466AC;
+  }
+
+  .ant-pagination-next:hover .ant-pagination-item-link,
+  .ant-pagination-next:focus .ant-pagination-item-link {
+    color: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .ant-pagination-jump-next:hover .ant-pagination-item-link-icon,
+  .ant-pagination-jump-next:focus .ant-pagination-item-link-icon {
+    color: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .ant-pagination-prev:hover .ant-pagination-item-link,
+  .ant-pagination-prev:focus .ant-pagination-item-link {
+    color: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .ant-pagination-jump-prev:hover .ant-pagination-item-link-icon,
+  .ant-pagination-jump-prev:focus .ant-pagination-item-link-icon {
+    color: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .ant-select-focused:not([disabled]).ant-select .ant-select-selector {
+    border-color: #2466AC;
+  }
+
+  .ant-pagination-options:hover .ant-select:not([disabled]) .ant-select-selector {
+    border-color: #2466AC;
+  }
+
+  .ant-card-meta-description {
+    color: #333333;
+  }
+
+  .ant-card-actions .anticon {
+    color: #333333;
+  }
+
+  .ant-card-actions .anticon:hover {
+    color: #2466AC;
+  }
+}

src/pages/AnalysisApps/SharedUtils/AccessibilityUtils/AccessibilityStyles/AccessibilityGWAS.less

@@ -0,0 +1,43 @@
+/* GWAS App */
+
+.gwas-modal {
+  .ant-btn-primary:not([disabled]) {
+    background: #194C90;
+    border-color: #194C90;
+  }
+
+  .ant-btn-primary:not([disabled]):hover,
+  .ant-btn-primary:not([disabled]):focus {
+    background: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .ant-btn-default {
+    color: #194C90;
+    border-color: #194C90;
+  }
+
+  .ant-btn-default:hover,
+  .ant-btn-default:focus {
+    color: #2466AC;
+    border-color: #2466AC;
+  }
+}
+
+.GWASApp {
+  .GWASUI-navBtn:not([disabled]) {
+    background: #194C90;
+    border-color: #194C90;
+  }
+
+  .GWASUI-navBtn:not([disabled]):hover,
+  .GWASUI-navBtn:not([disabled]):focus {
+    background: #2466AC;
+    border-color: #2466AC;
+  }
+
+  .euler-diagram-controls  .ant-btn-primary:not([disabled]):focus {
+    background: #194C90;
+    border-color: #194C90;
+  }
+}

src/pages/AnalysisApps/SharedUtils/AccessibilityUtils/AccessibilityStyles/AccessibilityTeams.less

@@ -0,0 +1,14 @@
+/* Rules for Teams selection in VADC */
+
+.team-project-modal {
+  .ant-btn-primary:not([disabled]) {
+    background: #194C90;
+    border-color: #194C90;
+  }
+
+  .ant-btn-primary:not([disabled]):hover,
+  .ant-btn-primary:not([disabled]):focus {
+    background: #2466AC;
+    border-color: #2466AC;
+  }
+}

src/pages/AnalysisApps/SharedUtils/AccessibilityUtils/IsEnterOrSpace.ts

@@ -0,0 +1,8 @@
+const isEnterOrSpace = (event) =>
+  event.key === 'Enter' ||
+  event.key === ' ' ||
+  event.key === 'Spacebar' ||
+  event.keycode === '32' ||
+  event.keycode === '13';
+
+export default isEnterOrSpace;

src/pages/AnalysisApps/SharedUtils/DataViz/Histogram/Histogram.css

@@ -0,0 +1,4 @@
+.histogram-tooltip {
+  padding: 12px 5px 1px 5px;
+  background-color: #fafafb;
+}

src/pages/AnalysisApps/SharedUtils/DataViz/Histogram/Histogram.jsx

@@ -0,0 +1,111 @@
+/*
+import React from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Label,
+} from 'recharts';
+import PropTypes from 'prop-types';
+import './Histogram.css';
+
+const formatNumber = (number) => (Math.round(number * 10) / 10).toLocaleString();
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className='histogram-tooltip'>
+        <p>
+          {`Number of persons: ${formatNumber(
+            payload[0].value,
+          )}, for values starting at: ${formatNumber(label)}`}
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+CustomTooltip.propTypes = {
+  active: PropTypes.any,
+  payload: PropTypes.any,
+  label: PropTypes.number,
+};
+
+CustomTooltip.defaultProps = {
+  active: null,
+  payload: null,
+  label: null,
+};
+
+// TODO - improve tickGap - e.g. the minTickGap={50} below needs to be dynamically calculated
+const Histogram = ({
+  data,
+  xAxisDataKey,
+  barDataKey,
+  chartWidth,
+  chartHeight,
+  barColor,
+  xAxisLegend,
+  yAxisLegend,
+  useAnimation,
+}) => {
+  const defaultAnimationTime = 400;
+  return (
+    <div data-testid='histogram'>
+      <BarChart
+        width={chartWidth}
+        height={chartHeight}
+        data={data}
+        margin={{ top: 20, bottom: 65, right: 60 }}
+      >
+        <XAxis
+          dataKey={xAxisDataKey}
+          minTickGap={50}
+          tickFormatter={(tick) => formatNumber(tick)}
+        >
+          <Label
+            value={xAxisLegend || xAxisDataKey}
+            position='bottom'
+            offset={20}
+          />
+        </XAxis>
+        <YAxis>
+          <Label value={yAxisLegend || barDataKey} position='top' offset={10} />
+        </YAxis>
+        <Tooltip content={<CustomTooltip />} />
+        <CartesianGrid strokeDasharray='3 3' />
+        <Bar dataKey={barDataKey} fill={barColor} animationDuration={useAnimation ? defaultAnimationTime : 0} />
+      </BarChart>
+    </div>
+  );
+};
+
+Histogram.propTypes = {
+  data: PropTypes.array.isRequired,
+  xAxisDataKey: PropTypes.string.isRequired,
+  barDataKey: PropTypes.string.isRequired,
+  chartWidth: PropTypes.number,
+  chartHeight: PropTypes.number,
+  barColor: PropTypes.string,
+  xAxisLegend: PropTypes.string,
+  yAxisLegend: PropTypes.string,
+  useAnimation: PropTypes.bool,
+};
+
+Histogram.defaultProps = {
+  chartWidth: 600,
+  chartHeight: 350,
+  barColor: '#8884d8',
+  xAxisLegend: null,
+  yAxisLegend: null,
+  useAnimation: true,
+};
+
+export default Histogram;
+
+*/