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

package/src/extensions/compute.stories.tsx

@@ -3,25 +3,25 @@
 //
 
 import '@dxos-theme';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
+import { PublicKey } from '@dxos/keys';
 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,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  documentId,
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { nonNullable } from '@dxos/util';
 
-import { compute, computeNodeFacet } from './compute';
+import { compute, computeGraphFacet } from './compute';
 import { Sheet } from '../components';
-import { type ComputeNode } from '../graph';
 import { useComputeGraph, useSheetModel } from '../hooks';
 import { useTestSheet, withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
@@ -37,16 +37,13 @@ type EditorProps = {
 
 // TODO(burdon): Inline Adobe eCharts.
 
-const DOC_NAME = 'Test Doc';
 const SHEET_NAME = 'Test Sheet';
 
 const Editor = ({ text }: EditorProps) => {
+  const id = useMemo(() => PublicKey.random(), []);
   const { themeMode } = useThemeContext();
   const space = useSpace();
-  const graph = useComputeGraph(space);
-  const [computeNode] = useAsyncState<ComputeNode>(async () => {
-    return graph ? await graph.getOrCreateNode(DOC_NAME) : undefined;
-  }, [graph]);
+  const computeGraph = useComputeGraph(space);
   const { parentRef, focusAttributes } = useTextEditor(
     () => ({
       initialValue: text,
@@ -54,12 +51,13 @@ const Editor = ({ text }: EditorProps) => {
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        computeNode && computeNodeFacet.of(computeNode),
+        documentId.of(id.toHex()),
+        computeGraph && computeGraphFacet.of(computeGraph),
         compute(),
         decorateMarkdown(),
       ].filter(nonNullable),
     }),
-    [computeNode, themeMode],
+    [computeGraph, themeMode],
   );
 
   return <div className='w-[40rem] overflow-hidden' ref={parentRef} {...focusAttributes} />;

package/src/extensions/compute.ts

@@ -3,7 +3,6 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { Facet } from '@codemirror/state';
 import {
   type EditorState,
   type Extension,
@@ -15,64 +14,68 @@ 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 UnsubscribeCallback, debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+import { documentId, singleValueFacet } from '@dxos/react-ui-editor/state';
 
 import { type CellAddress } from '../defs';
-import { type ComputeNode } from '../graph';
+import { type ComputeGraph, type ComputeNode, createSheetName } 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';
 
 // TODO(burdon): Create marker just for our decorator?
 const updateAllDecorations = StateEffect.define<void>();
 
+export const computeGraphFacet = singleValueFacet<ComputeGraph>();
+
 export type ComputeOptions = {};
 
 export const compute = (options: ComputeOptions = {}): Extension => {
-  const update = (state: EditorState, rangeSet?: RangeSet<Decoration>) => {
+  let computeNode: ComputeNode | undefined;
+
+  const update = (state: EditorState, current?: 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,
-                      }),
-                    );
+          switch (node.name) {
+            case '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 = current?.iter(node.node.from);
+                    if (iter?.value && iter?.value.spec.formula === formula) {
+                      // Add existing widget.
+                      builder.add(node.from, node.to, iter.value);
+                    } else {
+                      // TODO(burdon): Create ordered list of cells on each decoration run.
+                      const cell: CellAddress = { col: node.node.from, row: 0 };
+                      invariant(computeNode);
+                      // NOTE: This triggers re-render (below).
+                      computeNode.setValue(cell, formula);
+                      const value = computeNode.getValue(cell);
+                      builder.add(
+                        node.from,
+                        node.to,
+                        Decoration.replace({
+                          widget: new ComputeWidget(formula, value),
+                          formula,
+                        }),
+                      );
+                    }
                   }
                 }
               }
+
+              break;
             }
           }
         },
