@dxos/app-graph 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/src/stories/EchoGraph.stories.tsx

@@ -2,38 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Registry, RegistryContext, Rx, useRxValue } from '@effect-rx/rx-react';
+import { Atom, type Registry, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import type * as Schema from 'effect/Schema';
 import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
-import {
-  Expando,
-  Filter,
-  type Live,
-  Query,
-  type QueryResult,
-  type Space,
-  SpaceState,
-  isSpace,
-  live,
-} from '@dxos/client/echo';
-import { Obj, Type } from '@dxos/echo';
+import { Filter, type Live, Query, type Space, SpaceState, isSpace, live } from '@dxos/client/echo';
+import { type Database, 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 { Icon, IconButton, Input, Select } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { Path, Tree } from '@dxos/react-ui-list';
 import { getSize, mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
 import { byPosition, isNonNullable, safeParseInt } from '@dxos/util';
 
 import { type ExpandableGraph, ROOT_ID } from '../graph';
-import { GraphBuilder, createExtension, rxFromObservable, rxFromSignal } from '../graph-builder';
+import { GraphBuilder, atomFromObservable, atomFromSignal, createExtension } from '../graph-builder';
 import { type Node } from '../node';
-import { rxFromQuery } from '../testing';
+import { atomFromQuery } from '../testing';
 
 import { JsonTree } from './Tree';
 
@@ -61,18 +51,20 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
   const spaceBuilderExtension = createExtension({
     id: 'space',
     connector: (node) =>
-      Rx.make((get) =>
-        pipe(
+      Atom.make((get) =>
+        Function.pipe(
           get(node),
           Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
           Option.map(() => {
-            const spaces = get(rxFromObservable(client.spaces)) ?? [];
+            const spaces = get(atomFromObservable(client.spaces)) ?? [];
             return spaces
-              .filter((space) => get(rxFromObservable(space.state)) === SpaceState.SPACE_READY)
+              .filter((space) => get(atomFromObservable(space.state)) === SpaceState.SPACE_READY)
               .map((space) => ({
                 id: space.id,
                 type: 'dxos.org/type/Space',
-                properties: { label: get(rxFromSignal(() => space.properties.name)) },
+                properties: {
+                  label: get(atomFromSignal(() => space.properties.name)),
+                },
                 data: space,
               }));
           }),
@@ -84,16 +76,18 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
   const objectBuilderExtension = createExtension({
     id: 'object',
     connector: (node) => {
-      let query: QueryResult<Live<Expando>> | undefined;
-      return Rx.make((get) =>
-        pipe(
+      // TODO(wittjosiah): Find a simpler way to define this type.
+      let result: Database.QueryResult<Schema.Schema.Type<typeof Type.Expando>> | undefined;
+      return Atom.make((get) =>
+        Function.pipe(
           get(node),
           Option.flatMap((node) => (isSpace(node.data) ? Option.some(node.data) : Option.none())),
           Option.map((space) => {
-            if (!query) {
-              query = space.db.query(Query.type(Expando, { type: 'test' }));
+            if (!result) {
+              result = space.db.query(Query.type(Type.Expando, { type: 'test' }));
             }
-            const objects = get(rxFromQuery(query));
+
+            const objects = get(atomFromQuery(result));
             return objects.map((object) => ({
               id: object.id,
               type: 'dxos.org/type/test',
@@ -115,7 +109,6 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
   });
   graph.expand(ROOT_ID);
   (window as any).graph = graph;
-
   return graph;
 };
 
@@ -135,7 +128,7 @@ const getRandomSpace = (client: Client): Space | undefined => {
 const getSpaceWithObjects = async (client: Client): Promise<Space | undefined> => {
   const readySpaces = client.spaces.get().filter((space) => space.state.get() === SpaceState.SPACE_READY);
   const spaceQueries = await Promise.all(
-    readySpaces.map((space) => space.db.query(Filter.type(Expando, { type: 'test' })).run()),
+    readySpaces.map((space) => space.db.query(Filter.type(Type.Expando, { type: 'test' })).run()),
   );
   const spaces = readySpaces.filter((space, index) => spaceQueries[index].objects.length > 0);
   return spaces[Math.floor(Math.random() * spaces.length)];
@@ -160,13 +153,18 @@ const runAction = async (client: Client, action: Action) => {
     }
 
     case Action.ADD_OBJECT:
-      getRandomSpace(client)?.db.add(Obj.make(Type.Expando, { type: 'test', name: faker.commerce.productName() }));
+      getRandomSpace(client)?.db.add(
+        Obj.make(Type.Expando, {
+          type: 'test',
+          name: faker.commerce.productName(),
+        }),
+      );
       break;
 
     case Action.REMOVE_OBJECT: {
       const space = await getSpaceWithObjects(client);
       if (space) {
-        const { objects } = await space.db.query(Filter.type(Expando, { type: 'test' })).run();
+        const { objects } = await space.db.query(Filter.type(Type.Expando, { type: 'test' })).run();
         space.db.remove(objects[Math.floor(Math.random() * objects.length)]);
       }
       break;
@@ -175,7 +173,7 @@ const runAction = async (client: Client, action: Action) => {
     case Action.RENAME_OBJECT: {
       const space = await getSpaceWithObjects(client);
       if (space) {
-        const { objects } = await space.db.query(Filter.type(Expando, { type: 'test' })).run();
+        const { objects } = await space.db.query(Filter.type(Type.Expando, { type: 'test' })).run();
         objects[Math.floor(Math.random() * objects.length)].name = faker.commerce.productName();
       }
       break;
@@ -215,7 +213,7 @@ const Controls = ({ children }: PropsWithChildren) => {
             <Input.TextInput
               autoComplete='off'
               size={5}
-              classNames='w-[100px] text-right pie-[22px]'
+              classNames='is-[100px] text-right pie-[22px]'
               placeholder='Interval'
               value={actionInterval}
               onChange={({ target: { value } }) => setActionInterval(value)}
@@ -250,16 +248,16 @@ const Controls = ({ children }: PropsWithChildren) => {
 const meta = {
   title: 'sdk/app-graph/EchoGraph',
   decorators: [
+    withTheme,
     withClientProvider({
       createIdentity: true,
-      onIdentityCreated: async ({ client }) => {
+      onCreateIdentity: async ({ client }) => {
         await client.spaces.create();
         await client.spaces.create();
       },
     }),
-    withTheme,
   ],
-} satisfies Meta<typeof Registry>;
+} satisfies Meta;
 
 export default meta;
 
@@ -270,7 +268,7 @@ export const JsonView: Story = {
     const client = useClient();
     const registry = useContext(RegistryContext);
     const graph = useMemo(() => createGraph(client, registry), [client, registry]);
-    const data = useRxValue(graph.json());
+    const data = useAtomValue(graph.json());
 
     return (
       <>
@@ -290,7 +288,7 @@ export const TreeView: Story = {
 
     const useItems = useCallback(
       (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
-        const connections = useRxValue(graph.connections(node?.id ?? ROOT_ID));
+        const connections = useAtomValue(graph.connections(node?.id ?? ROOT_ID));
         return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
       },
       [graph],

package/src/stories/Tree.tsx

@@ -72,7 +72,7 @@ const Scalar: FC<{ value: any }> = ({ value }) => {
 
 const Box: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...props }) => {
   return (
-    <div className={mx('flex px-2 border border-l-0 font-mono truncate', className)} {...props}>
+    <div className={mx('flex pli-2 border border-l-0 font-mono truncate', className)} {...props}>
       {children}
     </div>
   );

package/src/testing.ts

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 
-import { type QueryResult } from '@dxos/echo-db';
-import { type AnyEchoObject } from '@dxos/echo-schema';
+import { type Database, type Entity } from '@dxos/echo';
 
-export const rxFromQuery = <T extends AnyEchoObject>(query: QueryResult<T>): Rx.Rx<T[]> => {
-  return Rx.make((get) => {
+export const atomFromQuery = <T extends Entity.Unknown = Entity.Unknown>(
+  query: Database.QueryResult<T>,
+): Atom.Atom<T[]> => {
+  return Atom.make((get) => {
     const unsubscribe = query.subscribe((result) => {
       get.setSelf(result.objects);
     });

package/dist/types/src/experimental/graph-projections.test.d.ts

@@ -1,25 +0,0 @@
-type Cb = () => void;
-interface Query {
-    id?: string[];
-    typename?: string[];
-}
-/**
- * Lazy query result that can be executed.
- * Does not run without the run function being called.
- */
-interface QueryResult<T> {
-    /**
-     * Execute the query and subscribe to the result.
-     * @param next Called at least once with the first value (maybe synchronously) and then for every subsequent update.
-     * @param error Called on error. `next` is never called after that.
-     * @returns Function to dispose the query and unsubscribe.
-     */
-    run(onData: (value?: T[]) => void, onError: (err: Error) => void): Cb;
-}
-declare const QueryResult: Readonly<{
-    fromPromise: <T>(run: (onDispose: (cb: Cb) => void) => Promise<T[]>) => QueryResult<T>;
-}>;
-interface _Resolver<T> {
-    query(query: Query): QueryResult<T>;
-}
-//# sourceMappingURL=graph-projections.test.d.ts.map

package/dist/types/src/experimental/graph-projections.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"graph-projections.test.d.ts","sourceRoot":"","sources":["../../../../src/experimental/graph-projections.test.ts"],"names":[],"mappings":"AAIA,KAAK,EAAE,GAAG,MAAM,IAAI,CAAC;AAErB,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;;GAGG;AACH,UAAU,WAAW,CAAC,CAAC;IACrB;;;;;OAKG;IACH,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,GAAG,EAAE,CAAC;CACvE;AAED,QAAA,MAAM,WAAW;kBACD,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,IAAI,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,KAAG,WAAW,CAAC,CAAC,CAAC;EAyBpF,CAAC;AAEH,UAAU,SAAS,CAAC,CAAC;IACnB,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;CACrC"}

package/src/experimental/graph-projections.test.ts

@@ -1,56 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-type Cb = () => void;
-
-interface Query {
-  id?: string[];
-  typename?: string[];
-}
-
-/**
- * Lazy query result that can be executed.
- * Does not run without the run function being called.
- */
-interface QueryResult<T> {
-  /**
-   * Execute the query and subscribe to the result.
-   * @param next Called at least once with the first value (maybe synchronously) and then for every subsequent update.
-   * @param error Called on error. `next` is never called after that.
-   * @returns Function to dispose the query and unsubscribe.
-   */
-  run(onData: (value?: T[]) => void, onError: (err: Error) => void): Cb;
-}
-
-const QueryResult = Object.freeze({
-  fromPromise: <T>(run: (onDispose: (cb: Cb) => void) => Promise<T[]>): QueryResult<T> => {
-    return {
-      run: (onData, onError) => {
-        const cbs: Cb[] = [];
-        let disposed = false;
-        const dispose = () => {
-          cbs.forEach((cb) => cb());
-          disposed = true;
-        };
-        run((cb) => (disposed ? cb() : cbs.push(cb))).then(
-          (data) => {
-            if (disposed) {
-              return;
-            }
-            onData(data);
-          },
-          (err) => {
-            dispose();
-            onError(err);
-          },
-        );
-        return dispose;
-      },
-    };
-  },
-});
-
-interface _Resolver<T> {
-  query(query: Query): QueryResult<T>;
-}