@dxos/plugin-sheet 0.6.12-main.f9d0246 → 0.6.12-staging.0b4bb48

package/src/SheetPlugin.tsx

@@ -2,70 +2,84 @@
 // Copyright 2023 DXOS.org
 //
 
-import { GridNine } from '@phosphor-icons/react';
+import { type IconProps, GridNine } from '@phosphor-icons/react';
 import React from 'react';
 
-import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
+import {
+  NavigationAction,
+  parseIntentPlugin,
+  resolvePlugin,
+  type PluginDefinition,
+  type LayoutCoordinate,
+} from '@dxos/app-framework';
+import { create } from '@dxos/echo-schema';
 import { parseClientPlugin } from '@dxos/plugin-client';
-import { createExtension, isActionGroup, type ActionGroup } from '@dxos/plugin-graph';
+import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space';
 import { getSpace, isEchoObject } from '@dxos/react-client/echo';
 
-import { ComputeGraphContextProvider, SheetContainer } from './components';
-import { compareIndexPositions, createSheet } from './defs';
-import { type ComputeGraphRegistry } from './graph';
-import { useComputeGraph } from './hooks';
+import {
+  createComputeGraph,
+  CustomPlugin,
+  CustomPluginTranslations,
+  SheetContainer,
+  type ComputeGraph,
+} from './components';
+// TODO(wittjosiah): Refactor. These are not exported from ./components due to depending on ECHO.
+import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './components/ComputeGraph/edge-function';
+import { ComputeGraphContextProvider } from './components/ComputeGraph/graph-context';
 import meta, { SHEET_PLUGIN } from './meta';
+import { SheetModel } from './model';
 import translations from './translations';
-import { SheetAction, SheetType, type SheetPluginProvides } from './types';
+import { createSheet, SheetAction, type SheetPluginProvides, SheetType } from './types';
 
 export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let graphRegistry: ComputeGraphRegistry | undefined;
+  let remoteFunctionUrl: string | undefined;
+
+  const graphs = create<Record<string, ComputeGraph>>({});
+  const setGraph = (key: string, graph: ComputeGraph) => {
+    graphs[key] = graph;
+  };
 
   return {
     meta,
     ready: async (plugins) => {
       const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      invariant(client);
-      let remoteFunctionUrl: string | undefined;
+      if (!client) {
+        return;
+      }
+
       if (client.config.values.runtime?.services?.edge?.url) {
         const url = new URL('/functions', client.config.values.runtime?.services?.edge?.url);
         url.protocol = 'https';
         remoteFunctionUrl = url.toString();
       }
-
-      // Async import removes direct dependency on hyperformula.
-      const { ComputeGraphRegistry } = await import('./graph');
-      graphRegistry = new ComputeGraphRegistry({ remoteFunctionUrl });
     },
     provides: {
       context: ({ children }) => {
-        invariant(graphRegistry);
-        return <ComputeGraphContextProvider registry={graphRegistry}>{children}</ComputeGraphContextProvider>;
+        return (
+          <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
+            {children}
+          </ComputeGraphContextProvider>
+        );
       },
       metadata: {
         records: {
           [SheetType.typename]: {
-            label: (object: any) => (object instanceof SheetType ? object.name : undefined),
+            label: (object: any) => (object instanceof SheetType ? object.title : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
-            icon: 'ph--grid-nine--regular',
+            icon: (props: IconProps) => <GridNine {...props} />,
+            iconSymbol: 'ph--grid-nine--regular',
           },
         },
       },
       translations,
       echo: {
         // TODO(wittjosiah): Factor out to common package/plugin.
-        //  FunctionType is currently registered here in case script plugin isn't enabled.
+        //   FunctionType is currently registered here in case script plugin isn't enabled.
         schema: [SheetType, FunctionType],
       },
-      space: {
-        onSpaceCreate: {
-          label: ['create sheet label', { ns: SHEET_PLUGIN }],
-          action: SheetAction.CREATE,
-        },
-      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -99,7 +113,8 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
                   },
                   properties: {
                     label: ['create sheet label', { ns: SHEET_PLUGIN }],
-                    icon: 'ph--grid-nine--regular',
+                    icon: (props: IconProps) => <GridNine {...props} />,
+                    iconSymbol: 'ph--grid-nine--regular',
                     testId: 'sheetPlugin.createObject',
                   },
                 },
@@ -108,15 +123,6 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           });
         },
       },
