8282047685

Committed 14 Mar 2024 02:03PM UTC coverage: 23.091% (-0.6%) from 23.713%

Build # 8282047685

Build Type

Pull #596

github

Committed by

web-flow

Commit Message

Merge pull request #598 from ProteinsWebTeam/ipscan-pagination

improving numeric pagination

Pull Request Pull Request #596: Client for InterPro 99.0

Run Details

725 of 4316 branches covered (16.8%)

Branch coverage included in aggregate %.

15 of 48 new or added lines in 15 files covered. (31.25%)

13 existing lines in 9 files now uncovered.

1764 of 6463 relevant lines covered (27.29%)

56.75 hits per line

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

0.0

/src/components/IPScan/SubJobsBrowser/index.js

// @flow
import React, { useRef, useEffect, useState } from 'react';
import T from 'prop-types';

import { connect } from 'react-redux';
import { createSelector } from 'reselect';

import { IPscanRegex } from 'utils/processDescription/handlers';
import Link from 'components/generic/Link';

import { foundationPartial } from 'styles/foundation';
import theme from 'styles/theme-interpro.css';
import blocks from 'styles/blocks.css';
import style from './style.css';

const f = foundationPartial(theme, style, blocks);

/*::
type Props ={
  accession: string,
  jobs: {
    remoteID: string,
    localTitle: string,
  }[]
}
  */

const SubJobsBrowser = ({ jobs, accession } /*: Props */) => {
  const scroller /*: { current: null | HTMLDivElement } */ = useRef(null);
  const [currentJob, setCurrentJob] = useState(0);
  useEffect(() => {
    scroller.current?.addEventListener('scroll', () => {
      const first = Array.from(scroller.current?.querySelectorAll('div') || [])
        .map((e, i) => ({
          id: e.id,
          left: e.getBoundingClientRect().left,
          position: i,
        }))
        .filter(({ left }) => left >= 0)?.[0];
      if (first && currentJob !== first.position) setCurrentJob(first.position);
    });
  }, [scroller.current]);
  if ((jobs?.length || 0) < 2) return null;

  const scroll = (next /*: boolean */ = true) => {
    if (scroller?.current) {
      const itemSize =
        (next ? 1 : -1) *
        (scroller?.current?.querySelector('div')?.clientWidth || 0);
      scroller?.current?.scrollBy(itemSize, 0);
    }
  };
  const scrollNext = () => scroll(true);
  const scrollPrev = () => scroll(false);
  return (
    <section className={f('simple-box', 'jobs-browser')}>
      <header>
        This result was part of a multiple ({jobs.length}) sequence job. You can
        choose another sequence below:
      </header>
      <main>
        <button onClick={scrollPrev}>◀︎</button>

        <div className={f('job-slider')}>
          <div className={f('slides')} ref={scroller}>
            {jobs.map(({ remoteID, localTitle }) => (
              <div key={remoteID} id={remoteID}>
                {remoteID === accession ? (
                  <b>{localTitle}</b>
                ) : (
                  <Link
                    to={{
                      description: {
                        main: { key: 'result' },
                        result: { type: 'InterProScan', accession: remoteID },
                      },
                    }}
                  >
                    {localTitle}
                  </Link>
                )}
              </div>
            ))}
          </div>
        </div>
        <button onClick={scrollNext}>►</button>
      </main>
    </section>
  );
};
SubJobsBrowser.propTypes = {
  jobs: T.arrayOf(T.object),
  accession: T.string,
};

const mapStateToProps = createSelector(
  (state) => state.customLocation.description.result.accession,
  (state) => state.jobs,
  (accession, jobs) => {
    const matches = accession.match(IPscanRegex);
    const posfix = matches[2] || matches[3];
    if (!posfix || !posfix.startsWith('-')) return {};
    const jobIDBase = accession.slice(0, -posfix.length);
    // prettier-ignore
    const relatedJobs = (Object.values(jobs)/*: any*/)
      .map(({ metadata }) => metadata)
      .filter(({ remoteID }) => remoteID.startsWith(jobIDBase));
    return { jobs: relatedJobs, accession };
  },
);

