Попробуйте это!

oxdna-viewer

Браузерная визуализационная программа, использующая библиотеку JavaScript Three.js для создания плавной и бесшовной системы просмотра и редактирования конфигураций oxDNA, даже для очень больших файлов конфигураций (текущий рекорд — OnClickListener 1,2 миллиона нуклеиновых оснований). Чтобы начать работу, либо воспользуйтесь ссылкой «Попробуйте это» выше, либо клонируйте репозиторий и откройте файл index.html в окне браузера. Для использования просто перетяните файлы топологии и конфигурации/траектории в окно браузера. Если у вас есть файлы JSON с дополнительными данными, они также могут быть перетянуты вместе с топологией и конфигурацией, либо перетянуты отдельно позднее.

Содержание

• Примеры
• Функции редактирования
• Видео опции
  • Типы видео
  • Форматы вывода
  • Формат входа
• Консольные команды
  • API сцены
  • API редактирования
  • API наблюдаемости
• Ригидные телесные симуляции
• Экспорт для 3D печати
• Живое расслабление конфигураций oxDNA
• Обновления и создание собственных расширений
• Цитирование

Примеры

Вы можете найти набор примерных структур и руководств в каталоге примеров, включая структуры, использованные в нашей статье.

Функции редактирования

Просмотрщик может загружать несколько структур одновременно. Вы можете выбрать (S) и преобразовать (D) компоненты с помощью опций "Выбор" и "Преобразование" в боковой панели. Нажмите R на вашей клавиатуре, чтобы переключиться между вращением и T для переключения между перемещением. Удерживайте клавишу shift, чтобы выровнять сетку. Выбранные компоненты также можно поворачивать вокруг осей X, Y и Z через боковую панель. Выборы можно копировать и вставлять с помощью ctrl+C и ctrl+V, ctrl+shift+V вставляет на месте. Цепочки можно создавать, продлевать, разрывать или соединять. Изменения можно отменять и повторять с помощью ctrl+Z/ctrl+Y или кнопок и . Чтобы скачать вашу отредактированную и теперь идеально собранную структуру, нажмите кнопку "Скачать выходные файлы". Обратите внимание, что этот новый файл теперь представляет собой одну структуру и будет работать как одно целое при последующей загрузке в просмотрщик.

Пожалуйста, предоставьте обратную связь, если вы столкнулись с ошибками или у вас есть предложения по улучшению функций редактирования.

Отредактированные цепочки также могут быть экспортированы для заказа в формате CSV, нажав кнопку "Скачать последовательности".

Видео опции

Если вам требуется сделать видео из траектории, загрузите траекторию и нажмите кнопку "Создать видео". Это откроет интерактивное поле, где вы сможете выбрать тип видео и формат вывода.

Вы также можете посмотреть учебник: Создание oxDNA видео в oxView.

Типы видео

Траектория: Будет проходить через предоставленную траекторию, сохраняя каждую конфигурацию как кадр. Будет воспроизводиться с указанным темпом кадров. Если вы хотите прекратить захват раньше, нажмите кнопку "Стоп", и видео будет скачано таким образом. Если камера была перемещена во время захвата траектории, это будет видно в конце видео, позволяя легко показывать различные углы.
Лемнискатный: Камера сделает фигуру-восьмерку вокруг структуры на текущем расстоянии, создавая 360° обзор текущей загруженной конфигурации.

Форматы вывода

Webm: Предпочтительный тип для большинства современных видеоплееров, хотя отметьте, что старые версии PowerPoint плохо совместимы с этим форматом. Если это проблема, либо сохраните GIF, либо преобразуйте Webm в другой формат с помощью других программ (отметьте, что это не работает в Firefox).
Gif: Больший размер файла, но высокая переносимость (отметьте, что это не работает в Chrome при локальном запуске).
PNG/JPEG: Скачивает ZIP-файл с каждым кадром, сохраненным как изображение указанного типа. Может быть преобразован в видеофайлы с помощью других программ, таких как ffmpeg или ImageJ.

