@dxos/plugin-debug 0.7.5-labs.5f04cf6 → 0.7.5-labs.e27f9b9

package/src/components/DebugSettings.tsx

@@ -2,16 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Gift, DownloadSimple, FirstAidKit } from '@phosphor-icons/react';
 import React, { useEffect, useState } from 'react';
 
 import { Capabilities, useCapabilities } from '@dxos/app-framework';
 import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { useTranslation, Button, Toast, Input, useFileDownload, Select } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { useTranslation, Button, Toast, Input, useFileDownload, Select, Icon } from '@dxos/react-ui';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
 import { DEBUG_PLUGIN } from '../meta';
@@ -79,73 +77,75 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
   };
 
   return (
-    <>
-      <DeprecatedFormInput label={t('settings show debug panel')}>
-        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings show devtools panel')}>
-        <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings wireframe')}>
-        <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings download diagnostics')}>
-        <Button onClick={handleDownload}>
-          <DownloadSimple className={getSize(5)} />
-        </Button>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings repair')}>
-        <Button onClick={handleRepair}>
-          <FirstAidKit className={getSize(5)} />
-        </Button>
-      </DeprecatedFormInput>
-
-      {/* TODO(burdon): Move to layout? */}
-      {toast && (
-        <Toast.Root>
-          <Toast.Body>
-            <Toast.Title>
-              <Gift className={mx(getSize(5), 'inline mr-1')} weight='duotone' />
-              <span>{toast.title}</span>
-            </Toast.Title>
-            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-          </Toast.Body>
-        </Toast.Root>
-      )}
-
-      <DeprecatedFormInput label={t('settings choose storage adaptor')}>
-        <Select.Root
-          value={
-            Object.entries(StorageAdapters).find(
-              ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-            )?.[0]
-          }
-          onValueChange={(value) => {
-            if (confirm(t('settings storage adapter changed alert'))) {
-              updateConfig(
-                storageConfig,
-                setStorageConfig,
-                ['runtime', 'client', 'storage', 'dataStore'],
-                StorageAdapters[value as keyof typeof StorageAdapters],
-              );
+    <DeprecatedFormContainer>
+      <DeprecatedFormContainer>
+        <DeprecatedFormInput label={t('settings show debug panel')}>
+          <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings show devtools panel')}>
+          <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings wireframe')}>
+          <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings download diagnostics')}>
+          <Button onClick={handleDownload}>
+            <Icon icon='ph--download-simple--regular' size={5} />
+          </Button>
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings repair')}>
+          <Button onClick={handleRepair}>
+            <Icon icon='ph--first-aid-kit--regular' size={5} />
+          </Button>
+        </DeprecatedFormInput>
+
+        {/* TODO(burdon): Move to layout? */}
+        {toast && (
+          <Toast.Root>
+            <Toast.Body>
+              <Toast.Title>
+                <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
+                <span>{toast.title}</span>
+              </Toast.Title>
+              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+            </Toast.Body>
+          </Toast.Root>
+        )}
+
+        <DeprecatedFormInput label={t('settings choose storage adaptor')}>
+          <Select.Root
+            value={
+              Object.entries(StorageAdapters).find(
+                ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+              )?.[0]
             }
-          }}
-        >
-          <Select.TriggerButton 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.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-    </>
+            onValueChange={(value) => {
+              if (confirm(t('settings storage adapter changed alert'))) {
+                updateConfig(
+                  storageConfig,
+                  setStorageConfig,
+                  ['runtime', 'client', 'storage', 'dataStore'],
+                  StorageAdapters[value as keyof typeof StorageAdapters],
+                );
+              }
+            }}
+          >
+            <Select.TriggerButton 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.Content>
+            </Select.Portal>
+          </Select.Root>
+        </DeprecatedFormInput>
+      </DeprecatedFormContainer>
+    </DeprecatedFormContainer>
   );
 };
 

package/src/components/DebugStatus.tsx

