Меня зовут Андрей, я разработчик интерфейсов в команде User Experience инфраструктурных сервисов Яндекса. Мы развиваем Gravity UI — опенсорсную дизайн‑систему и библиотеку React‑компонентов, которую используют десятки продуктов внутри компании и за её пределами. Сегодня расскажу, как мы столкнулись с задачей визуализации сложных графов, почему существующие решения нас не устроили, и как в итоге появилась @gravity‑ui/graph — библиотека, которую мы решили сделать открытой для сообщества.
Эта история началась с практической проблемы: нам нужно было рендерить графы на 10 000+ элементов с интерактивными компонентами. В Яндексе много проектов, где пользователи создают сложные пайплайны обработки данных — от простых ETL‑процессов до машинного обучения. Когда такие пайплайны создаются программно, количество блоков может достигать десятков тысяч.
Существующие решения нас не устраивали:
— HTML/SVG‑библиотеки красиво выглядят и удобны в разработке, но начинают тормозить уже на сотнях элементов.
— Canvas‑решения справляются с производительностью, но требуют огромного количества кода для создания сложных UI‑элементов.
Мы решили не выбирать между Canvas и HTML, а использовать всё лучшее из обеих технологий. Идея была проста: автоматически переключаться между режимами в зависимости от того, насколько близко пользователь смотрит на граф.
Читать далее