@dxos/plugin-sheet 0.6.12-main.5cc132e → 0.6.12-main.7907542

package/src/{model → defs}/types.ts

@@ -4,33 +4,43 @@
 
 import { invariant } from '@dxos/invariant';
 
-export const MAX_COLUMNS = 26 * 26;
+export const DEFAULT_ROWS = 50;
+export const DEFAULT_COLUMNS = 26;
+
+export const MAX_ROWS = 500;
+export const MAX_COLUMNS = 26 * 2;
+
+export type CellAddress = { col: number; row: number };
 
-export type CellAddress = { column: number; row: number };
 export type CellRange = { from: CellAddress; to?: CellAddress };
 
+export type CellIndex = string;
+
+export type CellContentValue = number | string | boolean | null;
+
 export const posEquals = (a: CellAddress | undefined, b: CellAddress | undefined) => {
-  return a?.column === b?.column && a?.row === b?.row;
+  return a?.col === b?.col && a?.row === b?.row;
 };
 
-export const columnLetter = (column: number): string => {
-  invariant(column < MAX_COLUMNS, `Invalid column: ${column}`);
+export const columnLetter = (col: number): string => {
+  invariant(col < MAX_COLUMNS, `Invalid column: ${col}`);
   return (
-    (column >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(column / 26) - 1) : '') +
-    String.fromCharCode('A'.charCodeAt(0) + (column % 26))
+    (col >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(col / 26) - 1) : '') +
+    String.fromCharCode('A'.charCodeAt(0) + (col % 26))
   );
 };
 
-export const addressToA1Notation = ({ column, row }: CellAddress): string => {
-  return `${columnLetter(column)}${row + 1}`;
+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}`);
   return {
     row: parseInt(match[2], 10) - 1,
-    column: match[1].split('').reduce((acc, c) => acc * 26 + c.charCodeAt(0) - 'A'.charCodeAt(0) + 1, 0) - 1,
+    col: match[1].split('').reduce((acc, c) => acc * 26 + c.charCodeAt(0) - 'A'.charCodeAt(0) + 1, 0) - 1,
   };
 };
 
@@ -59,13 +69,13 @@ export const inRange = (range: CellRange | undefined, cell: CellAddress): boolea
     return false;
   }
 
-  const { column: c1, row: r1 } = from;
-  const { column: c2, row: r2 } = to;
+  const { col: c1, row: r1 } = from;
+  const { col: c2, row: r2 } = to;
   const cMin = Math.min(c1, c2);
   const cMax = Math.max(c1, c2);
   const rMin = Math.min(r1, r2);
   const rMax = Math.max(r1, r2);
 
-  const { column, row } = cell;
-  return column >= cMin && column <= cMax && row >= rMin && row <= rMax;
+  const { col, row } = cell;
+  return col >= cMin && col <= cMax && row >= rMin && row <= rMax;
 };

package/src/{model → defs}/util.ts

@@ -3,13 +3,24 @@
 //
 
 import { randomBytes } from '@dxos/crypto';
+import { create } from '@dxos/echo-schema';
 
-import { type CellRange, type CellAddress } from '.';
-import { type SheetType } 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.
 export class ApiError extends Error {}
+
 export class ReadonlyException extends ApiError {}
+
 export class RangeException extends ApiError {
   constructor(n: number) {
     super();
@@ -28,11 +39,55 @@ export const createIndex = (length = 8): string => {
 
 export const createIndices = (length: number): string[] => Array.from({ length }).map(() => createIndex());
 
+export const insertIndices = (indices: string[], i: number, n: number, max: number) => {
+  if (i + n > max) {
+    throw new RangeException(i + n);
+  }
+
+  const idx = createIndices(n);
+  indices.splice(i, 0, ...idx);
+};
+
+export const initialize = (
+  sheet: SheetType,
+  { rows = DEFAULT_ROWS, columns = DEFAULT_COLUMNS }: Partial<SheetSize> = {},
+) => {
+  if (!sheet.rows.length) {
+    insertIndices(sheet.rows, 0, rows, MAX_ROWS);
+  }
+  if (!sheet.columns.length) {
+    insertIndices(sheet.columns, 0, columns, MAX_COLUMNS);
+  }
+};
+
+export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}): SheetType => {
+  const sheet = create(SheetType, {
+    name,
+    cells: {},
+    rows: [],
+    columns: [],
+    rowMeta: {},
+    columnMeta: {},
+    formatting: {},
+  });
+
+  initialize(sheet, size);
+
+  if (cells) {
+    Object.entries(cells).forEach(([key, { value }]) => {
+      const idx = addressToIndex(sheet, addressFromA1Notation(key));
+      sheet.cells[idx] = { value };
+    });
+  }
+
+  return sheet;
+};
+
 /**
  * E.g., "A1" => "CA2@CB3".
  */
 export const addressToIndex = (sheet: SheetType, cell: CellAddress): string => {
-  return `${sheet.columns[cell.column]}@${sheet.rows[cell.row]}`;
+  return `${sheet.columns[cell.col]}@${sheet.rows[cell.row]}`;
 };
 
 /**
@@ -41,7 +96,7 @@ export const addressToIndex = (sheet: SheetType, cell: CellAddress): string => {
 export const addressFromIndex = (sheet: SheetType, idx: string): CellAddress => {
   const [column, row] = idx.split('@');
   return {
-    column: sheet.columns.indexOf(column),
+    col: sheet.columns.indexOf(column),
     row: sheet.rows.indexOf(row),
   };
 };
@@ -61,22 +116,15 @@ export const rangeFromIndex = (sheet: SheetType, idx: string): CellRange => {
   return { from, to };
 };
 
-// TODO(burdon): Factor out.
-export const pickOne = <T>(values: T[]): T => values[Math.floor(Math.random() * values.length)];
-export const pickSome = <T>(values: T[], n = 1): T[] => {
-  const result = new Set<T>();
-  while (result.size < n) {
-    result.add(pickOne(values));
-  }
-  return Array.from(result.values());
-};
-
+/**
+ * Find closest cell to cursor.
+ */
 export const closest = (cursor: CellAddress, cells: CellAddress[]): CellAddress | undefined => {
   let closestCell: CellAddress | undefined;
   let closestDistance = Number.MAX_SAFE_INTEGER;
 
   for (const cell of cells) {
-    const distance = Math.abs(cell.row - cursor.row) + Math.abs(cell.column - cursor.column);
+    const distance = Math.abs(cell.row - cursor.row) + Math.abs(cell.col - cursor.col);
     if (distance < closestDistance) {
       closestCell = cell;
       closestDistance = distance;
@@ -91,8 +139,8 @@ export const closest = (cursor: CellAddress, cells: CellAddress[]): CellAddress
  * Sorts primarily by row, then by column if rows are equal.
  */
 export const compareIndexPositions = (sheet: SheetType, indexA: string, indexB: string): number => {
-  const { row: rowA, column: columnA } = addressFromIndex(sheet, indexA);
-  const { row: rowB, column: columnB } = addressFromIndex(sheet, indexB);
+  const { row: rowA, col: columnA } = addressFromIndex(sheet, indexA);
+  const { row: rowB, col: columnB } = addressFromIndex(sheet, indexB);
 
   // Sort by row first, then by column.
   if (rowA !== rowB) {

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 { Sheet } 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'>
+      <Sheet.Root graph={graph} sheet={sheet}>
+        <Sheet.Main classNames='border border-separator' />
+      </Sheet.Root>
+    </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/extensions/index.ts

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

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 = {};