@@ -4,15 +4,14 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Capabilities, firstIdInPart, useCapability } from '@dxos/app-framework';
+import { useAppGraph, useLayout } from '@dxos/app-framework';
 import { TimeoutError } from '@dxos/async';
 import { StatsPanel, useStats } from '@dxos/devtools';
 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 { Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { Icon, Popover } from '@dxos/react-ui';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -136,9 +135,9 @@ const SwarmIndicator = () => {
 // TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
-  const location = useCapability(Capabilities.Location);
-  const { graph } = useCapability(Capabilities.AppGraph);
-  const _space = location && graph ? getActiveSpace(graph, firstIdInPart(location.active, 'main')) : undefined;
+  const layout = useLayout();
+  const { graph } = useAppGraph();
+  const _space = graph ? getActiveSpace(graph, layout.active[0]) : undefined;
   // TODO(dmaretskyi): Fix this when we have save status for automerge.
   // useEffect(() => {
   //   if (!space) {
@@ -186,22 +185,19 @@ const PerformanceIndicator = () => {
   const [stats, refreshStats] = useStats();
 
   return (
-    <>
-      <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
-        <Icon icon='ph--chart-bar--regular' size={4} />
-      </StatusBar.Button>
-      {visible && (
-        <div
-          className={mx(
-            'z-20 absolute bottom-[--statusbar-size] right-4 w-[450px]',
-            'overflow-x-hidden overflow-y-auto scrollbar-thin',
-            'border-x border-y border-separator',
-          )}
-        >
+    <Popover.Root open={visible} onOpenChange={setVisible}>
+      <Popover.Trigger asChild>
+        <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
+          <Icon icon='ph--chart-bar--regular' size={4} />
+        </StatusBar.Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content classNames='max-is-[min(var(--radix-popover-content-available-width),300px)] max-bs-[--radix-popover-content-available-height]'>
           <StatsPanel stats={stats} onRefresh={refreshStats} />
-        </div>
-      )}
-    </>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 };
 

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -5,8 +5,6 @@
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { ObjectId, type BaseObject, type TypedObject } from '@dxos/echo-schema';
-import { type FunctionTrigger, TriggerKind } from '@dxos/functions/types';
-import { invariant } from '@dxos/invariant';
 import { DXN, SpaceId } from '@dxos/keys';
 import { create, makeRef, type ReactiveObject } from '@dxos/live-object';
 import { DocumentType } from '@dxos/plugin-markdown/types';
@@ -15,23 +13,6 @@ import { SheetType, type CellValue } from '@dxos/plugin-sheet/types';
 import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
 import { faker } from '@dxos/random';
 import { Filter, type Space } from '@dxos/react-client/echo';
-import {
-  type ComputeShape,
-  createAppend,
-  createComputeGraph,
-  createConstant,
-  createGpt,
-  createQueue,
-  createText,
-  createTrigger,
-} from '@dxos/react-ui-canvas-compute';
-import {
-  pointMultiply,
-  pointsToRect,
-  rectToPoints,
-  CanvasBoardType,
-  CanvasGraphModel,
-} from '@dxos/react-ui-canvas-editor';
 import { TableType } from '@dxos/react-ui-table';
 import { createView, TextType } from '@dxos/schema';
 import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
@@ -155,70 +136,8 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
       return objects;
     },
   ],
-  [
-    CanvasBoardType.typename,
-    async (space, n, cb) => {
-      const objects = range(n, () => {
-        const canvasModel = CanvasGraphModel.create<ComputeShape>();
-
-        let functionTrigger: FunctionTrigger | undefined;
-        canvasModel.builder.call((builder) => {
-          const gpt = canvasModel.createNode(createGpt(position({ x: 0, y: -14 })));
-          const triggerShape = createTrigger({ triggerKind: TriggerKind.Webhook, ...position({ x: -18, y: -2 }) });
-          const trigger = canvasModel.createNode(triggerShape);
-          const text = canvasModel.createNode(createText(position({ x: 19, y: 3, width: 10, height: 10 })));
-          const queueId = canvasModel.createNode(
-            createConstant({
-              value: new DXN(DXN.kind.QUEUE, ['data', SpaceId.random(), ObjectId.random()]).toString(),
-              ...position({ x: -18, y: 5, width: 8, height: 6 }),
-            }),
-          );
-          const queue = canvasModel.createNode(createQueue(position({ x: -3, y: 3, width: 14, height: 10 })));
-          const append = canvasModel.createNode(createAppend(position({ x: 10, y: 6 })));
-
-          builder
-            .createEdge({ source: trigger.id, target: gpt.id, input: 'prompt', output: 'bodyText' })
-            .createEdge({ source: gpt.id, target: text.id, output: 'text' })
-            .createEdge({ source: queueId.id, target: queue.id })
-            .createEdge({ source: queueId.id, target: append.id, input: 'id' })
-            .createEdge({ source: gpt.id, target: append.id, output: 'messages', input: 'items' });
-
-          functionTrigger = triggerShape.functionTrigger!.target!;
-        });
-
-        const computeModel = createComputeGraph(canvasModel);
-        const computeGraph = computeModel.root;
-
-        invariant(functionTrigger);
-        functionTrigger.function = DXN.fromLocalObjectId(computeGraph.id).toString();
-        functionTrigger.meta ??= {};
-        const inputNode = computeModel.nodes.find((node) => node.type === NODE_INPUT)!;
-        functionTrigger.meta.computeNodeId = inputNode.id;
-
-        return space.db.add(
-          create(CanvasBoardType, {
-            computeGraph: makeRef(computeGraph),
-            layout: canvasModel.graph,
-          }),
-        );
-      });
-      cb?.(objects);
-      return objects;
-    },
-  ],
 ]);
 
