Cytoscape js: Getting started with Cytoscape.js · Cytoscape.js

Как мы собрали 1500 звезд на Гитхабе, соединив проверенную временем технологию и новый интерфейс / Хабр

Недавно мы выпустили инструмент с открытым исходным кодом GraphQL Voyager. Удивительно, но он попал на первую страницу новостей Hacker News и GitHub, и в первые несколько дней получил 1000+ звезд. Сейчас у него уже более 1600 звезд.*

Людям понравился гладкий интерфейс, интерактивные функции и анимация. Мы использовали TypeScript, React, Redux, webpack и даже PostCSS, но это НЕ еще одна статья об этом. Давайте заглянем под капот…

Наша предыстория

Все началось несколько месяцев назад. Мой друг и я (мы называем себя APIs.guru) искали идею для проекта вокруг GraphQL (язык запросов для API, разработанных Facebook). После некоторых исследований нам попался на глаза один интересный инструмент —  GraphQL Visualizer.

Вот что мы получили на выходе из GraphQL Visualizer:

Нам захотелось в него добавить:

• Цвета (черно-белое выглядело слишком скучно)
• Возможность масштабирования
• Интерактивные функции, такие как выбор вершин и ребер

Но, посмотрев исходный код, мы обнаружили фатальный недостаток этой штуки: там использовался Graphviz — инструмент, разработанный десятки лет назад, написанный на обычном C и скомпилированный в нечитабельный JavaScript с использованием Emscripten.

Выглядит даже хуже, чем то, что вылазит обычно из Uglify.js:

Как мы можем использовать что-то из 2000-го года? Мы же хипстеры, в конце концов! ReactJS, D3, webpack, TypeScript, PostCSS — вот с чем мы работаем! Не с инструментами, написанными на старомодном C 😜.

Немного покопав, мы нашли самую лучшую библиотеку для решения этой задачи — Cytoscape.js. Она написана на прекрасном JavaScript и даже позволяет применять CSS-подобные селекторы прямо к самому графу. Отличный результат!

Но после недели напряженного программирования он показался нам не таким уж хорошим.
Посудите сами, вот как выглядит визуализация графа с использованием Cytoscape.js:

И это мы даже не отобразили на этом графике все детали! Что за мешанина!

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

Оказалось, что в cytoscape.js нельзя сделать так, чтобы ребра не пересекались с вершинами графа. Мы перепробовали все варианты. Мы гуглили. Мы задавали вопросы на StackOverflow. Мы даже побеспокоили нескольких знакомых гуру SVG. Безуспешно 🙁

От безысходности я даже попытался хакнуть cytoscape.js, чтобы добиться читабельного результата. Ещё немного изучив этот вопрос, я вынужден был сдаться: видимо, визуализация графов — это и в самом деле rocket science (даже для магистра по прикладной математике).

Мы были побеждены…

И тогда нас осенило. А что, если мы возьмём результат работы Graphviz (это ведь просто SVG) и причешем его при помощи CSS и JS?

И это сработало ✨

Намного лучше! И код написан меньше, чем за день 🕒.

Добавляем немного цвета, логотип, загружаем анимацию, еще несколько полезных функций, и вот конечный результат, то, что нам нужно:

Да, мы написали несколько сотен строк уродливых манипуляций с DOM. Да, мы упаковали весь этот бардак НЕ в виде чистого 😱 компонента React / Redux. И да, код Graphviz настолько большой, что мы выделили его в отдельный файл размером 2 МБ. Но это работает, и всем пофигу. Что подтверждается 1600 звездами на GitHub.

Апдейт: с момента представления статьи времени нашу разработку взяли на вооружение компании в этой области (например, Graphcool, Neo4j), и её показали на GraphQL Europe, так что уже не только 1600 звезд подтверждают это 🙂

Уроки выучены

«Если я видел дальше других, то потому, что стоял на плечах гигантов». — Исаак Ньютон

