@dxos/plugin-sheet 0.6.12-main.ed7cda7 → 0.6.12-main.f9d0246

package/src/components/Sheet/sheet-context.tsx

@@ -5,10 +5,10 @@
 import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type Space } from '@dxos/react-client/echo';
 
 import { createDecorations } from './decorations';
 import { type CellAddress, type CellRange } from '../../defs';
+import { type ComputeGraph } from '../../graph';
 import { useSheetModel, useFormattingModel } from '../../hooks';
 import { type FormattingModel, type SheetModel } from '../../model';
 import { type SheetType } from '../../types';
@@ -45,19 +45,19 @@ export const useSheetContext = (): SheetContextType => {
 };
 
 export type SheetContextProps = {
+  graph: ComputeGraph;
   sheet: SheetType;
-  space: Space;
   readonly?: boolean;
 } & Pick<SheetContextType, 'onInfo'>;
 
 export const SheetContextProvider = ({
   children,
+  graph,
   sheet,
-  space,
   readonly,
   onInfo,
 }: PropsWithChildren<SheetContextProps>) => {
-  const model = useSheetModel(space, sheet, { readonly });
+  const model = useSheetModel(graph, sheet, { readonly });
   const formatting = useFormattingModel(model);
 
   // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.

package/src/components/SheetContainer.tsx

@@ -22,7 +22,7 @@ const attentionFragment = mx(
 export const sectionToolbarLayout =
   'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
 
-const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string }) => {
+const SheetContainer = ({ graph, sheet, role }: SheetRootProps & { role?: string }) => {
   const dispatch = useIntentDispatcher();
 
   const id = fullyQualifiedId(sheet);
@@ -50,7 +50,7 @@ const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string
 
   return (
     <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root space={space} sheet={sheet}>
+      <Sheet.Root graph={graph} sheet={sheet}>
         <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
           <Toolbar.Root
             onAction={handleAction}

package/src/defs/types.ts

@@ -34,6 +34,7 @@ export const addressToA1Notation = ({ col, row }: CellAddress): string => {
   return `${columnLetter(col)}${row + 1}`;
 };
 
+// TODO(burdon): See simpleCellAddressFromString
 export const addressFromA1Notation = (ref: string): CellAddress => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`);

package/src/defs/util.ts

@@ -5,7 +5,15 @@
 import { randomBytes } from '@dxos/crypto';
 import { create } from '@dxos/echo-schema';
 
-import { type CellAddress, type CellRange, DEFAULT_COLUMNS, DEFAULT_ROWS, MAX_COLUMNS, MAX_ROWS } from './types';
+import {
+  addressFromA1Notation,
+  type CellAddress,
+  type CellRange,
+  DEFAULT_COLUMNS,
+  DEFAULT_ROWS,
+  MAX_COLUMNS,
+  MAX_ROWS,
+} from './types';
 import { type CreateSheetOptions, type SheetSize, SheetType } from '../types';
 
 // TODO(burdon): Factor out from dxos/protocols to new common package.
@@ -52,9 +60,9 @@ export const initialize = (
   }
 };
 
-export const createSheet = ({ title, ...size }: CreateSheetOptions = {}): SheetType => {
+export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}): SheetType => {
   const sheet = create(SheetType, {
-    title,
+    name,
     cells: {},
     rows: [],
     columns: [],
@@ -64,6 +72,14 @@ export const createSheet = ({ title, ...size }: CreateSheetOptions = {}): SheetT
   });
 
   initialize(sheet, size);
+
+  if (cells) {
+    Object.entries(cells).forEach(([key, { value }]) => {
+      const idx = addressToIndex(sheet, addressFromA1Notation(key));
+      sheet.cells[idx] = { value };
+    });
+  }
+
   return sheet;
 };
 

package/src/extensions/compute.stories.tsx

@@ -3,10 +3,11 @@
 //
 
 import '@dxos-theme';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncState } from '@dxos/react-hooks';
 import { useThemeContext } from '@dxos/react-ui';
 import {
   createBasicExtensions,
@@ -18,11 +19,11 @@ import {
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { nonNullable } from '@dxos/util';
 
-import { compute } from './compute';
+import { compute, computeNodeFacet } from './compute';
 import { Sheet } from '../components';
 import { type ComputeNode } from '../graph';
 import { useComputeGraph, useSheetModel } from '../hooks';
-import { useTestSheet, withGraphDecorator } from '../testing';
+import { useTestSheet, withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 
 const str = (...lines: string[]) => lines.join('\n');
@@ -34,6 +35,8 @@ type EditorProps = {
 // TODO(burdon): Implement named expressions.
 //  https://hyperformula.handsontable.com/guide/cell-references.html
 
+// TODO(burdon): Inline Adobe eCharts.
+
 const DOC_NAME = 'Test Doc';
 const SHEET_NAME = 'Test Sheet';
 
@@ -41,12 +44,8 @@ const Editor = ({ text }: EditorProps) => {
   const { themeMode } = useThemeContext();
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const [node, setNode] = useState<ComputeNode>();
-  // TODO(burdon): Virtualize SheetModel.
-  useEffect(() => {
-    if (graph) {
-      setNode(graph.getOrCreateNode(DOC_NAME));
-    }
+  const [computeNode] = useAsyncState<ComputeNode>(async () => {
+    return graph ? await graph.getOrCreateNode(DOC_NAME) : undefined;
   }, [graph]);
   const { parentRef, focusAttributes } = useTextEditor(
     () => ({
@@ -55,11 +54,12 @@ const Editor = ({ text }: EditorProps) => {
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        node && compute(node),
+        computeNode && computeNodeFacet.of(computeNode),
+        compute(),
         decorateMarkdown(),
       ].filter(nonNullable),
     }),
-    [node, themeMode],
+    [computeNode, themeMode],
   );
 
   return <div className='w-[40rem] overflow-hidden' ref={parentRef} {...focusAttributes} />;
@@ -68,21 +68,21 @@ const Editor = ({ text }: EditorProps) => {
 const Grid = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { title: SHEET_NAME });
-  const model = useSheetModel(space, sheet);
+  const sheet = useTestSheet(space, graph, { name: SHEET_NAME });
+  const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (model) {
       model.setValues({ A1: { value: 100 }, A2: { value: 200 }, A3: { value: 300 }, A5: { value: '=SUM(A1:A3)' } });
     }
   }, [model]);
 
-  if (!space || !sheet) {
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
     <div className='flex w-[40rem] overflow-hidden'>
-      <Sheet.Root space={space} sheet={sheet}>
+      <Sheet.Root graph={graph} sheet={sheet}>
         <Sheet.Main classNames='border border-separator' />
       </Sheet.Root>
     </div>
@@ -102,13 +102,14 @@ export default {
   title: 'plugin-sheet/extensions',
   decorators: [
     withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator(),
     withTheme,
     withLayout({ fullscreen: true, classNames: 'justify-center' }),
   ],
   parameters: { layout: 'fullscreen' },
 };
 
+// TODO(burdon): Inline formulae.
 export const Default = {
   render: Editor,
   args: {
@@ -146,6 +147,7 @@ export const Graph = {
       `="${SHEET_NAME}"!A5`,
       '```',
       '',
+      '',
     ),
   },
 };

