@dxos/plugin-debug 0.7.2 → 0.7.3-main.2dd075e

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,124 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// TODO(burdon): workerize-loader dep.
+import { Graph, type Node, type PlainObject } from '@antv/graphlib';
+import { D3ForceLayout } from '@antv/layout';
+import { createBindingId, createShapeId, type Editor, type SerializedStore, type TLRecord } from '@tldraw/tldraw';
+
+import { invariant } from '@dxos/invariant';
+import { faker } from '@dxos/random';
+import { 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
+
+/**
+ * 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 edges = range(faker.number.int({ min: nodes.length, max: nodes.length * 2 })).map(() => {
+    invariant(nodes.length >= 2);
+    let source: Node<PlainObject>;
+    let target: Node<PlainObject>;
+    do {
+      source = faker.helpers.arrayElement(nodes);
+      target = faker.helpers.arrayElement(nodes);
+    } while (source.id === target.id);
+
+    return { id: faker.string.uuid(), source: source.id, target: target.id, data: {} };
+  });
+
+  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;
+
+  const layout = new D3ForceLayout({
+    center: [0, 0],
+    preventOverlap: true,
+    collideStrength: 0.5,
+    linkDistance: grid * 2,
+    nodeSize,
+    nodeSpacing: nodeSize,
+  });
+  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';