@dxos/plugin-debug 0.7.2 → 0.7.3-staging.971cd8d

package/src/components/{SurfaceDebug.tsx → DebugSurface.tsx}

@@ -16,7 +16,7 @@ export type SurfaceDebugProps = ThemedClassName<{}>;
  * Show surface info.
  * NOTE: Remove from @dxos/app-framework if removing this.
  */
-export const SurfaceDebug = ({ classNames }: SurfaceDebugProps) => {
+export const DebugSurface = ({ classNames }: SurfaceDebugProps) => {
   const context = useSurfaceRoot();
   const [surfaces, setSurfaces] = useState<DebugInfo[]>([]);
   const renderMap = useMemo(() => new Map<string, { last: number; delta: number }>(), []);

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -0,0 +1,178 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  createTLStore,
+  defaultBindingUtils,
+  defaultShapeUtils,
+  defaultShapeTools,
+  defaultTools,
+  Editor,
+  type TLEditorOptions,
+} from '@tldraw/tldraw';
+
+import { type AbstractSchema, type BaseObject } from '@dxos/echo-schema';
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { DocumentType, TextType } from '@dxos/plugin-markdown/types';
+import { addressToA1Notation, createSheet } from '@dxos/plugin-sheet';
+import { type CellValue } from '@dxos/plugin-sheet/types';
+import { SheetType } from '@dxos/plugin-sheet/types';
+import { TLDRAW_SCHEMA, CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
+import { faker } from '@dxos/random';
+import { Filter, type Space } from '@dxos/react-client/echo';
+import { TableType } from '@dxos/react-ui-table';
+import { createView } from '@dxos/schema';
+import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { range } from '@dxos/util';
+
+import { drawGraph, generateGraph } from './draw-util';
+
+const generator: ValueGenerator = faker as any;
+
+// TODO(burdon): Add objects to collections.
+// TODO(burdon): Create comments.
+// TODO(burdon): Reuse in testbench-app.
+// TODO(burdon): Mutator running in background (factor out): from echo-generator.
+
+export type ObjectGenerator<T extends BaseObject> = (
+  space: Space,
+  n: number,
+  cb?: (objects: ReactiveObject<any>[]) => void,
+) => Promise<ReactiveObject<T>[]>;
+
+// TODO(burdon): Factor out and create unit tests. See "fuzz" patterns.
+export const staticGenerators = new Map<string, ObjectGenerator<any>>([
+  //
+  // DocumentType
+  //
+  [
+    DocumentType.typename,
+    async (space, n, cb) => {
+      const objects = range(n).map(() => {
+        const content = range(faker.number.int({ min: 3, max: 8 }))
+          .map(() => faker.lorem.sentences(faker.number.int({ min: 3, max: 16 })))
+          .join('\n\n');
+
+        const obj = space.db.add(
+          create(DocumentType, {
+            name: faker.commerce.productName(),
+            content: create(TextType, { content }),
+            threads: [],
+          }),
+        );
+
+        return obj;
+      });
+
+      cb?.(objects);
+      return objects;
+    },
+  ],
+  //
+  // DiagramType
+  //
+  [
+    DiagramType.typename,
+    async (space, n, cb) => {
+      const options: Pick<TLEditorOptions, 'bindingUtils' | 'shapeUtils' | 'tools' | 'getContainer'> = {
+        bindingUtils: defaultBindingUtils,
+        shapeUtils: defaultShapeUtils,
+        tools: [...defaultTools, ...defaultShapeTools],
+        getContainer: () => document.body, // TODO(burdon): Fake via JSDOM?
+      };
+
+      const objects = await Promise.all(
+        range(n).map(async () => {
+          const store = createTLStore();
+          const editor = new Editor({ ...options, store });
+          const graph = generateGraph();
+          const content = await drawGraph(editor, graph);
+          editor.dispose();
+          store.dispose();
+
+          const obj = space.db.add(
+            create(DiagramType, {
+              name: faker.commerce.productName(),
+              canvas: create(CanvasType, { schema: TLDRAW_SCHEMA, content }),
+            }),
+          );
+
+          return obj;
+        }),
+      );
+
+      cb?.(objects);
+      return objects;
+    },
+  ],
+  //
+  // SheetType
+  //
+  [
+    SheetType.typename,
+    async (space, n, cb) => {
+      const objects = range(n).map(() => {
+        // TODO(burdon): Reconcile with plugin-sheet/testing
+        const year = new Date().getFullYear();
+        const cols = 4;
+        const rows = 20;
+        const cells: Record<string, CellValue> = {};
+        for (let col = 1; col <= cols; col++) {
+          for (let row = 1; row <= 10; row++) {
+            const cell = addressToA1Notation({ col, row });
+            if (row === 1) {
+              cells[cell] = { value: `${year} Q${col}` };
+            } else if (row === rows) {
+              const from = addressToA1Notation({ col, row: 2 });
+              const to = addressToA1Notation({ col, row: rows - 1 });
+              cells[cell] = { value: `=SUM(${from}:${to})` };
+            } else if (row > 2 && row < rows - 1) {
+              cells[cell] = { value: Math.floor(Math.random() * 10_000) };
+            }
+          }
+        }
+
+        // TODO(burdon): Set width.
+        return space.db.add(
+          createSheet({
+            name: faker.commerce.productName(),
+            cells,
+          }),
+        );
+      });
+
+      cb?.(objects);
+      return objects;
+    },
+  ],
+]);
+
+export const createGenerator = <T extends BaseObject>(type: AbstractSchema<T>): ObjectGenerator<T> => {
+  return async (
+    space: Space,
+    n: number,
+    cb?: (objects: ReactiveObject<any>[]) => void,
+  ): Promise<ReactiveObject<T>[]> => {
+    // Find or create mutable schema.
+    const mutableSchema = await space.db.schemaRegistry.query();
+    const schema =
+      mutableSchema.find((schema) => schema.typename === type.typename) ?? space.db.schemaRegistry.addSchema(type);
+
+    // Create objects.
+    const generate = createAsyncGenerator(generator, schema.schema, space.db);
+    const objects = await generate.createObjects(n);
+
+    // Find or create table and view.
+    const { objects: tables } = await space.db.query(Filter.schema(TableType)).run();
+    const table = tables.find((table) => table.view?.query?.typename === type.typename);
+    if (!table) {
+      const name = type.typename.split('/').pop() ?? type.typename;
+      const view = createView({ name, typename: type.typename, jsonSchema: schema.jsonSchema });
+      const table = space.db.add(create(TableType, { name, view }));
+      cb?.([table]);
+    }
+
+    return objects;
+  };
+};

package/src/components/SpaceGenerator/SchemaTable.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { IconButton } from '@dxos/react-ui';
+
+export type SchemaTableProps = {
+  types: any[];
+  objects?: Record<string, number | undefined>;
+  label: string;
+  onClick: (typename: string) => void;
+};
+
+export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTableProps) => {
+  return (
+    <div className='grid grid-cols-[1fr_80px_40px] gap-1 overflow-hidden'>
+      <div className='grid grid-cols-subgrid col-span-3'>
+        <div className='px-2 text-sm text-primary-500'>{label}</div>
+        <div className='px-2 text-xs text-subdued text-right'>count</div>
+      </div>
+      {types.map((type) => (
+        <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>
+          <div className='px-2 text-sm font-mono text-green-500'>{type.typename}</div>
+          <div className='px-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
+          <IconButton
+            variant='ghost'
+            icon='ph--plus--regular'
+            iconOnly
+            label='Create data'
+            onClick={() => onClick(type.typename)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { SpaceGenerator } from './SpaceGenerator';
+
+const DefaultStory = () => {
+  const [space] = useSpaces();
+  if (!space) {
+    return null;
+  }
+
+  return <SpaceGenerator space={space} />;
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-debug/SpaceGenerator',
+  component: SpaceGenerator,
+  render: render(DefaultStory),
+  decorators: [withClientProvider({ createSpace: true }), withLayout({ tooltips: true }), withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+export const Default = {};

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { type ReactiveObject } from '@dxos/live-object';
+import { DocumentType } from '@dxos/plugin-markdown/types';
+import { SheetType } from '@dxos/plugin-sheet/types';
+import { DiagramType } 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 { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { Testing } from '@dxos/schema/testing';
+import { jsonKeyReplacer, sortKeys } from '@dxos/util';
+
+import { type ObjectGenerator, createGenerator, staticGenerators } from './ObjectGenerator';
+import { SchemaTable } from './SchemaTable';
+
+export type SpaceGeneratorProps = {
+  space: Space;
+  onCreateObjects?: (objects: ReactiveObject<any>[]) => void;
+};
+
+export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
+  const client = useClient();
+  const staticTypes = [DocumentType, DiagramType, SheetType]; // TODO(burdon): Make extensible.
+  const mutableTypes = [Testing.OrgType, Testing.ProjectType, Testing.ContactType];
+  const [count, setCount] = useState(1);
+  const [info, setInfo] = useState<any>({});
+
+  // Create type generators.
+  const typeMap = useMemo(() => {
+    client.addTypes(staticTypes);
+    const mutableGenerators = new Map<string, ObjectGenerator<any>>(
+      mutableTypes.map((type) => [type.typename, createGenerator(type)]),
+    );
+
+    return new Map([...staticGenerators, ...mutableGenerators]);
+  }, [client, mutableTypes]);
+
+  // Query space to get info.
+  const updateInfo = async () => {
+    // Create schema map.
+    const mutableSchema = await space.db.schemaRegistry.query();
+    const staticSchema = space.db.graph.schemaRegistry.schemas;
+
+    // Create object map.
+    const { objects } = await space.db.query().run();
+    const objectMap = sortKeys(
+      objects.reduce<Record<string, number>>((map, obj) => {
+        const type = getTypename(obj);
+        if (type) {
+          const count = map[type] ?? 0;
+          map[type] = count + 1;
+        }
+        return map;
+      }, {}),
+    );
+
+    setInfo({
+      schema: {
+        static: staticSchema.length,
+        mutable: mutableSchema.length,
+      },
+      objects: objectMap,
+    });
+  };
+
+  useAsyncEffect(updateInfo, [space]);
+
+  const handleCreateData = useCallback(
+    async (typename: string) => {
+      const constructor = typeMap.get(typename);
+      if (constructor) {
+        // TODO(burdon): Input to specify number of objects.
+        await constructor(space, count, onCreateObjects);
+        await updateInfo();
+      }
+    },
+    [typeMap, count],
+  );
+
+  return (
+    <div role='none' className='flex flex-col divide-y divide-separator'>
+      <Toolbar.Root classNames='p-1'>
+        <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
+        <Toolbar.Expander />
+        <div className='flex'>
+          <Input.Root>
+            <Input.TextInput
+              type='number'
+              min={1}
+              max={100}
+              placeholder={'Count'}
+              classNames='w-[80px]'
+              value={count}
+              onChange={(ev) => setCount(parseInt(ev.target.value))}
+            />
+          </Input.Root>
+        </div>
+      </Toolbar.Root>
+
+      <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
+      <SchemaTable types={mutableTypes} objects={info.objects} label='Mutable Types' onClick={handleCreateData} />
+
+      <SyntaxHighlighter classNames='flex text-xs' language='json'>
+        {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
+      </SyntaxHighlighter>
+    </div>
+  );
+};

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

@@ -0,0 +1,199 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// TODO(burdon): workerize-loader dep.
+import { Graph, type Edge, type PlainObject } from '@antv/graphlib';
+import {
+  D3ForceLayout,
+  type D3ForceLayoutOptions,
+  GridLayout,
+  type GridLayoutOptions,
+  RadialLayout,
+  type RadialLayoutOptions,
+} from '@antv/layout';
+import { type Layout } from '@antv/layout/lib/types';
+import { createBindingId, createShapeId, type Editor, type SerializedStore, type TLRecord } from '@tldraw/tldraw';
+
+import { faker } from '@dxos/random';
+import { isNotFalsy, range } from '@dxos/util';
+
+// TODO(burdon): Graph layout:
+//  - https://www.npmjs.com/package/@antv/layout (uses d3)
+//    - https://observablehq.com/d/2db6b0cc5e97d8d6
+//    - https://github.com/antvis/graphlib
+//  - https://www.npmjs.com/package/@dagrejs/dagre
+//    - https://github.com/dagrejs/dagre/wiki
+//  - https://www.npmjs.com/package/elkjs
+
+// TLDraw structure:
+//    svg tl-svg-context
+//    div tl-html-layer tl-shapes
+//      div tl-shape
+//        svg tl-svg-container
+//        div class tl-html-container
+//    div tl-overlays
+//      svg
+
+/**
+ * https://github.com/antvis/graphlib/blob/master/docs/classes/Graph.md
+ */
+// TODO(burdon): Factor out.
+// TODO(burdon): Map ECHO to Graph.
+export const generateGraph = (): Graph<PlainObject, PlainObject> => {
+  const nodes = range(faker.number.int({ min: 8, max: 32 })).map(() => ({
+    id: faker.string.uuid(),
+    data: {
+      label: faker.lorem
+        .words(2)
+        .split(' ')
+        .map((word) => word.charAt(0).toUpperCase())
+        .join('-'),
+    },
+  }));
+
+  const unlinked = new Set(nodes.map((node) => node.id));
+  const pop = () => {
+    if (unlinked.size) {
+      const id = faker.helpers.arrayElement(Array.from(unlinked));
+      unlinked.delete(id);
+      return id;
+    }
+  };
+
+  const edges: Edge<PlainObject>[] = [];
+  const link = (source: string, target: string) => {
+    edges.push({ id: faker.string.uuid(), source, target, data: {} });
+  };
+
+  const branching = 3;
+  const traverse = (source: string) => {
+    const targets = range(faker.number.int({ min: 1, max: branching }))
+      .map(() => {
+        const target = pop();
+        if (target) {
+          link(source, target);
+        }
+        return target;
+      })
+      .filter(isNotFalsy);
+
+    for (const target of targets) {
+      traverse(target);
+    }
+  };
+
+  const source = pop();
+  if (source) {
+    traverse(source);
+  }
+
+  return new Graph<PlainObject, PlainObject>({ nodes, edges });
+};
+
+export const drawGraph = async (
+  editor: Editor,
+  graph: Graph<PlainObject, PlainObject>,
+): Promise<SerializedStore<TLRecord>> => {
+  const grid = 40;
+  const nodeSize = 80;
+
+  const snap = (n: number) => Math.round(n / grid) * grid;
+
+  type Intersection<Types extends readonly unknown[]> = Types extends [infer First, ...infer Rest]
+    ? First & Intersection<Rest>
+    : unknown;
+
+  const defaultOptions: Intersection<[D3ForceLayoutOptions, GridLayoutOptions, RadialLayoutOptions]> = {
+    center: [0, 0],
+    width: grid * 20,
+    height: grid * 20,
+    linkDistance: grid * 2,
+    nodeSize,
+    nodeSpacing: nodeSize,
+    preventOverlap: true,
+  };
+
+  const layoutType = faker.helpers.arrayElement(['d3force', 'grid', 'radial']);
+  let layout: Layout<any>;
+  switch (layoutType) {
+    case 'd3force': {
+      layout = new D3ForceLayout({
+        ...defaultOptions,
+        nodeStrength: 0.3,
+        collideStrength: 0.8,
+      });
+      break;
+    }
+
+    case 'grid': {
+      layout = new GridLayout({
+        ...defaultOptions,
+      });
+      break;
+    }
+
+    case 'radial':
+    default: {
+      layout = new RadialLayout({
+        ...defaultOptions,
+        focusNode: graph.getAllNodes()[0],
+        unitRadius: grid * 2,
+      });
+    }
+  }
+
+  const { nodes, edges } = await layout.execute(graph);
+
+  for (const node of nodes) {
+    const id = createShapeId(node.id as string);
+    editor.createShape({
+      id,
+      type: 'geo',
+      x: snap(node.data.x),
+      y: snap(node.data.y),
+      props: {
+        w: nodeSize,
+        h: nodeSize,
+        text: node.data.label,
+      },
+    });
+  }
+
+  for (const edge of edges) {
+    const arrowId = createShapeId(edge.id as string);
+    editor.createShape({ id: arrowId, type: 'arrow' });
+
+    editor.createBinding({
+      id: createBindingId(),
+      type: 'arrow',
+      fromId: arrowId,
+      toId: createShapeId(edge.source as string),
+      props: {
+        terminal: 'start',
+        isExact: false,
+        isPrecise: false,
+        normalizedAnchor: { x: 0.5, y: 0.5 },
+      },
+    });
+
+    editor.createBinding({
+      id: createBindingId(),
+      type: 'arrow',
+      fromId: arrowId,
+      toId: createShapeId(edge.target as string),
+      props: {
+        terminal: 'end',
+        isExact: false,
+        isPrecise: false,
+        normalizedAnchor: { x: 0.5, y: 0.5 },
+      },
+    });
+  }
+
+  const data = editor.store.getStoreSnapshot();
+  // TODO(burdon): Strip readonly properties (e.g., `meta`). Factor out.
+  const content: SerializedStore<TLRecord> = JSON.parse(JSON.stringify(data.store));
+
+  return content;
+};

package/src/components/SpaceGenerator/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { SpaceGenerator } from './SpaceGenerator';
+
+export default SpaceGenerator;

package/src/components/index.ts

@@ -6,6 +6,7 @@ import { lazy } from 'react';
 
 export const DebugApp = lazy(() => import('./DebugApp'));
 export const DebugSpace = lazy(() => import('./DebugSpace'));
+export const SpaceGenerator = lazy(() => import('./SpaceGenerator'));
 
 export * from './DebugObjectPanel';
 export * from './DebugSettings';