@dxos/plugin-sheet 0.6.12 → 0.6.13-main.548ca8d

package/src/extensions/compute.stories.tsx

@@ -0,0 +1,151 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+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 { 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, computeGraphFacet } from './compute';
+import { GridSheet, SheetProvider } from '../components';
+import { useComputeGraph, useSheetModel } from '../hooks';
+import { useTestSheet, withComputeGraphDecorator } from '../testing';
+import { SheetType } from '../types';
+
+const str = (...lines: string[]) => lines.join('\n');
+
+type EditorProps = {
+  text?: string;
+};
+
+// TODO(burdon): Implement named expressions.
+//  https://hyperformula.handsontable.com/guide/cell-references.html
+
+// TODO(burdon): Inline Adobe eCharts.
+
+const SHEET_NAME = 'Test Sheet';
+
+const Editor = ({ text }: EditorProps) => {
+  const id = useMemo(() => PublicKey.random(), []);
+  const { themeMode } = useThemeContext();
+  const space = useSpace();
+  const computeGraph = useComputeGraph(space);
+  const { parentRef, focusAttributes } = useTextEditor(
+    () => ({
+      initialValue: text,
+      extensions: [
+        createBasicExtensions(),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+        documentId.of(id.toHex()),
+        computeGraph && computeGraphFacet.of(computeGraph),
+        compute(),
+        decorateMarkdown(),
+      ].filter(nonNullable),
+    }),
+    [computeGraph, themeMode],
+  );
+
+  return <div className='w-[40rem] overflow-hidden' ref={parentRef} {...focusAttributes} />;
+};
+
+const Grid = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  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 (!graph || !sheet) {
+    return null;
+  }
+
+  return (
+    <div className='flex w-[40rem] overflow-hidden'>
+      <SheetProvider graph={graph} sheet={sheet}>
+        <GridSheet />
+      </SheetProvider>
+    </div>
+  );
+};
+
+const Story = (props: EditorProps) => {
+  return (
+    <div className='grid grid-rows-2'>
+      <Editor {...props} />
+      <Grid />
+    </div>
+  );
+};
+
+export default {
+  title: 'plugin-sheet/extensions',
+  decorators: [
+    withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+    withLayout({ fullscreen: true, classNames: 'justify-center' }),
+  ],
+  parameters: { layout: 'fullscreen' },
+};
+
+// TODO(burdon): Inline formulae.
+export const Default = {
+  render: Editor,
+  args: {
+    text: str(
+      //
+      '# Compute Graph',
+      '',
+      'This is a compute expression:',
+      '',
+      '```dx',
+      '=SUM(1, 2)',
+      '```',
+      '',
+      'It should change in realtime.',
+      '',
+      '```dx',
+      '=SUM(3, 5)',
+      '```',
+      '',
+      '',
+    ),
+  },
+};
+
+export const Graph = {
+  render: Story,
+  args: {
+    text: str(
+      //
+      '# Compute Graph',
+      '',
+      'The total projected cost is:',
+      '',
+      '```dx',
+      `="${SHEET_NAME}"!A5`,
+      '```',
+      '',
+      '',
+    ),
+  },
+};

package/src/extensions/compute.ts