Не судите код по его возрасту. Особенно, если он был написан такими технологическими гигантами, как AT&T Labs (где родилась ОС Unix и языки C и C++).

К сожалению, мы оказались жертвами когнитивного искажения: старый код — это плохой код. Но истина может быть противоположной. Старый код проверен в бою тысячами пользователей в сотнях различных проектов. Большинство критических ошибок были исправлены, документация завершена, есть много вопросов и ответов на StackOverflow и Quora.

Мы живем в 2017 году, и пользовательский интерфейс из 2000-х определенно не приемлем. Но графики и математика, которые стоят за ними, не сильно меняются.

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

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

«Эмм… ты обещал мне рассказать, как получить много звезд»

Упс… Ладно. И правда. Я хотел сделать заголовок достаточно запоминающимся.

Ниже приведен список самых важных советов и трюков, которые мы используем для нашего проекта с открытым исходным кодом:

• Попытайтесь использовать название своей технологии в имени проекта (например, graphql-что-то, react-что-то и т.д.). Тогда ваш проект будет иметь более высокий ранг в результатах поиска GitHub для этих технологий.
• Ваш README-файл должен привлекать внимание. Мы положили гифку в шапке нашего README, чтобы люди могли сразу понять, о чем идет речь в нашем проекте. Если это консольное приложение — добавьте гифку с консолью (вот замечательный пример).
• Больше свистелок и перделок: добавьте значки, добавьте красивый логотип, добавьте эмодзи 🔥 🙌
• Соберите демо-версию, если это возможно, и добавьте её в ссылку в строке с описанием репозитория:

• Повторяю, сделайте демку! И не забудьте добавить ссылку с неё обратно на GitHub (мы используем GitHub Corners).
• Прежде чем постить свой проект в HackerNews / Reddit / и т.д., получите начальное число звезд (5-10), разместив его на менее популярных ресурсах или поделившись им со своими друзьями. Люди с меньшей вероятностью нажимают «звезду» на проектах с нулевым числом звезд.
• Попытайтесь получить 30-40 звезд в первый день. Тогда, вас, скорее всего, зафичерят в GitHub trending для вашего языка программирования, а это еще один источник трафика.
• Сделайте что-нибудь полезное.

Есть еще несколько статей о том, как продвигать проекты с открытым исходным кодом: здесь, здесь и здесь.

---

На этом все, ребятки. Если вы когда-либо завернули старый код в новый блестящий интерфейс, расскажите свою историю в комментариях ниже.

* Примечание переводчика: спустя неделю после оригинальной публикации у проекта уже 2000+ звезд.
** Заглавная картинка, как и в исходном посте, взята с сайта www.k3projektwheels.com.

Cytoscape.js: библиотека теории графов для визуализации и анализа | Биоинформатика

Реферат

Резюме: Cytoscape.js — это графическая библиотека с открытым исходным кодом, основанная на JavaScript. Его наиболее распространенный вариант использования — программный компонент визуализации, поэтому его можно использовать для визуализации интерактивных графиков в веб-браузере. Его также можно использовать в автономном режиме, что полезно для графических операций на сервере, например Node.js.

Наличие и реализация: Cytoscape.js реализован на JavaScript. Документация, загрузки и исходный код доступны на http://js.cytoscape.org.

Контактное лицо: [email protected]

1 Введение

Сетевая информация в биологии становится все более полезной во многих контекстах, от анализа клеточных механизмов до идентификации биомаркеров заболеваний. Кроме того, Интернет все чаще становится платформой для приложений со сложными пользовательскими интерфейсами, использующими стандартные технологии, такие как HTML, CSS и JavaScript (JS). Cytoscape.js предоставляет интерфейс прикладного программирования JS (API), позволяющий разработчикам программного обеспечения интегрировать графики в свои модели данных и веб-интерфейсы пользователя. Cytoscape.js можно использовать в нескольких областях, таких как биологические сети или социальные графы. Cytoscape.js — это современная замена Cytoscape Web на основе Adobe Flash (Lopes и др. , 2010).