-      markdown: {
-        // TODO(burdon): Facet to get current space/compute graph.
-        extensions: ({ document }) => {
-          return undefined;
-          // return [
-          // compute(document)
-          // ];
-        },
-      },
       stack: {
         creators: [
           {
@@ -132,20 +138,23 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           },
         ],
       },
-      thread: {
-        predicate: (data) => data instanceof SheetType,
-        createSort: (sheet) => (indexA, indexB) =>
-          !indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB),
-      },
       surface: {
-        component: ({ data, role }) => {
-          const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
-          const graph = useComputeGraph(space);
-          if (graph && data.object instanceof SheetType) {
+        component: ({ data, role = 'never' }) => {
+          // TODO(burdon): Standardize wrapper (with room for toolbar).
+          const space = isEchoObject(data.object) && getSpace(data.object);
+          if (space && data.object instanceof SheetType) {
             switch (role) {
               case 'article':
               case 'section': {
-                return <SheetContainer graph={graph} sheet={data.object} role={role} />;
+                return (
+                  <SheetContainer
+                    sheet={data.object}
+                    space={space}
+                    role={role}
+                    coordinate={data.coordinate as LayoutCoordinate}
+                    remoteFunctionUrl={remoteFunctionUrl}
+                  />
+                );
               }
             }
           }
@@ -157,7 +166,23 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
         resolver: async (intent) => {
           switch (intent.action) {
             case SheetAction.CREATE: {
-              return { data: createSheet() };
+              const space = intent.data?.space;
+              const sheet = createSheet();
+              const graph =
+                graphs[space.id] ??
+                createComputeGraph(
+                  [
+                    { plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations },
+                    // TODO(wittjosiah): Remove. Needed for current test sheet generated data.
+                    { plugin: CustomPlugin, translations: CustomPluginTranslations },
+                  ],
+                  space,
+                  { remoteFunctionUrl },
+                );
+              const model = new SheetModel(graph, sheet);
+              await model.initialize();
+              await model.destroy();
+              return { data: sheet };
             }
           }
         },

package/src/components/CellEditor/CellEditor.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { HyperFormula } from 'hyperformula';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
@@ -11,12 +12,10 @@ import { createDocAccessor, type EchoReactiveObject } from '@dxos/client/echo';
 import { automerge } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { HyperFormula } from '#hyperformula';
 import { CellEditor, type CellEditorProps } from './CellEditor';
 import { sheetExtension } from './extension';
-import { createSheet } from '../../defs';
-import { defaultFunctions } from '../../graph';
-import { SheetType } from '../../types';
+import { defaultFunctions } from '../../model';
+import { createSheet, SheetType } from '../../types';
 
 export default {
   title: 'plugin-sheet/CellEditor',
@@ -49,7 +48,7 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
       client.addTypes([SheetType]);
 
       const sheet = createSheet();
-      sheet.name = 'Test';
+      sheet.title = 'Test';
       sheet.cells[cell] = { value };
       space.db.add(sheet);
       setObject(sheet);

package/src/components/CellEditor/CellEditor.tsx

@@ -14,13 +14,10 @@ import {
   preventNewline,
   useTextEditor,
 } from '@dxos/react-ui-editor';
-import { type GridEditBox } from '@dxos/react-ui-grid';
-
-type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };
 
 export type EditorKeysProps = {
-  onClose: (value: string | undefined, event: EditorKeyEvent) => void;
-  onNav?: (value: string | undefined, event: EditorKeyEvent) => void;
+  onClose: (value: string | undefined) => void;
+  onNav?: (value: string | undefined, ev: Pick<KeyboardEvent<HTMLInputElement>, 'key'>) => void;
 };
 
 export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
@@ -60,29 +57,14 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
     {
       key: 'Enter',
       run: (editor) => {
-        onClose(editor.state.doc.toString(), { key: 'Enter' });
-        return true;
-      },
-      shift: (editor) => {
-        onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });
-        return true;
-      },
-    },
-    {
-      key: 'Tab',
-      run: (editor) => {
-        onClose(editor.state.doc.toString(), { key: 'Tab' });
-        return true;
-      },
-      shift: (editor) => {
-        onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });
+        onClose(editor.state.doc.toString());
         return true;
       },
     },
     {
       key: 'Escape',
       run: () => {
-        onClose(undefined, { key: 'Escape' });
+        onClose(undefined);
         return true;
       },
     },
