@dxos/plugin-debug 0.6.8-main.046e6cf

package/src/components/DebugSpace.tsx

@@ -0,0 +1,195 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  ArrowClockwise,
+  DownloadSimple,
+  Flag,
+  FlagPennant,
+  HandPalm,
+  Play,
+  PlusMinus,
+  Timer,
+  UserCirclePlus,
+} from '@phosphor-icons/react';
+import React, { type FC, useContext, useMemo, useState } from 'react';
+
+import { type ReactiveObject } from '@dxos/echo-schema';
+import { DocumentType } from '@dxos/plugin-markdown/types';
+import { Invitation } from '@dxos/protocols/proto/dxos/client/services';
+import { faker } from '@dxos/random';
+import { useAsyncEffect } from '@dxos/react-async';
+import { useClient } from '@dxos/react-client';
+import { Filter, type Space, useSpaceInvitation } from '@dxos/react-client/echo';
+import { InvitationEncoder } from '@dxos/react-client/invitations';
+import { Button, Input, useFileDownload } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { safeParseInt } from '@dxos/util';
+
+import { DebugPanel } from './DebugPanel';
+import { ObjectCreator } from './ObjectCreator';
+import { createSpaceObjectGenerator } from '../scaffolding';
+import { DebugContext } from '../types';
+
+const DEFAULT_COUNT = 100;
+const DEFAULT_PERIOD = 500;
+const DEFAULT_JITTER = 50;
+
+// TODO(burdon): Factor out.
+const useRefresh = (): [any, () => void] => {
+  const [update, setUpdate] = useState({});
+  return [update, () => setUpdate({})];
+};
+
+const DebugSpace: FC<{
+  space: Space;
+  onAddObjects?: (objects: ReactiveObject<any>[]) => void;
+}> = ({ space, onAddObjects }) => {
+  const { connect } = useSpaceInvitation(space?.key);
+  const client = useClient();
+  const [data, setData] = useState<any>({});
+
+  const [update, handleUpdate] = useRefresh();
+  useAsyncEffect(
+    async (isMounted) => {
+      const data = await client.diagnostics({ truncate: true });
+      if (isMounted()) {
+        setData(
+          data?.diagnostics?.spaces?.find(({ key }: any) => {
+            return space.key.toHex().startsWith(key);
+          }),
+        );
+      }
+    },
+    [space, update],
+  );
+
+  const download = useFileDownload();
+  const handleCopy = async () => {
+    download(
+      new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' }),
+      `${new Date().toISOString().replace(/\W/g, '-')}.json`,
+    );
+  };
+
+  const [mutationCount, setMutationCount] = useState(String(DEFAULT_COUNT));
+  const [mutationInterval, setMutationInterval] = useState(String(DEFAULT_PERIOD));
+  const [mutationJitter, setMutationJitter] = useState(String(DEFAULT_JITTER));
+
+  const generator = useMemo(() => createSpaceObjectGenerator(space), [space]);
+
+  // TODO(burdon): Note: this is shared across all spaces!
+  const { running, start, stop } = useContext(DebugContext);
+  const handleToggleRunning = () => {
+    if (running) {
+      stop();
+      handleUpdate();
+    } else {
+      start(
+        async () => {
+          const { objects } = await space.db.query(Filter.schema(DocumentType)).run();
+          if (objects.length) {
+            const object = faker.helpers.arrayElement(objects);
+            await generator.mutateObject(object, { count: 10, mutationSize: 10, maxContentLength: 1000 });
+          }
+        },
+        {
+          count: safeParseInt(mutationCount) ?? 0,
+          interval: safeParseInt(mutationInterval) ?? 0,
+          jitter: safeParseInt(mutationJitter) ?? 0,
+        },
+      );
+    }
+  };
+
+  const handleCreateInvitation = () => {
+    const invitation = space.share({
+      type: Invitation.Type.INTERACTIVE,
+      authMethod: Invitation.AuthMethod.NONE,
+      multiUse: true,
+    });
+
+    // TODO(burdon): Refactor.
+    // TODO(burdon): Unsubscribe?
+    connect(invitation);
+    const code = InvitationEncoder.encode(invitation.get());
+    new URL(window.origin).searchParams.set('spaceInvitationCode', code);
+    const url = `${window.origin}?spaceInvitationCode=${code}`;
+    void navigator.clipboard.writeText(url);
+  };
+
+  const handleCreateEpoch = async () => {
+    await space.internal.createEpoch();
+    handleUpdate();
+  };
+
+  return (
+    <DebugPanel
+      menu={
+        <>
+          <div className='relative' title='mutation count'>
+            <Input.Root>
+              <Input.TextInput
+                autoComplete='off'
+                size={5}
+                classNames='w-[100px] text-right pie-[22px]'
+                placeholder='Count'
+                value={mutationCount}
+                onChange={({ target: { value } }) => setMutationCount(value)}
+              />
+            </Input.Root>
+            <Flag className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
+          </div>
+          <div className='relative' title='mutation period'>
+            <Input.Root>
+              <Input.TextInput
+                autoComplete='off'
+                size={5}
+                classNames='w-[100px] text-right pie-[22px]'
+                placeholder='Interval'
+                value={mutationInterval}
+                onChange={({ target: { value } }) => setMutationInterval(value)}
+              />
+            </Input.Root>
+            <Timer className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
+          </div>
+          <div className='relative' title='mutation jitter'>
+            <Input.Root>
+              <Input.TextInput
+                autoComplete='off'
+                size={5}
+                classNames='w-[100px] text-right pie-[22px]'
+                placeholder='Jitter'
+                value={mutationJitter}
+                onChange={({ target: { value } }) => setMutationJitter(value)}
+              />
+            </Input.Root>
+            <PlusMinus className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
+          </div>
+          <Button onClick={handleToggleRunning}>
+            {running ? <HandPalm className={getSize(5)} /> : <Play className={getSize(5)} />}
+          </Button>
+          <Button onClick={handleUpdate}>
+            <ArrowClockwise className={getSize(5)} />
+          </Button>
+          <Button onClick={handleCopy}>
+            <DownloadSimple className={getSize(5)} />
+          </Button>
+
+          <div className='grow' />
+          <Button onClick={handleCreateEpoch} title='Create epoch'>
+            <FlagPennant className={mx(getSize(5))} />
+          </Button>
+          <Button onClick={handleCreateInvitation} title='Create Space invitation'>
+            <UserCirclePlus className={mx(getSize(5), 'text-blue-500')} />
+          </Button>
+        </>
+      }
+    >
+      <ObjectCreator space={space} onAddObjects={onAddObjects} />
+    </DebugPanel>
+  );
+};
+
+export default DebugSpace;

