z-scores

components/Assessment/Modal.js

@@ -5,15 +5,17 @@ const GreyDiv = styled.div`
   height: 100vh;
   width: 100vw;
   background: rgba(0, 0, 0, 0.4);
-  position: absolute;
+  top: 0;
+  left: 0;
+  position: fixed;
   z-index: 99;
 `
 
 const ModalDiv = styled.div`
   width: 400px;
   height: 70%;
   overflow-y: auto;
-  position: absolute;
+  position: fixed;
   left: 50%;
   top: 25%;
   background-color: white;
@@ -25,7 +27,7 @@ const ModalDiv = styled.div`
   align-items: center;
 `
 
-export default function Modal({ children, setShowing }) {
+export default function Modal({ children, setShowing, className }) {
   const backgroundRef = useRef()
   useEffect(() => {
     const escFunction = ({ keyCode }) => {
@@ -47,7 +49,7 @@ export default function Modal({ children, setShowing }) {
         }
       }}
     >
-      <ModalDiv>{children}</ModalDiv>
+      <ModalDiv className={className}>{children}</ModalDiv>
     </GreyDiv>
   )
 }

components/Assessment/acceptingModal.js

@@ -69,6 +69,7 @@ const acceptApplicant = async applicant => {
 export default function AcceptingModal({ setShowing }) {
   const [totalApplicants, setTotalApplicants] = useState(0)
   const [score, setScore] = useState(undefined)
+  const [zscore, setZScore] = useState(undefined)
   const [numHackathonsMin, setNumHackathonsMin] = useState(undefined)
   const [numHackathonsMax, setNumHackathonsMax] = useState(undefined)
   const [yearLevelOptions, setYearLevelOptions] = useState([])
@@ -82,6 +83,7 @@ export default function AcceptingModal({ setShowing }) {
   const getApplicants = async () => {
     const apps = await getApplicantsToAccept(
       score,
+      zscore,
       numHackathonsMin,
       numHackathonsMax,
       yearLevelsSelected,
@@ -138,6 +140,15 @@ export default function AcceptingModal({ setShowing }) {
           value={score ?? ''}
           placeholder="minimum score"
         />
+        <TotalApplicantsP>Minimum z-score</TotalApplicantsP>
+        <ScoreInput
+          onChange={e => {
+            // eslint-disable-next-line no-restricted-globals
+            if (!isNaN(e.target.value)) setZScore(e.target.value)
+          }}
+          value={zscore ?? ''}
+          placeholder="minimum z-score"
+        />
         <TotalApplicantsP>Number of Hackathons Attended</TotalApplicantsP>
         <RangeContainer>
           <ShortInput

components/Evaluator/CalcZScoreButton.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { COLOR } from '../../constants'
+import Button from '../button'
+import Modal from '../Assessment/Modal'
+import { calculateNormalizedScores } from '../../utility/normalization'
+
+const StyledButton = styled(Button)`
+  background: ${COLOR.MIDNIGHT_PURPLE_LIGHT};
+  color: white;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const StyledModal = styled(Modal)`
+  height: auto !important;
+  border-radius: 10px;
+`
+const ModalContent = styled.div`
+  padding: 20px;
+  text-align: center;
+`
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`
+
+const ModalButton = styled(Button)`
+  margin: 10px;
+  background: ${props => (props.variant === 'no' ? COLOR.RED : COLOR.GREEN)};
+  color: white;
+`
+
+export default function CalcZScoreButton() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const handleButtonClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const handleYesClick = () => {
+    calculateNormalizedScores()
+    setIsModalOpen(false)
+  }
+
+  const handleNoClick = () => {
+    setIsModalOpen(false)
+  }
+  return (
+    <>
+      <StyledButton onClick={handleButtonClick}>Calculate z-score</StyledButton>
+      {isModalOpen && (
+        <StyledModal setShowing={setIsModalOpen}>
+          <ModalContent>
+            <p>
+              🚨<strong>You are about to run a big script!</strong>
+            </p>
+            <p>
+              Are you sure you want to calculate all z-scores? Please verify that{' '}
+              <strong>all grading has been completed.</strong>
+            </p>
+            <ButtonContainer>
+              <ModalButton variant="no" onClick={handleNoClick}>
+                No
+              </ModalButton>
+              <ModalButton variant="yes" onClick={handleYesClick}>
+                Yes
+              </ModalButton>
+            </ButtonContainer>
+          </ModalContent>
+        </StyledModal>
+      )}
+    </>
+  )
+}

components/Evaluator/HackerEntry.js

@@ -59,6 +59,8 @@ const StyledTag = styled.div`
       ? `background: ${ASSESSMENT_COLOR.YELLOW};`
       : p.status === APPLICATION_STATUS.scored.text
       ? `background: ${ASSESSMENT_COLOR.BLUE};`
