@dxos/app-graph 0.8.3 → 0.8.4-main.3f58842

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-graph",
-  "version": "0.8.3",
+  "version": "0.8.4-main.3f58842",
   "description": "Constructs knowledge graphs for the purpose of building applications on top of",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -26,44 +26,42 @@
   "dependencies": {
     "@preact/signals-core": "^1.9.0",
     "main-thread-scheduling": "^14.1.1",
-    "@dxos/async": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/log": "0.8.3"
+    "@dxos/async": "0.8.4-main.3f58842",
+    "@dxos/debug": "0.8.4-main.3f58842",
+    "@dxos/echo": "0.8.4-main.3f58842",
+    "@dxos/echo-schema": "0.8.4-main.3f58842",
+    "@dxos/echo-signals": "0.8.4-main.3f58842",
+    "@dxos/invariant": "0.8.4-main.3f58842",
+    "@dxos/live-object": "0.8.4-main.3f58842",
+    "@dxos/log": "0.8.4-main.3f58842",
+    "@dxos/util": "0.8.4-main.3f58842"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.89.0",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-list": "0.8.3",
-    "@dxos/echo-db": "0.8.3",
-    "@dxos/react-ui-tabs": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/echo-db": "0.8.4-main.3f58842",
+    "@dxos/random": "0.8.4-main.3f58842",
+    "@dxos/react-client": "0.8.4-main.3f58842",
+    "@dxos/react-ui": "0.8.4-main.3f58842",
+    "@dxos/react-ui-list": "0.8.4-main.3f58842",
+    "@dxos/react-ui-tabs": "0.8.4-main.3f58842",
+    "@dxos/react-ui-theme": "0.8.4-main.3f58842",
+    "@dxos/storybook-utils": "0.8.4-main.3f58842"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.3f58842",
+    "@dxos/react-ui-theme": "0.8.4-main.3f58842"
   },
   "publishConfig": {
     "access": "public"

package/src/node.ts

@@ -4,6 +4,8 @@
 
 import { type MaybePromise, type MakeOptional } from '@dxos/util';
 
+import { ACTION_GROUP_TYPE, ACTION_TYPE } from './graph';
+
 /**
  * Represents a node in the graph.
  */
@@ -84,7 +86,7 @@ export type Action<TProperties extends Record<string, any> = Record<string, any>
 >;
 
 export const isAction = (data: unknown): data is Action =>
-  isGraphNode(data) ? typeof data.data === 'function' : false;
+  isGraphNode(data) ? typeof data.data === 'function' && data.type === ACTION_TYPE : false;
 
 export const actionGroupSymbol = Symbol('ActionGroup');
 
@@ -95,7 +97,7 @@ export type ActionGroup<TProperties extends Record<string, any> = Record<string,
 >;
 
 export const isActionGroup = (data: unknown): data is ActionGroup =>
-  isGraphNode(data) ? data.data === actionGroupSymbol : false;
+  isGraphNode(data) ? data.data === actionGroupSymbol && data.type === ACTION_GROUP_TYPE : false;
 
 export type ActionLike = Action | ActionGroup;
 

package/src/stories/EchoGraph.stories.tsx

@@ -5,7 +5,7 @@
 import '@dxos-theme';
 
 import { type Registry, RegistryContext, Rx, useRxValue } from '@effect-rx/rx-react';
-import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
+import { type Meta } from '@storybook/react-vite';
 import { Option, pipe } from 'effect';
 import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
@@ -24,9 +24,8 @@ import { Obj, Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { type Client, useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Button, Input, Select } from '@dxos/react-ui';
+import { Input, Select, Icon, IconButton } from '@dxos/react-ui';
 import { Path, Tree } from '@dxos/react-ui-list';
-import { Tabs } from '@dxos/react-ui-tabs';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 import { byPosition, isNonNullable, safeParseInt } from '@dxos/util';
@@ -205,7 +204,11 @@ const Controls = ({ children }: PropsWithChildren) => {
   return (
     <>
       <div className='flex shrink-0 p-2 space-x-2'>
-        <Button onClick={() => setGenerating((generating) => !generating)}>{generating ? <Pause /> : <Play />}</Button>
+        <IconButton
+          icon={generating ? 'ph--pause--regular' : 'ph--play--regular'}
+          label={generating ? 'Pause' : 'Play'}
+          onClick={() => setGenerating((generating) => !generating)}
+        />
         <div className='relative' title='mutation period'>
           <Input.Root>
             <Input.TextInput
@@ -217,11 +220,9 @@ const Controls = ({ children }: PropsWithChildren) => {
               onChange={({ target: { value } }) => setActionInterval(value)}
             />
           </Input.Root>
-          <Timer className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
+          <Icon icon='ph--timer--regular' classNames={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
         </div>
-        <Button onClick={() => action && runAction(client, action)}>
-          <Plus />
-        </Button>
+        <IconButton icon='ph--plus--regular' label='Add' onClick={() => action && runAction(client, action)} />
         <Select.Root value={action?.toString()} onValueChange={(action) => setAction(action as unknown as Action)}>
           <Select.TriggerButton placeholder='Select value' />
           <Select.Portal>
@@ -245,10 +246,9 @@ const Controls = ({ children }: PropsWithChildren) => {
   );
 };
 
-export default {
+const meta: Meta = {
   title: 'sdk/app-graph/EchoGraph',
   decorators: [
-    withTheme,
     withClientProvider({
       createIdentity: true,
       onIdentityCreated: async ({ client }) => {
@@ -256,9 +256,12 @@ export default {
         await client.spaces.create();
       },
     }),
+    withTheme,
   ],
 };
 
+export default meta;
+
 export const JsonView = {
   render: () => {
     const client = useClient();
@@ -372,122 +375,3 @@ export const TreeView = {
     );
   },
 };
-
-// TODO(wittjosiah): Remove.
-export const TabTreeView = {
-  render: () => {
-    const client = useClient();
-    const registry = useContext(RegistryContext);
-    const graph = useMemo(() => createGraph(client, registry), [client, registry]);
-    const state = useMemo(() => new Map<string, Live<{ open: boolean; current: boolean }>>(), []);
-
-    const useItems = useCallback(
-      (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
-        const connections = useRxValue(graph.connections(node?.id ?? ROOT_ID));
-        return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
-      },
-      [graph],
-    );
-
-    const getProps = useCallback(
-      (node: Node, path: string[]) => {
-        const children = graph
-          .getConnections(node.id, 'outbound')
-          .map((n) => {
-            // Break cycles.
-            const nextPath = [...path, node.id];
-            return nextPath.includes(n.id) ? undefined : (n as Node);
-          })
-          .filter(isNonNullable) as Node[];
-        const parentOf =
-          children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
-        return {
-          id: node.id,
-          label: node.id,
-          icon: node.type === 'dxos.org/type/Space' ? 'ph--planet--regular' : 'ph--placeholder--regular',
-          parentOf,
-        };
-      },
-      [graph],
-    );
-
-    const isOpen = useCallback(
-      (_path: string[]) => {
-        const path = Path.create(..._path);
-        const object = state.get(path) ?? live({ open: true, current: false });
-        if (!state.has(path)) {
-          state.set(path, object);
-        }
-
-        return object.open;
-      },
-      [state],
-    );
-
-    const isCurrent = useCallback(
-      (_path: string[]) => {
-        const path = Path.create(..._path);
-        const object = state.get(path) ?? live({ open: false, current: false });
-        if (!state.has(path)) {
-          state.set(path, object);
-        }
-
-        return object.current;
-      },
-      [state],
-    );
-
-    const onOpenChange = useCallback(
-      ({ path: _path, open }: { path: string[]; open: boolean }) => {
-        const path = Path.create(..._path);
-        const object = state.get(path);
-        object!.open = open;
-      },
-      [state],
-    );
-
-    const onSelect = useCallback(
-      ({ path: _path, current }: { path: string[]; current: boolean }) => {
-        const path = Path.create(..._path);
-        const object = state.get(path);
-        object!.current = current;
-      },
-      [state],
-    );
-
-    const spaces = useItems(graph.root);
-
-    return (
-      <>
-        <Controls />
-        <Tabs.Root defaultValue={spaces[0].id}>
-          <Tabs.Tablist>
-            {spaces.map((space) => {
-              return (
-                <Tabs.Tab key={space.id} value={space.id}>
-                  {space.id}
-                </Tabs.Tab>
-              );
-            })}
-          </Tabs.Tablist>
-          {spaces.map((space) => {
-            return (
-              <Tabs.Tabpanel key={space.id} value={space.id}>
-                <Tree
-                  id={space.id}
-                  root={space}
-                  useItems={useItems}
-                  getProps={getProps}
-                  isOpen={isOpen}
-                  isCurrent={isCurrent}
-                  onOpenChange={onOpenChange}
-                  onSelect={onSelect}
-                />
-              </Tabs.Tabpanel>
-            );
-          })}
-        </Tabs.Root>
-      </>
-    );
-  },
-};