9662881245

Committed 25 Jun 2024 12:57PM UTC coverage: 21.553% (-0.01%) from 21.565%

Build # 9662881245

Build Type

push

github

Committed by

gustavo-salazar

Commit Message

Merge branch 'dev' of https://github.com/ProteinsWebTeam/interpro7-client into dev

Run Details

570 of 3522 branches covered (16.18%)

Branch coverage included in aggregate %.

2 of 4 new or added lines in 4 files covered. (50.0%)

6 existing lines in 2 files now uncovered.

1326 of 5275 relevant lines covered (25.14%)

68.62 hits per line

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

0.0

/src/pages/Set/index.js

// @flow
import React, { PureComponent } from 'react';
import T from 'prop-types';
import { dataPropType } from 'higherOrder/loadData/dataPropTypes';

import Link from 'components/generic/Link';
// $FlowFixMe
import MemberDBSelector from 'components/MemberDBSelector';
import Table, {
  Column,
  SearchBox,
  PageSizeSelector,
  Exporter,
  Card,
  HighlightToggler,
} from 'components/Table';
// $FlowFixMe
import HighlightedText from 'components/SimpleCommonComponents/HighlightedText';
// $FlowFixMe
import SetCard from 'components/Set/Card';
import NumberComponent from 'components/NumberComponent';
// $FlowFixMe
import File from 'components/File';
// $FlowFixMe
import APIViewButton from 'components/Table/Exporter/APIViewButton';

import loadable from 'higherOrder/loadable';

import {
  schemaProcessDataTable,
  schemaProcessDataTableRow,
} from 'schema_org/processors';

import EndPointPage from '../endpoint-page';
import subPages from 'subPages';
import config from 'config';

import { setDBs } from 'utils/processDescription/handlers';

import { foundationPartial } from 'styles/foundation';

import ebiGlobalStyles from 'ebi-framework/css/ebi-global.css';
import pageStyle from '../style.css';
import fonts from 'EBI-Icon-fonts/fonts.css';
import ipro from 'styles/interpro-new.css';
import exporterStyle from 'components/Table/Exporter/style.css';
import filtersAndTable from 'components/FiltersPanel/filters-and-table.css';

const f = foundationPartial(
  ebiGlobalStyles,
  fonts,
  pageStyle,
  ipro,
  exporterStyle,
  filtersAndTable,
);

const propTypes = {
  data: dataPropType.isRequired,
  loading: T.bool,
  isStale: T.bool.isRequired,
  customLocation: T.shape({
    description: T.object.isRequired,
    search: T.object.isRequired,
  }).isRequired,
  dataBase: dataPropType,
};
const AllSetDownload = (
  {
    description,
    search,
    count,
    fileType,
  } /*: {description: Object, search: Object, count: number, fileType: string} */,
) => (
  <File
    fileType={fileType}
    name={`sets.${fileType}`}
    count={count}
    customLocationDescription={description}
    search={{ ...search, extra_fields: 'counters:entry-protein' }}
    endpoint={'set'}
  />
);
AllSetDownload.propTypes = {
  description: T.object,
  search: T.object,
  count: T.number,
  fileType: T.string,
};

/*:: type ListProps = {
  data: {
   payload: Object,
   loading: boolean,
   ok: boolean,
   url: string,
   status: number
  },
  isStale: boolean,
  loading: boolean,
  customLocation: {
    description: Object,
    search: Object
  },
  dataBase: {
   payload: Object,
   loading: boolean
  }
};*/
class List extends PureComponent /*:: <ListProps> */ {
  static propTypes = propTypes;

