10282739614

Committed 07 Aug 2024 10:35AM UTC coverage: 21.345% (-1.5%) from 22.889%

Build # 10282739614

Build Type

Pull #653

github

Committed by

web-flow

Commit Message

Merge 4e08c5e91 into 59ab51973

Pull Request Pull Request #653: Ts redux

Run Details

401 of 2365 branches covered (16.96%)

Branch coverage included in aggregate %.

5 of 17 new or added lines in 7 files covered. (29.41%)

7 existing lines in 3 files now uncovered.

897 of 3716 relevant lines covered (24.14%)

96.0 hits per line

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

21.11

/src/components/BreadCrumbs/index.js

import React from 'react';
import T from 'prop-types';
// $FlowFixMe
import { customLocationSelector } from 'reducers/custom-location';

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

import Link from 'components/generic/Link';

import { foundationPartial } from 'styles/foundation';
import fonts from 'EBI-Icon-fonts/fonts.css';
import styles from './style.css';
import config from 'config';

const f = foundationPartial(fonts, styles);

/*::
  type Endpoint ={
    detail: string,
    db: string,
    accession: string,
    isFilter: boolean,
    order: number,
  }
  type SearchLocation = {
    type: string,
    value: string,
    accession: string,
    isFilter: boolean,
    order: number,
  }
  type Location = {
    main: {
      key: string,
      isFilter: boolean,
      order: number,
    },
    search: SearchLocation,
    result: SearchLocation,
    [string]: Endpoint,
    other: Array<string>,
  }
*/

const locationType = T.shape({
  main: T.shape({ key: T.string }),
  entry: T.shape({
    detail: T.string,
    db: T.string,
    accession: T.string,
    isFilter: T.bool,
    order: T.number,
  }),
  other: T.arrayOf(T.string),
});
const BreadCrumb = (
  { to, children } /*: {
    children: any,
    to?: function | {description: Object}} */,
) => {
  const childrenToPass =
    typeof children === 'string' ? children.replace(/_/g, ' ') : children;
  return (
    <span>
      {' / '}
      {to ? (
        <Link to={to} className={f('breadcrumb-link')}>
          {childrenToPass}
        </Link>
      ) : (
        childrenToPass
      )}{' '}
    </span>
  );
};
BreadCrumb.propTypes = {
  to: T.oneOfType([T.func, T.object]),
  children: T.any,
};

const BreadCrumbsForOther = ({ other } /*: { other: Array<string>} */) => {
  if (!other.length) return null;
  return (
    <section className={f('main')}>
      {other.map((part, i) => (
        <BreadCrumb
          key={i}
          to={{
            description: { other: other.slice(0, i + 1) },
          }}
        >
          {part}
        </BreadCrumb>
      ))}
    </section>
  );
};
BreadCrumbsForOther.propTypes = {
  other: T.arrayOf(T.string),
};

const BreadCrumbsForSearchOrResult = (
  { location } /*: {location: Location} */,
) => {
  if (!['search', 'result'].includes(location?.main?.key)) return null;
  // $FlowFixMe[incompatible-type]
  const key /*: 'search' | 'result' */ = location.main.key;
  const { type, value, job, accession } = location[key];
  return (
    <>
      <section className={f('main')}>
        <BreadCrumb to={{ description: { main: location.main } }}>
          {location.main.key}
        </BreadCrumb>
        <BreadCrumb
          to={{
            description: { main: location.main, [location.main.key]: { type } },
          }}
        >
          {type}
        </BreadCrumb>
        {job && (
          <BreadCrumb
            to={{
              description: {
                main: location.main,
                [location.main.key]: { type, job },
              },
            }}
          >
            {job}
          </BreadCrumb>
        )}
        {accession && (
          <BreadCrumb
            to={{
              description: {
                main: location.main,
                [location.main.key]: { type, job, accession },
              },
            }}
          >
            {accession}
          </BreadCrumb>
        )}
        {value && <BreadCrumb>{value}</BreadCrumb>}
      </section>
      {accession && <BreadCrumbForSecondPart location={location} />}
    </>
  );
};
BreadCrumbsForSearchOrResult.propTypes = {
  location: locationType,
};

const BreadCrumbForFilters = ({ location, filters }) => {
  return filters.map((ep) => {
    const { db, accession } = location[ep];
    return (
      <section className={f('filter')} key={ep}>
        <BreadCrumb
          to={{
            description: { ...location, [ep]: { db, isFilter: true } },
          }}
        >
          {ep}{' '}
        </BreadCrumb>
        <BreadCrumb
          to={{
            description: { ...location, [ep]: { db, isFilter: true } },
          }}
        >
          {db}
        </BreadCrumb>
        {accession && (
          <BreadCrumb
            to={{
              description: {
                ...location,
                [ep]: { db, accession, isFilter: true },
              },
            }}
          >
            {accession}
          </BreadCrumb>
        )}
      </section>
    );
  });
};
BreadCrumbForFilters.propTypes = {
  location: locationType,
  filters: T.arrayOf(T.string),
};

