Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 8x 8x 8x 3x 8x 15x 3x 15x 15x | import Button from './button';
import { Dropdown } from './dropdown-button';
const expasyPrefixUrl = '//web.expasy.org/cgi-bin';
const sequenceTools = [
{
name: 'ProtParam',
url: '/protparam/protparam?',
},
{
name: 'ProtScale',
url: '/protscale/protscale.pl?',
},
{
name: 'Compute pI/Mw',
url: '/compute_pi/pi_tool?',
},
{
name: 'PeptideMass',
url: '/peptide_mass/peptide-mass.pl?',
},
{
name: 'PeptideCutter',
url: '/peptide_cutter/peptidecutter.pl?',
},
] as const;
export type SequenceToolName = (typeof sequenceTools)[number]['name'];
const visibleElement = (onClick: () => unknown) => (
<Button variant="tertiary" onClick={onClick}>
Tools
</Button>
);
type SequenceToolsProps = {
accession: string;
onBlastClick?: () => void;
tools?: SequenceToolName[];
};
const SequenceTools = ({
accession,
onBlastClick,
tools,
}: SequenceToolsProps) => {
const applicableTools = tools || sequenceTools.map((tool) => tool.name);
return (
<Dropdown visibleElement={visibleElement}>
<ul>
{onBlastClick && (
<li>
<Button variant="tertiary" onClick={onBlastClick}>
BLAST
</Button>
</li>
)}
{sequenceTools.map((sequenceTool) => {
Eif (applicableTools.includes(sequenceTool.name)) {
return (
<li key={sequenceTool.name}>
<a
href={`${expasyPrefixUrl}${sequenceTool.url}${accession}`}
target="_blank"
rel="noopener noreferrer"
>
{sequenceTool.name}
</a>
</li>
);
}
return null;
})}
</ul>
</Dropdown>
);
};
export default SequenceTools;
|