fixed the links and geneontology/go-site#2430

pantherdb · Feb 4, 2025 · ee47ea9 · ee47ea9
1 parent b695a0e
commit ee47ea9
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 21 deletions.
diff --git a/site-react/src/@pango.core/data/constants.ts b/site-react/src/@pango.core/data/constants.ts
@@ -11,4 +11,4 @@ export const ENVIRONMENT = {
   uniprotUrl: 'https://www.uniprot.org/uniprotkb/',
   agrPrefixUrl: 'https://www.alliancegenome.org/gene/',
   hgncPrefixUrl: 'https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/'
-};
+};
diff --git a/site-react/src/@pango.core/services/linksService.ts b/site-react/src/@pango.core/services/linksService.ts
@@ -0,0 +1,48 @@
+import type { Annotation } from "@/features/annotations/models/annotation";
+import { ENVIRONMENT } from "../data/constants";
+import type { Gene } from "@/features/genes/models/gene";
+
+export const getHGNC = (longId: string): string | null => {
+
+  const pattern = /HGNC=(\d+)/;
+  const matches = longId.match(pattern);
+
+  if (matches && matches.length > 1) {
+    return `HGNC:${matches[1]}`;
+  }
+
+  return null;
+
+}
+
+export const getUniprotLink = (gene: string) => {
+  if (!gene) return ENVIRONMENT.uniprotUrl;
+
+  const geneId = gene.split(':');
+  return geneId.length > 1 ? `${ENVIRONMENT.uniprotUrl}${geneId[1]}` : ENVIRONMENT.uniprotUrl;
+};
+
+export const getFamilyLink = (element: Annotation) => {
+  if (!element.pantherFamily || !element.longId) return ENVIRONMENT.pantherFamilyUrl;
+
+  return `${ENVIRONMENT.pantherFamilyUrl}book=${encodeURIComponent(element.pantherFamily)}&seq=${encodeURIComponent(element.longId)}`;
+};
+
+export const getUCSCBrowserLink = (annotation: Annotation | Gene) => {
+  if (!annotation.coordinatesChrNum || !annotation.coordinatesStart || !annotation.coordinatesEnd) return ENVIRONMENT.ucscUrl;
+
+  return `${ENVIRONMENT.ucscUrl}${annotation.coordinatesChrNum}:${annotation.coordinatesStart}-${annotation.coordinatesEnd}`;
+};
+
+export const getAGRLink = (hgncId: string) => {
+  if (!hgncId) return ENVIRONMENT.agrPrefixUrl;
+
+  return ENVIRONMENT.agrPrefixUrl + hgncId;
+}
+
+export const getHGNCLink = (hgncId: string) => {
+  if (!hgncId) return ENVIRONMENT.hgncPrefixUrl;
+
+  return ENVIRONMENT.hgncPrefixUrl + hgncId;
+}
+
diff --git a/site-react/src/app/Gene.tsx b/site-react/src/app/Gene.tsx
@@ -1,7 +1,6 @@
 import { setLeftDrawerOpen } from '@/@pango.core/components/drawer/drawerSlice';
 import { ENVIRONMENT } from '@/@pango.core/data/constants';
 import AnnotationTable from '@/features/annotations/components/AnnotationTable';
-import type { Annotation } from '@/features/annotations/models/annotation';
 import { useGetAnnotationsQuery } from '@/features/annotations/slices/annotationsApiSlice';
 import GeneSummary from '@/features/genes/components/GeneSummary';
 import { transformTerms } from '@/features/genes/services/genesService';
@@ -11,6 +10,7 @@ import { useParams } from 'react-router-dom';
 import { useAppDispatch } from './hooks';
 import { TermType } from '@/features/terms/models/term';
 import { ASPECT_ORDER } from '@/@pango.core/data/config';
+import { getAGRLink, getFamilyLink, getHGNC, getHGNCLink, getUCSCBrowserLink, getUniprotLink } from '@/@pango.core/services/linksService';
 
 
 interface InfoRowProps {
@@ -78,6 +78,7 @@ const Gene: React.FC = () => {
   });
 
   const annotation = annotations && annotations.length > 0 ? annotations[0] : null;
