Go cam viz

package.json

@@ -98,6 +98,7 @@
     "string-width": "4.1.0"
   },
   "dependencies": {
+    "@geneontology/wc-gocam-viz": "1.0.1-beta.2",
     "@hello-pangea/dnd": "17.0.0",
     "@lit/react": "1.0.5",
     "@nightingale-elements/nightingale-msa": "5.0.0",

src/app/components/home-page/styles/non-critical.module.scss

@@ -50,7 +50,9 @@
   & > * {
     position: relative;
 
-    text-shadow: -1px -1px 0 white, 1px 1px 0 white;
+    text-shadow:
+      -1px -1px 0 white,
+      1px 1px 0 white;
   }
 
   & img {

src/shared/config/externalUrls.ts

@@ -24,6 +24,8 @@ const externalUrls = {
     `https://www.ebi.ac.uk/intact/complex-ws/export/${id}`,
   ComplexPortal: (id: string) =>
     `https://www.ebi.ac.uk/complexportal/complex/${id}`,
+  GeneOntologyModels: (id: string) =>
+    `https://api.geneontology.org/api/gp/UniProtKB:${id}/models`,
   // rule
   HAMAPRule: (id: string | number) => `//hamap.expasy.org/unirule/${id}`,
   ProRule: (id: string | number) => `//prosite.expasy.org/unirule/${id}`,
@@ -73,6 +75,8 @@ const externalUrls = {
     `https://www.ebi.ac.uk/chebi/searchId.do?chebiId=${id}`,
   EspacenetPatent: (id: string | number) =>
     `https://worldwide.espacenet.com/textdoc?DB=EPODOC&IDX=${id}`,
+  NoctuaAlliancePathwayPreview: (id: string) =>
+    `http://noctua.geneontology.org/workbench/noctua-alliance-pathway-preview/?model_id=${id}`,
 };
 
 export const getIntActQueryUrl = (

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/uniparc/config/UniParcXRefsColumnConfiguration.tsx

@@ -260,17 +260,16 @@ UniParcXRefsColumnConfiguration.set(UniParcXRefsColumn.lastSeen, {
 });
 
 const getTimelineColumn =
-  (firstSeen?: string, lastSeen?: string) => (xref: UniParcXRef) =>
-    (
-      <div className={xref.active ? undefined : 'xref-inactive'}>
-        <Timeline
-          first={firstSeen}
-          last={lastSeen}
-          start={xref.created}
-          end={xref.lastUpdated}
-        />
-      </div>
-    );
+  (firstSeen?: string, lastSeen?: string) => (xref: UniParcXRef) => (
+    <div className={xref.active ? undefined : 'xref-inactive'}>
+      <Timeline
+        first={firstSeen}
+        last={lastSeen}
+        start={xref.created}
+        end={xref.lastUpdated}
+      />
+    </div>
+  );
 
 UniParcXRefsColumnConfiguration.set(UniParcXRefsColumn.timeline, {
   label: 'Timeline',

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, Loader, Message, 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,
@@ -16,6 +15,7 @@ import FeaturesView from '../protein-data-views/UniProtKBFeaturesView';
 import UniProtKBEvidenceTag from '../protein-data-views/UniProtKBEvidenceTag';
 import KineticsTableView from './KineticsTableView';
 import ExternalLink from '../../../shared/components/ExternalLink';
+import GoCam from './GoCam';
 
 import { useSmallScreen } from '../../../shared/hooks/useMatchMedia';
 
@@ -376,6 +376,13 @@ const FunctionSection = ({
           />
         </Suspense>
       </ErrorBoundary>
+      <ErrorBoundary>
+        <Tabs>
+          <Suspense fallback={<Loader />}>
+            <GoCam primaryAccession={primaryAccession} />
+          </Suspense>
+        </Tabs>
+      </ErrorBoundary>
       <KeywordView keywords={data.keywordData} />
       <XRefView xrefs={data.xrefData} primaryAccession={primaryAccession} />
       <CommunityCuration

src/uniprotkb/components/entry/GoCam.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ExternalLink, Loader, Tab, Tabs, TreeSelect } from 'franklin-sites';
+
+import GoCamViz from '../protein-data-views/GoCamViz';
+import ErrorHandler from '../../../shared/components/error-pages/ErrorHandler';
+import LazyComponent from '../../../shared/components/LazyComponent';
+
+import { useSmallScreen } from '../../../shared/hooks/useMatchMedia';
+import useDataApi from '../../../shared/hooks/useDataApi';
+
+import externalUrls from '../../../shared/config/externalUrls';
+
+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;
+};
+
+const getGoCamStructures = (
+  data: GoCamModel[] = []
+): [string[], { id: string; label: string }[]] => {
+  const ids = [];
+  const items = [];
+  for (const d of data) {
+    const goCamId = extractGoCamId(d.gocam);
+    if (goCamId) {
+      ids.push(goCamId);
+      items.push({
+        id: goCamId,
+        label: d.title,
+      });
+    }
+  }
+  return [ids, items];
+};
+
+export type GoCamModel = {
+  gocam: string;
+  title: string;
+};
+
+type Props = {
+  primaryAccession: string;
+};
+
+const GoCam = ({ primaryAccession }: Props) => {
+  const isSmallScreen = useSmallScreen();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const { data, loading, error, status } = useDataApi<GoCamModel[]>(
+    isSmallScreen ? null : externalUrls.GeneOntologyModels(primaryAccession)
+  );
+
+  const [goCamIds, goCamItems] = useMemo(
+    () => getGoCamStructures(data),
+    [data]
+  );
+
+  useEffect(() => {
+    if (goCamIds?.[0]) {
+      setSelectedId(goCamIds[0]);
+    }
+  }, [goCamIds]);
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return <ErrorHandler status={status} error={error} noReload />;
+  }
+
+  if (isSmallScreen || !goCamIds.length || !selectedId) {
+    return null;
+  }
+
+  return (
+    <Tabs>
+      <Tab title="GO-CAM">
+        <div className={styles['go-cam-container']}>
+          <TreeSelect
+            data={goCamItems}
+            label="Select GO-CAM model"
+            onSelect={(item) => {
+              setSelectedId(item.id);
+            }}
+            defaultActiveNodes={[selectedId]}
+          />
+          <LazyComponent>
+            <GoCamViz id={selectedId} />
+          </LazyComponent>
+          <ExternalLink
+            url={externalUrls.NoctuaAlliancePathwayPreview(selectedId)}
+          >
+            View in Noctua Alliance Pathway Preview
+          </ExternalLink>
+        </div>
+      </Tab>
+    </Tabs>
+  );
+};
+
+export default GoCam;

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, Tab, Tabs } from 'franklin-sites';
+import { Card, Tab, Tabs, TreeSelect } from 'franklin-sites';
 
 import { SetRequired } from 'type-fest/source/set-required';
 import ExternalLink from '../../../shared/components/ExternalLink';
@@ -35,15 +35,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 = (
@@ -288,38 +279,19 @@ const InteractionSection = ({ data, primaryAccession }: Props) => {
           {complexPortalXrefs.size ? (
             <Tab cache title="Complex viewer">
               <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>
+                <TreeSelect
+                  label={complexString}
+                  onSelect={(item) => {
+                    setViewerID(item.id);
+                  }}
+                  defaultActiveNodes={[complexId]}
+                  data={Array.from(complexPortalXrefs.values()).map(
+                    ({ id, properties }) => ({
+                      id,
+                      label: `${id} ${properties?.EntryName || ''}`,
+                    })
                   )}
-                >
-                  <ul className={styles['ids-list']}>
-                    {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>
-                      )
-                    )}
-                  </ul>
-                </Dropdown>
+                />
                 <LazyComponent>
                   <ComplexViewer complexID={complexId} />
                 </LazyComponent>

src/uniprotkb/components/entry/__tests__/InteractionSection.spec.tsx

@@ -17,9 +17,7 @@ describe('InteractionSection', () => {
       'CPX-1062 Amyloid-beta protein 40/42 complex'
     );
     fireEvent.click(dropdownButton);
-    const selectButton = screen.getByText(/CPX-1069/, {
-      selector: '.button.tertiary',
-    });
+    const selectButton = screen.getByRole('button', { name: /CPX-1069/ });
     fireEvent.click(selectButton, { target: { innerText: 'CPX-1069' } });
     expect(dropdownButton).toHaveTextContent(
       'CPX-1069 Amyloid-beta protein 40 complex'