2 Реализация

Cytoscape.js реализован как автономная библиотека JS. У него нет жестких зависимостей; не требуются ни плагины для браузера, ни другие библиотеки. Однако он включает в себя хуки для нескольких полезных библиотек и сред, включая CommonJS/Node.js, AMD/Require.js, jQuery, Bower, npm, spm и Meteor. Это позволяет Cytoscape.js интегрироваться в самые разные программные системы на основе JS.

Архитектура Cytoscape.js позволяет запускать его в автономном режиме (т. е. без графического пользовательского интерфейса) или в качестве компонента визуализации (рис. 1), используя холст HTML5 в качестве базовой реализации. Это позволяет запускать Cytoscape.js как на стороне клиента, т.е. браузер — и на стороне сервера, что является важным фактором, поскольку код JS все чаще используется совместно с клиентом и сервером.

Рис. 1.

Открыть в новой вкладкеСкачать слайд

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

. Для упрощения использования библиотека использует несколько общих концепций с веб-моделью HTML + CSS + JS. Стили в Cytoscape.js задаются с помощью таблиц стилей, подобных CSS, с максимально возможным общим синтаксисом CSS. Точно так же элементы графа аналогичны элементам HTML DOM — они стилизованы таблицами стилей и программно доступны через основной API JS.

Архитектура Cytoscape.js состоит из ядра и коллекции. Ядро — это главная точка входа разработчика в библиотеку. Он представляет график и используется для запуска макетов, изменения представления и выполнения других операций с графиком в целом. Основные функции доступны для доступа к элементам графа. Каждая из этих функций возвращает коллекцию, набор элементов графа. У коллекции есть собственный API, который можно использовать для фильтрации, просмотра, выполнения операций и получения данных об элементах коллекции. Некоторые базовые функции принимают коллекции в качестве входных данных.

3 Функции

3.1 Набор функций

Возможности Cytoscape.js включают, помимо прочего, следующее: графы, мультиграфы и гиперграфы (с составными узлами, но еще не с гиперребрами).

Изменяемые графы : Графом можно управлять, добавляя, удаляя или изменяя состояние элементов графа. Это позволяет приложениям предоставлять пользователю интерактивные графики.

Обход графа : Предоставляются функции обхода графа, которые полезны как для взаимодействия с пользовательским интерфейсом, так и для программного анализа графа.

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

Таблицы стилей : Таблицы стилей используются для определения визуального стиля элементов. Селекторы и классы поддерживаются для сопоставления состояния элемента со стилем. Подобно настольному приложению Cytoscape ( Шеннон П. и др. , 2003), синтаксис функционального преобразователя предоставляется для сопоставления определенных свойств стиля на основе данных элемента, например. цвет узла сопоставляется с числовым весом. Таблицы стилей можно заменять во время выполнения, изменяя общий визуальный стиль графика.

Встроенная поддержка жестов для устройств с мышью и сенсорным экраном : Средство визуализации Cytoscape.js по умолчанию поддерживает жесты касания и мыши, которые пользователь ожидает из коробки. Узлы можно перетаскивать. Пользователь может манипулировать окном просмотра с помощью таких жестов, как масштабирование и перетаскивание для панорамирования.

Привязка событий : События можно привязывать несколькими способами. Можно использовать делегирование таким образом, чтобы вновь добавленные элементы вызывали связанные события. Привязки можно добавлять и удалять, а при привязке можно указать множественность элементов-инициируемых-событий (т. е. для каких элементов и сколько раз должен запускаться обработчик). Предоставляется несколько событий более высокого уровня, так что тип взаимодействия с пользователем абстрагируется, например. «Tap» работает как с компьютерными мышами, так и с нажатиями пальцев на сенсорных устройствах.

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

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

