Тестовое задание на позицию разработчика фронтенда в компанию BIOCAD
Каждое антитело – это особый белок, состоящий, как и все другие белки в живых организмах, из аминокислот, соединённых друг с другом пептидной связью.
Каждый белок или отдельная белковая цепь может быть задана символьной последовательностью аминокислот, разделённой пробелами на отдельные регионы – FR1, CDR1, FR2, CDR2, FR3, CDR3 И FR4, именно в таком порядке.
Коллегам из лабораторий нужна возможность удобной работы с белковыми цепями, хранящимися в БД, поэтому необходимо спроектировать и реализовать компонент на ReactJS, отвечающий следующим требованиям:
<Chain
sequence="QVQLVESGGGL VQPGG SLRLSCAASRSIFSINAM NWYRQAPGKGTEWVAQITDEGIT NYVDSVKGRFTI SRDNAKNTLYLQMNSLRAEDTAVY YCNAFVITTTSEIYWGQGTTVTVSS"
onCopy={ selection => console.log(selection) }
/>type ChainComponent = Component<{ sequence: string; onCopy: (selection: string[]) => void }>Визуальное представление последовательности символов
- Регионы белковой цепи должны быть визуально отделены друг от друга цветами по типу FR или CDR.
- Можно легко узнать позицию каждого символа, нумерация начинается с 1.
- Участок последовательности, соответствующий конкретному региону, должен быть надписан ( FR1, CDR1 и так далее ).
- По размерам блок должен соответствовать ширине элемента-родителя и адекватно реагировать на изменение размеров элемента-родителя.
Должна быть реализована возможность выделения и копирования в буфер обмена произвольных участков заданной цепи.
- Например, с 3 по 15 и, одновременно, с 55 по 68.
- В случае перекрытия выделенных участков они должны сливаться в один.
- Выделенные пользователем участки должны быть визуально обособлены от невыделенных.
- Разметка регионов и нумерация не должны попадать в результат выделения.
- По нажатию на Ctrl-C или Cmd-C должна быть вызвана функция, переданная в
onCopy; в качестве аргумента в неё должен быть передан массив строк с выделенными участками.