+  const hgncId = getHGNC(annotation?.longId || '');
 
   if (!annotation) {
     return <div className="p-4">Loading...</div>;
@@ -88,14 +89,7 @@ const Gene: React.FC = () => {
 
   const groupedTerms = transformTerms(annotations, 100);
 
-  const getUniprotLink = (gene: string) => {
-    const geneId = gene.split(':');
-    return geneId.length > 1 ? `${ENVIRONMENT.uniprotUrl}${geneId[1]}` : gene;
-  };
 
-  const getFamilyLink = (element: Annotation) => {
-    return `${ENVIRONMENT.pantherFamilyUrl}book=${encodeURIComponent(element.pantherFamily)}&seq=${encodeURIComponent(element.longId)}`;
-  };
 
   return (
     <div className="w-full bg-slate-200">
@@ -118,6 +112,8 @@ const Gene: React.FC = () => {
                   value={annotation.gene}
                   href={`${ENVIRONMENT.amigoGPUrl}${annotation.gene}`}
                 />
+
+
               </div>
             </div>
 
@@ -135,13 +131,29 @@ const Gene: React.FC = () => {
                   value={annotation.pantherFamily}
                   href={getFamilyLink(annotation)}
                 />
-                {annotation.coordinatesChrNum &&
+                {annotation.coordinatesChrNum && (
                   <InfoRow
                     label="UCSC Genome Browser"
                     value={`chr${annotation.coordinatesChrNum}:${annotation.coordinatesStart}-${annotation.coordinatesEnd}`}
-                    href={`${ENVIRONMENT.ucscUrl}${annotation.coordinatesChrNum}:${annotation.coordinatesStart}-${annotation.coordinatesEnd}`}
+                    href={getUCSCBrowserLink(annotation)}
                   />
-                }
+
+                )}
+
+                {hgncId && (
+                  <>
+                    <InfoRow
+                      label="Alliance of Genome Resources"
+                      value={hgncId}
+                      href={getAGRLink(hgncId)}
+                    />
+                    <InfoRow
+                      label="HUGO Gene Nomenclature Committee"
+                      value={hgncId}
+                      href={getHGNCLink(hgncId)}
+                    />
+                  </>
+                )}
               </div>
             </div>
           </div>

diff --git a/site-react/src/features/genes/components/Genes.tsx b/site-react/src/features/genes/components/Genes.tsx
@@ -3,14 +3,14 @@ import { TablePagination, CircularProgress, Tooltip } from '@mui/material';
 import { FaCaretRight, FaCaretDown } from 'react-icons/fa';
 import { setPage, setPageSize } from '@/features/search/searchSlice';
 import { useMemo, useState } from 'react';
-import { ENVIRONMENT } from '@/@pango.core/data/constants';
 import { useAppSelector, useAppDispatch } from '@/app/hooks';
 import type { Gene } from '../models/gene';
 import { useGetGenesQuery, useGetGenesCountQuery } from '../slices/genesApiSlice';
 import type { RootState } from '@/app/store/store';
 import Terms from '@/features/terms/components/Terms';
 import { VersionedLink } from '@/shared/components/VersionedLink';
 import { ANNOTATION_COLS } from '@/@pango.core/data/config';
+import { getUniprotLink, getUCSCBrowserLink } from '@/@pango.core/services/linksService';
 
 interface GenesProps {
   page?: number;
@@ -29,7 +29,7 @@ const Genes: React.FC<GenesProps> = () => {
   }), [search.genes, search.slimTerms]);
 
   const { data: geneData, isLoading, error } = useGetGenesQuery({ page, size, filter });
-  const { data: countData, isLoading: geneCountLoading } = useGetGenesCountQuery({ filter });
+  const { data: countData } = useGetGenesCountQuery({ filter });
 
   const genes = geneData?.genes ?? [];
   const geneCount = countData?.total || 0;
@@ -42,11 +42,6 @@ const Genes: React.FC<GenesProps> = () => {
     }));
   };
 
-  const getUniprotLink = (gene: Gene) => {
-    const geneId = gene.gene?.split(':');
-    return geneId.length > 1 ? `${ENVIRONMENT.uniprotUrl}${geneId[1]}` : gene.gene;
-  };
-
   const handlePageChange = (_: unknown, newPage: number) => {
     dispatch(setPage(newPage));
     window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -105,11 +100,11 @@ const Genes: React.FC<GenesProps> = () => {
                       </div>
                       <div className="text-gray-600">{gene.geneName}</div>
                       <div className="">
-                        <a href={getUniprotLink(gene)} target="_blank" rel="noopener noreferrer">{gene.gene}</a>
+                        <a href={getUniprotLink(gene.gene)} target="_blank" rel="noopener noreferrer">{gene.gene}</a>
                       </div>
                       {gene.coordinatesChrNum && (
                         <div className="inline-block px-2 py-0.5 bg-purple-800 text-sm">
-                          <a className="text-accent-500" href={`${ENVIRONMENT.ucscUrl}${gene.coordinatesChrNum}:${gene.coordinatesStart}-${gene.coordinatesEnd}`}
+                          <a className="text-accent-500" href={getUCSCBrowserLink(gene)}
                             target="_blank"
                             rel="noopener noreferrer">
                             chr{gene.coordinatesChrNum}:{gene.coordinatesStart}-{gene.coordinatesEnd}