SY-2442 - Various Minor Console Fixes (#1234)

* [console] - various minor fixes

* [console] - various PR touchups

* [pluto] - improved tree specs

* [ops/ts] - touchups

* [pluto] - addressed PR comments'

* [pluto] - addressed PR comments'

Author: emilbon99

console/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@synnaxlabs/console",
   "private": true,
-  "version": "0.41.1",
+  "version": "0.41.2",
   "type": "module",
   "scripts": {
     "dev": "tauri dev",

console/src/group/services/ontology.tsx

@@ -106,25 +106,20 @@ const useUngroupSelection = (): ((props: Ontology.TreeContextMenuProps) => void)
     } = props;
     if (selection.parentID == null) return;
     // Sort the groups by depth that way deeper nested groups are ungrouped first.
-    selection.resources.sort((a, b) => {
-      const a_depth =
-        selection.nodes.find((n) => n.key === a.id.toString())?.depth ?? 0;
-      const b_depth =
-        selection.nodes.find((n) => n.key === b.id.toString())?.depth ?? 0;
-      return b_depth - a_depth;
-    });
+    selection.nodes.sort((a, b) => b.depth - a.depth);
     const prevNodes = Tree.deepCopy(nodes);
-    const isLevel0 = selection.nodes.some(({ depth }) => depth === 0);
     setNodes([
-      ...selection.resources.reduce((acc, { id }) => {
-        const children =
-          Tree.findNode({ tree: nodes, key: id.toString() })?.children ?? [];
+      ...selection.nodes.reduce((acc, { key }) => {
+        const children = Tree.findNode({ tree: nodes, key })?.children ?? [];
         acc = Tree.moveNode({
           tree: acc,
-          destination: isLevel0 ? null : selection.parentID.toString(),
+          destination:
+            selection.parentID.toString() === selection.rootID.toString()
+              ? null
+              : selection.parentID.toString(),
           keys: children.map((c) => c.key),
         });
-        acc = Tree.removeNode({ tree: acc, keys: id.toString() });
+        acc = Tree.removeNode({ tree: acc, keys: key });
         return acc;
       }, nodes),
     ]);

console/src/layouts/Main.tsx

@@ -97,7 +97,7 @@ export const Main = (): ReactElement => (
       style={{ paddingRight: "1rem", paddingBottom: "1rem" }}
     >
       <Nav.Left />
-      <Align.Space size="tiny" grow>
+      <Align.Space size="tiny" grow style={{ width: 0 }}>
         <Align.Space x size="tiny" grow style={{ height: 0 }}>
           <Layout.Nav.Drawer location="left" menuItems={Nav.DRAWER_ITEMS} />
           <Mosaic />

console/src/layouts/Mosaic.tsx

@@ -326,7 +326,7 @@ const NavTop = (): ReactElement | null => {
       startIcon={<Icon.Visualize />}
       endIcon={
         <Align.Space style={{ marginLeft: "0.5rem", marginRight: "-1rem" }}>
-          <Triggers.Text level="small" shade={11} weight={450} trigger={["v"]} />
+          <Triggers.Text level="small" shade={9} weight={450} trigger={["V"]} />
         </Align.Space>
       }
     >

console/src/ontology/Tree.tsx

@@ -376,15 +376,13 @@ const Internal = ({ root }: TreeProps): ReactElement => {
       );
       const firstNodeOfMinDepth = dropped.find(({ data }) => data?.depth === minDepth);
       if (firstNodeOfMinDepth == null) return [];
-      // Find the parent where the node is being dropped.
+      const moved = dropped.filter(({ data }) => data?.depth === minDepth);
+      const keys = moved.map(({ key }) => key as string);
       const parent = Core.findNodeParent({
         tree: nodesSnapshot,
         key: firstNodeOfMinDepth.key.toString(),
       });
-      if (parent == null) return [];
-      const moved = dropped.filter(({ data }) => data?.depth === minDepth);
-      const keys = moved.map(({ key }) => key as string);
-      const sourceID = new ontology.ID(parent.key);
+      const sourceID = new ontology.ID(parent?.key ?? root.toString());
       treeProps.contract(...keys);
       dropMutation.mutate({
         source: sourceID,
@@ -393,7 +391,7 @@ const Internal = ({ root }: TreeProps): ReactElement => {
       });
       return moved;
     },
-    [client, treeProps.contract],
+    [client, treeProps.contract, root],
   );
 
   const getRenameProps = useCallback(

pluto/src/tree/Tree.spec.tsx

@@ -9,7 +9,22 @@
 
 import { describe, expect, it } from "vitest";
 
-import { type Node, sortAndSplice } from "@/tree/core";
+import {
+  deepCopy,
+  findNode,
+  findNodeParent,
+  findNodes,
+  flatten,
+  getAllNodesOfMinDepth,
+  getDescendants,
+  moveNode,
+  type Node,
+  type NodeWithPosition,
+  removeNode,
+  setNode,
+  sortAndSplice,
+  updateNode,
+} from "@/tree/core";
 
 describe("Tree", () => {
   describe("sortAndSplice", () => {
@@ -40,4 +55,257 @@ describe("Tree", () => {
       ]);
     });
   });
+
+  describe("flatten", () => {
+    it("should correctly flatten a tree structure", () => {
+      const nodes: Node[] = [
+        {
+          key: "1",
+          name: "parent1",
+          children: [
+            { key: "1-1", name: "child1" },
+            { key: "1-2", name: "child2" },
+          ],
+        },
+        { key: "2", name: "parent2" },
+      ];
+      const expanded = ["1"];
+      const result = flatten({ nodes, expanded });
+      expect(result).toEqual([
+        {
+          key: "1",
+          name: "parent1",
+          depth: 0,
+          expanded: true,
+          index: 0,
+          path: "1/",
+          children: [
+            { key: "1-1", name: "child1" },
+            { key: "1-2", name: "child2" },
+          ],
+        },
+        {
+          key: "1-1",
+          name: "child1",
+          depth: 1,
+          expanded: false,
+          index: 0,
+          path: "1/1-1/",
+        },
+        {
+          key: "1-2",
+          name: "child2",
+          depth: 1,
+          expanded: false,
+          index: 1,
+          path: "1/1-2/",
+        },
+        { key: "2", name: "parent2", depth: 0, expanded: false, index: 1, path: "2/" },
+      ]);
+    });
+
+    it("should respect sort option", () => {
+      const nodes: Node[] = [
+        { key: "2", name: "B" },
+        { key: "1", name: "A" },
+      ];
+      const result = flatten({ nodes, expanded: [], sort: true });
+      expect(result[0].name).toBe("A");
+      expect(result[1].name).toBe("B");
+    });
+  });
+
+  describe("moveNode", () => {
+    it("should move nodes to root when destination is null", () => {
+      const tree: Node[] = [
+        {
+          key: "1",
+          name: "parent",
+          children: [{ key: "2", name: "child" }],
+        },
+      ];
+      const result = moveNode({ tree, destination: null, keys: "2" });
+      expect(result).toHaveLength(2);
+      expect(result.find((n) => n.key === "2")).toBeDefined();
+    });
+
+    it("should move node to new parent", () => {
+      const tree: Node[] = [
+        { key: "1", name: "parent1" },
+        { key: "2", name: "parent2", children: [] },
+      ];
+      const result = moveNode({ tree, destination: "2", keys: "1" });
+      expect(result[0].children?.[0].key).toBe("1");
+    });
+  });
+
+  describe("removeNode", () => {
+    it("should remove node from root level", () => {
+      const tree: Node[] = [
+        { key: "1", name: "node1" },
+        { key: "2", name: "node2" },
+      ];
+      const result = removeNode({ tree, keys: "1" });
+      expect(result).toHaveLength(1);
+      expect(result[0].key).toBe("2");
+    });
+
+    it("should remove node from nested level", () => {
+      const tree: Node[] = [
+        {
+          key: "1",
+          name: "parent",
+          children: [{ key: "2", name: "child" }],
+        },
+      ];
+      const result = removeNode({ tree, keys: "2" });
+      expect(result[0].children).toHaveLength(0);
+    });
+  });
+
+  describe("setNode", () => {
+    it("should add nodes to root when destination is null", () => {
+      const tree: Node[] = [{ key: "1", name: "existing" }];
+      const addition: Node = { key: "2", name: "new" };
+      const result = setNode({ tree, destination: null, additions: addition });
+      expect(result).toHaveLength(2);
+      expect(result.find((n) => n.key === "2")).toBeDefined();
+    });
+
+    it("should add nodes to specified parent", () => {
+      const tree: Node[] = [{ key: "1", name: "parent", children: [] }];
+      const addition: Node = { key: "2", name: "child" };
+      const result = setNode({ tree, destination: "1", additions: addition });
+      expect(result[0].children).toHaveLength(1);
+      expect(result[0].children?.[0].key).toBe("2");
+    });
+  });
+
+  describe("updateNode", () => {
+    it("should update node properties", () => {
+      const tree: Node[] = [{ key: "1", name: "old" }];
+      const result = updateNode({
+        tree,
+        key: "1",
+        updater: (node) => ({ ...node, name: "new" }),
+      });
+      expect(result[0].name).toBe("new");
+    });
+
+    it("should throw on missing node when throwOnMissing is true", () => {
+      const tree: Node[] = [];
+      expect(() =>
+        updateNode({
+          tree,
+          key: "missing",
+          updater: (node) => node,
+        }),
+      ).toThrow();
+    });
+  });
+
+  describe("findNode", () => {
+    it("should find node and return position info", () => {
+      const tree: Node[] = [
+        {
+          key: "1",
+          name: "parent",
+          children: [{ key: "2", name: "child" }],
+        },
+      ];
+      const result = findNode({ tree, key: "2" });
+      expect(result?.depth).toBe(1);
+      expect(result?.position).toBe(0);
+    });
+
+    it("should return null for non-existent node", () => {
+      const tree: Node[] = [{ key: "1", name: "node" }];
+      const result = findNode({ tree, key: "missing" });
+      expect(result).toBeNull();
+    });
+  });
+
+  describe("findNodes", () => {
+    it("should find multiple nodes", () => {
+      const tree: Node[] = [
+        { key: "1", name: "node1" },
+        { key: "2", name: "node2" },
+      ];
+      const result = findNodes({ tree, keys: ["1", "2"] });
+      expect(result).toHaveLength(2);
+    });
+  });
+
+  describe("findNodeParent", () => {
+    it("should find parent of nested node", () => {
+      const tree: Node[] = [
+        {
+          key: "1",
+          name: "parent",
+          children: [{ key: "2", name: "child" }],
+        },
+      ];
+      const result = findNodeParent({ tree, key: "2" });
+      expect(result?.key).toBe("1");
+    });
+
+    it("should return null for root level node", () => {
+      const tree: Node[] = [{ key: "1", name: "root" }];
+      const result = findNodeParent({ tree, key: "1" });
+      expect(result).toBeNull();
+    });
+  });
+
+  describe("deepCopy", () => {
+    it("should create deep copy of tree structure", () => {
+      const original: Node[] = [
+        {
+          key: "1",
+          name: "parent",
+          children: [{ key: "2", name: "child" }],
+        },
+      ];
+      const copy = deepCopy(original);
+      copy[0].name = "modified";
+      expect(original[0].name).toBe("parent");
+    });
+  });
+
+  describe("getDescendants", () => {
+    it("should return all descendants of nodes", () => {
+      const node: Node = {
+        key: "1",
+        name: "parent",
+        children: [
+          { key: "2", name: "child1" },
+          {
+            key: "3",
+            name: "child2",
+            children: [{ key: "4", name: "grandchild" }],
+          },
+        ],
+      };
+      const result = getDescendants(node);
+      expect(result).toHaveLength(4);
+      expect(result.map((n) => n.key)).toEqual(["1", "2", "3", "4"]);
+    });
+  });
+
+  describe("getAllNodesOfMinDepth", () => {
+    it("should return nodes at minimum depth", () => {
+      const nodes: NodeWithPosition[] = [
+        { key: "1", name: "root1", depth: 0, position: 0 },
+        { key: "2", name: "root2", depth: 0, position: 1 },
+        { key: "3", name: "child", depth: 1, position: 0 },
+      ];
+      const result = getAllNodesOfMinDepth(nodes);
+      expect(result).toHaveLength(2);
+      expect(result.every((n) => n.depth === 0)).toBe(true);
+    });
+
+    it("should return empty array for empty input", () => {
+      const result = getAllNodesOfMinDepth([]);
+      expect(result).toHaveLength(0);
+    });
+  });
 });

pluto/src/tree/core.ts

@@ -134,9 +134,8 @@ export interface RemoveNodeProps {
 
 export const removeNode = ({ tree, keys }: RemoveNodeProps): Node[] => {
   keys = toArray(keys);
-  const treeKeys = tree.map((node) => node.key);
   keys.forEach((key) => {
-    const index = treeKeys.indexOf(key);
+    const index = tree.findIndex((node) => node.key === key);
     if (index !== -1) tree.splice(index, 1);
     else {
       const parent = findNodeParent({ tree, key });