23947418961

Committed 03 Apr 2026 01:13PM UTC coverage: 9.056% (+6.6%) from 2.453%

Build # 23947418961

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #529 from CBIIT/3.3.0

3.3.0 Release

Coverage Stats

244 of 1858 branches covered (13.13%)

Branch coverage included in aggregate %.

125 of 217 new or added lines in 28 files covered. (57.6%)

6 existing lines in 6 files now uncovered.

227 of 3343 relevant lines covered (6.79%)

29.34 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/NavBar/NavBarView.js

import React, { useState } from 'react';
import { useLocation, NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { FaBars, FaTimes } from 'react-icons/fa';
import { RELEASE_NOTES_LINK } from '../../config/globalHeaderData.tsx';

const Nav = styled.div`
  position: relative;
  width: 100%;
  height: 40px;
  background-color: rgb(62, 60, 63);
  z-index: 999;

  @media (max-width: 480px) {
    margin-top: -55px;
    margin-left: -340px;
    z-index: 1201;
    background: white;
  }
`;

const NavContainer = styled.div`
  margin: 0 auto;
  width: 100%;
  text-align: center;
  position: relative;
`;

const UlContainer = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  

  @media (max-width: 480px) {
    display: flex;
    justify-content: center;
    flex-direction: column;
    display: ${({ open }) => (open ? 'flex' : 'none')};
    background-color: rgb(62, 60, 63);
    position: absolute;
    margin-top: 55px;
    margin-left: 340px;
    width: 100%;
    align-items: center;
  }
`;

const LiSection = styled.li`
  display: inline-block;
  position: relative;
  line-height: 40px;
  letter-spacing: 1px;
  text-align: center;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  font-family: Nunito;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 0 30px;
  }

  &:hover {
    color: #ffffff;
    background-color: #241F24;
  }

  @media (max-width: 480px) {
    padding: 10px 0;
    display: block;
    width: 100%;
    text-align: center;
  }

  .menuLabel {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 0 30px;
  }

  &:hover .dropdown-block {
    display: block;
  }
`;

const MenuDropDown = styled.div`
  width: 233px;
  padding: 0;
  background-color: unset;
  border: 0;
  position: absolute;
  display: none;
  position: absolute;
  z-index: 999;
  padding: 0;
  left: 0;
  top: 28px;

  &::before {
    content: '';
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    height: 13px;
    width: 15px;
    background-color: #ffffff;
    left: 50px;
    position: absolute;
  }

  .dropdown-list {
    list-style: none;
    background-color: #ffffff;
    margin-top: 12px;
    padding: 10px 20px;
    box-shadow: 0px 3px 6px 3px rgb(73 73 73 / 39%);
  }

  .dropdown-list li {
    text-align: left;
  }

  .dropdown-list li a {
    overflow-wrap: normal;
    text-decoration: none;
    color: #413E41;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
    font-family: Nunito;
    display: block;
    padding: 10px 0;

    &:hover {
      color: black;
      font-weight: 800;
    }
  }
`;

const Hamburger = styled.div`
  display: none;
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #413E41;

  @media (max-width: 480px) {
    display: block;
  }
