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

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,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+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';
@@ -11,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
@@ -83,7 +82,6 @@ export class FunctionContext {
     }, this._options.recalculationDelay);
   }
 
-  // TODO(burdon): Remove?
   get space() {
     return this._space;
   }

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

@@ -2,14 +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 { parseNumberString } from './util';
+
+// 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

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();
       };
 

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);
+  });
+});

package/src/components/ComputeGraph/graph.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type FunctionPluginDefinition, HyperFormula } from 'hyperformula';
+import { type FunctionTranslationsPackage } from 'hyperformula/typings/interpreter';
+
+import { Event } from '@dxos/async';
+import { type Space } from '@dxos/client/echo';
+import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
+
+import { FunctionContext, type FunctionContextOptions } from './async-function';
+
+/**
+ * Create root graph for space.
+ */
+export const createComputeGraph = (
+  // TODO(wittjosiah): Factor out this type to make these easier to define.
+  functionPlugins: { plugin: FunctionPluginDefinition; translations: FunctionTranslationsPackage }[] = [],
+  space?: Space,
+  options?: Partial<FunctionContextOptions>,
+): ComputeGraph => {
+  functionPlugins.forEach(({ plugin, translations }) => {
+    HyperFormula.registerFunctionPlugin(plugin, translations);
+  });
+
+  const hf = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' });
+  return new ComputeGraph(hf, space, options);
+};
+
+/**
+ * Per-space compute and dependency graph.
+ */
+// TODO(burdon): Create instance for each space.
+export class ComputeGraph {
+  public readonly id = `graph-${PublicKey.random().truncate()}`;
+  public readonly update = new Event();
+
+  // The context is passed to all functions.
+  public readonly context = new FunctionContext(
+    this.hf,
+    this._space,
+    () => {
+      this.refresh();
+    },
+    this._options,
+  );
+
+  constructor(
+    public readonly hf: HyperFormula,
+    private readonly _space?: Space,
+    private readonly _options?: Partial<FunctionContextOptions>,
+  ) {
+    this.hf.updateConfig({ context: this.context });
+  }
+
+  refresh() {
+    log('refresh', { id: this.id });
+    this.update.emit();
+  }
+}

package/src/components/ComputeGraph/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './ComputeGraphContextProvider';
+export * from './async-function';
+export * from './custom';
+export * from './graph';

package/src/components/Sheet/Sheet.stories.tsx

@@ -4,33 +4,31 @@
 
 import '@dxos-theme';
 
-import React, { useState } from 'react';
+import { type Decorator } from '@storybook/react';
+import React, { useContext, useEffect, useState } from 'react';
 
+import { Client } from '@dxos/client';
+import { type EchoReactiveObject } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
-import { type Space, useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { getSpace, type Space } from '@dxos/react-client/echo';
 import { Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { Sheet } from './Sheet';
 import { type SizeMap } from './grid';
 import { useSheetContext } from './sheet-context';
-import { addressToIndex, rangeToIndex } from '../../defs';
-import { useComputeGraph } from '../../hooks';
-import { useTestSheet, withGraphDecorator } from '../../testing';
-import { SheetType, ValueTypeEnum } from '../../types';
+import { createTestSheet, testSheetName } from '../../testing';
+import { ValueTypeEnum, SheetType } from '../../types';
+import { type ComputeGraph, createComputeGraph } from '../ComputeGraph';
+// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
+import { ComputeGraphContext, ComputeGraphContextProvider, useComputeGraph } from '../ComputeGraph/graph-context';
 import { Toolbar, type ToolbarActionHandler } from '../Toolbar';
 
 // TODO(burdon): Allow toolbar to access sheet context; provide state for current cursor/range.
 const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) => {
   const { model, cursor, range } = useSheetContext();
 
-  const graph = useComputeGraph(space);
-  const handleRefresh = () => {
-    graph?.refresh();
-  };
-
   // TODO(burdon): Factor out.
   const handleAction: ToolbarActionHandler = ({ type }) => {
     log.info('action', { type, cursor, range });
@@ -38,7 +36,7 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
       return;
     }
 
-    const idx = range ? rangeToIndex(model.sheet, range) : addressToIndex(model.sheet, cursor);
+    const idx = range ? model.rangeToIndex(range) : model.addressToIndex(cursor);
     model.sheet.formatting[idx] ??= {};
     const format = model.sheet.formatting[idx];
 
@@ -77,12 +75,14 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
         format.precision = 2;
         break;
       }
-      case 'comment': {
-        break;
-      }
     }
   };
 