Импорт и экспорт : График можно экспортировать в виде изображения (PNG или JPG), в том числе с высоким разрешением для публикации. Cytoscape.js поддерживает импорт и экспорт графов через JSON, тем самым обеспечивая полную сериализацию и десериализацию состояния графа.

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

Расширяемость : Cytoscape.js предоставляет разработчику механизмы для расширения своего поведения. Например, виджеты пользовательского интерфейса могут быть построены поверх библиотеки — существует несколько таких расширений, включая собственные алгоритмы компоновки. Макеты, основные функции и функции коллекций, а также визуализаторы могут быть написаны как расширения для добавления в библиотеку без необходимости ее прямого изменения.

3.2 Производительность

Cytoscape. js может удобно отображать тысячи графических элементов на среднем оборудовании. На производительность рендеринга влияют используемые визуальные стили, размер графика и клиент веб-браузера. Производительность рендеринга можно повысить, используя более простые стили, особенно для краев. Дополнительные функции, улучшающие реальную и воспринимаемую пользователями производительность взаимодействия с большими графами, подробно описаны в онлайн-документации.

Cytoscape.js скромен в отношении рендеринга: новый кадр визуализируется только тогда, когда необходимо обновить представление. Таким образом, разработчик может безопасно использовать API для анализа, не беспокоясь о накладных расходах, связанных с рендерингом. При безголовом использовании Cytoscape.js нет накладных расходов на рендеринг.

3.3 Документация

Cytoscape.js активно развивается как проект с открытым исходным кодом и находится в свободном доступе на http://js.cytoscape.org. Документация включает подробное описание API, примеры исполняемого кода и демонстрации.

3.4 Примеры приложений

