9019793472

Committed 09 May 2024 03:42PM UTC coverage: 22.901% (-0.3%) from 23.159%

Build # 9019793472

Build Type

Pull #609

github

Committed by

web-flow

Commit Message

Merge 7ca92a5d8 into b41f72107

Pull Request Pull Request #609: Interpro Button

Run Details

713 of 4248 branches covered (16.78%)

Branch coverage included in aggregate %.

5 of 23 new or added lines in 10 files covered. (21.74%)

36 existing lines in 5 files now uncovered.

1714 of 6350 relevant lines covered (26.99%)

57.71 hits per line

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

0.0

/src/subPages/EntryAlignments/index.js

import React, { useState, useEffect } from 'react';
import { dataPropType } from 'higherOrder/loadData/dataPropTypes';
import T from 'prop-types';

import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { goToCustomLocation } from 'actions/creators';

import { format } from 'url';
import descriptionToPath from 'utils/processDescription/descriptionToPath';

import Link from 'components/generic/Link';
import Tip from 'components/Tip';
import AlignmentViewer from './Viewer';
import DropDownButton from 'components/SimpleCommonComponents/DropDownButton';
// $FlowFixMe
import Button from 'components/SimpleCommonComponents/Button';

import { foundationPartial } from 'styles/foundation';
import localStyle from './style.css';
import ipro from 'styles/interpro-new.css';
import fonts from 'EBI-Icon-fonts/fonts.css';

const f = foundationPartial(localStyle, ipro, fonts);

const Alignment = ({
  type,
  numSequences,
  colorscheme,
  onConservationProgress,
  setDisplayingAlignment,
  setColorMap,
  overlayConservation,
}) => {
  const [forceShow, setForceShow] = useState(false);
  const threshold = 1000;
  const show = forceShow || numSequences < threshold;
  useEffect(() => {
    setDisplayingAlignment(show);
  }, [show]);
  useEffect(() => {
    setForceShow(false);
  }, [numSequences]);

  return (
    <div>
      {show ? (
        <AlignmentViewer
          onConservationProgress={onConservationProgress}
          setColorMap={setColorMap}
          type={type}
          num={numSequences}
          colorscheme={colorscheme}
          overlayConservation={overlayConservation}
        />
      ) : (
        <div>
          <p>
            This alignment has {numSequences} sequences. This can cause memory
            issues in your browser.
          </p>
          <p>
            <Button onClick={() => setForceShow(true)}>Open alignment</Button>
          </p>
        </div>
      )}
    </div>
  );
};
Alignment.propTypes = {
  type: T.string,
  numSequences: T.number,
  colorscheme: T.string,
  onConservationProgress: T.func,
  setDisplayingAlignment: T.func,
  setColorMap: T.func,
  overlayConservation: T.bool,
};