Формат входа

Топология и траектория/конфигурация должны быть в формате oxDNA. Вы можете конвертировать из других форматов (например, PDB, LAMMPS, caDNAno) с помощью конвертера TacoxDNA: http://tacoxdna.sissa.it/

Консольные команды

В дополнение к визуальным и редакционным функциям, представленным в боковой панели, oxView скриптуется через консоль браузера. Для удобства использования существуют два API, содержащие полезные функции для изменения визуальных эффектов и редактирования.### API сцены
API сцены можно получить, введя api.<command>(<arguments>) в консоли браузера. Доступны следующие функции:

• toggleStrand(<strand object>): Переключает видимость указанной цепочки.
• markStrand(<strand object>): Подчеркивает указанную цепочку цветом выбора.
• countStrandLength(optional(<system object>)): Возвращает словарь индексов цепочек с их соответствующими длинами. Если система не указана, используется первая загруженная система. Очень полезна для нахождения id цепочки шифта в оригами.
• highlight5ps(optional(<system object>)): Подчеркивает 5' концы всех цепочек в указанной системе. Если система не указана, используется первая загруженная система.
• toggleElements(<array of elements>): Переключает видимость указанных мономеров.
• toggleAll(optional(<system object>)): Переключает видимость указанной системы. Если система не указана, используется первая загруженная система.
• toggleBaseColors(): Переключает базы между цветами, определенными типами (A = синий, T/U = красный, G = желтый, C = зелёный) и серым.
• trace53(<monomer object>): Возвращает массив нуклеотидов, начинающийся с указанного нуклеотида и продолжающийся 5'-3'. (Учитывайте, что файлы oxDNA записываются 3'-5').
• trace35(<monomer object>): То же самое, что и trace53, но трассирует вверх по цепочке вместо того, чтобы двигаться вниз.
• getElements(<array of integers>): Возвращает массив элементов с глобальными ID, соответствующими указанным числам.
• getSequence(<strand object>): Возвращает последовательность указанной цепочки.
• removeColorbar(): Скрывает панель цветов, если загружен дополнительный слой данных.
• showColorbar(): Отображает панель цветов, если она была скрыта ранее и дополнительный слой данных загружен.
• changeColormap(<map name>): Изменяет карту цветов для дополнительных слоев данных. Все полные матплотлиб карты цветов доступны, а также дефолтные Three.js ('rainbow', 'cooltowarm', 'blackbody', и 'grayscale'). Дефолтная карта - 'cooltowarm'.
• setColorBounds(<min>, <max>): Изменяет верхний и нижний пределы панели цветов до min/max. По умолчанию используются верхние и нижние границы предоставленного набора данных.
• spOnly(): Удаляет все объекты из сцены, кроме цилиндров спины. Создаёт эффект, аналогичный варианту отображения лицензии в других молекулярных просмотрах.
• showEverything(): Сбрасывает все параметры видимости до значений по умолчанию.
• switchCamera(): Переключается между перспективной и ортографической камерой. Обратите внимание, что управление орбитами не поддерживает масштабирование в режиме ортографической камеры. Подключено к кнопкам "Ортографическая"/"Перспективная" в боковой панели.

API редактирования

API редактирования можно получить, введя edit.<command>(<arguments>) в консоли браузера. Доступны следующие функции:

• nick(<monomer object>): Удаляет 3' соединение с указанного нуклеотида и создаёт новую цепочку, содержащую выбранный объект и его соседей 5'. Подключено к кнопке "Наклон" в боковой панели.
• ligate(<monomer object> <monomer object>): Соединяет два выбранных нуклеотида вместе, создавая единую цепочку, содержащую все нуклеотиды родительских цепочек входных частиц. Подключено к кнопке "Соединение" в боковой панели.
• del(<array of monomer objects>): Проходит по массиву, удаляя каждый объект из сцены. Также обрабатывает разделение объектов цепочек. Подключено к кнопке "Удаление" в боковой панели.
• extendStrand(<monomer object> <string>): Расширяет родительскую цепочку указанного нуклеотида данным последовательностью. Строка должна быть в ВСЕ БОЛЬШИХ БУКВАХ для соответствия типам частиц. Новые нуклеотиды будут появляться в гелице с осью, соответствующей вектору a3 указанного нуклеотида. Эти нуклеотиды, скорее всего, потребуется расслабить перед производственными симуляциями с отредактированными файлами. Подключено к кнопке "Расширение" в боковой панели.
• extendDuplex(<monomer object> <string>): Аналогично extendStrand — расширяет родительскую цепочку указанного нуклеотида и создаёт дополнительную комплементарную цепочку. Если указанному нуклеотиду нет парного, он создаст один и расширит от него. Подключено к кнопке "Расширение" в боковой панели при активированном режиме "Дуплекс".
• createStrand(<string>): То же самое, что и extendStrand, но новая цепочка создаётся 20 единиц впереди камеры. Подключено к кнопке "Создание" в боковой панели.

Отметьте, что многие из этих требуют систем, цепочек или нуклеотидов. Просмотрщик имеет простую иерархию объектов, где системы состоят из цепочек, которые состоят из элементов. Массивы в JavaScript индексируются с нуля, поэтому для доступа ко второму нуклеотиду шестого элемента первой системы следует ввести systems[0].strands[5].monomers[1]. Также существует массив всех нуклеотидов, индексированных глобальным ID (показывается при выборе элемента), так что тысячный нуклеотид можно получить с помощью elements.get(999).

Обсервабл API

Обсервабл API можно получить, введя api.observable.(observables) в консоль браузера. Следующие обсервабли доступны в настоящее время:

• api.observable.CMS(elements:BasicElement[], size:number, color:number): Этот метод создает сферу заданного размера и цвета в центре масс группы базовых элементов.
• api.observable.Track(particle : THREE.Mesh): Этот метод создает линейный трэк, следующий за предоставленным объектом сетки во время обновления траектории.

Пример объединенного использования:

Вычисление ЦМС (центра масс) заданной группы базовых элементов и отслеживание его траектории. Введите следующие строки в консоль браузера, предполагая, что выбрана группа базовых элементов.

let cms = new api.observable.CMS(selectedBases, 1, 0xFF0000);
let track = new api.observable.Track(cms);
let update_func = () => {
    cms.calculate();
    track.calculate();
};
trajReader.nextConfig = api.observable.wrap(trajReader.nextConfig, update_func);
trajReader.previousConfig = api.observable.wrap(trajReader.previousConfig, update_func);
render();
```* `api.observable.NickOrientation(bases : BasicElement[])` данный обсервабл рисует вектор, подчеркивая ориентацию ника при наличии двух соседних базовых элементов.
#### Пример: 
Введите следующие строки в консоль браузера, предполагая, что выбраны две базовые единицы.
```js
let nick = new api.observable.NickOrientation(Array.from(selectedBases));
render = api.observable.wrap(render, () => {nick.calculate()});
render();

Rigidity Simulation

Файлы CaDNAnо, экспортированные в oxDNA с помощью конвертационных инструментов, будут плоскими и практически невозможно расслабить их обычными методами расслабления в oxDNA. Эта программа включает rigidity-симулятор, который пытается автоматически переформировать эти плоские дизайны CaDNAnо до конфигурации, которую можно расслабить с использованием традиционных методов молекулярной динамики.

Чтобы использовать, сначала щелкните кнопку "Кластеры" () под заголовком "Режим выбора" в боковой панели. Это вызывает интерфейс для выбора кластеров. Либо позвольте программе автоматически выбрать кластеры с помощью алгоритма DBSCAN (работает хорошо для большинства дизайнов CaDNAnо), либо выберите их самостоятельно. Как только кластеры определены, отметьте галочкой "Rigid cluster dynamics" для запуска симуляции. Щелкните еще раз, чтобы остановить. Вы можете перемещать кластеры во время симуляции, чтобы помочь процессу расслабления или исправить топологические неточности, переключившись на режим перемещения.

