@dxos/plugin-navtree 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.6.14-main.2b6a0f3",
+  "version": "0.6.14-main.f49f251",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": false,
+  "sideEffects": true,
   "exports": {
     ".": {
-      "browser": "./dist/lib/browser/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs"
     },
     "./meta": {
-      "browser": "./dist/lib/browser/meta.mjs",
-      "types": "./dist/types/src/meta.d.ts"
+      "types": "./dist/types/src/meta.d.ts",
+      "browser": "./dist/lib/browser/meta.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -30,28 +30,31 @@
     "src"
   ],
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@preact/signals-core": "^1.6.0",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-framework": "0.6.14-main.2b6a0f3",
-    "@dxos/app-graph": "0.6.14-main.2b6a0f3",
-    "@dxos/async": "0.6.14-main.2b6a0f3",
-    "@dxos/debug": "0.6.14-main.2b6a0f3",
-    "@dxos/keyboard": "0.6.14-main.2b6a0f3",
-    "@dxos/echo-schema": "0.6.14-main.2b6a0f3",
-    "@dxos/local-storage": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-client": "0.6.14-main.2b6a0f3",
-    "@dxos/log": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-graph": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-observability": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-theme": "0.6.14-main.2b6a0f3",
-    "@dxos/protocols": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-deck": "0.6.14-main.2b6a0f3",
-    "@dxos/react-client": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-mosaic": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-navtree": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-list": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-searchlist": "0.6.14-main.2b6a0f3",
-    "@dxos/util": "0.6.14-main.2b6a0f3"
+    "@dxos/app-graph": "0.6.14-main.f49f251",
+    "@dxos/app-framework": "0.6.14-main.f49f251",
+    "@dxos/async": "0.6.14-main.f49f251",
+    "@dxos/invariant": "0.6.14-main.f49f251",
+    "@dxos/echo-schema": "0.6.14-main.f49f251",
+    "@dxos/keyboard": "0.6.14-main.f49f251",
+    "@dxos/local-storage": "0.6.14-main.f49f251",
+    "@dxos/log": "0.6.14-main.f49f251",
+    "@dxos/plugin-graph": "0.6.14-main.f49f251",
+    "@dxos/plugin-client": "0.6.14-main.f49f251",
+    "@dxos/plugin-observability": "0.6.14-main.f49f251",
+    "@dxos/plugin-theme": "0.6.14-main.f49f251",
+    "@dxos/protocols": "0.6.14-main.f49f251",
+    "@dxos/react-ui-deck": "0.6.14-main.f49f251",
+    "@dxos/react-client": "0.6.14-main.f49f251",
+    "@dxos/debug": "0.6.14-main.f49f251",
+    "@dxos/react-ui-list": "0.6.14-main.f49f251",
+    "@dxos/react-ui-mosaic": "0.6.14-main.f49f251",
+    "@dxos/react-ui-searchlist": "0.6.14-main.f49f251",
+    "@dxos/util": "0.6.14-main.f49f251"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -60,18 +63,18 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.6.14-main.2b6a0f3",
-    "@dxos/random": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3",
-    "@dxos/storybook-utils": "0.6.14-main.2b6a0f3"
+    "@dxos/random": "0.6.14-main.f49f251",
+    "@dxos/echo-signals": "0.6.14-main.f49f251",
+    "@dxos/react-ui": "0.6.14-main.f49f251",
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251",
+    "@dxos/storybook-utils": "0.6.14-main.f49f251"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui": "0.6.14-main.2b6a0f3"
+    "@dxos/react-ui": "0.6.14-main.f49f251",
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -19,11 +19,11 @@ import {
   parseGraphPlugin,
   NavigationAction,
 } from '@dxos/app-framework';
-import { createExtension, type Graph, isAction, isGraphNode, type Node } from '@dxos/app-graph';
+import { createExtension, type Graph, isAction, isGraphNode, type Node, type NodeFilter } from '@dxos/app-graph';
+import { invariant } from '@dxos/invariant';
 import { Keyboard } from '@dxos/keyboard';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { Path } from '@dxos/react-ui-mosaic';
-import { type OpenItemIds } from '@dxos/react-ui-navtree';
 import { getHostPlatform } from '@dxos/util';
 
 import {
@@ -37,7 +37,14 @@ import {
 import { CommandsTrigger } from './components/CommandsTrigger';
 import meta, { KEY_BINDING, NAVTREE_PLUGIN } from './meta';
 import translations from './translations';
-import { expandOpenGraphNodes, getActions, getChildren, type NavTreeItem, type NavTreeItemGraphNode } from './util';
+import { type NavTreeItem } from './types';
+import {
+  expandOpenGraphNodes,
+  getActions,
+  getChildren,
+  treeItemsFromRootNode,
+  type NavTreeItemGraphNode,
+} from './util';
 
 export type NavTreePluginProvides = SurfaceProvides &
   MetadataRecordsProvides &
@@ -45,22 +52,77 @@ export type NavTreePluginProvides = SurfaceProvides &
   TranslationsProvides &
   IntentResolverProvides;
 
-type NavTreeState = { root?: NavTreeItemGraphNode; openItemIds: OpenItemIds };
+type NavTreeState = {
+  root?: NavTreeItemGraphNode;
+  flatTree: NavTreeItem[];
+  open: string[];
+};
 
 export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
+  let graphPlugin: Plugin<GraphProvides> | undefined;
+  let graph: Graph | undefined;
+  const itemCache = new Map<string, NavTreeItem>();
+
   const state = new LocalStorageStore<NavTreeState>('dxos.org/settings/navtree', {
+    root: undefined,
+    get flatTree() {
+      if (!this.root || !graph) {
+        return [];
+      }
+
+      return treeItemsFromRootNode(graph, this.root, this.open, getItem);
+    },
     // TODO(thure): Do this dynamically.
-    openItemIds: { root: true, 'dxos.org/plugin/space-spaces': true, 'dxos.org/plugin/files': true },
+    open: ['root', 'root~dxos.org/plugin/space-spaces', 'root~dxos.org/plugin/files'],
   });
 
-  let graphPlugin: Plugin<GraphProvides> | undefined;
-  let graph: Graph | undefined;
+  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,
+      disabled: node.properties.disabled,
+      testId: node.properties.testId,
+      className: node.properties.className,
+      headingClassName: node.properties.headingClassName,
+      path,
+      parentOf,
+      node,
+      actions,
+      groupedActions,
+    } satisfies NavTreeItem;
 
-  const handleOpenItemIdsChange = (nextOpenItemIds: OpenItemIds) => {
+    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 handleOpenChange = (item: NavTreeItem, open: boolean) => {
+    const path = Path.create(...item.path);
     // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
-    state.values.openItemIds = nextOpenItemIds;
+    if (open) {
+      state.values.open.push(path);
+    } else {
+      const index = state.values.open.indexOf(path);
+      if (index > -1) {
+        state.values.open.splice(index, 1);
+      }
+    }
+
     if (graph) {
-      void expandOpenGraphNodes(graph, nextOpenItemIds);
+      void expandOpenGraphNodes(graph, state.values.open);
     }
   };
 
@@ -77,9 +139,9 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
       getChildren(graph, state.values.root);
       getActions(graph, state.values.root);
 
-      state.prop({ key: 'openItemIds', storageKey: 'openItemIds', type: LocalStorageStore.json<OpenItemIds>() });
+      state.prop({ key: 'open', type: LocalStorageStore.json<string[]>() });
 
-      void expandOpenGraphNodes(graph, state.values.openItemIds);
+      void expandOpenGraphNodes(graph, state.values.open);
 
       // TODO(wittjosiah): Factor out.
       // TODO(wittjosiah): Handle removal of actions.
@@ -147,19 +209,15 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
 
           switch (role) {
             case 'navigation':
-              if (state.values.root && state.values.openItemIds) {
-                return (
-                  <NavTreeContainer
-                    root={state.values.root}
-                    activeIds={data.activeIds as Set<string>}
-                    openItemIds={state.values.openItemIds}
-                    onOpenItemIdsChange={handleOpenItemIdsChange}
-                    attended={data.attended as string[]}
-                    popoverAnchorId={data.popoverAnchorId as string}
-                  />
-                );
-              }
-              break;
+              return (
+                <NavTreeContainer
+                  items={state.values.flatTree}
+                  current={data.activeIds as string[]}
+                  open={state.values.open}
+                  onOpenChange={handleOpenChange}
+                  popoverAnchorId={data.popoverAnchorId as string}
+                />
+              );
 
             case 'document-title': {
               return <NavTreeDocumentTitle node={isGraphNode(data.activeNode) ? data.activeNode : undefined} />;
@@ -200,17 +258,14 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
               if (graph && intent.data?.id) {
                 const path = graph.getPath({ target: intent.data.id });
                 if (Array.isArray(path)) {
-                  const additionalOpenItems = [...Array(path.length - 1)].reduce((acc: OpenItemIds, _, index) => {
-                    const itemId = Path.create(...path.slice(1, index + 1));
+                  const additionalOpenItems = [...Array(path.length)].reduce((acc: string[], _, index) => {
+                    const itemId = Path.create(...path.slice(0, index));
                     if (itemId.length > 0) {
-                      acc[itemId] = true;
+                      acc.push(itemId);
                     }
                     return acc;
-                  }, {});
-                  state.values.openItemIds = {
-                    ...additionalOpenItems,
-                    ...state.values.openItemIds,
-                  };
+                  }, []);
+                  state.values.open.push(...additionalOpenItems);
                 }
               }
               break;

package/src/components/NavTree.stories.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { type Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
+
+import { type NodeArg } from '@dxos/app-graph';
+import { create } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { isItem } from '@dxos/react-ui-list';
+import { Path } from '@dxos/react-ui-mosaic';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { NavTree, type NavTreeProps } from './NavTree';
+import { createTree, flattenTree, updateState } from '../testing';
+import { type NavTreeItem } from '../types';
+
+faker.seed(1234);
+
+type State = {
+  tree: NodeArg<any>;
+  flatTree: NavTreeItem[];
+  open: string[];
+  current: string[];
+};
+
+const state = create<State>({
+  tree: createTree(),
+  get flatTree() {
+    return flattenTree(this.tree, this.open);
+  },
+  open: [],
+  current: [],
+});
+
+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) {
+          updateState({
+            state: state.tree,
+            instruction,
+            source: source.data as NavTreeItem,
+            target: target.data as NavTreeItem,
+          });
+        }
+      },
+    });
+  }, []);
+
+  return <NavTree items={items} open={state.open} current={state.current} {...args} />;
+};
+
+const meta: Meta<typeof NavTree> = {
+  title: 'plugins/plugin-navtree/NavTree',
+  component: NavTree,
+  render: Story,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  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);
+        }
+      }
+    },
+    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);
+        }
+      }
+    },
+  },
+};
+
+export default meta;
+
+export const Default = {};

