@dxos/plugin-debug 0.8.4-main.937b3ca → 0.8.4-main.abd8ff62ef

package/src/components/DebugSettings/DebugSettings.tsx

@@ -0,0 +1,262 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { AppCapabilities, getPersonalSpace } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
+import { log } from '@dxos/log';
+import { type IdbLogStore } from '@dxos/log-store-idb';
+import { useClient } from '@dxos/react-client';
+import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+import { TRACE_ALL_KEY } from '@dxos/tracing';
+import { setDeep } from '@dxos/util';
+
+import { meta } from '#meta';
+import { type Settings } from '#types';
+
+type Toast = {
+  title: string;
+  description?: string;
+};
+
+const StorageAdapters = {
+  opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
+  idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
+} as const;
+
+export type DebugSettingsProps = AppSurface.SettingsArticleProps<
+  Settings.Settings,
+  {
+    logStore: IdbLogStore;
+    onUpload?: AppCapabilities.FileUploader;
+  }
+>;
+
+export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }: DebugSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const [toast, setToast] = useState<Toast>();
+  const download = useFileDownload();
+  const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
+  const client = useClient();
+
+  useEffect(() => {
+    void Storage().then((config) => setStorageConfig(config));
+  }, []);
+
+  const handleToast = useCallback(
+    (toast: Toast) => {
+      setToast(toast);
+      const timer = setTimeout(() => setToast(undefined), 5_000);
+      return () => clearTimeout(timer);
+    },
+    [setToast],
+  );
+
+  const handleDownload = useCallback(async () => {
+    const data = await client.diagnostics();
+    const file = new Blob([JSON.stringify(data, undefined, 2)], {
+      type: 'text/plain',
+    });
+    const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
+    download(file, fileName);
+
+    if (onUpload) {
+      const personalSpace = getPersonalSpace(client);
+      if (!personalSpace) {
+        log.error('no personal space available for upload');
+        return;
+      }
+      const info = await onUpload(personalSpace.db, new File([file], fileName));
+      if (!info) {
+        log.error('diagnostics failed to upload to IPFS');
+        return;
+      }
+      handleToast({
+        title: t('settings.uploaded.message'),
+        description: t('settings.uploaded.description'),
+      });
+
+      // TODO(nf): move to IpfsPlugin?
+      const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
+      void navigator.clipboard.writeText(url);
+      handleToast({
+        title: t('settings.uploaded.message'),
+        description: t('settings.uploaded.description'),
+      });
+      log.info('diagnostics', { url });
+    }
+  }, [client, download, handleToast, onUpload, t]);
+
+  const handleDownloadLogs = useCallback(async () => {
+    const ndjson = await logStore.export();
+    const file = new Blob([ndjson], { type: 'application/x-ndjson' });
+    const fileName = `composer-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.ndjson`;
+    download(file, fileName);
+  }, [download, logStore]);
+
+  const handleRepair = useCallback(async () => {
+    try {
+      const info = await client.repair();
+      setStorageConfig(await Storage());
+      handleToast({
+        title: t('settings.repair-success.message'),
+        description: JSON.stringify(info, undefined, 2),
+      });
+    } catch (err: any) {
+      handleToast({
+        title: t('settings.repair-failed.message'),
+        description: err.message,
+      });
+    }
+  }, [client, handleToast, t]);
+
+  const handleWireframeChange = useCallback(
+    (checked: boolean) => onSettingsChange?.((s) => ({ ...s, wireframe: !!checked })),
+    [onSettingsChange],
+  );
+
+  const traceAll = useMemo(
+    () => settings.traceAll ?? (typeof localStorage !== 'undefined' && localStorage.getItem(TRACE_ALL_KEY) === 'true'),
+    [settings.traceAll],
+  );
+
+  const handleTraceAllChange = useCallback(
+    (checked: boolean) => {
+      const value = !!checked;
+      localStorage.setItem(TRACE_ALL_KEY, String(value));
+      onSettingsChange?.((s) => ({ ...s, traceAll: value }));
+    },
+    [onSettingsChange],
+  );
+
+  const handleOpenTracingPanel = useCallback(() => {
+    window.open('about:blank', '_blank');
+  }, []);
+
+  const handleStorageAdapterChange = useCallback(
+    (value: string) => {
+      if (confirm(t('settings.storage-adapter.changed-alert.message'))) {
+        updateConfig(
+          storageConfig,
+          setStorageConfig,
+          ['runtime', 'client', 'storage', 'dataStore'],
+          StorageAdapters[value as keyof typeof StorageAdapters],
+        );
+      }
+    },
+    [storageConfig, t],
+  );
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
+        <SettingsForm.Item title={t('settings.wireframe.label')} description={t('settings.wireframe.description')}>
+          <Input.Switch
+            disabled={!onSettingsChange}
+            checked={settings.wireframe}
+            onCheckedChange={handleWireframeChange}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item title={t('settings.trace-all.label')} description={t('settings.trace-all.description')}>
+          <Input.Switch disabled={!onSettingsChange} checked={traceAll} onCheckedChange={handleTraceAllChange} />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.tracing-panel.label')}
+          description={t('settings.tracing-panel.description')}
+        >
+          <IconButton
+            icon='ph--arrow-square-out--regular'
+            iconOnly
+            label={t('settings.tracing-panel.label')}
+            onClick={handleOpenTracingPanel}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.download-diagnostics.label')}
+          description={t('settings.download-diagnostics.description')}
+        >
+          <IconButton
+            icon='ph--download-simple--regular'
+            iconOnly
+            label={t('settings.download-diagnostics.label')}
+            onClick={handleDownload}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.download-logs.label')}
+          description={t('settings.download-logs.description')}
+        >
+          <IconButton
+            icon='ph--download-simple--regular'
+            iconOnly
+            label={t('settings.download-logs.label')}
+            onClick={handleDownloadLogs}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item title={t('settings.repair.label')} description={t('settings.repair.description')}>
+          <IconButton
+            icon='ph--first-aid-kit--regular'
+            iconOnly
+            label={t('settings.repair.label')}
+            onClick={handleRepair}
+          />
+        </SettingsForm.Item>
+
+        {/* TODO(burdon): Move to layout? */}
+        {toast && (
+          <Toast.Root>
+            <Toast.Body>
+              <Toast.Title>
+                <Icon icon='ph--gift--duotone' classNames='inline mr-1' />
+                <span>{toast.title}</span>
+              </Toast.Title>
+              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+            </Toast.Body>
+          </Toast.Root>
+        )}
+
+        <SettingsForm.Item
+          title={t('settings.choose-storage-adaptor.label')}
+          description={t('settings.choose-storage-adaptor.description')}
+        >
+          <Select.Root
+            disabled={!onSettingsChange}
+            value={
+              Object.entries(StorageAdapters).find(
+                ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+              )?.[0]
+            }
+            onValueChange={handleStorageAdapterChange}
+          >
+            <Select.TriggerButton disabled={!onSettingsChange} placeholder={t('settings.data-store.label')} />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {Object.keys(StorageAdapters).map((key) => (
+                    <Select.Option key={key} value={key}>
+                      {t(`settings.storage-adaptor.${key}.label`)}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+                <Select.Arrow />
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </SettingsForm.Item>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};
+
+const updateConfig = (config: ConfigProto, setConfig: (newConfig: ConfigProto) => void, path: string[], value: any) => {
+  const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
+  setDeep(storageConfigCopy, path, value);
+  setConfig(storageConfigCopy);
+  queueMicrotask(async () => {
+    await SaveConfig(storageConfigCopy);
+  });
+};

package/src/components/DebugSettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { DebugSettings as default } from './DebugSettings';

package/src/components/{SpaceGenerator → SchemaTable}/SchemaTable.tsx

@@ -19,8 +19,8 @@ export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTable
       <h2 className='p-2'>{label}</h2>
       {types.map((type) => (
         <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>
-          <div className='pli-2 text-sm font-mono text-subdued'>{type.typename}</div>
-          <div className='pli-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
+          <div className='px-2 text-sm font-mono text-subdued'>{type.typename}</div>
+          <div className='px-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
           <IconButton
             variant='ghost'
             icon='ph--plus--regular'

package/src/components/SchemaTable/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SchemaTable';

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -4,22 +4,23 @@
 
 import type * as Schema from 'effect/Schema';
 
-import { addressToA1Notation } from '@dxos/compute';
+import { addressToA1Notation } from '@dxos/compute-hyperformula';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { DXN, Filter, Key, type Type } from '@dxos/echo';
-import { type OperationInvoker } from '@dxos/operation';
+import { View } from '@dxos/echo';
+import { OperationInvoker } from '@dxos/operation';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { Sheet } from '@dxos/plugin-sheet/types';
-import { Diagram } from '@dxos/plugin-sketch/types';
-import { SpaceOperation } from '@dxos/plugin-space/types';
-import { faker } from '@dxos/random';
+import { Sketch } from '@dxos/plugin-sketch/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
+import { random } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { View, getTypenameFromQuery } from '@dxos/schema';
+import { getTypenameFromQuery } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
-const generator: ValueGenerator = faker as any;
+const generator: ValueGenerator = random as any;
 
 const findViewByTypename = async (views: View.View[], typename: string) => {
   return views.find((view) => getTypenameFromQuery(view.query.ast) === typename);
@@ -27,7 +28,7 @@ const findViewByTypename = async (views: View.View[], typename: string) => {
 
 export type ObjectGenerator<T> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
 
-export const createGenerator = <S extends Type.Obj.Any>(
+export const createGenerator = <S extends Type.AnyObj>(
   client: Client,
   invokePromise: OperationInvoker.OperationInvoker['invokePromise'],
   schema: S,
@@ -41,8 +42,6 @@ export const createGenerator = <S extends Type.Obj.Any>(
     const staticSchema = client?.graph.schemaRegistry.query({ typename }).runSync()[0];
     if (!view && !staticSchema) {
       await invokePromise(SpaceOperation.AddSchema, { db: space.db, schema, show: false });
-    } else if (!view && staticSchema) {
-      await invokePromise(SpaceOperation.UseStaticSchema, { db: space.db, typename, show: false });
     }
 
     // Create objects.
@@ -58,8 +57,8 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
       const objects = range(n).map(() => {
         return space.db.add(
           Markdown.make({
-            name: faker.commerce.productName(),
-            content: faker.lorem.sentences(5),
+            name: random.commerce.productName(),
+            content: random.lorem.sentences(5),
           }),
         );
       });
@@ -69,10 +68,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    Diagram.Diagram.typename,
+    Sketch.Sketch.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const obj = space.db.add(Diagram.make({ name: faker.commerce.productName() }));
+        const obj = space.db.add(Sketch.make({ name: random.commerce.productName() }));
         return obj;
       });
 
@@ -108,7 +107,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
         // TODO(burdon): Set formatting for columns.
         return space.db.add(
           Sheet.make({
-            name: faker.commerce.productName(),
+            name: random.commerce.productName(),
             cells,
           }),
         );

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

@@ -15,7 +15,7 @@ import {
 } from '@antv/layout';
 import { type Editor, type SerializedStore, type TLRecord, createBindingId, createShapeId } from '@tldraw/tldraw';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { isTruthy, range } from '@dxos/util';
 
 // TODO(burdon): Graph layout:
@@ -32,10 +32,10 @@ import { isTruthy, range } from '@dxos/util';
 // 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(),
+  const nodes = range(random.number.int({ min: 8, max: 32 })).map(() => ({
+    id: random.string.uuid(),
     data: {
-      label: faker.lorem
+      label: random.lorem
         .words(2)
         .split(' ')
         .map((word) => word.charAt(0).toUpperCase())
@@ -46,7 +46,7 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
   const unlinked = new Set(nodes.map((node) => node.id));
   const pop = () => {
     if (unlinked.size) {
-      const id = faker.helpers.arrayElement(Array.from(unlinked));
+      const id = random.helpers.arrayElement(Array.from(unlinked));
       unlinked.delete(id);
       return id;
     }
@@ -54,12 +54,12 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
 
   const edges: Edge<PlainObject>[] = [];
   const link = (source: string, target: string) => {
-    edges.push({ id: faker.string.uuid(), source, target, data: {} });
+    edges.push({ id: random.string.uuid(), source, target, data: {} });
   };
 
   const branching = 3;
   const traverse = (source: string) => {
-    const targets = range(faker.number.int({ min: 1, max: branching }))
+    const targets = range(random.number.int({ min: 1, max: branching }))
       .map(() => {
         const target = pop();
         if (target) {
@@ -106,7 +106,7 @@ export const drawGraph = async (
     preventOverlap: true,
   };
 
-  const layoutType = faker.helpers.arrayElement(['d3force', 'grid', 'radial']);
+  const layoutType = random.helpers.arrayElement(['d3force', 'grid', 'radial']);
   let layout: Layout<any>;
   switch (layoutType) {
     case 'd3force': {

package/src/components/SpaceGenerator/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { SpaceGenerator } from './SpaceGenerator';
-
-export default SpaceGenerator;
+export * from './presets';
+export * from './ObjectGenerator';