В рамках наших постоянных усилий, направленных на то, чтобы быть более открытыми для внешнего сообщества, мы объявляем о запуске нашего первого компонента пользовательского интерфейса с открытым исходным кодом: Brushable Histogram (щелкните здесь для демонстрации).

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

Эта проблема

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

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

Но когда вы смотрите на события, охватывающие двухдневный период (с разбивкой по часам), как вы узнаете, что вам нужно увеличить конкретный 5-минутный интервал, в котором произошла атака бота?

Наше решение

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

Мы продолжали искать компонент гистограммы, который мог бы дать нам гибкость, чтобы сделать все это, но не смогли его найти. Итак, приступили к созданию нового! Беатрис Мальвейро, один из наших инженеров по визуализации данных, разработала первую оригинальную концепцию и прототип, а Виктор Фернандес внес несколько улучшений в эту первую версию.

Мы немного улучшили гистограмму во время разработки Genome (например, добавили кнопку воспроизведения), и через некоторое время мы начали серьезно думать о ее использовании с открытым исходным кодом. Насколько нам известно, это был компонент нового типа, он был довольно стабилен и хорошо работал.

Процесс открытого исходного кода

Когда я наконец смог выделить время на работу над этим проектом, первые шаги заключались в следующем:

  • Переместите код гистограммы, которая у нас была в репозитории Genome, в новый внутренний репозиторий только для компонента.
  • Опубликуйте гистограмму во внутреннем npm.
  • Измените код генома, чтобы он зависел от этого внутреннего пакета.

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

К счастью, мы использовали внутренний шаблон для создания компонентов пользовательского интерфейса. В этом шаблоне были тесты, Storybook, ESlint и другие уже настроенные вещи. Еще одна вещь для нас - когда-нибудь открыть исходный код!

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

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

  • Улучшение покрытия модульным тестом
  • Удалите ненужные зависимости
  • Повышение качества кода и модульности
  • Улучшить документацию
  • Добавить рассказы из сборника рассказов
  • Проведите несколько тестов производительности

На все это ушло немного времени, но оно того стоило! Теперь код был в гораздо лучшей форме и готов к публикации.

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

  • Начальный рендеринг выполняется относительно быстро с 100 тыс. Точек данных
  • Подсветка всплывающей подсказки плавно работает с 300 тыс. Точек данных
  • Чистка работает с 70 тыс. Точек данных и плавно - с 25 тыс. Точек данных.

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

Когда код был готов, последними шагами были:

  • Создайте репозиторий GitHub
  • Переместите туда код гистограммы
  • Опубликовать гистограмму в общедоступном реестре NPM
  • Адаптируйте Genome для использования общедоступной версии
  • Устарел внутренний репозиторий
  • Настройте конвейер CI, покрытие и статическую страницу в GitHub

Заключительные замечания

К этому моменту у нас был общедоступный код, но мы не были готовы его объявить. Мы хотели дать время, чтобы можно было найти возможные проблемы, и они были! Поэтому мы рады, что не сразу объявили об этом.

И на самом деле, в течение того периода времени гистограмма даже была повторно использована во внутреннем доказательстве концепции, так что мы уже получили пользу от проделанной работы!

Что касается следующих шагов, основная функция, которой нам не хватает, - это поддержка других типов шкал по оси x (сейчас мы поддерживаем только шкалу времени).

Это был наш первый интерфейсный компонент с открытым исходным кодом. Хотя сам компонент не очень сложен, процесс открытия исходного кода оказался непростым. Я надеюсь, что этот «первый» компонент внешнего интерфейса откроет путь для большего количества компонентов внешнего интерфейса, которые будут доступны в Feedzai!