From b91f42a1db1d002075df655b12cc34510654b49b Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Sun, 18 Sep 2022 10:02:11 +0200
Subject: [PATCH] Enable tree data as an object using the hierarchy of its
 properties (#98)

* Enable tree data as an object using its hierarchy

* reduces complexity to group function

* removes hardcoded group key using index number as string

* fixes parent group converting as string

* adds test case with tree object with groups with number array

* adds treeLeafKey option

* fixes path calculation

* changes check if the tree is an object

* tests pull_request_target event on CI

* reverts pull_request_target from CI

* adds sample

* adds sample - 2
---
 docs/.vuepress/config.js                      |   1 +
 docs/samples/tree.md                          |  77 +++++++++++++++
 docs/scripts/data.js                          |  81 ++++++++++++++++
 docs/usage.md                                 |   6 +-
 src/controller.js                             |  16 ++--
 src/element.js                                |   4 +-
 src/utils.js                                  |  90 ++++++++++++++++--
 test/fixtures/grouped/treeBasic.js            |  54 +++++++++++
 test/fixtures/grouped/treeBasic.png           | Bin 0 -> 8723 bytes
 test/fixtures/grouped/treeBasicAndCaptions.js |  54 +++++++++++
 .../fixtures/grouped/treeBasicAndCaptions.png | Bin 0 -> 9983 bytes
 .../grouped/treeBasicWithGroupsNumbers.js     |  54 +++++++++++
 .../grouped/treeBasicWithGroupsNumbers.png    | Bin 0 -> 8723 bytes
 test/fixtures/grouped/treeBasicWithLeafKey.js |  55 +++++++++++
 .../fixtures/grouped/treeBasicWithLeafKey.png | Bin 0 -> 8723 bytes
 test/specs/utils.spec.js                      |  29 +++++-
 types/index.esm.d.ts                          |   3 +-
 17 files changed, 501 insertions(+), 23 deletions(-)
 create mode 100644 docs/samples/tree.md
 create mode 100644 test/fixtures/grouped/treeBasic.js
 create mode 100644 test/fixtures/grouped/treeBasic.png
 create mode 100644 test/fixtures/grouped/treeBasicAndCaptions.js
 create mode 100644 test/fixtures/grouped/treeBasicAndCaptions.png
 create mode 100644 test/fixtures/grouped/treeBasicWithGroupsNumbers.js
 create mode 100644 test/fixtures/grouped/treeBasicWithGroupsNumbers.png
 create mode 100644 test/fixtures/grouped/treeBasicWithLeafKey.js
 create mode 100644 test/fixtures/grouped/treeBasicWithLeafKey.png

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 9edfb0c..b910838 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -49,6 +49,7 @@ module.exports = {
           'basic',
           'labels',
           'groups',
+          'tree',
           'captions',
           'dividers',
           'rtl'
diff --git a/docs/samples/tree.md b/docs/samples/tree.md
new file mode 100644
index 0000000..e84db0c
--- /dev/null
+++ b/docs/samples/tree.md
@@ -0,0 +1,77 @@
+# Tree
+
+```js chart-editor
+// <block:options:1>
+const options = {
+  plugins: {
+    title: {
+      display: true
+    },
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        title(items) {
+          const dataItem = items[0].raw;
+          const obj = dataItem._data;
+          return obj.name;
+        },
+      }
+    }
+  }
+};
+// </block:options>
+
+// <block:config:0>
+const config = {
+  type: 'treemap',
+  data: {
+    datasets: [{
+      tree: Data.objectsTree,
+      treeLeafKey: 'name',
+      key: 'value',
+      groups: [],
+      spacing: 1,
+      borderWidth: 0.5,
+      borderColor: '#FF8F00',
+      backgroundColor: 'rgba(255,167,38,0.3)',
+      hoverBackgroundColor: 'rgba(238,238,238,0.5)',
+      captions: {
+        align: 'center'
+      },
+      labels: {
+        display: true,
+        formatter: (ctx) => {
+          return ctx.raw.v;
+        }
+      }
+    }]
+  },
+  options
+};
+// </block:config>
+
+function toggle(chart) {
+  const dataset = chart.data.datasets[0];
+  if (dataset.groups.length) {
+    dataset.groups = [];
+  } else {
+    dataset.groups = [0, 1];
+    dataset.groups.push('name');
+  }
+  chart.update();
+}
+
+const actions = [
+  {
+    name: 'Toggle GroupBy',
+    handler: (chart) => toggle(chart)
+  }
+];
+
+module.exports = {
+  actions,
+  config,
+};
+```
diff --git a/docs/scripts/data.js b/docs/scripts/data.js
index 11df710..df65eb1 100644
--- a/docs/scripts/data.js
+++ b/docs/scripts/data.js
@@ -460,3 +460,84 @@ export const statsByState = [
     area: 253335
   }
 ];
+
+export const objectsTree = {
+  analytics: {
+    cluster: {
+      agglomerative: {
+        value: 3938
+      },
+      communityStructure: {
+        value: 3812
+      },
+      hierarchical: {
+        value: 6714
+      },
+      mergeEdge: {
+        value: 743
+      },
+    },
+    graph: {
+      betweennessCentrality: {
+        value: 3534
+      },
+      linkDistance: {
+        value: 5731
+      },
+      maxFlowMinCut: {
+        value: 7840
+      },
+      shortestPaths: {
+        value: 5914
+      },
+      spanningTree: {
+        value: 3416
+      },
+    },
+    optimization: {
+      aspectRatioBanker: {
+        value: 7074
+      }
+    }
+  },
+  animate: {
+    easing: {
+      value: 17010
+    },
+    functionSequence: {
+      vaue: 5842
+    },
+    interpolate: {
+      arrayInterpolator: {
+        value: 1983
+      },
+      colorInterpolator: {
+        value: 2047
+      },
+      dateInterpolator: {
+        value: 1375
+      },
+      interpolator: {
+        value: 8746
+      },
+      matrixInterpolator: {
+        value: 2202
+      },
+      numberInterpolator: {
+        value: 1382
+      },
+      objectInterpolator: {
+        value: 1629
+      },
+      pointInterpolator: {
+        value: 1675
+      },
+      rectangleInterpolator: {
+        value: 2042
+      },
+    },
+    schedulable: {
+      value: 1041
+    }
+  }
+};
diff --git a/docs/usage.md b/docs/usage.md
index 3404b11..a62b2d3 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -101,7 +101,8 @@ These are used to set display properties for a specific dataset.
 | [`labels`](#labels) | `object` | - | 
 | [`rtl`](#general) | `boolean` | - | `false`
 | [`spacing`](#styling) | `number` | - | `0.5`
-| [`tree`](#general) | `number[]` \| `object[]` | - |  **required**
+| [`tree`](#general) | `number[]` \| `object[]` \| `object` | - |  **required**
+| [`treeLeafKey`](#general) | `string` | - | `_leaf` |
 
 All these values, if `undefined`, fallback to the scopes described in [option resolution](https://www.chartjs.org/docs/latest/general/options.html).
 
@@ -114,8 +115,9 @@ All these values, if `undefined`, fallback to the scopes described in [option re
 | `label` | The label for the dataset which appears in the legend and tooltips.
 | `rtl` | If `true`, the treemap elements are rendering from right to left.
 | `tree` | Tree data should be provided in `tree` property of dataset. `data` is then automatically build.
+| `treeLeafKey` | The name of the key where the object key of leaf node of tree object is stored. Used only when `tree` is an `object`, as hierarchical data.
 
-Only the `tree`, `key` and `groups` options need to be specified in the dataset namespace.
+Only the `tree`, `treeLeafKey`, `key` and `groups` options need to be specified in the dataset namespace.
 
 ```js
 function colorFromRaw(ctx) {
diff --git a/src/controller.js b/src/controller.js
index a74306b..5b55ce2 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -1,6 +1,6 @@
 import {Chart, DatasetController, registry} from 'chart.js';
-import {toFont, valueOrDefault} from 'chart.js/helpers';
-import {group, requireVersion} from './utils';
+import {toFont, valueOrDefault, isObject} from 'chart.js/helpers';
+import {group, requireVersion, normalizeTreeToArray, getGroupKey} from './utils';
 import {shouldDrawCaption} from './element';
 import squarify from './squarify';
 import {version} from '../package.json';
@@ -30,7 +30,11 @@ function arrayNotEqual(a1, a2) {
 
 function buildData(dataset, mainRect, captions) {
   const key = dataset.key || '';
+  const treeLeafKey = dataset.treeLeafKey || '_leaf';
   let tree = dataset.tree || [];
+  if (isObject(tree)) {
+    tree = normalizeTreeToArray(key, treeLeafKey, tree);
+  }
   const groups = dataset.groups || [];
   const glen = groups.length;
   const sp = valueOrDefault(dataset.spacing, 0) + valueOrDefault(dataset.borderWidth, 0);
@@ -39,9 +43,9 @@ function buildData(dataset, mainRect, captions) {
   const padding = valueOrDefault(captions.padding, 3);
 
   function recur(gidx, rect, parent, gs) {
-    const g = groups[gidx];
-    const pg = (gidx > 0) && groups[gidx - 1];
-    const gdata = group(tree, g, key, pg, parent);
+    const g = getGroupKey(groups[gidx]);
+    const pg = (gidx > 0) && getGroupKey(groups[gidx - 1]);
+    const gdata = group(tree, g, key, treeLeafKey, pg, parent, groups.filter((item, index) => index <= gidx));
     const gsq = squarify(gdata, rect, key, g, gidx, gs);
     const ret = gsq.slice();
     let subRect;
@@ -199,7 +203,7 @@ TreemapController.overrides = {
         label(item) {
           const dataset = item.dataset;
           const dataItem = dataset.data[item.dataIndex];
-          const label = dataItem.g || dataset.label;
+          const label = dataItem.g || dataItem._data.label || dataset.label;
           return (label ? label + ': ' : '') + dataItem.v;
         }
       }
diff --git a/src/element.js b/src/element.js
index df26557..3dfe78a 100644
--- a/src/element.js
+++ b/src/element.js
@@ -276,7 +276,7 @@ TreemapElement.defaults = {
     align: undefined,
     color: 'black',
     display: true,
-    formatter: (ctx) => ctx.raw.g || '',
+    formatter: (ctx) => ctx.raw.g || ctx.raw._data.label || '',
     font: {},
     padding: 3
   },
@@ -284,7 +284,7 @@ TreemapElement.defaults = {
     align: 'center',
     color: 'black',
     display: false,
-    formatter: (ctx) => ctx.raw.g ? [ctx.raw.g, ctx.raw.v] : ctx.raw.v,
+    formatter: (ctx) => ctx.raw.g ? [ctx.raw.g, ctx.raw.v] : (ctx.raw._data.label ? [ctx.raw._data.label, ctx.raw.v] : ctx.raw.v),
     font: {},
     position: 'middle',
     padding: 3
diff --git a/src/utils.js b/src/utils.js
index 5b91171..8f1e095 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,54 @@
 import {isObject} from 'chart.js/helpers';
 
+export const getGroupKey = (lvl) => '' + lvl;
+
+function scanTreeObject(key, treeLeafKey, obj, tree = [], lvl = 0, result = []) {
+  const objIndex = lvl - 1;
+  if (key in obj && lvl > 0) {
+    const record = tree.reduce(function(reduced, item, i) {
+      if (i !== objIndex) {
+        reduced[getGroupKey(i)] = item;
+      }
+      return reduced;
+    }, {});
+    record[treeLeafKey] = tree[objIndex];
+    record[key] = obj[key];
+    result.push(record);
+  } else {
+    for (const childKey of Object.keys(obj)) {
+      const child = obj[childKey];
+      if (isObject(child)) {
+        tree.push(childKey);
+        scanTreeObject(key, treeLeafKey, child, tree, lvl + 1, result);
+      }
+    }
+  }
+  tree.splice(objIndex, 1);
+  return result;
+}
+
+export function normalizeTreeToArray(key, treeLeafKey, obj) {
+  const data = scanTreeObject(key, treeLeafKey, obj);
+  if (!data.length) {
+    return data;
+  }
+  const max = data.reduce(function(maxValue, element) {
+    // minus 2 because _leaf and value properties are added
+    // on top to groups ones
+    const keys = Object.keys(element).length - 2;
+    return maxValue > keys ? maxValue : keys;
+  });
+  data.forEach(function(element) {
+    for (let i = 0; i < max; i++) {
+      const groupKey = getGroupKey(i);
+      if (!element[groupKey]) {
+        element[groupKey] = '';
+      }
+    }
+  });
+  return data;
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
 export function flatten(input) {
   const stack = [...input];
@@ -18,36 +67,59 @@ export function flatten(input) {
   return res.reverse();
 }
 
+function getPath(groups, value, defaultValue) {
+  if (!groups.length) {
+    return;
+  }
+  const path = [];
+  for (const grp of groups) {
+    const item = value[grp];
+    if (item === '') {
+      path.push(defaultValue);
+      break;
+    }
+    path.push(item);
+  }
+  return path.length ? path.join('.') : defaultValue;
+}
+
 /**
  * @param {[]} values
  * @param {string} grp
  * @param {string} key
+ * @param {string} treeeLeafKey
  * @param {string} [mainGrp]
  * @param {*} [mainValue]
+ * @param {[]} groups
  */
-export function group(values, grp, key, mainGrp, mainValue) {
+export function group(values, grp, key, treeLeafKey, mainGrp, mainValue, groups = []) {
   const tmp = Object.create(null);
   const data = Object.create(null);
   const ret = [];
-  let g, i, n, v;
+  let g, i, n;
   for (i = 0, n = values.length; i < n; ++i) {
-    v = values[i];
+    const v = values[i];
     if (mainGrp && v[mainGrp] !== mainValue) {
       continue;
     }
-    g = v[grp] || '';
+    g = v[grp] || v[treeLeafKey] || '';
     if (!(g in tmp)) {
-      tmp[g] = 0;
+      tmp[g] = {value: 0};
       data[g] = [];
     }
-    tmp[g] += +v[key];
+    tmp[g].value += +v[key];
+    tmp[g].label = v[grp] || '';
+    tmp[g].path = getPath(groups, v, g);
     data[g].push(v);
   }
 
   Object.keys(tmp).forEach((k) => {
-    v = {children: data[k]};
-    v[key] = +tmp[k];
-    v[grp] = k;
+    const v = {children: data[k]};
+    v[key] = +tmp[k].value;
+    v[grp] = tmp[k].label;
+    v.label = k;
+    v.path = tmp[k].path;
+
     if (mainGrp) {
       v[mainGrp] = mainValue;
     }
diff --git a/test/fixtures/grouped/treeBasic.js b/test/fixtures/grouped/treeBasic.js
new file mode 100644
index 0000000..b19b28d
--- /dev/null
+++ b/test/fixtures/grouped/treeBasic.js
@@ -0,0 +1,54 @@
+const data = {
+  A: {
+    C: {
+      C1: {
+        C1a: {
+          value: 6.25
+        },
+        C1b: {
+          value: 6.25
+        },
+      },
+      C2: {
+        value: 12.5
+      }
+    },
+    D: {
+      value: 25
+    }
+  },
+  B: {
+    value: 50,
+  },
+  G: {
+    C: {
+      value: 50
+    }
+  },
+};
+
+export default {
+  config: {
+    type: 'treemap',
+    data: {
+      datasets: [{
+        tree: data,
+        key: 'value',
+        groups: ['0', '1', '2', '_leaf'],
+        captions: {
+          display: false
+        },
+        labels: {
+          display: true
+        }
+      }]
+    },
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    },
+    spriteText: true
+  }
+};
diff --git a/test/fixtures/grouped/treeBasic.png b/test/fixtures/grouped/treeBasic.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b441c4b5faf8953770e2002056fc8623ddeaad1
GIT binary patch
literal 8723
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
VPNZLAEf2ug_N}|O<Zbpi`!|L;?bZMQ

literal 0
HcmV?d00001

diff --git a/test/fixtures/grouped/treeBasicAndCaptions.js b/test/fixtures/grouped/treeBasicAndCaptions.js
new file mode 100644
index 0000000..17a2a46
--- /dev/null
+++ b/test/fixtures/grouped/treeBasicAndCaptions.js
@@ -0,0 +1,54 @@
+const data = {
+  A: {
+    C: {
+      C1: {
+        C1a: {
+          value: 6.25
+        },
+        C1b: {
+          value: 6.25
+        },
+      },
+      C2: {
+        value: 12.5
+      }
+    },
+    D: {
+      value: 25
+    }
+  },
+  B: {
+    value: 50,
+  },
+  G: {
+    C: {
+      value: 50
+    }
+  },
+};
+
+export default {
+  config: {
+    type: 'treemap',
+    data: {
+      datasets: [{
+        tree: data,
+        key: 'value',
+        groups: ['0', '1', '2', '_leaf'],
+        captions: {
+          display: true
+        },
+        labels: {
+          display: true
+        }
+      }]
+    },
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    },
+    spriteText: true
+  }
+};
diff --git a/test/fixtures/grouped/treeBasicAndCaptions.png b/test/fixtures/grouped/treeBasicAndCaptions.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae32ef6290ee8d9d8ba82503a7a7188f0f79b551
GIT binary patch
literal 9983
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
S90`g5{ut_->Xd3ZNBsx!rgWA7

literal 0
HcmV?d00001

diff --git a/test/fixtures/grouped/treeBasicWithGroupsNumbers.js b/test/fixtures/grouped/treeBasicWithGroupsNumbers.js
new file mode 100644
index 0000000..e379856
--- /dev/null
+++ b/test/fixtures/grouped/treeBasicWithGroupsNumbers.js
@@ -0,0 +1,54 @@
+const data = {
+  A: {
+    C: {
+      C1: {
+        C1a: {
+          value: 6.25
+        },
+        C1b: {
+          value: 6.25
+        },
+      },
+      C2: {
+        value: 12.5
+      }
+    },
+    D: {
+      value: 25
+    }
+  },
+  B: {
+    value: 50,
+  },
+  G: {
+    C: {
+      value: 50
+    }
+  },
+};
+
+export default {
+  config: {
+    type: 'treemap',
+    data: {
+      datasets: [{
+        tree: data,
+        key: 'value',
+        groups: [0, 1, 2, '_leaf'],
+        captions: {
+          display: false
+        },
+        labels: {
+          display: true
+        }
+      }]
+    },
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    },
+    spriteText: true
+  }
+};
diff --git a/test/fixtures/grouped/treeBasicWithGroupsNumbers.png b/test/fixtures/grouped/treeBasicWithGroupsNumbers.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b441c4b5faf8953770e2002056fc8623ddeaad1
GIT binary patch
literal 8723
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
VPNZLAEf2ug_N}|O<Zbpi`!|L;?bZMQ

literal 0
HcmV?d00001

diff --git a/test/fixtures/grouped/treeBasicWithLeafKey.js b/test/fixtures/grouped/treeBasicWithLeafKey.js
new file mode 100644
index 0000000..e4e5814
--- /dev/null
+++ b/test/fixtures/grouped/treeBasicWithLeafKey.js
@@ -0,0 +1,55 @@
+const data = {
+  A: {
+    C: {
+      C1: {
+        C1a: {
+          value: 6.25
+        },
+        C1b: {
+          value: 6.25
+        },
+      },
+      C2: {
+        value: 12.5
+      }
+    },
+    D: {
+      value: 25
+    }
+  },
+  B: {
+    value: 50,
+  },
+  G: {
+    C: {
+      value: 50
+    }
+  },
+};
+
+export default {
+  config: {
+    type: 'treemap',
+    data: {
+      datasets: [{
+        tree: data,
+        treeLeafKey: '_test',
+        key: 'value',
+        groups: ['0', '1', '2', '_test'],
+        captions: {
+          display: false
+        },
+        labels: {
+          display: true
+        }
+      }]
+    },
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    },
+    spriteText: true
+  }
+};
diff --git a/test/fixtures/grouped/treeBasicWithLeafKey.png b/test/fixtures/grouped/treeBasicWithLeafKey.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b441c4b5faf8953770e2002056fc8623ddeaad1
GIT binary patch
literal 8723
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
VPNZLAEf2ug_N}|O<Zbpi`!|L;?bZMQ

literal 0
HcmV?d00001

diff --git a/test/specs/utils.spec.js b/test/specs/utils.spec.js
index 1150388..5a408a3 100644
--- a/test/specs/utils.spec.js
+++ b/test/specs/utils.spec.js
@@ -1,4 +1,4 @@
-import {flatten, group, sort, sum} from '../../src/utils';
+import {flatten, group, sort, sum, normalizeTreeToArray} from '../../src/utils';
 
 describe('utils', function() {
 
@@ -12,7 +12,7 @@ describe('utils', function() {
   describe('group', function() {
     it('should group 1 level of data', function() {
       var a = [{k: 'a', v: 1}, {k: 'b', v: 2}, {k: 'a', v: 3}];
-      var g1 = group(a, 'k', 'v');
+      var g1 = group(a, 'k', 'v', 'leaf');
       expect(g1).toEqual([
         jasmine.objectContaining({k: 'a', v: 4}),
         jasmine.objectContaining({k: 'b', v: 2})
@@ -20,7 +20,7 @@ describe('utils', function() {
     });
     it('should group 2 levels of data', function() {
       var a = [{k: 'a', k2: 'z', v: 1}, {k: 'b', k2: 'z', v: 2}, {k: 'a', k2: 'x', v: 3}];
-      var g1 = group(a, 'k2', 'v', 'k', 'a');
+      var g1 = group(a, 'k2', 'v', 'leaf', 'k', 'a');
       expect(g1).toEqual([
         jasmine.objectContaining({k2: 'z', v: 1}),
         jasmine.objectContaining({k2: 'x', v: 3})
@@ -28,6 +28,29 @@ describe('utils', function() {
     });
   });
 
+  describe('normalize tree object to array', function() {
+    it('should have 2 elements of data', function() {
+      var a = {A: {C: {value: 0}}, B: {D: {value: 0}}};
+      var g1 = normalizeTreeToArray('value', 'leaf', a);
+      expect(g1).toEqual([
+        jasmine.objectContaining({0: 'A', leaf: 'C', value: 0}),
+        jasmine.objectContaining({0: 'B', leaf: 'D', value: 0})
+      ]);
+    });
+    it('should have 1 element of data', function() {
+      var a = {A: {C: {value: 0}}, B: {D: {none: 0}}};
+      var g1 = normalizeTreeToArray('value', 'leaf', a);
+      expect(g1).toEqual([
+        jasmine.objectContaining({0: 'A', leaf: 'C', value: 0})
+      ]);
+    });
+    it('should not have any elements of data', function() {
+      var a = {A: {C: {value: 0}}, B: {D: {value: 0}}};
+      var g1 = normalizeTreeToArray('none', 'leaf', a);
+      expect(g1).toEqual([]);
+    });
+  });
+
   describe('sort', function() {
     it('should reverse sort array', function() {
       var a = [8, 3, 5, 4, 1, 3, 6, 2, 7];
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 2976cf6..116763d 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -66,7 +66,8 @@ export interface TreemapControllerDatasetOptions<DType> {
 
   data: TreemapDataPoint[]; // This will be auto-generated from `tree`
   groups?: Array<keyof DType>;
-  tree: number[] | DType[];
+  tree: number[] | DType[] | AnyObject;
+  treeLeafKey?: keyof DType;
   key?: keyof DType;
 }