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

package/src/defs/util.ts

@@ -1,151 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { randomBytes } from '@dxos/crypto';
-import { create } from '@dxos/echo-schema';
-
-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();
-  }
-}
-
-/**
- * With a string length of 8, the chance of a collision is 0.02% for a sheet with 10,000 strings.
- */
-export const createIndex = (length = 8): string => {
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  const charactersLength = characters.length;
-  const randomBuffer = randomBytes(length);
-  return Array.from(randomBuffer, (byte) => characters[byte % charactersLength]).join('');
-};
-
-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.col]}@${sheet.rows[cell.row]}`;
-};
-
-/**
- * E.g., "CA2@CB3" => "A1".
- */
-export const addressFromIndex = (sheet: SheetType, idx: string): CellAddress => {
-  const [column, row] = idx.split('@');
-  return {
-    col: sheet.columns.indexOf(column),
-    row: sheet.rows.indexOf(row),
-  };
-};
-
-/**
- * E.g., "A1:B2" => "CA2@CB3:CC4@CD5".
- */
-export const rangeToIndex = (sheet: SheetType, range: CellRange): string => {
-  return [range.from, range.to ?? range.from].map((cell) => addressToIndex(sheet, cell)).join(':');
-};
-
-/**
- * E.g., "CA2@CB3:CC4@CD5" => "A1:B2".
- */
-export const rangeFromIndex = (sheet: SheetType, idx: string): CellRange => {
-  const [from, to] = idx.split(':').map((index) => addressFromIndex(sheet, index));
-  return { from, to };
-};
-
-/**
- * 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.col - cursor.col);
-    if (distance < closestDistance) {
-      closestCell = cell;
-      closestDistance = distance;
-    }
-  }
-
-  return closestCell;
-};
-
-/**
- * Compares the positions of two cell indexes in a sheet.
- * Sorts primarily by row, then by column if rows are equal.
- */
-export const compareIndexPositions = (sheet: SheetType, indexA: string, indexB: string): number => {
-  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) {
-    return rowA - rowB;
-  } else {
-    return columnA - columnB;
-  }
-};

package/src/extensions/compute.stories.tsx

@@ -1,153 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-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,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-import { nonNullable } from '@dxos/util';
-
-import { compute, computeNodeFacet } 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';
-
-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 DOC_NAME = 'Test Doc';
-const SHEET_NAME = 'Test Sheet';
-
-const Editor = ({ text }: EditorProps) => {
-  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 { parentRef, focusAttributes } = useTextEditor(
-    () => ({
-      initialValue: text,
-      extensions: [
-        createBasicExtensions(),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        computeNode && computeNodeFacet.of(computeNode),
-        compute(),
-        decorateMarkdown(),
-      ].filter(nonNullable),
-    }),
-    [computeNode, 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

@@ -1,131 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { Facet } from '@codemirror/state';
-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 } 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';
-
-// TODO(burdon): Create marker just for our decorator?
-const updateAllDecorations = StateEffect.define<void>();
-
-export type ComputeOptions = {};
-
-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();
-  };
-
-  return [
-    // Graph subscription.
-    ViewPlugin.fromClass(
-      class {
-        private readonly _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(),
-                });
-              }
-            });
-          }
-        }
-
-        destroy() {
-          this._subscription?.();
-        }
-      },
-    ),
-
-    StateField.define<RangeSet<Decoration>>({
-      create: (state) => update(state),
-      update: (rangeSet: RangeSet<Decoration>, tr: Transaction) => update(tr.state, rangeSet),
-      provide: (field) => EditorView.decorations.from(field),
-    }),
-  ];
-};
-
-class DxWidget 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

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

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

@@ -1,93 +0,0 @@
-//
-// 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 { testPlugins } 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: testPlugins }),
-    withTheme,
-  ],
-  render: (args: any) => <Story {...args} />,
-};
-
-export const Default = {};

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

@@ -1,127 +0,0 @@
-//
-// 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);
-  });
-});