Go cam viz

package.json

@@ -41,7 +41,7 @@
       "global": {
         "lines": 78,
         "statements": 78,
-        "functions": 76,
+        "functions": 75.28,
         "branches": 66,
         "branchesTrue": 100
       }
@@ -105,6 +105,7 @@
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@floating-ui/dom": "1.6.5",
+    "@geneontology/wc-gocam-viz": "1.1.1",
     "@lit/react": "1.0.5",
     "@nightingale-elements/nightingale-filter": "5.3.2",
     "@nightingale-elements/nightingale-manager": "5.3.2",

src/shared/config/externalUrls.ts

@@ -24,6 +24,15 @@ const externalUrls = {
     `https://www.ebi.ac.uk/intact/complex-ws/export/${id}`,
   ComplexPortal: (id: string) =>
     `https://www.ebi.ac.uk/complexportal/complex/${id}`,
+  // GO-CAM
+  GeneOntologyModels: (id: string) =>
+    `https://api.geneontology.org/api/gp/UniProtKB:${id}/models`,
+  GeneOntologyModelInfo: (id: string) =>
+    `https://api.geneontology.org/api/go-cam/gomodel:${id}`,
+  GeneOntologyUniprotCuratedModels:
+    'https://geneontology.cloud/browse/g:UniProt',
+  NoctuaAlliancePathwayPreview: (id: string) =>
+    `http://noctua.geneontology.org/workbench/noctua-alliance-pathway-preview/?model_id=${id}`,
   // rule
   HAMAPRule: (id: string | number) => `//hamap.expasy.org/unirule/${id}`,
   ProRule: (id: string | number) => `//prosite.expasy.org/unirule/${id}`,

src/types/wc-gocam-viz.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '@geneontology/wc-gocam-viz';
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'wc-gocam-viz': any;
+  }
+}

src/uniprotkb/components/entry/FunctionSection.tsx

@@ -1,9 +1,8 @@
 import { lazy, Suspense, Fragment, memo } from 'react';
-import { Card, Loader, Message } from 'franklin-sites';
+import { Card, Chip, Loader, Message, Tab, Tabs } from 'franklin-sites';
 import { Link } from 'react-router-dom';
 
 import ErrorBoundary from '../../../shared/components/error-component/ErrorBoundary';