  render() {
    const {
      data: { payload, loading, ok, url, status },
      isStale,
      customLocation: { description, search },
      dataBase,
    } = this.props;
    let _payload = payload;
    const {
      set: { db: dbS },
      entry: { db: dbE },
    } = description;

    const HTTP_OK = 200;
    const notFound = !loading && status !== HTTP_OK;
    const databases = dataBase?.payload?.databases;
    const db = (dbE || dbS).toLowerCase();
    const dbAll = { canonical: 'ALL', name: 'All', version: 'N/A' };
    if (loading || notFound) {
      _payload = {
        results: [],
        count: 0,
        next: null,
        previous: null,
      };
    }
    return (
      <div className={f('row', 'filters-and-table')}>
        <nav>
          <div className={f('browse-side-panel')}>
            <div className={f('selector-container')}>
              <MemberDBSelector
                contentType="set"
                className="pp-left-side-db-selector"
              />
            </div>
            <hr style={{ paddingTop: '0.5rem' }} />
          </div>
        </nav>
        <section>
          {databases && (
            <SchemaOrgData
              data={{
                data: {
                  db: db.toLowerCase() === 'all' ? dbAll : databases[db],
                },
                location: window.location,
              }}
              processData={schemaProcessDataTable}
            />
          )}

          <Table
            dataTable={_payload.results}
            contentType="set"
            loading={loading}
            ok={ok}
            status={status}
            isStale={isStale}
            actualSize={_payload.count}
            query={search}
            notFound={notFound}
            databases={databases}
            nextAPICall={_payload.next}
            previousAPICall={_payload.previous}
            currentAPICall={url}
          >
            <Exporter>
              <div className={f('menu-grid')}>
                <label htmlFor="json">JSON</label>
                <AllSetDownload
                  name="json"
                  description={description}
                  search={search}
                  count={_payload.count}
                  fileType="json"
                />
                <label htmlFor="tsv">TSV</label>
                <AllSetDownload
                  name="tsv"
                  description={description}
                  search={search}
                  count={_payload.count}
                  fileType="tsv"
                />
                <label htmlFor="api">API</label>
                <APIViewButton url={url} />
              </div>
            </Exporter>
            <PageSizeSelector />
            <Card>
              {(data) => (
                <SetCard data={data} search={search.search} entryDB={dbE} />
              )}
            </Card>
            <SearchBox loading={isStale}>Search entry sets</SearchBox>
            <HighlightToggler />
            <Column
              dataKey="accession"
              isSortable={true}
              // eslint-disable-next-line camelcase
              renderer={(accession /*: string */, row) => (
                <Link
                  to={(customLocation) => ({
                    ...customLocation,
                    description: {
                      main: { key: 'set' },
                      set: {
                        db: row.source_database,
                        accession,
                      },
                    },
                  })}
                >
                  <span className={f('acc-row')}>
                    <SchemaOrgData
                      data={{
                        data: { row, endpoint: 'set' },
                        location: window.location,
                      }}
                      processData={schemaProcessDataTableRow}
                    />
                    <HighlightedText
                      text={accession}
                      textToHighlight={search.search}
                    />
                  </span>
                </Link>
              )}
            >
              Accession
            </Column>
            <Column
              dataKey="name"
              renderer={(
                name /*: string */,
                {
                  accession,
                  // eslint-disable-next-line camelcase
                  source_database: db,
                } /*: {accession: string, source_database: string} */,
              ) => (
                <Link
                  to={(customLocation) => ({
                    ...customLocation,
                    description: {
                      main: { key: 'set' },
                      set: {
                        db,
                        accession,
                      },
                    },
                  })}
                >
                  <HighlightedText
                    text={name}
                    textToHighlight={search.search}
                  />
                </Link>
              )}
            >
              Name
            </Column>
            <Column
              dataKey="accession"
              defaultKey="entry-count"
              renderer={(
                accession /*: string */,
                {
                  source_database: sourceDB,
                } /*: {accession: string, source_database: string} */,
                extra,
              ) => {
                const count =
                  extra?.counters?.entries?.total ||
                  extra?.counters?.entries ||
                  '-';
                return (
                  <Link
                    to={(customLocation) => ({
                      ...customLocation,
                      description: {
                        main: { key: 'set' },
                        set: {
                          db: sourceDB,
                          accession,
                        },
                        entry: {
                          isFilter: true,
                          db: sourceDB,
                        },
                      },
                    })}
                  >
                    <NumberComponent loading={loading} abbr>
                      {count}
                    </NumberComponent>
                  </Link>
                );
              }}
            >
              Number of Entries
            </Column>
            <Column
              dataKey="source_database"
              renderer={(
                accession /*: string */,
                {
                  source_database: sourceDB,
                } /*: {accession: string, source_database: string} */,
              ) => {
                return <div>{databases?.[sourceDB]?.name}</div>;
              }}
            >
              Source Database
            </Column>
          </Table>
        </section>
      </div>
    );
  }
}

