Merge pull request #89 from glycojones/update-moorhen-link

Add pdbCode to Moorhen visualizer link
glycojones · Feb 7, 2024 · 112bce2 · 112bce2
2 parents e4e6abc + a50f0de
commit 112bce2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -220,6 +220,7 @@ export default function SNFG(props: SNFGProps): ReactElement {
         controls,
         map,
         moorhenProps: collectedProps,
+        pdbCode: props.PDBCode
     };
 
     const svgTableProps = {
-Original file line number
+Diff line change
@@ Expand Up @@
                                 return [width, height];
                             }}
                             toggleGlycoblocks={toggleGlycoBlocks}
+                            pdbCode={props.pdbCode}
                         />
                     </div>
                     <div
@@ Expand Down @@