-
 import HTMLHead from '../../../shared/components/HTMLHead';
 import FreeTextView, {
   RichText,
@@ -45,6 +44,8 @@ const GoRibbon = lazy(
   () => import(/* webpackChunkName: "go-ribbon" */ './GoRibbon')
 );
 
+const GoCam = lazy(() => import(/* webpackChunkName: "go-cam" */ './GoCam'));
+
 export const AbsorptionView = ({ data }: { data: Absorption }) => (
   <>
     <section className="text-block">
@@ -366,16 +367,37 @@ const FunctionSection = ({
         features={data.featuresData}
         sequence={sequence}
       />
-      <ErrorBoundary>
-        <Suspense fallback={<Loader />}>
-          <GoRibbon
-            primaryAccession={primaryAccession}
-            goTerms={data.goTerms}
-            geneNamesData={data.geneNamesData}
-            organismData={data.organismData}
-          />
-        </Suspense>
-      </ErrorBoundary>
+      {
+        // If no GO terms then no GO-CAM models. From Antonia Lock:
+        // "I assume that any go cams that we display, would also be integrated in the go releases, otherwise I would question the quality of the model"
+        !!data.goTerms?.size && (
+          <ErrorBoundary>
+            <Tabs>
+              <Tab title="GO annotations">
+                <Suspense fallback={<Loader />}>
+                  <GoRibbon
+                    primaryAccession={primaryAccession}
+                    goTerms={data.goTerms}
+                    geneNamesData={data.geneNamesData}
+                    organismData={data.organismData}
+                  />
+                </Suspense>
+              </Tab>
+              <Tab
+                title={
+                  <>
+                    GO-CAM Models<Chip compact>New</Chip>
+                  </>
+                }
+              >
+                <Suspense fallback={<Loader />}>
+                  <GoCam primaryAccession={primaryAccession} />
+                </Suspense>
+              </Tab>
+            </Tabs>
+          </ErrorBoundary>
+        )
+      }
       <KeywordView keywords={data.keywordData} />
       <XRefView xrefs={data.xrefData} primaryAccession={primaryAccession} />
       <CommunityCuration

src/uniprotkb/components/entry/GoCam.tsx

@@ -0,0 +1,162 @@
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { ExternalLink, Loader } from 'franklin-sites';
+import pMap from 'p-map';
+
+import ErrorHandler from '../../../shared/components/error-pages/ErrorHandler';
+import GoCamViz from '../protein-data-views/GoCamViz';
+
+import { useSmallScreen } from '../../../shared/hooks/useMatchMedia';
+import useDataApi from '../../../shared/hooks/useDataApi';
+
+import fetchData from '../../../shared/utils/fetchData';
+import { heuristic } from '../../../tools/state/utils/heuristic';
+
+import externalUrls from '../../../shared/config/externalUrls';
+
+import { GoCamModelInfo, GoCamModels } from '../../types/goCamTypes';
+
+import styles from './styles/go-cam.module.scss';
+
+const extractGoCamId = (url: string) => {
+  const reGoCamId = /https?:\/\/model\.geneontology\.org\/(?<goCamId>.*)/;
+  const m = url.match(reGoCamId);
+  return m?.groups?.goCamId;
+};
+
+export const getGoCamStructures = (data: GoCamModels[] = []) => {
+  const idToItem = new Map<string, { id: string; label: string }>();
+  for (const d of data) {
+    const id = extractGoCamId(d.gocam);
+    if (id) {
+      idToItem.set(id, {
+        id,
+        label: d.title,
+      });
+    }
+  }
+  return idToItem;
+};
+
+export const isUniprotCurated = (goCamModel: GoCamModelInfo) =>
+  goCamModel?.annotations?.some(
+    ({ key, value }) =>
+      key === 'providedBy' && value === 'https://www.uniprot.org'
+  );
+
+type Props = {
+  primaryAccession: string;
+};
+
+const GoCam = ({ primaryAccession }: Props) => {
+  const isSmallScreen = useSmallScreen();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const allGoCamIdsResponse = useDataApi<GoCamModels[]>(
+    isSmallScreen ? null : externalUrls.GeneOntologyModels(primaryAccession)
+  );
+  const [uniprotGoCamIds, setUniprotGoCamIds] = useState<string[] | null>(null);
+
+  const goCamIdToItem = useMemo(
+    () => getGoCamStructures(allGoCamIdsResponse.data),
+    [allGoCamIdsResponse.data]
+  );
+
+  useEffect(() => {
+    async function fetchGoCamModels() {
+      if (goCamIdToItem.size) {
+        const mapper = (id: string) =>
+          fetchData<GoCamModelInfo>(
+            externalUrls.GeneOntologyModelInfo(id)
+          ).then((response) => ({
+            id,
+            data: response.data,
+          }));
+        const results = await pMap(Array.from(goCamIdToItem.keys()), mapper, {
+          concurrency: heuristic.concurrency,
+        });
+        setUniprotGoCamIds(
+          results
+            .filter(({ data }) => isUniprotCurated(data))
+            .map(({ id }) => id)
+        );
+      }
+    }
+    fetchGoCamModels();
+  }, [goCamIdToItem]);
+
+  useEffect(() => {
+    if (uniprotGoCamIds?.[0]) {
+      setSelectedId(uniprotGoCamIds[0]);
+    }
+  }, [uniprotGoCamIds]);
+
+  let content: ReactNode;
+  const loadingUniprotGoCamIds = goCamIdToItem.size && uniprotGoCamIds === null;
+  if (allGoCamIdsResponse.loading || loadingUniprotGoCamIds) {
+    content = (
+      <>
+        <div className={styles.preamble} data-article-id="gene-ontology">
+          Searching Gene Ontology knowledgebase for GO-CAM models.
+        </div>
+        <Loader />
+      </>
+    );
+  } else if (
+    !goCamIdToItem.size ||
+    (Array.isArray(uniprotGoCamIds) && !uniprotGoCamIds.length)
+  ) {
+    content = (
+      <>
+        <div className={styles.preamble} data-article-id="gene-ontology">
+          UniProt curated GO-CAM models have not been found for this entry
+          within the Gene Ontology knowledgebase.
+        </div>
+        <ExternalLink url={externalUrls.GeneOntologyUniprotCuratedModels}>
+          Browse all available UniProt curated GO-CAM models.
+        </ExternalLink>
+      </>
+    );
+  } else if (allGoCamIdsResponse.error) {
+    content = (
+      <ErrorHandler
+        status={allGoCamIdsResponse.status}
+        error={allGoCamIdsResponse.error}
+        noReload
+      />
+    );
+  } else if (!isSmallScreen && selectedId && !!uniprotGoCamIds?.length) {
+    content = (
+      <>
+        <div className={styles.preamble} data-article-id="gene-ontology">
+          Gene Ontology Causal Activity Models (GO-CAM) associated with this
+          entry.
+        </div>
+        <label>
+          Select GO-CAM model
+          <select
+            value={selectedId}
+            onChange={(e) => setSelectedId(e.target.value)}
+            className={styles['id-select']}
+          >
+            {uniprotGoCamIds.map((id) => (
+              <option value={id} key={id}>
+                {goCamIdToItem.get(id)?.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <GoCamViz id={selectedId} />
+        <ExternalLink
+          url={externalUrls.NoctuaAlliancePathwayPreview(selectedId)}
+        >
+          View in Noctua Alliance Pathway Preview
+        </ExternalLink>
+      </>
+    );
+  }
+
+  return content ? (
+    <div className={styles['go-cam-container']}>{content}</div>
+  ) : null;
+};
+
+export default GoCam;

src/uniprotkb/components/entry/GoRibbon.tsx

@@ -258,7 +258,9 @@ const GoRibbon = ({
 
   return (
     <div className="GoRibbon">
-      <h3 data-article-id="gene_ontology">GO annotations</h3>
+      <div className={styles.preamble} data-article-id="gene-ontology">
+        Gene Ontology (GO) annotations organized by slimming set.
+      </div>
       <div className={styles['quickgo-link']}>
         <ExternalLink url={externalUrls.QuickGOAnnotations(primaryAccession)}>
           Access the complete set of GO annotations on QuickGO{' '}

src/uniprotkb/components/entry/InteractionSection.tsx

@@ -1,6 +1,6 @@
 import { lazy, useMemo, memo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Card, Dropdown } from 'franklin-sites';
+import { Card } from 'franklin-sites';
 
 import { SetRequired } from 'type-fest/source/set-required';
 import ExternalLink from '../../../shared/components/ExternalLink';
@@ -37,15 +37,6 @@ import { Xref } from '../../../shared/types/apiModel';
 
 import styles from './styles/interaction-section.module.scss';
 
-const clickOnDropdown = (element: HTMLElement) => {
-  (
-    element.closest('.dropdown')?.firstElementChild as
-      | HTMLElement
-      | null
-      | undefined
-  )?.click();
-};
-
 const interactionSorter = (a: Interaction, b: Interaction) => {
   // Normalise what we'll sort on
   const aOneComparer = (
@@ -243,9 +234,6 @@ const InteractionSection = ({ data, primaryAccession }: Props) => {
     | undefined;
 
   const complexId = viewerID || Array.from(complexPortalXrefs.keys())[0];
-  const complexName =
-    complexPortalXrefs.get(complexId)?.properties?.EntryName || '';
-  const complexString = `${complexId} ${complexName}`;
 
   return (
     <Card
@@ -283,35 +271,24 @@ const InteractionSection = ({ data, primaryAccession }: Props) => {
       {complexPortalXrefs.size > 0 && !isSmallScreen && (
         <>
           <h3 data-article-id="complex_viewer">Complex viewer</h3>
-          <div className={styles['viewer-ids-container']}>
-            <Dropdown
-              // eslint-disable-next-line react/no-unstable-nested-components
-              visibleElement={(onClick: () => unknown) => (
-                <Button variant="primary" onClick={onClick}>
-                  {complexString}
-                </Button>
-              )}
-            >
-              <ul className={styles['ids-list']}>
+          <div>
+            <label>
+              Select complex
+              <select
+                value={complexId}
+                onChange={(e) => setViewerID(e.target.value)}
+                className={styles['id-select']}
+              >
                 {Array.from(complexPortalXrefs.values()).map(
                   ({ id, properties }) => (
-                    <li key={id}>
-                      <Button
-                        variant="tertiary"
-                        key={id}
-                        id={id}
-                        onClick={(event) => {
-                          setViewerID((event.target as HTMLButtonElement).id);
-                          clickOnDropdown(event.target as HTMLButtonElement);
-                        }}
-                      >
-                        {id} {properties?.EntryName || ''}
-                      </Button>
-                    </li>
+                    <option value={id} key={id}>
+                      {`${id} ${properties?.EntryName || ''}`}
+                    </option>
                   )
                 )}
-              </ul>
-            </Dropdown>
+              </select>
+            </label>
+
             <LazyComponent>
               <ComplexViewer complexID={complexId} />
             </LazyComponent>
@@ -325,11 +302,10 @@ const InteractionSection = ({ data, primaryAccession }: Props) => {
             >
               View interactors in UniProtKB
             </Link>
-            <br />
-            <ExternalLink url={externalUrls.ComplexPortal(complexId)}>
-              View {complexId} in Complex Portal
-            </ExternalLink>
           </div>
+          <ExternalLink url={externalUrls.ComplexPortal(complexId)}>
+            View {complexId} in Complex Portal
+          </ExternalLink>
         </>
       )}
       <XRefView xrefs={data.xrefData} primaryAccession={primaryAccession} />