9225096268

Committed 24 May 2024 01:54PM UTC coverage: 21.871% (-1.1%) from 22.948%

Build # 9225096268

Build Type

Pull #616

github

Committed by

web-flow

Commit Message

Merge pull request #614 from ProteinsWebTeam/ts-search-page

TypeScript: Search page

Pull Request Pull Request #616: InterPro v100.0

Run Details

635 of 3951 branches covered (16.07%)

Branch coverage included in aggregate %.

3 of 16 new or added lines in 8 files covered. (18.75%)

4 existing lines in 4 files now uncovered.

1506 of 5838 relevant lines covered (25.8%)

62.14 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/pages/Release_notes/index.js

/* eslint-disable no-magic-numbers */
import React, { PureComponent, useState } from 'react';
import loadWebComponent from 'utils/load-web-component';
import T from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { format } from 'url';
import { Helmet } from 'react-helmet-async';

import loadData from 'higherOrder/loadData';
import loadable from 'higherOrder/loadable';
import { schemaProcessDataPageSection } from 'schema_org/processors';

// $FlowFixMe
import Tooltip from 'components/SimpleCommonComponents/Tooltip';
// $FlowFixMe
import Callout from 'components/SimpleCommonComponents/Callout';
import Link from 'components/generic/Link';
import NumberComponent from 'components/NumberComponent';
import MemberSymbol from 'components/Entry/MemberSymbol';
// $FlowFixMe
import TooltipAndRTDLink from 'components/Help/TooltipAndRTDLink';
// $FlowFixMe
import Button from 'components/SimpleCommonComponents/Button';

import { foundationPartial } from 'styles/foundation';

import local from './style.css';
import ipro from 'styles/interpro-new.css';
import ebiGlobalStyles from 'ebi-framework/css/ebi-global.css';
import fonts from 'EBI-Icon-fonts/fonts.css';
import { cleanUpMultipleSlashes } from 'higherOrder/loadData/defaults';
import Loading from 'components/SimpleCommonComponents/Loading';
// $FlowFixMe
import { formatISODate } from 'utils/date';
import VersionBadge from 'components/VersionBadge';

const f = foundationPartial(ebiGlobalStyles, fonts, local, ipro);

const SchemaOrgData = loadable({
  loader: () => import(/* webpackChunkName: "schemaOrg" */ 'schema_org'),
  loading: () => null,
});