const SummaryAsync = loadable({
  loader: () =>
    // $FlowFixMe
    import(/* webpackChunkName: "set-summary" */ 'components/Set/Summary'),
});

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

const subPagesForSet = new Map();
for (const subPage of config.pages.set.subPages) {
  subPagesForSet.set(subPage, subPages.get(subPage));
}

const dbAccs = new RegExp(
  Array.from(setDBs)
    .map((db) => db.re.source)
    .filter((db) => db)
    .join('|'),
  'i',
);

const EntrySet = () => (
  <EndPointPage
    subpagesRoutes={dbAccs}
    listOfEndpointEntities={List}
    SummaryAsync={SummaryAsync}
    subPagesForEndpoint={subPagesForSet}
  />
);

export default EntrySet;

1	// @flow
2	import React, { PureComponent } from 'react';
3	import T from 'prop-types';
4	import { dataPropType } from 'higherOrder/loadData/dataPropTypes';
5
6	import Link from 'components/generic/Link';
7	// $FlowFixMe
8	import MemberDBSelector from 'components/MemberDBSelector';
9	import Table, {
10	Column,
11	SearchBox,
12	PageSizeSelector,
13	Exporter,
14	Card,
15	HighlightToggler,
16	} from 'components/Table';
17	// $FlowFixMe
18	import HighlightedText from 'components/SimpleCommonComponents/HighlightedText';
19	// $FlowFixMe
20	import SetCard from 'components/Set/Card';
21	import NumberComponent from 'components/NumberComponent';
22	// $FlowFixMe
23	import File from 'components/File';
24	// $FlowFixMe
25	import APIViewButton from 'components/Table/Exporter/APIViewButton';
26
27	import loadable from 'higherOrder/loadable';
28
29	import {
30	schemaProcessDataTable,
31	schemaProcessDataTableRow,
32	} from 'schema_org/processors';
33
34	import EndPointPage from '../endpoint-page';
35	import subPages from 'subPages';
36	import config from 'config';
37
38	import { setDBs } from 'utils/processDescription/handlers';
39
40	import { foundationPartial } from 'styles/foundation';
41
42	import ebiGlobalStyles from 'ebi-framework/css/ebi-global.css';
43	import pageStyle from '../style.css';
44	import fonts from 'EBI-Icon-fonts/fonts.css';
45	import ipro from 'styles/interpro-new.css';
46	import exporterStyle from 'components/Table/Exporter/style.css';
47	import filtersAndTable from 'components/FiltersPanel/filters-and-table.css';
48
49	const f = foundationPartial(	×
50	ebiGlobalStyles,
51	fonts,
52	pageStyle,
53	ipro,
54	exporterStyle,
55	filtersAndTable,
56	);
57
58	const propTypes = {	×
59	data: dataPropType.isRequired,
60	loading: T.bool,
61	isStale: T.bool.isRequired,
62	customLocation: T.shape({
63	description: T.object.isRequired,
64	search: T.object.isRequired,
65	}).isRequired,
66	dataBase: dataPropType,
67	};
68	const AllSetDownload = (	×
69	{
70	description,
71	search,
72	count,
73	fileType,
74	} /: {description: Object, search: Object, count: number, fileType: string} /,
75	) => (
76	<File	×
77	fileType={fileType}
78	name={`sets.${fileType}`}
79	count={count}
80	customLocationDescription={description}
81	search={{ ...search, extra_fields: 'counters:entry-protein' }}
82	endpoint={'set'}
83	/>
84	);
85	AllSetDownload.propTypes = {	×
86	description: T.object,
87	search: T.object,
88	count: T.number,
89	fileType: T.string,
90	};
91
92	/*:: type ListProps = {
93	data: {
94	payload: Object,
95	loading: boolean,
96	ok: boolean,
97	url: string,
98	status: number
99	},
100	isStale: boolean,
101	loading: boolean,
102	customLocation: {
103	description: Object,
104	search: Object
105	},
106	dataBase: {
107	payload: Object,
108	loading: boolean
109	}
110	};*/
111	class List extends PureComponent /:: <ListProps> / {
112	static propTypes = propTypes;	×
113
114	render() {
115	const {
116	data: { payload, loading, ok, url, status },
117	isStale,
118	customLocation: { description, search },
119	dataBase,
120	} = this.props;	×
121	let _payload = payload;	×
122	const {
123	set: { db: dbS },
124	entry: { db: dbE },
125	} = description;	×
126
127	const HTTP_OK = 200;	×
128	const notFound = !loading && status !== HTTP_OK;	×
129	const databases = dataBase?.payload?.databases;	×
130	const db = (dbE \|\| dbS).toLowerCase();	×
131	const dbAll = { canonical: 'ALL', name: 'All', version: 'N/A' };	×
132	if (loading \|\| notFound) {	×
133	_payload = {	×
134	results: [],
135	count: 0,
136	next: null,
137	previous: null,
138	};
139	}
140	return (	×
141	<div className={f('row', 'filters-and-table')}>
142	<nav>
143	<div className={f('browse-side-panel')}>
144	<div className={f('selector-container')}>
145	<MemberDBSelector
146	contentType="set"
147	className="pp-left-side-db-selector"
148	/>
149	</div>
150	<hr style={{ paddingTop: '0.5rem' }} />
151	</div>
152	</nav>
153	<section>
154	{databases && (	×
155	<SchemaOrgData
156	data={{
157	data: {
158	db: db.toLowerCase() === 'all' ? dbAll : databases[db],	×
159	},
160	location: window.location,
161	}}
162	processData={schemaProcessDataTable}
163	/>
164	)}
165
166	<Table
167	dataTable={_payload.results}
168	contentType="set"
169	loading={loading}
170	ok={ok}
171	status={status}
172	isStale={isStale}
173	actualSize={_payload.count}
174	query={search}
175	notFound={notFound}
176	databases={databases}
177	nextAPICall={_payload.next}
178	previousAPICall={_payload.previous}
179	currentAPICall={url}
180	>
181	<Exporter>
182	<div className={f('menu-grid')}>
183	<label htmlFor="json">JSON</label>
184	<AllSetDownload
185	name="json"
186	description={description}
187	search={search}
188	count={_payload.count}
189	fileType="json"
190	/>
191	<label htmlFor="tsv">TSV</label>
192	<AllSetDownload
193	name="tsv"
194	description={description}
195	search={search}
196	count={_payload.count}
197	fileType="tsv"
198	/>
199	<label htmlFor="api">API</label>
200	<APIViewButton url={url} />
201	</div>
202	</Exporter>
203	<PageSizeSelector />
204	<Card>
205	{(data) => (
206	<SetCard data={data} search={search.search} entryDB={dbE} />	×
207	)}
208	</Card>
209	<SearchBox loading={isStale}>Search entry sets</SearchBox>
210	<HighlightToggler />
211	<Column
212	dataKey="accession"
213	isSortable={true}
214	// eslint-disable-next-line camelcase
215	renderer={(accession /: string /, row) => (
216	<Link	×
217	to={(customLocation) => ({	×
218	...customLocation,
219	description: {
220	main: { key: 'set' },
221	set: {
222	db: row.source_database,
223	accession,
224	},
225	},
226	})}
227	>
228	<span className={f('acc-row')}>
229	<SchemaOrgData
230	data={{
231	data: { row, endpoint: 'set' },
232	location: window.location,
233	}}
234	processData={schemaProcessDataTableRow}
235	/>
236	<HighlightedText
237	text={accession}
238	textToHighlight={search.search}
239	/>
240	</span>
241	</Link>
242	)}
243	>
244	Accession
245	</Column>
246	<Column
247	dataKey="name"
248	renderer={(
249	name /: string /,
250	{
251	accession,
252	// eslint-disable-next-line camelcase
253	source_database: db,
254	} /: {accession: string, source_database: string} /,
255	) => (
256	<Link	×
257	to={(customLocation) => ({	×
258	...customLocation,
259	description: {
260	main: { key: 'set' },
261	set: {
262	db,
263	accession,
264	},
265	},
266	})}
267	>
268	<HighlightedText
269	text={name}
270	textToHighlight={search.search}
271	/>
272	</Link>
273	)}
274	>
275	Name
276	</Column>
277	<Column
278	dataKey="accession"
279	defaultKey="entry-count"
280	renderer={(
281	accession /: string /,
282	{
283	source_database: sourceDB,
284	} /: {accession: string, source_database: string} /,
285	extra,
286	) => {
287	const count =
NEW 288	extra?.counters?.entries?.total \|\|	×
289	extra?.counters?.entries \|\|
290	'-';
UNCOV 291	return (	×
292	<Link
293	to={(customLocation) => ({	×
294	...customLocation,
295	description: {
296	main: { key: 'set' },
297	set: {
298	db: sourceDB,
299	accession,
300	},
301	entry: {
302	isFilter: true,
303	db: sourceDB,
304	},
305	},
306	})}
307	>
308	<NumberComponent loading={loading} abbr>
309	{count}
310	</NumberComponent>
311	</Link>
312	);
313	}}
314	>
315	Number of Entries
316	</Column>
317	<Column
318	dataKey="source_database"
319	renderer={(
320	accession /: string /,
321	{
322	source_database: sourceDB,
323	} /: {accession: string, source_database: string} /,
324	) => {
325	return <div>{databases?.[sourceDB]?.name}</div>;	×
326	}}
327	>
328	Source Database
329	</Column>
330	</Table>
331	</section>
332	</div>
333	);
334	}
335	}
336
337	const SummaryAsync = loadable({	×
338	loader: () =>
339	// $FlowFixMe
340	import(/* webpackChunkName: "set-summary" */ 'components/Set/Summary'),	×
341	});
342
343	const SchemaOrgData = loadable({	×
344	loader: () => import(/* webpackChunkName: "schemaOrg" */ 'schema_org'),	×
345	loading: () => null,	×
346	});
347
348	const subPagesForSet = new Map();	×
349	for (const subPage of config.pages.set.subPages) {	×
350	subPagesForSet.set(subPage, subPages.get(subPage));	×
351	}
352
353	const dbAccs = new RegExp(	×
354	Array.from(setDBs)
355	.map((db) => db.re.source)	×
356	.filter((db) => db)	×
357	.join('\|'),
358	'i',
359	);
360
361	const EntrySet = () => (	×
362	<EndPointPage	×
363	subpagesRoutes={dbAccs}
364	listOfEndpointEntities={List}
365	SummaryAsync={SummaryAsync}
366	subPagesForEndpoint={subPagesForSet}
367	/>
368	);
369
370	export default EntrySet;

ProteinsWebTeam / interpro7-client / 9662881245

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