+      : p.status === APPLICATION_STATUS.gradinginprog.text
+      ? `background: ${ASSESSMENT_COLOR.DARK_GRAY};`
       : `background: ${ASSESSMENT_COLOR.RED};`}
   padding: 0px 5px;
   border-radius: 4px;
@@ -68,6 +70,11 @@ const StyledTag = styled.div`
   justify-content: center;
 `
 
+const ScoreContainer = styled.div`
+  display: flex;
+  gap: 10px;
+`
+
 export default function HackerEntry({
   index,
   // firstName,
@@ -93,9 +100,30 @@ export default function HackerEntry({
         return <StyledTag status={status}>{APPLICATION_STATUS.waitlisted.displayText}</StyledTag>
       case APPLICATION_STATUS.rejected.text:
         return <StyledTag status={status}>{APPLICATION_STATUS.rejected.displayText}</StyledTag>
+      case APPLICATION_STATUS.gradinginprog.text:
+        return <StyledTag status={status}>{APPLICATION_STATUS.gradinginprog.displayText}</StyledTag>
+      case APPLICATION_STATUS.ungraded.text:
       default:
-        return <StyledTag status={status}>Ungraded</StyledTag>
+        return <StyledTag status={status}>{APPLICATION_STATUS.ungraded.displayText}</StyledTag>
+    }
+  }
+
+  const getTotalZScore = () => {
+    const { NumExperiences, ResponseOneScore, ResponseTwoScore, ResponseThreeScore } = score?.scores || {}
+    if (
+      NumExperiences?.normalizedScore !== undefined &&
+      ResponseOneScore?.normalizedScore !== undefined &&
+      ResponseTwoScore?.normalizedScore !== undefined &&
+      ResponseThreeScore?.normalizedScore !== undefined
+    ) {
+      return (
+        NumExperiences.normalizedScore +
+        ResponseOneScore.normalizedScore +
+        ResponseTwoScore.normalizedScore +
+        ResponseThreeScore.normalizedScore
+      )
     }
+    return undefined
   }
 
   return (
@@ -106,9 +134,14 @@ export default function HackerEntry({
           {/* {firstName} {lastName} */}
           Applicant {index}
         </HackerName>
-        <HackerInfoText>
-          Score: {score?.totalScore ?? '?'}/{MAX_SCORE}
-        </HackerInfoText>
+        <ScoreContainer>
+          <HackerInfoText>
+            Score: {score?.totalScore !== undefined ? `${score.totalScore}/${MAX_SCORE}` : 'n/a'}
+          </HackerInfoText>
+          <HackerInfoText>
+            {getTotalZScore() !== undefined && <strong>z: {getTotalZScore().toFixed(2)}</strong>}
+          </HackerInfoText>
+        </ScoreContainer>
       </StyledInfoContainer>
       {getStyleTag()}
     </StyledHackerEntryDiv>

components/Evaluator/HackerList.js

@@ -7,6 +7,7 @@ import Icon from '../Icon'
 import { Title5 } from '../Typography'
 import Input from '../input'
 import HackerEntry from './HackerEntry'
+// import { calculateNormalizedScores } from '../../utility/normalization'
 
 const Container = styled.div`
   height: 60%;
@@ -166,6 +167,9 @@ export default function HackerList({ applicants, selectedApplicant, setSelectedA
         ) : (
           <>
             <Title5 color={COLOR.MIDNIGHT_PURPLE}>Applicant List</Title5>
+            {/* <button onClick={calculateNormalizedScores} type="button">
+              Transform Scores
+            </button> */}
             <ButtonContainer>
               <StyledIcon icon="search" onClick={() => setSearchActive(true)} />
               <StyledIcon