сделать древовидную структуру из плоского массива на основе leftIndent

Question

пример древовидного представления

Требуется создать древовидную структуру из массива сглаживания на основе leftIndent для дерева. Необходимо сделать так, чтобы древовидные папки выглядели как в библиотеке response-vtree . Добавлен скриншот для понимания задачи.

const from = [
  {
    id: 1,
    data: {
      leftIndent: 0,
      text: 'L',
    },
  },
  {
    id: 2,
    data: {
      leftIndent: 18,
      text: 'M',
    },
  },
  {
    id: 3,
    data: {
      leftIndent: 0,
      text: 'X',
    },
  },
  {
    id: 4,
    data: {
      leftIndent: 18,
      text: 'Y',
    },
  },
  {
    id: 5,
    data: {
      leftIndent: 36,
      text: 'Z',
    },
  },
  {
    id: 6,
    data: {
      leftIndent: 36,
      text: 'S',
    },
  },
];

const to = [
  {
    id: 0,
    data: {
      leftIndent: 0,
      text: 'L',
    },
    children: [
      {
        id: 2,
        data: {
          leftIndent: 18,
          text: 'M',
        },
      },
    ],
  },
  {
    id: 3,
    data: {
      leftIndent: 0,
      text: 'X',
    },
    children: [
      {
        id: 4,
        data: {
          leftIndent: 18,
          text: 'Y',
        },
        children: [
          {
            id: 5,
            data: {
              leftIndent: 36,
              text: 'Z',
            },
          },
          {
            id: 6,
            data: {
              leftIndent: 36,
              text: 'S',
            },
          },
        ],
      },
    ],
  },
];

Answer 1

      const makeTree = (branches) => {
    function topLevel(data) {
      return data.filter((node) => !node.parentId);
    }

    function traverse(data, parentId) {
      const children = data.filter((branch) => branch.parentId === parentId);
      children.forEach((child) => {
        child.children = traverse(data, child.id);
      });
      return children;
    }

    return topLevel(branches).map((branch) => {
      branch.children = traverse(branches, branch.id);
      return branch;
    });
  };

  const makeFlattenNumberingArray = (paragraphs) => {
    const resultArr = [];
    let levelData = null;
    let route = '';

    // iterate over all array
    for (let i = 0; i < paragraphs.length; i++) {
      const curr = paragraphs[i];
      let level = 0; // reset level to `0`. Top level.
      let parentId = null;
      // this loop need only for finding deep level
      for (let j = i - 1; j >= 0; j--) {
        const prev = resultArr[j];
        // we need check current paragraph with previous, if current !== previous paragraph need to look higher(backward loop)
        if (curr.data.leftIndent > prev.data.leftIndent) {
          level = prev.level + 1;
          parentId = prev.id;
          break;
        }
      }

      levelData = {
        id: curr.id,
        data: curr.data,
        children: [],
        parentId,
        level
      };

      resultArr.push(levelData);
    }
    return resultArr;
  };

const paragraphs = makeFlattenNumberingArray(data);

const tree = makeTree(paragraphs);