@dxos/plugin-navtree 0.7.1-staging.8709ba7 → 0.7.2-main.f1adc9f

package/src/components/NavTreeContainer.tsx

@@ -4,49 +4,82 @@
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { useCallback, useEffect } from 'react';
+import { untracked } from '@preact/signals-core';
+import React, { memo, useCallback, useEffect } from 'react';
 
-import { NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
 import { useGraph } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
 import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { isItem } from '@dxos/react-ui-list';
+import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
+import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
 import { NavTreeFooter } from './NavTreeFooter';
 import { NAVTREE_PLUGIN } from '../meta';
-import { type NavTreeItem } from '../types';
+import { type NavTreeItemGraphNode } from '../types';
 import {
   expandActions,
   expandChildren,
+  getActions as naturalGetActions,
   getChildren,
   getParent,
   resolveMigrationOperation,
-  type NavTreeItemGraphNode,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderPresence = ({ item }: { item: NavTreeItem }) => (
-  <Surface role='presence--glyph' data={{ object: item.node.data, id: item.node.id }} />
+const renderPresence = ({ node }: { node: Node }) => (
+  <Surface role='presence--glyph' data={{ object: node.data, id: node.id }} />
 );
 
 export type NavTreeContainerProps = {
-  items: NavTreeItem[];
-  current: string[];
-  open: string[];
   popoverAnchorId?: string;
-} & Pick<NavTreeProps, 'onOpenChange'>;
+} & Pick<NavTreeProps, 'isOpen' | 'isCurrent' | 'onOpenChange'>;
 
-export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }: NavTreeContainerProps) => {
+export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }: NavTreeContainerProps) => {
   const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const dispatch = useIntentDispatcher();
   const { graph } = useGraph();
 
+  const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
+  const getItems = useCallback(
+    (node?: Node) => {
+      return graph.nodes(node ?? graph.root, {
+        filter: (node): node is Node => {
+          return untracked(() => {
+            const action = isActionLike(node);
+            const disposition = node.properties.disposition;
+            return !action || (action && disposition === 'item');
+          });
+        },
+      });
+    },
+    [graph],
+  );
+  const getProps = useCallback(
+    (node: Node, path: string[]): PropsFromTreeItem => {
+      const children = getChildren(graph, node, undefined, path);
+      const parentOf =
+        children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
+      return {
+        id: node.id,
+        label: node.properties.label ?? node.id,
+        parentOf,
+        icon: node.properties.icon,
+        disabled: node.properties.disabled,
+        className: mx(node.properties.modified && 'italic', node.properties.className),
+        headingClassName: node.properties.headingClassName,
+        testId: node.properties.testId,
+      };
+    },
+    [graph],
+  );
+
   const loadDescendents = useCallback(
     (node: Node) => {
       void expandActions(graph, node);
@@ -62,41 +95,58 @@ export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...pro
     [graph],
   );
 
-  const canDrop = useCallback((source: NavTreeItem, target: NavTreeItem) => {
-    if (isSpace(target.node.data)) {
+  const canDrop = useCallback((source: TreeData, target: TreeData) => {
+    const sourceNode = source.item as Node;
+    const targetNode = target.item as Node;
+    if (isSpace(targetNode.data)) {
       // TODO(wittjosiah): Find a way to only allow space as source for rearranging.
-      return isEchoObject(source.node.data) || isSpace(source.node.data);
-    } else if (isEchoObject(target.node.data)) {
-      return isEchoObject(source.node.data);
+      return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
+    } else if (isEchoObject(targetNode.data)) {
+      return isEchoObject(sourceNode.data);
     } else {
       return false;
     }
   }, []);
 
   const handleSelect = useCallback(
-    ({ node, actions, path }: NavTreeItem) => {
+    ({ item: node, path, option }: { item: Node; path: string[]; option: boolean }) => {
       if (!node.data) {
         return;
       }
 
       if (isAction(node)) {
-        const [parentId] = path.slice(1);
-        const parent = items.find(({ id }) => id === parentId)?.node;
+        const [parent] = graph.nodes(node, { relation: 'inbound' });
         void (parent && node.data({ node: parent, caller: NAV_TREE_ITEM }));
         return;
       }
 
-      // TODO(thure): Refactor opening related planks (comments in this case) to a generalized approach.
-      void dispatch({
-        action: NavigationAction.OPEN,
-        data: {
-          activeParts: {
-            main: [node.id],
+      const current = isCurrent(path, node);
+      if (!current) {
+        void dispatch({
+          action: NavigationAction.OPEN,
+          data: {
+            activeParts: {
+              main: [node.id],
+            },
           },
-        },
-      });
+        });
+      } else if (option) {
+        void dispatch({
+          action: NavigationAction.CLOSE,
+          data: {
+            activeParts: {
+              main: [node.id],
+            },
+          },
+        });
+      } else {
+        void dispatch({
+          action: LayoutAction.SCROLL_INTO_VIEW,
+          data: { id: node.id },
+        });
+      }
 
-      const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
+      const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
       if (isAction(defaultAction)) {
         void (defaultAction.data as () => void)();
       }
@@ -105,69 +155,58 @@ export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...pro
         closeNavigationSidebar();
       }
     },
-    [items, dispatch, isLg, closeNavigationSidebar],
+    [graph, dispatch, isCurrent, isLg, closeNavigationSidebar],
   );
 
   // TODO(wittjosiah): Factor out hook.
   useEffect(() => {
     return monitorForElements({
-      canMonitor: ({ source }) => isItem(source.data),
+      canMonitor: ({ source }) => isTreeData(source.data),
       onDrop: ({ location, source }) => {
         // Didn't drop on anything.
         if (!location.current.dropTargets.length) {
           return;
         }
-
         const target = location.current.dropTargets[0];
         const instruction: Instruction | null = extractInstruction(target.data);
         if (instruction !== null && instruction.type !== 'instruction-blocked') {
-          const sourceNode = source.data.node as NavTreeItemGraphNode;
-          const targetNode = target.data.node as NavTreeItemGraphNode;
-
+          const sourceNode = source.data.item as NavTreeItemGraphNode;
+          const targetNode = target.data.item as NavTreeItemGraphNode;
           const sourcePath = source.data.path as string[];
           const targetPath = target.data.path as string[];
-
-          const nextItems = instruction.type.startsWith('reorder')
-            ? items.filter((item) => item.path.slice(0, -1).join() === targetPath.slice(0, -1).join())
-            : items.filter((item) => item.path.slice(0, -1).join() === targetPath.join());
           const operation =
             sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
               ? 'rearrange'
               : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
-
           const sourceParent = getParent(graph, sourceNode, sourcePath);
           const targetParent = getParent(graph, targetNode, targetPath);
-
-          const sourceIndex = nextItems.findIndex(({ id }) => id === sourceNode.id);
-          const targetIndex = nextItems.findIndex(({ id }) => id === targetNode.id);
+          const sourceItems = getItems(sourceParent);
+          const targetItems = getItems(targetParent);
+          const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
+          const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
           const migrationIndex =
             instruction.type === 'make-child'
-              ? nextItems.length > 0
-                ? nextItems.length - 1
-                : 0
+              ? undefined
               : instruction.type === 'reorder-below'
                 ? targetIndex + 1
                 : targetIndex;
-
           switch (operation) {
             case 'rearrange': {
+              const nextItems = sourceItems.map(({ data }) => data);
               arrayMove(nextItems, sourceIndex, targetIndex);
-              void sourceParent?.properties.onRearrangeChildren?.(nextItems.map((item) => item.node.data));
+              void sourceParent?.properties.onRearrangeChildren?.(nextItems);
               break;
             }
-
             case 'copy': {
               const target = instruction.type === 'make-child' ? targetNode : targetParent;
               void target?.properties.onCopy?.(sourceNode, migrationIndex);
               break;
             }
-
             case 'transfer': {
               const target = instruction.type === 'make-child' ? targetNode : targetParent;
               if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
                 break;
               }
-
               void target?.properties.onTransferStart(sourceNode, migrationIndex);
               void sourceParent?.properties.onTransferEnd?.(sourceNode, target);
               break;
@@ -176,7 +215,7 @@ export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...pro
         }
       },
     });
-  }, [items]);
+  }, [graph]);
 
   return (
     <ElevationProvider elevation='chrome'>
@@ -191,9 +230,11 @@ export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...pro
         {/* TODO(thure): What gives this an inline `overflow: initial`? */}
         <div role='none' className='border-be border-separator !overflow-y-auto'>
           <NavTree
-            items={items}
-            open={open}
-            current={current}
+            id={graph.root.id}
+            getActions={getActions}
+            getItems={getItems}
+            getProps={getProps}
+            isCurrent={isCurrent}
             loadDescendents={loadDescendents}
             renderPresence={renderPresence}
             popoverAnchorId={popoverAnchorId}
@@ -207,4 +248,4 @@ export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...pro
       </div>
     </ElevationProvider>
   );
-};
+});

package/src/stories/Graph.stories.tsx

@@ -10,18 +10,16 @@ import { batch } from '@preact/signals-core';
 import { type Meta } from '@storybook/react';
 import React, { useEffect } from 'react';
 
-import { Graph, ROOT_ID, type NodeFilter } from '@dxos/app-graph';
-import { create } from '@dxos/echo-schema';
+import { Graph, ROOT_ID, type Node } from '@dxos/app-graph';
+import { create, type ReactiveObject } from '@dxos/echo-schema';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
-import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { isItem } from '@dxos/react-ui-list';
+import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { NavTree, type NavTreeProps } from '../components';
-import { type NavTreeItem } from '../types';
-import { getActions, getChildren, type NavTreeItemGraphNode, treeItemsFromRootNode } from '../util';
+import { NavTree } from '../components';
+import { getActions, getChildren } from '../util';
 
 faker.seed(3);
 registerSignalsRuntime();
@@ -50,106 +48,80 @@ const createGraph = () => {
   return graph;
 };
 
-type State = {
-  flatTree: NavTreeItem[];
-  open: string[];
-  current: string[];
-};
-
 const graph = createGraph();
-const itemCache = new Map<string, NavTreeItem>();
-const state = create<State>({
-  get flatTree() {
-    return treeItemsFromRootNode(graph, graph.root, this.open, getItem);
-  },
-  open: [],
-  current: [],
-});
-
-const getItem = (node: NavTreeItemGraphNode, parent: readonly string[], filter?: NodeFilter) => {
-  invariant(graph);
-  const path = [...parent, node.id];
-  const { actions, groupedActions } = getActions(graph, node);
-  const children = getChildren(graph, node, filter, path);
-  const parentOf =
-    children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
-  const item = {
-    id: node.id,
-    label: node.properties.label ?? node.id,
-    icon: node.properties.icon,
-    path,
-    parentOf,
-    node,
-    actions,
-    groupedActions,
-  } satisfies NavTreeItem;
-
-  const cachedItem = itemCache.get(node.id);
-  // TODO(wittjosiah): This is not a good enough check.
-  //   Consider better ways to doing reactive transformations which retain referential equality.
-  if (cachedItem && JSON.stringify(item) === JSON.stringify(cachedItem)) {
-    return cachedItem;
-  } else {
-    itemCache.set(node.id, item);
-    return item;
-  }
-};
-
-const Story = (args: Partial<NavTreeProps>) => {
-  // NOTE: If passed directly to args, this won't be reactive.
-  const items = state.flatTree;
-
-  useEffect(() => {
-    return monitorForElements({
-      canMonitor: ({ source }) => isItem(source.data),
-      onDrop: ({ location, source }) => {
-        // Didn't drop on anything.
-        if (!location.current.dropTargets.length) {
-          return;
-        }
-
-        const target = location.current.dropTargets[0];
-
-        const instruction: Instruction | null = extractInstruction(target.data);
-        if (instruction !== null) {
-          // TODO(wittjosiah): Implement drop logic.
-          console.log('update', instruction);
-        }
-      },
-    });
-  }, []);
-
-  return <NavTree items={items} open={state.open} current={state.current} {...args} />;
-};
+const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
 
 export const Default = {};
 
-const meta: Meta = {
+const meta: Meta<typeof NavTree> = {
   title: 'plugins/plugin-navtree/Graph',
   component: NavTree,
-  render: Story,
   decorators: [withTheme, withLayout({ tooltips: true })],
+  render: (args) => {
+    useEffect(() => {
+      return monitorForElements({
+        canMonitor: ({ source }) => isTreeData(source.data),
+        onDrop: ({ location, source }) => {
+          // Didn't drop on anything.
+          if (!location.current.dropTargets.length) {
+            return;
+          }
+
+          const target = location.current.dropTargets[0];
+
+          const instruction: Instruction | null = extractInstruction(target.data);
+          if (instruction !== null) {
+            // TODO(wittjosiah): Implement drop logic.
+            console.log('update', instruction);
+          }
+        },
+      });
+    }, []);
+
+    return <NavTree {...args} />;
+  },
   args: {
-    onOpenChange: (item: NavTreeItem, open: boolean) => {
-      const path = Path.create(...item.path);
-      if (open) {
-        state.open.push(path);
-      } else {
-        const index = state.open.indexOf(path);
-        if (index > -1) {
-          state.open.splice(index, 1);
-        }
+    id: graph.root.id,
+    getActions: (node: Node) => getActions(graph, node),
+    getItems: (node?: Node) => graph.nodes(node ?? graph.root),
+    getProps: (node: Node, path: string[]) => {
+      const children = getChildren(graph, node, undefined, path);
+      const parentOf =
+        children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
+      return {
+        id: node.id,
+        label: node.properties.label ?? node.id,
+        icon: node.properties.icon,
+        parentOf,
+      } satisfies PropsFromTreeItem;
+    },
+    isOpen: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const value = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, value);
       }
+
+      return value.open;
     },
-    onSelect: (item: NavTreeItem, current: boolean) => {
-      if (current) {
-        state.current.push(item.id);
-      } else {
-        const index = state.current.indexOf(item.id);
-        if (index > -1) {
-          state.current.splice(index, 1);
-        }
+    isCurrent: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const value = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, value);
       }
+
+      return value.current;
+    },
+    onOpenChange: ({ path: _path, open }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.open = open;
+    },
+    onSelect: ({ path: _path, current }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.current = current;
     },
   },
 };

package/src/testing/generator.ts

@@ -5,16 +5,11 @@
 import { type NodeArg } from '@dxos/app-graph';
 import { create, S, type ReactiveObject, TypedObject } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
+import { range } from '@dxos/util';
 
 // TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.
 // TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).
 
-// TODO(burdon): Util.
-export const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>
-  Array.from({ length })
-    .map((_, i) => fn(i))
-    .filter(Boolean) as T[];
-
 // TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
@@ -101,7 +96,7 @@ export class TestObjectGenerator {
   }
 
   createObjects({ types, length }: { types?: string[]; length: number }) {
-    return range(() => this.createObject({ types }), length);
+    return range(length, () => this.createObject({ types }));
   }
 }
 