@@ -83,25 +86,37 @@ export const compute = (options: ComputeOptions = {}): Extension => {
   };
 
   return [
-    // Graph subscription.
     ViewPlugin.fromClass(
       class {
-        private readonly _subscription?: UnsubscribeCallback;
+        // Graph subscription.
+        private _subscription?: UnsubscribeCallback;
         constructor(view: EditorView) {
-          const computeNode = view.state.facet(computeNodeFacet);
-          if (computeNode) {
-            this._subscription = computeNode.update.on(({ type }) => {
-              if (type === 'valuesUpdated') {
-                view.dispatch({
-                  effects: updateAllDecorations.of(),
-                });
-              }
+          const id = view.state.facet(documentId);
+          const computeGraph = view.state.facet(computeGraphFacet);
+          if (id && computeGraph) {
+            queueMicrotask(async () => {
+              computeNode = computeGraph.getOrCreateNode(createSheetName({ type: '', id }));
+              await computeNode.open();
+
+              // Trigger re-render if values updated.
+              // TODO(burdon): Trigger only if formula value updated (currently triggered during render).
+              this._subscription = computeNode.update.on(
+                debounce(({ type, ...rest }) => {
+                  if (type === 'valuesUpdated') {
+                    view.dispatch({
+                      effects: updateAllDecorations.of(),
+                    });
+                  }
+                }, 250),
+              );
             });
           }
         }
 
         destroy() {
           this._subscription?.();
+          void computeNode?.close();
+          computeNode = undefined;
         }
       },
     ),
@@ -114,7 +129,8 @@ export const compute = (options: ComputeOptions = {}): Extension => {
   ];
 };
 
-class DxWidget extends WidgetType {
+// TODO(burdon): Click to edit.
+class ComputeWidget extends WidgetType {
   constructor(
     private readonly formula: string,
     private readonly value: CellScalarValue,

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

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { FunctionPluginDefinition } from 'hyperformula';
+import type { ConfigParams } from 'hyperformula/typings/ConfigParams';
+import type { FunctionTranslationsPackage } from 'hyperformula/typings/interpreter';
+import defaultsDeep from 'lodash.defaultsdeep';
+
+import { type SpaceId, type Space } from '@dxos/client/echo';
+import { Resource } from '@dxos/context';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+
+import { HyperFormula } from '#hyperformula';
+import { ComputeGraph } from './compute-graph';
+import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations, type FunctionContextOptions } from './functions';
+
+export type ComputeGraphPlugin = {
+  plugin: FunctionPluginDefinition;
+  translations: FunctionTranslationsPackage;
+};
+
+export type ComputeGraphOptions = {
+  plugins?: ComputeGraphPlugin[];
+} & Partial<FunctionContextOptions> &
+  Partial<ConfigParams>;
+
+export const defaultOptions: ComputeGraphOptions = {
+  licenseKey: 'gpl-v3',
+};
+
+export const defaultPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: EdgeFunctionPlugin,
+    translations: EdgeFunctionPluginTranslations,
+  },
+];
+
+/**
+ * Manages a collection of ComputeGraph instances for each space.
+ *
+ * [ComputePlugin] => [ComputeGraphRegistry] => [ComputeGraph(Space)] => [ComputeNode(Object)]
+ *
+ * NOTE: The ComputeGraphRegistry manages the hierarchy of resources via its root Context.
+ * NOTE: The package.json file defines the packaged #hyperformula module.
+ */
+// TODO(burdon): Move graph into separate plugin; isolate HF deps.
+export class ComputeGraphRegistry extends Resource {
+  private readonly _graphs = new Map<SpaceId, ComputeGraph>();
+
+  private readonly _options: ComputeGraphOptions;
+
+  constructor(options: ComputeGraphOptions = { plugins: defaultPlugins }) {
+    super();
+    this._options = defaultsDeep({}, options, defaultOptions);
+    this._options.plugins?.forEach(({ plugin, translations }) => {
+      HyperFormula.registerFunctionPlugin(plugin, translations);
+    });
+  }
+
+  getGraph(spaceId: SpaceId): ComputeGraph | undefined {
+    return this._graphs.get(spaceId);
+  }
+
+  getOrCreateGraph(space: Space): ComputeGraph {
+    let graph = this._graphs.get(space.id);
+    if (!graph) {
+      log('create graph', { space: space.id });
+      graph = this.createGraph(space);
+    }
+
+    return graph;
+  }
+
+  createGraph(space: Space): ComputeGraph {
+    invariant(!this._graphs.has(space.id), `ComputeGraph already exists for space: ${space.id}`);
+    const hf = HyperFormula.buildEmpty(this._options);
+    const graph = new ComputeGraph(hf, space, this._options);
+    this._graphs.set(space.id, graph);
+    return graph;
+  }
+
+  protected override async _close() {
+    for (const graph of this._graphs.values()) {
+      await graph.close();
+    }
+    this._graphs.clear();
+  }
+}

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

@@ -13,7 +13,7 @@ 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 { testFunctionPlugins } from './testing';
 import { createSheet } from '../defs';
 import { useComputeGraph, useSheetModel } from '../hooks';
 import { withComputeGraphDecorator } from '../testing';
@@ -84,7 +84,7 @@ export default {
   title: 'plugin-sheet/functions',
   decorators: [
     withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
-    withComputeGraphDecorator({ plugins: testPlugins }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withTheme,
   ],
   render: (args: any) => <Story {...args} />,

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

@@ -6,78 +6,49 @@ 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';
+import { DetailedCellError } from '#hyperformula';
+import { TestBuilder } from './testing';
 
-/**
- * NOTE: Browser test required for hyperformula due to raw translation files.
- */
-describe('compute graph', () => {
-  let ctx: Context;
-  beforeEach(() => {
-    ctx = new Context();
+describe('ComputeGraph', () => {
+  let testBuilder: TestBuilder;
+  beforeEach(async () => {
+    testBuilder = new TestBuilder({ types: [FunctionType] });
+    await testBuilder.open();
   });
   afterEach(async () => {
-    await ctx.dispose();
+    await testBuilder.close();
   });
 
-  // 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]);
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+    await graph.open();
 
     // Create script.
     const trigger = new Trigger();
     graph.update.once(() => trigger.wake());
-    const fn = space.db.add(create(FunctionType, { version: 1, binding: 'TEST' }));
+    const functionObject = space.db.add(create(FunctionType, { version: 1, binding: 'TEST' }));
     await trigger.wait();
-    expect(graph.getFunctions({ echo: true })).to.toHaveLength(1);
+    const functions = graph.getFunctions({ echo: true });
+    expect(functions).to.toHaveLength(1);
 
     const id = graph.mapFunctionBindingToId('TEST()');
-    expect(id).to.eq(`${fullyQualifiedId(fn)}()`);
+    expect(id).to.eq(`${fullyQualifiedId(functionObject)}()`);
   });
 
   test('cross-node references', async () => {
-    const { graph } = await createModel();
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
 
     // Create nodes.
-    const node1 = await graph.getOrCreateNode('node-1');
-    const node2 = await graph.getOrCreateNode('node-2');
+    const node1 = await graph.getOrCreateNode('node-1').open();
+    const node2 = await graph.getOrCreateNode('node-2').open();
+    expect(graph.hf.getSheetNames()).to.toHaveLength(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 });
@@ -101,27 +72,16 @@ describe('compute graph', () => {
     }
   });
 
-  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);
+  // TODO(burdon): Dynamically load node/model based on dependencies.
+  //  - Create dependency then close model.
+  test('dynamic loading', async () => {
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+
+    const node1 = await graph.getOrCreateNode('node-1').open();
+    node1.graph.hf.setCellContents({ sheet: node1.sheetId, row: 0, col: 0 }, "='node-2'!A1");
+    const value1 = node1.graph.hf.getCellValue({ sheet: node1.sheetId, col: 0, row: 0 });
+    expect(value1).to.be.instanceof(DetailedCellError);
+    expect((value1 as DetailedCellError).type).to.eq('REF');
   });
 });