-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path.eslintcache
1 lines (1 loc) · 171 KB
/
.eslintcache
1
[{"C:\\Users\\Noah Beamon\\data-science-lab\\src\\index.js":"1","C:\\Users\\Noah Beamon\\data-science-lab\\src\\App.js":"2","C:\\Users\\Noah Beamon\\data-science-lab\\src\\reportWebVitals.js":"3","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel.js":"4","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Home.js":"5","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects.js":"6","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Navbar.js":"7","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Footer.js":"8","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Publications.js":"9","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\Allofus.js":"10","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\Wastewater.js":"11","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\HemanShakeri.js":"12","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Resources.js":"13","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Blog.js":"14","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Contact.js":"15","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Teachingandlectures.js":"16","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\Wastewatertracker.js":"17","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\ChartData.js":"18","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Publications\\Multiplex.js":"19","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Teaching\\MaterialA.js":"20","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\MehrdadFazli.js":"21","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\ColinCrowe.js":"22","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\NoahBeamon.js":"23"},{"size":500,"mtime":499162500000,"results":"24","hashOfConfig":"25"},{"size":3598,"mtime":1631592272729,"results":"26","hashOfConfig":"25"},{"size":362,"mtime":499162500000,"results":"27","hashOfConfig":"25"},{"size":5930,"mtime":1622861772791,"results":"28","hashOfConfig":"25"},{"size":20771,"mtime":1631828901098,"results":"29","hashOfConfig":"25"},{"size":16004,"mtime":1622860325106,"results":"30","hashOfConfig":"25"},{"size":2782,"mtime":1631592171407,"results":"31","hashOfConfig":"25"},{"size":4118,"mtime":1627084013384,"results":"32","hashOfConfig":"25"},{"size":17942,"mtime":1622860325126,"results":"33","hashOfConfig":"25"},{"size":619,"mtime":1622860325106,"results":"34","hashOfConfig":"25"},{"size":628,"mtime":1622860325116,"results":"35","hashOfConfig":"25"},{"size":634,"mtime":1622860325091,"results":"36","hashOfConfig":"25"},{"size":308,"mtime":1609823109310,"results":"37","hashOfConfig":"38"},{"size":610,"mtime":1622860325066,"results":"39","hashOfConfig":"25"},{"size":619,"mtime":1622860325066,"results":"40","hashOfConfig":"25"},{"size":16061,"mtime":1622860325141,"results":"41","hashOfConfig":"25"},{"size":53716,"mtime":1631562746142,"results":"42","hashOfConfig":"25"},{"size":236142,"mtime":1622860325111,"results":"43","hashOfConfig":"25"},{"size":625,"mtime":1622860325131,"results":"44","hashOfConfig":"25"},{"size":625,"mtime":1622860325141,"results":"45","hashOfConfig":"25"},{"size":634,"mtime":1622860325096,"results":"46","hashOfConfig":"25"},{"size":628,"mtime":1622860325086,"results":"47","hashOfConfig":"25"},{"size":628,"mtime":1622860325096,"results":"48","hashOfConfig":"25"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},"15boin3",{"filePath":"52","messages":"53","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"54","usedDeprecatedRules":"51"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"57","messages":"58","errorCount":0,"warningCount":10,"fixableErrorCount":0,"fixableWarningCount":0,"source":"59","usedDeprecatedRules":"51"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":24,"fixableErrorCount":0,"fixableWarningCount":0,"source":"62","usedDeprecatedRules":"51"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":12,"fixableErrorCount":0,"fixableWarningCount":0,"source":"65","usedDeprecatedRules":"51"},{"filePath":"66","messages":"67","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"68","usedDeprecatedRules":"51"},{"filePath":"69","messages":"70","errorCount":0,"warningCount":8,"fixableErrorCount":0,"fixableWarningCount":0,"source":"71","usedDeprecatedRules":"51"},{"filePath":"72","messages":"73","errorCount":0,"warningCount":14,"fixableErrorCount":0,"fixableWarningCount":0,"source":"74","usedDeprecatedRules":"51"},{"filePath":"75","messages":"76","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"79","messages":"80","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"81","messages":"82","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"83"},"tqbpmb",{"filePath":"84","messages":"85","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"86","messages":"87","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"88","messages":"89","errorCount":0,"warningCount":14,"fixableErrorCount":0,"fixableWarningCount":0,"source":"90","usedDeprecatedRules":"51"},{"filePath":"91","messages":"92","errorCount":0,"warningCount":18,"fixableErrorCount":0,"fixableWarningCount":0,"source":"93","usedDeprecatedRules":"51"},{"filePath":"94","messages":"95","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"96"},{"filePath":"97","messages":"98","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"99","messages":"100","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"101","messages":"102","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"103","messages":"104","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"105","messages":"106","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},"C:\\Users\\Noah Beamon\\data-science-lab\\src\\index.js",[],["107","108"],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\App.js",["109"],"import React from \"react\";\r\nimport \"./App.css\";\r\n//import * as ReactBootstrap from \"react-bootstrap\";\r\nimport Home from \"./Components/Home\";\r\nimport Blog from \"./Components/Blog\";\r\nimport Projects from \"./Components/Projects\";\r\nimport Publications from \"./Components/Publications\";\r\nimport Personnel from \"./Components/Personnel\";\r\nimport Teachingandlectures from \"./Components/Teachingandlectures\";\r\nimport Contact from \"./Components/Contact\";\r\nimport Navbar from \"./Components/Navbar\";\r\nimport Footer from \"./Components/Footer\";\r\n\r\n//projects\r\nimport Allofus from \"./Components/Projects/Allofus\";\r\nimport Wastewater from \"./Components/Projects/Wastewater\";\r\nimport Wastewatertracker from \"./Components/Projects/Wastewatertracker\";\r\n\r\n//publications\r\nimport Multiplex from \"./Components/Publications/Multiplex\";\r\n\r\n//teaching\r\nimport MaterialA from \"./Components/Teaching/MaterialA\";\r\n\r\n//personnel\r\nimport HemanShakeri from \"./Components/Personnel/HemanShakeri\";\r\nimport NoahBeamon from \"./Components/Personnel/NoahBeamon\";\r\nimport MehrdadFazli from \"./Components/Personnel/MehrdadFazli\";\r\nimport ColinCrowe from \"./Components/Personnel/ColinCrowe\";\r\n\r\nimport {\r\n BrowserRouter as Router,\r\n Switch,\r\n Route,\r\n //Link\r\n} from \"react-router-dom\";\r\n\r\nfunction App() {\r\n return (\r\n // <div className=\"page-container\">\r\n <div style={{ overflow: \"hidden\" }} className=\"page-container\">\r\n <div className=\"content-wrap\">\r\n <Router>\r\n <Navbar />\r\n <Switch>\r\n {/*Projects*/}\r\n <Route path=\"/Wastewater\" component={Wastewater}>\r\n <Wastewater />\r\n </Route>\r\n <Route path=\"/Wastewatertracker\" component={Wastewatertracker}>\r\n <Wastewatertracker />\r\n </Route>\r\n <Route path=\"/Allofus\" component={Allofus}>\r\n <Allofus />\r\n </Route>\r\n {/*Publications*/}\r\n <Route path=\"/Multiplex\" component={Multiplex}>\r\n <Multiplex />\r\n </Route>\r\n {/*Teaching/Lectures*/}\r\n <Route path=\"/MaterialA\" component={MaterialA}>\r\n <MaterialA />\r\n </Route>\r\n {/*Personnel*/}\r\n <Route path=\"/MehrdadFazli\" component={MehrdadFazli}>\r\n <MehrdadFazli />\r\n </Route>\r\n <Route path=\"/ColinCrowe\" component={ColinCrowe}>\r\n <ColinCrowe />\r\n </Route>\r\n <Route path=\"/NoahBeamon\" component={NoahBeamon}>\r\n <NoahBeamon />\r\n </Route>\r\n <Route path=\"/HemanShakeri\" component={HemanShakeri}>\r\n <HemanShakeri />\r\n </Route>\r\n\r\n {/*Tabs*/}\r\n <Route path=\"/Contact\" component={Contact}>\r\n <Contact />\r\n </Route>\r\n {/* <Route path=\"/Blog\" component={Blog}>\r\n <Blog />\r\n </Route> */}\r\n <Route path=\"/Teachingandlectures\" component={Teachingandlectures}>\r\n <Teachingandlectures />\r\n </Route>\r\n <Route path=\"/Publications\" component={Publications}>\r\n <Publications />\r\n </Route>\r\n <Route path=\"/Projects\" component={Projects}>\r\n <Projects />\r\n </Route>\r\n <Route path=\"/People\" component={Personnel}>\r\n <Personnel />\r\n </Route>\r\n <Route path=\"/\" component={Home}>\r\n <Home />\r\n </Route>\r\n </Switch>\r\n </Router>\r\n </div>\r\n <Footer />\r\n </div>\r\n );\r\n}\r\n\r\nexport default App;\r\n","C:\\Users\\Noah Beamon\\data-science-lab\\src\\reportWebVitals.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel.js",["110","111","112","113","114","115","116","117","118","119"],"import React, { useState } from 'react';\r\nimport MehrdadFazli from \"./images/MehrdadFazli.jpg\"; \r\nimport ColinCrowe from \"./images/ColinCrowe.jpg\"; \r\n\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile\r\n } from \"react-device-detect\";\r\n\r\nconst Personnel = () => {\r\n return(\r\n <div className=\"App\" style={{marginTop: 80}}>\r\n {!isMobile && <BrowserView>\r\n <div style={{display: \"flex\", flexDirection: \"row\", margin: 20}}>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20, width: 250, cursor: \"pointer\"}}\r\n onClick={() => {\r\n window.location.href = \"HemanShakeri\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src=\"https://api.dsi.virginia.edu/sites/default/files/styles/square_sm/public/headshots/people/2020-01/Heman_001.png?w=1500\" />\r\n <div style={{padding: 5}}>\r\n <strong>Heman Shakeri</strong>\r\n <p>Assistant Professor, School of Data Science | University of Virginia</p>\r\n </div>\r\n </div>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20, width: 250, cursor: \"pointer\"}}\r\n onClick={() => {\r\n window.location.href = \"MehrdadFazli\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src={MehrdadFazli} />\r\n <div style={{padding: 5}}>\r\n <strong>Mehrdad Fazli</strong>\r\n <p>Ph.D. student at Engineering Systems and Environment | University of Virginia</p>\r\n </div>\r\n </div>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20, width: 250, cursor: \"pointer\"}}\r\n onClick={() => {\r\n window.location.href = \"NoahBeamon\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src=\"https://virginiaequitycenter.org/sites/virginiaequitycenter.org/files/styles/people_crop__200x200_/public/Noah%20Beamon.png?itok=NoEZz7aZ\" />\r\n <div style={{padding: 5}}>\r\n <strong>Noah Beamon</strong>\r\n <p>Undergraduate Research Assistant | University of Virginia</p>\r\n </div>\r\n </div>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20, width: 250, cursor: \"pointer\"}}\r\n onClick={() => {\r\n window.location.href = \"ColinCrowe\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src={ColinCrowe} />\r\n <div style={{padding: 5}}>\r\n <strong>Colin Crowe (he/him)</strong>\r\n <p>Undergraduate Research Assistant | University of Virginia</p>\r\n </div>\r\n </div>\r\n </div>\r\n </BrowserView>}\r\n {isMobile && \r\n <MobileView>\r\n <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\"}}>\r\n <div style={{borderRadius: 10, margin: 20}}\r\n onClick={() => {\r\n window.location.href = \"HemanShakeri\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src=\"https://api.dsi.virginia.edu/sites/default/files/styles/square_sm/public/headshots/people/2020-01/Heman_001.png?w=1500\"/>\r\n <div style={{padding: 5}}>\r\n <strong>Heman Shakeri</strong>\r\n <p>Assistant Professor, School of Data Science | University of Virginia</p>\r\n </div>\r\n </div>\r\n <div style={{borderRadius: 10, margin: 20}}\r\n onClick={() => {\r\n window.location.href = \"MehrdadFazli\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src={MehrdadFazli}/>\r\n <div style={{padding: 5}}>\r\n <strong>Mehrdad Fazli</strong>\r\n <p>Ph.D. student at Engineering Systems and Environment | University of Virginia</p>\r\n </div>\r\n </div>\r\n <div style={{borderRadius: 10, margin: 20}}\r\n onClick={() => {\r\n window.location.href = \"NoahBeamon\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src=\"https://virginiaequitycenter.org/sites/virginiaequitycenter.org/files/styles/people_crop__200x200_/public/Noah%20Beamon.png?itok=NoEZz7aZ\"/>\r\n <div style={{padding: 5}}>\r\n <strong>Noah Beamon</strong>\r\n <p>Undergraduate Research Assistant | University of Virginia</p>\r\n </div>\r\n </div>\r\n <div style={{borderRadius: 10, margin: 20}}\r\n onClick={() => {\r\n window.location.href = \"ColinCrowe\"\r\n }}\r\n >\r\n <img style={{borderRadius: 10, height: 250}} src={ColinCrowe}/>\r\n <div style={{padding: 5}}>\r\n <strong>Colin Crowe (he/him)</strong>\r\n <p>Undergraduate Research Assistant | University of Virginia</p>\r\n </div>\r\n </div>\r\n </div>\r\n </MobileView>}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Personnel; ","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Home.js",["120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143"],"import React, { useState, useEffect, useRef } from \"react\";\r\nimport ReactMarkdown from \"react-markdown\";\r\n\r\nimport MarkdownPathIntro from \"./Home.md\";\r\nimport MarkdownPathPI from \"./PI.md\";\r\nimport MarkdownPathPeople from \"./People.md\";\r\nimport MarkdownPathNews from \"./News.md\";\r\nimport MarkdownPathProjects from \"./Projects.md\";\r\nimport MarkdownPathPublications from \"./Publications.md\";\r\n\r\nimport \"./Home.css\";\r\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\r\nimport \"react-tabs/style/react-tabs.css\";\r\nimport { TwitterTimelineEmbed } from \"react-twitter-embed\";\r\nimport emailjs from \"emailjs-com\";\r\nimport { AiFillGithub } from \"react-icons/ai\";\r\nimport { SiGooglescholar, SiOrcid } from \"react-icons/si\";\r\nimport RecentsJSON from \"./Recents.json\";\r\nimport { MdSubtitles } from \"react-icons/md\";\r\nimport { IoIosCalendar, IoMdSearch } from \"react-icons/io\";\r\nimport { BiHash } from \"react-icons/bi\";\r\nimport { FaTwitter } from \"react-icons/fa\";\r\nimport {\r\n Form,\r\n Button,\r\n FormGroup,\r\n FormControl,\r\n ControlLabel,\r\n} from \"react-bootstrap\";\r\n\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile,\r\n} from \"react-device-detect\";\r\n\r\nconst Home = () => {\r\n // const[name, setName] = useState(\"\");\r\n // const[email, setEmail] = useState(\"\");\r\n // const[message, setMessage] = useState(\"\");\r\n\r\n // const[button1, setButton1] = useState('2px solid rgb(0, 0, 0, 1)');\r\n // const[button2, setButton2] = useState('2px solid rgb(0, 0, 0, 1)');\r\n // const[button3, setButton3] = useState('2px solid rgb(0, 0, 0, 1)');\r\n\r\n // const[inputTitle, setInputTitle] = useState(\"\");\r\n // const[inputDescription, setInputDescription] = useState(\"\");\r\n // const[inputTags, setInputTags] = useState(\"\");\r\n // const[inputTime, setInputTime] = useState(\"\");\r\n\r\n // const[buttonColor, setButtonColor] = useState(\"rgba(46, 61, 130, 1)\");\r\n\r\n var [textIntro, setTextIntro] = useState(null);\r\n var [textPI, setTextPI] = useState(null);\r\n var [textPeople, setTextPeople] = useState(null);\r\n var [textNews, setTextNews] = useState(null);\r\n var [textProjects, setTextProjects] = useState(null);\r\n var [textPublications, setTextPublications] = useState(null);\r\n\r\n useEffect(() => {\r\n fetch(MarkdownPathIntro)\r\n .then((response) => response.text())\r\n .then((text) => {\r\n setTextIntro(text);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetch(MarkdownPathPI)\r\n .then((response) => response.text())\r\n .then((text) => {\r\n setTextPI(text);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetch(MarkdownPathPeople)\r\n .then((response) => response.text())\r\n .then((text) => {\r\n setTextPeople(text);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetch(MarkdownPathNews)\r\n .then((response) => response.text())\r\n .then((text) => {\r\n setTextNews(text);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetch(MarkdownPathProjects)\r\n .then((response) => response.text())\r\n .then((text) => {\r\n setTextProjects(text);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetch(MarkdownPathPublications)\r\n .then((response) => response.text())\r\n .then((text) => {\r\n setTextPublications(text);\r\n });\r\n }, []);\r\n\r\n const [twitterVisible, setTwitterVisible] = useState(false);\r\n const [alertVisible, setAlertVisible] = useState(true);\r\n\r\n return (\r\n <div className=\"App\" style={{ marginTop: 80 }}>\r\n {!isMobile && (\r\n <BrowserView>\r\n <div style={{ margin: 20 }}>\r\n <div style={{ flexDirection: \"column\", textAlign: \"left\" }}>\r\n <ReactMarkdown source={textIntro} />\r\n </div>\r\n <div class=\"content-search-container\">\r\n <div style={{ flexDirection: \"column\" }}>\r\n <div>\r\n <ReactMarkdown source={textPI} />\r\n </div>\r\n <div>\r\n <ReactMarkdown source={textPeople} />\r\n </div>\r\n <div>\r\n <ReactMarkdown source={textNews} />\r\n </div>\r\n </div>\r\n <div style={{ flexDirection: \"column\" }}>\r\n <div>\r\n <ReactMarkdown source={textProjects} />\r\n </div>\r\n <div>\r\n <ReactMarkdown source={textPublications} />\r\n </div>\r\n </div>\r\n </div>\r\n {/* <div class=\"content-search-container\">\r\n <div style={{ flexDirection: \"column\", margin: 10 }}>\r\n <ReactMarkdown source={text1} />\r\n </div>\r\n <div style={{ flexDirection: \"column\", margin: 10 }}>\r\n <ReactMarkdown source={text1} />\r\n </div>\r\n <div style={{ flexDirection: \"column\", margin: 10 }}>\r\n <ReactMarkdown source={text4} />\r\n </div>\r\n </div> */}\r\n </div>\r\n {/* <div style={{ margin: 20, textAlign: \"left\" }}>\r\n <ReactMarkdown source={text1} />\r\n </div>\r\n {alertVisible && (\r\n <div\r\n style={{\r\n backgroundColor: \"whitesmoke \",\r\n borderRadius: 10,\r\n margin: 20,\r\n }}\r\n >\r\n <ReactMarkdown source={text2} />\r\n <p\r\n style={{ color: \"gray\", cursor: \"pointer\" }}\r\n onClick={() => {\r\n setAlertVisible(false);\r\n }}\r\n >\r\n <strong>X Close</strong>\r\n </p>\r\n </div>\r\n )}\r\n <div style={{ display: \"flex\", flexDirection: \"column\", margin: 20 }}>\r\n <div\r\n style={{\r\n margin: 10,\r\n height: window.innerHeight / 1.5,\r\n overflow: \"auto\",\r\n }}\r\n >\r\n <div style={{ textAlign: \"left\" }}>\r\n <ReactMarkdown source={text3} />\r\n </div>\r\n </div>\r\n </div> */}\r\n </BrowserView>\r\n )}\r\n {isMobile && (\r\n <MobileView style={{ margin: 10 }}>\r\n <div className=\"content-container\">\r\n <div style={{ margin: 20, textAlign: \"left\" }}>\r\n <ReactMarkdown source={textIntro} />\r\n </div>\r\n </div>\r\n {alertVisible && (\r\n <div\r\n style={{\r\n backgroundColor: \"whitesmoke \",\r\n borderRadius: 10,\r\n margin: 20,\r\n }}\r\n >\r\n <ReactMarkdown source={textNews} />\r\n <p\r\n style={{ color: \"gray\", cursor: \"pointer\" }}\r\n onClick={() => {\r\n setAlertVisible(false);\r\n }}\r\n >\r\n <strong>X Close</strong>\r\n </p>\r\n </div>\r\n )}\r\n {/* <div style={{margin: 10}}>\r\n <FaTwitter style={{color: \"#1197E8\"}} size={30}\r\n onClick={() => {\r\n setTwitterVisible(!twitterVisible)\r\n }}\r\n />\r\n {twitterVisible && <div>\r\n <TwitterTimelineEmbed\r\n sourceType=\"profile\"\r\n screenName=\"HemanShakeri\"\r\n options={{height: window.innerHeight/1.5}}\r\n />\r\n </div>}\r\n \r\n </div> */}\r\n <div style={{ margin: 10 }}>\r\n <div style={{ textAlign: \"left\" }}>\r\n <ReactMarkdown source={textProjects} />\r\n </div>\r\n </div>\r\n </MobileView>\r\n )}\r\n\r\n {/* <Tabs style={{marginTop: 10}}>\r\n <TabList style={{display: \"flex\", alignItems: \"left\"}}>\r\n <Tab>General Info</Tab>\r\n <Tab>Activiy</Tab>\r\n <Tab>Announcements</Tab>\r\n <Tab>Feedback</Tab>\r\n </TabList>\r\n <TabPanel>\r\n {alertVisible && <div style={{backgroundColor: \"#b3e5fc\", borderRadius: 10, margin: 20}}>\r\n <p>Alert</p>\r\n <p>We are currently accepting Graduate students. Please contact Heman Shakeri if you are interested. December 25, 2020 4:00 pm <p style={{color: \"gray\", cursor: \"pointer\"}}\r\n onClick = {() =>{\r\n setAlertVisible(false); \r\n }}><strong>X Close</strong></p></p>\r\n </div>}\r\n <div className=\"content-container\">\r\n <ReactMd fileName=\"./Home.md\" />\r\n </div>\r\n </TabPanel>\r\n <TabPanel>\r\n <p>Review activity or see the projects tab for more details.</p>\r\n <div style={{display: \"flex\", flexDirection: \"row\"}}>\r\n <div>\r\n <div className = \"content-results-container\">\r\n <strong style={{fontSize: 25, marginBottom: 10}}>Activity</strong>\r\n <div className=\"scroll-container\">\r\n {RecentsJSON.filter((val)=>{\r\n if (inputTitle == \"\" && inputTags == \"\" && inputDescription == \"\" && inputTime ==\"\") {\r\n return val; \r\n }else if (val.title.toLowerCase().includes(inputTitle.toLowerCase()) && val.tags.toLowerCase().includes(inputTags.toLowerCase()) && val.date_time.toLowerCase().includes(inputTime.toLowerCase()) && val.description.toLowerCase().includes(inputDescription.toLowerCase())) {\r\n return val; \r\n }\r\n }).map((val, key)=>{\r\n return ( \r\n <div style={{borderRadius: \"5px\", cursor: \"pointer\"}} className = \"list-element\"\r\n onClick = {() => {\r\n window.open(val.url); \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"row\"}}>\r\n <div>\r\n <strong>{val.title}</strong>\r\n <p>{val.description}</p>\r\n <p>tags: {val.tags}</p>\r\n <p style={{color: \"gray\"}}>{val.date_time}</p>\r\n </div>\r\n <div style={{marginLeft: 10}}>\r\n <img style={{width: 250, borderRadius: 5}} src={val.photo}/>\r\n </div>\r\n </div>\r\n \r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n </div>\r\n <div style={{justifyContent: \"center\", alignItems: \"center\", marginTop: 0}}>\r\n <div className = \"content-filter-container-a\">\r\n <strong style={{fontSize: 25}}>Filter Activity</strong>\r\n <div style={{margin: 20}}>\r\n <p>Title</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><MdSubtitles/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"title\" value={inputTitle}\r\n onChange={event => setInputTitle(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Keywords</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoMdSearch/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"description\" value={inputDescription}\r\n onChange={event => setInputDescription(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Tags</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><BiHash/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"tag\" value={inputTags}\r\n onChange={event => setInputTags(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Date/Time</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoIosCalendar/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"January 1, 2021 12:00 am\" value={inputTime}\r\n onChange={event => setInputTime(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"button\" style={{backgroundColor: buttonColor, cursor: \"pointer\", borderRadius: 5, margin: 20}}\r\n onMouseOver={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 0.8)\");\r\n }}\r\n onMouseLeave={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n onClick={() =>{\r\n setInputTitle(\"\");\r\n setInputTags(\"\");\r\n setInputDescription(\"\");\r\n setInputTime(\"\"); \r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n >\r\n <strong style={{color: \"white\"}}>Clear</strong>\r\n </div>\r\n </div>\r\n <div>\r\n <strong>Repositories and Databases</strong>\r\n </div>\r\n <div style={{display: \"flex\", flexDirection: \"row\"}}>\r\n <div style={{border: button1, margin: 10, padding: 10, borderRadius: 5, cursor: \"pointer\", display: \"flex\", flexDirection: \"row\", justifyContent: \"center\", alignItems: \"center\"}}\r\n onMouseOver={() => {\r\n setButton1(\"2px solid rgb(0, 0, 0, 0.5)\")\r\n }}\r\n onMouseLeave={() => {\r\n setButton1(\"2px solid rgb(0, 0, 0, 1)\")\r\n }}\r\n onClick={() => {\r\n window.open('https://github.com/hshakeri'); \r\n }}\r\n >\r\n <AiFillGithub size={30} style={{marginRight: 10}}/>\r\n <strong>Github</strong>\r\n </div>\r\n <div style={{border: button2, margin: 10, padding: 10, borderRadius: 5, cursor: \"pointer\", display: \"flex\", flexDirection: \"row\", justifyContent: \"center\", alignItems: \"center\"}}\r\n onMouseOver={() => {\r\n setButton2(\"2px solid rgb(0, 0, 0, 0.5)\")\r\n }}\r\n onMouseLeave={() => {\r\n setButton2(\"2px solid rgb(0, 0, 0, 1)\")\r\n }}\r\n onClick={() => {\r\n window.open('https://scholar.google.com/citations?user=zFIIhGMAAAAJ&hl=en'); \r\n }}\r\n >\r\n <SiGooglescholar size={30} style={{marginRight: 10}}/>\r\n <strong>Google Scholar</strong>\r\n </div>\r\n <div style={{border: button3, margin: 10, padding: 10, borderRadius: 5, cursor: \"pointer\", display: \"flex\", flexDirection: \"row\", justifyContent: \"center\", alignItems: \"center\"}}\r\n onMouseOver={() => {\r\n setButton3(\"2px solid rgb(0, 0, 0, 0.5)\")\r\n }}\r\n onMouseLeave={() => {\r\n setButton3(\"2px solid rgb(0, 0, 0, 1)\")\r\n }}\r\n onClick={() => {\r\n window.open('https://orcid.org/0000-0002-9891-5748'); \r\n }}\r\n >\r\n <SiOrcid size={30} style={{marginRight: 10}}/>\r\n <strong>ORCID</strong>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </TabPanel>\r\n <TabPanel>\r\n <div style={{backgroundColor: \"whitesmoke\", marginLeft: 300, marginRight: 300, marginTop: 20, marginBottom: 20, paddingTop: 20, paddingBottom: 20, borderRadius: 5}}>\r\n <TwitterTimelineEmbed\r\n sourceType=\"profile\"\r\n screenName=\"HemanShakeri\"\r\n options={{height: 500, width: 500}}\r\n />\r\n </div>\r\n </TabPanel>\r\n <TabPanel>\r\n <div>\r\n <strong>Submit inquiries and suggestions, or report issues regarding our web applications here</strong>\r\n <div style={{display: \"flex\", justifyContent: \"center\", margin: 20}}>\r\n <Form style={{width: 500}} onSubmit={sendEmail}>\r\n <Form.Group className=\"contact-form\" >\r\n <Form.Label>Email address</Form.Label>\r\n <Form.Control type=\"email\" placeholder=\"example@email.com\"name=\"user_email\" onChange={event => setEmail(event.target.value)}/>\r\n <Form.Text className=\"text-muted\">\r\n We'll never share your email with anyone else.\r\n </Form.Text>\r\n </Form.Group>\r\n <Form.Group className=\"contact-form\">\r\n <Form.Label>Name</Form.Label>\r\n <Form.Control type=\"name\" placeholder=\"name\" name=\"user_name\" onChange={event => setName(event.target.value)}/>\r\n <Form.Text className=\"text-muted\">\r\n </Form.Text>\r\n </Form.Group>\r\n <Form.Group className=\"contact-form\" >\r\n <Form.Label>Leave a note</Form.Label>\r\n <Form.Control as=\"textarea\" type=\"name\" placeholder=\"note\" name=\"user_message\" onChange={event => setMessage(event.target.value)}/>\r\n <Form.Text className=\"text-muted\">\r\n </Form.Text>\r\n </Form.Group>\r\n <Form.File id=\"formcheck-api-regular\">\r\n <Form.File.Label>Upload a file</Form.File.Label>\r\n <Form.File.Input name=\"user_file\"/>\r\n </Form.File>\r\n <Button variant=\"primary\" type=\"submit\">\r\n Submit\r\n </Button>\r\n </Form>\r\n </div>\r\n </div>\r\n </TabPanel>\r\n </Tabs> */}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Home;\r\n","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects.js",["144","145","146","147","148","149","150","151","152","153","154","155"],"import React, { useState } from 'react';\r\nimport { MdSubtitles } from \"react-icons/md\";\r\nimport { IoIosCalendar, IoMdSearch } from \"react-icons/io\";\r\nimport { BiHash } from \"react-icons/bi\";\r\nimport ProjectsJSON from \"./Projects.json\";\r\n\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile\r\n } from \"react-device-detect\";\r\n\r\nconst Projects = () => {\r\n const[inputTitle, setInputTitle] = useState(\"\");\r\n const[inputDescription, setInputDescription] = useState(\"\");\r\n const[inputTags, setInputTags] = useState(\"\");\r\n\r\n const[buttonColor, setButtonColor] = useState(\"rgba(46, 61, 130, 1)\");\r\n\r\n const[filterOpen, setFilterOpen] = useState(false); \r\n\r\n return(\r\n <div className=\"App\" style={{marginTop: 80}}>\r\n <h1 style={{margin: 20}}><strong>Projects</strong></h1>\r\n <p style={{margin: 20}}>Click an item in the list to open the project content or \r\n <strong\r\n style={{color: \"#0693e3\", cursor: \"pointer\"}}\r\n onClick={() => {\r\n setFilterOpen(true); \r\n }}\r\n > filter projects.</strong></p>\r\n {filterOpen && <strong style={{color: \"#0693e3\", cursor: \"pointer\"}} \r\n onClick={() => {\r\n setFilterOpen(false); \r\n }}\r\n >X Close Filter</strong>}\r\n {!isMobile && <BrowserView>\r\n {!filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20}}>\r\n {/* <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong> */}\r\n <div>\r\n {ProjectsJSON.filter((val)=>{\r\n return val; \r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{width: 1000}}>\r\n <strong>{val.title}</strong>\r\n <p>{val.description}</p>\r\n <p>tags: {val.tags}</p>\r\n </div>\r\n {/* <div style={{justifyContent: \"center\", width: 500}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5}} src={val.imageUrl}/>\r\n </div> */}\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n }\r\n {filterOpen && <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, padding: 20, margin: 20, height: \"100vh\", width: \"60vw\"}}>\r\n <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong>\r\n <div style={{overflowY: \"scroll\", height: \"90vh\"}}>\r\n {ProjectsJSON.filter((val)=>{\r\n if (inputTitle == \"\" && inputTags == \"\" && inputDescription == \"\") {\r\n return val; \r\n }else if (val.title.toLowerCase().includes(inputTitle.toLowerCase()) && val.tags.toLowerCase().includes(inputTags.toLowerCase()) && val.description.toLowerCase().includes(inputDescription.toLowerCase())) {\r\n return val; \r\n }\r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{width: 1000}}>\r\n <strong>{val.title}</strong>\r\n <p>{val.description}</p>\r\n <p>tags: {val.tags}</p>\r\n </div>\r\n {/* <div style={{justifyContent: \"center\", width: \"40vw\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, marginLeft: 20}} src={val.imageUrl}/>\r\n </div> */}\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n <div style={{height: \"100vh\", width: 400, borderRadius: 10, backgroundColor: \"whitesmoke\", padding: 20, margin: 20, display: \"flex\", flexDirection: \"column\"}}>\r\n <strong style={{fontSize: 25}}>Filter Projects</strong>\r\n <div style={{margin: 20}}>\r\n <p>Title</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><MdSubtitles/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"title\" value={inputTitle}\r\n onChange={event => setInputTitle(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Keywords</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoMdSearch/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"description\" value={inputDescription}\r\n onChange={event => setInputDescription(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Tags</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><BiHash/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"tag\" value={inputTags}\r\n onChange={event => setInputTags(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"button\" style={{backgroundColor: buttonColor, cursor: \"pointer\", borderRadius: 5, margin: 20}}\r\n onMouseOver={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 0.8)\");\r\n }}\r\n onMouseLeave={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n onClick={() =>{\r\n setInputTitle(\"\");\r\n setInputTags(\"\");\r\n setInputDescription(\"\");\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n >\r\n <strong style={{color: \"white\"}}>Clear</strong>\r\n </div>\r\n </div>\r\n </div>}</BrowserView>}\r\n {isMobile && <MobileView>\r\n {!filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20}}>\r\n {/* <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong> */}\r\n <div>\r\n {ProjectsJSON.filter((val)=>{\r\n return val; \r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\", alignItems: \"center\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, margin: 10, justifyContent: \"center\", alignItems: \"center\"}} src={val.imageUrl}/>\r\n <strong>{val.title}</strong>\r\n <p>{val.description}</p>\r\n <p>tags: {val.tags}</p>\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n }\r\n {filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\"}}>\r\n <div style={{width: \"90vw\", borderRadius: 10, backgroundColor: \"whitesmoke\", padding: 20, margin: 20, display: \"flex\", flexDirection: \"column\"}}>\r\n <strong style={{fontSize: 25}}>Filter Projects</strong>\r\n <div style={{margin: 20}}>\r\n <p>Title</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><MdSubtitles/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"title\" value={inputTitle}\r\n onChange={event => setInputTitle(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Keywords</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoMdSearch/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"description\" value={inputDescription}\r\n onChange={event => setInputDescription(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Tags</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><BiHash/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"tag\" value={inputTags}\r\n onChange={event => setInputTags(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"button\" style={{backgroundColor: buttonColor, cursor: \"pointer\", borderRadius: 5, margin: 20}}\r\n onMouseOver={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 0.8)\");\r\n }}\r\n onMouseLeave={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n onClick={() =>{\r\n setInputTitle(\"\");\r\n setInputTags(\"\");\r\n setInputDescription(\"\");\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n >\r\n <strong style={{color: \"white\"}}>Clear</strong>\r\n </div>\r\n </div>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, padding: 20, margin: 20, height: \"50vh\", width: \"90vw\"}}>\r\n <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong>\r\n <div style={{overflowY: \"scroll\", height: \"80vh\"}}>\r\n {ProjectsJSON.filter((val)=>{\r\n if (inputTitle == \"\" && inputTags == \"\" && inputDescription == \"\") {\r\n return val; \r\n }else if (val.title.toLowerCase().includes(inputTitle.toLowerCase()) && val.tags.toLowerCase().includes(inputTags.toLowerCase()) && val.description.toLowerCase().includes(inputDescription.toLowerCase())) {\r\n return val; \r\n }\r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\", alignItems: \"center\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, margin: 10, justifyContent: \"center\", alignItems: \"center\"}} src={val.imageUrl}/>\r\n <strong>{val.title}</strong>\r\n <p>{val.description}</p>\r\n <p>tags: {val.tags}</p>\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n \r\n </div>}</MobileView>}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Projects; ","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Navbar.js",["156"],"import React from \"react\";\r\nimport \"../App.css\";\r\nimport * as ReactBootstrap from \"react-bootstrap\";\r\nimport {\r\n //BrowserRouter as Router,\r\n Link,\r\n} from \"react-router-dom\";\r\nimport rotunda from \"./images/rotunda.png\";\r\n\r\nfunction Navbar() {\r\n return (\r\n <div className=\"App\">\r\n <ReactBootstrap.Navbar\r\n style={{ boxShadow: \"1px 1.5px 2px gray\" }}\r\n collapseOnSelect\r\n expand=\"lg\"\r\n bg=\"dark\"\r\n variant=\"dark\"\r\n fixed=\"top\"\r\n >\r\n <ReactBootstrap.Navbar.Brand href=\"/\">\r\n <img\r\n style={{ width: 30, height: 30, marginRight: 10 }}\r\n src={rotunda}\r\n />\r\n <strong style={{}}>Shakeri Research Group</strong>\r\n </ReactBootstrap.Navbar.Brand>\r\n <ReactBootstrap.Navbar.Toggle aria-controls=\"responsive-navbar-nav\" />\r\n <ReactBootstrap.Navbar.Collapse id=\"responsive-navbar-nav\">\r\n <ReactBootstrap.Nav className=\"mr-auto\"></ReactBootstrap.Nav>\r\n <ReactBootstrap.Nav>\r\n <Link to=\"/\" style={{ textDecoration: \"none\" }}>\r\n <ReactBootstrap.Nav.Link eventKey={1} href=\"#home\">\r\n Home\r\n </ReactBootstrap.Nav.Link>\r\n </Link>\r\n {/* <Link to=\"/People\" style={{ textDecoration: \"none\" }}>\r\n <ReactBootstrap.Nav.Link eventKey={2} href=\"#protocolsandstudies\">\r\n People\r\n </ReactBootstrap.Nav.Link>\r\n </Link> */}\r\n <Link to=\"/Wastewatertracker\" style={{ textDecoration: \"none\" }}>\r\n <ReactBootstrap.Nav.Link eventKey={3} href=\"#reports\">\r\n COVID Viral Load Simulation\r\n </ReactBootstrap.Nav.Link>\r\n </Link>\r\n {/* <Link to=\"/Publications\" style={{ textDecoration: \"none\" }}>\r\n <ReactBootstrap.Nav.Link eventKey={4} href=\"#publications\">\r\n Publications\r\n </ReactBootstrap.Nav.Link>\r\n </Link> */}\r\n {/* <Link to=\"/Teachingandlectures\" style={{textDecoration: \"none\"}}>\r\n <ReactBootstrap.Nav.Link eventKey={5} href=\"#publications\">Teaching/Lectures</ReactBootstrap.Nav.Link>\r\n </Link> */}\r\n {/* <Link to=\"/Blog\" style={{textDecoration: \"none\"}}>\r\n <ReactBootstrap.Nav.Link eventKey={6} href=\"#blog\">Blog</ReactBootstrap.Nav.Link>\r\n </Link> */}\r\n {/* <Link to=\"/Contact\" style={{ textDecoration: \"none\" }}>\r\n <ReactBootstrap.Nav.Link eventKey={7} href=\"#contact\">\r\n Contact\r\n </ReactBootstrap.Nav.Link>\r\n </Link> */}\r\n </ReactBootstrap.Nav>\r\n </ReactBootstrap.Navbar.Collapse>\r\n </ReactBootstrap.Navbar>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Navbar;\r\n","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Footer.js",["157","158","159","160","161","162","163","164"],"import React, { useState } from \"react\";\r\nimport \"./Footer.css\";\r\nimport { MdEmail } from \"react-icons/md\";\r\nimport {\r\n AiFillTwitterSquare,\r\n AiFillLinkedin,\r\n AiFillGithub,\r\n AiFillPhone,\r\n} from \"react-icons/ai\";\r\nimport dataScienceLogo from \"./images/dataScienceLogo.png\";\r\n\r\nconst Footer = () => {\r\n const [logoHeight, setLogoHeight] = useState(window.innerHeight / 14);\r\n const [logoWidth, setLogoWidth] = useState(window.innerWidth / 4);\r\n window.onresize = function () {\r\n var widthWin = window.innerWidth;\r\n var heightWin = window.innerHeight;\r\n setLogoHeight(heightWin / 14);\r\n setLogoWidth(widthWin / 4);\r\n };\r\n return (\r\n <div className=\"main-footer\">\r\n <div className=\"container\">\r\n <div className=\"row\">\r\n <div className=\"col\">\r\n <ul className=\"list-unstyled\">\r\n <li>\r\n Questions? Contact Heman Shakeri, Assistant Professor, School of\r\n Data Science | University of Virginia\r\n </li>\r\n <li>\r\n <MdEmail size={20} />\r\n <a\r\n style={{ margin: 10, color: \"grey\" }}\r\n href={\"mailto:\" + \"hs9hd@virginia.edu\"}\r\n >\r\n Email\r\n </a>\r\n </li>\r\n <li>\r\n <AiFillTwitterSquare size={20} />\r\n <a\r\n target=\"_blank\"\r\n style={{ margin: 10, color: \"grey\" }}\r\n href={\"https://twitter.com/HemanShakeri\"}\r\n >\r\n Twitter\r\n </a>\r\n </li>\r\n <li>\r\n <AiFillLinkedin size={20} />\r\n <a\r\n target=\"_blank\"\r\n style={{ margin: 10, color: \"grey\" }}\r\n href={\"https://www.linkedin.com/in/heman-shakeri-61ba603a/\"}\r\n >\r\n LinkedIn\r\n </a>\r\n </li>\r\n <li style={{ marginTop: 30 }}>Site built by Noah Beamon</li>\r\n <li>\r\n <AiFillLinkedin size={20} />\r\n <a\r\n target=\"_blank\"\r\n style={{ margin: 10, color: \"grey\" }}\r\n href={\"https://www.linkedin.com/in/noahbeamon/\"}\r\n >\r\n LinkedIn\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n <div className=\"col\">\r\n <ul className=\"list-unstyled\">\r\n <li>School of Data Science</li>\r\n <li>P.O. Box 400249</li>\r\n <li>Charlottesville, VA 22904 USA</li>\r\n <li>\r\n <a\r\n target=\"_blank\"\r\n style={{ color: \"grey\" }}\r\n href={\r\n \"https://www.google.com/maps/place/Dell+1,+Charlottesville,+VA+22903/@38.0344626,-78.5108793,17z\"\r\n }\r\n >\r\n View on Map\r\n </a>\r\n </li>\r\n <li>\r\n <MdEmail size={20} />\r\n <a\r\n style={{ margin: 10, color: \"grey\" }}\r\n href={\"mailto:\" + \"datascience@virginia.edu\"}\r\n >\r\n Email\r\n </a>\r\n </li>\r\n <li>\r\n <AiFillPhone size={20} style={{ marginRight: 10 }} />\r\n (434) 982-2600\r\n </li>\r\n </ul>\r\n </div>\r\n <div className=\"col\">\r\n <ul className=\"list-unstyled\">\r\n <li>\r\n <img\r\n style={{ width: logoWidth, height: logoHeight }}\r\n src={dataScienceLogo}\r\n />\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <hr style={{ backgroundColor: \"white\" }} />\r\n <div className=\"row\">\r\n <p style={{ color: \"grey\" }} className=\"col-sm\">\r\n © {new Date().getFullYear()} Shakeri Research Group\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Footer;\r\n","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Publications.js",["165","166","167","168","169","170","171","172","173","174","175","176","177","178"],"import React, { useState } from 'react';\r\nimport { MdSubtitles } from \"react-icons/md\";\r\nimport { IoIosJournal, IoIosCalendar, IoMdSearch } from \"react-icons/io\";\r\nimport PublicationsJSON from \"./Publications.json\"; \r\n\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile\r\n } from \"react-device-detect\";\r\n\r\nconst Publications = () => {\r\n const[inputTitle, setInputTitle] = useState(\"\");\r\n const[inputJournal, setInputJournal] = useState(\"\");\r\n const[inputYear, setInputYear] = useState(\"\");\r\n const[inputDescription, setInputDescription] = useState(\"\");\r\n\r\n const[buttonColor, setButtonColor] = useState(\"rgba(46, 61, 130, 1)\");\r\n\r\n const[filterOpen, setFilterOpen] = useState(false); \r\n\r\n return(\r\n <div className=\"App\" style={{marginTop: 80}}>\r\n <h1 style={{margin: 20}}><strong>Publications</strong></h1>\r\n <p style={{margin: 20}}>Click an item in the list to open the project content or \r\n <strong\r\n style={{color: \"#0693e3\", cursor: \"pointer\"}}\r\n onClick={() => {\r\n setFilterOpen(true); \r\n }}\r\n > filter publications.</strong></p>\r\n {filterOpen && <strong style={{color: \"#0693e3\", cursor: \"pointer\"}} \r\n onClick={() => {\r\n setFilterOpen(false); \r\n }}\r\n >X Close Filter</strong>}\r\n {!isMobile && <BrowserView>\r\n {!filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20}}>\r\n {/* <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong> */}\r\n <div>\r\n {PublicationsJSON.filter((val)=>{\r\n return val; \r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{width: 1000}}>\r\n <strong>{val.title}</strong>\r\n <p><i>{val.journal}</i>, {val.year}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n {/* <div style={{justifyContent: \"center\", width: 500}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5}} src={val.imageUrl}/>\r\n </div> */}\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n }\r\n {filterOpen && <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, padding: 20, margin: 20, height: \"100vh\", width: \"60vw\"}}>\r\n <strong style={{fontSize: 25, marginBottom: 10}}>Publications</strong>\r\n <div style={{overflowY: \"scroll\", height: \"90vh\"}}>\r\n {PublicationsJSON.filter((val)=>{\r\n if (inputTitle == \"\" && inputJournal == \"\" && inputYear ==\"\" && inputDescription == \"\") {\r\n return val; \r\n }else if (val.title.toLowerCase().includes(inputTitle.toLowerCase()) && val.year.toLowerCase().includes(inputYear.toLowerCase()) && val.journal.toLowerCase().includes(inputJournal.toLowerCase()) && val.description.toLowerCase().includes(inputDescription.toLowerCase())) {\r\n return val; \r\n }\r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{width: 1000}}>\r\n <strong>{val.title}</strong>\r\n <p><i>{val.journal}</i>, {val.year}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n {/* <div style={{justifyContent: \"center\", width: \"40vw\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, marginLeft: 20}} src={val.imageUrl}/>\r\n </div> */}\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n <div style={{height: \"100vh\", width: 400, borderRadius: 10, backgroundColor: \"whitesmoke\", padding: 20, margin: 20, display: \"flex\", flexDirection: \"column\"}}>\r\n <strong style={{fontSize: 25}}>Filter Publications</strong>\r\n <div style={{margin: 20}}>\r\n <p>Title</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><MdSubtitles/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"title\" value={inputTitle}\r\n onChange={event => setInputTitle(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Keywords</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoMdSearch/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"description\" value={inputDescription}\r\n onChange={event => setInputDescription(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Journal</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoIosJournal/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"journal\" value={inputJournal}\r\n onChange={event => setInputJournal(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Year</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoIosJournal/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"YYYY\" value={inputYear}\r\n onChange={event => setInputYear(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"button\" style={{backgroundColor: buttonColor, cursor: \"pointer\", borderRadius: 5, margin: 20}}\r\n onMouseOver={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 0.8)\");\r\n }}\r\n onMouseLeave={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n onClick={() =>{\r\n setInputTitle(\"\");\r\n setInputJournal(\"\");\r\n setInputDescription(\"\");\r\n setInputYear(\"\");\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n >\r\n <strong style={{color: \"white\"}}>Clear</strong>\r\n </div>\r\n </div>\r\n </div>}</BrowserView>}\r\n {isMobile && <MobileView>\r\n {!filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20}}>\r\n {/* <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong> */}\r\n <div>\r\n {PublicationsJSON.filter((val)=>{\r\n return val; \r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\", alignItems: \"center\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, margin: 10, justifyContent: \"center\", alignItems: \"center\"}} src={val.imageUrl}/>\r\n <strong>{val.title}</strong>\r\n <p><i>{val.journal}</i>, {val.year}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n }\r\n {filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\"}}>\r\n <div style={{width: \"90vw\", borderRadius: 10, backgroundColor: \"whitesmoke\", padding: 20, margin: 20, display: \"flex\", flexDirection: \"column\"}}>\r\n <strong style={{fontSize: 25}}>Filter Publications</strong>\r\n <div style={{margin: 20}}>\r\n <p>Title</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><MdSubtitles/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"title\" value={inputTitle}\r\n onChange={event => setInputTitle(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Keywords</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoMdSearch/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"description\" value={inputDescription}\r\n onChange={event => setInputDescription(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Journal</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoIosJournal/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"journal\" value={inputJournal}\r\n onChange={event => setInputJournal(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Year</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoIosJournal/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"YYYY\" value={inputYear}\r\n onChange={event => setInputYear(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"button\" style={{backgroundColor: buttonColor, cursor: \"pointer\", borderRadius: 5, margin: 20}}\r\n onMouseOver={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 0.8)\");\r\n }}\r\n onMouseLeave={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n onClick={() =>{\r\n setInputTitle(\"\");\r\n setInputJournal(\"\");\r\n setInputDescription(\"\");\r\n setInputYear(\"\");\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n >\r\n <strong style={{color: \"white\"}}>Clear</strong>\r\n </div>\r\n </div>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, padding: 20, margin: 20, height: \"50vh\", width: \"90vw\"}}>\r\n <strong style={{fontSize: 25, marginBottom: 10}}>Publications</strong>\r\n <div style={{overflowY: \"scroll\", height: \"80vh\"}}>\r\n {PublicationsJSON.filter((val)=>{\r\n if (inputTitle == \"\" && inputJournal == \"\" && inputYear == \"\" && inputDescription == \"\") {\r\n return val; \r\n }else if (val.title.toLowerCase().includes(inputTitle.toLowerCase()) && val.journal.toLowerCase().includes(inputJournal.toLowerCase()) && val.year.toLowerCase().includes(inputYear.toLowerCase()) && val.description.toLowerCase().includes(inputDescription.toLowerCase())) {\r\n return val; \r\n }\r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\", alignItems: \"center\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, margin: 10, justifyContent: \"center\", alignItems: \"center\"}} src={val.imageUrl}/>\r\n <strong>{val.title}</strong>\r\n <p><i>{val.journal}</i>, {val.year}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n \r\n </div>}</MobileView>}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Publications; ","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\Allofus.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\Wastewater.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\HemanShakeri.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Resources.js",[],["179","180"],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Blog.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Contact.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Teachingandlectures.js",["181","182","183","184","185","186","187","188","189","190","191","192","193","194"],"import React, { useState } from 'react';\r\nimport { MdSubtitles } from \"react-icons/md\";\r\nimport { IoIosJournal, IoIosCalendar, IoMdSearch } from \"react-icons/io\";\r\nimport TeachingJSON from \"./Teaching.json\"; \r\n\r\nimport {\r\n BrowserView,\r\n MobileView,\r\n isBrowser,\r\n isMobile\r\n } from \"react-device-detect\";\r\n\r\nconst Teachingandlectures = () => {\r\n const[inputTitle, setInputTitle] = useState(\"\");\r\n const[inputTags, setInputTags] = useState(\"\");\r\n const[inputDate, setInputDate] = useState(\"\");\r\n const[inputDescription, setInputDescription] = useState(\"\");\r\n\r\n const[buttonColor, setButtonColor] = useState(\"rgba(46, 61, 130, 1)\");\r\n\r\n const[filterOpen, setFilterOpen] = useState(false); \r\n\r\n return(\r\n <div className=\"App\" style={{marginTop: 80}}>\r\n <h1 style={{margin: 20}}><strong>Teaching and Lectures</strong></h1>\r\n <p style={{margin: 20}}>Click an item in the list to open the content or \r\n <strong\r\n style={{color: \"#0693e3\", cursor: \"pointer\"}}\r\n onClick={() => {\r\n setFilterOpen(true); \r\n }}\r\n > filter content.</strong></p>\r\n {filterOpen && <strong style={{color: \"#0693e3\", cursor: \"pointer\"}} \r\n onClick={() => {\r\n setFilterOpen(false); \r\n }}\r\n >X Close Filter</strong>}\r\n {!isMobile && <BrowserView>\r\n {!filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20}}>\r\n {/* <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong> */}\r\n <div>\r\n {TeachingJSON.filter((val)=>{\r\n return val; \r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{width: 1000}}>\r\n <strong>{val.title}</strong>\r\n <p>{val.date}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n {/* <div style={{justifyContent: \"center\", width: 500}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5}} src={val.imageUrl}/>\r\n </div> */}\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n }\r\n {filterOpen && <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, padding: 20, margin: 20, height: \"100vh\", width: \"60vw\"}}>\r\n <strong style={{fontSize: 25, marginBottom: 10}}>Content</strong>\r\n <div style={{overflowY: \"scroll\", height: \"90vh\"}}>\r\n {TeachingJSON.filter((val)=>{\r\n if (inputTitle == \"\" && inputDate == \"\" && inputDescription == \"\") {\r\n return val; \r\n }else if (val.title.toLowerCase().includes(inputTitle.toLowerCase()) && val.date.toLowerCase().includes(inputDate.toLowerCase()) && val.description.toLowerCase().includes(inputDescription.toLowerCase())) {\r\n return val; \r\n }\r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"row\", justifyContent: \"center\"}}>\r\n <div style={{width: 1000}}>\r\n <strong>{val.title}</strong>\r\n <p>{val.date}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n {/* <div style={{justifyContent: \"center\", width: \"40vw\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, marginLeft: 20}} src={val.imageUrl}/>\r\n </div> */}\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n <div style={{height: \"100vh\", width: 400, borderRadius: 10, backgroundColor: \"whitesmoke\", padding: 20, margin: 20, display: \"flex\", flexDirection: \"column\"}}>\r\n <strong style={{fontSize: 25}}>Filter Content</strong>\r\n <div style={{margin: 20}}>\r\n <p>Title</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><MdSubtitles/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"title\" value={inputTitle}\r\n onChange={event => setInputTitle(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Keywords</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoMdSearch/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"description\" value={inputDescription}\r\n onChange={event => setInputDescription(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Journal</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoIosJournal/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"mmm dd, yyyy\" value={inputDate}\r\n onChange={event => setInputDate(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"button\" style={{backgroundColor: buttonColor, cursor: \"pointer\", borderRadius: 5, margin: 20}}\r\n onMouseOver={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 0.8)\");\r\n }}\r\n onMouseLeave={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n onClick={() =>{\r\n setInputTitle(\"\");\r\n setInputDate(\"\");\r\n setInputDescription(\"\");\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n >\r\n <strong style={{color: \"white\"}}>Clear</strong>\r\n </div>\r\n </div>\r\n </div>}</BrowserView>}\r\n {isMobile && <MobileView>\r\n {!filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, margin: 20}}>\r\n {/* <strong style={{fontSize: 25, marginBottom: 10}}>Projects</strong> */}\r\n <div>\r\n {TeachingJSON.filter((val)=>{\r\n return val; \r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\", alignItems: \"center\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, margin: 10, justifyContent: \"center\", alignItems: \"center\"}} src={val.imageUrl}/>\r\n <strong>{val.title}</strong>\r\n <p>{val.date}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n }\r\n {filterOpen && <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\"}}>\r\n <div style={{width: \"90vw\", borderRadius: 10, backgroundColor: \"whitesmoke\", padding: 20, margin: 20, display: \"flex\", flexDirection: \"column\"}}>\r\n <strong style={{fontSize: 25}}>Filter Content</strong>\r\n <div style={{margin: 20}}>\r\n <p>Title</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><MdSubtitles/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"title\" value={inputTitle}\r\n onChange={event => setInputTitle(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Keywords</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoMdSearch/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"description\" value={inputDescription}\r\n onChange={event => setInputDescription(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div style={{margin: 20}}>\r\n <p>Journal</p>\r\n <div className=\"input-group\">\r\n <div className=\"input-group-prepend\">\r\n <span className=\"input-group-text\" id=\"basic-addon\">\r\n <i className=\"fa fa-user prefix\"><IoIosJournal/></i>\r\n </span>\r\n </div>\r\n <input type=\"text\" className=\"form-control\" placeholder=\"mmm dd, yyyy\" value={inputDate}\r\n onChange={event => setInputDate(event.target.value)}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"button\" style={{backgroundColor: buttonColor, cursor: \"pointer\", borderRadius: 5, margin: 20}}\r\n onMouseOver={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 0.8)\");\r\n }}\r\n onMouseLeave={() =>{\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n onClick={() =>{\r\n setInputTitle(\"\");\r\n setInputDate(\"\");\r\n setInputDescription(\"\");\r\n setButtonColor(\"rgba(46, 61, 130, 1)\");\r\n }}\r\n >\r\n <strong style={{color: \"white\"}}>Clear</strong>\r\n </div>\r\n </div>\r\n <div style={{display: \"flex\", flexDirection: \"column\", backgroundColor: \"whitesmoke\", borderRadius: 10, padding: 20, margin: 20, height: \"50vh\", width: \"90vw\"}}>\r\n <strong style={{fontSize: 25, marginBottom: 10}}>Content</strong>\r\n <div style={{overflowY: \"scroll\", height: \"80vh\"}}>\r\n {TeachingJSON.filter((val)=>{\r\n if (inputTitle == \"\" && inputDate == \"\" && inputDescription == \"\") {\r\n return val; \r\n }else if (val.title.toLowerCase().includes(inputTitle.toLowerCase()) && val.date.toLowerCase().includes(inputDate.toLowerCase()) && val.description.toLowerCase().includes(inputDescription.toLowerCase())) {\r\n return val; \r\n }\r\n }).map((val, key)=>{\r\n return (\r\n <div style={{borderRadius: 10, cursor: \"pointer\", backgroundColor: \"white\", margin: 20, padding: 20}}\r\n onClick = {() => {\r\n window.location.href=val.url; \r\n }}\r\n >\r\n <div style={{display: \"flex\", flexDirection: \"column\", justifyContent: \"center\", alignItems: \"center\"}}>\r\n <img style={{width: 250, height: 150, borderRadius: 5, margin: 10, justifyContent: \"center\", alignItems: \"center\"}} src={val.imageUrl}/>\r\n <strong>{val.title}</strong>\r\n <p>{val.date}</p>\r\n <p>{val.description}</p>\r\n </div>\r\n </div>)\r\n })}\r\n </div>\r\n </div>\r\n\r\n \r\n </div>}</MobileView>}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Teachingandlectures; ","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\Wastewatertracker.js",["195","196","197","198","199","200","201","202","203","204","205","206","207","208","209","210","211","212"],"import React, { useState, useRef, useCallback, useEffect } from \"react\";\r\nimport Geocoder from \"react-map-gl-geocoder\";\r\nimport \"react-map-gl-geocoder/dist/mapbox-gl-geocoder.css\";\r\nimport MapGL, {\r\n NavigationControl,\r\n Marker,\r\n Popup,\r\n Layer,\r\n Source,\r\n} from \"react-map-gl\";\r\nimport { BsFillCircleFill, BsFillBarChartFill } from \"react-icons/bs\";\r\nimport { GiWaterRecycling } from \"react-icons/gi\";\r\nimport { BiLineChart } from \"react-icons/bi\";\r\nimport { RiInformationLine } from \"react-icons/ri\";\r\nimport axios from \"axios\";\r\n\r\n//regions\r\nimport CharlottesvilleLimits from \"./Charlottesville.json\";\r\nimport ChesapeakeLimits from \"./Chesapeake.json\";\r\nimport NorfolkLimits from \"./Norfolk.json\";\r\nimport PortsmouthLimits from \"./Portsmouth.json\";\r\nimport SuffolkLimits from \"./Suffolk.json\";\r\nimport VaBeachLimits from \"./VaBeach.json\";\r\nimport HamptonLimits from \"./Hampton.json\";\r\nimport NewportNewsLimits from \"./NewportNews.json\";\r\n\r\n// import Data2 from './Data2.json';\r\nimport \"./Wastewatertracker.css\";\r\nimport {\r\n BarChart,\r\n LineChart,\r\n CartesianGrid,\r\n XAxis,\r\n YAxis,\r\n Tooltip,\r\n Bar,\r\n Line,\r\n Label,\r\n} from \"recharts\";\r\nimport { simInfectedFromFile } from \"./ChartData.js\"; //chartData2a, chartData3a, chartData4a,\r\nimport Switch from \"react-switch\";\r\n\r\nvar dateFormat = require(\"dateformat\");\r\n\r\nconst Wastewatertracker = () => {\r\n //automated data collection from vdh\r\n let [list1b, setList1b] = useState([]);\r\n let [list3b, setList3b] = useState([]);\r\n let [list4b, setList4b] = useState([]);\r\n\r\n useEffect(() => {\r\n axios\r\n .get(\r\n `https://data.virginia.gov/resource/bre9-aqqr.json?locality=Charlottesville`\r\n )\r\n .then((res) => {\r\n const values = Object.values(res.data);\r\n // alert(JSON.stringify(values))\r\n setList1b(values);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n axios\r\n .get(\r\n `https://data.virginia.gov/resource/bre9-aqqr.json?locality=Portsmouth`\r\n )\r\n .then((res) => {\r\n const values = Object.values(res.data);\r\n // alert(JSON.stringify(values))\r\n setList3b(values);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n axios\r\n .get(\r\n `https://data.virginia.gov/resource/bre9-aqqr.json?locality=Newport%20News`\r\n )\r\n .then((res) => {\r\n const values = Object.values(res.data);\r\n // alert(JSON.stringify(values))\r\n setList4b(values);\r\n });\r\n }, []);\r\n\r\n const object = list1b;\r\n const object3b = list3b;\r\n const object4b = list4b;\r\n\r\n const simInfected = simInfectedFromFile;\r\n\r\n var i;\r\n for (i = 0; i < object.length; i++) {\r\n var x = object[i].report_date;\r\n object[i].report_date = new Date(x);\r\n }\r\n\r\n object.sort((a, b) => a.report_date - b.report_date);\r\n var chartData1b = [];\r\n var chartData2b = chartData1b;\r\n\r\n var j;\r\n for (j = 1; j < object.length; j++) {\r\n var x = object[j].total_cases - object[j - 1].total_cases;\r\n if (x < 0) {\r\n x = \"negative cases reported on this date\";\r\n }\r\n var y;\r\n var z;\r\n if (j <= simInfected.length) {\r\n y = simInfected[j - 1].Infected;\r\n z = simInfected[j - 1].V;\r\n } else {\r\n y = \"no data to report\";\r\n z = \"no data to report\";\r\n }\r\n chartData1b.push({\r\n date: dateFormat(object[j].report_date, \"mmm dd, yyyy\"),\r\n \"cases reported\": x,\r\n \"predicted infections\": y,\r\n \"viral load\": z,\r\n });\r\n }\r\n\r\n var k;\r\n for (k = 0; k < object3b.length; k++) {\r\n var x = object3b[k].report_date;\r\n object3b[k].report_date = new Date(x);\r\n }\r\n\r\n object3b.sort((a, b) => a.report_date - b.report_date);\r\n var chartData3b = [];\r\n\r\n var l;\r\n for (l = 1; l < object3b.length; l++) {\r\n var x = object3b[l].total_cases - object3b[l - 1].total_cases;\r\n var y;\r\n if (l <= simInfected.length) {\r\n y = simInfected[l - 1].Infected;\r\n } else {\r\n y = \"no data to report\";\r\n }\r\n chartData3b.push({\r\n date: dateFormat(object3b[l].report_date, \"mmm dd, yyyy\"),\r\n \"cases reported\": x,\r\n \"predicted infections\": y,\r\n });\r\n }\r\n\r\n var m;\r\n for (m = 0; m < object4b.length; m++) {\r\n var x = object4b[m].report_date;\r\n object4b[m].report_date = new Date(x);\r\n }\r\n\r\n object4b.sort((a, b) => a.report_date - b.report_date);\r\n var chartData4b = [];\r\n\r\n var n;\r\n for (n = 1; n < object4b.length; n++) {\r\n var x = object4b[n].total_cases - object4b[n - 1].total_cases;\r\n var y;\r\n if (n <= simInfected.length) {\r\n y = simInfected[n - 1].Infected;\r\n } else {\r\n y = \"no data to report\";\r\n }\r\n chartData4b.push({\r\n date: dateFormat(object4b[n].report_date, \"mmm dd, yyyy\"),\r\n \"cases reported\": x,\r\n \"predicted infections\": y,\r\n });\r\n }\r\n\r\n //for rna primary sludge\r\n var chartData1a = chartData1b;\r\n var chartData2a = chartData1b;\r\n var chartData3a = chartData1b;\r\n var chartData4a = chartData1b;\r\n\r\n window.onresize = function () {\r\n // var widthWin = window.document.body.clientWidth;\r\n // var heightWin = window.document.body.clientHeight;\r\n var widthWin = window.innerWidth;\r\n var heightWin = window.innerHeight;\r\n setViewport({\r\n latitude: 38.031479,\r\n longitude: -78.481272,\r\n width: window.innerWidth - 100,\r\n height: heightWin / 2, //window.innerHeight\r\n zoom: 12,\r\n });\r\n setViewport1({\r\n latitude: 36.841258,\r\n longitude: -76.383983,\r\n width: window.innerWidth - 100,\r\n height: heightWin / 2, //window.innerHeight\r\n zoom: 9,\r\n });\r\n };\r\n\r\n //cvill\r\n const [viewport, setViewport] = useState({\r\n latitude: 38.031479,\r\n longitude: -78.481272,\r\n width: window.innerWidth - 100, //\"auto\"\r\n height: window.innerHeight / 2, //window.innerHeight\r\n zoom: 13,\r\n borderTopLeftRadius: 20,\r\n });\r\n\r\n const mapRef = useRef();\r\n const handleViewportChange = useCallback(\r\n (newViewport) => setViewport(newViewport),\r\n []\r\n );\r\n\r\n const handleGeocoderViewportChange = useCallback((newViewport) => {\r\n const geocoderDefaultOverrides = { transitionDuration: 1000 };\r\n\r\n return handleViewportChange({\r\n ...newViewport,\r\n ...geocoderDefaultOverrides,\r\n });\r\n }, []);\r\n\r\n //hampton roads\r\n const [viewport1, setViewport1] = useState({\r\n latitude: 36.841258,\r\n longitude: -76.383983,\r\n width: window.innerWidth - 100,\r\n height: window.innerHeight / 2,\r\n zoom: 9,\r\n });\r\n\r\n const mapRef1 = useRef();\r\n const handleViewportChange1 = useCallback(\r\n (newViewport) => setViewport1(newViewport),\r\n []\r\n );\r\n\r\n const handleGeocoderViewportChange1 = useCallback((newViewport) => {\r\n const geocoderDefaultOverrides = { transitionDuration: 1000 };\r\n\r\n return handleViewportChange1({\r\n ...newViewport,\r\n ...geocoderDefaultOverrides,\r\n });\r\n }, []);\r\n\r\n const [showPopup, setShowPopup] = useState(null);\r\n\r\n let activeTabColor = \"#1197E8\";\r\n let inactiveTabColor = \"#b1b6b8\";\r\n let activeBorderTabColor = \"3px solid #1197E8\";\r\n let inactiveBorderTabColor = \"3px solid #b1b6b8\";\r\n\r\n const [tabTextColor, setTabTextColor] = useState(activeTabColor);\r\n const [tabTextColor1, setTabTextColor1] = useState(inactiveTabColor);\r\n const [tabBorderColor, setTabBorderColor] = useState(activeBorderTabColor);\r\n const [tabBorderColor1, setTabBorderColor1] = useState(\r\n inactiveBorderTabColor\r\n );\r\n\r\n const [cvillActive, setCvillActive] = useState(true);\r\n const [hamptonActive, setHamptonActive] = useState(false);\r\n\r\n let activeColor = \"rgba(52, 235, 183, 0.8)\";\r\n let inactiveColor = \"rgba(52, 220, 235, 0.5)\";\r\n let activeRegionColor = \"rgba(235, 255, 255, 0.2)\";\r\n let inactiveRegionColor = \"rgba(255, 255, 255, 0.1)\";\r\n\r\n const [locationColor, setLocationColor] = useState(inactiveColor);\r\n const [locationColor1, setLocationColor1] = useState(inactiveColor);\r\n const [locationColor2, setLocationColor2] = useState(inactiveColor);\r\n const [locationColor3, setLocationColor3] = useState(inactiveColor);\r\n\r\n const [regionLineColorCvill, setRegionLineColorCvill] =\r\n useState(inactiveRegionColor);\r\n\r\n const [regionLineColorChesapeake, setRegionLineColorChesapeake] =\r\n useState(inactiveRegionColor);\r\n const [regionLineColorHampton, setRegionLineColorHampton] =\r\n useState(inactiveRegionColor);\r\n const [regionLineColorSuffolk, setRegionLineColorSuffolk] =\r\n useState(inactiveRegionColor);\r\n const [regionLineColorNewportNews, setRegionLineColorNewportNews] =\r\n useState(inactiveRegionColor);\r\n const [regionLineColorNorfolk, setRegionLineColorNorfolk] =\r\n useState(inactiveRegionColor);\r\n const [regionLineColorPortsmouth, setRegionLineColorPortsmouth] =\r\n useState(inactiveRegionColor);\r\n const [regionLineColorVaBeach, setRegionLineColorVaBeach] =\r\n useState(inactiveRegionColor);\r\n\r\n const [showChart, setShowChart] = useState(null);\r\n\r\n const DataFormaterX = (date) => {\r\n return date.toString().split(\",\")[0];\r\n };\r\n\r\n const DataFormaterY = (number) => {\r\n if (number > 1000000000) {\r\n return (number / 1000000000).toString() + \"B\";\r\n } else if (number > 1000000) {\r\n return (number / 1000000).toString() + \"M\";\r\n } else if (number > 1000) {\r\n return (number / 1000).toString() + \"K\";\r\n } else {\r\n return number.toString();\r\n }\r\n };\r\n\r\n const [checked, setChecked] = useState(true);\r\n\r\n return (\r\n <div className=\"App\" style={{ marginTop: 80 }}>\r\n <div style={{ margin: 20 }}>\r\n <h2>\r\n <strong>Virginia Wastewater Reports</strong>\r\n </h2>\r\n </div>\r\n\r\n <div style={{ width: \"90vw\", margin: \"auto\", textAlign: \"left\" }}>\r\n {/* <RiInformationLine size={30} style={{color: \"grey\"}}/> */}\r\n <p>\r\n This data visualization project depicts the prevelance of COVID-19 in\r\n the Charlottesville and Hampton Roads areas. We first implement\r\n software to simulate the daily metrics of viral load in the\r\n population. We then simulate the number of total infections (reported\r\n and unreported). We postulate that the metrics attained through these\r\n simulations allow us to idenitfy trends based on events that occur in\r\n the community throughout the year. The simulation results are compared\r\n directly to the daily reported cases provided by the{\" \"}\r\n <a href=\"https://www.vdh.virginia.gov/\" target=\"_blank\">\r\n Virginia Department of Health.\r\n </a>\r\n </p>\r\n </div>\r\n\r\n <strong style={{ color: \"grey\" }}>\r\n Use the tab bar, search bar, and map markers to toggle between\r\n locations.\r\n </strong>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\",\r\n margin: 20,\r\n }}\r\n >\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"center\",\r\n }}\r\n >\r\n <div\r\n style={{\r\n width: \"50vw\",\r\n borderBottom: tabBorderColor,\r\n cursor: \"pointer\",\r\n backgroundColor: \"whitesmoke\",\r\n borderTopLeftRadius: 10,\r\n borderBottomLeftRadius: 10,\r\n }}\r\n onClick={() => {\r\n setTabTextColor(activeTabColor);\r\n setTabBorderColor(activeBorderTabColor);\r\n setTabTextColor1(inactiveTabColor);\r\n setTabBorderColor1(inactiveBorderTabColor);\r\n setCvillActive(true);\r\n setHamptonActive(false);\r\n\r\n setShowChart(null);\r\n setLocationColor(inactiveColor);\r\n setLocationColor1(inactiveColor);\r\n setLocationColor2(inactiveColor);\r\n setLocationColor3(inactiveColor);\r\n }}\r\n >\r\n <strong style={{ color: tabTextColor }}>\r\n Charlottesville Area\r\n </strong>\r\n </div>\r\n <div\r\n style={{\r\n width: \"50vw\",\r\n borderBottom: tabBorderColor1,\r\n cursor: \"pointer\",\r\n backgroundColor: \"whitesmoke\",\r\n borderTopRightRadius: 10,\r\n borderBottomRightRadius: 10,\r\n }}\r\n onClick={() => {\r\n setTabTextColor1(activeTabColor);\r\n setTabBorderColor1(activeBorderTabColor);\r\n setTabTextColor(inactiveTabColor);\r\n setTabBorderColor(inactiveBorderTabColor);\r\n setHamptonActive(true);\r\n setCvillActive(false);\r\n\r\n setShowChart(2);\r\n setLocationColor(inactiveColor);\r\n setLocationColor1(inactiveColor);\r\n setLocationColor2(inactiveColor);\r\n setLocationColor3(inactiveColor);\r\n }}\r\n >\r\n <strong style={{ color: tabTextColor1 }}>Hampton Roads Area</strong>\r\n </div>\r\n </div>\r\n <div style={{ margin: 20 }}>\r\n {cvillActive && (\r\n <MapGL\r\n className=\"map-view-container\"\r\n ref={mapRef}\r\n {...viewport}\r\n onViewportChange={handleViewportChange}\r\n mapStyle=\"mapbox://styles/noahb20/ckigtszgw173519qy1c0t05va\"\r\n mapboxApiAccessToken=\"pk.eyJ1Ijoibm9haGIyMCIsImEiOiJja2lkb2RlaGMwNGR4Mnhxd21sbWxyeWVnIn0.SLuqIEAYEE2gY0ZNw5ySHA\"\r\n >\r\n <div style={{ position: \"absolute\", right: 10, top: 10 }}>\r\n <NavigationControl />\r\n </div>\r\n <Geocoder\r\n mapRef={mapRef}\r\n onViewportChange={handleGeocoderViewportChange}\r\n mapboxApiAccessToken=\"pk.eyJ1Ijoibm9haGIyMCIsImEiOiJja2lkb2RlaGMwNGR4Mnhxd21sbWxyeWVnIn0.SLuqIEAYEE2gY0ZNw5ySHA\"\r\n position=\"top-left\"\r\n />\r\n <Marker\r\n latitude={38.0293}\r\n longitude={-78.4767}\r\n offsetLeft={-20}\r\n offsetTop={-10}\r\n >\r\n <div\r\n onClick={() => {\r\n setShowPopup(0);\r\n setLocationColor(activeColor);\r\n setLocationColor1(inactiveColor);\r\n setShowChart(0);\r\n }}\r\n onMouseOver={() => {\r\n setShowPopup(0);\r\n setRegionLineColorCvill(activeRegionColor);\r\n }}\r\n onMouseLeave={() => {\r\n setShowPopup(null);\r\n setRegionLineColorCvill(inactiveRegionColor);\r\n }}\r\n >\r\n <GiWaterRecycling\r\n style={{ color: locationColor }}\r\n size={30}\r\n />\r\n </div>\r\n </Marker>\r\n {showPopup === 0 && (\r\n <Popup\r\n latitude={38.0293}\r\n longitude={-78.4767}\r\n closeButton={false}\r\n closeOnClick={false}\r\n tipSize={0}\r\n offsetTop={-10}\r\n >\r\n <div>Test Location #1</div>\r\n </Popup>\r\n )}\r\n <Marker\r\n latitude={38.03501}\r\n longitude={-78.50425}\r\n offsetLeft={-20}\r\n offsetTop={-10}\r\n >\r\n <div\r\n onClick={() => {\r\n setShowPopup(1);\r\n setLocationColor1(activeColor);\r\n setLocationColor(inactiveColor);\r\n setShowChart(1);\r\n }}\r\n onMouseOver={() => {\r\n setShowPopup(1);\r\n setRegionLineColorCvill(activeRegionColor);\r\n }}\r\n onMouseLeave={() => {\r\n setShowPopup(null);\r\n setRegionLineColorCvill(inactiveRegionColor);\r\n }}\r\n >\r\n <GiWaterRecycling\r\n style={{ color: locationColor1 }}\r\n size={30}\r\n />\r\n </div>\r\n </Marker>\r\n {showPopup === 1 && (\r\n <Popup\r\n latitude={38.03501}\r\n longitude={-78.50425}\r\n closeButton={false}\r\n closeOnClick={false}\r\n tipSize={0}\r\n offsetTop={-10}\r\n >\r\n <div>Test Location #2</div>\r\n </Popup>\r\n )}\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer\"\r\n type=\"geojson\"\r\n data={CharlottesvilleLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n\r\n <Source\r\n id=\"polygon\"\r\n type=\"geojson\"\r\n data={CharlottesvilleLimits}\r\n >\r\n <Layer\r\n id=\"aoi-solid-fill\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorCvill,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n </MapGL>\r\n )}\r\n\r\n {hamptonActive && (\r\n <div>\r\n <MapGL\r\n className=\"map-view-container\"\r\n ref={mapRef1}\r\n {...viewport1}\r\n onViewportChange={handleViewportChange1}\r\n mapStyle=\"mapbox://styles/noahb20/ckigtszgw173519qy1c0t05va\"\r\n mapboxApiAccessToken=\"pk.eyJ1Ijoibm9haGIyMCIsImEiOiJja2lkb2RlaGMwNGR4Mnhxd21sbWxyeWVnIn0.SLuqIEAYEE2gY0ZNw5ySHA\"\r\n >\r\n <div style={{ position: \"absolute\", right: 10, top: 10 }}>\r\n <NavigationControl />\r\n </div>\r\n <Geocoder\r\n mapRef={mapRef1}\r\n onViewportChange={handleGeocoderViewportChange1}\r\n mapboxApiAccessToken=\"pk.eyJ1Ijoibm9haGIyMCIsImEiOiJja2lkb2RlaGMwNGR4Mnhxd21sbWxyeWVnIn0.SLuqIEAYEE2gY0ZNw5ySHA\"\r\n position=\"top-left\"\r\n />\r\n <Marker\r\n latitude={36.83399572935205}\r\n longitude={-76.30274523863231}\r\n offsetLeft={-20}\r\n offsetTop={-10}\r\n >\r\n <div\r\n onClick={() => {\r\n setShowPopup(2);\r\n setLocationColor2(activeColor);\r\n setLocationColor3(inactiveColor);\r\n setShowChart(2);\r\n }}\r\n onMouseOver={() => {\r\n setShowPopup(2);\r\n setRegionLineColorPortsmouth(activeRegionColor);\r\n }}\r\n onMouseLeave={() => {\r\n setShowPopup(null);\r\n setRegionLineColorPortsmouth(inactiveRegionColor);\r\n }}\r\n >\r\n <GiWaterRecycling\r\n style={{ color: locationColor2 }}\r\n size={30}\r\n />\r\n </div>\r\n </Marker>\r\n {showPopup === 2 && (\r\n <Popup\r\n latitude={36.83399572935205}\r\n longitude={-76.30274523863231}\r\n closeButton={false}\r\n closeOnClick={false}\r\n tipSize={0}\r\n offsetTop={-10}\r\n >\r\n <div>Test Location #3</div>\r\n </Popup>\r\n )}\r\n <Marker\r\n latitude={36.99906646301743}\r\n longitude={-76.41358453874881}\r\n offsetLeft={-20}\r\n offsetTop={-10}\r\n >\r\n <div\r\n onClick={() => {\r\n setShowPopup(3);\r\n setLocationColor3(activeColor);\r\n setLocationColor2(inactiveColor);\r\n setShowChart(3);\r\n }}\r\n onMouseOver={() => {\r\n setShowPopup(3);\r\n setRegionLineColorNewportNews(activeRegionColor);\r\n }}\r\n onMouseLeave={() => {\r\n setShowPopup(null);\r\n setRegionLineColorNewportNews(inactiveRegionColor);\r\n }}\r\n >\r\n <GiWaterRecycling\r\n style={{ color: locationColor3 }}\r\n size={30}\r\n />\r\n </div>\r\n </Marker>\r\n {showPopup === 3 && (\r\n <Popup\r\n latitude={36.99906646301743}\r\n longitude={-76.41358453874881}\r\n closeButton={false}\r\n closeOnClick={false}\r\n tipSize={0}\r\n offsetTop={-10}\r\n >\r\n <div>Test Location #4</div>\r\n </Popup>\r\n )}\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer\"\r\n type=\"geojson\"\r\n data={ChesapeakeLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n\r\n <Source id=\"polygon\" type=\"geojson\" data={ChesapeakeLimits}>\r\n <Layer\r\n id=\"aoi-solid-fill\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorChesapeake,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer2\"\r\n type=\"geojson\"\r\n data={NorfolkLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer2\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n <Source id=\"polygon2\" type=\"geojson\" data={NorfolkLimits}>\r\n <Layer\r\n id=\"aoi-solid-fill2\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorNorfolk,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer3\"\r\n type=\"geojson\"\r\n data={PortsmouthLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer3\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n <Source id=\"polygon3\" type=\"geojson\" data={PortsmouthLimits}>\r\n <Layer\r\n id=\"aoi-solid-fill3\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorPortsmouth,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer4\"\r\n type=\"geojson\"\r\n data={SuffolkLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer4\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n <Source id=\"polygon4\" type=\"geojson\" data={SuffolkLimits}>\r\n <Layer\r\n id=\"aoi-solid-fill4\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorSuffolk,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer5\"\r\n type=\"geojson\"\r\n data={VaBeachLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer5\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n <Source id=\"polygon5\" type=\"geojson\" data={VaBeachLimits}>\r\n <Layer\r\n id=\"aoi-solid-fill5\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorVaBeach,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer6\"\r\n type=\"geojson\"\r\n data={HamptonLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer6\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n <Source id=\"polygon6\" type=\"geojson\" data={HamptonLimits}>\r\n <Layer\r\n id=\"aoi-solid-fill6\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorHampton,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n\r\n <div>\r\n <Source\r\n id=\"polylineLayer7\"\r\n type=\"geojson\"\r\n data={NewportNewsLimits}\r\n >\r\n <Layer\r\n id=\"lineLayer7\" //lineLayer\r\n type=\"line\" //line\r\n source=\"my-data\"\r\n layout={{\r\n \"line-join\": \"round\",\r\n \"line-cap\": \"round\",\r\n }}\r\n paint={{\r\n \"line-color\": \"rgba(235, 201, 52, 1)\",\r\n \"line-width\": 1,\r\n }}\r\n />\r\n </Source>\r\n <Source id=\"polygon7\" type=\"geojson\" data={NewportNewsLimits}>\r\n <Layer\r\n id=\"aoi-solid-fill7\"\r\n source=\"aoi\"\r\n type=\"fill\"\r\n paint={{\r\n \"fill-color\": regionLineColorNewportNews,\r\n }}\r\n />\r\n </Source>\r\n </div>\r\n </MapGL>\r\n </div>\r\n )}\r\n </div>\r\n <div\r\n style={{\r\n margin: 20,\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"center\",\r\n }}\r\n >\r\n <BiLineChart size={20} style={{ marginRight: 10, marginTop: 5 }} />\r\n <label>\r\n <Switch\r\n onChange={() => setChecked(!checked)}\r\n checked={checked}\r\n checkedIcon={false}\r\n uncheckedIcon={false}\r\n onColor=\"#c0c4c2\"\r\n offColor=\"#c0c4c2\"\r\n />\r\n </label>\r\n <BsFillBarChartFill\r\n size={20}\r\n style={{ marginLeft: 10, marginTop: 5 }}\r\n />\r\n </div>\r\n\r\n {cvillActive && (\r\n <div>\r\n {(showChart === null || showChart === 0) && (\r\n <div>\r\n <h2>Test Location #1</h2>\r\n <strong style={{ color: \"grey\" }}>\r\n XXXX Road, City, State, ZIP\r\n </strong>\r\n </div>\r\n )}\r\n {showChart === 1 && (\r\n <div>\r\n <h2>Test Location #2</h2>\r\n <strong style={{ color: \"grey\" }}>\r\n XXXX Road, City, State, ZIP\r\n </strong>\r\n </div>\r\n )}\r\n {checked && (showChart === null || showChart === 0) && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData1b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"viral load\" fill=\"#4B93E2\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && (showChart === null || showChart === 0) && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData1a}\r\n style={{ marginBottom: 20 }}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"viral load\" stroke=\"#4B93E2\" dot={false} />\r\n </LineChart>\r\n </div>\r\n )}\r\n {checked && (showChart === null || showChart === 0) && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData1b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 750]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"cases reported\" fill=\"#000000\" />\r\n <Bar dataKey=\"predicted infections\" fill=\"#aaacab\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && (showChart === null || showChart === 0) && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData1b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis tickFormatter={DataFormaterY} domain={[0, 750]}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"cases reported\" stroke=\"#000000\" dot={false} />\r\n <Line\r\n dataKey=\"predicted infections\"\r\n stroke=\"#aaacab\"\r\n dot={false}\r\n />\r\n </LineChart>\r\n </div>\r\n )}\r\n {checked && showChart === 1 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData2a}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"viral load\" fill=\"#4B93E2\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && showChart === 1 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData2a}\r\n style={{ marginBottom: 20 }}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"viral load\" stroke=\"#4B93E2\" dot={false} />\r\n </LineChart>\r\n </div>\r\n )}\r\n {checked && showChart === 1 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData2b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 750]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"cases reported\" fill=\"#000000\" />\r\n <Bar dataKey=\"predicted infections\" fill=\"#aaacab\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && showChart === 1 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData2b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis tickFormatter={DataFormaterY} domain={[0, 750]}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"cases reported\" stroke=\"#000000\" dot={false} />\r\n <Line\r\n dataKey=\"predicted infections\"\r\n stroke=\"#aaacab\"\r\n dot={false}\r\n />\r\n </LineChart>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n\r\n {hamptonActive && (\r\n <div>\r\n {showChart === 2 && (\r\n <div>\r\n <h2>Test Location #3</h2>\r\n <strong style={{ color: \"grey\" }}>\r\n XXXX Road, City, State, ZIP\r\n </strong>\r\n </div>\r\n )}\r\n {showChart === 3 && (\r\n <div>\r\n <h2>Test Location #4</h2>\r\n <strong style={{ color: \"grey\" }}>\r\n XXXX Road, City, State, ZIP\r\n </strong>\r\n </div>\r\n )}\r\n {checked && showChart === 2 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData3a}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"viral load\" fill=\"#4B93E2\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && showChart === 2 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData3a}\r\n style={{ marginBottom: 20 }}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"viral load\" stroke=\"#4B93E2\" dot={false} />\r\n </LineChart>\r\n </div>\r\n )}\r\n {checked && showChart === 2 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData3b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 750]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"cases reported\" fill=\"#000000\" />\r\n <Bar dataKey=\"predicted infections\" fill=\"#aaacab\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && showChart === 2 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData3b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis tickFormatter={DataFormaterY} domain={[0, 750]}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"cases reported\" stroke=\"#000000\" dot={false} />\r\n <Line\r\n dataKey=\"predicted infections\"\r\n stroke=\"#aaacab\"\r\n dot={false}\r\n />\r\n </LineChart>\r\n </div>\r\n )}\r\n {checked && showChart === 3 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData4a}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"viral load\" fill=\"#4B93E2\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && showChart === 3 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Viral Load</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData4a}\r\n style={{ marginBottom: 20 }}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 450000]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"viral load\"\r\n position=\"insideLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"viral load\" stroke=\"#4B93E2\" dot={false} />\r\n </LineChart>\r\n </div>\r\n )}\r\n {checked && showChart === 3 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <BarChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData4b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis domain={[0, 750]} tickFormatter={DataFormaterY}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Bar dataKey=\"cases reported\" fill=\"#000000\" />\r\n <Bar dataKey=\"predicted infections\" fill=\"#aaacab\" />\r\n </BarChart>\r\n </div>\r\n )}\r\n {!checked && showChart === 3 && (\r\n <div\r\n className=\"chart-view-container\"\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n backgroundColor: \"whitesmoke\",\r\n margin: 20,\r\n padding: 20,\r\n }}\r\n >\r\n <h4>Daily reported cases and predicted infections</h4>\r\n <LineChart\r\n width={window.innerWidth - 150}\r\n height={window.innerHeight / 1.5}\r\n data={chartData4b}\r\n >\r\n <CartesianGrid strokeDasharray=\"3 3\" />\r\n <XAxis dataKey=\"date\" tickFormatter={DataFormaterX} />\r\n <YAxis tickFormatter={DataFormaterY} domain={[0, 750]}>\r\n <Label\r\n value=\"Reported cases and predicted infections\"\r\n position=\"insideBottomLeft\"\r\n offset={10}\r\n angle={-90}\r\n />\r\n </YAxis>\r\n <Tooltip />\r\n <Line dataKey=\"cases reported\" stroke=\"#000000\" dot={false} />\r\n <Line\r\n dataKey=\"predicted infections\"\r\n stroke=\"#aaacab\"\r\n dot={false}\r\n />\r\n </LineChart>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n\r\n <div>\r\n <RiInformationLine size={30} style={{ color: \"grey\" }} />\r\n <p>\r\n The cases reported data on this site is automated in real time and\r\n provided by the{\" \"}\r\n <a href=\"https://www.vdh.virginia.gov/\" target=\"_blank\">\r\n Virginia Department of Health.\r\n </a>\r\n </p>\r\n <p>\r\n The viral load and predicted infections data is provided through\r\n simulation.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Wastewatertracker;\r\n","C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Projects\\ChartData.js",[],["213","214"],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Publications\\Multiplex.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Teaching\\MaterialA.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\MehrdadFazli.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\ColinCrowe.js",[],"C:\\Users\\Noah Beamon\\data-science-lab\\src\\Components\\Personnel\\NoahBeamon.js",[],{"ruleId":"215","replacedBy":"216"},{"ruleId":"217","replacedBy":"218"},{"ruleId":"219","severity":1,"message":"220","line":5,"column":8,"nodeType":"221","messageId":"222","endLine":5,"endColumn":12},{"ruleId":"219","severity":1,"message":"223","line":1,"column":17,"nodeType":"221","messageId":"222","endLine":1,"endColumn":25},{"ruleId":"219","severity":1,"message":"224","line":8,"column":5,"nodeType":"221","messageId":"222","endLine":8,"endColumn":14},{"ruleId":"225","severity":1,"message":"226","line":22,"column":21,"nodeType":"227","endLine":22,"endColumn":193},{"ruleId":"225","severity":1,"message":"226","line":33,"column":21,"nodeType":"227","endLine":33,"endColumn":87},{"ruleId":"225","severity":1,"message":"226","line":44,"column":21,"nodeType":"227","endLine":44,"endColumn":212},{"ruleId":"225","severity":1,"message":"226","line":55,"column":21,"nodeType":"227","endLine":55,"endColumn":85},{"ruleId":"225","severity":1,"message":"226","line":71,"column":21,"nodeType":"227","endLine":71,"endColumn":192},{"ruleId":"225","severity":1,"message":"226","line":82,"column":21,"nodeType":"227","endLine":82,"endColumn":86},{"ruleId":"225","severity":1,"message":"226","line":93,"column":21,"nodeType":"227","endLine":93,"endColumn":211},{"ruleId":"225","severity":1,"message":"226","line":104,"column":21,"nodeType":"227","endLine":104,"endColumn":84},{"ruleId":"219","severity":1,"message":"228","line":1,"column":38,"nodeType":"221","messageId":"222","endLine":1,"endColumn":44},{"ruleId":"219","severity":1,"message":"229","line":12,"column":10,"nodeType":"221","messageId":"222","endLine":12,"endColumn":13},{"ruleId":"219","severity":1,"message":"230","line":12,"column":15,"nodeType":"221","messageId":"222","endLine":12,"endColumn":19},{"ruleId":"219","severity":1,"message":"231","line":12,"column":21,"nodeType":"221","messageId":"222","endLine":12,"endColumn":28},{"ruleId":"219","severity":1,"message":"232","line":12,"column":30,"nodeType":"221","messageId":"222","endLine":12,"endColumn":38},{"ruleId":"219","severity":1,"message":"233","line":14,"column":10,"nodeType":"221","messageId":"222","endLine":14,"endColumn":30},{"ruleId":"219","severity":1,"message":"234","line":15,"column":8,"nodeType":"221","messageId":"222","endLine":15,"endColumn":15},{"ruleId":"219","severity":1,"message":"235","line":16,"column":10,"nodeType":"221","messageId":"222","endLine":16,"endColumn":22},{"ruleId":"219","severity":1,"message":"236","line":17,"column":10,"nodeType":"221","messageId":"222","endLine":17,"endColumn":25},{"ruleId":"219","severity":1,"message":"237","line":17,"column":27,"nodeType":"221","messageId":"222","endLine":17,"endColumn":34},{"ruleId":"219","severity":1,"message":"238","line":18,"column":8,"nodeType":"221","messageId":"222","endLine":18,"endColumn":19},{"ruleId":"219","severity":1,"message":"239","line":19,"column":10,"nodeType":"221","messageId":"222","endLine":19,"endColumn":21},{"ruleId":"219","severity":1,"message":"240","line":20,"column":10,"nodeType":"221","messageId":"222","endLine":20,"endColumn":23},{"ruleId":"219","severity":1,"message":"241","line":20,"column":25,"nodeType":"221","messageId":"222","endLine":20,"endColumn":35},{"ruleId":"219","severity":1,"message":"242","line":21,"column":10,"nodeType":"221","messageId":"222","endLine":21,"endColumn":16},{"ruleId":"219","severity":1,"message":"243","line":22,"column":10,"nodeType":"221","messageId":"222","endLine":22,"endColumn":19},{"ruleId":"219","severity":1,"message":"244","line":24,"column":3,"nodeType":"221","messageId":"222","endLine":24,"endColumn":7},{"ruleId":"219","severity":1,"message":"245","line":25,"column":3,"nodeType":"221","messageId":"222","endLine":25,"endColumn":9},{"ruleId":"219","severity":1,"message":"246","line":26,"column":3,"nodeType":"221","messageId":"222","endLine":26,"endColumn":12},{"ruleId":"219","severity":1,"message":"247","line":27,"column":3,"nodeType":"221","messageId":"222","endLine":27,"endColumn":14},{"ruleId":"219","severity":1,"message":"248","line":28,"column":3,"nodeType":"221","messageId":"222","endLine":28,"endColumn":15},{"ruleId":"219","severity":1,"message":"224","line":34,"column":3,"nodeType":"221","messageId":"222","endLine":34,"endColumn":12},{"ruleId":"219","severity":1,"message":"249","line":109,"column":10,"nodeType":"221","messageId":"222","endLine":109,"endColumn":24},{"ruleId":"219","severity":1,"message":"250","line":109,"column":26,"nodeType":"221","messageId":"222","endLine":109,"endColumn":43},{"ruleId":"219","severity":1,"message":"240","line":3,"column":10,"nodeType":"221","messageId":"222","endLine":3,"endColumn":23},{"ruleId":"219","severity":1,"message":"224","line":10,"column":5,"nodeType":"221","messageId":"222","endLine":10,"endColumn":14},{"ruleId":"251","severity":1,"message":"252","line":71,"column":55,"nodeType":"253","messageId":"254","endLine":71,"endColumn":57},{"ruleId":"255","severity":1,"message":"256","line":72,"column":48,"nodeType":"257","messageId":"258","endLine":72,"endColumn":50},{"ruleId":"255","severity":1,"message":"256","line":72,"column":67,"nodeType":"257","messageId":"258","endLine":72,"endColumn":69},{"ruleId":"255","severity":1,"message":"256","line":72,"column":93,"nodeType":"257","messageId":"258","endLine":72,"endColumn":95},{"ruleId":"225","severity":1,"message":"226","line":172,"column":41,"nodeType":"227","endLine":172,"endColumn":177},{"ruleId":"251","severity":1,"message":"252","line":245,"column":55,"nodeType":"253","messageId":"254","endLine":245,"endColumn":57},{"ruleId":"255","severity":1,"message":"256","line":246,"column":48,"nodeType":"257","messageId":"258","endLine":246,"endColumn":50},{"ruleId":"255","severity":1,"message":"256","line":246,"column":67,"nodeType":"257","messageId":"258","endLine":246,"endColumn":69},{"ruleId":"255","severity":1,"message":"256","line":246,"column":93,"nodeType":"257","messageId":"258","endLine":246,"endColumn":95},{"ruleId":"225","severity":1,"message":"226","line":259,"column":41,"nodeType":"227","endLine":259,"endColumn":177},{"ruleId":"225","severity":1,"message":"226","line":22,"column":11,"nodeType":"227","endLine":25,"endColumn":13},{"ruleId":"219","severity":1,"message":"235","line":7,"column":3,"nodeType":"221","messageId":"222","endLine":7,"endColumn":15},{"ruleId":"259","severity":1,"message":"260","line":35,"column":35,"nodeType":"257","messageId":"261","endLine":35,"endColumn":36},{"ruleId":"262","severity":1,"message":"263","line":43,"column":19,"nodeType":"264","endLine":43,"endColumn":34},{"ruleId":"262","severity":1,"message":"263","line":53,"column":19,"nodeType":"264","endLine":53,"endColumn":34},{"ruleId":"262","severity":1,"message":"263","line":64,"column":19,"nodeType":"264","endLine":64,"endColumn":34},{"ruleId":"262","severity":1,"message":"263","line":80,"column":19,"nodeType":"264","endLine":80,"endColumn":34},{"ruleId":"259","severity":1,"message":"260","line":93,"column":35,"nodeType":"257","messageId":"261","endLine":93,"endColumn":36},{"ruleId":"225","severity":1,"message":"226","line":107,"column":17,"nodeType":"227","endLine":110,"endColumn":19},{"ruleId":"219","severity":1,"message":"240","line":3,"column":24,"nodeType":"221","messageId":"222","endLine":3,"endColumn":37},{"ruleId":"219","severity":1,"message":"224","line":9,"column":5,"nodeType":"221","messageId":"222","endLine":9,"endColumn":14},{"ruleId":"251","severity":1,"message":"252","line":71,"column":59,"nodeType":"253","messageId":"254","endLine":71,"endColumn":61},{"ruleId":"255","severity":1,"message":"256","line":72,"column":48,"nodeType":"257","messageId":"258","endLine":72,"endColumn":50},{"ruleId":"255","severity":1,"message":"256","line":72,"column":70,"nodeType":"257","messageId":"258","endLine":72,"endColumn":72},{"ruleId":"255","severity":1,"message":"256","line":72,"column":89,"nodeType":"257","messageId":"258","endLine":72,"endColumn":91},{"ruleId":"255","severity":1,"message":"256","line":72,"column":114,"nodeType":"257","messageId":"258","endLine":72,"endColumn":116},{"ruleId":"225","severity":1,"message":"226","line":186,"column":41,"nodeType":"227","endLine":186,"endColumn":177},{"ruleId":"251","severity":1,"message":"252","line":273,"column":59,"nodeType":"253","messageId":"254","endLine":273,"endColumn":61},{"ruleId":"255","severity":1,"message":"256","line":274,"column":48,"nodeType":"257","messageId":"258","endLine":274,"endColumn":50},{"ruleId":"255","severity":1,"message":"256","line":274,"column":70,"nodeType":"257","messageId":"258","endLine":274,"endColumn":72},{"ruleId":"255","severity":1,"message":"256","line":274,"column":89,"nodeType":"257","messageId":"258","endLine":274,"endColumn":91},{"ruleId":"255","severity":1,"message":"256","line":274,"column":115,"nodeType":"257","messageId":"258","endLine":274,"endColumn":117},{"ruleId":"225","severity":1,"message":"226","line":287,"column":41,"nodeType":"227","endLine":287,"endColumn":177},{"ruleId":"215","replacedBy":"265"},{"ruleId":"217","replacedBy":"266"},{"ruleId":"219","severity":1,"message":"240","line":3,"column":24,"nodeType":"221","messageId":"222","endLine":3,"endColumn":37},{"ruleId":"219","severity":1,"message":"224","line":9,"column":5,"nodeType":"221","messageId":"222","endLine":9,"endColumn":14},{"ruleId":"219","severity":1,"message":"267","line":15,"column":11,"nodeType":"221","messageId":"222","endLine":15,"endColumn":20},{"ruleId":"219","severity":1,"message":"268","line":15,"column":22,"nodeType":"221","messageId":"222","endLine":15,"endColumn":34},{"ruleId":"251","severity":1,"message":"252","line":70,"column":55,"nodeType":"253","messageId":"254","endLine":70,"endColumn":57},{"ruleId":"255","severity":1,"message":"256","line":71,"column":48,"nodeType":"257","messageId":"258","endLine":71,"endColumn":50},{"ruleId":"255","severity":1,"message":"256","line":71,"column":67,"nodeType":"257","messageId":"258","endLine":71,"endColumn":69},{"ruleId":"255","severity":1,"message":"256","line":71,"column":93,"nodeType":"257","messageId":"258","endLine":71,"endColumn":95},{"ruleId":"225","severity":1,"message":"226","line":171,"column":41,"nodeType":"227","endLine":171,"endColumn":177},{"ruleId":"251","severity":1,"message":"252","line":244,"column":55,"nodeType":"253","messageId":"254","endLine":244,"endColumn":57},{"ruleId":"255","severity":1,"message":"256","line":245,"column":48,"nodeType":"257","messageId":"258","endLine":245,"endColumn":50},{"ruleId":"255","severity":1,"message":"256","line":245,"column":67,"nodeType":"257","messageId":"258","endLine":245,"endColumn":69},{"ruleId":"255","severity":1,"message":"256","line":245,"column":93,"nodeType":"257","messageId":"258","endLine":245,"endColumn":95},{"ruleId":"225","severity":1,"message":"226","line":258,"column":41,"nodeType":"227","endLine":258,"endColumn":177},{"ruleId":"219","severity":1,"message":"269","line":11,"column":10,"nodeType":"221","messageId":"222","endLine":11,"endColumn":26},{"ruleId":"270","severity":1,"message":"271","line":105,"column":9,"nodeType":"221","messageId":"272","endLine":105,"endColumn":10},{"ruleId":"270","severity":1,"message":"271","line":128,"column":9,"nodeType":"221","messageId":"272","endLine":128,"endColumn":10},{"ruleId":"270","severity":1,"message":"271","line":137,"column":9,"nodeType":"221","messageId":"272","endLine":137,"endColumn":10},{"ruleId":"270","severity":1,"message":"273","line":138,"column":9,"nodeType":"221","messageId":"272","endLine":138,"endColumn":10},{"ruleId":"270","severity":1,"message":"271","line":153,"column":9,"nodeType":"221","messageId":"272","endLine":153,"endColumn":10},{"ruleId":"270","severity":1,"message":"271","line":162,"column":9,"nodeType":"221","messageId":"272","endLine":162,"endColumn":10},{"ruleId":"270","severity":1,"message":"273","line":163,"column":9,"nodeType":"221","messageId":"272","endLine":163,"endColumn":10},{"ruleId":"219","severity":1,"message":"274","line":185,"column":9,"nodeType":"221","messageId":"222","endLine":185,"endColumn":17},{"ruleId":"275","severity":1,"message":"276","line":226,"column":6,"nodeType":"277","endLine":226,"endColumn":8,"suggestions":"278"},{"ruleId":"275","severity":1,"message":"279","line":250,"column":6,"nodeType":"277","endLine":250,"endColumn":8,"suggestions":"280"},{"ruleId":"219","severity":1,"message":"281","line":282,"column":37,"nodeType":"221","messageId":"222","endLine":282,"endColumn":65},{"ruleId":"219","severity":1,"message":"282","line":284,"column":34,"nodeType":"221","messageId":"222","endLine":284,"endColumn":59},{"ruleId":"219","severity":1,"message":"283","line":286,"column":34,"nodeType":"221","messageId":"222","endLine":286,"endColumn":59},{"ruleId":"219","severity":1,"message":"284","line":290,"column":34,"nodeType":"221","messageId":"222","endLine":290,"endColumn":59},{"ruleId":"219","severity":1,"message":"285","line":294,"column":34,"nodeType":"221","messageId":"222","endLine":294,"endColumn":59},{"ruleId":"262","severity":1,"message":"263","line":336,"column":51,"nodeType":"264","endLine":336,"endColumn":66},{"ruleId":"262","severity":1,"message":"263","line":1495,"column":53,"nodeType":"264","endLine":1495,"endColumn":68},{"ruleId":"215","replacedBy":"286"},{"ruleId":"217","replacedBy":"287"},"no-native-reassign",["288"],"no-negated-in-lhs",["289"],"no-unused-vars","'Blog' is defined but never used.","Identifier","unusedVar","'useState' is defined but never used.","'isBrowser' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'useRef' is defined but never used.","'Tab' is defined but never used.","'Tabs' is defined but never used.","'TabList' is defined but never used.","'TabPanel' is defined but never used.","'TwitterTimelineEmbed' is defined but never used.","'emailjs' is defined but never used.","'AiFillGithub' is defined but never used.","'SiGooglescholar' is defined but never used.","'SiOrcid' is defined but never used.","'RecentsJSON' is defined but never used.","'MdSubtitles' is defined but never used.","'IoIosCalendar' is defined but never used.","'IoMdSearch' is defined but never used.","'BiHash' is defined but never used.","'FaTwitter' is defined but never used.","'Form' is defined but never used.","'Button' is defined but never used.","'FormGroup' is defined but never used.","'FormControl' is defined but never used.","'ControlLabel' is defined but never used.","'twitterVisible' is assigned a value but never used.","'setTwitterVisible' is assigned a value but never used.","array-callback-return","Array.prototype.filter() expects a value to be returned at the end of arrow function.","ArrowFunctionExpression","expectedAtEnd","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","no-useless-concat","Unexpected string concatenation of literals.","unexpectedConcat","react/jsx-no-target-blank","Using target=\"_blank\" without rel=\"noreferrer\" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener","JSXAttribute",["288"],["289"],"'inputTags' is assigned a value but never used.","'setInputTags' is assigned a value but never used.","'BsFillCircleFill' is defined but never used.","no-redeclare","'x' is already defined.","redeclared","'y' is already defined.","'widthWin' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useCallback has a missing dependency: 'handleViewportChange'. Either include it or remove the dependency array.","ArrayExpression",["290"],"React Hook useCallback has a missing dependency: 'handleViewportChange1'. Either include it or remove the dependency array.",["291"],"'setRegionLineColorChesapeake' is assigned a value but never used.","'setRegionLineColorHampton' is assigned a value but never used.","'setRegionLineColorSuffolk' is assigned a value but never used.","'setRegionLineColorNorfolk' is assigned a value but never used.","'setRegionLineColorVaBeach' is assigned a value but never used.",["288"],["289"],"no-global-assign","no-unsafe-negation",{"desc":"292","fix":"293"},{"desc":"294","fix":"295"},"Update the dependencies array to be: [handleViewportChange]",{"range":"296","text":"297"},"Update the dependencies array to be: [handleViewportChange1]",{"range":"298","text":"299"},[6200,6202],"[handleViewportChange]",[6817,6819],"[handleViewportChange1]"]