9972558148

Committed 17 Jul 2024 10:17AM UTC coverage: 22.791% (-0.006%) from 22.797%

Build # 9972558148

Build Type

push

github

Committed by

matthiasblum

Commit Message

Closes #639: order InterPro releases by version number

Run Details

541 of 3046 branches covered (17.76%)

Branch coverage included in aggregate %.

0 of 3 new or added lines in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

1221 of 4685 relevant lines covered (26.06%)

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

ProteinsWebTeam / interpro7-client / 9972558148

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