feat(tree-view): add nodesFlat prop

docs/src/COMPONENT_API.json

@@ -3235,7 +3235,10 @@
           "ts": "interface DataTableCell<\n  Row = DataTableRow,\n> {\n  key:\n    | DataTableKey<Row>\n    | (string & {});\n  value: DataTableValue;\n  display?: (\n    item: DataTableValue,\n    row: DataTableRow,\n  ) => DataTableValue;\n}\n"
         }
       ],
-      "generics": ["Row", "Row extends DataTableRow = DataTableRow"],
+      "generics": [
+        "Row",
+        "Row extends DataTableRow = DataTableRow"
+      ],
       "rest_props": {
         "type": "Element",
         "name": "div"
@@ -17767,7 +17770,7 @@
         {
           "name": "nodes",
           "kind": "let",
-          "description": "Provide an array of nodes to render",
+          "description": "Provide a nested array of nodes to render",
           "type": "Array<TreeNode>",
           "value": "[]",
           "isFunction": false,
@@ -17872,6 +17875,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "toHierarchy",
+          "kind": "function",
+          "description": "Create a nested array from a flat array",
+          "type": "(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]",
+          "value": "() => {\n  return th(flatArray);\n}",
+          "isFunction": true,
+          "isFunctionDeclaration": true,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "expandNodes",
           "kind": "function",
@@ -18063,4 +18078,4 @@
       }
     }
   ]
-}
+}

docs/src/pages/components/TreeView.svx

@@ -64,6 +64,7 @@ Expanded nodes can be set using `expandedIds`.
 
 <FileSource src="/framed/TreeView/TreeViewExpanded" />
 
+
 ## Initial multiple selected nodes
 
 Initial multiple selected nodes can be set using `selectedIds`.
@@ -107,3 +108,13 @@ Use the `TreeView.showNode` method to show a specific node.
 If a matching node is found, it will be expanded, selected, and focused.
 
 <FileSource src="/framed/TreeView/TreeViewShowNode" />
+
+## Flat data structure
+
+Use the `toHierarchy` method to provide a flat data structure to the `nodes` property.
+
+This method will transform a flat array of objects into the hierarchical array as expected by `nodes`. 
+The child objects in the flat array need to have a `pid` property to reference its parent.
+When `pid` is not provided the object is assumed to be at the root of the tree.
+
+<FileSource src="/framed/TreeView/TreeViewFlatArray" />

