Merge pull request #687 from ProteinsWebTeam/clan_wikipedia

Wikipedia links for clans

src/components/EBIFooter/__snapshots__/test.js.snap

@@ -366,7 +366,7 @@ exports[`<EBIFooter /> should render 1`] = `
         className="vf-footer__legal-text"
       >
         Copyright © EMBL 
-        2024
+        2025
       </span>
        
       <span

src/components/Protein/Summary/index.tsx

@@ -77,7 +77,7 @@ const FamilyHierarchy = ({
 
 type Props = {
   data: {
-    metadata: ProteinMetadata;
+    metadata: ProteinMetadata & { name?: NameObject };
   };
   loading: boolean;
   isoform?: string;

src/components/Related/DomainsOnProtein/DomainsOnProteinLoaded/index.tsx

@@ -73,10 +73,14 @@ function getBoundaries(item: ExtendedFeature | ExtendedFeature[]) {
   let accession = undefined;
 
   if (Array.isArray(item)) {
-    fragment = item[0].entry_protein_locations?.[0].fragments?.[0];
+    if (item[0].entry_protein_locations)
+      fragment = item[0].entry_protein_locations?.[0].fragments?.[0];
+    else fragment = item[0].locations?.[0].fragments?.[0];
     accession = item[0].accession;
   } else {
-    fragment = item.entry_protein_locations?.[0].fragments?.[0];
+    if (item.entry_protein_locations)
+      fragment = item.entry_protein_locations?.[0].fragments?.[0];
+    else fragment = item.locations?.[0].fragments?.[0];
     accession = item.accession;
   }
   if (fragment && accession) {
@@ -383,21 +387,26 @@ const DomainsOnProteinLoaded = ({
   if (dataMerged.family) dataMerged.families = dataMerged.family.slice();
 
   const renamedTracks = ['domain', 'family', 'residues'];
-  const sortedData = flattenTracksObject(dataMerged).filter(
+  const flattenedData = flattenTracksObject(dataMerged).filter(
     (track) => !renamedTracks.includes(track[0]),
   );
 
   let mainTracks: string[] = [];
   let hideCategories: Record<string, boolean> = {};
 
+  // Protein Viewer data for InterProScan Search Results needs to be handled differently
   if (protein.accession.startsWith('iprscan')) {
-    const homologous_superfamily = sortedData.filter(
+    const homologous_superfamily = flattenedData.filter(
       (entry) => entry[0] == 'homologous superfamily',
     )[0];
-    const representative_domains = sortedData.filter(
+    const representative_domains = flattenedData.filter(
       (entry) => entry[0] == 'representative domains',
     )[0];
 
+    const representative_families = flattenedData.filter(
+      (entry) => entry[0] == 'representative families',
+    )[0];
+
     if (representative_domains) {
       representative_domains[1].map((domain) => {
         if (typeof domain === 'object' && domain !== null) {
@@ -406,7 +415,17 @@ const DomainsOnProteinLoaded = ({
       });
     }
 
-    sortedData.map((entry) => {
+    console.log(representative_families);
+
+    if (representative_families) {
+      representative_families[1].map((family) => {
+        if (typeof family === 'object' && family !== null) {
+          (family as { representative?: boolean })['representative'] = true;
+        }
+      });
+    }
+
+    flattenedData.map((entry) => {
       if (entry[0] === 'domains') {
         if (homologous_superfamily) {
           entry[1] = entry[1].concat(homologous_superfamily[1]);
@@ -416,8 +435,14 @@ const DomainsOnProteinLoaded = ({
           entry[1] = entry[1].concat(representative_domains[1]);
         }
       }
+
+      if (entry[0] === 'homologous superfamily') {
+        entry[1] = [];
+      }
     });
 
+    // Remove sections
+
     mainTracks = [
       'alphafold confidence',
       'families',
@@ -447,9 +472,11 @@ const DomainsOnProteinLoaded = ({
       funfam: false,
     };
 
-    sortedData.map((entry) => {
+    flattenedData.map((entry) => {
       (entry[1] as ExtendedFeature[]).sort(sortTracks).flat();
     });
+
+    console.log(flattenedData);
   } else {
     mainTracks = [
       'alphafold confidence',
@@ -481,7 +508,7 @@ const DomainsOnProteinLoaded = ({
   return (
     <ProteinViewer
       protein={protein}
-      data={sortedData}
+      data={flattenedData}
       title={title}
       show
       ervationButton={showConservationButton}

src/components/Related/DomainsOnProtein/index.tsx

@@ -53,8 +53,58 @@ export const groupByEntryType = (
   return groups;
 };
 
+export const getFeature = (
+  filter: string | string[],
+  mergedData: ProteinViewerDataObject,
+): ExtendedFeature[] => {
+  if (mergedData['other_features']) {
+    return (mergedData['other_features'] as ExtendedFeature[]).filter(
+      (entry) => {
+        const entryDB = entry.source_database;
+        if (entryDB) {
+          if (Array.isArray(filter))
+            return filter.some((item) => entryDB.includes(item));
+          else return filter.includes(entryDB);
+        }
+      },
+    );
+  }
+  return [];
+};
+
+export const filterMobiDBLiteFeatures = (
+  mergedData: ProteinViewerDataObject,
+): ExtendedFeature[] => {
+  const mobiDBLiteEntries: ExtendedFeature[] = (
+    mergedData['other_features'] as ExtendedFeature[]
+  ).filter((k) =>
+    (k as ExtendedFeature).accession.toLowerCase().includes('mobidblt'),
+  );
+
+  const mobiDBLiteConsensusWithChildren: ExtendedFeature[] =
+    mobiDBLiteEntries.filter((entry) =>
+      entry.accession.toLowerCase().includes('consensus'),
+    );
+  const mobiDBLiteChildren: ExtendedFeature[] = mobiDBLiteEntries.filter(
+    (entry) => !entry.accession.toLowerCase().includes('consensus'),
+  );
+
+  if (mobiDBLiteConsensusWithChildren.length > 0) {
+    mobiDBLiteChildren.map((child) => {
+      child.protein = child.accession;
+    });
+    mobiDBLiteConsensusWithChildren[0].children = mobiDBLiteChildren;
+  }
+
+  return mobiDBLiteConsensusWithChildren;
+};
+
 type Props = PropsWithChildren<{
-  mainData: { metadata: ProteinMetadata };
+  mainData: {
+    metadata:
+      | ProteinMetadata
+      | (MinimalProteinMetadata & { name?: NameObject });
+  };
   onMatchesLoaded?: (
     results: EndpointWithMatchesPayload<EntryMetadata, MatchI>[],
   ) => void;
@@ -172,50 +222,6 @@ const DomainOnProteinWithoutData = ({
     mergeResidues(mergedData, dataResidues.payload);
   }
 
-  const getFeature = (
-    filter: string | string[],
-    mergedData: ProteinViewerDataObject,
-  ): ExtendedFeature[] => {
-    if (mergedData['other_features']) {
-      return (mergedData['other_features'] as ExtendedFeature[]).filter(
-        (entry) => {
-          const entryDB = entry.source_database;
-          if (entryDB) {
-            if (Array.isArray(filter))
-              return filter.some((item) => entryDB.includes(item));
-            else return filter.includes(entryDB);
-          }
-        },
-      );
-    }
-    return [];
-  };
-
-  const filterMobiDBLiteFeatures = (
-    mergedData: ProteinViewerDataObject,
-  ): ExtendedFeature[] => {
-    const mobiDBLiteEntries: ExtendedFeature[] = (
-      mergedData['other_features'] as ExtendedFeature[]
-    ).filter((k) => (k as ExtendedFeature).accession.includes('Mobidblt'));
-
-    const mobiDBLiteConsensusWithChildren: ExtendedFeature[] =
-      mobiDBLiteEntries.filter((entry) =>
-        entry.accession.includes('Consensus'),
-      );
-    const mobiDBLiteChildren: ExtendedFeature[] = mobiDBLiteEntries.filter(
-      (entry) => !entry.accession.includes('Consensus'),
-    );
-
-    if (mobiDBLiteConsensusWithChildren.length > 0) {
-      mobiDBLiteChildren.map((child) => {
-        child.protein = child.accession;
-      });
-      mobiDBLiteConsensusWithChildren[0].children = mobiDBLiteChildren;
-    }
-
-    return mobiDBLiteConsensusWithChildren;
-  };
-
   if (dataFeatures && !dataFeatures.loading && dataFeatures.payload) {
     mergeExtraFeatures(mergedData, dataFeatures?.payload);
     mergedData['intrinsically_disordered_regions'] = filterMobiDBLiteFeatures(

src/components/Set/Summary/index.tsx

@@ -5,11 +5,13 @@ import Description from 'components/Description';
 import BaseLink from 'components/ExtLink/BaseLink';
 import { setDBs } from 'utils/processDescription/handlers';
 import Literature from 'components/Entry/Literature';
+import Tabs from 'components/Tabs';
 
 import loadable from 'higherOrder/loadable';
 import config from 'config';
 import descriptionToPath from 'utils/processDescription/descriptionToPath';
 import ClanViewer from '../ClanViewer';
+import Wikipedia from 'components/Entry/Summary/Wikipedia';
 
 import cssBinder from 'styles/cssBinder';
 
@@ -124,6 +126,7 @@ const SummarySet = ({ data, loading }: Props) => {
             nodes: [],
             links: [],
           },
+          wikipedia: [],
         }
       : data.metadata;
   let currentSet = null;
@@ -135,6 +138,9 @@ const SummarySet = ({ data, loading }: Props) => {
       metadata.description = metadata.name.name;
   }
 
+  const hasWiki =
+    metadata.source_database === 'pfam' && !!metadata.wikipedia?.length;
+
   return (
     <div className={css('vf-stack', 'vf-stack--400')}>
       {metadata.relationships &&
@@ -191,7 +197,24 @@ const SummarySet = ({ data, loading }: Props) => {
         description={metadata?.description}
       />
       <SetLiterature literature={metadata?.literature} />
+      {hasWiki && (
+        <section>
+          <h4>Wikipedia</h4>
+          <Tabs>
+            {(metadata.wikipedia || []).map((wiki, key) => (
+              <div key={key} title={wiki.title.replaceAll('_', ' ')}>
+                <Wikipedia
+                  title={wiki.title}
+                  extract={wiki.extract}
+                  thumbnail={wiki.thumbnail}
+                />
+              </div>
+            ))}
+          </Tabs>
+        </section>
+      )}
       <div className={css('vf-stack', 'vf-stack-400')}>
+        <h4> Clan Viewer </h4>
         <ClanViewer data={data} loading={loading} />
       </div>
     </div>

src/types/interpro-payloads.d.ts

@@ -259,6 +259,7 @@ interface SetMetadata extends Omit<Metadata, 'description'> {
   };
   authors: Array<string> | null;
   literature: Array<Reference>;
+  wikipedia: Array<WikipediaEntry>;
 }
 
 type ProtVistaFragment = {