@dxos/plugin-space 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/src/components/SyncStatus/SyncStatus.stories.tsx

@@ -1,40 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { SyncStatusIndicator } from './SyncStatus';
-
-const meta = {
-  title: 'plugins/plugin-space/SyncStatusIndicator',
-  component: SyncStatusIndicator,
-  decorators: [withTheme(), withClientProvider({ createIdentity: true })],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-} satisfies Meta<typeof SyncStatusIndicator>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    state: {},
-    saved: true,
-  },
-};
-
-export const Saving: Story = {
-  args: {
-    state: {},
-    saved: false,
-  },
-};

package/src/components/SyncStatus/SyncStatus.tsx

@@ -1,155 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { StatusBar } from '@dxos/plugin-status-bar';
-import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
-import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
-import { useClient } from '@dxos/react-client';
-import { useStream } from '@dxos/react-client/devtools';
-import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
-import { Icon, Popover, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-import { Unit, type UnitFormat } from '@dxos/util';
-
-import { meta } from '../../meta';
-
-import { createClientSaveTracker } from './save-tracker';
-import { getIcon, getStatus } from './status';
-
-const SYNC_STALLED_TIMEOUT = 5_000;
-
-export const SyncStatus = () => {
-  const client = useClient();
-  const state = useSyncState();
-  const [saved, setSaved] = useState(true);
-  useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);
-
-  return <SyncStatusIndicator state={state} saved={saved} />;
-};
-
-export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
-  const { t } = useTranslation(meta.id);
-  const summary = getSyncSummary(state);
-  const offline = Object.values(state).length === 0;
-  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
-  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
-  const status = getStatus({ offline, saved, needsToUpload, needsToDownload });
-
-  const [classNames, setClassNames] = useState<string>();
-  useEffect(() => {
-    setClassNames(undefined);
-    if (offline || (!needsToUpload && !needsToDownload)) {
-      return;
-    }
-
-    const t = setTimeout(() => {
-      // TODO(wittjosiah): Use semantic color tokens.
-      setClassNames('text-orange-500');
-    }, SYNC_STALLED_TIMEOUT);
-    return () => clearTimeout(t);
-  }, [offline, needsToUpload, needsToDownload]);
-
-  const title = t(`${status} label`);
-  const icon = <Icon icon={getIcon(status)} classNames={classNames} />;
-
-  return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content>
-          <EdgeConnectionPopover />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};
-
-const useEdgeStatus = (): EdgeStatus | undefined => {
-  const client = useClient();
-  const { status } = useStream(
-    () => client.services.services.EdgeAgentService!.queryEdgeStatus(),
-    {} as QueryEdgeStatusResponse,
-  );
-  return status;
-};
-
-const EdgeConnectionPopover = () => {
-  const status = useEdgeStatus();
-  const { t } = useTranslation(meta.id);
-
-  const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
-
-  return (
-    <div className='min-is-[240px] p-2'>
-      {/* Connection Status Header */}
-      <div className='flex items-center gap-2 mbe-2'>
-        <Icon
-          icon={isConnected ? 'ph--check-circle--regular' : 'ph--warning-circle--regular'}
-          classNames={mx(isConnected ? 'text-successText' : 'text-errorText animate-pulse')}
-        />
-        <span className='font-medium text-sm'>
-          {isConnected ? t('sync edge connected label') : t('sync edge disconnected label')}
-        </span>
-      </div>
-
-      {/* Connection Details */}
-      {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (
-        <div className='flex items-center gap-2 text-sm text-description'>
-          <Icon icon='ph--cloud-x--regular' />
-          <span>{t('sync no connection label')}</span>
-        </div>
-      )}
-
-      {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
-        <div className='space-y-2'>
-          {/* Latency */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-description'>
-              <Icon icon='ph--timer--regular' />
-              <span>{t('sync latency label')}</span>
-            </div>
-            <UnitValue value={status.rtt} format={Unit.Millisecond} />
-          </div>
-
-          {/* Upload Speed */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-description'>
-              <Icon icon='ph--arrow-up--regular' />
-              <span>{t('sync upload label')}</span>
-            </div>
-            <UnitValue value={status.rateBytesUp} format={Unit.Kilobyte} suffix='/s' />
-          </div>
-
-          {/* Download Speed */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-sm text-description'>
-              <Icon icon='ph--arrow-down--regular' />
-              <span>{t('sync download label')}</span>
-            </div>
-            <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-// TODO(burdon): Factor out.
-const UnitValue = ({ value: input, format, suffix }: { value: number; format: UnitFormat; suffix?: string }) => {
-  const { formattedValue, unit } = format(input);
-  return (
-    <span className='font-mono'>
-      {formattedValue}
-      <span className='mis-1 text-subdued'>
-        {unit.symbol}
-        {suffix}
-      </span>
-    </span>
-  );
-};

package/src/components/ViewEditor.tsx

@@ -1,101 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-import React, { useCallback, useState } from 'react';
-
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
-import { type Mutable } from '@dxos/echo/internal';
-import { useClient } from '@dxos/react-client';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { useAsyncEffect } from '@dxos/react-ui';
-import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
-import { View } from '@dxos/schema';
-
-import { resolveSchemaWithRegistry } from '../helpers';
-import { useTypeOptions } from '../hooks';
-import { SpaceOperation } from '../types';
-
-export type ViewEditorProps = { view: View.View };
-
-export const ViewEditor = ({ view }: ViewEditorProps) => {
-  const { invokePromise } = useOperationInvoker();
-  const client = useClient();
-  const space = getSpace(view);
-  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
-  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
-  const types = useTypeOptions({
-    space,
-    annotation: {
-      location: ['database', 'runtime'],
-      kind: ['user'],
-      registered: ['registered'],
-    },
-  });
-
-  useAsyncEffect(async () => {
-    if (!view?.query || !space) {
-      return;
-    }
-
-    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
-    if (foundSchema && foundSchema !== schema) {
-      setSchema(() => foundSchema);
-    }
-  }, [client, space, view, schema]);
-
-  const handleQueryChanged = useCallback(
-    async (newQuery: QueryAST.Query, target?: string) => {
-      if (!view || !space) {
-        return;
-      }
-
-      const queue = target && DXN.tryParse(target) ? target : undefined;
-      const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-      Obj.change(view, (v) => {
-        v.query.ast = query.ast as Mutable<typeof query.ast>;
-      });
-      const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
-      if (!newSchema) {
-        return;
-      }
-
-      const newView = View.make({
-        query,
-        jsonSchema: Type.toJsonSchema(newSchema),
-      });
-      Obj.change(view, (v) => {
-        v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
-      });
-
-      setSchema(() => newSchema);
-    },
-    [view, schema],
-  );
-
-  const handleDelete = useCallback(
-    (fieldId: string) => {
-      void invokePromise(SpaceOperation.DeleteField, { view, fieldId });
-    },
-    [invokePromise, view],
-  );
-
-  if (!space || !schema) {
-    return null;
-  }
-
-  return (
-    <NaturalViewEditor
-      registry={space.db.schemaRegistry}
-      schema={schema}
-      view={view}
-      mode='tag'
-      tags={tags}
-      types={types}
-      onQueryChanged={handleQueryChanged}
-      onDelete={Type.isMutable(schema) ? handleDelete : undefined}
-    />
-  );
-};

package/src/helpers/index.ts

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

package/src/helpers/query.test.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { describe, expect, it } from 'vitest';
-
-import { evalQuery } from './query';
-
-describe('evalQuery', () => {
-  it('should evaluate a query string', () => {
-    const query = evalQuery('Query.select(Filter.type(Person.Person))');
-    expect(query.ast).toMatchInlineSnapshot(`
-      {
-        "filter": {
-          "id": undefined,
-          "props": {},
-          "type": "object",
-          "typename": "dxn:type:dxos.org/type/Person:0.1.0",
-        },
-        "type": "select",
-      }
-    `);
-  });
-});

package/src/helpers/query.ts

@@ -1,153 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Array from 'effect/Array';
-import * as Effect from 'effect/Effect';
-import * as EffectFunction from 'effect/Function';
-import * as Match from 'effect/Match';
-import * as Option from 'effect/Option';
-import type * as Schema from 'effect/Schema';
-import * as SchemaAST from 'effect/SchemaAST';
-
-import { DXN, Filter, Query, type QueryAST, type SchemaRegistry } from '@dxos/echo';
-import {
-  ReferenceAnnotationId,
-  type ReferenceAnnotationValue,
-  getTypeAnnotation,
-  unwrapOptional,
-} from '@dxos/echo/internal';
-import { runAndForwardErrors } from '@dxos/effect';
-import { log } from '@dxos/log';
-import { type Space } from '@dxos/react-client/echo';
-import { Person } from '@dxos/types';
-
-// TODO(wittjosiah): Factor out and add tests.
-// TODO(wittjosiah): Support arbitrary type imports.
-export const evalQuery = (queryString: string): Query.Any => {
-  const globals = { Query, Filter, Person };
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-implied-eval
-    return new Function(...Object.keys(globals), `return ${queryString}`)(...Object.values(globals));
-  } catch (err) {
-    log.catch(err);
-    return Query.select(Filter.nothing());
-  }
-};
-
-export const resolveSchemaWithRegistry = (registry: SchemaRegistry.SchemaRegistry, query: QueryAST.Query) => {
-  const resolve = Effect.fn(function* (dxn: string) {
-    const typename = DXN.parse(dxn).asTypeDXN()?.type;
-    if (!typename) {
-      return Option.none();
-    }
-
-    const query = registry.query({ typename, location: ['database', 'runtime'] });
-    const schemas = yield* Effect.promise(() => query.run());
-    return Array.head(schemas);
-  });
-
-  return resolveSchema(query, resolve).pipe(
-    Effect.map((schema) => Option.getOrUndefined(schema)),
-    runAndForwardErrors,
-  );
-};
-
-const resolveSchema = (
-  query: QueryAST.Query,
-  resolve: (dxn: string) => Effect.Effect<Option.Option<Schema.Schema.AnyNoContext>>,
-): Effect.Effect<Option.Option<Schema.Schema.AnyNoContext>> => {
-  return Match.value(query).pipe(
-    Match.withReturnType<Effect.Effect<Option.Option<Schema.Schema.AnyNoContext>>>(),
-    // TODO(wittjosiah): Reconcile with filter match?
-    Match.when({ type: 'select' }, ({ filter }) =>
-      typenameFromFilter(filter).pipe(
-        Option.map((typename) => resolve(typename)),
-        Option.getOrElse(() => Effect.succeed(Option.none<Schema.Schema.AnyNoContext>())),
-      ),
-    ),
-    Match.when({ type: 'filter' }, ({ filter }) =>
-      typenameFromFilter(filter).pipe(
-        Option.map((typename) => resolve(typename)),
-        Option.getOrElse(() => Effect.succeed(Option.none<Schema.Schema.AnyNoContext>())),
-      ),
-    ),
-    Match.when({ type: 'reference-traversal' }, ({ anchor, property }) =>
-      resolveSchema(anchor, resolve).pipe(
-        Effect.map((base) =>
-          base.pipe(
-            Option.map((schema) => SchemaAST.getPropertySignatures(schema.ast)),
-            Option.flatMap((properties) => Array.findFirst(properties, (p) => p.name === property)),
-            Option.flatMap((property) =>
-              SchemaAST.getAnnotation<ReferenceAnnotationValue>(ReferenceAnnotationId)(unwrapOptional(property)),
-            ),
-            Option.map((annotation) => annotation.typename),
-          ),
-        ),
-        Effect.flatMap(
-          Option.match({
-            onNone: () => Effect.succeed(Option.none()),
-            onSome: (typename) => resolve(DXN.fromTypename(typename).toString()),
-          }),
-        ),
-      ),
-    ),
-    Match.when({ type: 'relation', filter: Match.defined }, ({ filter }) =>
-      typenameFromFilter(filter).pipe(
-        Option.map((typename) => resolve(typename)),
-        Option.getOrElse(() => Effect.succeed(Option.none<Schema.Schema.AnyNoContext>())),
-      ),
-    ),
-    Match.when({ type: 'relation-traversal' }, ({ anchor, direction }) =>
-      resolveSchema(anchor, resolve).pipe(
-        Effect.map((base) =>
-          base.pipe(
-            Option.map((schema) => getTypeAnnotation(schema)),
-            Option.flatMap((annotation) =>
-              Option.fromNullable(direction === 'source' ? annotation?.sourceSchema : annotation?.targetSchema),
-            ),
-          ),
-        ),
-        Effect.flatMap(
-          Option.match({
-            onNone: () => Effect.succeed(Option.none()),
-            onSome: (typename) => resolve(typename),
-          }),
-        ),
-      ),
-    ),
-    Match.when({ type: 'options' }, ({ query }) => resolveSchema(query, resolve)),
-    Match.orElse((_q) => {
-      // TODO(wittjosiah): Implement other cases.
-      return Effect.succeed(Option.none());
-    }),
-  );
-};
-
-const typenameFromFilter = (filter: QueryAST.Filter): Option.Option<string> =>
-  Match.value(filter).pipe(
-    Match.withReturnType<Option.Option<string>>(),
-    Match.when({ type: 'object' }, ({ typename }) => Option.fromNullable(typename)),
-    Match.when({ type: 'and' }, ({ filters }) =>
-      EffectFunction.pipe(filters, Array.map(typenameFromFilter), Array.findFirst(Option.isSome), Option.flatten),
-    ),
-    Match.when({ type: 'or' }, ({ filters }) =>
-      EffectFunction.pipe(filters, Array.map(typenameFromFilter), Array.findFirst(Option.isSome), Option.flatten),
-    ),
-    Match.orElse(() => Option.none()),
-  );
-
-// TODO(wittjosiah): Currently assumes options is at the top-level of the ast.
-export const getQueryTarget = (query: QueryAST.Query, space?: Space) => {
-  return Match.value(query).pipe(
-    Match.when({ type: 'options' }, ({ options }) => {
-      return Option.fromNullable(options.queues).pipe(
-        Option.flatMap((queues) => Array.head(queues)),
-        Option.flatMap((queueDxn) => Option.fromNullable(DXN.tryParse(queueDxn))),
-        Option.flatMap((queueDxn) => Option.fromNullable(space?.queues.get(queueDxn))),
-        Option.getOrElse(() => space?.db),
-      );
-    }),
-    Match.orElse(() => space?.db),
-  );
-};

package/src/hooks/useActiveSpace.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capabilities, type CapabilityManager } from '@dxos/app-framework';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { useLayout } from '@dxos/app-toolkit/ui';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { parseId, useSpace } from '@dxos/react-client/echo';
-
-export const getActiveSpace = (capabilities: CapabilityManager.CapabilityManager) => {
-  const client = capabilities.get(ClientCapabilities.Client);
-  const registry = capabilities.get(Capabilities.AtomRegistry);
-  const layoutAtom = capabilities.get(AppCapabilities.Layout);
-  const layout = registry.get(layoutAtom);
-  const { spaceId } = parseId(layout.workspace);
-  return spaceId ? client.spaces.get(spaceId) : undefined;
-};
-
-export const useActiveSpace = () => {
-  const layout = useLayout();
-  const { spaceId } = parseId(layout.workspace);
-  return useSpace(spaceId);
-};

package/src/hooks/useTypeOptions.ts

@@ -1,25 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useMemo } from 'react';
-
-import { type Space } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-
-import { type TypeInputOptions, getTypenames } from '../types';
-
-export const useTypeOptions = ({ space, annotation }: { space?: Space; annotation: TypeInputOptions }) => {
-  const { t } = useTranslation();
-  const typenames = getTypenames({ annotation, space });
-  return useMemo(
-    () =>
-      typenames
-        .map((typename) => ({
-          value: typename,
-          label: t('typename label', { ns: typename, defaultValue: typename }),
-        }))
-        .toSorted((a, b) => a.label.localeCompare(b.label)),
-    [t, typenames],
-  );
-};