+  const graph = useComputeGraph(space);
+  const handleRefresh = () => {
+    graph.refresh();
+  };
+
   return (
     <div className='flex flex-col overflow-hidden'>
       <Toolbar.Root onAction={handleAction}>
@@ -99,43 +99,56 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
   );
 };
 
+const withGraphDecorator: Decorator = (Story) => {
+  const [graphs, setGraphs] = useState<Record<string, ComputeGraph>>({});
+
+  const setGraph = (key: string, graph: ComputeGraph) => {
+    if (!graph.hf.doesSheetExist(testSheetName)) {
+      const sheetName = graph.hf.addSheet(testSheetName);
+      const sheet = graph.hf.getSheetId(sheetName)!;
+      graph.hf.setCellContents({ sheet, col: 0, row: 0 }, Math.random());
+    }
+
+    setGraphs((graphs) => ({ ...graphs, [key]: graph }));
+  };
+
+  return (
+    <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
+      <Story />
+    </ComputeGraphContextProvider>
+  );
+};
+
 export default {
   title: 'plugin-sheet/Sheet',
   component: Sheet,
-  decorators: [
-    withClientProvider({ types: [SheetType], createIdentity: true }),
-    withGraphDecorator,
-    withTheme,
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }),
-  ],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }), withGraphDecorator],
 };
 
 export const Default = () => {
   const [debug, setDebug] = useState(false);
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!space || !sheet) {
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
+  if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet} onInfo={() => setDebug((debug) => !debug)}>
+    <Sheet.Root sheet={sheet} space={space} onInfo={() => setDebug((debug) => !debug)}>
       <SheetWithToolbar debug={debug} space={space} />
     </Sheet.Root>
   );
 };
 
 export const Debug = () => {
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Main />
       <Sheet.Debug />
     </Sheet.Root>
@@ -144,15 +157,14 @@ export const Debug = () => {
 
 export const Rows = () => {
   const [rowSizes, setRowSizes] = useState<SizeMap>({});
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Rows
         rows={sheet.rows}
         sizes={rowSizes}
@@ -164,15 +176,14 @@ export const Rows = () => {
 
 export const Columns = () => {
   const [columnSizes, setColumnSizes] = useState<SizeMap>({});
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Columns
         columns={sheet.columns}
         sizes={columnSizes}
@@ -183,19 +194,18 @@ export const Columns = () => {
 };
 
 export const Main = () => {
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Grid
         size={{
           numRows: 50,
-          numCols: 26,
+          numColumns: 26,
         }}
         rows={sheet.rows}
         columns={sheet.columns}
@@ -248,3 +258,30 @@ export const GridLayout = () => {
 const Cell = ({ className, label }: { className?: string; label: string }) => (
   <div className={mx('flex items-center justify-center border', className)}>{label}</div>
 );
+
+const useTestSheet = () => {
+  const { graphs, setGraph } = useContext(ComputeGraphContext);
+  const [sheet, setSheet] = useState<EchoReactiveObject<SheetType>>();
+  useEffect(() => {
+    const t = setTimeout(async () => {
+      const client = new Client();
+      await client.initialize();
+      await client.halo.createIdentity();
+      const space = await client.spaces.create();
+      client.addTypes([SheetType]);
+
+      const graph = graphs[space.id] ?? createComputeGraph();
+      if (!graphs[space.id]) {
+        setGraph(space.id, graph);
+      }
+
+      const sheet = await createTestSheet({ graph });
+      space.db.add(sheet);
+      setSheet(sheet);
+    });
+
+    return () => clearTimeout(t);
+  }, []);
+
+  return sheet;
+};