docs/src/pages/framed/TreeView/TreeViewFlatArray.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { TreeView, toHierarchy } from "carbon-components-svelte";
+  import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
+  import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
+  import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
+  import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
+
+  let activeId = "";
+  let selectedIds = [];
+  let nodesFlat = [
+    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
+    { id: 1, text: "Analytics", icon: Analytics },
+    { id: 2, text: "IBM Analytics Engine", pid: 1, icon: Analytics },
+    { id: 3, text: "Apache Spark", pid: 2, icon: Analytics },
+    { id: 4, text: "Hadoop", icon: Analytics, pid: 2 },
+    { id: 5, text: "IBM Cloud SQL Query", icon: Analytics, pid: 1 },
+    { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics, pid: 1 },
+    { id: 7, text: "Blockchain", icon: Blockchain },
+    { id: 8, text: "IBM Blockchain Platform", icon: Blockchain, pid: 7 },
+    { id: 9, text: "Databases", icon: DataBase },
+    {
+      id: 10,
+      text: "IBM Cloud Databases for Elasticsearch",
+      icon: DataBase,
+      pid: 9,
+    },
+    {
+      id: 11,
+      text: "IBM Cloud Databases for Enterprise DB",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase, pid: 9 },
+    {
+      id: 13,
+      text: "IBM Cloud Databases for PostgreSQL",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 14, text: "Integration", icon: SignalStrength, disabled: true },
+    {
+      id: 15,
+      text: "IBM API Connect",
+      icon: SignalStrength,
+      disabled: true,
+      pid: 14,
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  nodes={toHierarchy(nodesFlat)}
+  bind:activeId
+  bind:selectedIds
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

src/TreeView/TreeView.svelte

@@ -37,7 +37,7 @@
    */
 
   /**
-   * Provide an array of nodes to render
+   * Provide a nested array of nodes to render
    * @type {Array<TreeNode>}
    */
   export let nodes = [];
@@ -89,6 +89,14 @@
     expandedIds = [];
   }
 
+  /**
+   * Create a nested array from a flat array
+   * @type {(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]}
+   */
+  export function toHierarchy(flatArray) {
+    return th(flatArray);
+  }
+
   /**
    * Programmatically expand a subset of nodes.
    * Expands all nodes if no argument is provided
@@ -147,6 +155,7 @@
   import { createEventDispatcher, setContext, onMount, tick } from "svelte";
   import { writable } from "svelte/store";
   import TreeViewNodeList from "./TreeViewNodeList.svelte";
+  import { toHierarchy as th } from "./treeview";
 
   const dispatch = createEventDispatcher();
   const labelId = `label-${Math.random().toString(36)}`;

src/TreeView/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TreeView } from "./TreeView.svelte";
+export { toHierarchy } from "./treeview";

src/TreeView/index.js

@@ -1 +1,2 @@
 export { default as TreeView } from "./TreeView.svelte";
+export { toHierarchy } from "./treeview";

src/TreeView/treeview.d.ts

@@ -0,0 +1,9 @@
+import { type TreeNode } from "./TreeView.svelte";
+/**
+ * Create a nested array from a flat array
+ */
+export function toHierarchy(
+  flatArray: TreeNode[] & { pid?: any }[],
+): TreeNode[];
+
+export default toHierarchy;

src/TreeView/treeview.js

@@ -0,0 +1,40 @@
+/**
+ * Create a nested array from a flat array
+ * @type {(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]}
+ */
+export function toHierarchy(flatArray) {
+  /** @type TreeNode[] */
+  const tree = [];
+  /** @type TreeNode[] */
+  const childrenOf = [];
+
+  flatArray.forEach((dstItem) => {
+    const { id, pid } = dstItem;
+    childrenOf[id] = childrenOf[id] || [];
+    dstItem["nodes"] = childrenOf[id];
+
+    if (pid) {
+      // objects without pid are root level objects.
+      childrenOf[pid] = childrenOf[pid] || [];
+      delete dstItem.pid; // TreeNode type doesn't have pid.
+      childrenOf[pid].push(dstItem);
+    } else {
+      delete dstItem.pid;
+      tree.push(dstItem);
+    }
+  });
+
+  // Remove the empty nodes props that make TreeView render a twistie.
+  function removeEmptyNodes(element) {
+    element.forEach((elmt) => {
+      if (elmt.nodes?.length === 0) delete elmt.nodes;
+      else {
+        removeEmptyNodes(elmt.nodes);
+      }
+    });
+  }
+  removeEmptyNodes(tree);
+  return tree;
+}
+
+export default toHierarchy;

src/index.js

@@ -127,6 +127,7 @@ export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { TreeView } from "./TreeView";
+export { toHierarchy } from "./TreeView/treeview";
 export { Truncate } from "./Truncate";
 export { default as truncate } from "./Truncate/truncate";
 export {

tests/TreeView/TreeView.test.ts

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
 import TreeView from "./TreeView.test.svelte";
+import TreeViewFlatArray from "./TreeViewFlatArray.test.svelte";
 
 describe("TreeView", () => {
   const getItemByName = (name: RegExp) => {
@@ -37,4 +38,14 @@ describe("TreeView", () => {
       text: "AI / Machine learning",
     });
   });
+
+  it("can turn flat array into nested array", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(TreeViewFlatArray);
+    const firstItem = getItemByName(/Blockchain/);
+    expect(firstItem).toBeInTheDocument();
+    await user.click(firstItem);
+    expect(getSelectedItemByName(/Blockchain/)).toBeInTheDocument();
+    expect(consoleLog).toBeCalledWith("selectedIds", [7]);
+  });
 });

