\r\n
\r\n );\r\n } else\r\n component = (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Error;\r\n","import React from \"react\";\r\nimport Error from \"../views/Error\";\r\n\r\nclass ErrorBoundary extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n error: null,\r\n errorInfo: null,\r\n isRedirect: false,\r\n // errorMsg: [\"There has been an error.\", \"This page doesn't exist.\"],\r\n };\r\n }\r\n\r\n componentDidCatch(error, errorInfo) {\r\n this.setState({ ...this.state, error, errorInfo });\r\n }\r\n\r\n handleRedirect = () => {\r\n this.setState(\r\n {\r\n ...this.state,\r\n error: null,\r\n errorInfo: null,\r\n isRedirect: true,\r\n },\r\n () => this.setState({ isRedirect: false })\r\n );\r\n };\r\n\r\n render() {\r\n if (this.state.error) {\r\n return (\r\n \r\n \r\n So sorry...\r\n \r\n \r\n {errorMsg}\r\n \r\n {isHomePage ? (\r\n \r\n Please try again later.\r\n \r\n ) : (\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HomePageContent;\r\n","import React from \"react\";\r\nimport { Grid, TextField } from \"@material-ui/core\";\r\n\r\nconst Input = ({ name, label, type, errors, value, handleChange }) => {\r\n return (\r\n \r\n \r\n {headline}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HomePageForm;\r\n","import React, { createContext } from \"react\";\r\n\r\nexport const ContentContext = createContext({});\r\n\r\nexport const ContentContextProvider = ContentContext.Provider;\r\n\r\nexport const ContentContextConsumer = ContentContext.Consumer;\r\n\r\nexport const withContentContexttHOC = Component => props => (\r\n \r\n \r\n {headline}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {btnDisplayName.toUpperCase()}\r\n \r\n \r\n \r\n {[\r\n \"Nanoelectronics\",\r\n \"Microsystems\",\r\n \"Nanobioscience\",\r\n \"Clean Energy\",\r\n ].includes(btnDisplayName)\r\n ? \"OVERVIEW\"\r\n : btnDisplayName.toUpperCase()}\r\n \r\n {/* {content.getStageNames().map((entry, i) => { */}\r\n {content.getDisciplineStageNames(btnUrlName).map((entry, i) => {\r\n const menuItemUrl = btnUrl + \"/\" + entry.urlSlug;\r\n return (\r\n
\r\n );\r\n\r\n const renderStandardBtn = (\r\n \r\n {}}\r\n color={color}\r\n variant={variant}\r\n className={\r\n btnUrlName === \"login\"\r\n ? classes.buttonLogin\r\n : activeDisciplineUrlName === btnUrlName\r\n ? classes.buttonActive\r\n : classes.button\r\n }\r\n >\r\n {btnDisplayName.toUpperCase()}\r\n \r\n
\r\n );\r\n\r\n return isDisciplineBtn ? renderDisciplineBtn : renderStandardBtn;\r\n};\r\n\r\nexport default HeaderNavButton;\r\n","import React, { useState, useContext } from \"react\";\r\nimport {\r\n AppBar,\r\n IconButton,\r\n Link,\r\n Menu,\r\n MenuItem,\r\n Toolbar,\r\n} from \"@material-ui/core\";\r\nimport HeaderMenuItemResponsive from \"../atoms/HeaderMenuItemResponsive\";\r\nimport HeaderNavButton from \"../atoms/HeaderNavButton\";\r\nimport logo from \"../../assets/AMP-TAP-Logo-horz-ko.svg\";\r\nimport catn2LogoWhite from \"../../assets/CATN2-logo-white.png\";\r\nimport { ContentContext } from \"../../context/ContentContext\";\r\nimport { Link as RouterLink } from \"react-router-dom\";\r\nimport { MoreVert, Close } from \"@material-ui/icons\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n header: {\r\n backgroundColor: \"transparent\",\r\n justifyContent: \"center\",\r\n padding: \"10px 20px 0\",\r\n marginTop: 10,\r\n marginBottom: 0,\r\n },\r\n logoLink: {\r\n flexGrow: 0,\r\n },\r\n logo: {\r\n height: 50,\r\n [theme.breakpoints.up(\"sm\")]: {\r\n height: 60,\r\n },\r\n transition: \"height 0.5s\",\r\n },\r\n altLogoLink: {\r\n flexGrow: 1,\r\n marginLeft: 20,\r\n },\r\n altLogo: {\r\n height: 50,\r\n [theme.breakpoints.up(\"sm\")]: {\r\n height: 60,\r\n },\r\n transition: \"height 0.5s\",\r\n },\r\n sectionDesktop: {\r\n display: \"none\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"flex\",\r\n },\r\n },\r\n sectionResponsive: {\r\n display: \"flex\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"none\",\r\n },\r\n },\r\n popoverPaper: {\r\n [theme.breakpoints.down(\"xs\")]: {\r\n width: \"100%\",\r\n maxWidth: \"unset\",\r\n maxHeight: \"unset\",\r\n top: \"0 !important\",\r\n left: \"0 !important\",\r\n },\r\n },\r\n closeMenuItem: {\r\n backgroundColor: \"#fff\",\r\n borderBottom: \"1.5px solid #f5f5f5\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n display: \"none\",\r\n },\r\n justifyContent: \"flex-end\",\r\n },\r\n close: {\r\n color: \"#c0c0c0\",\r\n },\r\n}));\r\n\r\n// Forwards ref from MUI Link component to react-router Link\r\nconst ForwardRouterLink = React.forwardRef((props, ref) => (\r\n \r\n {headerNavItems.map((entry, i) => {\r\n return (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {dispImg && (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default HomePageCard;\r\n","import React from \"react\";\r\nimport { Typography } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Content from \"../molecules/Content\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n dispHeroMsgWrapper: {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n width: \"100%\",\r\n maxWidth: 960,\r\n display: \"flex\",\r\n flexDirection: (props) => (props.isResponsive ? \"column\" : \"row\"),\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n padding: \"0 20px\",\r\n transform: \"translate(-50%, -50%)\",\r\n },\r\n dispHeroMsgTitleWrapper: {\r\n display: \"flex\",\r\n alignItems: \"stretch\",\r\n flex: \"0 0 auto\",\r\n marginRight: (props) => (props.isResponsive ? 0 : 15),\r\n },\r\n dispHeroMsgTitle: {\r\n color: (props) =>\r\n props.activeDispDisplayName === props.dispDisplayName\r\n ? \"#fff\"\r\n : \"transparent\",\r\n margin: (props) => (props.isResponsive ? \"-5px 0 10px 0\" : \"-10px 0 0 0\"),\r\n transition: \"color 2s\",\r\n },\r\n dispHeroMsgContent: {\r\n flex: \"1 1 auto\",\r\n width: \"100%\",\r\n color: (props) =>\r\n props.activeDispDisplayName === props.dispDisplayName\r\n ? \"#fff\"\r\n : \"transparent\",\r\n borderLeft: (props) =>\r\n props.activeDispDisplayName !== props.dispDisplayName ||\r\n props.isResponsive\r\n ? \"2px solid transparent\"\r\n : \"2px solid #fff\",\r\n transition: \"color 2.5s, border-left 2.5s\",\r\n paddingLeft: (props) => (props.isResponsive ? 0 : 15),\r\n },\r\n}));\r\n\r\nconst HomePageHeroNavMsg = ({\r\n activeDispDisplayName,\r\n dispDisplayName,\r\n message,\r\n isResponsive,\r\n}) => {\r\n const styleProps = { activeDispDisplayName, dispDisplayName, isResponsive };\r\n const classes = useStyles(styleProps);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HomePageHeroNavMsg;\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport HomePageCard from \"../atoms/HomePageCard\";\r\nimport HomePageHeroNavMsg from \"../molecules/HomePageHeroNavMsg\";\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\r\nimport { ContentContext } from \"../../context/ContentContext\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n heroNavWrapper: {\r\n width: \"100%\",\r\n height: \"auto\",\r\n backgroundImage:\r\n \"linear-gradient(transparent 0%, transparent 30%, #fcaf25 30%, #fcaf25 100%)\",\r\n padding: 0,\r\n marginTop: -300,\r\n },\r\n dispCardsWrapperWrapper: {\r\n float: \"left\",\r\n width: \"100%\",\r\n },\r\n dispCardsWrapper: {\r\n width: \"100%\",\r\n height: (props) => (props.isResponsiveXs ? 152 : \"auto\"),\r\n maxWidth: 1050,\r\n backgroundImage:\r\n \"linear-gradient(transparent 0%, transparent 30%, #fcaf25 30%, #fcaf25 100%)\",\r\n margin: \"0 auto\",\r\n paddingTop: (props) => (props.isResponsive ? 15 : 25),\r\n overflow: \"hidden\",\r\n },\r\n dispHeroMsgGradientBox: {\r\n float: \"left\",\r\n position: \"relative\",\r\n backgroundImage: \"linear-gradient(#fcaf25, #e89723)\",\r\n width: \"100%\",\r\n // The Hero Nav message box must be a fixed height so it doesn't\r\n // bounce up and down during animation between disciplines\r\n height: (props) =>\r\n props.isResponsiveSm\r\n ? 500\r\n : props.isResponsive\r\n ? 420\r\n : props.isResponsiveMd\r\n ? 260\r\n : 360,\r\n },\r\n}));\r\n\r\nconst HomePageHeroNav = ({ handleClick }) => {\r\n const isResponsiveMd = useMediaQuery(\"(min-width:960px)\");\r\n const isResponsive = useMediaQuery(\"(max-width:730px)\");\r\n const isResponsiveSm = useMediaQuery(\"(max-width:480px)\");\r\n const isResponsiveXs = useMediaQuery(\"(max-width:380px)\");\r\n const styleProps = {\r\n isResponsive,\r\n isResponsiveXs,\r\n isResponsiveSm,\r\n isResponsiveMd,\r\n };\r\n const classes = useStyles(styleProps);\r\n const interval = 8000;\r\n\r\n const content = useContext(ContentContext);\r\n\r\n const dispUrlNamesArray = content.getDisciplineNames().map((d) => d.urlSlug);\r\n const [activeDispIndex, setActiveDispIndex] = useState(0);\r\n const [isMouseEntered, setIsMouseEntered] = useState(false);\r\n\r\n // Hero Nav animation\r\n useEffect(() => {\r\n let loop;\r\n if (!isMouseEntered) {\r\n loop = setInterval(() => {\r\n setActiveDispIndex((activeDispIndex + 1) % 4);\r\n }, interval);\r\n } else {\r\n clearInterval(loop);\r\n }\r\n return () => clearInterval(loop);\r\n }, [activeDispIndex, isMouseEntered]);\r\n\r\n // Hero Nav animation - user interruption resets animation loop\r\n const handleMouseEnter = (dispUrlName) => {\r\n setIsMouseEntered(true);\r\n setActiveDispIndex(dispUrlNamesArray.indexOf(dispUrlName));\r\n };\r\n\r\n const handleMouseLeave = () => {\r\n setIsMouseEntered(false);\r\n };\r\n\r\n return (\r\n \r\n \r\n {dispDisplayName}\r\n \r\n
\r\n \r\n {message && (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HomePageHeroNav;\r\n","import React from \"react\";\r\nimport { CircularProgress } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n loadingViewWrapper: {\r\n display: \"flex\",\r\n flexGrow: 1,\r\n justifyContent: \"center\",\r\n },\r\n loadingContentWrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n },\r\n}));\r\n\r\nconst Loading = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n \r\n {dispUrlNamesArray.map((name, i) => {\r\n const imageUrl = content.getSiloPrimaryImageUrl(name);\r\n const statement = content.getSiloPositioningStatement(name);\r\n const displayImage = { name, imageUrl, statement };\r\n return (\r\n
\r\n \r\n {dispUrlNamesArray.map((name, i) => {\r\n const imageUrl = content.getSiloPrimaryImageUrl(name);\r\n const statement = content.getSiloPositioningStatement(name);\r\n const displayImage = { name, imageUrl, statement };\r\n return (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Loading;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n parallax: {\r\n width: \"100%\",\r\n height: (props) => props.ht,\r\n backgroundColor: theme.palette.primary.main,\r\n backgroundImage: (props) => `url(${props.img})`,\r\n backgroundPositionX: \"center\",\r\n backgroundPositionY: (props) => props.parallaxOffset,\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundSize: \"cover\",\r\n margin: 0,\r\n },\r\n}));\r\n\r\n// TODO: Add logic so the scrolling starts when element comes into view\r\n// rather than starting at the top of the full page\r\nconst ParallaxImage = ({ img, ht }) => {\r\n const [docHeight, setDocHeight] = useState(0);\r\n const [screenHeight, setScreenHeight] = useState(0);\r\n const [yOffset, setYOffset] = useState(0);\r\n const [parallaxOffset, setParallaxOffset] = useState(0);\r\n\r\n const parallaxShift = () => {\r\n setDocHeight(document.body.clientHeight);\r\n setScreenHeight(window.innerHeight);\r\n setYOffset(window.pageYOffset);\r\n setParallaxOffset(yOffset / (docHeight - screenHeight));\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener(\"scroll\", parallaxShift);\r\n return () => {\r\n window.removeEventListener(\"scroll\", parallaxShift);\r\n };\r\n });\r\n\r\n const styleProps = { img, ht, parallaxOffset: `${parallaxOffset * 100}%` };\r\n const classes = useStyles(styleProps);\r\n\r\n return ;\r\n};\r\n\r\nexport default ParallaxImage;\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport Dialog from \"./Dialog\";\r\nimport Error from \"./Error\";\r\nimport HomePageContent from \"../molecules/HomePageContent\";\r\nimport HomePageForm from \"../molecules/HomePageForm\";\r\nimport HomePageHeader from \"../organisms/HomePageHeader\";\r\nimport HomePageHeroNav from \"../organisms/HomePageHeroNav\";\r\nimport Loading from \"./Loading\";\r\nimport ParallaxImage from \"../molecules/ParallaxImage\";\r\nimport headerBg from \"../../assets/AMP-TAP-home-page-hdr-bg.jpg\";\r\nimport heroImg2 from \"../../assets/background-laser.jpg\";\r\nimport { ContentContext } from \"../../context/ContentContext\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n header: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: theme.palette.primary.main,\r\n backgroundImage: `url(${headerBg})`,\r\n backgroundPosition: \"center\",\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundSize: \"cover\",\r\n margin: 0,\r\n paddingBottom: 300,\r\n },\r\n content1Wrapper: {\r\n position: \"relative\",\r\n display: \"flex\",\r\n flexGrow: 1,\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n padding: \"70px 20px 100px\",\r\n },\r\n content2Wrapper: {\r\n maxWidth: 600,\r\n margin: \"100px auto\",\r\n },\r\n title1: {\r\n color: \"#fff\",\r\n textAlign: \"center\",\r\n fontWeight: 300,\r\n marginBottom: 20,\r\n },\r\n title2: {\r\n textAlign: \"center\",\r\n fontWeight: 300,\r\n },\r\n content: {\r\n textAlign: \"center\",\r\n },\r\n}));\r\n\r\nfunction HomePage() {\r\n const history = useHistory();\r\n const classes = useStyles();\r\n\r\n const [homePage, setHomePage] = useState(null);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [isError, setIsError] = useState(false);\r\n const [errorMsg, setErrorMsg] = useState(\"\");\r\n const [isRedirect, setIsRedirect] = useState(false);\r\n const [isDialogOpen, setIsDialogOpen] = useState(false);\r\n\r\n const content = useContext(ContentContext);\r\n\r\n useEffect(() => {\r\n const initAsync = async () => {\r\n try {\r\n const response = await content.getHomePageAsync();\r\n setIsLoading(false);\r\n setHomePage(response);\r\n } catch (err) {\r\n setIsLoading(false);\r\n setIsError(true);\r\n setErrorMsg(\"There was a problem loading the page.\");\r\n console.log(\"Unsuccessful ajax call msg: \", err);\r\n }\r\n };\r\n setIsLoading(true);\r\n initAsync();\r\n\r\n return () => {\r\n setIsRedirect(false);\r\n setIsError(false);\r\n setErrorMsg(\"\");\r\n };\r\n }, [content]);\r\n\r\n const handleRedirect = () => {\r\n setIsRedirect(true);\r\n };\r\n\r\n const handleDisciplineClick = (discipline) => {\r\n history.push(`/discipline/${discipline}`);\r\n };\r\n\r\n let renderProblem = null;\r\n if (isLoading) {\r\n renderProblem = \r\n
\r\n Nothing
;\r\n if (homePage) {\r\n renderHomePage = (\r\n <>\r\n {renderSignUpSuccessDialog}\r\n \r\n
\r\n \r\n \r\n {\r\n // Mapping by column number to produce path 'lanes' in layout\r\n // TODO: Test/Metrology only has single path. This means different\r\n // stages have to be able to express different path counts.\r\n // Kludgy solution, revisit and improve.\r\n paths &&\r\n paths.columnNums.map((column, i) => {\r\n const coll = collections\r\n ? collections.filter(\r\n (coll) => coll.path[0].position === column\r\n )[0]\r\n : null;\r\n // console.log(\"collection\", coll);\r\n if (coll) {\r\n // console.log(\"renderStageSm\",coll);\r\n const pathCount =\r\n coll.displayName === \"Standard\" ||\r\n coll.displayName === \"Specialized\"\r\n ? 1\r\n : paths.count;\r\n return (\r\n \r\n \r\n {coll.displayName}\r\n \r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n })\r\n }\r\n \r\n
\r\n );\r\n\r\n const renderStageMd = (\r\n \r\n
\r\n \r\n {\r\n // prettier-ignore\r\n \r\n {/* Blank above stage card */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n // Mapping by column number to produce path 'lanes' in layout\r\n // TODO: Test/Metrology only has single path. This means different stages have to be able to express different path counts. Kludgy solution, revisit and improve.\r\n paths && paths.columnNums.map((column, i) => {\r\n const coll = collections ? collections.filter((coll) => coll.path[0].position === column)[0] : null;\r\n if (coll) {\r\n const pathCount = coll.displayName === \"Standard\" || coll.displayName === \"Specialized\" ? 1 : paths.count;\r\n return (\r\n // prettier-ignore\r\n \r\n \r\n {coll.displayName}\r\n \r\n \r\n )\r\n } else {\r\n return null;\r\n }\r\n })\r\n }\r\n \r\n \r\n }\r\n {\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n // Mapping by column number to produce path 'lanes' in layout\r\n paths &&\r\n paths.columnNums.map((column, i) => {\r\n const coll = collections\r\n ? collections.filter(\r\n (coll) => coll.path[0].position === column\r\n )[0]\r\n : null;\r\n if (coll) {\r\n const pathCount =\r\n coll.displayName === \"Standard\" ||\r\n coll.displayName === \"Specialized\"\r\n ? 1\r\n : paths.count;\r\n return (\r\n
\r\n );\r\n\r\n return isSm ? renderStageSm : renderStageMd;\r\n};\r\n\r\nexport default DisciplineStage;\r\n","import React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport DisciplineStage from \"../molecules/DisciplineStage\";\r\nimport { ContentContext } from \"../../context/ContentContext\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n stagesFlexWrapper: {\r\n display: \"flex\",\r\n alignItems: \"stretch\",\r\n marginBottom: 30,\r\n minWidth: 0,\r\n minHeight: 0,\r\n },\r\n stagesWrapper: {\r\n marginBottom: 30,\r\n minWidth: 0,\r\n minHeight: 0,\r\n },\r\n}));\r\n\r\nconst DisciplineStagesWrapper = ({ disciplineUrlName }) => {\r\n const classes = useStyles();\r\n const content = useContext(ContentContext);\r\n\r\n return (\r\n \r\n {/* {content.getStageNames().map((stage, i) => { */}\r\n {content.getDisciplineStageNames(disciplineUrlName).map((stage, i) => {\r\n return (\r\n
\r\n );\r\n};\r\n\r\nexport default DisciplineStagesWrapper;\r\n","import React from \"react\";\r\nimport { Grid, Typography } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Content from \"../molecules/Content\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n messageWrap: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n marginBottom: 30,\r\n [theme.breakpoints.up(\"md\")]: {\r\n marginBottom: 40,\r\n },\r\n },\r\n}));\r\n\r\nconst DisciplineMainMessage = ({ headline, content }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n {headerNavItems.map((entry, i) => {\r\n return (\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {content.getDisciplineDisplayName(disciplineUrlName)}\r\n
\r\n\r\n \r\n {headingText}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FocusEntry;\r\n","import React from \"react\";\r\nimport { Grid, Button } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n researchButton: {\r\n display: \"flex\",\r\n flex: 0.9,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"flex-start\",\r\n lineHeight: 1.4,\r\n // minHeight: 40,\r\n // padding: \"5px 12px\",\r\n // margin: \"0 10px 10px 0\",\r\n backgroundColor: (props) =>\r\n props.isActive ? theme.palette.secondary.main : \"#fff\",\r\n \"&:hover, &:active, &:focus\": {\r\n backgroundColor: theme.palette.secondary.main,\r\n },\r\n borderColor: (props) =>\r\n props.isActive ? theme.palette.secondary.main : \"#184b9f\",\r\n },\r\n}));\r\n\r\nconst ResearchNavButton = ({ thrust, isDesktop, handleScroll, i }) => {\r\n const classes = useStyles();\r\n\r\n const handleClick = () => {\r\n handleScroll(thrust.id);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {/* Focus Name, Research Nav, Focus Description */}\r\n {displayName && (\r\n
\r\n );\r\n};\r\n\r\nexport default Focus;\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { Typography } from \"@material-ui/core\";\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport { useResizeObserver } from \"../../hooks/useResizeObserver\";\r\nimport Focus from \"./Focus\";\r\nimport Content from \"../molecules/Content\";\r\nimport GalleryImages from \"../molecules/GalleryImages\";\r\nimport Subhead from \"../atoms/Subhead\";\r\nimport Resource from \"../atoms/Resource\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n concentrationWrapper: {\r\n position: \"relative\",\r\n width: \"100%\",\r\n minHeight: 38,\r\n backgroundColor: \"transparent\",\r\n borderLeft: \"none\",\r\n marginTop: 0,\r\n marginBottom: 10,\r\n [theme.breakpoints.up(\"sm\")]: {\r\n minHeight: (props) => (props.isOpen ? props.wrapperBaseHeight + 50 : 38),\r\n borderLeft: (props) =>\r\n props.isOpen ? `38px solid ${theme.palette.primary.main}` : \"none\",\r\n },\r\n },\r\n concentrationClicker: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n width: \"100%\",\r\n height: 38,\r\n cursor: \"pointer\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n left: (props) => (props.isOpen ? -38 : 0),\r\n width: (props) => (props.isOpen ? 38 : \"100%\"),\r\n height: (props) => (props.isOpen ? \"100%\" : 38),\r\n minHeight: (props) => (props.isOpen ? props.wrapperBaseHeight + 50 : 38),\r\n },\r\n },\r\n concentrationName: {\r\n display: \"inline-block\",\r\n position: \"relative\",\r\n textTransform: \"uppercase\",\r\n fontWeight: 500,\r\n lineHeight: 1.57,\r\n color: \"#fff\",\r\n width: \"100%\",\r\n backgroundColor: (props) =>\r\n props.isOpen ? theme.palette.primary.main : \"#5d86c4\",\r\n padding: \"7px 15px 6px 38px\",\r\n transformOrigin: \"initial\",\r\n transform: \"initial\",\r\n \"&::before\": {\r\n content: \"''\",\r\n position: \"absolute\",\r\n top: (props) => (props.isOpen ? 13 : 13),\r\n left: (props) => (props.isOpen ? 14 : 16),\r\n width: 0,\r\n height: 0,\r\n marginRight: 10,\r\n borderTop: (props) =>\r\n !props.isOpen\r\n ? \"6px solid transparent\"\r\n : props.isDesktop\r\n ? \"6px solid transparent\"\r\n : \"10px solid #fff\",\r\n borderBottom: (props) =>\r\n !props.isOpen\r\n ? \"6px solid transparent\"\r\n : props.isDesktop\r\n ? \"6px solid transparent\"\r\n : \"none\",\r\n borderLeft: (props) =>\r\n !props.isOpen\r\n ? \"10px solid #fff\"\r\n : props.isDesktop\r\n ? \"none\"\r\n : \"6px solid transparent\",\r\n borderRight: (props) =>\r\n !props.isOpen\r\n ? \"none\"\r\n : props.isDesktop\r\n ? \"10px solid #fff\"\r\n : \"6px solid transparent\",\r\n },\r\n [theme.breakpoints.up(\"sm\")]: {\r\n position: (props) => (props.isOpen ? \"absolute\" : \"relative\"),\r\n top: (props) => (props.isOpen ? 10 : 0),\r\n left: (props) => (props.isOpen ? 0 : 0),\r\n padding: (props) =>\r\n props.isOpen ? \"7px 15px 6px 24px\" : \"7px 15px 6px 38px\",\r\n transformOrigin: (props) => (props.isOpen ? \"0 0\" : \"initial\"),\r\n transform: (props) => (props.isOpen ? \"rotate(90deg)\" : \"rotate(0deg)\"),\r\n \"&::before\": {\r\n top: (props) => (props.isOpen ? 13 : 13),\r\n left: (props) => (props.isOpen ? 2 : 15),\r\n },\r\n width: (props) => (props.isOpen ? \"auto\" : \"100%\"),\r\n },\r\n },\r\n}));\r\n\r\nconst Concentration = ({\r\n collectionId,\r\n concentration,\r\n isConcentrationOpen,\r\n handleChange,\r\n}) => {\r\n const {\r\n displayName,\r\n focuses,\r\n primaryImage,\r\n galleryImages,\r\n truckRamp,\r\n } = concentration;\r\n\r\n // Sets a ref on the Concentration heading so that when it's\r\n // open its minimum height can be set using the heading width\r\n const headingRef = useRef(null);\r\n const nodeCurrent = useResizeObserver(headingRef);\r\n\r\n // Sets a ref used for scrolling to the open concentration\r\n const wrapperRef = useRef(null);\r\n\r\n const isDesktop = useMediaQuery(\"(min-width:600px)\");\r\n\r\n // Set initial state\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [headingWidth, setHeadingWidth] = useState(null);\r\n\r\n useEffect(() => {\r\n setIsOpen(isConcentrationOpen);\r\n }, [isConcentrationOpen]);\r\n\r\n useEffect(() => {\r\n if (nodeCurrent) {\r\n setHeadingWidth(nodeCurrent.contentRect.width);\r\n }\r\n }, [nodeCurrent]);\r\n\r\n // Scroll to open concentration - IE doesn't support smooth scrolling\r\n // Had to add a delay - for some reason first render wasn't scrolling enough\r\n useEffect(() => {\r\n if (isOpen && wrapperRef.current) {\r\n const scrollDelayed = () =>\r\n setTimeout(() => {\r\n wrapperRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"start\",\r\n inline: \"nearest\",\r\n });\r\n }, 200);\r\n scrollDelayed();\r\n }\r\n }, [isOpen]);\r\n\r\n // Props for styling\r\n const styleProps = { isDesktop };\r\n if (headingWidth) {\r\n styleProps.wrapperBaseHeight = headingWidth;\r\n }\r\n styleProps.isOpen = isOpen;\r\n const classes = useStyles(styleProps);\r\n\r\n // Methods\r\n const handleClick = () => {\r\n if (isOpen) {\r\n handleChange(collectionId, null);\r\n setIsOpen(false);\r\n } else {\r\n handleChange(collectionId, concentration.sys.id);\r\n setIsOpen(true);\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n {displayName}\r\n \r\n
\r\n )}\r\n\r\n {/* Gallery Images */}\r\n {galleryImages && (\r\n \r\n \r\n Jump to Research Thrust\r\n \r\n {allThrusts.map((thrust, i) => (\r\n
\r\n )}\r\n\r\n {/* Primary Image */}\r\n {primaryImage && (\r\n \r\n
\r\n )}\r\n\r\n {/* Focus Description */}\r\n {description && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n\r\n {/* Contact: handled differently than other Person components */}\r\n {contact && (\r\n <>\r\n {contact.map((person) => (\r\n \r\n
\r\n ))}\r\n \r\n )}\r\n\r\n {/* Truck Ramp */}\r\n {truckRamp && (\r\n <>\r\n \r\n {displayName && (\r\n \r\n {displayName}\r\n \r\n )}\r\n \r\n {isOpen ? (\r\n <>\r\n {/* TODO: Discuss if Concentration should have these */}\r\n {primaryImage &&
\r\n );\r\n};\r\n\r\nexport default Concentration;\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\r\nimport { Typography } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { useResizeObserver } from \"../../hooks/useResizeObserver\";\r\n\r\nimport Concentration from \"./Concentration\";\r\nimport Content from \"../molecules/Content\";\r\nimport GalleryImages from \"../molecules/GalleryImages\";\r\nimport Person from \"../molecules/Person\";\r\nimport Resource from \"../atoms/Resource\";\r\nimport Subhead from \"../atoms/Subhead\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n collectionWrapper: {\r\n position: \"relative\",\r\n width: \"100%\",\r\n minHeight: 38,\r\n backgroundColor: \"transparent\",\r\n borderLeft: \"none\",\r\n marginTop: 0,\r\n // cursor: \"pointer\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n minHeight: (props) => (props.isOpen ? props.wrapperBaseHeight + 50 : 38),\r\n borderLeft: (props) =>\r\n props.isOpen ? `38px solid ${theme.palette.info.main}` : \"none\",\r\n },\r\n },\r\n collectionClicker: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n width: \"100%\",\r\n height: 38,\r\n cursor: \"pointer\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n left: (props) => (props.isOpen ? -38 : 0),\r\n width: (props) => (props.isOpen ? 38 : \"100%\"),\r\n height: (props) => (props.isOpen ? \"100%\" : 38),\r\n minHeight: (props) => (props.isOpen ? props.wrapperBaseHeight + 50 : 38),\r\n },\r\n },\r\n collectionName: {\r\n display: \"inline-block\",\r\n position: \"relative\",\r\n textTransform: \"uppercase\",\r\n fontWeight: 500,\r\n color: \"#fff\",\r\n width: \"100%\",\r\n backgroundColor: theme.palette.info.main,\r\n marginBottom: 10,\r\n padding: \"7px 0 6px 38px\",\r\n transformOrigin: \"initial\",\r\n transform: \"initial\",\r\n \"&::before\": {\r\n content: \"''\",\r\n position: \"absolute\",\r\n top: (props) => (props.isOpen ? 14 : 13),\r\n left: (props) => (props.isOpen ? 14 : 16),\r\n width: 0,\r\n height: 0,\r\n marginRight: 10,\r\n borderTop: (props) =>\r\n !props.isOpen\r\n ? \"6px solid transparent\"\r\n : props.isDesktop\r\n ? \"6px solid transparent\"\r\n : \"10px solid #fff\",\r\n borderBottom: (props) =>\r\n !props.isOpen\r\n ? \"6px solid transparent\"\r\n : props.isDesktop\r\n ? \"6px solid transparent\"\r\n : \"none\",\r\n borderLeft: (props) =>\r\n !props.isOpen\r\n ? \"10px solid #fff\"\r\n : props.isDesktop\r\n ? \"none\"\r\n : \"6px solid transparent\",\r\n borderRight: (props) =>\r\n !props.isOpen\r\n ? \"none\"\r\n : props.isDesktop\r\n ? \"10px solid #fff\"\r\n : \"6px solid transparent\",\r\n },\r\n [theme.breakpoints.up(\"sm\")]: {\r\n position: (props) => (props.isOpen ? \"absolute\" : \"relative\"),\r\n top: (props) => (props.isOpen ? 10 : \"auto\"),\r\n left: (props) => (props.isOpen ? 0 : \"auto\"),\r\n padding: (props) =>\r\n props.isOpen ? \"7px 15px 6px 24px\" : \"7px 15px 6px 38px\",\r\n transformOrigin: (props) => (props.isOpen ? \"0 0\" : \"initial\"),\r\n transform: (props) => (props.isOpen ? \"rotate(90deg)\" : \"rotate(0deg)\"),\r\n \"&::before\": {\r\n top: (props) => (props.isOpen ? 12 : 13),\r\n left: (props) => (props.isOpen ? 2 : 16),\r\n },\r\n width: (props) => (props.isOpen ? \"auto\" : \"100%\"),\r\n },\r\n },\r\n collectionIntro: {\r\n // Need to leave this syntax or breakpoint padding (below) will override\r\n padding: (props) => (props.isFirstCollection ? \"10px 0 0 0\" : \"10px 0 0 0\"),\r\n marginBottom: 30,\r\n overflow: \"hidden\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n padding: (props) =>\r\n props.isFirstCollection ? \"0 0 0 20px\" : \"20px 0 0 20px\",\r\n },\r\n },\r\n contactText: {\r\n paddingTop: 10,\r\n },\r\n}));\r\n\r\nconst Collection = ({\r\n collectionIndex,\r\n collection,\r\n activeConcentrationId,\r\n isCollectionOpen,\r\n handleChange,\r\n}) => {\r\n const {\r\n displayName,\r\n positioningStatement,\r\n description,\r\n contact,\r\n concentrations,\r\n primaryImage,\r\n galleryImages,\r\n truckRamp,\r\n } = collection;\r\n\r\n // console.log(\"Collection\", \"activeConcentrationId\", activeConcentrationId);\r\n\r\n // Sets a ref on the Collection heading so the vertical header bar\r\n // can be set to a min height of Collection heading width\r\n const headingRef = useRef(null);\r\n const nodeCurrent = useResizeObserver(headingRef);\r\n\r\n const isDesktop = useMediaQuery(\"(min-width:600px)\");\r\n\r\n // Set initial state\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [headingWidth, setHeadingWidth] = useState(null);\r\n\r\n // Needs to run on every rerender so the correct collection wrapper height is set\r\n useEffect(() => {\r\n setIsOpen(isCollectionOpen);\r\n }, [isCollectionOpen]);\r\n\r\n useEffect(() => {\r\n if (nodeCurrent) {\r\n setHeadingWidth(nodeCurrent.contentRect.width);\r\n }\r\n }, [nodeCurrent]);\r\n\r\n const styleProps = { isDesktop };\r\n if (headingWidth) {\r\n styleProps.wrapperBaseHeight = headingWidth;\r\n }\r\n styleProps.isOpen = isOpen;\r\n\r\n if (collectionIndex === 0) {\r\n styleProps.isFirstCollection = true;\r\n }\r\n\r\n const classes = useStyles(styleProps);\r\n\r\n let isIntroNotEmpty = true;\r\n if (\r\n !positioningStatement &&\r\n !primaryImage &&\r\n !description &&\r\n !galleryImages &&\r\n !contact\r\n ) {\r\n isIntroNotEmpty = false;\r\n }\r\n\r\n const handleClick = () => {\r\n // console.log(\r\n // \"Collection\",\r\n // \"handleClick\",\r\n // isCollectionOpen,\r\n // collection.concentrations[0].sys.id\r\n // );\r\n if (isCollectionOpen) {\r\n // handleChange(null, collection.concentrations[0].sys.id);\r\n handleChange(null, null);\r\n } else if (collection.concentrations) {\r\n // handleChange(collection.sys.id, collection.concentrations[0].sys.id);\r\n handleChange(collection.sys.id, null);\r\n } else {\r\n handleChange(collection.sys.id, null);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {displayName && (\r\n \r\n {displayName}\r\n \r\n )}\r\n \r\n {isOpen && (\r\n <>\r\n {isIntroNotEmpty && (\r\n
\r\n );\r\n};\r\n\r\nexport default Collection;\r\n","import React from \"react\";\r\nimport { Grid, Typography } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Content from \"../molecules/Content\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n messageWrap: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n // marginBottom: 30,\r\n // [theme.breakpoints.up(\"md\")]: {\r\n // marginBottom: 40,\r\n // },\r\n margin: 0,\r\n },\r\n}));\r\n\r\nconst StageMainMessage = ({ info }) => {\r\n const classes = useStyles();\r\n return (\r\n info && (\r\n \r\n {positioningStatement && (\r\n
\r\n )}\r\n <>\r\n {concentrations &&\r\n concentrations.map((concentration) => (\r\n \r\n {emptySectionDialog}\r\n \r\n {disciplineUrlName && (\r\n \r\n
\r\n );\r\n }\r\n\r\n return renderProblem || renderStage;\r\n};\r\n\r\nexport default Stage;\r\n","import React from \"react\";\r\nimport { Link as RouterLink } from \"react-router-dom\";\r\nimport { AppBar, Typography, Link } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport logo from \"../../assets/AMP-TAP-Logo-horz-ko.svg\";\r\nimport bgImg from \"../../assets/AMP-TAP-home-page-ftr-bg.jpg\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n footer: {\r\n // flexGrow: 0,\r\n // flexShrink: 0,\r\n flex: \"0 0 auto\",\r\n display: \"flex\",\r\n textAlign: \"center\",\r\n justifyContent: \"center\",\r\n alignContent: \"center\",\r\n minHeight: 160,\r\n alignSelf: \"flex-end\",\r\n backgroundColor: theme.palette.primary.main,\r\n backgroundImage: `url(${bgImg})`,\r\n borderTop: `10px solid ${theme.palette.secondary.main}`,\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundSize: \"cover\",\r\n backgroundPosition: \"center\",\r\n marginTop: \"auto\",\r\n marginBottom: 0,\r\n padding: \"80px 20px\",\r\n },\r\n legalWrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n flexDirection: \"row\",\r\n },\r\n },\r\n logoLink: {\r\n marginBottom: 20,\r\n },\r\n logo: {\r\n height: 60,\r\n [theme.breakpoints.up(\"md\")]: {\r\n height: 75,\r\n },\r\n transition: \"height 0.5s\",\r\n },\r\n miceType: {\r\n display: \"inline-block\",\r\n fontSize: \".9em\",\r\n color: \"#fff\",\r\n margin: \"0 0 10px\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"block\",\r\n margin: \"0 10px\",\r\n },\r\n },\r\n link: {\r\n display: \"inline-block\",\r\n fontSize: \".9em\",\r\n color: \"#fff\",\r\n margin: \"0 0 10px\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"block\",\r\n margin: \"0 10px\",\r\n },\r\n },\r\n}));\r\n\r\n// Forwards ref from MUI Link component to react-router Link\r\nconst ForwardRouterLink = React.forwardRef((props, ref) => (\r\n \r\n \r\n {content.getDisciplineDisplayName(disciplineUrlName)}\r\n \r\n
\r\n )}\r\n {stagePosInfo && \r\n \r\n
\r\n \r\n \r\n {copyright}\r\n \r\n\r\n \r\n Privacy Policy\r\n \r\n\r\n \r\n Terms & Conditions\r\n \r\n\r\n \r\n Site Map\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {isContact && \r\n Contact:\r\n \r\n )} */}\r\n {fullName &&\r\n (isFocusEntry ? (\r\n
\r\n\r\n {facilities && (\r\n \r\n
\r\n )}\r\n\r\n {research && (\r\n \r\n
\r\n ))}\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n )}\r\n\r\n {studentGroups && (\r\n \r\n \r\n
\r\n ))}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Person;\r\n","import React from \"react\";\r\nimport { Typography } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n heading: {\r\n fontWeight: 700,\r\n fontSize: \"1.45rem\",\r\n padding: \"0 0 .17rem 0\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n fontSize: \"1.6rem\",\r\n },\r\n },\r\n}));\r\n\r\nconst Heading = ({ content }) => {\r\n const classes = useStyles();\r\n return (\r\n