links in svg

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>

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

src/components/svgs.tsx

-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
      

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>

src/utils/index.ts

 export * from "./getPathMapping";
 export * from "./stringToSlug";
 export * from "./useScript"; 
+export * from "./useNavigation"
\ No newline at end of file