package/src/components/NavTree.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { Fragment, useCallback, useEffect, type FC } from 'react';
+
+import { isAction, type Node } from '@dxos/app-graph';
+import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { Tree, type TreeProps } from '@dxos/react-ui-list';
+import { type MaybePromise } from '@dxos/util';
+
+import { NavTreeItemAction } from './NavTreeItemAction';
+import { NAVTREE_PLUGIN } from '../meta';
+import { type NavTreeItem } from '../types';
+
+export const NAV_TREE_ITEM = 'NavTreeItem';
+
+export type NavTreeProps = Omit<TreeProps<NavTreeItem>, 'draggable' | 'gridTemplateColumns' | 'renderColumns'> &
+  Pick<NavTreeColumnsProps, 'loadDescendents' | 'renderPresence' | 'popoverAnchorId'>;
+
+export const NavTree = ({ loadDescendents, renderPresence, popoverAnchorId, ...props }: NavTreeProps) => {
+  const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItem>['renderColumns']>>(
+    ({ item, menuOpen, setMenuOpen }) => {
+      return (
+        <NavTreeColumns
+          item={item}
+          menuOpen={menuOpen}
+          setMenuOpen={setMenuOpen}
+          loadDescendents={loadDescendents}
+          renderPresence={renderPresence}
+          popoverAnchorId={popoverAnchorId}
+        />
+      );
+    },
+    [renderPresence, popoverAnchorId, loadDescendents],
+  );
+
+  return (
+    <Tree<NavTreeItem>
+      {...props}
+      draggable
+      gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+      classNames='pbs-1'
+      renderColumns={renderColumns}
+    />
+  );
+};
+
+type NavTreeColumnsProps = {
+  item: NavTreeItem;
+  menuOpen: boolean;
+  setMenuOpen: (open: boolean) => void;
+  loadDescendents?: (node: Node) => MaybePromise<void>;
+  renderPresence?: FC<{ item: NavTreeItem }>;
+  popoverAnchorId?: string;
+};
+
+const NavTreeColumns = ({
+  item,
+  menuOpen,
+  setMenuOpen,
+  loadDescendents,
+  renderPresence: Presence,
+  popoverAnchorId,
+}: NavTreeColumnsProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  const level = item.path.length - 2;
+
+  const [primaryAction, ...secondaryActions] = item.actions.toSorted((a, b) =>
+    a.properties?.disposition === 'toolbar' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : item.actions)
+    .flatMap((action) => (isAction(action) ? [action] : []))
+    .filter((action) => !action.properties?.hidden);
+
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+
+  // TODO(thure): Ideally this should not be necessary.
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      void loadDescendents?.(item.node);
+      if (primaryAction && !isAction(primaryAction)) {
+        void loadDescendents?.(primaryAction);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [primaryAction]);
+
+  return (
+    <>
+      {primaryAction?.properties?.disposition === 'toolbar' ? (
+        <NavTreeItemAction
+          testId={primaryAction.properties?.testId}
+          label={toLocalizedString(primaryAction.properties?.label, t)}
+          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+          parent={item.node}
+          monolithic={isAction(primaryAction)}
+          menuActions={isAction(primaryAction) ? [primaryAction] : item.groupedActions[primaryAction.id]}
+          menuType={primaryAction.properties?.menuType}
+          caller={NAV_TREE_ITEM}
+        />
+      ) : (
+        <Treegrid.Cell />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <NavTreeItemAction
+            testId={`navtree.treeItem.actionsLevel${level}`}
+            label={t('tree item actions label')}
+            icon='ph--dots-three-vertical--regular'
+            parent={item.node}
+            menuActions={actions}
+            menuType='dropdown'
+            caller={NAV_TREE_ITEM}
+            menuOpen={menuOpen}
+            onChangeMenuOpen={setMenuOpen}
+          />
+        ) : (
+          <Treegrid.Cell />
+        )}
+      </ActionRoot>
+      {Presence && <Presence item={item} />}
+    </>
+  );
+};