package/src/components/DebugStatus.tsx

@@ -0,0 +1,221 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ChartBar, Circle, Lightning, LightningSlash } from '@phosphor-icons/react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { firstIdInPart, parseGraphPlugin, parseNavigationPlugin, useResolvePlugin } from '@dxos/app-framework';
+import { TimeoutError } from '@dxos/async';
+import { StatsPanel, useStats } from '@dxos/devtools';
+import { log } from '@dxos/log';
+import { getActiveSpace } from '@dxos/plugin-space';
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
+import { useNetworkStatus } from '@dxos/react-client/mesh';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+const styles = {
+  success: 'text-sky-300 dark:text-green-700',
+  warning: 'text-orange-300 dark:text-orange-600',
+  error: 'text-red-300 dark:text-red-600',
+};
+
+// TODO(burdon): Move out of debug plugin.
+// TODO(burdon): Make pluggable (move indicators to relevant plugins).
+// TODO(burdon): Vault heartbeat indicator (global scope)?
+
+/**
+ * Ensure light doesn't flicker immediately after start.
+ */
+// TODO(burdon): Move to @dxos/async (debounce?)
+const _timer = (cb: (err?: Error) => void, options?: { min?: number; max?: number }) => {
+  const min = options?.min ?? 500;
+  let start: number;
+  let pending: NodeJS.Timeout;
+  let timeout: NodeJS.Timeout;
+  return {
+    start: () => {
+      start = Date.now();
+      clearTimeout(pending);
+      if (options?.max) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          cb(new TimeoutError(options.max));
+        }, options.max);
+      }
+    },
+    stop: () => {
+      clearTimeout(timeout);
+      const delta = Date.now() - start;
+      if (delta < min) {
+        pending = setTimeout(() => {
+          cb();
+        }, min - delta);
+      }
+    },
+  };
+};
+
+/**
+ * Global error handler.
+ */
+// TODO(burdon): Integrate with Sentry?
+const ErrorIndicator = () => {
+  const [, forceUpdate] = useState({});
+  const errorRef = useRef<Error>();
+  useEffect(() => {
+    const errorListener = (event: any) => {
+      const error: Error = event.error ?? event.reason;
+      // event.preventDefault();
+      if (errorRef.current !== error) {
+        // eslint-disable-next-line no-console
+        log.error('onError', { event });
+        errorRef.current = error;
+        forceUpdate({});
+      }
+    };
+
+    // TODO(burdon): Register globally?
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event
+    window.addEventListener('error', errorListener);
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event
+    window.addEventListener('unhandledrejection', errorListener);
+
+    return () => {
+      window.removeEventListener('error', errorListener);
+      window.removeEventListener('unhandledrejection', errorListener);
+    };
+  }, []);
+
+  const handleReset = () => {
+    errorRef.current = undefined;
+    forceUpdate({});
+  };
+
+  if (errorRef.current) {
+    return (
+      <StatusBar.Button title={errorRef.current.message} onClick={handleReset}>
+        <Circle weight='fill' className={mx(styles.error, getSize(3))} />
+      </StatusBar.Button>
+    );
+  } else {
+    return (
+      <StatusBar.Item title='No errors.'>
+        <Circle weight='fill' className={getSize(3)} />
+      </StatusBar.Item>
+    );
+  }
+};
+
+/**
+ * Swarm connection handler.
+ */
+const SwarmIndicator = () => {
+  const [state, setState] = useState(0);
+  const { swarm } = useNetworkStatus();
+  useEffect(() => {
+    setState(swarm === ConnectionState.ONLINE ? 0 : 1);
+  }, [swarm]);
+
+  if (state === 0) {
+    return (
+      <StatusBar.Item title='Connected to swarm.'>
+        <Lightning className={getSize(4)} />
+      </StatusBar.Item>
+    );
+  } else {
+    return (
+      <StatusBar.Item title='Disconnected from swarm.'>
+        <LightningSlash className={mx(styles.warning, getSize(4))} />
+      </StatusBar.Item>
+    );
+  }
+};
+
+/**
+ * Space saving indicator.
+ */
+const SavingIndicator = () => {
+  const [state, _setState] = useState(0);
+  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+  const graphPlugin = useResolvePlugin(parseGraphPlugin);
+  const location = navigationPlugin?.provides.location;
+  const graph = graphPlugin?.provides.graph;
+  const _space = location && graph ? getActiveSpace(graph, firstIdInPart(location.active, 'main')) : undefined;
+  // TODO(dmaretskyi): Fix this when we have save status for automerge.
+  // useEffect(() => {
+  //   if (!space) {
+  //     return;
+  //   }
+  // const { start, stop } = timer(() => setState(0), { min: 250 });
+  // return space.db.pendingBatch.on(({ duration, error }) => {
+  //   if (error) {
+  //     setState(2);
+  //     stop();
+  //   } else if (duration === undefined) {
+  //     setState(1);
+  //     start();
+  //   } else {
+  //     stop();
+  //   }
+  // });
+  // }, [space]);
+
+  switch (state) {
+    case 2:
+      return (
+        <StatusBar.Item title='Edit not saved.'>
+          <Circle weight='fill' className={mx(styles.warning, getSize(3))} />
+        </StatusBar.Item>
+      );
+    case 1:
+      return (
+        <StatusBar.Item title='Saving...'>
+          <Circle weight='fill' className={mx(styles.success, getSize(3))} />
+        </StatusBar.Item>
+      );
+    case 0:
+    default:
+      return (
+        <StatusBar.Item title='Modified indicator.'>
+          <Circle weight='fill' className={getSize(3)} />
+        </StatusBar.Item>
+      );
+  }
+};
+
+const PerformanceIndicator = () => {
+  const [visible, setVisible] = useState(false);
+  const [stats, refreshStats] = useStats();
+
+  return (
+    <>
+      <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
+        <ChartBar />
+      </StatusBar.Button>
+      <div
+        className={mx(
+          'z-20 absolute transition-[right] bottom-[24px] w-[450px]',
+          'border-l border-y border-neutral-300 dark:border-neutral-700',
+          visible ? 'right-0' : 'right-[-450px]',
+        )}
+      >
+        <StatsPanel stats={stats} onRefresh={refreshStats} />
+      </div>
+    </>
+  );
+};
+
+const indicators = [PerformanceIndicator, SavingIndicator, ErrorIndicator, SwarmIndicator];
+
+export const DebugStatus = () => {
+  return (
+    <>
+      {indicators.map((Indicator) => (
+        <Indicator key={Indicator.name} />
+      ))}
+    </>
+  );
+};

