Сжать диаграмму потоков в текстовый формат (reactflow)

Содержание

Вопрос или проблема
Ответ или решение
Преобразование диаграммы ReactFlow в плоский текстовый формат
Пример диаграммы и ожидаемый результат
Алгоритм преобразования
Стратегия реализации
Пример кода
Заключение

Вопрос или проблема

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

Быстрая иллюстрация:

       B
a -> {   } -> D
       C

Должно производить такой текст:

A
// Решение: node_3
  B
// Конец решения: node_3
// Решение: node_4
  C
// Конец решения: node_4
D

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

https://stackblitz.com/edit/vitejs-vite-xlcdmc

Функция, которая выполняет преобразование, находится здесь:
components/Toolbar.tsx::handleExportComments

Желаемый вывод должен выглядеть так:

введение
введение 2

// Решение: node_3
  фрукты
  // Решение: node_4
    яблоко
  // Конец решения: node_4
  // Решение: node_5
    банан
  // Конец решения: node_5
  фруктовый коктейль
// Конец решения: node_3

// Решение: node_6
  овощи
  // Решение: node_7
    лук
  // Конец решения: node_7
  // Решение: node_8
    салат
    салат с йогуртом
  // Конец решения: node_8
  салат
// Конец решения: node_6

середина1
середина2

// Решение: node_14
  верх
// Конец решения: node_14
// Решение: node_15
  низ
// Конец решения: node_15

предфинал
конец

Мое текущее решение выдает дубликаты и, похоже, совершенно неверно, когда у нас есть несколько разветвлений.

Кажется, все данные для генерации этого доступны, т.е. у нас есть все ребра (связи) и узлы, может быть, это можно как-то использовать?

Примечания о функциональности:

Всегда начинать с 1 узла – введение
Всегда заканчивать с 1 узлом – конец

У меня есть подозрение, что это известная математическая / компьютерная проблема, но я надеюсь, что для этого есть решение 🙂

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

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

Ответ или решение

Преобразование диаграммы ReactFlow в плоский текстовый формат

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

Пример диаграммы и ожидаемый результат

Изначальная диаграмма:

       B
a -> {   } -> D
       C

Желаемый выходной текст:

A
// Decision: node_3
  B
// Decision end: node_3
// Decision: node_4
  C
// Decision end: node_4
D

Алгоритм преобразования

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

Структура узлов и связей: Каждое решение в диаграмме представляется узлом, а связи между узлами определяются ребрами (edges).
Логика принятия решений: Для каждого узла, который имеет несколько выходов (разветвлений), необходимо корректно организовать текстовое представление, отображая все возможные пути принятия решения.

Стратегия реализации

Сбор данных: Необходимо извлечь все узлы и ребра из данных, которые предоставляет ReactFlow. Это обеспечит все необходимые элементы для построения текстового представления.
Организация вложенных решений: В процессе формирования текста следует учитывать углубление вложенных решений. Используйте рекурсивный подход для обхода всех узлов, пока не достигнете узлов, которые не содержат дальнейших разветвлений.
Форматирование текста: В зависимости от уровня вложенности узлов добавляйте соответствующее количество пробелов или табуляций. Разделяйте решения пометками // Decision: node_id и // Decision end: node_id, где node_id — уникальный идентификатор каждого узла.
Обработка дубликатов: Убедитесь, что алгоритм исключает дублирование узлов в текстовом выводе, что возможно, если один и тот же узел может быть достигнут через несколько разных путей.

Пример кода

Вот пример кода, который демонстрирует описанную выше логику:

function generatePlainText(node, visitedNodes = new Set()) {
    if (visitedNodes.has(node.id)) return ''; // Избежать дублирования
    visitedNodes.add(node.id);

    let result = node.name + "\n";

    if (node.children && node.children.length > 0) {
        result += `// Decision: ${node.id}\n`;
        for (const child of node.children) {
            result += '  ' + generatePlainText(child, visitedNodes);
        }
        result += `// Decision end: ${node.id}\n`;
    }

    return result;
}

// Использование функции для генерации текста
const textRepresentation = generatePlainText(startNode); // startNode - корень диаграммы
console.log(textRepresentation);

Заключение

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

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

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