package/src/testing/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './generator';
-export * from './visitor';
+export * from './update-state';

package/src/testing/update-state.ts

@@ -0,0 +1,70 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+
+import { type NodeArg } from '@dxos/app-graph';
+import { log } from '@dxos/log';
+import { type TreeData } from '@dxos/react-ui-list';
+
+const removeItem = (tree: NodeArg<any>, source: TreeData) => {
+  const parent = getNode(tree, source.path.slice(1, -1));
+  const index = parent.nodes!.findIndex(({ id }) => id === source.id);
+  const item = parent.nodes![index];
+  parent.nodes!.splice(index, 1);
+  return item;
+};
+
+const getNode = (tree: NodeArg<any>, path: string[]) => {
+  let node = tree;
+  for (const part of path) {
+    node = node.nodes!.find(({ id }) => id === part)!;
+  }
+  return node;
+};
+
+// TODO(wittjosiah): Reconcile with react-ui-list/Tree/testing.
+export const updateState = ({
+  state,
+  instruction,
+  source,
+  target,
+}: {
+  state: NodeArg<any>;
+  instruction: Instruction;
+  source: TreeData;
+  target: TreeData;
+}) => {
+  switch (instruction.type) {
+    case 'reorder-above': {
+      const item = removeItem(state, source);
+      const parent = getNode(state, target.path.slice(1, -1));
+      const index = parent.nodes!.findIndex(({ id }) => id === target.id);
+      parent.nodes!.splice(index, 0, item);
+      break;
+    }
+
+    case 'reorder-below': {
+      const item = removeItem(state, source);
+      const parent = getNode(state, target.path.slice(1, -1));
+      const index = parent.nodes!.findIndex(({ id }) => id === target.id);
+      parent.nodes!.splice(index + 1, 0, item);
+      break;
+    }
+
+    case 'make-child': {
+      const item = removeItem(state, source);
+      const parent = getNode(state, target.path.slice(1));
+      parent.nodes!.push(item);
+      break;
+    }
+
+    case 'instruction-blocked':
+      break;
+
+    default:
+      log.warn('Unsupported instruction', instruction);
+      break;
+  }
+};

package/src/types.ts

@@ -4,10 +4,25 @@
 
 import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
 import { type Label } from '@dxos/react-ui';
-import { type ItemType } from '@dxos/react-ui-list';
+import { type MaybePromise } from '@dxos/util';
 
-export type NavTreeItem = ItemType & {
-  node: Node;
+export type NavTreeItemGraphNode = Node<
+  any,
+  Partial<
+    NodeProperties & {
+      persistenceClass: string;
+      persistenceKey: string;
+      acceptPersistenceClass: Set<string>;
+      acceptPersistenceKey: Set<string>;
+      onRearrangeChildren: (nextOrder: NavTreeItemGraphNode[]) => MaybePromise<void>;
+      onCopy: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
+      onTransferStart: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
+      onTransferEnd: (activeNode: NavTreeItemGraphNode, destinationParent: NavTreeItemGraphNode) => MaybePromise<void>;
+    }
+  >
+>;
+
+export type FlattenedActions = {
   actions: ActionLike[];
   groupedActions: Record<string, Action[]>;
 };