@@ -92,35 +74,10 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
 export type CellEditorProps = {
   value?: string;
   extension?: Extension;
-  variant?: keyof typeof editorVariants;
-  box?: GridEditBox;
-  gridId?: string;
 } & Pick<UseTextEditorProps, 'autoFocus'> &
   Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;
 
-const editorVariants = {
-  // TODO(thure): remove when legacy is no longer used.
-  legacy: {
-    root: 'flex w-full',
-    editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',
-    content: '!px-2 !py-1',
-  },
-  grid: {
-    root: 'absolute z-[1]',
-    editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',
-    content: '!border !border-transparent !p-0.5',
-  },
-};
-
-export const CellEditor = ({
-  value,
-  extension,
-  autoFocus,
-  onBlur,
-  variant = 'legacy',
-  box,
-  gridId,
-}: CellEditorProps) => {
+export const CellEditor = ({ value, extension, autoFocus, onBlur }: CellEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -141,23 +98,16 @@ export const CellEditor = ({
           themeMode,
           slots: {
             editor: {
-              className: editorVariants[variant].editor,
+              className: 'flex w-full [&>.cm-scroller]:scrollbar-none',
             },
             content: {
-              className: editorVariants[variant].content,
+              className: '!px-2 !py-1',
             },
           },
         }),
       ],
     };
-  }, [extension, autoFocus, value, variant, onBlur]);
+  }, [extension]);
 
-  return (
-    <div
-      ref={parentRef}
-      className={editorVariants[variant].root}
-      style={box}
-      {...(gridId && { 'data-grid': gridId })}
-    />
-  );
+  return <div ref={parentRef} className='flex w-full' />;
 };

package/src/components/CellEditor/extension.test.ts

@@ -6,11 +6,12 @@ import { CompletionContext, type CompletionSource } from '@codemirror/autocomple
 import { EditorState } from '@codemirror/state';
 // @ts-ignore
 import { testTree } from '@lezer/generator/test';
+import { expect } from 'chai';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
-import { describe, expect, test } from 'vitest';
+import { describe, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../graph';
+import { defaultFunctions } from '../../model/functions';
 
 describe('formula parser', () => {
   const {
@@ -36,8 +37,8 @@ describe('formula parser', () => {
       extensions: sheetExtension({ functions }),
     });
 
-    const [fn] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
-    const result = await fn(new CompletionContext(state, text.length, true));
+    const [f] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
+    const result = await f(new CompletionContext(state, text.length, true));
     expect(result?.options).to.have.length(1);
   });
 });

package/src/components/CellEditor/extension.ts

@@ -20,7 +20,7 @@ import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
 import { mx } from '@dxos/react-ui-theme';
 
