Библиотека визуализации графов: как мы решили дилемму Canvas vs HTML в Gravity UI

Привет, спасибо за вопрос. За время разработки библиотеки в Нирване мы часто думали об этом и сформировали для себя мнение на этот счет.

Графы визуализируются не ради «картинки», а для того, чтобы лучше понимать, как работает система. Мы со своей стороны стараемся дать хороший UI/UX, чтобы человеку было комфортнее.

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

Что касается больших «макаронных» графов — да, это серьёзная UX-задача. Мы уже реализуем группировки, работаем над схлопыванием и разворачиванием групп, делаем поддержку подсветки/приглушения элементов графа.

Библиотека визуализации графов: как мы решили дилемму Canvas vs HTML в Gravity UI

Привет, биндинги gojs выглядят интересными, но очень непривычными.
Кажется что подобного можно добиться и в @gravity-ui/graph

const graph = new Graph({
  blocks: [
    {
      id: "task1",
      is: "progress",
      x: 100,
      y: 100,
      width: 200,
      height: 80,
      name: "Data Processing",
      meta: { progress: 75 },
    },
    {
      id: "task2",
      is: "progress",
      x: 400,
      y: 100,
      width: 200,
      height: 80,
      name: "Analysis",
      meta: { progress: 30 },
    },
  ],
  connections: [
    {
      id: "connection1",
      sourceBlockId: "task1",
      targetBlockId: "task2",
    },
  ],
  settings: {
    ...
  },
  layers: [
    [SelectionLayer, {...}],
    [ConnectionLayer, {...}],
  ],
});

// update
graph.updateEntities({
  blocks: [
   {
      id: "task2",
      meta: { progress: 50 },
    },
  ]
})

Библиотека визуализации графов: как мы решили дилемму Canvas vs HTML в Gravity UI

Привет, а можешь пожалуйста завести issue, постараемся тебе помочь
https://github.com/gravity-ui/graph/issues/new

Библиотека визуализации графов: как мы решили дилемму Canvas vs HTML в Gravity UI

Приветствую! Да, библиотека может работать без реакта и html слоя в целом(только канвас). Если потребуется использовать другую библиотеку для рендера html, то библиотека к этому тоже готова, но потребуется написать слой который перенесет твои кубики в пространство графа.