diff --git a/src/components/Boxes.tsx b/src/components/Boxes.tsx
index 274144b324244f1953631cb79253008574191f15..986cc72e949ec7667c6f59da19143b65e5079c5e 100644
--- a/src/components/Boxes.tsx
+++ b/src/components/Boxes.tsx
@@ -50,9 +50,9 @@ export function SpecialQaBox({q, children}:{q: string, children: React.ReactNode
-export function InfoBox({title, children}:{title: string, children: React.ReactNode}){
+export function InfoBox({title, children, id}:{title: string, children: React.ReactNode, id: string}){
return(
- <aside className="hint-container info">
+ <aside className="hint-container info" id={id}>
<p className="hint-container-title">
{title}
</p>
diff --git a/src/components/goto.tsx b/src/components/goto.tsx
index 9b7a26dc4ed68194688e947edb3b69fc21e26797..ffcaaa3987af654b39be94e4f037868d8e65ba4e 100644
--- a/src/components/goto.tsx
+++ b/src/components/goto.tsx
@@ -15,6 +15,10 @@ interface ScrollLinkProps {
targetId: string;
label: string;
}
+interface ScrollLinkWithChildProps {
+ targetId: string;
+ children: React.ReactNode;
+}
interface SupScrollLinkProps {
label: string;
}
@@ -33,6 +37,20 @@ export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
</a>
);
};
+export const ScrollLinkWithChild: React.FC<ScrollLinkWithChildProps> = ({ targetId, children }) => {
+ const handleClick = () => {
+ const targetElement = document.getElementById(targetId);
+ if (targetElement) {
+ goTo(targetElement);
+ }
+ };
+
+ return (
+ <a onClick={handleClick}>
+ {children}
+ </a>
+ );
+};
export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => {
let targetId = "desc-" + label
diff --git a/src/components/svgs.tsx b/src/components/svgs.tsx
index e03fd009b5f33f3f859b1df8fa3617c2db39d1fa..f2e7ef8d7c1d423901196529ddcc3966a2b32545 100644
--- a/src/components/svgs.tsx
+++ b/src/components/svgs.tsx
@@ -1,5 +1,7 @@
-import { Link } from "react-router-dom"
+import { useNavigation } from "../utils"
+import { ScrollLinkWithChild } from "./goto";
export function Complex(){
+ const { goToPagesAndOpenTab /* , goToTextsAndOpenCollapsible */ } = useNavigation();
return(
<>
<svg
@@ -693,6 +695,7 @@ export function Complex(){
style={{fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 525.09492,662.08075 C 375.66161,714.42751 375.66161,714.42751 375.66161,714.42751"
id="path89" />
+ <ScrollLinkWithChild targetId="riboswitch">
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
@@ -705,6 +708,7 @@ export function Complex(){
id="ribotext"><tspan
style={{fill:"#000000"}}
id="ribotext">Riboswitch</tspan></tspan></text>
+ </ScrollLinkWithChild>
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 714.57654,286.73782 C 603.08853,373.95263 603.08853,373.95263 603.08853,373.95263"
@@ -741,7 +745,7 @@ export function Complex(){
id="stemlooptext"><tspan
style={{fill:"#000000"}}
id="stemlooptext">Stem Loop</tspan></tspan></text>
- <Link className="btn village-style-button" role="button" to="/engineering/#RNAbindingprotein">
+ <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
@@ -754,9 +758,10 @@ export function Complex(){
x="24.838236"
y="669.81539"
id="tspan8">protein</tspan></text>
- </Link>
+ </a>
{/* pegRNA Text */}
+ <a onClick={() => goToPagesAndOpenTab('tab-pegrna', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial", whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
@@ -768,9 +773,11 @@ export function Complex(){
id="pegrnatext"><tspan
style={{fill:"#000000"}}
id="pegrnatext">pegRNA</tspan></tspan></text>
+ </a>
<g
id="g1"
transform="translate(845.89947,114.11378)">
+ <a onClick={() => goToPagesAndOpenTab('tab-nikase', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
@@ -781,6 +788,7 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="tspan11">Nikase</tspan></text>
+ </a>
</g>
<text
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 8ca219d1d196265d5494b461d7723a404af84feb..549f23a11202bdb57802382449cbef433427b852 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -150,7 +150,7 @@ export function Description() {
<section id="Approach" className="section">
<H2 text="Approach"></H2>
<p>To correct the mutation, we are utilizing Prime Editing technologies. Prime Editing is a genome editing technique that allows precise DNA modifications without causing double-strand breaks<SupScrollLink label="2"/>. Structurally, the Prime Editing complex consists of a Cas9 endonuclease fused to a reverse transcriptase (RT) and guided by a pegRNA, which directs the complex to the target site in the genome. </p>
- <InfoBox title="Prime Editing">
+ <InfoBox title="Prime Editing" id="prime-editing">
<details>
<summary>Prime editing is a new method of gene editing based on an RNA-Protein complex. It was developed by a group of researchers revolving around Professor David Liu from Harvard University in 2019. <SupScrollLink label="9"/></summary>
<p>Details</p>
@@ -166,7 +166,7 @@ export function Description() {
</div>
<Collapsible id="fanzorcas-collapsible" title="Cas vs. Fanzor"> child </Collapsible>
<p>The pegRNA is optimized via an extension by a stem loop, which stabilizes the RNA by protecting it from RNases and serves as a binding site for the MCP, which also supports the secondary RNA structure. Additionally, the pegRNA contains a riboswitch, a sodium ion-controlled regulator that switches off the complex. This represents a major biosafety feature in that the complex is switched off after successful DNA editing and the subsequent increased influx of chloride ions into the cell. The pegRNA is combined with an optimized sgRNA resulting in higher on-target effect. Overall, its optimization leads to a longer shelf life and an increase in the biosafety of the complex. </p>
- <InfoBox title="Riboswitch">
+ <InfoBox title="Riboswitch" id="riboswitch">
About the Riboswitch
</InfoBox>
</section>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 11684e642da567e9f8791864a1be698694d31706..78fe809f2dd145210b52da59a6feb98568d7187b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,4 @@
export * from "./getPathMapping";
export * from "./stringToSlug";
export * from "./useScript";
+export * from "./useNavigation"
\ No newline at end of file