Для получения более подробной информации просмотрите учебник: Устройство тетраэдра из caDNAno в oxView и обратитесь к нашим примерам: наши примеры.

Экспорт для 3D печати

Просмотрщик поддерживает экспорт сцен в общем формате 3D-печати STL. Для использования щелкните кнопку "STL EXPORT". По причинам экономии памяти вы имеете возможность включить лишь части модели oxDNA в выходной файл сетки, выбирая из:

• Backbone mesh
• Nucleoside mesh
• Connector mesh
• Backbone connector mesh

Гладкость экспортированной модели контролируется через настройку faces multiplier. Учтите, что увеличенная гладкость приводит к очень большим файлам STL, которые не все браузеры могут обрабатывать. Увеличивая масштаб (scaling) объектов можно сделать их перекрывающимися, что полезно для прочности печатаемых моделей.
Для 3D-печати экспортированного STL файла его следует импортировать в обрабатывающую программу, такую как Autodesk NetFab. Этот экспортированный STL затем может быть импортирован в программу управления 3D-принтером.

Динамическое расслабление конфигураций oxDNA

Просмотрщик поддерживает динамическое расслабление загруженных конфигураций с использованием узлов ox-serve. Чтобы подключиться к существующему узлу откройте меню "Подключение" в вкладке "OX-Serve" и введите URL и порт соответствующего сервера. Учтите, что связь между сервером и ox-view осуществляется через веб-сокеты, поэтому типичный URL будет выглядеть так: ws://127.0.0.1:8888. Затем вы можете открыть меню "Настройки" и запустить симуляцию расслабления. Предполагается, что сервер ox-serve работает на машине с поддержкой CUDA.

Обновления и создание собственных расширений

Эта программа находится в активном развитии, поэтому функции остаются в высокой степени изменения. Если вам нужна новая функциональность или вы хотите сообщить о проблемах, пожалуйста, сообщите нам в разделе "Issues". Вспомните, что важно часто обновляться, если вы используете просмотчик локально, чтобы получить последние функции.

Если вы хотите расширить код для своих целей, вам также потребуется установить TypeScript, Three.js и типизации TypeScript для Three.js. Полные инструкции по установке:

1. git clone -b master https://github.com/sulcgroup/oxdna-viewer.git
2. Установите TypeScript и Node.js ts и npm требуют разных имен для node.js: одно имя — node, другое — nodejs, возможно, вам придется изменить имя согласно этим требованиям или получить дополнительную копию
3. npm install --save @types/three Если возникают проблемы, откройте файл package.json и измените "name" на "types/three-test" и попробуйте снова
   См. https://thisdavej.com/node-newbie-error-npm-refusing-to-install-package-as-a-dependency-of-itself
4. Перейдите в папку oxdna-viewer
5. npm install --save @types/webvr-api Эти два шага выше устанавливают необходимые типизации TypeScript для Three.js
6. tsc
   Это команда для запуска компилятора TypeScript. Ответственный каталог и добавление новых файлов к компилятору можно найти в файле tsconfig.json
   tsc требуется запуск каждый раз, когда вы делаете изменения в TypeScript. Если вы запустите tsc с флагом -w, он будет постоянно наблюдать за изменениями файлов.
7. Скомпилированный JavaScript будет находиться в директории dist/
8. Откройте index.html в любом браузере (Chrome работает лучше всего)

Цитирование

Если вы используете oxView или наш пакет анализа oxDNA в вашем исследовании, пожалуйста, цитируйте: Erik Poppleton, Joakim Bohlin, Michael Matthies, Shuchi Sharma, Fei Zhang, Petr Šulc: Проектирование, оптимизация и анализ больших ДНК и РНК наноструктур через интерактивное визуализация, редактирование и молекулярное моделирование, Nucleic Acids Research, том 48, выпуск 12, 09 июля 2020 года, страница e72 (https://doi.org/10.1093/nar/gkaa417)