tests/TreeView/TreeViewFlatArray.test.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { Button, TreeView } from "carbon-components-svelte";
+  import type {
+    TreeNode,
+    TreeNodeId,
+  } from "carbon-components-svelte/TreeView/TreeView.svelte";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
+  import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
+  import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
+  import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
+  import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
+
+  let treeview: TreeView;
+  let activeId: TreeNodeId = "";
+  let selectedIds: TreeNodeId[] = [];
+  let expandedIds: TreeNodeId[] = [1];
+
+  let nodesFlat: TreeNode[] & { pid?: any }[] = [
+    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
+    { id: 1, text: "Analytics", icon: Analytics },
+    { id: 2, text: "IBM Analytics Engine", pid: 1, icon: Analytics },
+    { id: 3, text: "Apache Spark", pid: 2, icon: Analytics },
+    { id: 4, text: "Hadoop", icon: Analytics, pid: 2 },
+    { id: 5, text: "IBM Cloud SQL Query", icon: Analytics, pid: 1 },
+    { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics, pid: 1 },
+    { id: 7, text: "Blockchain", icon: Blockchain },
+    { id: 8, text: "IBM Blockchain Platform", icon: Blockchain, pid: 7 },
+    { id: 9, text: "Databases", icon: DataBase },
+    {
+      id: 10,
+      text: "IBM Cloud Databases for Elasticsearch",
+      icon: DataBase,
+      pid: 9,
+    },
+    {
+      id: 11,
+      text: "IBM Cloud Databases for Enterprise DB",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase, pid: 9 },
+    {
+      id: 13,
+      text: "IBM Cloud Databases for PostgreSQL",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 14, text: "Integration", icon: SignalStrength, disabled: true },
+    {
+      id: 15,
+      text: "IBM API Connect",
+      icon: SignalStrength,
+      disabled: true,
+      pid: 14,
+    },
+  ];
+
+  $: console.log("selectedIds", selectedIds);
+</script>
+
+<TreeView
+  bind:this={treeview}
+  size="compact"
+  labelText="Cloud Products"
+  nodes={treeview?.toHierarchy(nodesFlat)}
+  bind:activeId
+  bind:selectedIds
+  bind:expandedIds
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
+  let:node
+>
+  {node.text}
+</TreeView>
+
+<Button on:click={treeview.expandAll}>Expand all</Button>

types/TreeView/TreeView.svelte.d.ts

@@ -15,7 +15,7 @@ type $RestProps = SvelteHTMLElements["ul"];
 
 type $Props = {
   /**
-   * Provide an array of nodes to render
+   * Provide a nested array of nodes to render
    * @default []
    */
   nodes?: Array<TreeNode>;
@@ -94,6 +94,11 @@ export default class TreeView extends SvelteComponentTyped<
    */
   collapseAll: () => void;
 
+  /**
+   * Create a nested array from a flat array
+   */
+  toHierarchy: (flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[];
+
   /**
    * Programmatically expand a subset of nodes.
    * Expands all nodes if no argument is provided

types/TreeView/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TreeView } from "./TreeView.svelte";
+export { toHierarchy } from "./treeview";

types/TreeView/treeview.d.ts

@@ -0,0 +1,9 @@
+import { type TreeNode } from "./TreeView.svelte";
+/**
+ * Create a nested array from a flat array
+ */
+export function toHierarchy(
+  flatArray: TreeNode[] & { pid?: any }[],
+): TreeNode[];
+
+export default toHierarchy;

types/index.d.ts

@@ -143,6 +143,7 @@ export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
 export { default as TreeView } from "./TreeView/TreeView.svelte";
+export { default as toHierarchy } from "./TreeView/treeview";
 export { default as Truncate } from "./Truncate/Truncate.svelte";
 export { default as truncate } from "./Truncate/truncate";
 export { default as Header } from "./UIShell/Header.svelte";