const AllowedColorschemes = [
  'buried_index',
  'clustal',
  'clustal2',
  'cinema',
  'helix_propensity',
  'hydro',
  'lesk',
  'mae',
  'nucleotide',
  'purine_pyrimidine',
  'strand_propensity',
  'taylor',
  'turn_propensity',
  'zappo',
];
const EntryAlignments = ({
  data,
  customLocation,
  type,
  url,
  showCtrlToZoomToast,
  goToCustomLocation,
}) => {
  const tag = 'alignment:';
  const [colorscheme, setColorscheme] = useState('clustal2');
  const [conservastionProgress, setConservastionProgress] = useState(0);
  // TODO: draw the legend using 👇🏽 the colorMap coming from events in the component.
  const [colorMap, setColorMap] = useState({});
  const [isDisplayingAlignment, setDisplayingAlignment] = useState(false);
  const [overlayConservation, setOverlayConservation] = useState(false);

  // eslint-disable-next-line camelcase
  const types = Object.entries(data?.payload?.metadata?.entry_annotations || {})
    .filter(([type]) => type.startsWith(tag))
    .map(([type, count]) => [type.slice(tag.length), count])
    .sort(([, aCount], [, bCount]) => aCount - bCount);
  if (!types.length) return null;
  const handleChange = (evt) => {
    goToCustomLocation({
      ...customLocation,
      search: { type: evt.target.value },
    });
  };
  const alignmentType = type || '';
  const conservationOptions =
    conservastionProgress === 1 ? {} : { disabled: true };
  return (
    <div className={f('row', 'column')}>
      {alignmentType !== '' && showCtrlToZoomToast ? (
        <Tip
          body="You can Zoom in/out by pressing [ctrl] and scroll up/down. Alternatively, you can  drag the borders in the navigation component."
          toastID="ctrlToZoom"
          settingsName="showCtrlToZoomToast"
        />
      ) : null}
      <label className={f('alignment-selector')}>
        <span>Available alignments:</span>
        <select
          value={alignmentType}
          onChange={handleChange}
          onBlur={handleChange}
        >
          <option value="" disabled>
            Choose...
          </option>
          {types.map(([type, count]) => (
            <option key={type} value={type}>
              {type} ({count.toLocaleString()})
            </option>
          ))}
        </select>
      </label>
      <div className={f('controllers')}>
        {alignmentType !== '' && (
          <>
            {isDisplayingAlignment && (
              <>
                <label>
                  Colors:
                  <select
                    value={colorscheme}
                    onChange={(evt) => setColorscheme(evt.target.value)}
                    onBlur={(evt) => setColorscheme(evt.target.value)}
                  >
                    {AllowedColorschemes.map((color) => (
                      <option key={color}>{color}</option>
                    ))}
                    <option {...conservationOptions}>
                      conservation
                      {conservastionProgress < 1
                        ? `[Calculating: ${(
                            conservastionProgress * 100
                          ).toFixed(2)}%]`
                        : ''}
                    </option>
                  </select>
                </label>
                <label className={f({ disabled: conservastionProgress < 1 })}>
                  Conservation:
                  <input
                    type="checkbox"
                    value={overlayConservation}
                    onChange={() =>
                      setOverlayConservation(!overlayConservation)
                    }
                    disabled={conservastionProgress < 1}
                  />
                </label>
                <DropDownButton
                  label="Legends"
                  extraClasses={f('dropdown-container')}
                >
                  <table className={f('legend-table')}>
                    <tbody>
                      {Object.entries(colorMap).map(([legend, color], i) => (
                        <tr key={i}>
                          <td style={{ background: color }}> </td>
                          <td>{legend}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </DropDownButton>
              </>
            )}
            <Link
              buttonType="secondary"
              href={`${url}${tag}${alignmentType}&download`}
              download={`${
                data?.payload?.metadata?.accession || 'download'
              }.alignment.${alignmentType}.gz`}
            >
              <span
                className={f('icon', 'icon-common', 'icon-download')}
                data-icon="&#xf019;"
              />{' '}
              Download
            </Link>
          </>
        )}
      </div>
      {alignmentType !== '' && (
        <Alignment
          colorscheme={colorscheme}
          type={`${tag}${alignmentType}`}
          numSequences={
            data?.payload?.metadata?.entry_annotations[`${tag}${alignmentType}`]
          }
          onConservationProgress={setConservastionProgress}
          setDisplayingAlignment={setDisplayingAlignment}
          setColorMap={setColorMap}
          overlayConservation={overlayConservation}
        />
      )}
    </div>
  );
};
EntryAlignments.propTypes = {
  data: dataPropType,
  customLocation: T.object,
  type: T.string,
  url: T.string,
  showCtrlToZoomToast: T.bool,
  goToCustomLocation: T.func,
};
const mapStateToProps = createSelector(
  (state) => state.customLocation,
  (state) => state.customLocation?.search?.type,
  (state) => {
    const { protocol, hostname, port, root } = state.settings.api;
    const description = state.customLocation.description;
    const { ...copyOfDescription } = description;
    if (description.main.key) {
      copyOfDescription[description.main.key] = {
        ...description[description.main.key],
        detail: null,
      };
    }

    return format({
      protocol,
      hostname,
      port,
      pathname: root + descriptionToPath(copyOfDescription),
      query: { annotation: '' },
    });
  },
  (state) => state.settings.notifications.showCtrlToZoomToast,
  (customLocation, type, url, showCtrlToZoomToast) => ({
    customLocation,
    type,
    url,
    showCtrlToZoomToast,
  }),
);

export default connect(mapStateToProps, { goToCustomLocation })(
  EntryAlignments,
);

1	import React, { useState, useEffect } from 'react';
2	import { dataPropType } from 'higherOrder/loadData/dataPropTypes';
3	import T from 'prop-types';
4
5	import { connect } from 'react-redux';
6	import { createSelector } from 'reselect';
7	import { goToCustomLocation } from 'actions/creators';
8
9	import { format } from 'url';
10	import descriptionToPath from 'utils/processDescription/descriptionToPath';
11
12	import Link from 'components/generic/Link';
13	import Tip from 'components/Tip';
14	import AlignmentViewer from './Viewer';
15	import DropDownButton from 'components/SimpleCommonComponents/DropDownButton';
16	// $FlowFixMe
17	import Button from 'components/SimpleCommonComponents/Button';
18
19	import { foundationPartial } from 'styles/foundation';
20	import localStyle from './style.css';
21	import ipro from 'styles/interpro-new.css';
22	import fonts from 'EBI-Icon-fonts/fonts.css';
23
24	const f = foundationPartial(localStyle, ipro, fonts);	×
25
26	const Alignment = ({	×
27	type,
28	numSequences,
29	colorscheme,
30	onConservationProgress,
31	setDisplayingAlignment,
32	setColorMap,
33	overlayConservation,
34	}) => {
35	const [forceShow, setForceShow] = useState(false);	×
36	const threshold = 1000;	×
37	const show = forceShow \|\| numSequences < threshold;	×
38	useEffect(() => {	×
39	setDisplayingAlignment(show);	×
40	}, [show]);
41	useEffect(() => {	×
42	setForceShow(false);	×
43	}, [numSequences]);
44
45	return (	×
46	<div>
47	{show ? (	×
48	<AlignmentViewer
49	onConservationProgress={onConservationProgress}
50	setColorMap={setColorMap}
51	type={type}
52	num={numSequences}
53	colorscheme={colorscheme}
54	overlayConservation={overlayConservation}
55	/>
56	) : (
57	<div>
58	<p>
59	This alignment has {numSequences} sequences. This can cause memory
60	issues in your browser.
61	</p>
62	<p>
NEW 63	<Button onClick={() => setForceShow(true)}>Open alignment</Button>	×
64	</p>
65	</div>
66	)}
67	</div>
68	);
69	};
70	Alignment.propTypes = {	×
71	type: T.string,
72	numSequences: T.number,
73	colorscheme: T.string,
74	onConservationProgress: T.func,
75	setDisplayingAlignment: T.func,
76	setColorMap: T.func,
77	overlayConservation: T.bool,
78	};
79
80	const AllowedColorschemes = [	×
81	'buried_index',
82	'clustal',
83	'clustal2',
84	'cinema',
85	'helix_propensity',
86	'hydro',
87	'lesk',
88	'mae',
89	'nucleotide',
90	'purine_pyrimidine',
91	'strand_propensity',
92	'taylor',
93	'turn_propensity',
94	'zappo',
95	];
96	const EntryAlignments = ({	×
97	data,
98	customLocation,
99	type,
100	url,
101	showCtrlToZoomToast,
102	goToCustomLocation,
103	}) => {
104	const tag = 'alignment:';	×
105	const [colorscheme, setColorscheme] = useState('clustal2');	×
106	const [conservastionProgress, setConservastionProgress] = useState(0);	×
107	// TODO: draw the legend using 👇🏽 the colorMap coming from events in the component.
108	const [colorMap, setColorMap] = useState({});	×
109	const [isDisplayingAlignment, setDisplayingAlignment] = useState(false);	×
110	const [overlayConservation, setOverlayConservation] = useState(false);	×
111
112	// eslint-disable-next-line camelcase
113	const types = Object.entries(data?.payload?.metadata?.entry_annotations \|\| {})	×
114	.filter(([type]) => type.startsWith(tag))	×
115	.map(([type, count]) => [type.slice(tag.length), count])	×
116	.sort(([, aCount], [, bCount]) => aCount - bCount);	×
117	if (!types.length) return null;	×
118	const handleChange = (evt) => {	×
119	goToCustomLocation({	×
120	...customLocation,
121	search: { type: evt.target.value },
122	});
123	};
124	const alignmentType = type \|\| '';	×
125	const conservationOptions =
126	conservastionProgress === 1 ? {} : { disabled: true };	×
127	return (	×
128	<div className={f('row', 'column')}>
129	{alignmentType !== '' && showCtrlToZoomToast ? (	×
130	<Tip
131	body="You can Zoom in/out by pressing [ctrl] and scroll up/down. Alternatively, you can drag the borders in the navigation component."
132	toastID="ctrlToZoom"
133	settingsName="showCtrlToZoomToast"
134	/>
135	) : null}
136	<label className={f('alignment-selector')}>
137	<span>Available alignments:</span>
138	<select
139	value={alignmentType}
140	onChange={handleChange}
141	onBlur={handleChange}
142	>
143	<option value="" disabled>
144	Choose...
145	</option>
146	{types.map(([type, count]) => (
147	<option key={type} value={type}>	×
148	{type} ({count.toLocaleString()})
149	</option>
150	))}
151	</select>
152	</label>
153	<div className={f('controllers')}>
154	{alignmentType !== '' && (	×
155	<>
156	{isDisplayingAlignment && (	×
157	<>
158	<label>
159	Colors:
160	<select
161	value={colorscheme}
162	onChange={(evt) => setColorscheme(evt.target.value)}	×
163	onBlur={(evt) => setColorscheme(evt.target.value)}	×
164	>
165	{AllowedColorschemes.map((color) => (
166	<option key={color}>{color}</option>	×
167	))}
168	<option {...conservationOptions}>
169	conservation
170	{conservastionProgress < 1	×
171	? `[Calculating: ${(
172	conservastionProgress * 100
173	).toFixed(2)}%]`
174	: ''}
175	</option>
176	</select>
177	</label>
178	<label className={f({ disabled: conservastionProgress < 1 })}>
179	Conservation:
180	<input
181	type="checkbox"
182	value={overlayConservation}
183	onChange={() =>
184	setOverlayConservation(!overlayConservation)	×
185	}
186	disabled={conservastionProgress < 1}
187	/>
188	</label>
189	<DropDownButton
190	label="Legends"
191	extraClasses={f('dropdown-container')}
192	>
193	<table className={f('legend-table')}>
194	<tbody>
195	{Object.entries(colorMap).map(([legend, color], i) => (
196	<tr key={i}>	×
197	<td style={{ background: color }}> </td>
198	<td>{legend}</td>
199	</tr>
200	))}
201	</tbody>
202	</table>
203	</DropDownButton>
204	</>
205	)}
206	<Link
207	buttonType="secondary"
208	href={`${url}${tag}${alignmentType}&download`}
209	download={`${
210	data?.payload?.metadata?.accession \|\| 'download'	×
211	}.alignment.${alignmentType}.gz`}
212	>
213	<span
214	className={f('icon', 'icon-common', 'icon-download')}
215	data-icon=""
216	/>{' '}
217	Download
218	</Link>
219	</>
220	)}
221	</div>
222	{alignmentType !== '' && (	×
223	<Alignment
224	colorscheme={colorscheme}
225	type={`${tag}${alignmentType}`}
226	numSequences={
227	data?.payload?.metadata?.entry_annotations[`${tag}${alignmentType}`]
228	}
229	onConservationProgress={setConservastionProgress}
230	setDisplayingAlignment={setDisplayingAlignment}
231	setColorMap={setColorMap}
232	overlayConservation={overlayConservation}
233	/>
234	)}
235	</div>
236	);
237	};
238	EntryAlignments.propTypes = {	×
239	data: dataPropType,
240	customLocation: T.object,
241	type: T.string,
242	url: T.string,
243	showCtrlToZoomToast: T.bool,
244	goToCustomLocation: T.func,
245	};
246	const mapStateToProps = createSelector(	×
247	(state) => state.customLocation,	×
248	(state) => state.customLocation?.search?.type,	×
249	(state) => {
250	const { protocol, hostname, port, root } = state.settings.api;	×
251	const description = state.customLocation.description;	×
252	const { ...copyOfDescription } = description;	×
253	if (description.main.key) {	×
254	copyOfDescription[description.main.key] = {	×
255	...description[description.main.key],
256	detail: null,
257	};
258	}
259
260	return format({	×
261	protocol,
262	hostname,
263	port,
264	pathname: root + descriptionToPath(copyOfDescription),
265	query: { annotation: '' },
266	});
267	},
268	(state) => state.settings.notifications.showCtrlToZoomToast,	×
269	(customLocation, type, url, showCtrlToZoomToast) => ({	×
270	customLocation,
271	type,
272	url,
273	showCtrlToZoomToast,
274	}),
275	);
276
277	export default connect(mapStateToProps, { goToCustomLocation })(
278	EntryAlignments,
279	);

ProteinsWebTeam / interpro7-client / 9019793472

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