From abf69c976e4a2b4188cf5e5773261f1a25fe20c5 Mon Sep 17 00:00:00 2001
From: Manfred Cheung <mj3cheun@uwaterloo.ca>
Date: Fri, 22 Sep 2023 13:10:46 -0400
Subject: [PATCH] feat: added small example of hierarchy usage

---
 examples/src/basic/hierarchy.ts | 23 +++++++++++++++++++++++
 examples/src/basic/mod.ts       |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 examples/src/basic/hierarchy.ts

diff --git a/examples/src/basic/hierarchy.ts b/examples/src/basic/hierarchy.ts
new file mode 100644
index 0000000..341085d
--- /dev/null
+++ b/examples/src/basic/hierarchy.ts
@@ -0,0 +1,23 @@
+import {html, render} from 'lit-html';
+import {GraferController} from '../../../src/mod';
+
+export async function hierarchy(container: HTMLElement): Promise<void> {
+    render(html`<canvas class="grafer_container"></canvas><mouse-interactions></mouse-interactions>`, container);
+    const canvas = document.querySelector('.grafer_container') as HTMLCanvasElement;
+
+    const points = {
+        data: [
+            { id: 0, x: 0, y: 0 },
+            { id: 1, x: 2, y: 0, parentId: 0 },
+            { id: 2, x: 2, y: 0, parentId: 1 },
+        ],
+    };
+    const nodes = {
+        ...points,
+        mappings: {
+            point: (d: any): number => d.id,
+        },
+    };
+
+    new GraferController(canvas, { points, layers: [{nodes}] });
+}
diff --git a/examples/src/basic/mod.ts b/examples/src/basic/mod.ts
index 72bdeb0..8232df7 100755
--- a/examples/src/basic/mod.ts
+++ b/examples/src/basic/mod.ts
@@ -4,3 +4,4 @@ export * from './nodeColors';
 export * from './edgeColors';
 export * from './nodeRadius';
 export * from './nodeID';
+export * from './hierarchy';