package/src/components/DevtoolsMain.tsx

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Devtools } from '@dxos/devtools';
+import { useClient, type ClientServices } from '@dxos/react-client';
+
+const DevtoolsMain = () => {
+  const client = useClient();
+
+  return <Devtools client={client} services={client.services.services as ClientServices} />;
+};
+
+export default DevtoolsMain;

package/src/components/ObjectCreator.stories.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { type FC, useEffect } from 'react';
+
+import { createSpaceObjectGenerator } from '@dxos/echo-generator';
+import { type ReactiveObject, useSpaces } from '@dxos/react-client/echo';
+import { ClientRepeater } from '@dxos/react-client/testing';
+
+import { ObjectCreator } from './ObjectCreator';
+
+const Story: FC = () => {
+  const [space] = useSpaces();
+  useEffect(() => {
+    if (space) {
+      const generator = createSpaceObjectGenerator(space);
+      generator.addSchemas();
+    }
+  }, [space]);
+
+  const handleCreate = (objects: ReactiveObject<any>[]) => {
+    console.log('Created:', objects);
+  };
+
+  if (!space) {
+    return null;
+  }
+
+  return <ObjectCreator space={space} onAddObjects={handleCreate} />;
+};
+
+export default {
+  title: 'plugin-debug/SchemaList',
+  component: ObjectCreator,
+  render: () => <ClientRepeater component={Story} createSpace />,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

package/src/components/ObjectCreator.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC, useMemo, useState } from 'react';
+
+import { type EchoReactiveObject, type ReactiveObject } from '@dxos/echo-schema';
+import { type Space } from '@dxos/react-client/echo';
+import { Button, DensityProvider } from '@dxos/react-ui';
+import { createColumnBuilder, type TableColumnDef, Table } from '@dxos/react-ui-table';
+
+import { SchemasNames, createSpaceObjectGenerator } from '../scaffolding';
+
+export type CreateObjectsParams = {
+  enabled: boolean;
+  schema: SchemasNames;
+  objectsCount: number;
+  mutationsCount: number;
+  maxContentLength: number;
+  mutationSize: number;
+};
+
+const CREATE_OBJECTS_IN_ONE_CHUNK = 10;
+
+export const ObjectCreator: FC<{
+  space: Space;
+  onAddObjects?: (objects: ReactiveObject<any>[]) => void;
+}> = ({ space, onAddObjects }) => {
+  const generator = useMemo(() => createSpaceObjectGenerator(space), [space]);
+
+  const [objectsToCreate, setObjectsToCreate] = useState<CreateObjectsParams[]>([
+    {
+      enabled: true,
+      schema: SchemasNames.document,
+      objectsCount: 10,
+      mutationsCount: 10,
+      mutationSize: 10,
+      maxContentLength: 1000,
+    },
+    {
+      enabled: true,
+      schema: SchemasNames.diagram,
+      objectsCount: 10,
+      mutationsCount: 10,
+      mutationSize: 10,
+      maxContentLength: 1000,
+    },
+  ]);
+
+  const handleCreate = async () => {
+    for (const params of objectsToCreate) {
+      if (!params.enabled) {
+        continue;
+      }
+      let objectsCreated = 0;
+      while (objectsCreated < params.objectsCount) {
+        const objects = (await generator.createObjects({
+          [params.schema]: Math.min(CREATE_OBJECTS_IN_ONE_CHUNK, params.objectsCount - objectsCreated),
+        })) as EchoReactiveObject<any>[];
+
+        await generator.mutateObjects(objects, {
+          count: params.mutationsCount,
+          mutationSize: params.mutationSize,
+          maxContentLength: params.maxContentLength,
+        });
+        objectsCreated += objects.length;
+        onAddObjects?.(objects);
+      }
+    }
+    await space.db.flush();
+  };
+  const handleChangeOnRow = (row: CreateObjectsParams, key: string, value: any) => {
+    const newObjects = [...objectsToCreate];
+    Object.assign(newObjects.find((object) => object.schema === row.schema)!, { [key]: value });
+    setObjectsToCreate(newObjects);
+  };
+
+  const { helper, builder } = createColumnBuilder<CreateObjectsParams>();
+  const columns: TableColumnDef<CreateObjectsParams>[] = [
+    helper.accessor('enabled', builder.switch({ label: 'Enabled', onUpdate: handleChangeOnRow })),
+    helper.accessor('schema', builder.string({ classNames: 'font-mono', label: 'Schema' })),
+    helper.accessor('objectsCount', builder.number({ label: 'Objects', onUpdate: handleChangeOnRow })),
+    helper.accessor('mutationsCount', builder.number({ label: 'Mutations', onUpdate: handleChangeOnRow })),
+    helper.accessor('mutationSize', builder.number({ label: 'Mut. Size', onUpdate: handleChangeOnRow })),
+    helper.accessor('maxContentLength', builder.number({ label: 'Length', onUpdate: handleChangeOnRow })),
+  ];
+
+  return (
+    <>
+      <DensityProvider density={'fine'}>
+        <Table.Root>
+          <Table.Viewport>
+            <Table.Main<CreateObjectsParams> columns={columns} data={objectsToCreate} />
+          </Table.Viewport>
+        </Table.Root>
+      </DensityProvider>
+      <Button onClick={handleCreate}>Create</Button>
+    </>
+  );
+};