Примеры использования Cytoscape.js включают функцию «Экспорт сети как веб-страницы» настольного приложения Cytoscape, ConsensusPathDB (Камбуров А. и др. , 2013 г.), InnateDB (Бройер К. и др. , 2013), компоненты библиотеки BioJS (Corpas M, 2014), база данных генома Saccharomyces (Costanzo MC et al. , 2013), пакет RCyjs Bioconductor (http://www.bioconductor.org/packages). /release/bioc/html/RCyjs.html), грядущий релиз GeneMANIA ( Warde-Farley и др. , 2010), cyNetShare (https://idekerlab.github.io/cy-net-share/), NDEx (http://www.ndex bio.org/), Elsevier (http://www.elsevier. com/books-and-journals/content-innovation/cytoscape) и демонстрационные версии, на которые есть ссылки на сайте Cytoscape.js (http://js.cytoscape.org/).

3.5 Будущие направления

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

Благодарности

Cytoscape.js является частью консорциума Cytoscape и поддерживается Национальным ресурсом сетевой биологии (NRNB). Cytoscape.js заимствует многие концепции настольного приложения Cytoscape, и эти два проекта стараются быть максимально совместимыми. Мы благодарим многих участников базы кода, перечисленных на https://github.com/cytoscape/cytoscape.js/graphs/contributors.

Финансирование

Эта работа была поддержана NRNB (грант P41 GM103504 Национального института здравоохранения США, Национального центра исследовательских ресурсов) и грантов NIH R01GM070743 и U41HG006623.

Конфликт интересов : не объявлено.

Каталожные номера

Breuer

К.

и другие. . (

2013

)

InnateDB: системная биология врожденного иммунитета и не только — последние обновления и постоянное обновление

.

Рез. нуклеиновых кислот.

,

41

,

D1228

–

D1233

.

Корпус

М.

(

2014

)

Сборник статей BioJS о компонентах с открытым исходным кодом для визуализации биологических данных

.

F1000Рез.

,

3

,

56

.

Костанцо

М.К.

и другие.

. (

2014

)

База данных генома Saccharomyces содержит новые данные о регулировании

.

Рез. нуклеиновых кислот.

,

42

,

Д717

–

Д725

.

Камбуров

А.

и другие. . (

2013

)

База данных взаимодействия ConsensusPathDB: обновление 2013 г.

.

Рез. нуклеиновых кислот.

,

41

,

Д793

–

Д800

.

Лопес

К.Т.

и другие. . (

2010

)

Cytoscape web: интерактивный сетевой веб-браузер

.

Биоинформатика

,

26

,

2347

–

2348

.

Шеннон

П.

и другие.

. (

2003

)

Cytoscape: программная среда для интегрированных моделей сетей биомолекулярного взаимодействия

.

Рез. генома.

,

13

,

2498

–

2504

.

Warde-Farley

Д.

и другие. . (

2010

)

Прогностический сервер GeneMANIA: интеграция биологической сети для определения приоритетов генов и прогнозирования функции генов

.

Рез. нуклеиновых кислот.

,

38

,

W214

–

W220

.

Примечания автора

Заместитель редактора: Джонатан Рен

© The Author, 2015. Опубликовано Oxford University Press.

Это статья в открытом доступе, распространяемая в соответствии с лицензией Creative Commons Attribution License (http://creativecommons. org/licenses/by/4.0/), которая разрешает неограниченное повторное использование, распространение и воспроизведение на любом носителе при условии, что оригинальная работа правильно цитируется.

Cytoscape.js скачать | SourceForge.net

Библиотека теории графов для визуализации и анализа

Это точное зеркало проекта Cytoscape.js, размещенного по адресу https://github.com/cytoscape/cytoscape.js. SourceForge не связан с Cytoscape.js. Дополнительные сведения см. в каталоге зеркал с открытым исходным кодом SourceForge.

Загрузить

Получить обновления

Поделиться

Полнофункциональная библиотека графов, написанная на чистом JS. Разрешающая лицензия с открытым исходным кодом (MIT) для основной библиотеки Cytoscape.js и всех собственных расширений. Используется в коммерческих проектах и ​​проектах с открытым исходным кодом в производстве. Разработан в первую очередь для пользователей, как для фронтальных приложений, так и для разработчиков. Высокая оптимизация. Совместим с
Все современные браузеры. Устаревшие браузеры с поддержкой ES5 и холста. Требуется поддержка ES5 и холста, а обнаружение функций используется для дополнительных улучшений производительности. Браузеры примерно 2012 года полностью поддерживают ES5: IE10, Chrome 23, Firefox 21, Safari 6 (caniuse). Браузеры с частичной, но достаточной поддержкой ES5 тоже работают, например IE9 и Firefox 4. Документация и примеры не оптимизированы для старых браузеров, хотя сама библиотека оптимизирована. Некоторые демоверсии могут не работать в старых браузерах, чтобы упростить демо-код.

Возможности

• Поддерживает рендеринг изображений графиков на Node.js с помощью Cytosnap
• Имеет большой набор тестов, которые можно запускать в браузере или терминале
• Полная сериализация и десериализация через JSON узлы позиционирования
• Поддерживает селекторы для краткой фильтрации и графических запросов
• Использует таблицы стилей для отделения представления от данных способом, не зависящим от рендеринга

Образцы проектов

Деятельность по проекту

Просмотреть все действия >

{{ this. obj.activity_extras.summary }}

{{/каждый}}

Категории

Сеть, визуализация данных, библиотеки

Лицензия

Лицензия MIT

Подписаться на Cytoscape.js

Веб-сайт Cytoscape.js

Программное обеспечение для отслеживания проблем и проектов для Agile-команд | Jira

Инструмент №1 для разработки программного обеспечения, используемый agile-командами

Jira, которой доверяют тысячи команд, предлагает доступ к широкому спектру инструментов для планирования, отслеживания и выпуска программного обеспечения мирового класса, сбора и организации проблем, распределения задач и отслеживания действий команды. Он также интегрируется с ведущими инструментами разработчиков для сквозной прослеживаемости.

Узнать больше

Оцените этот проект

Войдите, чтобы оценить этот проект

Отзывы пользователей

Будьте первым, кто опубликует обзор Cytoscape.