@@ -0,0 +1,147 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateEffect,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
+
+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 ComputeGraph, type ComputeNode, createSheetName } from '../graph';
+import { type CellScalarValue } from '../types';
+
+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 => {
+  let computeNode: ComputeNode | undefined;
+
+  const update = (state: EditorState, current?: RangeSet<Decoration>) => {
+    const builder = new RangeSetBuilder<Decoration>();
+    if (computeNode) {
+      computeNode.clear();
+      syntaxTree(state).iterate({
+        enter: (node) => {
+          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;
+            }
+          }
+        },
+      });
+    }
+
+    return builder.finish();
+  };
+
+  return [
+    ViewPlugin.fromClass(
+      class {
+        // Graph subscription.
+        private _subscription?: UnsubscribeCallback;
+        constructor(view: EditorView) {
+          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;
+        }
+      },
+    ),
+
+    StateField.define<RangeSet<Decoration>>({
+      create: (state) => update(state),
+      update: (rangeSet: RangeSet<Decoration>, tr: Transaction) => update(tr.state, rangeSet),
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+// TODO(burdon): Click to edit.
+class ComputeWidget extends WidgetType {
+  constructor(
+    private readonly formula: string,
+    private readonly value: CellScalarValue,
+  ) {
+    super();
+  }
+
+  override toDOM(_view: EditorView) {
+    const div = document.createElement('div');
+    div.setAttribute('title', this.formula);
+    div.innerText = String(this.value);
+    return div;
+  }
+}

package/src/{components/CellEditor → extensions/editor}/extension.test.ts

@@ -4,14 +4,12 @@
 
 import { CompletionContext, type CompletionSource } from '@codemirror/autocomplete';
 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, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../model/functions';
+import { defaultFunctions } from '../../graph';
 
 describe('formula parser', () => {
   const {
@@ -37,8 +35,8 @@ describe('formula parser', () => {
       extensions: sheetExtension({ functions }),
     });
 
-    const [f] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
-    const result = await f(new CompletionContext(state, text.length, true));
+    const [fn] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
+    const result = await fn(new CompletionContext(state, text.length, true));
     expect(result?.options).to.have.length(1);
   });
 });

package/src/{components/CellEditor → extensions/editor}/extension.ts

@@ -12,15 +12,16 @@ import {
   startCompletion,
 } from '@codemirror/autocomplete';
 import { HighlightStyle, type Language, syntaxHighlighting } from '@codemirror/language';
-import { type Extension, Facet } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { type EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 import { tags } from '@lezer/highlight';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
+import { singleValueFacet } from '@dxos/react-ui-editor/state';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type FunctionDefinition } from '../../model';
+import { type FunctionDefinition } from '../../graph';
 
 /**
  * https://codemirror.net/examples/styling
@@ -59,7 +60,7 @@ const highlightStyles = HighlightStyle.define([
   },
 ]);
 
-const languageFacet = Facet.define<Language>();
+const languageFacet = singleValueFacet<Language>();
 
 export type SheetExtensionOptions = {
   functions?: FunctionDefinition[];
@@ -165,8 +166,6 @@ 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',
@@ -231,7 +230,7 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
 
         // Find first Range or cell at cursor.
         activeRange = undefined;
-        const [language] = view.state.facet(languageFacet);
+        const language = view.state.facet(languageFacet);
         const { topNode } = language.parser.parse(view.state.doc.toString());
         visitTree(topNode, ({ type, from, to }) => {
           if (from <= anchor && to >= anchor) {

package/src/{components/CellEditor → extensions/editor}/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './CellEditor';
 export * from './extension';

package/src/extensions/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './compute';
+export * from './editor';

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

@@ -0,0 +1,93 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import { FunctionType } from '@dxos/plugin-script/types';
+import { create, useSpace, Filter } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { Toolbar, Button, Input } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { testFunctionPlugins } from './testing';
+import { createSheet } from '../defs';
+import { useComputeGraph, useSheetModel } from '../hooks';
+import { withComputeGraphDecorator } from '../testing';
+import { SheetType } from '../types';
+
+const FUNCTION_NAME = 'TEST';
+
+const Story = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const [sheet, setSheet] = useState<SheetType>();
+  const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
+  const [result, setResult] = useState<any>();
+  const model = useSheetModel(graph, sheet);
+  useEffect(() => {
+    if (space) {
+      const sheet = space.db.add(createSheet());
+      setSheet(sheet);
+    }
+  }, [space]);
+
+  useEffect(() => {
+    if (space && graph) {
+      graph.update.on(() => {
+        const f1 = graph.getFunctions({ standard: true, echo: false });
+        const f2 = graph.getFunctions({ standard: false, echo: true });
+        setResult({ functions: { standard: f1.length, echo: f2.length } });
+      });
+
+      space.db.add(create(FunctionType, { version: 1, binding: FUNCTION_NAME }));
+    }
+  }, [space, graph]);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const handleTest = async () => {
+    if (space && graph) {
+      const { objects } = await space.db.query(Filter.schema(FunctionType)).run();
+      const mapped = graph.mapFunctionBindingToId(text);
+      const unmapped = graph.mapFunctionBindingFromId(mapped);
+      const internal = graph.mapFormulaToNative(text);
+      setResult({ mapped, unmapped, internal, functions: objects.map((object) => object.id) });
+    }
+
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className='flex flex-col gap-2 '>
+      <Toolbar.Root>
+        <Input.Root>
+          <Input.TextInput
+            ref={inputRef}
+            placeholder='Formula'
+            value={text}
+            onChange={(ev) => setText(ev.target.value)}
+          />
+        </Input.Root>
+        <Button onClick={handleTest}>Test</Button>
+      </Toolbar.Root>
+      <SyntaxHighlighter language='json'>
+        {JSON.stringify({ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id, result }, null, 2)}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+export default {
+  title: 'plugin-sheet/functions',
+  decorators: [
+    withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
+    withTheme,
+  ],
+  render: (args: any) => <Story {...args} />,
+};
+
+export const Default = {};

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

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type CellValue } from 'hyperformula';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { create, fullyQualifiedId } from '@dxos/client/echo';
+import { FunctionType } from '@dxos/plugin-script/types';
+
+import { DetailedCellError } from '#hyperformula';
+import { TestBuilder } from './testing';
+
+describe('ComputeGraph', () => {
+  let testBuilder: TestBuilder;
+  beforeEach(async () => {
+    testBuilder = new TestBuilder({ types: [FunctionType] });
+    await testBuilder.open();
+  });
+  afterEach(async () => {
+    await testBuilder.close();
+  });
+
+  test('map functions', async () => {
+    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 functionObject = space.db.add(create(FunctionType, { version: 1, binding: 'TEST' }));
+    await trigger.wait();
+    const functions = graph.getFunctions({ echo: true });
+    expect(functions).to.toHaveLength(1);
+
+    const id = graph.mapFunctionBindingToId('TEST()');
+    expect(id).to.eq(`${fullyQualifiedId(functionObject)}()`);
+  });
+
+  test('cross-node references', async () => {
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+
+    // Create nodes.
+    const node1 = await graph.getOrCreateNode('node-1').open();
+    const node2 = await graph.getOrCreateNode('node-2').open();
+    expect(graph.hf.getSheetNames()).to.toHaveLength(2);
+
+    {
+      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);
+    }
+  });
+
+  // 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');
+  });
+});