package/src/components/Tree.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC, type HTMLAttributes, useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+// eslint-disable-next-line no-restricted-imports
+import styleDark from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark';
+// eslint-disable-next-line no-restricted-imports
+import styleLight from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-light';
+
+import { type ThemeMode } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { arrayToBuffer } from '@dxos/util';
+
+// TODO(burdon): Copied form devtools.
+
+export const replacer = (key: any, value: any) => {
+  if (typeof value === 'object') {
+    if (value instanceof Uint8Array) {
+      return arrayToBuffer(value).toString('hex');
+    }
+
+    if (value?.type === 'Buffer') {
+      return Buffer.from(value.data).toString('hex');
+    }
+
+    if (key === 'downloaded') {
+      return undefined;
+    }
+  }
+
+  return value;
+};
+
+export const Json: FC<{ data?: object; theme: ThemeMode }> = ({ data, theme }) => {
+  const style = theme === 'dark' ? styleDark : styleLight;
+  return (
+    <SyntaxHighlighter language='json' style={style} className='w-full'>
+      {JSON.stringify(data, replacer, 2)}
+    </SyntaxHighlighter>
+  );
+};
+
+export const Tree: FC<{ data?: object }> = ({ data }) => {
+  return (
+    <div className='flex overflow-auto ml-2 border-l-2 border-blue-500'>
+      <Node data={data} root />
+    </div>
+  );
+};
+
+export const Node: FC<{ data?: any; root?: boolean }> = ({ data, root }) => {
+  if (typeof data !== 'object' || data === undefined || data === null) {
+    return <Scalar value={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    return (
+      <div className='flex flex-col space-y-2'>
+        {data.map((value, index) => (
+          <KeyValue key={index} label={String(index)} data={value} className='bg-teal-50' />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col space-y-2'>
+      {Object.entries(data).map(([key, value]) => (
+        <KeyValue key={key} label={key} data={value} className='bg-blue-50' />
+      ))}
+    </div>
+  );
+};
+
+export const KeyValue: FC<{ label: string; data?: any; className?: string }> = ({ label, data, className }) => {
+  const [open, setOpen] = useState(true);
+  if (data === undefined) {
+    return null;
+  }
+
+  return (
+    <div className='flex'>
+      <Box
+        className={mx('border-blue-200 text-sm select-none cursor-pointer', className)}
+        onClick={() => setOpen((open) => !open)}
+      >
+        {label}
+      </Box>
+      {open && <Node data={data} />}
+    </div>
+  );
+};
+
+const Scalar: FC<{ value: any }> = ({ value }) => {
+  return (
+    <Box className='bg-green-50 border-green-200 rounded-r text-sm font-thin'>
+      {(value === undefined && 'undefined') ||
+        (value === null && 'null') ||
+        (typeof value === 'string' && value) ||
+        JSON.stringify(value)}
+    </Box>
+  );
+};
+
+const Box: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...props }) => {
+  return (
+    <div className={mx('flex px-2 border border-l-0 font-mono truncate', className)} {...props}>
+      {children}
+    </div>
+  );
+};