const BreadCrumbForEntityDetail = (
  {
    location,
    detail,
    filters = [],
  } /*: {location: Location, detail?: string, filters: Array<string>} */,
) => {
  const detailToRender = !filters.length && !detail ? ' Overview' : detail;
  return (
    <section className={f('detail')}>
      {detailToRender && (
        <BreadCrumb
          to={
            detail && {
              description: {
                ...location,
                [location.main.key]: {
                  ...location[location.main.key],
                  detail,
                },
              },
            }
          }
        >
          {detailToRender}
        </BreadCrumb>
      )}
      <BreadCrumbForFilters location={location} filters={filters} />
    </section>
  );
};
BreadCrumbForEntityDetail.propTypes = {
  location: locationType,
  filters: T.arrayOf(T.string),
  detail: T.string,
};

const BreadCrumbForSecondPart = ({ location } /*: {location: Location} */) => {
  const { accession, detail } = location[location.main.key];
  const filters = Object.keys(location)
    // $FlowFixMe[prop-missing]
    .filter((ep) => location[ep]?.isFilter)
    .sort(
      (ep1, ep2) =>
        // $FlowFixMe[prop-missing]
        location[ep1]?.order - location[ep2].order,
    );
  return (
    <section className={f('secondary')}>
      {accession ? (
        <BreadCrumbForEntityDetail
          location={location}
          detail={detail}
          filters={filters}
        />
      ) : (
        <BreadCrumbForFilters location={location} filters={filters} />
      )}
    </section>
  );
};
BreadCrumbForSecondPart.propTypes = {
  location: locationType,
};

const BreadCrumbsForBrowse = ({ location } /*: {location: Location} */) => {
  const endpoint = location?.main?.key;
  if (!config.endpoints.includes(endpoint)) return null;
  const { db, accession } = location[location.main.key];
  return (
    <>
      <section className={f('main')}>
        <BreadCrumb
          to={{
            description: { main: { key: 'entry' }, entry: { db: 'interpro' } },
          }}
        >
          Browse
        </BreadCrumb>
        <BreadCrumb
          to={{
            description: { main: { key: endpoint }, [endpoint]: { db } },
          }}
        >
          By{' '}
          {db && db.toLowerCase() === 'pfam' && endpoint.toLowerCase() === 'set'
            ? 'clan'
            : endpoint}{' '}
        </BreadCrumb>
        <BreadCrumb
          to={{
            description: { main: { key: endpoint }, [endpoint]: { db } },
          }}
        >
          {db}
        </BreadCrumb>
        {accession && (
          <BreadCrumb
            to={{
              description: {
                main: { key: endpoint },
                [endpoint]: { db, accession },
              },
            }}
          >
            {accession}{' '}
          </BreadCrumb>
        )}
      </section>
      <BreadCrumbForSecondPart location={location} />
    </>
  );
};
BreadCrumbsForBrowse.propTypes = {
  location: locationType,
};

const BreadCrumbs = (
  { location, hash } /*: {location: Location, hash: string} */,
) => {
  // Dont show if it is at home
  if (!location?.main?.key && !location?.other?.length) return null;
  return (
    <nav className={f('breadcrumbs')}>
      <Link to={{ description: {} }} className={f('breadcrumb-link')}>
        <span
          className={f('small', 'icon', 'icon-common')}
          data-icon="&#xf015;"
          aria-label={'Home'}
        />
      </Link>

      <BreadCrumbsForOther other={location?.other} />
      <BreadCrumbsForSearchOrResult location={location} />
      <BreadCrumbsForBrowse location={location} />
      {location?.main?.key === 'result' && hash?.startsWith('/') && (
        <BreadCrumb>API Download Form</BreadCrumb>
      )}
    </nav>
  );
};
BreadCrumbs.propTypes = {
  location: locationType,
  hash: T.string,
};

const mapStateToProps = createSelector(
  customLocationSelector,
  (customLocation) => ({
    location: customLocation.description,
    hash: customLocation.hash,
  }),
);

export default connect(mapStateToProps)(BreadCrumbs);