-const position = (rect: { x: number; y: number; width?: number; height?: number }) => {
-  const snap = 32;
-  const [center, size] = rectToPoints({ width: 0, height: 0, ...rect });
-  const { x, y, width, height } = pointsToRect([pointMultiply(center, snap), pointMultiply(size, snap)]);
-  if (width && height) {
-    return { center: { x, y }, size: width && height ? { width, height } : undefined };
-  } else {
-    return { center: { x, y } };
-  }
-};
-
 export const createGenerator = <T extends BaseObject>(type: TypedObject<T>): ObjectGenerator<T> => {
   return async (
     space: Space,

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -12,13 +12,13 @@ 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 { CanvasBoardType } from '@dxos/react-ui-canvas-editor';
 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';
+import { presets } from './presets';
 
 export type SpaceGeneratorProps = {
   space: Space;
@@ -27,19 +27,19 @@ export type SpaceGeneratorProps = {
 
 export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
   const client = useClient();
-  const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph, CanvasBoardType]; // TODO(burdon): Make extensible.
-  const mutableTypes = [Testing.OrgType, Testing.ProjectType, Testing.ContactType];
+  const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
+  const mutableTypes = [Testing.OrgType, Testing.ProjectType, Testing.ContactType, Testing.EmailType];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
 
   // Create type generators.
   const typeMap = useMemo(() => {
-    client.addTypes(staticTypes);
+    client.addTypes([...staticTypes, ...presets.schemas]);
     const mutableGenerators = new Map<string, ObjectGenerator<any>>(
-      mutableTypes.map((type) => [type.typename, createGenerator(type)]),
+      mutableTypes.map((type) => [type.typename, createGenerator(type as any)]),
     );
 
-    return new Map([...staticGenerators, ...mutableGenerators]);
+    return new Map([...staticGenerators, ...presets.items, ...mutableGenerators]);
   }, [client, mutableTypes]);
 
   // Query space to get info.
@@ -106,6 +106,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
 
       <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} />
 
       <SyntaxHighlighter classNames='flex text-xs' language='json'>
         {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}