From 3ff66a66eec2de0c47a888ecae271b51b80a0b39 Mon Sep 17 00:00:00 2001 From: William Kwok Date: Mon, 21 Oct 2019 00:03:41 -0700 Subject: [PATCH 1/2] updated pdf viwer --- .../ContentWidgets/PdfViewer/PdfViewer.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/ContentWidgets/PdfViewer/PdfViewer.tsx b/src/components/ContentWidgets/PdfViewer/PdfViewer.tsx index 6b8523f..b9b07eb 100644 --- a/src/components/ContentWidgets/PdfViewer/PdfViewer.tsx +++ b/src/components/ContentWidgets/PdfViewer/PdfViewer.tsx @@ -23,9 +23,11 @@ export const PdfViewer: React.FC = ({ height: pdfViewer_pdfHeightPixel + "px" }; - return + return
+ +
} \ No newline at end of file From 3c83b2c570036b825071bb85d777df4e537f3cd1 Mon Sep 17 00:00:00 2001 From: William Kwok Date: Mon, 21 Oct 2019 00:11:11 -0700 Subject: [PATCH 2/2] Added more data --- src/App.tsx | 41 +- .../WidgetEditor/WidgetEditor.tsx | 9 +- .../WidgetLiveEdit/WidgetLiveEdit.tsx | 18 +- .../ContentMapping/ContentMapping.ts | 2 - src/components/ContentView/ContentView.css | 93 +- src/components/ContentView/ContentView.tsx | 2 +- .../ContentWidgets/Header/Header.tsx | 17 +- .../ContentWidgets/SideBar/SideBar.tsx | 6 +- .../HardcodedMainPage/HardCodedMainPage.css | 6 +- .../HardcodedMainPage/HardCodedMainPage.tsx | 84 +- .../HomepageCard/HomepageCard.css | 21 +- .../HomepageCard/HomepageCard.tsx | 40 +- src/components/_data/Constants.ts | 2 +- src/components/_data/Data.ts | 2956 ++++++++++++++++- .../_data/FootbarData/FootbarData.ts | 70 +- src/components/_data/NavbarData/NavbarData.ts | 4 +- .../EnvironmentContext/EnvironmentContext.ts | 9 +- src/hooks/useAuth.ts | 49 +- src/index.css | 4 +- src/index.tsx | 35 +- 20 files changed, 3238 insertions(+), 230 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a4e83d9..0d80c0b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,6 +16,7 @@ import { FONT_FAMILY } from './components/_data/Constants'; import { HardCodedMainPage } from './components/HardcodedMainPage/HardCodedMainPage'; import { Team } from './components/HardCodedTeamPage/LegacyHardCodedTeamPage'; import { Sponsors } from './components/HardCodedSponsorsPage/LegacyHardCodedSponsorsPage'; +import { FIREBASE_DATABASE_REFERENCE } from '.'; // This line is to remove a bug that Firefox has @@ -26,7 +27,7 @@ type AppProps = { IEOREDGE: boolean, currYear: number, firebase?: any, - ContentEditor: React.FC + ContentEditor: React.FC | null } const debugURL = "/Editor"; @@ -96,17 +97,17 @@ const App: React.FC = ({ IEOREDGE, currYear, firebase, ContentEditor } prefetchImages(); let splitTitle = window.location.href.split("igem"); if (splitTitle.length === 2) { - setPageTitle(splitTitle[1].split("Team:Washington")[1]); + setPageTitle((splitTitle[1].split("Team:Washington")[1]).split("?")[0]); setDebugMode(false); } else { DebugFonts(); // Set fonts in body } setLoading(false); - let dataRef: firebase.database.Reference | null = null; + let dataRef: FIREBASE_DATABASE_REFERENCE | null = null; if (firebase) { dataRef = firebase.database().ref(`/${currYear}/ContentData`); if (dataRef) { - dataRef.on("value", (snap) => { + dataRef.on("value", (snap: any) => { setContentData(snap.val() as ContentData); }); } @@ -158,41 +159,11 @@ const App: React.FC = ({ IEOREDGE, currYear, firebase, ContentEditor }
{/** Comment out this in final build */} - {pageTitle === "/Editor" && + {pageTitle === "/Editor" && ContentEditor && } - {/******HARDCODED DESCRIPTION PAGE**********/} - {pageTitle !== "/Editor" - && (pageTitle === "/Description") && -
- {pageTitle !== '/Description' && -
-

Immunosense: Detecting small molecules using a chemically-induced dimerization system

- -

Abstract:

-

- Although biosensors are commonly used to detect many different molecules of interest, they cannot effectively detect small hydrophobic molecules in biological systems. We propose combining chemically induced dimerization (CID), in which two proteins dimerize only in the presence of a ligand, with a traditional luciferase assay to create a biosensor that luminesces when the desired molecule is introduced. Using molecule-specific nanobodies, we can design the two CID binders to attach to a wide variety of small molecules, even those that are challenging for conventional biosensors to detect. Through its specificity and ability to bind to small or hydrophobic molecules, the CID system overcomes problems that other biosensors face. As a proof-of-concept, we implemented an in vivo CID biosensor to detect the presence of cannabidiol. With the nanobody CID system, we hope to introduce a novel biosensor that can detect a variety of important small molecules across research, biotechnology, and medicine. -

-
- } - -

Project Inspiration and Description

-

- Our project focuses on developing technologies that help researchers to detect small molecules, which traditionally have been much more difficult to detect using biological assays than larger molecules. Our technologies revolve around chemically induced dimerization (CID), in which two proteins dimerize in the presence of a small molecule. This method has been previously used to control cell signaling, regulatory and metabolic pathways, and logic gates for biological computation in living mammalian cells. However, few naturally-occuring CID systems and their derivatives are currently available for research and therapeutic purposes. Creating a CID system with desired affinity and specificity for any given small molecule remains an unsolved problem for computational design and other protein engineering approaches. Solving it would open a wide range of possibilities in the development of diagnostic biosensors, high-precision therapeutics, and beyond. -

-

- We are using a novel strategy to select CID binders from a vast and diverse combinatorial antibody library, and applying them towards the development of a biosensor. We will specifically be developing a biosensor using these antibodies to detect cannabidiol (CBD), a compound derived from the hemp plant which has been used to treat epilepsy, anxiety, and chronic pain, although more research is needed to verify its effectiveness. We are working to engineer this biosensor both as a proof of concept and as a way to help further research into CBD. -

-

- We hope that the result of our project will benefit the scientific community by creating a generalizable bioengineered tool that can detect the presence of small molecules with a high degree of accuracy and efficiency, at a lower cost than other tools that have been traditionally used. -

-

- This project was inspired by work in the Gu Lab at the University of Washington and their work dealing with the creation of a CID system. We wanted to take what we learned from last year, build upon it, and package everything in a consumer friendly device to detect CBD. Furthermore, since our team has had experience with CID devices from our 2018 project that dealt with detecting anchor binders for cholecalciferol and artemisinin. -

-
} - {/*********HARDCODED MAIN PAGE*********** */} {pageTitle !== "/Editor" && pageTitle === "" && diff --git a/src/components/ContentEditor/WidgetEditor/WidgetEditor.tsx b/src/components/ContentEditor/WidgetEditor/WidgetEditor.tsx index a4fddf3..79cbe06 100644 --- a/src/components/ContentEditor/WidgetEditor/WidgetEditor.tsx +++ b/src/components/ContentEditor/WidgetEditor/WidgetEditor.tsx @@ -7,13 +7,14 @@ import equal from 'deep-equal'; import { EnvironmentContext } from '../../../contexts/EnvironmentContext/EnvironmentContext'; import { WidgetLiveEdit } from '../WidgetLiveEdit/WidgetLiveEdit'; import { FailureWidget, FailureEditWidget } from './FailureWidget/FailureWidget'; +import { FIREBASE_USER } from '../../../index'; type WidgetEditorProps = { content: ContentSingularData | undefined, contentHash: string, currYear: number, pageToEdit: string, - user: firebase.User | null, + user: FIREBASE_USER | null, deleteWidget: (contentHash: string) => void } @@ -72,7 +73,8 @@ export const WidgetEditor: React.FC = ({ content, contentHash editing={false} setEditing={setEditing} editedContent={editedContent} - deleteWidget={deleteWidget} /> + deleteWidget={deleteWidget} + firebase={firebase} />
} @@ -122,7 +124,8 @@ export const WidgetEditor: React.FC = ({ content, contentHash editing={true} setEditing={setEditing} editedContent={editedContent} - deleteWidget={deleteWidget} /> + deleteWidget={deleteWidget} + firebase={firebase} /> } diff --git a/src/components/ContentEditor/WidgetLiveEdit/WidgetLiveEdit.tsx b/src/components/ContentEditor/WidgetLiveEdit/WidgetLiveEdit.tsx index 60ddbd0..8e7570f 100644 --- a/src/components/ContentEditor/WidgetLiveEdit/WidgetLiveEdit.tsx +++ b/src/components/ContentEditor/WidgetLiveEdit/WidgetLiveEdit.tsx @@ -2,24 +2,25 @@ import React, { useState, useEffect } from 'react'; import { ContentSingularData } from '../../_data/ContentSingularData'; import Button from '@material-ui/core/Button'; import { HistoryTypes } from '../../_debug/EditorHistory'; -import firebase from 'firebase'; import './WidgetLiveEdit.css'; import { - LIVE_EDIT_TIMETOUT, + LIVE_EDIT_TIMEOUT, LIVE_EDIT_REFRESH, CURRENTLY_EDITED_BY_YOU_MESSAGE, SAFE_MESSAGE } from '../../_data/Constants'; +import { FIREBASE, FIREBASE_DATABASE_REFERENCE, FIREBASE_USER } from '../../../index'; type WidgetLiveEditProps = { contentHash: string, currYear: number, pageToEdit: string, - user: firebase.User | null + user: FIREBASE_USER | null editing: boolean setEditing: any, editedContent: ContentSingularData, - deleteWidget: (contentHash: string) => void + deleteWidget: (contentHash: string) => void, + firebase: FIREBASE }; enum EditingState { @@ -35,13 +36,12 @@ enum EditingState { */ export const WidgetLiveEdit: React.FC = ({ - contentHash, currYear, pageToEdit, user, editing, setEditing, editedContent, deleteWidget + contentHash, currYear, pageToEdit, user, editing, setEditing, editedContent, deleteWidget, firebase }) => { - let [editingState, setEditingState] = useState(EditingState.SAFE); let [message, setMessage] = useState(SAFE_MESSAGE); - let widgetRef: firebase.database.Reference = firebase.database().ref(`${currYear}/LiveEditHistory/${pageToEdit}/${contentHash}`); + let widgetRef: FIREBASE_DATABASE_REFERENCE = firebase.database().ref(`${currYear}/LiveEditHistory/${pageToEdit}/${contentHash}`); // update firebase with the current timestamp const updateOnce = () => { @@ -66,13 +66,13 @@ export const WidgetLiveEdit: React.FC = ({ useEffect(() => { // set up listener to firebase, re-render when updated - widgetRef.on('value', (snapshot) => { + widgetRef.on('value', (snapshot: any) => { let record = snapshot.val(); if (record) { let diff: number = (Date.now() - record.timestamp) / 1000; let saved: boolean = record.saved; - if (!saved && diff < LIVE_EDIT_TIMETOUT) { + if (!saved && diff < LIVE_EDIT_TIMEOUT) { // not saved and not yet timed out let editorName = record.editor; if (user && editorName === user.email) { diff --git a/src/components/ContentMapping/ContentMapping.ts b/src/components/ContentMapping/ContentMapping.ts index 0cdbd3d..91ac4c1 100644 --- a/src/components/ContentMapping/ContentMapping.ts +++ b/src/components/ContentMapping/ContentMapping.ts @@ -22,8 +22,6 @@ import { WYSIWYGEditor } from '../ContentWidgets/WYSIWYG/WYSIWYGEditor'; import { WYSIWYGWidget } from '../ContentWidgets/WYSIWYG/WYSIWYGWidget'; import { Accordion } from '../ContentWidgets/Accordion/Accordion'; import { AccordionEditor } from '../ContentWidgets/Accordion/AccordionEditor'; -import { TeamPage } from '../ContentWidgets/TeamPage/TeamPage'; -import { TeamPageEditor } from '../ContentWidgets/TeamPage/TeamPageEditor'; import { ImageCarousel } from '../ContentWidgets/ImageCarousel.tsx/ImageCarousel'; import { ImageCarouselEditor } from '../ContentWidgets/ImageCarousel.tsx/ImageCarouselEditor'; import { ExampleImage } from '../ContentWidgets/ExampleImage/ExampleImage'; diff --git a/src/components/ContentView/ContentView.css b/src/components/ContentView/ContentView.css index ed70138..a7b1fea 100644 --- a/src/components/ContentView/ContentView.css +++ b/src/components/ContentView/ContentView.css @@ -1,79 +1,82 @@ - - .sidebar-content-view { - display: flex; - justify-content: space-between; - padding: 5rem; + display: flex; + justify-content: space-between; + padding: 5%; + max-width: 1920px; + margin: auto; } .sidebar-content-view #content-view-container { - justify-self: center; - align-self: center; - flex-grow: 1; + justify-self: center; + align-self: center; + flex-grow: 1; } #sidebar-progress { - width: 5px; - background-color: darkgrey; - border-radius: 50px; - height: 100%; + width: 5px; + background-color: darkgrey; + border-radius: 50px; + height: 100%; } -#sidebar-progress > span { - background-color: #420DAB; - display: block; - border-radius: 50px; +#sidebar-progress>span { + background-color: #420DAB; + display: block; + border-radius: 50px; } .content-view-container-w-sidebar { - width: 50%; - margin-left: 5px; + width: 50%; + margin-left: 5px; } #sidebar-container { - position: sticky; - top: 20%; - height: 100px; - display: flex; - justify-content: space-between center; - align-items: center; - margin-right: 3rem; - width: 18%; + position: sticky; + top: 20%; + height: 100px; + display: flex; + justify-content: space-between center; + align-items: center; + width: 19%; } +/** + TODO: This is voodoo magic wtf +*/ + #sidebar-container { - display: none; + display: none; } @media (min-width: 600px) { - #sidebar-container { - display: flex; - } + #sidebar-container { + display: flex; + } } #sidebar { - list-style: none; - width: 90%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + list-style: none; + width: 90%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } #sidebar li { - margin-bottom: 5px; - padding: 2px; - cursor: pointer; - width: 90%; - overflow: hidden; - text-overflow: ellipsis; - font-weight: bold; - text-align: right; + margin-bottom: 5px; + padding: 2px; + cursor: pointer; + width: 90%; + overflow: hidden; + text-overflow: ellipsis; + font-weight: bold; + text-align: right; } li.nonactive-section { - color: darkgrey; + color: darkgrey; } li.active-section { - color: black; + color: black; } \ No newline at end of file diff --git a/src/components/ContentView/ContentView.tsx b/src/components/ContentView/ContentView.tsx index ea38f2e..72047cd 100644 --- a/src/components/ContentView/ContentView.tsx +++ b/src/components/ContentView/ContentView.tsx @@ -76,7 +76,7 @@ export const ContentView: React.FC = ({ contentData, pageTitle ContentWidget = ContentMapping[content!.type].widget; } - return content!.type === "BANNER" ? null :
+ return content!.type === "BANNER" ? null :
}) diff --git a/src/components/ContentWidgets/Header/Header.tsx b/src/components/ContentWidgets/Header/Header.tsx index 1170058..8b6c004 100644 --- a/src/components/ContentWidgets/Header/Header.tsx +++ b/src/components/ContentWidgets/Header/Header.tsx @@ -8,24 +8,13 @@ import { ContentSingularData } from '../../_data/ContentSingularData'; * Elisa Truong * September 1, 2019 */ -export const Header: React.FC = ({ header_content, header_priority }) => { - if (!header_content || !header_priority) { +export const Header: React.FC = ({ header_content }) => { + if (!header_content) { return <>; } - let header; - if (header_priority === 1) { - header =

{header_content}

; - } else if (header_priority === 2) { - header =

{header_content}

; - } else if (header_priority === 3) { - header =

{header_content}

; - } else if (header_priority === 4) { - header =

{header_content}

; - } - return
- {header} +

{header_content}

} diff --git a/src/components/ContentWidgets/SideBar/SideBar.tsx b/src/components/ContentWidgets/SideBar/SideBar.tsx index 3620920..ae02f51 100644 --- a/src/components/ContentWidgets/SideBar/SideBar.tsx +++ b/src/components/ContentWidgets/SideBar/SideBar.tsx @@ -93,8 +93,12 @@ export const SideBar: React.FC = ({ } }); + let totalSections = 0; let generateSectionLinks = contentData[pageTitle].contentOrder!!.map((content) => { let widgetInfo = contentData[pageTitle].content![content] + if (widgetInfo!.type === "HEADER") { + totalSections++; + } return widgetInfo!.type === "HEADER" ?
  • = ({ let progress = currentActiveSection ? Math.round((currentActiveSection.index + 1) / currentActiveSection.totalSections * 100.0) : 0; - return