From c5d67c3d8ef95a3ac1b0e892d9b80804810555db Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Sat, 24 Aug 2024 21:06:33 +0200
Subject: [PATCH] links in svg
---
src/components/Boxes.tsx | 4 ++--
src/components/goto.tsx | 18 ++++++++++++++++++
src/components/svgs.tsx | 14 +++++++++++---
src/contents/description.tsx | 4 ++--
src/utils/index.ts | 1 +
5 files changed, 34 insertions(+), 7 deletions(-)
diff --git a/src/components/Boxes.tsx b/src/components/Boxes.tsx
index 274144b3..986cc72e 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 9b7a26dc..ffcaaa39 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 e03fd009..f2e7ef8d 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 8ca219d1..549f23a1 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 11684e64..78fe809f 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
--
GitLab