Разработка на React — удалённая работа в Москве

Веб-разработка. Разработка с нуля. Пожелания и особенности: Создать кастомный визуальный модуль (Visualization Plugin) для Apache Superset, который отображает авиационные маршруты на карте, используя Google Maps или Deck.gl. Модуль должен поддерживать агрегацию маршрутов, отображение потоков полётов, интерактивные подсказки, легенду, кастомизацию параметров и горизонтальную зацикленность карты. Требования к технологии • React + TypeScript • Совместимость со стандартами Superset plugin architecture (@superset-ui/core, @superset-ui/chart) • Визуальный движок: Google Maps или Deck.gl (предпочтительно Deck.gl для сложных слоёв) • Поддержка Superset metadata form (control panel) Функциональные требования 1. Отображение маршрутов Каждая запись — маршрут с координатами: • Точка A: lat_start, lon_start • Точка B: lat_end, lon_end Необходимо: • Отрисовать линии маршрутов между точками. • Маршруты со схожими направлениями агрегировать (см. блок “Группировка маршрутов“). 2. Кластеры точек вылета На карте должны отображаться круги вокруг точек A: • Радиус круга зависит от количества маршрутов, начинающихся в этой точке. • Чем больше вылетов — тем больше круг. • Порог отображения круга — настраиваемый параметр. • Цвет круга — задаётся в параметрах визуализации. 3. Группировка маршрутов 3.1. По значению поля Выбор поля для группировки маршрутов. Модуль должен: • Сгруппировать маршруты по выбранному полю. • Для каждой группы отрисовать свой цвет (цвет определяется автоматически исходя из встроенных цветовых схем в Superset). 3.2. Объединение пересекающихся маршрутов Если много линий идут похожими направлениями: • Линии объединяются в одну «нитку». • Толщина линии = пропорциональна количеству объединённых маршрутов. • Геометрия линии = средний маршрут, вычисленный как усреднение координат всех маршрутов группы. Нити сходятся в одну более толстую нить, затем расходятся ближе к точке назначения. 4. Лимит (детализация) Параметр limit влияет на детализацию: • Чем меньше лимит — тем толще итоговая линия и меньше отдельных веток. • Чем больше лимит — тем больше показывается отдельных маршрутов, меньше группировки. Механика: • При низком лимите происходит сильная агрегация. • При высоком лимите — маршруты отображаются детализированно. 5. Тултипы При наведении на линию отображать подсказку, содержащую информацию по полю, указанному в настройках При наведении на круг над точкой A отображать подсказку так же, как выше При наведении на круг над точкой Б отображать подсказку так же, как выше Можно добавить HandleBars ввод + выбор полей, для отображения(Подробнее при уточнении деталий) 6. Категории Должна быть возможность: • Выбрать любое поле в датасете как категорию. • Назначить уникальный цвет(или цветовую схему) для каждой категории в настройках. 7. Карта 7.1. Зацикливание по горизонтали Карта должна прокручиваться бесконечно по оси X (как обычный WebMercator в Deck.gl). Требования: • Возможность скроллить “влево-вправо” без резкого обрыва мира. • Поддержка wrapLongitude. 7.2. Тип карты Пользователь должен выбирать: • Roadmap / Terrain / Hybrid / Satellite 8. Легенда • Отображение списка категорий + их цветов. • Возможность выбрать положение легенды: o левый верхний o правый верхний o цент верх o левый нижний o правый нижний o центр низ • Возможность свернуть/развернуть легенду. Параметры, которые должны быть изменяемыми в Superset Control Panel 1. Цвет линий (по умолчанию, без категорий) 2. Толщина линий базовая 3. Множитель толщины при объединении 4. Максимальное количество линий (limit / детализация) 5. Размер круга в зависимости от кол-ва вылетов/прилетов, % 6. Порог количества вылетов для отображения круга 7. Выбор поля группировки 8. Выбор категорий 9. Цвета категорий 10. Тип карты (Темный, серый(монотонный), светлый, спутник) 11. Цвет круга Требования к производительности • Визуализация должна поддерживать 20k–100k(Но неограниченное кол-во входных данных, маршрут строится по уникальным записям) маршрутов без зависаний. • Использовать WebGL слои (Deck.gl LineLayer, PathLayer). • Агрегацию проводить на стороне JS (или предварительно в Superset Data Transformations). • Использовать throttling для интерактивных операций. Интеграция в Superset Разработать полноценный visualization plugin: • Файлы: plugin.ts, buildQuery.ts, Chart.tsx, transformProps.ts. • Поддержка Superset controls. • Поддержка cross-filter. • Полная совместимость с Superset v3+. Входные данные Dataset должен содержать поля: • lat_start, lon_start • lat_end, lon_end • group_field (опционально) • category_field (опционально).