Merge pull request #467 from ProteinsWebTeam/descriptionFailover

Description failover
ProteinsWebTeam · Apr 6, 2023 · a69a90c · a69a90c
2 parents b6504f3 + 0f749cd
commit a69a90c
Show file tree

Hide file tree

Showing 24 changed files with 245 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -245,7 +245,7 @@
     "utility-types": "3.10.0",
     "webpack": "5.76.1",
     "webpack-cli": "5.0.1",
-    "webpack-dev-server": "4.12.0",
+    "webpack-dev-server": "4.13.2",
     "worker-loader": "3.0.8",
     "yaml-loader": "0.8.0"
   }

diff --git a/src/Root.js b/src/Root.js
@@ -11,8 +11,6 @@ import ErrorBoundary from 'wrappers/ErrorBoundary';
 
 import { schemaProcessInterProCitation } from 'schema_org/processors';
 
-import 'styles/interpro-vf.css';
-
 const STICKY_MENU_OFFSET = 110;
 const DEFAULT_SCHEDULE_DELAY = 1000;
 

diff --git a/src/components/Description/Citations/index.tsx b/src/components/Description/Citations/index.tsx
@@ -12,10 +12,9 @@ export const CITATION_REGEX = '\\[cite:(PUB\\d+)\\](,\\s*)?';
 type Props = {
   text: string;
   literature?: Array<[string, Reference]>;
-  accession: string;
   withoutIDs: boolean;
 };