package/src/extensions/compute.ts

@@ -3,6 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
+import { Facet } from '@codemirror/state';
 import {
   type EditorState,
   type Extension,
@@ -14,7 +15,21 @@ import {
 } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 
+import { type UnsubscribeCallback } from '@dxos/async';
+import { type Space } from '@dxos/client/echo';
+
+import { type CellAddress } from '../defs';
 import { type ComputeNode } from '../graph';
+import { type CellScalarValue } from '../types';
+
+export const spaceFacet = Facet.define<Space, Space>({
+  combine: (values) => values[0],
+});
+
+// TODO(burdon): Create on demand?
+export const computeNodeFacet = Facet.define<ComputeNode, ComputeNode>({
+  combine: (values) => values[0],
+});
 
 const LANGUAGE_TAG = 'dx';
 
@@ -23,36 +38,46 @@ const updateAllDecorations = StateEffect.define<void>();
 
 export type ComputeOptions = {};
 
-export const compute = (computeNode: ComputeNode, options: ComputeOptions = {}): Extension => {
-  const update = (state: EditorState) => {
-    const builder = new RangeSetBuilder();
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === 'FencedCode') {
-          const cursor = state.selection.main.head;
-          if (state.readOnly || cursor < node.from || cursor > node.to) {
-            const info = node.node.getChild('CodeInfo');
-            if (info) {
-              const type = state.sliceDoc(info.from, info.to);
-              const text = node.node.getChild('CodeText');
-              if (type === LANGUAGE_TAG && text) {
-                const content = state.sliceDoc(text.from, text.to);
-                // TODO(burdon): Map unique reference onto cell; e.g., track ordered list?
-                computeNode.setValue({ col: 0, row: 0 }, content);
-                const value = computeNode.getValue({ col: 0, row: 0 });
-                builder.add(
-                  node.from,
-                  node.to,
-                  Decoration.replace({
-                    widget: new DxWidget(String(value)),
-                  }),
-                );
+export const compute = (options: ComputeOptions = {}): Extension => {
+  const update = (state: EditorState, rangeSet?: RangeSet<Decoration>) => {
+    const builder = new RangeSetBuilder<Decoration>();
+    const computeNode = state.facet(computeNodeFacet);
+    if (computeNode) {
+      computeNode.clear();
+      syntaxTree(state).iterate({
+        enter: (node) => {
+          if (node.name === 'FencedCode') {
+            const cursor = state.selection.main.head;
+            if (state.readOnly || cursor < node.from || cursor > node.to) {
+              const info = node.node.getChild('CodeInfo');
+              if (info) {
+                const type = state.sliceDoc(info.from, info.to);
+                const text = node.node.getChild('CodeText');
+                if (type === LANGUAGE_TAG && text) {
+                  const formula = state.sliceDoc(text.from, text.to);
+                  const iter = rangeSet?.iter(node.node.from);
+                  if (iter?.value && iter?.value.spec.formula === formula) {
+                    builder.add(node.from, node.to, iter.value);
+                  } else {
+                    const cell: CellAddress = { col: node.node.from, row: 0 };
+                    computeNode.setValue(cell, formula);
+                    const value = computeNode.getValue(cell);
+                    builder.add(
+                      node.from,
+                      node.to,
+                      Decoration.replace({
+                        widget: new DxWidget(formula, value),
+                        formula,
+                      }),
+                    );
+                  }
+                }
               }
             }
           }
-        }
-      },
-    });
+        },
+      });
+    }
 
     return builder.finish();
   };
@@ -61,38 +86,46 @@ export const compute = (computeNode: ComputeNode, options: ComputeOptions = {}):
     // Graph subscription.
     ViewPlugin.fromClass(
       class {
-        private readonly _subscription: any;
+        private readonly _subscription?: UnsubscribeCallback;
         constructor(view: EditorView) {
-          this._subscription = computeNode.graph.update.on(() => {
-            view.dispatch({
-              effects: updateAllDecorations.of(),
+          const computeNode = view.state.facet(computeNodeFacet);
+          if (computeNode) {
+            this._subscription = computeNode.update.on(({ type }) => {
+              if (type === 'valuesUpdated') {
+                view.dispatch({
+                  effects: updateAllDecorations.of(),
+                });
+              }
             });
-          });
+          }
         }
 
         destroy() {
-          this._subscription();
+          this._subscription?.();
         }
       },
     ),
 
-    // Decorations.
-    StateField.define<RangeSet<any>>({
+    StateField.define<RangeSet<Decoration>>({
       create: (state) => update(state),
-      update: (_: RangeSet<any>, tr: Transaction) => update(tr.state),
+      update: (rangeSet: RangeSet<Decoration>, tr: Transaction) => update(tr.state, rangeSet),
       provide: (field) => EditorView.decorations.from(field),
     }),
   ];
 };
 
 class DxWidget extends WidgetType {
-  constructor(private readonly value: string) {
+  constructor(
+    private readonly formula: string,
+    private readonly value: CellScalarValue,
+  ) {
     super();
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(_view: EditorView) {
     const div = document.createElement('div');
-    div.innerText = this.value;
+    div.setAttribute('title', this.formula);
+    div.innerText = String(this.value);
     return div;
   }
 }

package/src/graph/async-function.ts

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type SimpleCellAddress } from 'hyperformula/typings/Cell';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type InterpreterValue } from 'hyperformula/typings/interpreter/InterpreterValue';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
@@ -22,6 +23,11 @@ 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;
 };
@@ -30,6 +36,7 @@ export type FunctionContextOptions = {
   defaultTtl: number;
   recalculationDelay: number;
   remoteFunctionUrl: string;
+  onUpdate?: (update: FunctionUpdateEvent) => void;
 };
 
 export const defaultFunctionContextOptions: FunctionContextOptions = {
@@ -66,24 +73,24 @@ export class FunctionContext {
   private _invocations: Record<string, number> = {};
 
   private readonly _options: FunctionContextOptions;
-  private readonly _onUpdate: () => void;
+
+  // Debounced update handler.
+  private readonly _onUpdate: (update: FunctionUpdateEvent) => 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(() => {
+    this._onUpdate = debounce((update) => {
       // TODO(burdon): Better way to trigger recalculation?
       //  NOTE: rebuildAndRecalculate resets the undo history.
       this._hf.resumeEvaluation();
-      onUpdate(this);
+      this._options.onUpdate?.(update);
     }, this._options.recalculationDelay);
   }
 
-  // TODO(burdon): Remove?
   get space() {
     return this._space;
   }
@@ -136,7 +143,7 @@ export class FunctionContext {
           const value = await cb(...args);
           this._cache.set(invocationKey, { value, ts: Date.now() });
           log('set', { cell, value });
-          this._onUpdate();
+          this._onUpdate({ name, cell });
         } catch (err) {
           // TODO(burdon): Show error to user.
           log.warn('failed', { cell, err });

package/src/graph/compute-graph.stories.tsx

@@ -13,9 +13,10 @@ import { Toolbar, Button, Input } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
+import { testPlugins } from './testing';
 import { createSheet } from '../defs';
 import { useComputeGraph, useSheetModel } from '../hooks';
-import { withGraphDecorator } from '../testing';
+import { withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 
 const FUNCTION_NAME = 'TEST';
@@ -26,7 +27,7 @@ const Story = () => {
   const [sheet, setSheet] = useState<SheetType>();
   const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
   const [result, setResult] = useState<any>();
-  const model = useSheetModel(space, sheet);
+  const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (space) {
       const sheet = space.db.add(createSheet());
@@ -83,7 +84,7 @@ export default {
   title: 'plugin-sheet/functions',
   decorators: [
     withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator({ plugins: testPlugins }),
     withTheme,
   ],
   render: (args: any) => <Story {...args} />,

package/src/graph/compute-graph.test.ts

@@ -0,0 +1,127 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type CellValue } from 'hyperformula';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { Client } from '@dxos/client';
+import { create, fullyQualifiedId } from '@dxos/client/echo';
+import { Context } from '@dxos/context';
+import { type S } from '@dxos/echo-schema';
+import { FunctionType } from '@dxos/plugin-script/types';
+
+import { ComputeGraphRegistry } from './compute-graph';
+import { testPlugins } from './testing';
+import { addressFromA1Notation, createSheet } from '../defs';
+import { SheetModel } from '../model';
+import { type CellScalarValue } from '../types';
+
+/**
+ * NOTE: Browser test required for hyperformula due to raw translation files.
+ */
+describe('compute graph', () => {
+  let ctx: Context;
+  beforeEach(() => {
+    ctx = new Context();
+  });
+  afterEach(async () => {
+    await ctx.dispose();
+  });
+
+  // TODO(burdon): Replace with builder.
+  const createModel = async (types?: S.Schema<any>[]) => {
+    const client = new Client();
+    if (types) {
+      // TODO(burdon): Add to config.
+      client.addTypes(types);
+    }
+    await client.initialize();
+    await client.halo.createIdentity();
+    const space = await client.spaces.create();
+    ctx.onDispose(() => client.destroy());
+
+    const registry = new ComputeGraphRegistry({ plugins: testPlugins });
+    await registry.open();
+    ctx.onDispose(() => registry.close());
+
+    const graph = await registry.createGraph(space);
+
+    const sheet = createSheet({ rows: 5, columns: 5 });
+    const model = new SheetModel(graph, sheet);
+    await model.open();
+
+    return { space, graph, model };
+  };
+
+  test('map functions', async () => {
+    const { space, graph } = await createModel([FunctionType]);
+
+    // Create script.
+    const trigger = new Trigger();
+    graph.update.once(() => trigger.wake());
+    const fn = space.db.add(create(FunctionType, { version: 1, binding: 'TEST' }));
+    await trigger.wait();
+    expect(graph.getFunctions({ echo: true })).to.toHaveLength(1);
+
+    const id = graph.mapFunctionBindingToId('TEST()');
+    expect(id).to.eq(`${fullyQualifiedId(fn)}()`);
+  });
+
+  test('cross-node references', async () => {
+    const { graph } = await createModel();
+
+    // Create nodes.
+    const node1 = await graph.getOrCreateNode('node-1');
+    const node2 = await graph.getOrCreateNode('node-2');
+
+    {
+      expect(graph.hf.getSheetNames()).to.toHaveLength(3);
+      node1.graph.hf.setCellContents({ sheet: node1.sheetId, row: 0, col: 0 }, [[100, 200, 300, '=SUM(A1:C1)']]);
+      node2.graph.hf.setCellContents({ sheet: node2.sheetId, row: 0, col: 0 }, "='node-1'!D1");
+      const value1 = node1.graph.hf.getCellValue({ sheet: node1.sheetId, col: 3, row: 0 });
+      const value2 = node2.graph.hf.getCellValue({ sheet: node2.sheetId, col: 0, row: 0 });
+      expect(value1).to.eq(value2);
+    }
+
+    // Get updated event.
+    const trigger = new Trigger<CellValue>();
+    node2.update.on(({ change }) => {
+      const value = node2.graph.hf.getCellValue({ sheet: node2.sheetId, col: 0, row: 0 });
+      expect(value).to.eq(change?.newValue);
+      trigger.wake(value);
+    });
+
+    {
+      node1.graph.hf.setCellContents({ sheet: node1.sheetId, row: 0, col: 0 }, 400);
+      const value1 = node1.graph.hf.getCellValue({ sheet: node1.sheetId, col: 3, row: 0 });
+      const value2 = await trigger.wait();
+      expect(value1).to.eq(value2);
+    }
+  });
+
+  test('async function', async () => {
+    const { graph, model } = await createModel();
+
+    // Triggers function.
+    model.setValue(addressFromA1Notation('A1'), '=TEST()');
+    const trigger = new Trigger<CellScalarValue>();
+    model.update.once(({ type }) => {
+      if (type === 'valuesUpdated') {
+        const value = model.getValue(addressFromA1Notation('A1'));
+        trigger.wake(value);
+      }
+    });
+
+    // Get initial value (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);
+  });
+});