@dxos/plugin-navtree 0.7.1-staging.8709ba7 → 0.7.2-staging.6d26b2a

package/src/NavTreePlugin.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { effect } from '@preact/signals-core';
 import React from 'react';
 
 import {
@@ -19,13 +20,14 @@ import {
   parseGraphPlugin,
   NavigationAction,
   parseNavigationPlugin,
+  parseLayoutPlugin,
 } from '@dxos/app-framework';
-import { createExtension, type Graph, isAction, isGraphNode, type Node, type NodeFilter } from '@dxos/app-graph';
-import { invariant } from '@dxos/invariant';
+import { createExtension, type Graph, isAction, isGraphNode, type Node } from '@dxos/app-graph';
+import { type UnsubscribeCallback } from '@dxos/async';
+import { create, type ReactiveObject } from '@dxos/echo-schema';
 import { Keyboard } from '@dxos/keyboard';
-import { LocalStorageStore } from '@dxos/local-storage';
+import { type TreeData } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-mosaic';
-import { mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
 import {
@@ -39,14 +41,8 @@ import {
 import { CommandsTrigger } from './components/CommandsTrigger';
 import meta, { KEY_BINDING, NAVTREE_PLUGIN } from './meta';
 import translations from './translations';
-import { type NavTreeItem } from './types';
-import {
-  expandOpenGraphNodes,
-  getActions,
-  getChildren,
-  treeItemsFromRootNode,
-  type NavTreeItemGraphNode,
-} from './util';
+import { type NavTreeItemGraphNode } from './types';
+import { expandChildrenAndActions } from './util';
 
 export type NavTreePluginProvides = SurfaceProvides &
   MetadataRecordsProvides &
@@ -54,99 +50,117 @@ export type NavTreePluginProvides = SurfaceProvides &
   TranslationsProvides &
   IntentResolverProvides;
 
-type NavTreeState = {
-  root?: NavTreeItemGraphNode;
-  flatTree: NavTreeItem[];
-  open: string[];
+const KEY = `${NAVTREE_PLUGIN}/state`;
+const getInitialState = () => {
+  const stringified = localStorage.getItem(KEY);
+  if (!stringified) {
+    return;
+  }
+
+  try {
+    const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
+    return cached.map(
+      ([key, value]): [
+        string,
+        ReactiveObject<{
+          open: boolean;
+          current: boolean;
+        }>,
+      ] => [key, create(value)],
+    );
+  } catch {}
 };
 
 export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
   let graphPlugin: Plugin<GraphProvides> | undefined;
   let graph: Graph | undefined;
-  const itemCache = new Map<string, NavTreeItem>();
+  let unsubscribe: UnsubscribeCallback | undefined;
 
-  const state = new LocalStorageStore<NavTreeState>('dxos.org/settings/navtree', {
-    root: undefined,
-    get flatTree() {
-      if (!this.root || !graph) {
-        return [];
-      }
+  // TODO(wittjosiah): This currently needs to be not a ReactiveObject at the root.
+  //   If it is a ReactiveObject then React errors when initializing new paths because of state change during render.
+  //   Ideally this could be a ReactiveObject but be able to access and update the root level without breaking render.
+  //   Wrapping accesses and updates in `untracked` didn't seem to work in all cases.
+  const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>(
+    getInitialState() ?? [
+      // TODO(thure): Initialize these dynamically.
+      ['root', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/space-spaces', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/files', create({ open: true, current: false })],
+    ],
+  );
 
-      return treeItemsFromRootNode(graph, this.root, this.open, getItem);
-    },
-    // TODO(thure): Do this dynamically.
-    open: ['root', 'root~dxos.org/plugin/space-spaces', 'root~dxos.org/plugin/files'],
-  });
+  const getItem = (_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);
+    }
 
-  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: mx(node.properties.modified && 'italic', node.properties.className),
-      headingClassName: node.properties.headingClassName,
-      path,
-      parentOf,
-      node,
-      actions,
-      groupedActions,
-    } satisfies NavTreeItem;
+    return value;
+  };
 
-    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 setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
+    const value = getItem(path);
+    value[key] = next;
+
+    localStorage.setItem(KEY, JSON.stringify(Array.from(state.entries())));
   };
 
-  const handleOpenChange = (item: NavTreeItem, open: boolean) => {
-    const path = Path.create(...item.path);
+  const isOpen = (path: string[]) => getItem(path).open;
+  const isCurrent = (path: string[]) => getItem(path).current;
+
+  const handleOpenChange = ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
     // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
-    if (open) {
-      state.values.open.push(path);
-    } else {
-      const index = state.values.open.indexOf(path);
-      if (index > -1) {
-        state.values.open.splice(index, 1);
-      }
-    }
+    setItem(path, 'open', open);
 
     if (graph) {
-      void expandOpenGraphNodes(graph, state.values.open);
+      const node = graph.findNode(id);
+      return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
     }
   };
 
   return {
     meta,
     ready: async (plugins) => {
-      state.prop({ key: 'open', type: LocalStorageStore.json<string[]>() });
-
+      const layout = resolvePlugin(plugins, parseLayoutPlugin)?.provides.layout;
+      const location = resolvePlugin(plugins, parseNavigationPlugin)?.provides.location;
       graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
       graph = graphPlugin?.provides.graph;
-      if (!graph) {
+      if (!graph || !location || !layout) {
         return;
       }
 
+      const soloPart = location?.active.solo?.[0];
       const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-      const soloPart = resolvePlugin(plugins, parseNavigationPlugin)?.provides.location.active.solo?.[0];
       if (dispatch && soloPart) {
         void dispatch({ plugin: NAVTREE_PLUGIN, action: NavigationAction.EXPOSE, data: { id: soloPart.id } });
       }
 
-      state.values.root = graph.root as NavTreeItemGraphNode;
-      void expandOpenGraphNodes(graph, state.values.open);
+      let previous: string[] = [];
+      unsubscribe = effect(() => {
+        const part = layout.layoutMode === 'solo' ? 'solo' : 'main';
+        const current = location.active[part]?.map(({ id }) => id) ?? [];
+        const removed = previous.filter((id) => !current.includes(id));
+        previous = current;
+
+        // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
+        //   This could be avoided if the location was a path as well and not just an id.
+        setTimeout(() => {
+          removed.forEach((id) => {
+            const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
+            keys.forEach((key) => {
+              setItem(Path.parts(key), 'current', false);
+            });
+          });
+
+          current.forEach((id) => {
+            const keys = Array.from(new Set([...state.keys(), id])).filter((key) => Path.last(key) === id);
+            keys.forEach((key) => {
+              setItem(Path.parts(key), 'current', true);
+            });
+          });
+        });
+      });
 
       // TODO(wittjosiah): Factor out.
       // TODO(wittjosiah): Handle removal of actions.
@@ -184,20 +198,21 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
       Keyboard.singleton.setCurrentContext(graphPlugin?.provides.graph.root.id);
     },
     unload: async () => {
+      unsubscribe?.();
       Keyboard.singleton.destroy();
     },
     provides: {
       metadata: {
         records: {
           [NODE_TYPE]: {
-            parse: (item: NavTreeItem, type: string) => {
+            parse: ({ item }: TreeData, type: string) => {
               switch (type) {
                 case 'node':
-                  return item.node;
+                  return item;
                 case 'object':
-                  return item.node.data;
+                  return item.data;
                 case 'view-object':
-                  return { id: `${item.id}-view`, object: item.node.data };
+                  return { id: `${item.id}-view`, object: item.data };
               }
             },
           },
@@ -216,9 +231,8 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
             case 'navigation':
               return (
                 <NavTreeContainer
-                  items={state.values.flatTree}
-                  current={data.activeIds as string[]}
-                  open={state.values.open}
+                  isOpen={isOpen}
+                  isCurrent={isCurrent}
                   onOpenChange={handleOpenChange}
                   popoverAnchorId={data.popoverAnchorId as string}
                 />
@@ -229,7 +243,7 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
             }
 
             case 'navbar-start': {
-              if (state.values.root && data.activeNode) {
+              if (data.activeNode) {
                 return {
                   node: (
                     <NavBarStart
@@ -262,14 +276,13 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
             case NavigationAction.EXPOSE: {
               if (graph && intent.data?.id) {
                 const path = await graph.waitForPath({ target: intent.data.id });
-                const additionalOpenItems = [...Array(path.length)].reduce((acc: string[], _, index) => {
-                  const itemId = Path.create(...path.slice(0, index));
-                  if (itemId.length > 0 && !state.values.open.includes(itemId)) {
-                    acc.push(itemId);
+                [...Array(path.length)].forEach((_, index) => {
+                  const subpath = path.slice(0, index);
+                  const value = getItem(subpath);
+                  if (!value.open) {
+                    setItem(subpath, 'open', true);
                   }
-                  return acc;
-                }, []);
-                state.values.open.push(...additionalOpenItems);
+                });
               }
               break;
             }

package/src/components/NavTree.stories.tsx

@@ -9,91 +9,95 @@ import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-a
 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 { isActionLike, type NodeArg } from '@dxos/app-graph';
+import { create, type ReactiveObject } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { isItem } from '@dxos/react-ui-list';
+import { isTreeData, type TreeData } 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';
+import { NavTree } from './NavTree';
+import { createTree, updateState } from '../testing';
 
 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 tree = create<NodeArg<any>>(createTree());
+const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
 
 const meta: Meta<typeof NavTree> = {
   title: 'plugins/plugin-navtree/NavTree',
   component: NavTree,
-  render: Story,
   decorators: [withTheme, withLayout({ tooltips: true })],
+  render: (args) => {
+    useEffect(() => {
+      return monitorForElements({
+        canMonitor: ({ source }) => isTreeData(source),
+        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: tree,
+              instruction,
+              source: source.data as TreeData,
+              target: target.data as TreeData,
+            });
+          }
+        },
+      });
+    }, []);
+
+    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: tree.id,
+    getActions: (arg: NodeArg<any>) => ({
+      actions: arg.nodes?.filter((node) => isActionLike(node)) ?? [],
+      groupedActions: {},
+    }),
+    getItems: (testItem?: NodeArg<any>) => {
+      return testItem?.nodes ?? tree.nodes ?? [];
+    },
+    getProps: (testItem: NodeArg<any>) => ({
+      id: testItem.id,
+      label: testItem.properties?.label ?? testItem.id,
+      icon: testItem.properties?.icon,
+      ...((testItem.nodes?.length ?? 0) > 0 && {
+        parentOf: testItem.nodes!.map(({ id }) => id),
+      }),
+    }),
+    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/components/NavTree.tsx

@@ -11,19 +11,24 @@ import { type MaybePromise } from '@dxos/util';
 
 import { NavTreeItemAction } from './NavTreeItemAction';
 import { NAVTREE_PLUGIN } from '../meta';
-import { type NavTreeItem } from '../types';
+import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Omit<TreeProps<NavTreeItem>, 'draggable' | 'gridTemplateColumns' | 'renderColumns'> &
-  Pick<NavTreeColumnsProps, 'loadDescendents' | 'renderPresence' | 'popoverAnchorId'>;
+export type NavTreeProps = Omit<
+  TreeProps<NavTreeItemGraphNode>,
+  'draggable' | 'gridTemplateColumns' | 'renderColumns'
+> &
+  Pick<NavTreeColumnsProps, 'getActions' | 'loadDescendents' | 'renderPresence' | 'popoverAnchorId'>;
 
-export const NavTree = ({ loadDescendents, renderPresence, popoverAnchorId, ...props }: NavTreeProps) => {
-  const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItem>['renderColumns']>>(
-    ({ item, menuOpen, setMenuOpen }) => {
+export const NavTree = ({ getActions, loadDescendents, renderPresence, popoverAnchorId, ...props }: NavTreeProps) => {
+  const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItemGraphNode>['renderColumns']>>(
+    ({ item, path, menuOpen, setMenuOpen }) => {
       return (
         <NavTreeColumns
-          item={item}
+          path={path}
+          node={item}
+          getActions={getActions}
           menuOpen={menuOpen}
           setMenuOpen={setMenuOpen}
           loadDescendents={loadDescendents}
@@ -36,7 +41,7 @@ export const NavTree = ({ loadDescendents, renderPresence, popoverAnchorId, ...p
   );
 
   return (
-    <Tree<NavTreeItem>
+    <Tree
       {...props}
       draggable
       gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
@@ -46,16 +51,20 @@ export const NavTree = ({ loadDescendents, renderPresence, popoverAnchorId, ...p
 };
 
 type NavTreeColumnsProps = {
-  item: NavTreeItem;
+  path: string[];
+  node: Node;
+  getActions: (node: Node) => FlattenedActions;
   menuOpen: boolean;
   setMenuOpen: (open: boolean) => void;
   loadDescendents?: (node: Node) => MaybePromise<void>;
-  renderPresence?: FC<{ item: NavTreeItem }>;
+  renderPresence?: FC<{ node: Node }>;
   popoverAnchorId?: string;
 };
 
 const NavTreeColumns = ({
-  item,
+  path,
+  node,
+  getActions,
   menuOpen,
   setMenuOpen,
   loadDescendents,
@@ -64,22 +73,23 @@ const NavTreeColumns = ({
 }: NavTreeColumnsProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
 
-  const level = item.path.length - 2;
+  const level = path.length - 2;
 
-  const [primaryAction, ...secondaryActions] = item.actions.toSorted((a, b) =>
+  const { actions: _actions, groupedActions } = getActions(node);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
     a.properties?.disposition === 'toolbar' ? -1 : 1,
   );
 
-  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : item.actions)
+  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _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;
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${node.id}` ? Popover.Anchor : Fragment;
 
   // TODO(thure): Ideally this should not be necessary.
   useEffect(() => {
     const frame = requestAnimationFrame(() => {
-      void loadDescendents?.(item.node);
+      void loadDescendents?.(node);
       if (primaryAction && !isAction(primaryAction)) {
         void loadDescendents?.(primaryAction);
       }
@@ -94,9 +104,9 @@ const NavTreeColumns = ({
           testId={primaryAction.properties?.testId}
           label={toLocalizedString(primaryAction.properties?.label, t)}
           icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
-          parent={item.node}
+          parent={node}
           monolithic={isAction(primaryAction)}
-          menuActions={isAction(primaryAction) ? [primaryAction] : item.groupedActions[primaryAction.id]}
+          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
           menuType={primaryAction.properties?.menuType}
           caller={NAV_TREE_ITEM}
         />
@@ -109,7 +119,7 @@ const NavTreeColumns = ({
             testId={`navtree.treeItem.actionsLevel${level}`}
             label={t('tree item actions label')}
             icon='ph--dots-three-vertical--regular'
-            parent={item.node}
+            parent={node}
             menuActions={actions}
             menuType='dropdown'
             caller={NAV_TREE_ITEM}
@@ -120,7 +130,7 @@ const NavTreeColumns = ({
           <Treegrid.Cell />
         )}
       </ActionRoot>
-      {Presence && <Presence item={item} />}
+      {Presence && <Presence node={node} />}
     </>
   );
 };