-const Citations = ({ text, literature = [], withoutIDs, accession }: Props) => (
+const Citations = ({ text, literature = [], withoutIDs }: Props) => (
   <sup>
     [
     {text.split(',').map((cita, i, array) => {
@@ -31,16 +30,8 @@ const Citations = ({ text, literature = [], withoutIDs, accession }: Props) => (
           id={withoutIDs ? null : `description-${refCounter}`}
           className={css('text-high')}
           to={(customLocation) => {
-            const key = customLocation.description.main.key;
             return {
               ...customLocation,
-              description: {
-                main: { key },
-                [key]: {
-                  db: customLocation.description[key].db,
-                  accession,
-                },
-              },
               hash: pubId,
             };
           }}

diff --git a/src/components/Description/DescriptionFromIntegrated/index.tsx b/src/components/Description/DescriptionFromIntegrated/index.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { createSelector } from 'reselect';
+import { format } from 'url';
+
+import loadData from 'higherOrder/loadData/ts';
+import descriptionToPath from 'utils/processDescription/descriptionToPath';
+import Literature, {
+  getLiteratureIdsFromDescription,
+  splitCitations,
+} from 'components/Entry/Literature';
+
+import Tooltip from 'components/SimpleCommonComponents/Tooltip';
+import Link from 'components/generic/Link';
+import Loading from 'components/SimpleCommonComponents/Loading';
+import Description from 'components/Description';
+import { Params } from 'src/higherOrder/loadData/extract-params';
+
+import cssBinder from 'styles/cssBinder';
+import ipro from 'styles/interpro-vf.css';
+import fonts from 'EBI-Icon-fonts/fonts.css';
+import local from './style.css';
+
+const css = cssBinder(ipro, local, fonts);
+
+type Props = {
+  integrated: string | null;
+};
+
+interface IntegratedProps
+  extends Props,
+    LoadDataProps<{ metadata: EntryMetadata }> {}
+
+const DescriptionFromIntegrated = ({
+  integrated,
+  data: { loading, payload },
+}: IntegratedProps) => {
+  if (!integrated) return null;
+  if (loading) return <Loading />;
+
+  if (payload?.metadata?.description?.length) {
+    const citations = getLiteratureIdsFromDescription(
+      payload.metadata.description
+    );
+    const [included, extra] = splitCitations(
+      payload.metadata.literature,
+      citations
+    );
+
+    return (
+      <>
+        <h4>
+          Description{' '}
+          <Tooltip
+            title={`The member database didn't provide a description for this signature. 
+                    The description displayed has been imported from ${integrated}, the InterPro entry in which the signature is integrated.`}
+          >
+            <span className={css('tag')}>
+              <sup>
+                <span
+                  className={css('icon', 'icon-common', 'icon-info', 'small')}
+                  data-icon="&#xf129;"
+                />{' '}
+              </sup>
+              Imported from{' '}
+              <Link
+                to={{
+                  description: {
+                    main: { key: 'entry' },
+                    entry: {
+                      db: 'InterPro',
+                      accession: integrated,
+                    },
+                  },
+                }}
+              >
+                {integrated}
+              </Link>
+            </span>
+          </Tooltip>
+        </h4>
+        <Description
+          textBlocks={payload.metadata.description}
+          literature={included}
+          accession={payload.metadata.accession}
+        />
+        <h4>References</h4>
+        <Literature included={included} extra={extra} />
+      </>
+    );
+  }
+  return null;
+};
+
+const getUrlFor: GetUrl<Props> = createSelector(
+  (state: GlobalState) => state.settings.api,
+  (_state: GlobalState, props?: Props) => props?.integrated || '',
+  (server: ParsedURLServer, accession: string) => {
+    if (!accession) return null;
+    const { protocol, hostname, port, root } = server;
+    return format({
+      protocol,
+      hostname,
+      port,
+      pathname:
+        root +
+        descriptionToPath({
+          main: { key: 'entry' },
+          entry: { db: 'interpro', accession },
+        }),
+    });
+  }
+);
+
+export default loadData(getUrlFor as Params)(DescriptionFromIntegrated);
diff --git a/src/components/Description/DescriptionFromIntegrated/style.css b/src/components/Description/DescriptionFromIntegrated/style.css
@@ -0,0 +1,4 @@
+h4 span.tag {
+  background-color: var(--colors-secondary-header);
+  color: var(--colors-lightgray);
+}
diff --git a/src/components/Description/DescriptionReadMore/index.tsx b/src/components/Description/DescriptionReadMore/index.tsx
@@ -4,10 +4,11 @@ import Description from '..';
 
 import cssBinder from 'styles/cssBinder';
 
+import ipro from 'styles/interpro-vf.css';
 import styles from '../style.css';
 import fonts from 'EBI-Icon-fonts/fonts.css';
 
-const css = cssBinder(styles, fonts);
+const css = cssBinder(styles, fonts, ipro);
 
 type DescriptionReadMoreProps = {
   text: string;
@@ -57,15 +58,15 @@ class DescriptionReadMore extends PureComponent<
               <span>
                 Less{' '}
                 <i
-                  className={css('icon', 'icon-common', 'font-sm')}
+                  className={css('icon', 'icon-common', 'font-s')}
                   data-icon="&#xf102;"
                 />
               </span>
             ) : (
               <span>
                 More{' '}
                 <i
-                  className={css('icon', 'icon-common', 'font-sm')}
+                  className={css('icon', 'icon-common', 'font-s')}
                   data-icon="&#xf103;"
                 />
               </span>

diff --git a/src/components/Description/Paragraph/index.tsx b/src/components/Description/Paragraph/index.tsx
@@ -10,8 +10,9 @@ import Citations, { CITATION_REGEX } from '../Citations';
 import cssBinder from 'styles/cssBinder';
 
 import styles from '../style.css';
+import ipro from 'styles/interpro-vf.css';
 
-const css = cssBinder(styles);
+const css = cssBinder(styles, ipro);
 
 const TAG_REGEX = /(\[\w+:[\w.-]+\])/;
 const TAG_REGEX_KV = /\[(\w+):([\w.-]+)]/;
@@ -29,13 +30,11 @@ const xReferenceURL = {
 type Props = {
   p: string;
   literature?: Array<[string, Reference]>;
-  accession?: string;
   withoutIDs?: boolean;
 };
 export const Paragraph = ({
   p,
   literature = [],
-  accession,
   withoutIDs = false,
 }: Props) => {
   let text = p;
@@ -57,7 +56,6 @@ export const Paragraph = ({
               text={text}
               key={i}
               literature={literature}
-              accession={accession || ''}
               withoutIDs={withoutIDs}
             />
           );
@@ -121,7 +119,7 @@ export const Paragraph = ({
                   tagValue
                 )}
                 target="_blank"
-                className={css('ext')}
+                className={css('ext-link')}
                 key={i}
               >
                 {tagValue}

diff --git a/src/components/Description/index.tsx b/src/components/Description/index.tsx
@@ -34,7 +34,6 @@ class Description extends PureComponent<Props> {
                   key={`${i}.${j}`}
                   p={p}
                   literature={literature || []}
-                  accession={accession}
                   withoutIDs={withoutIDs}
                 />
               ))

diff --git a/src/components/Entry/CrossReferences/index.tsx b/src/components/Entry/CrossReferences/index.tsx
@@ -9,16 +9,17 @@ import cssBinder from 'styles/cssBinder';
 
 import fonts from 'EBI-Icon-fonts/fonts.css';
 import local from './style.css';
+import ipro from 'styles/interpro-vf.css';
 
-const css = cssBinder(fonts, local);
+const css = cssBinder(fonts, local, ipro);
 
 type ReferenceData = {
   url: string;
   accession: string;
 };
 const ReferenceItem = ({ url, accession }: ReferenceData) => (
   <li>
-    <Link href={url} className={css('ext')}>
+    <Link href={url} className={css('ext-link')}>
       {accession}
     </Link>
   </li>

diff --git a/src/components/Entry/Literature/index.tsx b/src/components/Entry/Literature/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { partition } from 'lodash-es';
 
 import PMCLink from 'components/ExtLink/PMCLink';
 import { DOILink } from 'components/ExtLink/patternLinkWrapper';
@@ -12,9 +13,10 @@ import { schemaProcessCitations } from 'schema_org/processors';
 
 import cssBinder from 'styles/cssBinder';
 
+import ipro from 'styles/interpro-vf.css';
 import refStyles from './style.css';
 
-const css = cssBinder(refStyles);
+const css = cssBinder(refStyles, ipro);
 
 export const getLiteratureIdsFromDescription = (
   description: Array<string>
@@ -28,6 +30,11 @@ export const getLiteratureIdsFromDescription = (
     ],
     [] as string[]
   );
+export const splitCitations = (
+  literature: LiteratureMetadata,
+  citations: string[]
+) =>
+  partition(Object.entries(literature || {}), ([id]) => citations.includes(id));
 
 const SchemaOrgData = loadable({
   loader: () => import(/* webpackChunkName: "schemaOrg" */ 'schema_org'),
@@ -81,14 +88,20 @@ const LiteratureItem = ({
       <span className={css('year')}>({r.year})</span>.{' '}
       {r.rawPages && <span className={css('pages')}>{r.rawPages}. </span>}
       {r.DOI_URL && (
-        <DOILink id={r.DOI_URL} className={css('ext', 'margin-right-medium')}>
+        <DOILink
+          id={r.DOI_URL}
+          className={css('ext-link', 'margin-right-medium')}
+        >
           View article
         </DOILink>
       )}
       {r.PMID && (
         <span>
           PMID:{' '}
-          <PMCLink id={r.PMID} className={css('ext', 'margin-right-medium')}>
+          <PMCLink
+            id={r.PMID}
+            className={css('ext-link', 'margin-right-medium')}
+          >
             {r.PMID}
           </PMCLink>
         </span>

diff --git a/src/components/Entry/Summary/MemberDBSubtitle/index.tsx b/src/components/Entry/Summary/MemberDBSubtitle/index.tsx
@@ -5,9 +5,10 @@ import Tooltip from 'components/SimpleCommonComponents/Tooltip';
 
 import cssBinder from 'styles/cssBinder';
 
+import ipro from 'styles/interpro-vf.css';
 import fonts from 'EBI-Icon-fonts/fonts.css';
 
-const css = cssBinder(fonts);
+const css = cssBinder(ipro, fonts);
 
 const MemberDBSubtitle = ({
   metadata,
@@ -42,10 +43,12 @@ const MemberDBSubtitle = ({
                   dbInfo.description || `${dbInfo.name} (${dbInfo.version})`
                 }
               >
-                <span
-                  className={css('font-s', 'icon', 'icon-common')}
-                  data-icon="&#xf129;"
-                />
+                <sup>
+                  <span
+                    className={css('icon', 'icon-common')}
+                    data-icon="&#xf129;"
+                  />
+                </sup>
               </Tooltip>
             </Link>
           </td>