export default connect(mapStateToProps)(SubJobsBrowser);

1	// @flow
2	import React, { useRef, useEffect, useState } from 'react';
3	import T from 'prop-types';
4
5	import { connect } from 'react-redux';
6	import { createSelector } from 'reselect';
7
8	import { IPscanRegex } from 'utils/processDescription/handlers';
9	import Link from 'components/generic/Link';
10
11	import { foundationPartial } from 'styles/foundation';
12	import theme from 'styles/theme-interpro.css';
13	import blocks from 'styles/blocks.css';
14	import style from './style.css';
15
NEW 16	const f = foundationPartial(theme, style, blocks);	×
17
18	/*::
19	type Props ={
20	accession: string,
21	jobs: {
22	remoteID: string,
23	localTitle: string,
24	}[]
25	}
26	*/
27
28	const SubJobsBrowser = ({ jobs, accession } /: Props /) => {	×
29	const scroller /: { current: null \| HTMLDivElement } / = useRef(null);	×
30	const [currentJob, setCurrentJob] = useState(0);	×
31	useEffect(() => {	×
32	scroller.current?.addEventListener('scroll', () => {	×
33	const first = Array.from(scroller.current?.querySelectorAll('div') \|\| [])	×
34	.map((e, i) => ({	×
35	id: e.id,
36	left: e.getBoundingClientRect().left,
37	position: i,
38	}))
39	.filter(({ left }) => left >= 0)?.[0];	×
40	if (first && currentJob !== first.position) setCurrentJob(first.position);	×
41	});
42	}, [scroller.current]);
43	if ((jobs?.length \|\| 0) < 2) return null;	×
44
45	const scroll = (next /: boolean / = true) => {	×
46	if (scroller?.current) {	×
47	const itemSize =
48	(next ? 1 : -1) *	×
49	(scroller?.current?.querySelector('div')?.clientWidth \|\| 0);	×
50	scroller?.current?.scrollBy(itemSize, 0);	×
51	}
52	};
53	const scrollNext = () => scroll(true);	×
54	const scrollPrev = () => scroll(false);	×
55	return (	×
56	<section className={f('simple-box', 'jobs-browser')}>
57	<header>
58	This result was part of a multiple ({jobs.length}) sequence job. You can
59	choose another sequence below:
60	</header>
61	<main>
62	<button onClick={scrollPrev}>◀︎</button>
63
64	<div className={f('job-slider')}>
65	<div className={f('slides')} ref={scroller}>
66	{jobs.map(({ remoteID, localTitle }) => (
67	<div key={remoteID} id={remoteID}>	×
68	{remoteID === accession ? (	×
69	<b>{localTitle}</b>
70	) : (
71	<Link
72	to={{
73	description: {
74	main: { key: 'result' },
75	result: { type: 'InterProScan', accession: remoteID },
76	},
77	}}
78	>
79	{localTitle}
80	</Link>
81	)}
82	</div>
83	))}
84	</div>
85	</div>
86	<button onClick={scrollNext}>►</button>
87	</main>
88	</section>
89	);
90	};
91	SubJobsBrowser.propTypes = {	×
92	jobs: T.arrayOf(T.object),
93	accession: T.string,
94	};
95
96	const mapStateToProps = createSelector(	×
97	(state) => state.customLocation.description.result.accession,	×
98	(state) => state.jobs,	×
99	(accession, jobs) => {
100	const matches = accession.match(IPscanRegex);	×
101	const posfix = matches[2] \|\| matches[3];	×
102	if (!posfix \|\| !posfix.startsWith('-')) return {};	×
103	const jobIDBase = accession.slice(0, -posfix.length);	×
104	// prettier-ignore
105	const relatedJobs = (Object.values(jobs)/: any/)	×
106	.map(({ metadata }) => metadata)	×
107	.filter(({ remoteID }) => remoteID.startsWith(jobIDBase));	×
108	return { jobs: relatedJobs, accession };	×
109	},
110	);
111
112	export default connect(mapStateToProps)(SubJobsBrowser);

ProteinsWebTeam / interpro7-client / 8282047685

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