1	import React from 'react';
2	import T from 'prop-types';
3	// $FlowFixMe
4	import { customLocationSelector } from 'reducers/custom-location';
5
6	import { connect } from 'react-redux';
7	import { createSelector } from 'reselect';
8
9	import Link from 'components/generic/Link';
10
11	import { foundationPartial } from 'styles/foundation';
12	import fonts from 'EBI-Icon-fonts/fonts.css';
13	import styles from './style.css';
14	import config from 'config';
15
16	const f = foundationPartial(fonts, styles);	1✔
17
18	/*::
19	type Endpoint ={
20	detail: string,
21	db: string,
22	accession: string,
23	isFilter: boolean,
24	order: number,
25	}
26	type SearchLocation = {
27	type: string,
28	value: string,
29	accession: string,
30	isFilter: boolean,
31	order: number,
32	}
33	type Location = {
34	main: {
35	key: string,
36	isFilter: boolean,
37	order: number,
38	},
39	search: SearchLocation,
40	result: SearchLocation,
41	[string]: Endpoint,
42	other: Array<string>,
43	}
44	*/
45
46	const locationType = T.shape({	1✔
47	main: T.shape({ key: T.string }),
48	entry: T.shape({
49	detail: T.string,
50	db: T.string,
51	accession: T.string,
52	isFilter: T.bool,
53	order: T.number,
54	}),
55	other: T.arrayOf(T.string),
56	});
57	const BreadCrumb = (	1✔
58	{ to, children } /*: {
59	children: any,
60	to?: function \| {description: Object}} */,
61	) => {
62	const childrenToPass =
63	typeof children === 'string' ? children.replace(/_/g, ' ') : children;	×
64	return (	×
65	<span>
66	{' / '}
67	{to ? (	×
68	<Link to={to} className={f('breadcrumb-link')}>
69	{childrenToPass}
70	</Link>
71	) : (
72	childrenToPass
73	)}{' '}
74	</span>
75	);
76	};
77	BreadCrumb.propTypes = {	1✔
78	to: T.oneOfType([T.func, T.object]),
79	children: T.any,
80	};
81
82	const BreadCrumbsForOther = ({ other } /: { other: Array<string>} /) => {	1✔
83	if (!other.length) return null;	×
84	return (	×
85	<section className={f('main')}>
86	{other.map((part, i) => (
87	<BreadCrumb	×
88	key={i}
89	to={{
90	description: { other: other.slice(0, i + 1) },
91	}}
92	>
93	{part}
94	</BreadCrumb>
95	))}
96	</section>
97	);
98	};
99	BreadCrumbsForOther.propTypes = {	1✔
100	other: T.arrayOf(T.string),
101	};
102
103	const BreadCrumbsForSearchOrResult = (	1✔
104	{ location } /: {location: Location} /,
105	) => {
106	if (!['search', 'result'].includes(location?.main?.key)) return null;	×
107	// $FlowFixMe[incompatible-type]
108	const key /: 'search' \| 'result' / = location.main.key;	×
NEW 109	const { type, value, job, accession } = location[key];	×
110	return (	×
111	<>
112	<section className={f('main')}>
113	<BreadCrumb to={{ description: { main: location.main } }}>
114	{location.main.key}
115	</BreadCrumb>
116	<BreadCrumb
117	to={{
118	description: { main: location.main, [location.main.key]: { type } },
119	}}
120	>
121	{type}
122	</BreadCrumb>
123	{job && (	×
124	<BreadCrumb
125	to={{
126	description: {
127	main: location.main,
128	[location.main.key]: { type, job },
129	},
130	}}
131	>
132	{job}
133	</BreadCrumb>
134	)}
135	{accession && (	×
136	<BreadCrumb
137	to={{
138	description: {
139	main: location.main,
140	[location.main.key]: { type, job, accession },
141	},
142	}}
143	>
144	{accession}
145	</BreadCrumb>
146	)}
147	{value && <BreadCrumb>{value}</BreadCrumb>}	×
148	</section>
149	{accession && <BreadCrumbForSecondPart location={location} />}	×
150	</>
151	);
152	};
153	BreadCrumbsForSearchOrResult.propTypes = {	1✔
154	location: locationType,
155	};
156
157	const BreadCrumbForFilters = ({ location, filters }) => {	1✔
158	return filters.map((ep) => {	×
159	const { db, accession } = location[ep];	×
160	return (	×
161	<section className={f('filter')} key={ep}>
162	<BreadCrumb
163	to={{
164	description: { ...location, [ep]: { db, isFilter: true } },
165	}}
166	>
167	{ep}{' '}
168	</BreadCrumb>
169	<BreadCrumb
170	to={{
171	description: { ...location, [ep]: { db, isFilter: true } },
172	}}
173	>
174	{db}
175	</BreadCrumb>
176	{accession && (	×
177	<BreadCrumb
178	to={{
179	description: {
180	...location,
181	[ep]: { db, accession, isFilter: true },
182	},
183	}}
184	>
185	{accession}
186	</BreadCrumb>
187	)}
188	</section>
189	);
190	});
191	};
192	BreadCrumbForFilters.propTypes = {	1✔
193	location: locationType,
194	filters: T.arrayOf(T.string),
195	};
196
197	const BreadCrumbForEntityDetail = (	1✔
198	{
199	location,
200	detail,
201	filters = [],	×
202	} /: {location: Location, detail?: string, filters: Array<string>} /,
203	) => {
204	const detailToRender = !filters.length && !detail ? ' Overview' : detail;	×
205	return (	×
206	<section className={f('detail')}>
207	{detailToRender && (	×
208	<BreadCrumb
209	to={
210	detail && {	×
211	description: {
212	...location,
213	[location.main.key]: {
214	...location[location.main.key],
215	detail,
216	},
217	},
218	}
219	}
220	>
221	{detailToRender}
222	</BreadCrumb>
223	)}
224	<BreadCrumbForFilters location={location} filters={filters} />
225	</section>
226	);
227	};
228	BreadCrumbForEntityDetail.propTypes = {	1✔
229	location: locationType,
230	filters: T.arrayOf(T.string),
231	detail: T.string,
232	};
233
234	const BreadCrumbForSecondPart = ({ location } /: {location: Location} /) => {	1✔
235	const { accession, detail } = location[location.main.key];	×
236	const filters = Object.keys(location)	×
237	// $FlowFixMe[prop-missing]
238	.filter((ep) => location[ep]?.isFilter)	×
239	.sort(
240	(ep1, ep2) =>
241	// $FlowFixMe[prop-missing]
242	location[ep1]?.order - location[ep2].order,	×
243	);
244	return (	×
245	<section className={f('secondary')}>
246	{accession ? (	×
247	<BreadCrumbForEntityDetail
248	location={location}
249	detail={detail}
250	filters={filters}
251	/>
252	) : (
253	<BreadCrumbForFilters location={location} filters={filters} />
254	)}
255	</section>
256	);
257	};
258	BreadCrumbForSecondPart.propTypes = {	1✔
259	location: locationType,
260	};
261
262	const BreadCrumbsForBrowse = ({ location } /: {location: Location} /) => {	1✔
263	const endpoint = location?.main?.key;	×
264	if (!config.endpoints.includes(endpoint)) return null;	×
265	const { db, accession } = location[location.main.key];	×
266	return (	×
267	<>
268	<section className={f('main')}>
269	<BreadCrumb
270	to={{
271	description: { main: { key: 'entry' }, entry: { db: 'interpro' } },
272	}}
273	>
274	Browse
275	</BreadCrumb>
276	<BreadCrumb
277	to={{
278	description: { main: { key: endpoint }, [endpoint]: { db } },
279	}}
280	>
281	By{' '}
282	{db && db.toLowerCase() === 'pfam' && endpoint.toLowerCase() === 'set'	×
283	? 'clan'
284	: endpoint}{' '}
285	</BreadCrumb>
286	<BreadCrumb
287	to={{
288	description: { main: { key: endpoint }, [endpoint]: { db } },
289	}}
290	>
291	{db}
292	</BreadCrumb>
293	{accession && (	×
294	<BreadCrumb
295	to={{
296	description: {
297	main: { key: endpoint },
298	[endpoint]: { db, accession },
299	},
300	}}
301	>
302	{accession}{' '}
303	</BreadCrumb>
304	)}
305	</section>
306	<BreadCrumbForSecondPart location={location} />
307	</>
308	);
309	};
310	BreadCrumbsForBrowse.propTypes = {	1✔
311	location: locationType,
312	};
313
314	const BreadCrumbs = (	1✔
315	{ location, hash } /: {location: Location, hash: string} /,
316	) => {
317	// Dont show if it is at home
318	if (!location?.main?.key && !location?.other?.length) return null;	×
319	return (	×
320	<nav className={f('breadcrumbs')}>
321	<Link to={{ description: {} }} className={f('breadcrumb-link')}>
322	<span
323	className={f('small', 'icon', 'icon-common')}
324	data-icon=""
325	aria-label={'Home'}
326	/>
327	</Link>
328
329	<BreadCrumbsForOther other={location?.other} />
330	<BreadCrumbsForSearchOrResult location={location} />
331	<BreadCrumbsForBrowse location={location} />
332	{location?.main?.key === 'result' && hash?.startsWith('/') && (	×
333	<BreadCrumb>API Download Form</BreadCrumb>
334	)}
335	</nav>
336	);
337	};
338	BreadCrumbs.propTypes = {	1✔
339	location: locationType,
340	hash: T.string,
341	};
342
343	const mapStateToProps = createSelector(	1✔
344	customLocationSelector,
345	(customLocation) => ({	×
346	location: customLocation.description,
347	hash: customLocation.hash,
348	}),
349	);
350
351	export default connect(mapStateToProps)(BreadCrumbs);

ProteinsWebTeam / interpro7-client / 10282739614

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