@dxos/plugin-debug 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -4,65 +4,67 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { ComputeGraph } from '@dxos/conductor';
-import { Filter, Obj, Type } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { SheetType } from '@dxos/plugin-sheet/types';
-import { DiagramType } from '@dxos/plugin-sketch/types';
-import { SpaceAction } from '@dxos/plugin-space/types';
+import { Filter, Obj, type Type } from '@dxos/echo';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
-import { getTypename, type Space } from '@dxos/react-client/echo';
-import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, Input, Layout, ScrollArea, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { initializeTable, TableType } from '@dxos/react-ui-table';
-import { DataType } from '@dxos/schema';
+import { Organization, Person, Task } from '@dxos/types';
 import { jsonKeyReplacer, sortKeys } from '@dxos/util';
 
-import { createGenerator, staticGenerators, type ObjectGenerator } from './ObjectGenerator';
-import { SchemaTable } from './SchemaTable';
+import { type ObjectGenerator, createGenerator, staticGenerators } from './ObjectGenerator';
 import { generator } from './presets';
+import { SchemaTable } from './SchemaTable';
 
 export type SpaceGeneratorProps = {
   space: Space;
-  onCreateObjects?: (objects: Obj.Any[]) => void;
+  onCreateObjects?: (objects: Obj.Unknown[]) => void;
 };
 
 export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
-  const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
-  const mutableTypes = [DataType.Organization, DataType.Project, DataType.Person, DataType.Message];
+  const staticTypes = [Markdown.Document, Diagram.Diagram, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
+  const recordTypes: Type.Obj.Any[] = [Organization.Organization, Person.Person, Task.Task];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
   const presets = useMemo(() => generator(), []);
 
+  // Register types.
+  useAsyncEffect(async () => {
+    await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
+  }, [client]);
+
   // Create type generators.
   const typeMap = useMemo(() => {
-    client.addTypes([...staticTypes, ...presets.schemas]);
-    const mutableGenerators = new Map<string, ObjectGenerator<any>>(
-      mutableTypes.map((type) => [type.typename, createGenerator(type as any)]),
+    const recordGenerators = new Map<string, ObjectGenerator<any>>(
+      recordTypes.map((type) => [type.typename, createGenerator(client, invokePromise, type)]),
     );
 
-    return new Map([...staticGenerators, ...presets.items, ...mutableGenerators]);
-  }, [client, mutableTypes]);
+    return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
+  }, [client, recordTypes, invokePromise]);
 
   // Query space to get info.
   const updateInfo = async () => {
     // Create schema map.
     const echoSchema = await space.db.schemaRegistry.query().run();
-    const staticSchema = space.db.graph.schemaRegistry.schemas;
+    const staticSchema = await space.db.graph.schemaRegistry.query().run();
 
     // Create object map.
-    const { objects } = await space.db.query(Filter.everything()).run();
+    const objects = await space.db.query(Filter.everything()).run();
     const objectMap = sortKeys(
       objects.reduce<Record<string, number>>((map, obj) => {
-        const type = getTypename(obj);
+        const type = Obj.getTypename(obj);
         if (type) {
           const count = map[type] ?? 0;
           map[type] = count + 1;
         }
+
         return map;
       }, {}),
     );
@@ -90,90 +92,35 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
     [typeMap, count],
   );
 
-  // TODO(wittjosiah): Remove. Replace with proper echo import.
-  const handleLoadTables = useCallback(async () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (!file) {
-        return;
-      }
-
-      try {
-        const content = await file.text();
-        const data = JSON.parse(content);
-        const schemas = await space.db.schemaRegistry.register(data.schemas.map(Type.toEffectSchema));
-        // TODO(wittjosiah): If the schema is already registered this should skip.
-        await Promise.all(
-          schemas.map(async (schema) => {
-            const parts = schema.typename.split('/');
-            const name = parts[parts.length - 1];
-            const table = Obj.make(TableType, { name, threads: [] });
-            await initializeTable({ client, space, table, typename: schema.typename });
-            await dispatch(createIntent(SpaceAction.AddObject, { target: space, object: table }));
-            return table;
-          }),
-        );
-        // TODO(wittjosiah): This should query the space for schemas.
-        await Promise.all(
-          data.objects.map(async ({ id, '@type': typename, ...fields }: any) => {
-            const schema = schemas.find((s) => `dxn:type:${s.typename}:${s.version}` === typename);
-            if (!schema) {
-              log.warn('Missing schema for object', { id, typename });
-              return;
-            }
-            const object = Obj.make(schema, fields);
-            space.db.add(object);
-            return object;
-          }),
-        );
-      } catch (err) {
-        log.catch(err);
-      }
-    };
-
-    input.click();
-  }, []);
-
   return (
-    <div role='none' className='flex flex-col grow overflow-hidden'>
-      <Toolbar.Root classNames='border-be border-subduedSeparator'>
+    <Layout.Main toolbar>
+      <Toolbar.Root>
         <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
-        <IconButton
-          icon='ph--file-arrow-up--regular'
-          iconOnly
-          label='Load tables from JSON'
-          onClick={handleLoadTables}
-        />
         <Toolbar.Separator variant='gap' />
         <Input.Root>
           <Input.TextInput
             type='number'
+            placeholder='Count'
+            classNames='is-[4rem] text-right'
             min={1}
             max={100}
-            placeholder={'Count'}
-            classNames='!w-[4rem] !text-right'
             size={8}
             value={count}
-            onChange={(ev) => setCount(parseInt(ev.target.value))}
+            onChange={(event) => setCount(parseInt(event.target.value))}
           />
         </Input.Root>
       </Toolbar.Root>
 
-      <div className='flex flex-col overflow-y-auto divide-y divide-separator'>
-        <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
-        <SchemaTable types={mutableTypes} objects={info.objects} label='Mutable Types' onClick={handleCreateData} />
-        <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
-
-        <div>
-          <SyntaxHighlighter classNames='flex text-xs' language='json'>
+      <ScrollArea.Root thin orientation='vertical'>
+        <ScrollArea.Viewport classNames='gap-4 divide-y divide-subduedSeparator'>
+          <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
+          <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
+          <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
+          <SyntaxHighlighter language='json' classNames='text-xs'>
             {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
           </SyntaxHighlighter>
-        </div>
-      </div>
-    </div>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </Layout.Main>
   );
 };

package/src/components/SpaceGenerator/draw-util.ts

@@ -3,20 +3,20 @@
 //
 
 // TODO(burdon): workerize-loader dep.
-import { Graph, type Edge, type PlainObject } from '@antv/graphlib';
+import { type Edge, Graph, type PlainObject } from '@antv/graphlib';
 import {
-  type Layout,
   D3ForceLayout,
   type D3ForceLayoutOptions,
   GridLayout,
   type GridLayoutOptions,
+  type Layout,
   RadialLayout,
   type RadialLayoutOptions,
 } from '@antv/layout';
-import { createBindingId, createShapeId, type Editor, type SerializedStore, type TLRecord } from '@tldraw/tldraw';
+import { type Editor, type SerializedStore, type TLRecord, createBindingId, createShapeId } from '@tldraw/tldraw';
 
 import { faker } from '@dxos/random';
-import { isNotFalsy, range } from '@dxos/util';
+import { isTruthy, range } from '@dxos/util';
 
 // TODO(burdon): Graph layout:
 //  - https://www.npmjs.com/package/@antv/layout (uses d3)
@@ -67,7 +67,7 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
         }
         return target;
       })
-      .filter(isNotFalsy);
+      .filter(isTruthy);
 
     for (const target of targets) {
       traverse(target);