-import { type FunctionDefinition } from '../../graph';
+import { type FunctionDefinition } from '../../model';
 
 /**
  * https://codemirror.net/examples/styling
@@ -165,6 +165,8 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
       icons: false,
       tooltipClass: () =>
         mx(
+          // TODO(burdon): Factor out fragments.
+          // TODO(burdon): Size to make width same as column.
           '!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]',
           '[&>ul>li[aria-selected]]:!bg-accentSurface',
           'border-separator',

package/src/{graph → components/ComputeGraph}/async-function.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type SimpleCellAddress } from 'hyperformula/typings/Cell';
+import { CellError, ErrorType, EmptyValue, FunctionPlugin, type HyperFormula } from 'hyperformula';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type InterpreterValue } from 'hyperformula/typings/interpreter/InterpreterValue';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
@@ -12,8 +12,6 @@ import { debounce, type UnsubscribeCallback } from '@dxos/async';
 import { type Space } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 
-import { CellError, ErrorType, EmptyValue, FunctionPlugin, type HyperFormula } from '#hyperformula';
-
 // TODO(burdon): API gateways!
 //  https://publicapis.io
 //  https://api-ninjas.com/api/cryptoprice
@@ -23,11 +21,6 @@ import { CellError, ErrorType, EmptyValue, FunctionPlugin, type HyperFormula } f
 // TODO(burdon): Create wrapper.
 export type AsyncFunction = (...args: any) => Promise<InterpreterValue>;
 
-export type FunctionUpdateEvent = {
-  name: string;
-  cell: SimpleCellAddress;
-};
-
 export type FunctionOptions = {
   ttl?: number;
 };
@@ -36,7 +29,6 @@ export type FunctionContextOptions = {
   defaultTtl: number;
   recalculationDelay: number;
   remoteFunctionUrl: string;
-  onUpdate?: (update: FunctionUpdateEvent) => void;
 };
 
 export const defaultFunctionContextOptions: FunctionContextOptions = {
@@ -73,21 +65,20 @@ export class FunctionContext {
   private _invocations: Record<string, number> = {};
 
   private readonly _options: FunctionContextOptions;
-
-  // Debounced update handler.
-  private readonly _onUpdate: (update: FunctionUpdateEvent) => void;
+  private readonly _onUpdate: () => void;
 
   constructor(
     private readonly _hf: HyperFormula,
     private readonly _space: Space | undefined,
+    onUpdate: (context: FunctionContext) => void,
     _options?: Partial<FunctionContextOptions>,
   ) {
     this._options = defaultsDeep(_options ?? {}, defaultFunctionContextOptions);
-    this._onUpdate = debounce((update) => {
+    this._onUpdate = debounce(() => {
       // TODO(burdon): Better way to trigger recalculation?
       //  NOTE: rebuildAndRecalculate resets the undo history.
       this._hf.resumeEvaluation();
-      this._options.onUpdate?.(update);
+      onUpdate(this);
     }, this._options.recalculationDelay);
   }
 
@@ -143,7 +134,7 @@ export class FunctionContext {
           const value = await cb(...args);
           this._cache.set(invocationKey, { value, ts: Date.now() });
           log('set', { cell, value });
-          this._onUpdate({ name, cell });
+          this._onUpdate();
         } catch (err) {
           // TODO(burdon): Show error to user.
           log.warn('failed', { cell, err });

package/src/{graph/testing/custom-function.ts → components/ComputeGraph/custom.ts}

@@ -2,15 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
+import { FunctionArgumentType } from 'hyperformula';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
 
 import { getDeep } from '@dxos/util';
 
-import { FunctionArgumentType } from '#hyperformula';
-import { type AsyncFunction, FunctionPluginAsync } from '../async-function';
-import { type ComputeGraphPlugin } from '../compute-graph';
-import { parseNumberString } from '../util';
+import { type AsyncFunction, FunctionPluginAsync } from './async-function';
+
+// TODO(burdon): Factor out.
+const parseNumberString = (str: string): number => {
+  return parseFloat(str.replace(/[^\d.]/g, ''));
+};
 
 /**
  * https://hyperformula.handsontable.com/guide/custom-functions.html#add-a-simple-custom-function
@@ -65,10 +68,3 @@ export const CustomPluginTranslations = {
     CRYPTO: 'CRYPTO',
   },
 };
-
-export const testPlugins: ComputeGraphPlugin[] = [
-  {
-    plugin: CustomPlugin,
-    translations: CustomPluginTranslations,
-  },
-];

package/src/{graph → components/ComputeGraph}/edge-function.ts

@@ -3,6 +3,7 @@
 //
 
 import { effect } from '@preact/signals-core';
+import { CellError, ErrorType, FunctionArgumentType } from 'hyperformula';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
 
@@ -12,7 +13,6 @@ import { getUserFunctionUrlInMetadata } from '@dxos/plugin-script/edge';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { nonNullable } from '@dxos/util';
 
-import { CellError, ErrorType, FunctionArgumentType } from '#hyperformula';
 import { type AsyncFunction, FunctionPluginAsync } from './async-function';
 
 const EDGE_FUNCTION_TTL = 10_000;
@@ -59,7 +59,6 @@ export class EdgeFunctionPlugin extends FunctionPluginAsync {
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ args: args.filter(nonNullable) }),
         });
-
         return await result.text();
       };
 
@@ -74,7 +73,8 @@ EdgeFunctionPlugin.implementedFunctions = {
       // Binding
       { argumentType: FunctionArgumentType.STRING },
 
-      // Remote function arguments (currently supporting up to 8).
+      // Remote function arguments (currently supporting up to 9).
+      { argumentType: FunctionArgumentType.ANY, optionalArg: true },
       { argumentType: FunctionArgumentType.ANY, optionalArg: true },
       { argumentType: FunctionArgumentType.ANY, optionalArg: true },
       { argumentType: FunctionArgumentType.ANY, optionalArg: true },

package/src/components/ComputeGraph/graph-context.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { createContext, type PropsWithChildren, useContext, useEffect } from 'react';
+
+import { type Space } from '@dxos/react-client/echo';
+
+import { type FunctionContextOptions } from './async-function';
+import { CustomPlugin, CustomPluginTranslations } from './custom';
+import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './edge-function';
+import { createComputeGraph, type ComputeGraph } from './graph';
+
+export type ComputeGraphContextType = {
+  graphs: Record<string, ComputeGraph>;
+  setGraph: (key: string, graph: ComputeGraph) => void;
+};
+
+export const ComputeGraphContext = createContext<ComputeGraphContextType>({ graphs: {}, setGraph: () => {} });
+
+export const ComputeGraphContextProvider = ({
+  children,
+  graphs,
+  setGraph,
+}: PropsWithChildren<ComputeGraphContextType>) => {
+  return <ComputeGraphContext.Provider value={{ graphs, setGraph }}>{children}</ComputeGraphContext.Provider>;
+};
+
+export const useComputeGraph = (space: Space, options?: Partial<FunctionContextOptions>): ComputeGraph => {
+  const { graphs, setGraph } = useContext(ComputeGraphContext);
+  const graph =
+    graphs[space.id] ??
+    createComputeGraph(
+      [
+        { plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations },
+        // TODO(wittjosiah): Remove. Needed for current test sheet generated data.
+        { plugin: CustomPlugin, translations: CustomPluginTranslations },
+      ],
+      space,
+      options,
+    );
+
+  useEffect(() => {
+    if (!graphs[space.id]) {
+      setGraph(space.id, graph);
+    }
+  }, [space]);
+
+  return graph;
+};

package/src/components/ComputeGraph/graph.browser.test.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+import { describe, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+
+import { CustomPlugin, CustomPluginTranslations } from './custom';
+import { createComputeGraph } from './graph';
+import { addressFromA1Notation, SheetModel } from '../../model';
+import { type CellScalarValue, createSheet } from '../../types';
+
+/**
+ * VITEST_ENV=chrome p vitest --watch
+ * NOTE: Browser test required for hyperformula due to raw translation files.
+ */
+describe('compute graph', () => {
+  const createModel = async () => {
+    const graph = createComputeGraph([{ plugin: CustomPlugin, translations: CustomPluginTranslations }]);
+    const sheet = createSheet();
+    const model = new SheetModel(graph, sheet, undefined, { rows: 5, columns: 5 });
+    graph.update.on(() => model.update.emit());
+    return { graph, model };
+  };
+
+  test('async function', async () => {
+    const { graph, model } = await createModel();
+
+    // Triggers function.
+    model.setValue(addressFromA1Notation('A1'), '=TEST()');
+
+    const trigger = new Trigger<CellScalarValue>();
+    model.update.on(() => {
+      const value = model.getValue(addressFromA1Notation('A1'));
+      trigger.wake(value);
+    });
+
+    // Get initial value (i.e., null).
+    const v1 = model.getValue(addressFromA1Notation('A1'));
+    expect(v1).to.be.null;
+    expect(graph.context.info.invocations.TEST).to.eq(undefined);
+
+    // Wait until async update triggered.
+    const v2 = await trigger.wait();
+    expect(v2).not.to.be.null;
+    expect(graph.context.info.invocations.TEST).to.eq(1);
+  });
+});