From a50f0de8511abbb531009c1a5a5f32d8214cf311 Mon Sep 17 00:00:00 2001
From: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com>
Date: Wed, 7 Feb 2024 11:09:10 +0000
Subject: [PATCH] Add pdbCode to Moorhen visualizer link

Added a pdbCode property to various interfaces and components in the webapp to enhance the link to the Moorhen visualizer tool. If the pdbCode is present, it is appended to the Moorhen URL to directly visualize that particular structure, improving user experience.
---
 webapp/src/interfaces/types.ts                    |  1 +
 webapp/src/main/GlycanDetail/GlycanDetail.tsx     |  1 +
 .../main/GlycanDetail/GlycanDetailMoorhenView.tsx | 15 ++++++++++++++-
 webapp/src/main/PrivateerDisplay/SNFG.tsx         |  1 +
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/webapp/src/interfaces/types.ts b/webapp/src/interfaces/types.ts
index dc1bb6ae..c6ae16d2 100644
--- a/webapp/src/interfaces/types.ts
+++ b/webapp/src/interfaces/types.ts
@@ -85,6 +85,7 @@ export interface GlycanDetailProps {
     controls: any;
     map: any;
     moorhenProps: any;
+    pdbCode: string;
 }
 
 export interface NoGlycansProps {
diff --git a/webapp/src/main/GlycanDetail/GlycanDetail.tsx b/webapp/src/main/GlycanDetail/GlycanDetail.tsx
index 39fc8532..2a435c9b 100644
--- a/webapp/src/main/GlycanDetail/GlycanDetail.tsx
+++ b/webapp/src/main/GlycanDetail/GlycanDetail.tsx
@@ -183,6 +183,7 @@ export default function GlycanDetail(props: GlycanDetailProps) {
                             return [width, height];
                         }}
                         toggleGlycoblocks={toggleGlycoBlocks}
+                        pdbCode={props.pdbCode}
                     />
                 </div>
                 <div
diff --git a/webapp/src/main/GlycanDetail/GlycanDetailMoorhenView.tsx b/webapp/src/main/GlycanDetail/GlycanDetailMoorhenView.tsx
index 39cff7a2..6637afc9 100644
--- a/webapp/src/main/GlycanDetail/GlycanDetailMoorhenView.tsx
+++ b/webapp/src/main/GlycanDetail/GlycanDetailMoorhenView.tsx
@@ -10,6 +10,7 @@ export function GlycanDetailMoorhenView(props: {
     moorhenDimensions: () => [number, number];
     mapContour: number;
     toggleGlycoblocks: () => any;
+    pdbCode: string;
 }) {
     const size = Math.min(800, 0.9 * window.innerWidth);
     const [dimensions, setDimensions] = useState<Record<string, number>>(
@@ -44,7 +45,19 @@ export function GlycanDetailMoorhenView(props: {
         <div key={props.key} className="px-8 flex flex-col items-center">
             <h3 className="text-left text-xl w-full font-bold mt-2">
                 Visualise with <i>Moorhen</i>{' '}
-                <a href="https://moorhen.org" title="Go to Moorhen.org">
+
+                <a href={props.pdbCode !== "" ? `https://moorhen.org/pdb/${props.pdbCode}` : "https://moorhen.org"}
+                   title="Go to Moorhen.org"
+                    onClick={(e) => {e.stopPropagation()}}
+                   onTouchStart={(e) => {
+                       e.stopPropagation();
+                   }}
+                   onMouseDown={(e) => {
+                       e.stopPropagation();
+                   }}
+                   target="_blank"
+                   rel="noopener noreferrer"
+                >
                     <img className="inline h-8" src="./moorhen_logo.png"></img>
                 </a>
             </h3>
diff --git a/webapp/src/main/PrivateerDisplay/SNFG.tsx b/webapp/src/main/PrivateerDisplay/SNFG.tsx
index ac4d68b4..57dde424 100644
--- a/webapp/src/main/PrivateerDisplay/SNFG.tsx
+++ b/webapp/src/main/PrivateerDisplay/SNFG.tsx
@@ -220,6 +220,7 @@ export default function SNFG(props: SNFGProps): ReactElement {
         controls,
         map,
         moorhenProps: collectedProps,
+        pdbCode: props.PDBCode
     };
 
     const svgTableProps = {