const ReleaseNotesSelectorWithData = (
  {
    data: { loading, payload },
    current,
  } /*: {data: { loading: boolean, payload: Object}, current: string} */,
) => {
  const [showFullList, setShowFullList] = useState(false);
  if (loading || !payload) return <Loading />;
  const releasesToShow = showFullList
    ? Object.entries(payload)
    : Object.entries(payload).slice(-1);
  return (
    <>
      {!showFullList && (
        <Button
          type="hollow"
          // className={f('show-more-releases', 'link')}
          onClick={() => setShowFullList(true)}
        >
          Show Previous Releases
        </Button>
      )}
      <ul className={f('release-selector')}>
        {releasesToShow.map(([version, date]) => (
          <li key={version} className={f({ current: version === current })}>
            <Link
              to={{
                description: {
                  other: ['release_notes', version],
                },
              }}
              disabled={version === current}
            >
              <VersionBadge
                version={version}
                side={version === current ? 30 : 20}
              />
              InterPro {version}{' '}
              <small>
                • <time dateTime={date}>{formatISODate(date)}</time>
              </small>
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
};
ReleaseNotesSelectorWithData.propTypes = {
  data: T.shape({
    loading: T.bool.isRequired,
    payload: T.object,
  }).isRequired,
  current: T.string,
};

const getReleaseNotesListUrl = createSelector(
  (state) => state.settings.api,
  ({ protocol, hostname, port, root }) =>
    cleanUpMultipleSlashes(
      format({
        protocol,
        hostname,
        port,
        pathname: `${root}/utils/release/`,
      }),
    ),
);

const ReleaseNotesSelector = loadData(getReleaseNotesListUrl)(
  ReleaseNotesSelectorWithData,
);
const StatsPerType = (
  {
    iconType,
    label,
    type,
    count,
    child = false,
  } /*: {iconType: string, label: string, type: string, count: number, child: boolean } */,
) => (
  <tr>
    <td>
      {iconType && (
        <interpro-type dimension="2em" type={iconType} aria-label="Entry type">
          {
            // IE11 fallback for icons
          }
          <span className={f('icon-type', `icon-${iconType}`)}>{label[0]}</span>
        </interpro-type>
      )}
    </td>
    <td>
      {child && <span className={f('ico-rel')} />}
      {label}
    </td>
    {count && (
      <td className={f('text-right')}>
        <Link
          to={{
            description: {
              main: { key: 'entry' },
              entry: { db: 'InterPro' },
            },
            search: { type: type },
          }}
        >
          <NumberComponent noTitle>{count}</NumberComponent>
        </Link>
      </td>
    )}
  </tr>
);
StatsPerType.propTypes = {
  iconType: T.string,
  label: T.string.isRequired,
  type: T.string.isRequired,
  count: T.number,
  child: T.bool,
};

const ProteinInfo = ({ proteins }) => {
  if (!proteins) return null;
  return (
    <>
      <h3>Protein information</h3>

      <table className={f('light', 'margin-top-large')}>
        <thead>
          <tr>
            <th>Sequence database</th>
            <th>Version</th>
            <th>Count</th>
            <th colSpan="2" className={f('text-center')}>
              Count of proteins matching
            </th>
          </tr>
          <tr>
            <td colSpan="3" />
            <td>Any signature</td>
            <td>Integrated signatures</td>
          </tr>
        </thead>
        <tbody>
          {Object.entries(proteins)
            .sort(([a], [b]) => (a > b ? 1 : -1))
            .map(([name, detail]) => (
              <tr key={name}>
                <td>{name}</td>
                <td>{detail.version}</td>
                <td>
                  <NumberComponent noTitle>{detail.count}</NumberComponent>
                </td>
                <td>
                  <NumberComponent noTitle>{detail.signatures}</NumberComponent>{' '}
                  <small>
                    ({((100 * detail.signatures) / detail.count).toFixed(1)}
                    %)
                  </small>
                </td>
                <td>
                  <NumberComponent noTitle>
                    {detail.integrated_signatures}
                  </NumberComponent>{' '}
                  <small>
                    (
                    {(
                      (100 * detail.integrated_signatures) /
                      detail.count
                    ).toFixed(1)}
                    %)
                  </small>
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </>
  );
};
ProteinInfo.propTypes = {
  proteins: T.object,
};

const EndpointInfo = ({ endpoint, label, info }) => {
  if (!info) return null;
  return (
    <section>
      <h3 style={{ textTransform: 'capitalize' }}>{endpoint} information</h3>

      <table className={f('light', 'margin-top-large')}>
        <thead>
          <tr>
            <th>Database</th>
            <th>Version</th>
            <th>Count</th>
            <th>Integrated</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{label}</td>
            <td>{info.version}</td>
            <td>
              <NumberComponent noTitle>{info.total}</NumberComponent>
            </td>
            <td>
              <NumberComponent noTitle>{info.integrated}</NumberComponent>{' '}
              <small>
                ({((100 * info.integrated) / info.total).toFixed(1)}
                %)
              </small>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  );
};
EndpointInfo.propTypes = {
  endpoint: T.string,
  label: T.string,
  info: T.object,
};
/*:: type Props = {
  data: {
    payload: {
      version: string,
      release_date: string,
      content: Object
    },
    loading: boolean,
  },
  description: Object,
} */
class ReleaseNotes extends PureComponent /*:: <Props> */ {
  static propTypes = {
    data: T.shape({
      payload: T.shape({
        version: T.string.isRequired,
        release_date: T.string.isRequired,
        content: T.object.isRequired,
      }),
      loading: T.bool.isRequired,
    }).isRequired,
    description: T.object.isRequired,
  };
  componentDidMount() {
    loadWebComponent(() =>
      import(
        /* webpackChunkName: "interpro-components" */ 'interpro-components'
      ).then((m) => m.InterproType),
    ).as('interpro-type');
  }
  render() {
    if (!this.props.data || this.props.data.loading) {
      return <Loading />;
    }
    const { version, release_date: date, content } = this.props.data.payload;
    const totalIpro = content.interpro.entries;
    const newIpro = content.interpro.new_entries.length;
    const lastEntry = content.interpro.latest_entry;
    const updates = Object.values(content.member_databases).filter(
      (db) => db.is_updated,
    );
    const perType = content.interpro.types;
    const perMemberDB = content.member_databases;
    const totalNewMethod = Object.values(perMemberDB).reduce(
      (agg, v) => agg + v.recently_integrated.length,
      0,
    );
    const types = [
      { label: 'Homologous Superfamily', key: 'homologous_superfamily' },
      { label: 'Family', key: 'family' },
      { label: 'Domain', key: 'domain' },
      { label: 'Repeat', key: 'repeat' },
      {
        label: 'Site',
        key: 'site',
        children: [
          { label: 'Active Site', key: 'active_site' },
          { label: 'Binding Site', key: 'binding_site' },
          { label: 'Conserved Site', key: 'conserved_site' },
          { label: 'PTM', key: 'ptm' },
        ],
      },
    ];
    const sets = Object.values(content.member_databases).filter(
      (db) => db.sets,
    );
    const dbMap = new Map([
      ['PROSITE patterns', 'prosite'],
      ['PROSITE profiles', 'profile'],
      ['SUPERFAMILY', 'ssf'],
    ]);
    const sourceDB = new Map([
      ['structures', 'PDB'],
      ['taxonomy', 'UnitProtKB'],
      ['proteomes', 'UniProtKB'],
    ]);
    return (
      <div className={f('row')}>
        <div className={f('columns', 'release')}>
          <section>
            <Helmet>
              <title>Release notes</title>
            </Helmet>
            <h3>
              Release notes <TooltipAndRTDLink rtdPage="release_notes.html" />
            </h3>
            <SchemaOrgData
              data={{
                name: 'InterPro Release Notes',
                description:
                  'Description of the changes included in the most recent version of InterPro',
              }}
              processData={schemaProcessDataPageSection}
            />
            <ReleaseNotesSelector current={version} />
            <hr />
            <div
              className={f(
                'flex-box',
                'margin-bottom-xlarge',
                'margin-top-large',
              )}
            >
              <h3>
                InterPro {version}{' '}
                <small>
                  • <time dateTime={date}>{formatISODate(date)}</time>
                </small>
              </h3>
            </div>

            <p>Features include:</p>

            <ul>
              <li>
                The addition of{' '}
                <NumberComponent noTitle noAnimation>
                  {newIpro}
                </NumberComponent>{' '}
                InterPro entries.
              </li>
              {updates && !!updates.length && (
                <li>
                  An update to{' '}
                  {updates.map(({ name, version }, i) => (
                    <React.Fragment key={name}>
                      {i === 0 ? ' ' : ', '}
                      <span key={name}>
                        {name} [{version}]
                      </span>
                    </React.Fragment>
                  ))}
                  .
                </li>
              )}
              <li>
                Integration of{' '}
                <NumberComponent noTitle noAnimation>
                  {totalNewMethod}
                </NumberComponent>{' '}
                new methods from the
                {Object.entries(perMemberDB)
                  .filter(([_name, { recently_integrated: r }]) => r.length)
                  .map(([name, db], i) => (
                    <React.Fragment key={name}>
                      {i === 0 ? ' ' : ', '}
                      {db.name} (
                      <NumberComponent noTitle noAnimation>
                        {db.recently_integrated.length}
                      </NumberComponent>
                      )
                    </React.Fragment>
                  ))}{' '}
                databases.
              </li>
            </ul>
            {content?.notes?.length ? (
              <Callout type="info">
                <div>
                  {content.notes.map((note, i) => (
                    <p key={i}>{note}</p>
                  ))}
                </div>
              </Callout>
            ) : null}

            <h4>Contents and coverage</h4>
            <p className={f('margin-bottom-small')}>
              InterPro protein matches are now calculated for all UniProtKB and
              UniParc proteins. InterPro release {version} contains{' '}
              <Link
                to={{
                  description: {
                    main: { key: 'entry' },
                    entry: { db: 'InterPro' },
                  },
                }}
              >
                <NumberComponent noTitle>{totalIpro}</NumberComponent>
              </Link>{' '}
              entries (last entry:{' '}
              <Link
                to={{
                  description: {
                    main: { key: 'entry' },
                    entry: { db: 'InterPro', accession: lastEntry },
                  },
                }}
              >
                {lastEntry}
              </Link>
              ), representing:
            </p>

            <table
              className={f(
                'light',
                'small',
                'margin-top-large',
                'margin-bottom-xlarge',
              )}
            >
              <tbody>
                {types.map(({ label, key, children }) => {
                  const type = label.toLowerCase();
                  return (
                    <React.Fragment key={key}>
                      <StatsPerType
                        label={label}
                        iconType={type}
                        type={key}
                        count={perType[key]}
                      />
                      {children &&
                        children.map((child) => (
                          <StatsPerType
                            label={child.label}
                            key={child.key}
                            type={child.key}
                            count={perType[child.key]}
                            child={true}
                          />
                        ))}
                    </React.Fragment>
                  );
                })}
              </tbody>
            </table>

            <p>Interpro cites {content.citations} publications in PubMed.</p>

            <h4>Member database information</h4>

            <table className={f('light', 'margin-top-large')}>
              <thead>
                <tr>
                  <th />
                  <th>Signature database</th>
                  <th className={f('text-center')}>Version</th>
                  <th className={f('text-right')}>
                    Signatures{' '}
                    <Tooltip title="Some signatures may not have matches to UniProtKB proteins">
                      <span
                        className={f('small', 'icon', 'icon-common')}
                        data-icon="&#xf129;"
                        aria-label="Some signatures may not have matches to UniProtKB proteins"
                      />
                    </Tooltip>
                  </th>
                  <th className={f('text-right')}>
                    Integrated signatures{' '}
                    <Tooltip title="Not all signatures of a member database may be integrated at the time of an InterPro release">
                      <span
                        className={f('small', 'icon', 'icon-common')}
                        data-icon="&#xf129;"
                        aria-label="Not all signatures of a member database may be integrated at the time of an InterPro release"
                      />
                    </Tooltip>
                  </th>
                </tr>
              </thead>
              <tbody>
                {Object.values(perMemberDB)
                  .filter((db) => !db.name.toLowerCase().startsWith('mobidb'))
                  .map(
                    ({
                      name,
                      version,
                      signatures,
                      integrated_signatures: integrated,
                    }) => {
                      const db =
                        dbMap.get(name) || name.toLowerCase().replace('-', '');
                      return (
                        <tr key={name}>
                          <td className={f('no-lineheight')}>
                            <MemberSymbol
                              type={db}
                              className={f('md-small')}
                              svg={false}
                            />
                          </td>
                          <td>{name}</td>
                          <td className={f('text-center')}>{version}</td>
                          <td className={f('text-right')}>
                            <Link
                              className={f('no-underline')}
                              to={{
                                description: {
                                  main: { key: 'entry' },
                                  entry: { db: db },
                                },
                              }}
                            >
                              <NumberComponent noTitle>
                                {signatures}
                              </NumberComponent>
                            </Link>
                          </td>
                          <td className={f('text-right')}>
                            <Link
                              className={f('no-underline')}
                              to={{
                                description: {
                                  main: { key: 'entry' },
                                  entry: {
                                    db: db,
                                    integration: 'integrated',
                                  },
                                },
                              }}
                            >
                              <NumberComponent noTitle>
                                {integrated}
                              </NumberComponent>{' '}
                              <small>
                                ({((100 * integrated) / signatures).toFixed(1)}
                                %)
                              </small>
                            </Link>
                          </td>
                        </tr>
                      );
                    },
                  )}
              </tbody>
            </table>

            <p className={f('small', 'margin-top-small')}>
              We use{' '}
              <Link
                href="http://old.protein.bio.unipd.it/mobidblite/"
                className={f('ext')}
                target="_blank"
              >
                MobiDB-lite
              </Link>
              , a derivative of the
              <Link
                href="https://mobidb.org/"
                className={f('ext')}
                target="_blank"
              >
                MobiDB
              </Link>{' '}
              database, to provide consensus annotation of long-range intrinsic
              disorder in protein sequences. Read more about MobiDB-lite in{' '}
              <i>Bioinformatics</i>, 33(9), 2017, 1402–1404, (
              <Link
                href="https://doi.org/10.1093/bioinformatics/btx015"
                className={f('ext')}
                target="_blank"
              >
                doi: 10.1093/bioinformatics/btx015
              </Link>
              ).
            </p>

            <h4>InterPro2GO</h4>
            <p>
              We have a total number of{' '}
              <NumberComponent noTitle>
                {content.interpro.go_terms}
              </NumberComponent>{' '}
              GO terms mapped to InterPro entries.
            </p>

            <p>
              <Link href="https://ftp.ebi.ac.uk/pub/databases/interpro/current_release/interpro2go">
                List of InterPro2GO mappings
              </Link>
              . These are also available through the EBI GO browser{' '}
              <Link
                href="https://www.ebi.ac.uk/QuickGO/"
                className={f('ext')}
                target="_blank"
              >
                QuickGO
              </Link>
            </p>
            <ProteinInfo proteins={content.proteins} />

            {['structures', 'proteomes', 'taxonomy'].map((key) => (
              <EndpointInfo
                key={key}
                label={sourceDB.get(key)}
                endpoint={key}
                info={content[key]}
              />
            ))}
            <section>
              <h3>Sets Information</h3>

              <table className={f('light', 'margin-top-large')}>
                <thead>
                  <tr>
                    <th>Database</th>
                    <th>Version</th>
                    <th>Count</th>
                  </tr>
                </thead>
                <tbody>
                  {sets.map(({ name, sets, version }) => (
                    <tr key={name}>
                      <td>{name}</td>
                      <td>{version}</td>
                      <td>
                        <NumberComponent noTitle>{sets}</NumberComponent>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </section>
          </section>
        </div>
      </div>
    );
  }
}
const getReleaseNotesUrl = createSelector(
  (state) => state.settings.api,
  (state) => state.customLocation.description.other,
  ({ protocol, hostname, port, root }, other) =>
    cleanUpMultipleSlashes(
      format({
        protocol,
        hostname,
        port,
        pathname: `${root}/utils/release/${
          other.length > 1 ? other[1] : 'current'
        }`,
      }),
    ),
);

const mapStateToProps = createSelector(
  (state) => state.customLocation.description,
  (description) => ({ description }),
);
export default connect(mapStateToProps)(
  loadData(getReleaseNotesUrl)(ReleaseNotes),
);

1	/* eslint-disable no-magic-numbers */
2	import React, { PureComponent, useState } from 'react';
3	import loadWebComponent from 'utils/load-web-component';
4	import T from 'prop-types';
5	import { connect } from 'react-redux';
6	import { createSelector } from 'reselect';
7	import { format } from 'url';
8	import { Helmet } from 'react-helmet-async';
9
10	import loadData from 'higherOrder/loadData';
11	import loadable from 'higherOrder/loadable';
12	import { schemaProcessDataPageSection } from 'schema_org/processors';
13
14	// $FlowFixMe
15	import Tooltip from 'components/SimpleCommonComponents/Tooltip';
16	// $FlowFixMe
17	import Callout from 'components/SimpleCommonComponents/Callout';
18	import Link from 'components/generic/Link';
19	import NumberComponent from 'components/NumberComponent';
20	import MemberSymbol from 'components/Entry/MemberSymbol';
21	// $FlowFixMe
22	import TooltipAndRTDLink from 'components/Help/TooltipAndRTDLink';
23	// $FlowFixMe
24	import Button from 'components/SimpleCommonComponents/Button';
25
26	import { foundationPartial } from 'styles/foundation';
27
28	import local from './style.css';
29	import ipro from 'styles/interpro-new.css';
30	import ebiGlobalStyles from 'ebi-framework/css/ebi-global.css';
31	import fonts from 'EBI-Icon-fonts/fonts.css';
32	import { cleanUpMultipleSlashes } from 'higherOrder/loadData/defaults';
33	import Loading from 'components/SimpleCommonComponents/Loading';
34	// $FlowFixMe
35	import { formatISODate } from 'utils/date';
36	import VersionBadge from 'components/VersionBadge';
37
38	const f = foundationPartial(ebiGlobalStyles, fonts, local, ipro);	×
39
40	const SchemaOrgData = loadable({	×
41	loader: () => import(/* webpackChunkName: "schemaOrg" */ 'schema_org'),	×
42	loading: () => null,	×
43	});
44
45	const ReleaseNotesSelectorWithData = (	×
46	{
47	data: { loading, payload },
48	current,
49	} /: {data: { loading: boolean, payload: Object}, current: string} /,
50	) => {
51	const [showFullList, setShowFullList] = useState(false);	×
52	if (loading \|\| !payload) return <Loading />;	×
53	const releasesToShow = showFullList	×
54	? Object.entries(payload)
55	: Object.entries(payload).slice(-1);
56	return (	×
57	<>
58	{!showFullList && (	×
59	<Button
60	type="hollow"
61	// className={f('show-more-releases', 'link')}
UNCOV 62	onClick={() => setShowFullList(true)}	×
63	>
64	Show Previous Releases
65	</Button>
66	)}
67	<ul className={f('release-selector')}>
68	{releasesToShow.map(([version, date]) => (
69	<li key={version} className={f({ current: version === current })}>	×
70	<Link
71	to={{
72	description: {
73	other: ['release_notes', version],
74	},
75	}}
76	disabled={version === current}
77	>
78	<VersionBadge
79	version={version}
80	side={version === current ? 30 : 20}	×
81	/>
82	InterPro {version}{' '}
83	<small>
84	• <time dateTime={date}>{formatISODate(date)}</time>
85	</small>
86	</Link>
87	</li>
88	))}
89	</ul>
90	</>
91	);
92	};
93	ReleaseNotesSelectorWithData.propTypes = {	×
94	data: T.shape({
95	loading: T.bool.isRequired,
96	payload: T.object,
97	}).isRequired,
98	current: T.string,
99	};
100
101	const getReleaseNotesListUrl = createSelector(	×
102	(state) => state.settings.api,	×
103	({ protocol, hostname, port, root }) =>
104	cleanUpMultipleSlashes(	×
105	format({
106	protocol,
107	hostname,
108	port,
109	pathname: `${root}/utils/release/`,
110	}),
111	),
112	);
113
114	const ReleaseNotesSelector = loadData(getReleaseNotesListUrl)(	×
115	ReleaseNotesSelectorWithData,
116	);
117	const StatsPerType = (	×
118	{
119	iconType,
120	label,
121	type,
122	count,
123	child = false,	×
124	} /: {iconType: string, label: string, type: string, count: number, child: boolean } /,
125	) => (
126	<tr>	×
127	<td>
128	{iconType && (	×
129	<interpro-type dimension="2em" type={iconType} aria-label="Entry type">
130	{
131	// IE11 fallback for icons
132	}
133	<span className={f('icon-type', `icon-${iconType}`)}>{label[0]}</span>
134	</interpro-type>
135	)}
136	</td>
137	<td>
138	{child && <span className={f('ico-rel')} />}	×
139	{label}
140	</td>
141	{count && (	×
142	<td className={f('text-right')}>
143	<Link
144	to={{
145	description: {
146	main: { key: 'entry' },
147	entry: { db: 'InterPro' },
148	},
149	search: { type: type },
150	}}
151	>
152	<NumberComponent noTitle>{count}</NumberComponent>
153	</Link>
154	</td>
155	)}
156	</tr>
157	);
158	StatsPerType.propTypes = {	×
159	iconType: T.string,
160	label: T.string.isRequired,
161	type: T.string.isRequired,
162	count: T.number,
163	child: T.bool,
164	};
165
166	const ProteinInfo = ({ proteins }) => {	×
167	if (!proteins) return null;	×
168	return (	×
169	<>
170	<h3>Protein information</h3>
171
172	<table className={f('light', 'margin-top-large')}>
173	<thead>
174	<tr>
175	<th>Sequence database</th>
176	<th>Version</th>
177	<th>Count</th>
178	<th colSpan="2" className={f('text-center')}>
179	Count of proteins matching
180	</th>
181	</tr>
182	<tr>
183	<td colSpan="3" />
184	<td>Any signature</td>
185	<td>Integrated signatures</td>
186	</tr>
187	</thead>
188	<tbody>
189	{Object.entries(proteins)
190	.sort(([a], [b]) => (a > b ? 1 : -1))	×
191	.map(([name, detail]) => (
192	<tr key={name}>	×
193	<td>{name}</td>
194	<td>{detail.version}</td>
195	<td>
196	<NumberComponent noTitle>{detail.count}</NumberComponent>
197	</td>
198	<td>
199	<NumberComponent noTitle>{detail.signatures}</NumberComponent>{' '}
200	<small>
201	({((100 * detail.signatures) / detail.count).toFixed(1)}
202	%)
203	</small>
204	</td>
205	<td>
206	<NumberComponent noTitle>
207	{detail.integrated_signatures}
208	</NumberComponent>{' '}
209	<small>
210	(
211	{(
212	(100 * detail.integrated_signatures) /
213	detail.count
214	).toFixed(1)}
215	%)
216	</small>
217	</td>
218	</tr>
219	))}
220	</tbody>
221	</table>
222	</>
223	);
224	};
225	ProteinInfo.propTypes = {	×
226	proteins: T.object,
227	};
228
229	const EndpointInfo = ({ endpoint, label, info }) => {	×
230	if (!info) return null;	×
231	return (	×
232	<section>
233	<h3 style={{ textTransform: 'capitalize' }}>{endpoint} information</h3>
234
235	<table className={f('light', 'margin-top-large')}>
236	<thead>
237	<tr>
238	<th>Database</th>
239	<th>Version</th>
240	<th>Count</th>
241	<th>Integrated</th>
242	</tr>
243	</thead>
244	<tbody>
245	<tr>
246	<td>{label}</td>
247	<td>{info.version}</td>
248	<td>
249	<NumberComponent noTitle>{info.total}</NumberComponent>
250	</td>
251	<td>
252	<NumberComponent noTitle>{info.integrated}</NumberComponent>{' '}
253	<small>
254	({((100 * info.integrated) / info.total).toFixed(1)}
255	%)
256	</small>
257	</td>
258	</tr>
259	</tbody>
260	</table>
261	</section>
262	);
263	};
264	EndpointInfo.propTypes = {	×
265	endpoint: T.string,
266	label: T.string,
267	info: T.object,
268	};
269	/*:: type Props = {
270	data: {
271	payload: {
272	version: string,
273	release_date: string,
274	content: Object
275	},
276	loading: boolean,
277	},
278	description: Object,
279	} */
280	class ReleaseNotes extends PureComponent /:: <Props> / {
281	static propTypes = {	×
282	data: T.shape({
283	payload: T.shape({
284	version: T.string.isRequired,
285	release_date: T.string.isRequired,
286	content: T.object.isRequired,
287	}),
288	loading: T.bool.isRequired,
289	}).isRequired,
290	description: T.object.isRequired,
291	};
292	componentDidMount() {
293	loadWebComponent(() =>	×
294	import(	×
295	/* webpackChunkName: "interpro-components" */ 'interpro-components'
296	).then((m) => m.InterproType),	×
297	).as('interpro-type');
298	}
299	render() {
300	if (!this.props.data \|\| this.props.data.loading) {	×
301	return <Loading />;	×
302	}
303	const { version, release_date: date, content } = this.props.data.payload;	×
304	const totalIpro = content.interpro.entries;	×
305	const newIpro = content.interpro.new_entries.length;	×
306	const lastEntry = content.interpro.latest_entry;	×
307	const updates = Object.values(content.member_databases).filter(	×
308	(db) => db.is_updated,	×
309	);
310	const perType = content.interpro.types;	×
311	const perMemberDB = content.member_databases;	×
312	const totalNewMethod = Object.values(perMemberDB).reduce(	×
313	(agg, v) => agg + v.recently_integrated.length,	×
314	0,
315	);
316	const types = [	×
317	{ label: 'Homologous Superfamily', key: 'homologous_superfamily' },
318	{ label: 'Family', key: 'family' },
319	{ label: 'Domain', key: 'domain' },
320	{ label: 'Repeat', key: 'repeat' },
321	{
322	label: 'Site',
323	key: 'site',
324	children: [
325	{ label: 'Active Site', key: 'active_site' },
326	{ label: 'Binding Site', key: 'binding_site' },
327	{ label: 'Conserved Site', key: 'conserved_site' },
328	{ label: 'PTM', key: 'ptm' },
329	],
330	},
331	];
332	const sets = Object.values(content.member_databases).filter(	×
333	(db) => db.sets,	×
334	);
335	const dbMap = new Map([	×
336	['PROSITE patterns', 'prosite'],
337	['PROSITE profiles', 'profile'],
338	['SUPERFAMILY', 'ssf'],
339	]);
340	const sourceDB = new Map([	×
341	['structures', 'PDB'],
342	['taxonomy', 'UnitProtKB'],
343	['proteomes', 'UniProtKB'],
344	]);
345	return (	×
346	<div className={f('row')}>
347	<div className={f('columns', 'release')}>
348	<section>
349	<Helmet>
350	<title>Release notes</title>
351	</Helmet>
352	<h3>
353	Release notes <TooltipAndRTDLink rtdPage="release_notes.html" />
354	</h3>
355	<SchemaOrgData
356	data={{
357	name: 'InterPro Release Notes',
358	description:
359	'Description of the changes included in the most recent version of InterPro',
360	}}
361	processData={schemaProcessDataPageSection}
362	/>
363	<ReleaseNotesSelector current={version} />
364	<hr />
365	<div
366	className={f(
367	'flex-box',
368	'margin-bottom-xlarge',
369	'margin-top-large',
370	)}
371	>
372	<h3>
373	InterPro {version}{' '}
374	<small>
375	• <time dateTime={date}>{formatISODate(date)}</time>
376	</small>
377	</h3>
378	</div>
379
380	<p>Features include:</p>
381
382	<ul>
383	<li>
384	The addition of{' '}
385	<NumberComponent noTitle noAnimation>
386	{newIpro}
387	</NumberComponent>{' '}
388	InterPro entries.
389	</li>
390	{updates && !!updates.length && (	×
391	<li>
392	An update to{' '}
393	{updates.map(({ name, version }, i) => (
394	<React.Fragment key={name}>	×
395	{i === 0 ? ' ' : ', '}	×
396	<span key={name}>
397	{name} [{version}]
398	</span>
399	</React.Fragment>
400	))}
401	.
402	</li>
403	)}
404	<li>
405	Integration of{' '}
406	<NumberComponent noTitle noAnimation>
407	{totalNewMethod}
408	</NumberComponent>{' '}
409	new methods from the
410	{Object.entries(perMemberDB)
411	.filter(([_name, { recently_integrated: r }]) => r.length)	×
412	.map(([name, db], i) => (
413	<React.Fragment key={name}>	×
414	{i === 0 ? ' ' : ', '}	×
415	{db.name} (
416	<NumberComponent noTitle noAnimation>
417	{db.recently_integrated.length}
418	</NumberComponent>
419	)
420	</React.Fragment>
421	))}{' '}
422	databases.
423	</li>
424	</ul>
425	{content?.notes?.length ? (	×
426	<Callout type="info">
427	<div>
428	{content.notes.map((note, i) => (
429	<p key={i}>{note}</p>	×
430	))}
431	</div>
432	</Callout>
433	) : null}
434
435	<h4>Contents and coverage</h4>
436	<p className={f('margin-bottom-small')}>
437	InterPro protein matches are now calculated for all UniProtKB and
438	UniParc proteins. InterPro release {version} contains{' '}
439	<Link
440	to={{
441	description: {
442	main: { key: 'entry' },
443	entry: { db: 'InterPro' },
444	},
445	}}
446	>
447	<NumberComponent noTitle>{totalIpro}</NumberComponent>
448	</Link>{' '}
449	entries (last entry:{' '}
450	<Link
451	to={{
452	description: {
453	main: { key: 'entry' },
454	entry: { db: 'InterPro', accession: lastEntry },
455	},
456	}}
457	>
458	{lastEntry}
459	</Link>
460	), representing:
461	</p>
462
463	<table
464	className={f(
465	'light',
466	'small',
467	'margin-top-large',
468	'margin-bottom-xlarge',
469	)}
470	>
471	<tbody>
472	{types.map(({ label, key, children }) => {
473	const type = label.toLowerCase();	×
474	return (	×
475	<React.Fragment key={key}>
476	<StatsPerType
477	label={label}
478	iconType={type}
479	type={key}
480	count={perType[key]}
481	/>
482	{children &&	×
483	children.map((child) => (
484	<StatsPerType	×
485	label={child.label}
486	key={child.key}
487	type={child.key}
488	count={perType[child.key]}
489	child={true}
490	/>
491	))}
492	</React.Fragment>
493	);
494	})}
495	</tbody>
496	</table>
497
498	<p>Interpro cites {content.citations} publications in PubMed.</p>
499
500	<h4>Member database information</h4>
501
502	<table className={f('light', 'margin-top-large')}>
503	<thead>
504	<tr>
505	<th />
506	<th>Signature database</th>
507	<th className={f('text-center')}>Version</th>
508	<th className={f('text-right')}>
509	Signatures{' '}
510	<Tooltip title="Some signatures may not have matches to UniProtKB proteins">
511	<span
512	className={f('small', 'icon', 'icon-common')}
513	data-icon=""
514	aria-label="Some signatures may not have matches to UniProtKB proteins"
515	/>
516	</Tooltip>
517	</th>
518	<th className={f('text-right')}>
519	Integrated signatures{' '}
520	<Tooltip title="Not all signatures of a member database may be integrated at the time of an InterPro release">
521	<span
522	className={f('small', 'icon', 'icon-common')}
523	data-icon=""
524	aria-label="Not all signatures of a member database may be integrated at the time of an InterPro release"
525	/>
526	</Tooltip>
527	</th>
528	</tr>
529	</thead>
530	<tbody>
531	{Object.values(perMemberDB)
532	.filter((db) => !db.name.toLowerCase().startsWith('mobidb'))	×
533	.map(
534	({
535	name,
536	version,
537	signatures,
538	integrated_signatures: integrated,
539	}) => {
540	const db =
541	dbMap.get(name) \|\| name.toLowerCase().replace('-', '');	×
542	return (	×
543	<tr key={name}>
544	<td className={f('no-lineheight')}>
545	<MemberSymbol
546	type={db}
547	className={f('md-small')}
548	svg={false}
549	/>
550	</td>
551	<td>{name}</td>
552	<td className={f('text-center')}>{version}</td>
553	<td className={f('text-right')}>
554	<Link
555	className={f('no-underline')}
556	to={{
557	description: {
558	main: { key: 'entry' },
559	entry: { db: db },
560	},
561	}}
562	>
563	<NumberComponent noTitle>
564	{signatures}
565	</NumberComponent>
566	</Link>
567	</td>
568	<td className={f('text-right')}>
569	<Link
570	className={f('no-underline')}
571	to={{
572	description: {
573	main: { key: 'entry' },
574	entry: {
575	db: db,
576	integration: 'integrated',
577	},
578	},
579	}}
580	>
581	<NumberComponent noTitle>
582	{integrated}
583	</NumberComponent>{' '}
584	<small>
585	({((100 * integrated) / signatures).toFixed(1)}
586	%)
587	</small>
588	</Link>
589	</td>
590	</tr>
591	);
592	},
593	)}
594	</tbody>
595	</table>
596
597	<p className={f('small', 'margin-top-small')}>
598	We use{' '}
599	<Link
600	href="http://old.protein.bio.unipd.it/mobidblite/"
601	className={f('ext')}
602	target="_blank"
603	>
604	MobiDB-lite
605	</Link>
606	, a derivative of the
607	<Link
608	href="https://mobidb.org/"
609	className={f('ext')}
610	target="_blank"
611	>
612	MobiDB
613	</Link>{' '}
614	database, to provide consensus annotation of long-range intrinsic
615	disorder in protein sequences. Read more about MobiDB-lite in{' '}
616	<i>Bioinformatics</i>, 33(9), 2017, 1402–1404, (
617	<Link
618	href="https://doi.org/10.1093/bioinformatics/btx015"
619	className={f('ext')}
620	target="_blank"
621	>
622	doi: 10.1093/bioinformatics/btx015
623	</Link>
624	).
625	</p>
626
627	<h4>InterPro2GO</h4>
628	<p>
629	We have a total number of{' '}
630	<NumberComponent noTitle>
631	{content.interpro.go_terms}
632	</NumberComponent>{' '}
633	GO terms mapped to InterPro entries.
634	</p>
635
636	<p>
637	<Link href="https://ftp.ebi.ac.uk/pub/databases/interpro/current_release/interpro2go">
638	List of InterPro2GO mappings
639	</Link>
640	. These are also available through the EBI GO browser{' '}
641	<Link
642	href="https://www.ebi.ac.uk/QuickGO/"
643	className={f('ext')}
644	target="_blank"
645	>
646	QuickGO
647	</Link>
648	</p>
649	<ProteinInfo proteins={content.proteins} />
650
651	{['structures', 'proteomes', 'taxonomy'].map((key) => (
652	<EndpointInfo	×
653	key={key}
654	label={sourceDB.get(key)}
655	endpoint={key}
656	info={content[key]}
657	/>
658	))}
659	<section>
660	<h3>Sets Information</h3>
661
662	<table className={f('light', 'margin-top-large')}>
663	<thead>
664	<tr>
665	<th>Database</th>
666	<th>Version</th>
667	<th>Count</th>
668	</tr>
669	</thead>
670	<tbody>
671	{sets.map(({ name, sets, version }) => (
672	<tr key={name}>	×
673	<td>{name}</td>
674	<td>{version}</td>
675	<td>
676	<NumberComponent noTitle>{sets}</NumberComponent>
677	</td>
678	</tr>
679	))}
680	</tbody>
681	</table>
682	</section>
683	</section>
684	</div>
685	</div>
686	);
687	}
688	}
689	const getReleaseNotesUrl = createSelector(	×
690	(state) => state.settings.api,	×
691	(state) => state.customLocation.description.other,	×
692	({ protocol, hostname, port, root }, other) =>
693	cleanUpMultipleSlashes(	×
694	format({
695	protocol,
696	hostname,
697	port,
698	pathname: `${root}/utils/release/${
699	other.length > 1 ? other[1] : 'current'	×
700	}`,
701	}),
702	),
703	);
704
705	const mapStateToProps = createSelector(	×
706	(state) => state.customLocation.description,	×
707	(description) => ({ description }),	×
708	);
709	export default connect(mapStateToProps)(
710	loadData(getReleaseNotesUrl)(ReleaseNotes),
711	);

ProteinsWebTeam / interpro7-client / 9225096268

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous