@dxos/plugin-sheet 0.6.12-main.15a606f → 0.6.12-main.2d19bf1

package/src/graph/{custom-function.ts → testing/test-plugin.ts}

@@ -8,14 +8,30 @@ import { type ProcedureAst } from 'hyperformula/typings/parser';
 import { getDeep } from '@dxos/util';
 
 import { FunctionArgumentType } from '#hyperformula';
-import { type AsyncFunction, FunctionPluginAsync } from './async-function';
-import { parseNumberString } from './util';
+import { type ComputeGraphPlugin } from '../compute-graph-registry';
+import { type AsyncFunction, AsyncFunctionPlugin } from '../functions';
+import { parseNumberString } from '../util';
 
 /**
+ * Testing functions run locally (not run via EDGE).
  * https://hyperformula.handsontable.com/guide/custom-functions.html#add-a-simple-custom-function
  */
-export class CustomPlugin extends FunctionPluginAsync {
+export class TestPlugin extends AsyncFunctionPlugin {
+  /**
+   * Simple local function returns input value.
+   */
   test(ast: ProcedureAst, state: InterpreterState) {
+    const handler: AsyncFunction = async (_value) => {
+      return _value;
+    };
+
+    return this.runAsyncFunction(ast, state, handler);
+  }
+
+  /**
+   * Simple local function returns random number.
+   */
+  random(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async () => {
       return Math.random();
     };
@@ -23,6 +39,9 @@ export class CustomPlugin extends FunctionPluginAsync {
     return this.runAsyncFunction(ast, state, handler);
   }
 
+  /**
+   * Async HTTP function.
+   */
   crypto(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async (_currency) => {
       const currency = (_currency || 'USD').toUpperCase();
@@ -40,9 +59,15 @@ export class CustomPlugin extends FunctionPluginAsync {
   }
 }
 
-CustomPlugin.implementedFunctions = {
+TestPlugin.implementedFunctions = {
   TEST: {
     method: 'test',
+    parameters: [{ argumentType: FunctionArgumentType.NUMBER, optionalArg: false }],
+    isVolatile: true,
+  },
+
+  RANDOM: {
+    method: 'random',
     parameters: [],
     isVolatile: true,
   },
@@ -54,13 +79,22 @@ CustomPlugin.implementedFunctions = {
   },
 };
 
-export const CustomPluginTranslations = {
+export const TestPluginTranslations = {
   enGB: {
-    TEST: 'TEST',
-    CRYPTO: 'CRYPTO',
+    TEST: 'Returns input value',
+    RANDOM: 'Random number',
+    CRYPTO: 'Crypto token value',
   },
   enUS: {
-    TEST: 'TEST',
-    CRYPTO: 'CRYPTO',
+    TEST: 'Returns input value',
+    RANDOM: 'Random number',
+    CRYPTO: 'Crypto token value',
   },
 };
+
+export const testFunctionPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: TestPlugin,
+    translations: TestPluginTranslations,
+  },
+];

package/src/hooks/hooks.stories.tsx

@@ -14,14 +14,14 @@ import { withTheme } from '@dxos/storybook-utils';
 import { ComputeGraphContextProvider } from '../components';
 import { createSheet } from '../defs';
 import { useComputeGraph, useSheetModel } from '../hooks';
-import { withGraphDecorator } from '../testing';
+import { withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 
 const Story = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const [sheet, setSheet] = useState<SheetType>();
-  const model = useSheetModel(space, sheet);
+  const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (space) {
       const sheet = space.db.add(createSheet());
@@ -41,7 +41,7 @@ export default {
   component: ComputeGraphContextProvider,
   decorators: [
     withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator(),
     withTheme,
   ],
   render: (args: any) => <Story {...args} />,

package/src/hooks/index.ts

@@ -5,3 +5,4 @@
 export * from './useComputeGraph';
 export * from './useFormattingModel';
 export * from './useSheetModel';
+export * from './threads';

package/src/{components/Sheet/threads.tsx → hooks/threads.ts}

@@ -3,82 +3,21 @@
 //
 
 import { effect } from '@preact/signals-core';
-import React, { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
+import { type MutableRefObject, useCallback, useEffect, useMemo } from 'react';
 
 import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
+import { type DxGridElement, type DxGridPosition } from '@dxos/react-ui-grid';
 
-import { type Decoration } from './decorations';
-import { useSheetContext } from './sheet-context';
-import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../defs';
-import { SHEET_PLUGIN } from '../../meta';
-
-// TODO(burdon): Move into folder; split hooks.
-
-const CommentIndicator = () => {
-  return (
-    <div
-      role='none'
-      className='absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent'
-    />
-  );
-};
-
-const ThreadedCellWrapper = ({ children }: PropsWithChildren) => {
-  const dispatch = useIntentDispatcher();
-  const [isHovered, setIsHovered] = React.useState(false);
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  const handleClick = React.useCallback(
-    (_event: React.MouseEvent) => {
-      void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'complementary', state: true } });
-    },
-    [dispatch],
-  );
-
-  return (
-    <div
-      role='none'
-      className='relative h-full is-full'
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}
-    >
-      <CommentIndicator />
-      {isHovered && (
-        <div className='absolute inset-0 flex items-center justify-end pr-1'>
-          <button
-            className='ch-button text-xs min-bs-0 p-1'
-            onClick={handleClick}
-            aria-label={t('open comment for sheet cell')}
-          >
-            <Icon icon='ph--chat--regular' aria-hidden={true} />
-          </button>
-        </div>
-      )}
-      {children}
-    </div>
-  );
-};
-
-const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
-  return {
-    type: 'comment',
-    cellIndex,
-    decorate: (props) => <ThreadedCellWrapper {...props} />,
-  };
-};
-
-// TODO(burdon): Factor out hooks.
-
-const useUpdateCursorOnThreadSelection = () => {
-  const { setCursor, model } = useSheetContext();
+import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../defs';
+import { SHEET_PLUGIN } from '../meta';
+import { type SheetModel, type Decoration, type Decorations } from '../model';
 
+export const useUpdateFocusedCellOnThreadSelection = (
+  model: SheetModel,
+  grid: MutableRefObject<DxGridElement | null>,
+) => {
   const handleScrollIntoView: IntentResolver = useCallback(
     ({ action, data }) => {
       switch (action) {
@@ -89,18 +28,17 @@ const useUpdateCursorOnThreadSelection = () => {
 
           // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
           const cellAddress = addressFromIndex(model.sheet, data.cursor);
-          setCursor(cellAddress);
+          grid.current?.setFocus({ ...cellAddress, plane: 'grid' }, true);
         }
       }
     },
-    [model.sheet, setCursor],
+    [model.sheet],
   );
 
   useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
 };
 
-const useSelectThreadOnCursorChange = () => {
-  const { cursor, model } = useSheetContext();
+export const useSelectThreadOnCellFocus = (model: SheetModel, cursor?: CellAddress) => {
   const dispatch = useIntentDispatcher();
 
   const activeThreads = useMemo(
@@ -108,7 +46,10 @@ const useSelectThreadOnCursorChange = () => {
       model.sheet.threads?.filter(
         (thread): thread is NonNullable<typeof thread> => !!thread && thread.status === 'active',
       ) ?? [],
-    [JSON.stringify(model.sheet.threads)],
+    [
+      // TODO(thure): Surely we can find a better dependency for this…
+      JSON.stringify(model.sheet.threads),
+    ],
   );
 
   const activeThreadAddresses = useMemo(
@@ -143,7 +84,7 @@ const useSelectThreadOnCursorChange = () => {
   );
 
   const debounced = useMemo(() => {
-    return debounce((cursor: CellAddress) => requestAnimationFrame(() => selectClosestThread(cursor)), 50);
+    return debounce((cellCoords: DxGridPosition) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
   }, [selectClosestThread]);
 
   useEffect(() => {
@@ -154,8 +95,15 @@ const useSelectThreadOnCursorChange = () => {
   }, [cursor, selectClosestThread]);
 };
 
-const useThreadDecorations = () => {
-  const { decorations, model } = useSheetContext();
+const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
+  return {
+    type: 'comment',
+    classNames: ['bg-greenFill'],
+    cellIndex,
+  };
+};
+
+export const useThreadDecorations = (model: SheetModel, decorations: Decorations) => {
   const sheet = useMemo(() => model.sheet, [model.sheet]);
   const sheetId = useMemo(() => fullyQualifiedId(sheet), [sheet]);
 
@@ -197,9 +145,3 @@ const useThreadDecorations = () => {
     return () => unsubscribe();
   });
 };
-
-export const useThreads = () => {
-  useUpdateCursorOnThreadSelection();
-  useSelectThreadOnCursorChange();
-  useThreadDecorations();
-};

package/src/hooks/useComputeGraph.ts

@@ -16,5 +16,13 @@ import { type ComputeGraph } from '../graph';
  */
 export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
   const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
-  return useAsyncState(async () => space && registry.getOrCreateGraph(space), [space, registry]);
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph = registry.getOrCreateGraph(space);
+      await graph.open();
+      return graph;
+    }
+  }, [space, registry]);
+
+  return graph;
 };

package/src/hooks/useSheetModel.ts

@@ -4,9 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { type Space } from '@dxos/react-client/echo';
-
-import { useComputeGraph } from './useComputeGraph';
+import { type ComputeGraph } from '../graph';
 import { SheetModel } from '../model';
 import { type SheetType } from '../types';
 
@@ -15,14 +13,13 @@ export type UseSheetModelOptions = {
 };
 
 export const useSheetModel = (
-  space?: Space,
+  graph?: ComputeGraph,
   sheet?: SheetType,
   { readonly }: UseSheetModelOptions = {},
 ): SheetModel | undefined => {
-  const graph = useComputeGraph(space);
   const [model, setModel] = useState<SheetModel>();
   useEffect(() => {
-    if (!space || !graph || !sheet) {
+    if (!graph || !sheet) {
       return;
     }
 
@@ -37,7 +34,7 @@ export const useSheetModel = (
       clearTimeout(t);
       void model?.close();
     };
-  }, [space, sheet, graph, readonly]);
+  }, [graph, sheet, readonly]);
 
   return model;
 };

package/src/{meta.tsx → meta.ts}

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { pluginMeta } from '@dxos/app-framework';
+import { type PluginMeta } from '@dxos/app-framework';
 
 export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
 
-export default pluginMeta({
+export default {
   id: SHEET_PLUGIN,
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
   icon: 'ph--grid-nine--regular',
-});
+} satisfies PluginMeta;

package/src/{components/Sheet → model}/decorations.ts

@@ -60,3 +60,5 @@ export const createDecorations = () => {
     getAllDecorations,
   } as const;
 };
+
+export type Decorations = ReturnType<typeof createDecorations>;

package/src/model/formatting-model.ts

@@ -3,17 +3,20 @@
 //
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
+import { FieldValueType } from '@dxos/schema';
 
 import { type SheetModel } from './sheet-model';
 import { type CellAddress, inRange } from '../defs';
 import { addressToIndex, rangeFromIndex } from '../defs';
-import { ValueTypeEnum } from '../types';
 
 export type CellFormat = {
   value?: string;
   classNames?: ClassNameValue;
 };
 
+/**
+ * @deprecated See react-ui-data.
+ */
 export class FormattingModel {
   constructor(private readonly _model: SheetModel) {}
 
@@ -31,7 +34,7 @@ export class FormattingModel {
 
     // Cell-specific formatting.
     const idx = addressToIndex(this._model.sheet, cell);
-    let formatting = this._model.sheet.formatting?.[idx] ?? {};
+    let formatting = this._model.sheet.formatting.find?.(({ range }) => range === idx);
     const classNames = [...(formatting?.classNames ?? [])];
 
     // Range formatting.
@@ -55,7 +58,7 @@ export class FormattingModel {
 
     const type = formatting?.type ?? this._model.getValueType(cell);
     switch (type) {
-      case ValueTypeEnum.Boolean: {
+      case FieldValueType.Boolean: {
         return {
           value: (value as boolean).toLocaleString().toUpperCase(),
           classNames: [...classNames, value ? '!text-greenText' : '!text-orangeText'],
@@ -66,15 +69,15 @@ export class FormattingModel {
       // Numbers.
       //
 
-      case ValueTypeEnum.Number: {
+      case FieldValueType.Number: {
         return { value: value.toLocaleString(locales), classNames: [...classNames, defaultNumber] };
       }
 
-      case ValueTypeEnum.Percent: {
+      case FieldValueType.Percent: {
         return { value: (value as number) * 100 + '%', classNames: [...classNames, defaultNumber] };
       }
 
-      case ValueTypeEnum.Currency: {
+      case FieldValueType.Currency: {
         return {
           value: (value as number).toLocaleString(locales, {
             style: 'currency',
@@ -90,17 +93,17 @@ export class FormattingModel {
       // Dates.
       //
 
-      case ValueTypeEnum.DateTime: {
+      case FieldValueType.DateTime: {
         const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleString(locales), classNames };
       }
 
-      case ValueTypeEnum.Date: {
+      case FieldValueType.Date: {
         const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleDateString(locales), classNames };
       }
 
-      case ValueTypeEnum.Time: {
+      case FieldValueType.Time: {
         const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleTimeString(locales), classNames };
       }

package/src/model/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './decorations';
 export * from './formatting-model';
 export * from './sheet-model';

package/src/model/sheet-model.test.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { FunctionType } from '@dxos/plugin-script/types';
+
+import { SheetModel } from './sheet-model';
+import { addressFromA1Notation, createSheet } from '../defs';
+import { TestBuilder, testFunctionPlugins } from '../graph/testing';
+import { type CellScalarValue } from '../types';
+
+describe('SheetModel', () => {
+  let testBuilder: TestBuilder;
+  beforeEach(async () => {
+    testBuilder = new TestBuilder({ types: [FunctionType], plugins: testFunctionPlugins });
+    await testBuilder.open();
+  });
+  afterEach(async () => {
+    await testBuilder.close();
+  });
+
+  test('async function', async () => {
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+    await graph.open();
+
+    // TODO(burdon): Create via factory.
+    const sheet = createSheet({ rows: 5, columns: 5 });
+    const model = new SheetModel(graph, sheet);
+    await model.open();
+    testBuilder.ctx.onDispose(() => model.close());
+
+    // Trigger waits for function invocation.
+    const trigger = new Trigger<CellScalarValue>();
+    model.setValue(addressFromA1Notation('A1'), '=TEST(100)');
+    model.update.once((update) => {
+      const { type } = update;
+      if (type === 'valuesUpdated') {
+        const value = model.getValue(addressFromA1Notation('A1'));
+        trigger.wake(value);
+      }
+    });
+
+    // Initial value will be null.
+    const v1 = model.getValue(addressFromA1Notation('A1'));
+    expect(v1).to.be.null;
+    expect(graph.context.info.invocations.TEST).not.to.exist;
+
+    // Wait until async update triggered.
+    const v2 = await trigger.wait();
+    expect(v2).to.eq(100);
+    expect(graph.context.info.invocations.TEST).to.eq(1);
+  });
+});