`;

const activeStyle = {
  color: '#ffffff',
  backgroundColor: '#241F24',
};

const subMenuActiveStyle = {
  color: 'black',
  fontWeight: '800',
};

const NavBar = () => {
  const path = useLocation().pathname;
  const [menuOpen, setMenuOpen] = useState(false);
  const handleMenuItemClick = () => {
    setMenuOpen(false);
  };

  return (
    <Nav>
      <NavContainer>
        <Hamburger onClick={() => setMenuOpen(!menuOpen)}>
          {menuOpen ? <FaTimes /> : <FaBars />}
        </Hamburger>
        <UlContainer open={menuOpen}>
          <LiSection style={path === '/home' ? activeStyle : null} onClick={handleMenuItemClick}><NavLink to="/home">Home</NavLink></LiSection>
          <LiSection style={path === '/programs' ? activeStyle : null} onClick={handleMenuItemClick}><NavLink to="/programs">Programs</NavLink></LiSection>
          <LiSection style={path === '/datasets' ? activeStyle : null} onClick={handleMenuItemClick}><NavLink to="/datasets">Datasets</NavLink></LiSection>
          <LiSection style={path === '/about' ? activeStyle : null}>
            <span className="menuLabel">
              About
            </span>
            <MenuDropDown className="dropdown-block">
              <ul className="dropdown-list">
                <li><NavLink to="/about" style={path === '/about' ? subMenuActiveStyle : null} onClick={handleMenuItemClick}>About INS</NavLink></li>
                <li><a href="/INS_glossary_v3.1.0_V2.pdf" target="_blank" rel="noreferrer" onClick={handleMenuItemClick}>Glossary (PDF)</a></li>
                <li><a href={RELEASE_NOTES_LINK} target="_blank" rel="noreferrer" onClick={handleMenuItemClick}>Release Notes (PDF)</a></li>
              </ul>
            </MenuDropDown>
          </LiSection>
        </UlContainer>
      </NavContainer>
    </Nav>
  );
};

export default NavBar;

1	import React, { useState } from 'react';	×
2	import { useLocation, NavLink } from 'react-router-dom';	×
3	import styled from 'styled-components';	×
4	import { FaBars, FaTimes } from 'react-icons/fa';	×
NEW 5	import { RELEASE_NOTES_LINK } from '../../config/globalHeaderData.tsx';	×
6
7	const Nav = styled.div`	×
8	position: relative;
9	width: 100%;
10	height: 40px;
11	background-color: rgb(62, 60, 63);
12	z-index: 999;
13
14	@media (max-width: 480px) {
15	margin-top: -55px;
16	margin-left: -340px;
17	z-index: 1201;
18	background: white;
19	}
20	`;
21
22	const NavContainer = styled.div`	×
23	margin: 0 auto;
24	width: 100%;
25	text-align: center;
26	position: relative;
27	`;
28
29	const UlContainer = styled.ul`	×
30	list-style: none;
31	margin: 0;
32	padding: 0;
33
34
35	@media (max-width: 480px) {
36	display: flex;
37	justify-content: center;
38	flex-direction: column;
39	display: ${({ open }) => (open ? 'flex' : 'none')};	×
40	background-color: rgb(62, 60, 63);
41	position: absolute;
42	margin-top: 55px;
43	margin-left: 340px;
44	width: 100%;
45	align-items: center;
46	}
47	`;
48
49	const LiSection = styled.li`	×
50	display: inline-block;
51	position: relative;
52	line-height: 40px;
53	letter-spacing: 1px;
54	text-align: center;
55	color: #ffffff;
56	font-size: 17px;
57	font-weight: 600;
58	font-family: Nunito;
59	text-decoration: none;
60	cursor: pointer;
61	transition: all 0.3s ease-in-out;
62
63	a {
64	display: block;
65	color: #ffffff;
66	text-decoration: none;
67	padding: 0 30px;
68	}
69
70	&:hover {
71	color: #ffffff;
72	background-color: #241F24;
73	}
74
75	@media (max-width: 480px) {
76	padding: 10px 0;
77	display: block;
78	width: 100%;
79	text-align: center;
80	}
81
82	.menuLabel {
83	display: block;
84	color: #ffffff;
85	text-decoration: none;
86	padding: 0 30px;
87	}
88
89	&:hover .dropdown-block {
90	display: block;
91	}
92	`;
93
94	const MenuDropDown = styled.div`	×
95	width: 233px;
96	padding: 0;
97	background-color: unset;
98	border: 0;
99	position: absolute;
100	display: none;
101	position: absolute;
102	z-index: 999;
103	padding: 0;
104	left: 0;
105	top: 28px;
106
107	&::before {
108	content: '';
109	clip-path: polygon(50% 0, 100% 100%, 0 100%);
110	height: 13px;
111	width: 15px;
112	background-color: #ffffff;
113	left: 50px;
114	position: absolute;
115	}
116
117	.dropdown-list {
118	list-style: none;
119	background-color: #ffffff;
120	margin-top: 12px;
121	padding: 10px 20px;
122	box-shadow: 0px 3px 6px 3px rgb(73 73 73 / 39%);
123	}
124
125	.dropdown-list li {
126	text-align: left;
127	}
128
129	.dropdown-list li a {
130	overflow-wrap: normal;
131	text-decoration: none;
132	color: #413E41;
133	font-size: 16px;
134	line-height: 20px;
135	font-weight: 300;
136	font-family: Nunito;
137	display: block;
138	padding: 10px 0;
139
140	&:hover {
141	color: black;
142	font-weight: 800;
143	}
144	}
145	`;
146
147	const Hamburger = styled.div`	×
148	display: none;
149	position: absolute;
150	top: 5px;
151	right: 15px;
152	font-size: 24px;
153	cursor: pointer;
154	color: #413E41;
155
156	@media (max-width: 480px) {
157	display: block;
158	}
159	`;
160
161	const activeStyle = {	×
162	color: '#ffffff',
163	backgroundColor: '#241F24',
164	};
165
166	const subMenuActiveStyle = {	×
167	color: 'black',
168	fontWeight: '800',
169	};
170
171	const NavBar = () => {	×
172	const path = useLocation().pathname;	×
173	const [menuOpen, setMenuOpen] = useState(false);	×
174	const handleMenuItemClick = () => {	×
175	setMenuOpen(false);	×
176	};
177
178	return (	×
179	<Nav>
180	<NavContainer>
181	<Hamburger onClick={() => setMenuOpen(!menuOpen)}>	×
182	{menuOpen ? <FaTimes /> : <FaBars />}	×
183	</Hamburger>
184	<UlContainer open={menuOpen}>
185	<LiSection style={path === '/home' ? activeStyle : null} onClick={handleMenuItemClick}><NavLink to="/home">Home</NavLink></LiSection>	×
186	<LiSection style={path === '/programs' ? activeStyle : null} onClick={handleMenuItemClick}><NavLink to="/programs">Programs</NavLink></LiSection>	×
187	<LiSection style={path === '/datasets' ? activeStyle : null} onClick={handleMenuItemClick}><NavLink to="/datasets">Datasets</NavLink></LiSection>	×
188	<LiSection style={path === '/about' ? activeStyle : null}>	×
189	<span className="menuLabel">
190	About
191	</span>
192	<MenuDropDown className="dropdown-block">
193	<ul className="dropdown-list">
194	<li><NavLink to="/about" style={path === '/about' ? subMenuActiveStyle : null} onClick={handleMenuItemClick}>About INS</NavLink></li>	×
195	<li><a href="/INS_glossary_v3.1.0_V2.pdf" target="_blank" rel="noreferrer" onClick={handleMenuItemClick}>Glossary (PDF)</a></li>
196	<li><a href={RELEASE_NOTES_LINK} target="_blank" rel="noreferrer" onClick={handleMenuItemClick}>Release Notes (PDF)</a></li>
197	</ul>
198	</MenuDropDown>
199	</LiSection>
200	</UlContainer>
201	</NavContainer>
202	</Nav>
203	);
204	};	×
205
206	export default NavBar;

CBIIT / INS-WebPortal / 23947418961

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous