helion3/inspire-tree

Pagination totals aren't set for children loaded from array

Closed this issue · 2 comments

hectorm commented

It seems that this issue has not been completely fixed. The bug can be reproduced in the following cases:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>InspireTree</title>
  <link rel="stylesheet" href="https://unpkg.com/inspire-tree-dom@3.0.2/dist/inspire-tree-light.css">
</head>
<body>
  <div id="tree"></div>
  <script src="https://unpkg.com/lodash@4.17.4/lodash.js"></script>
  <script src="https://unpkg.com/inspire-tree@4.1.0/dist/inspire-tree.js"></script>
  <script src="https://unpkg.com/inspire-tree-dom@3.0.2/dist/inspire-tree-dom.js"></script>
  <script>
    let tree = new InspireTree({
      pagination: {limit: 5},
      data: function (node, resolve) {
        let prefix = node ? `${node.text}.` : '';
        let nodes = Array(10).fill().map((n, i) => {
          return {text: `${prefix}${i}`, children: true};
        });
        resolve(nodes);
      }
    });

    new InspireTreeDOM(tree, {
      target: '#tree',
      deferredRendering: true
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>InspireTree</title>
  <link rel="stylesheet" href="https://unpkg.com/inspire-tree-dom@3.0.2/dist/inspire-tree-light.css">
</head>
<body>
  <div id="tree"></div>
  <script src="https://unpkg.com/lodash@4.17.4/lodash.js"></script>
  <script src="https://unpkg.com/inspire-tree@4.1.0/dist/inspire-tree.js"></script>
  <script src="https://unpkg.com/inspire-tree-dom@3.0.2/dist/inspire-tree-dom.js"></script>
  <script>
    var tree = new InspireTree({
      pagination: {limit: 5},
      data: function (node, resolve) {
        resolve([
          {text: '0', children: [
            {text: '0.0', children: [
              {text: '0.0.0'},
              {text: '0.0.1'},
              {text: '0.0.2'},
              {text: '0.0.3'},
              {text: '0.0.4'},
              {text: '0.0.5'},
              {text: '0.0.6'},
              {text: '0.0.7'},
              {text: '0.0.8'},
              {text: '0.0.9'}
            ]},
            {text: '0.1'},
            {text: '0.2'},
            {text: '0.3'},
            {text: '0.4'},
            {text: '0.5'},
            {text: '0.6'},
            {text: '0.7'},
            {text: '0.8'},
            {text: '0.9'}
          ]},
          {text: '1'},
          {text: '2'},
          {text: '3'},
          {text: '4'},
          {text: '5'},
          {text: '6'},
          {text: '7'},
          {text: '8'},
          {text: '9'}
        ]);
      }
    });

    new InspireTreeDOM(tree, {
      target: '#tree',
      deferredRendering: true
    });
  </script>
</body>
</html>
viveleroi commented

The first case should be handled by returning the count of total nodes to the resolve method. The resolve method was designed to accept a count as a param rather than counting the array because it assumes that the server-side is only giving a subset of elements and therefore the tree can't know the true totals.

I can fix the second example, it's the same issue as the original, but it instead applies in a different scenario. When I envision users front-loading all data I tend to think of it being done as data: [...] and not returned from resolve, but it's not difficult to imagine reasons it might be used that way.