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

package/src/graph/compute-graph.ts

@@ -4,7 +4,9 @@
 
 import { type FunctionPluginDefinition } from 'hyperformula';
 import { type ConfigParams } from 'hyperformula/typings/ConfigParams';
+import { type Listeners } from 'hyperformula/typings/Emitter';
 import { type FunctionTranslationsPackage } from 'hyperformula/typings/interpreter';
+import defaultsDeep from 'lodash.defaultsdeep';
 
 import { Event } from '@dxos/async';
 import { type SpaceId, type Space, Filter, fullyQualifiedId } from '@dxos/client/echo';
@@ -15,7 +17,7 @@ import { log } from '@dxos/log';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { nonNullable } from '@dxos/util';
 
-import { HyperFormula } from '#hyperformula';
+import { ExportedCellChange, HyperFormula } from '#hyperformula';
 import { FunctionContext, type FunctionContextOptions } from './async-function';
 import { ComputeNode } from './compute-node';
 import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './edge-function';
@@ -43,14 +45,15 @@ export type ComputeGraphOptions = {
 
 export const defaultOptions: ComputeGraphOptions = {
   licenseKey: 'gpl-v3',
-  plugins: [
-    {
-      plugin: EdgeFunctionPlugin,
-      translations: EdgeFunctionPluginTranslations,
-    },
-  ],
 };
 
+export const defaultPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: EdgeFunctionPlugin,
+    translations: EdgeFunctionPluginTranslations,
+  },
+];
+
 /**
  * Marker for sheets that are managed by an ECHO object.
  */
@@ -59,34 +62,29 @@ export const createSheetName = (id: string) => `${PREFIX}${id}`;
 export const getSheetId = (name: string): string | undefined =>
   name.startsWith(PREFIX) ? name.slice(PREFIX.length) : undefined;
 
-/**
- * NOTE: Async imports to decouple hyperformula deps.
- */
-export const createComputeGraphRegistry = (options: Partial<FunctionContextOptions> = {}) => {
-  return new ComputeGraphRegistry({
-    ...defaultOptions,
-    ...options,
-  });
-};
-
 /**
  * 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.
  */
 // TODO(burdon): Move graph into separate plugin; isolate HF deps.
 export class ComputeGraphRegistry extends Resource {
-  private readonly _registry = new Map<SpaceId, ComputeGraph>();
+  private readonly _graphs = new Map<SpaceId, ComputeGraph>();
 
-  constructor(private readonly _options: ComputeGraphOptions = defaultOptions) {
+  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._registry.get(spaceId);
+    return this._graphs.get(spaceId);
   }
 
   async getOrCreateGraph(space: Space): Promise<ComputeGraph> {
@@ -100,22 +98,29 @@ export class ComputeGraphRegistry extends Resource {
   }
 
   async createGraph(space: Space): Promise<ComputeGraph> {
-    invariant(!this._registry.has(space.id), `ComputeGraph already exists for space: ${space.id}`);
+    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);
-    await graph.open(this._ctx);
-    this._registry.set(space.id, graph);
+    this._graphs.set(space.id, graph);
+    await graph.open();
     return graph;
   }
+
+  protected override async _close() {
+    for (const graph of this._graphs.values()) {
+      await graph.close();
+    }
+  }
 }
 
+export type ComputeGraphEvent = 'functionsUpdated';
+
 /**
  * Per-space compute and dependency graph.
  * Consists of multiple ComputeNode (corresponding to a HyperFormula sheet).
  * Manages the set of custom functions.
  * HyperFormula manages the dependency graph.
  */
-// TODO(burdon): Tests.
 export class ComputeGraph extends Resource {
   public readonly id = `graph-${PublicKey.random().truncate()}`;
 
@@ -125,13 +130,10 @@ export class ComputeGraph extends Resource {
   // Cached function objects.
   private _functions: FunctionType[] = [];
 
-  // The context is passed to all functions.
-  public readonly context = new FunctionContext(this._hf, this._space, this.refresh.bind(this), this._options);
+  public readonly update = new Event<{ type: ComputeGraphEvent }>();
 
-  // TODO(burdon): Typed events.
-  // TODO(burdon): Tie into HyperFormula dependency graph.
-  // TODO(burdon): Event propagation.
-  public readonly update = new Event();
+  // The context is passed to all functions.
+  public readonly context = new FunctionContext(this._hf, this._space, this._options);
 
   constructor(
     private readonly _hf: HyperFormula,
@@ -139,21 +141,36 @@ export class ComputeGraph extends Resource {
     private readonly _options?: Partial<FunctionContextOptions>,
   ) {
     super();
-
     this._hf.updateConfig({ context: this.context });
+    // TODO(burdon): If debounce then aggregate changes.
+    const onValuesUpdate: Listeners['valuesUpdated'] = (changes) => {
+      for (const change of changes) {
+        if (change instanceof ExportedCellChange) {
+          const { sheet } = change;
+          const node = this._nodes.get(sheet);
+          if (node) {
+            node.update.emit({ type: 'valuesUpdated', change });
+          }
+        }
+      }
+    };
+
+    this._hf.on('valuesUpdated', onValuesUpdate);
+    this._ctx.onDispose(() => this._hf.off('valuesUpdated', onValuesUpdate));
   }
 
-  // TODO(burdon): Remove.
   get hf() {
     return this._hf;
   }
 
-  refresh() {
-    log('refresh', { id: this.id });
-    this.update.emit();
-  }
+  // refresh() {
+  //   log('refresh', { id: this.id });
+  //   this.update.emit();
+  // }
 
-  getFunctions({ standard = true, echo = true }: { standard?: boolean; echo?: boolean } = {}): FunctionDefinition[] {
+  getFunctions(
+    { standard, echo }: { standard?: boolean; echo?: boolean } = { standard: true, echo: true },
+  ): FunctionDefinition[] {
     return [
       ...(standard
         ? this._hf
@@ -172,19 +189,19 @@ export class ComputeGraph extends Resource {
   //  This would enable on-the-fly instantiation of new models when then are referenced.
   //  E.g., Cross-object reference would be stored as "ObjectId!A1"
   //  The graph would then load the object and create a ComputeNode (model) of the appropriate type.
-  getOrCreateNode(name: string): ComputeNode {
+  async getOrCreateNode(name: string): Promise<ComputeNode> {
     invariant(name.length);
     if (!this._hf.doesSheetExist(name)) {
       log.info('created node', { space: this._space?.id, name });
       this._hf.addSheet(name);
-      this.update.emit();
+      // this.update.emit();
     }
 
     const sheetId = this._hf.getSheetId(name);
     invariant(sheetId !== undefined);
 
-    // TODO(burdon): Chain context?
     const node = new ComputeNode(this, sheetId);
+    await node.open();
     this._nodes.set(sheetId, node);
     return node;
   }
@@ -281,10 +298,16 @@ export class ComputeGraph extends Resource {
       const query = this._space.db.query(Filter.schema(FunctionType));
       const unsubscribe = query.subscribe(({ objects }) => {
         this._functions = objects.filter(({ binding }) => binding);
-        this.update.emit();
+        this.update.emit({ type: 'functionsUpdated' });
       });
 
       this._ctx.onDispose(unsubscribe);
     }
   }
+
+  protected override async _close() {
+    for (const node of this._nodes.values()) {
+      await node.close();
+    }
+  }
 }

package/src/graph/compute-node.ts

@@ -2,6 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Listeners } from 'hyperformula/typings/Emitter';
+import { type ExportedCellChange } from 'hyperformula/typings/Exporter';
+
 import { Event } from '@dxos/async';
 import { Resource } from '@dxos/context';
 
@@ -10,13 +13,17 @@ import { type ComputeGraph } from './compute-graph';
 import { type CellAddress } from '../defs';
 import { type CellScalarValue } from '../types';
 
+export type ComputeNodeEvent = {
+  type: keyof Listeners;
+  change?: ExportedCellChange;
+};
+
 /**
  * Individual "sheet" (typically corresponds to an ECHO object).
  */
 // TODO(burdon): Factor out common HF wrapper from from SheetModel.
 export class ComputeNode extends Resource {
-  // TODO(burdon): Chaing events.
-  public readonly update = new Event();
+  public readonly update = new Event<ComputeNodeEvent>();
 
   constructor(
     private readonly _graph: ComputeGraph,
@@ -25,13 +32,12 @@ export class ComputeNode extends Resource {
     super();
   }
 
-  // TODO(burdon): Remove?
   get graph() {
     return this._graph;
   }
 
-  get hf() {
-    return this._graph.hf;
+  clear() {
+    this._graph.hf.clearSheet(this.sheetId);
   }
 
   getValue(cell: CellAddress): CellScalarValue {
@@ -48,4 +54,9 @@ export class ComputeNode extends Resource {
       typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value;
     this._graph.hf.setCellContents({ sheet: this.sheetId, row: cell.row, col: cell.col }, [[mappedValue]]);
   }
+
+  protected override async _open() {
+    // const unsubscribe = this._graph.update.on(this.update.emit);
+    // this._ctx.onDispose(unsubscribe);
+  }
 }

package/src/graph/edge-function.ts

@@ -74,8 +74,7 @@ EdgeFunctionPlugin.implementedFunctions = {
       // Binding
       { argumentType: FunctionArgumentType.STRING },
 
-      // Remote function arguments (currently supporting up to 9).
-      { argumentType: FunctionArgumentType.ANY, optionalArg: true },
+      // Remote function arguments (currently supporting up to 8).
       { argumentType: FunctionArgumentType.ANY, optionalArg: true },
       { argumentType: FunctionArgumentType.ANY, optionalArg: true },
       { argumentType: FunctionArgumentType.ANY, optionalArg: true },

package/src/graph/{custom-function.ts → testing/custom-function.ts}

@@ -8,8 +8,9 @@ import { type ProcedureAst } from 'hyperformula/typings/parser';
 import { getDeep } from '@dxos/util';
 
 import { FunctionArgumentType } from '#hyperformula';
-import { type AsyncFunction, FunctionPluginAsync } from './async-function';
-import { parseNumberString } from './util';
+import { type AsyncFunction, FunctionPluginAsync } from '../async-function';
+import { type ComputeGraphPlugin } from '../compute-graph';
+import { parseNumberString } from '../util';
 
 /**
  * https://hyperformula.handsontable.com/guide/custom-functions.html#add-a-simple-custom-function
@@ -64,3 +65,10 @@ export const CustomPluginTranslations = {
     CRYPTO: 'CRYPTO',
   },
 };
+
+export const testPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: CustomPlugin,
+    translations: CustomPluginTranslations,
+  },
+];

package/src/graph/testing/index.ts

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

package/src/hooks/hooks.stories.tsx

@@ -14,14 +14,14 @@ import { withTheme } from '@dxos/storybook-utils';
 import { ComputeGraphContextProvider } from '../components';
 import { createSheet } from '../defs';
 import { useComputeGraph, useSheetModel } from '../hooks';
-import { withGraphDecorator } from '../testing';
+import { withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 
 const Story = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const [sheet, setSheet] = useState<SheetType>();
-  const model = useSheetModel(space, sheet);
+  const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (space) {
       const sheet = space.db.add(createSheet());
@@ -41,7 +41,7 @@ export default {
   component: ComputeGraphContextProvider,
   decorators: [
     withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator(),
     withTheme,
   ],
   render: (args: any) => <Story {...args} />,

package/src/hooks/useComputeGraph.ts

@@ -16,5 +16,6 @@ import { type ComputeGraph } from '../graph';
  */
 export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
   const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
-  return useAsyncState(async () => space && registry.getOrCreateGraph(space), [space, registry]);
+  const [graph] = useAsyncState(async () => space && registry.getOrCreateGraph(space), [space, registry]);
+  return graph;
 };

package/src/hooks/useSheetModel.ts

@@ -4,9 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { type Space } from '@dxos/react-client/echo';
-
-import { useComputeGraph } from './useComputeGraph';
+import { type ComputeGraph } from '../graph';
 import { SheetModel } from '../model';
 import { type SheetType } from '../types';
 
@@ -15,14 +13,13 @@ export type UseSheetModelOptions = {
 };
 
 export const useSheetModel = (
-  space?: Space,
+  graph?: ComputeGraph,
   sheet?: SheetType,
   { readonly }: UseSheetModelOptions = {},
 ): SheetModel | undefined => {
-  const graph = useComputeGraph(space);
   const [model, setModel] = useState<SheetModel>();
   useEffect(() => {
-    if (!space || !graph || !sheet) {
+    if (!graph || !sheet) {
       return;
     }
 
@@ -37,7 +34,7 @@ export const useSheetModel = (
       clearTimeout(t);
       void model?.close();
     };
-  }, [space, sheet, graph, readonly]);
+  }, [graph, sheet, readonly]);
 
   return model;
 };

package/src/model/sheet-model.ts

@@ -22,7 +22,7 @@ import {
   MAX_ROWS,
 } from '../defs';
 import { addressFromIndex, addressToIndex, initialize, insertIndices, ReadonlyException } from '../defs';
-import { type ComputeNode, type ComputeGraph, createSheetName } from '../graph';
+import { type ComputeNode, type ComputeGraph, createSheetName, type ComputeNodeEvent } from '../graph';
 import { type CellScalarValue, type CellValue, type SheetType, ValueTypeEnum } from '../types';
 
 const typeMap: Record<string, ValueTypeEnum> = {
@@ -64,9 +64,10 @@ export type SheetModelOptions = {
 export class SheetModel extends Resource {
   public readonly id = `model-${PublicKey.random().truncate()}`;
 
-  public readonly update = new Event();
+  // Wraps compute node.
+  public readonly update = new Event<ComputeNodeEvent>();
 
-  private readonly _node: ComputeNode;
+  private _node?: ComputeNode;
 
   constructor(
     private readonly _graph: ComputeGraph,
@@ -74,9 +75,6 @@ export class SheetModel extends Resource {
     private readonly _options: SheetModelOptions = {},
   ) {
     super();
-    // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
-    this._node = this._graph.getOrCreateNode(createSheetName(this._sheet.id));
-    this.reset();
   }
 
   get graph() {
@@ -104,12 +102,15 @@ export class SheetModel extends Resource {
   protected override async _open() {
     log('initialize', { id: this.id });
     initialize(this._sheet);
-    this.reset();
 
-    // TODO(burdon): Event hierarchy?
+    // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
+    this._node = await this._graph.getOrCreateNode(createSheetName(this._sheet.id));
+
     // Listen for model updates (e.g., async calculations).
-    const unsubscribe = this._graph.update.on(() => this.update.emit());
+    const unsubscribe = this._node.update.on((event) => this.update.emit(event));
     this._ctx.onDispose(unsubscribe);
+
+    this.reset();
   }
 
   /**
@@ -118,8 +119,10 @@ export class SheetModel extends Resource {
    * @deprecated
    */
   reset() {
-    this._node.hf.clearSheet(this._node.sheetId);
+    invariant(this._node);
+    this._node.graph.hf.clearSheet(this._node.sheetId);
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+      invariant(this._node);
       const { col, row } = addressFromIndex(this._sheet, key);
       if (typeof value === 'string' && value.charAt(0) === '=') {
         value = this._graph.mapFormulaToNative(
@@ -127,7 +130,7 @@ export class SheetModel extends Resource {
         );
       }
 
-      this._node.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
+      this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
     });
   }
 
@@ -139,7 +142,7 @@ export class SheetModel extends Resource {
    */
   // TODO(burdon): Remove.
   recalculate() {
-    this._node.hf.rebuildAndRecalculate();
+    this._node?.graph.hf.rebuildAndRecalculate();
   }
 
   insertRows(i: number, n = 1) {
@@ -161,9 +164,10 @@ export class SheetModel extends Resource {
    * Clear range of values.
    */
   clear(range: CellRange) {
+    invariant(this._node);
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
-    this._node.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
+    this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
@@ -171,7 +175,8 @@ export class SheetModel extends Resource {
   }
 
   cut(range: CellRange) {
-    this._node.hf.cut(toModelRange(this._node.sheetId, range));
+    invariant(this._node);
+    this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
@@ -179,12 +184,14 @@ export class SheetModel extends Resource {
   }
 
   copy(range: CellRange) {
-    this._node.hf.copy(toModelRange(this._node.sheetId, range));
+    invariant(this._node);
+    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
   }
 
   paste(cell: CellAddress) {
-    if (!this._node.hf.isClipboardEmpty()) {
-      const changes = this._node.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant(this._node);
+    if (!this._node.graph.hf.isClipboardEmpty()) {
+      const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
       for (const change of changes) {
         if (change instanceof ExportedCellChange) {
           const { address, newValue } = change;
@@ -197,16 +204,18 @@ export class SheetModel extends Resource {
 
   // TODO(burdon): Display undo/redo state.
   undo() {
-    if (this._node.hf.isThereSomethingToUndo()) {
-      this._node.hf.undo();
-      this.update.emit();
+    invariant(this._node);
+    if (this._node.graph.hf.isThereSomethingToUndo()) {
+      this._node.graph.hf.undo();
+      // this.update.emit();
     }
   }
 
   redo() {
-    if (this._node.hf.isThereSomethingToRedo()) {
-      this._node.hf.redo();
-      this.update.emit();
+    invariant(this._node);
+    if (this._node.graph.hf.isThereSomethingToRedo()) {
+      this._node.graph.hf.redo();
+      // this.update.emit();
     }
   }
 
@@ -246,7 +255,8 @@ export class SheetModel extends Resource {
    */
   getValue(cell: CellAddress): CellScalarValue {
     // Applies rounding and post-processing.
-    const value = this._node.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant(this._node);
+    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
     if (value instanceof DetailedCellError) {
       return value.toString();
     }
@@ -258,8 +268,9 @@ export class SheetModel extends Resource {
    * Get value type.
    */
   getValueType(cell: CellAddress): ValueTypeEnum {
+    invariant(this._node);
     const addr = toSimpleCellAddress(this._node.sheetId, cell);
-    const type = this._node.hf.getCellValueDetailedType(addr);
+    const type = this._node.graph.hf.getCellValueDetailedType(addr);
     return typeMap[type];
   }
 
@@ -267,6 +278,7 @@ export class SheetModel extends Resource {
    * Sets the value, updating the sheet and engine.
    */
   setValue(cell: CellAddress, value: CellScalarValue) {
+    invariant(this._node);
     if (this._options.readonly) {
       throw new ReadonlyException();
     }
@@ -288,7 +300,7 @@ export class SheetModel extends Resource {
     }
 
     // Insert into engine.
-    this._node.hf.setCellContents({ sheet: this._node.sheetId, row: cell.row, col: cell.col }, [
+    this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row: cell.row, col: cell.col }, [
       [typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value],
     ]);
 
@@ -386,14 +398,17 @@ export class SheetModel extends Resource {
   }
 
   toDateTime(num: number): SimpleDateTime {
-    return this._node.hf.numberToDateTime(num) as SimpleDateTime;
+    invariant(this._node);
+    return this._node.graph.hf.numberToDateTime(num) as SimpleDateTime;
   }
 
   toDate(num: number): SimpleDate {
-    return this._node.hf.numberToDate(num) as SimpleDate;
+    invariant(this._node);
+    return this._node.graph.hf.numberToDate(num) as SimpleDate;
   }
 
   toTime(num: number): SimpleDate {
-    return this._node.hf.numberToTime(num) as SimpleDate;
+    invariant(this._node);
+    return this._node.graph.hf.numberToTime(num) as SimpleDate;
   }
 }

package/src/testing/testing.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import type { Decorator } from '@storybook/react';
+import { type Decorator } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { type Space } from '@dxos/react-client/echo';
@@ -10,14 +10,13 @@ import { useAsyncState } from '@dxos/react-hooks';
 
 import { ComputeGraphContextProvider } from '../components';
 import { createSheet } from '../defs';
-import { type ComputeGraph, ComputeGraphRegistry } from '../graph';
+import { type ComputeGraph, type ComputeGraphOptions, ComputeGraphRegistry } from '../graph';
 import { type CellValue, type CreateSheetOptions } from '../types';
 
-export const testSheetName = 'test';
+const testSheetName = 'test';
 
-// TODO(thure): Remove this from the `/testing` entrypoint.
-export const createCells = (): Record<string, CellValue> => ({
-  B1: { value: 'Qty' },
+export const createTestCells = (): Record<string, CellValue> => ({
+  B1: { value: 'Qty2' },
   B3: { value: 1 },
   B4: { value: 2 },
   B5: { value: 3 },
@@ -45,7 +44,7 @@ export const createCells = (): Record<string, CellValue> => ({
 });
 
 export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: CreateSheetOptions) => {
-  return useAsyncState(async () => {
+  const [sheet] = useAsyncState(async () => {
     if (!space || !graph) {
       return;
     }
@@ -54,13 +53,16 @@ export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: Crea
     space.db.add(sheet);
     return sheet;
   }, [space, graph]);
+  return sheet;
 };
 
-export const withGraphDecorator: Decorator = (Story) => {
-  const [registry] = useState(new ComputeGraphRegistry());
-  return (
-    <ComputeGraphContextProvider registry={registry}>
-      <Story />
-    </ComputeGraphContextProvider>
-  );
-};
+export const withComputeGraphDecorator =
+  (options?: ComputeGraphOptions): Decorator =>
+  (Story) => {
+    const [registry] = useState(new ComputeGraphRegistry(options));
+    return (
+      <ComputeGraphContextProvider registry={registry}>
+        <Story />
+      </ComputeGraphContextProvider>
+    );
+  };

package/src/types.ts

@@ -102,7 +102,7 @@ export const RowColumnMeta = S.Struct({
 // TODO(wittjosiah): Migrate typename to remove `Type` suffix.
 // TODO(wittjosiah): Rename title to name to align with other schemas.
 export class SheetType extends TypedObject({ typename: 'dxos.org/type/SheetType', version: '0.1.0' })({
-  title: S.optional(S.String),
+  name: S.optional(S.String),
 
   // Sparse map of cells referenced by index.
   cells: S.mutable(S.Record(S.String, S.mutable(CellValue))),
@@ -132,6 +132,6 @@ export type SheetSize = {
 };
 
 export type CreateSheetOptions = {
-  // TODO(burdon): Standardize as name.
-  title?: string;
+  name?: string;
+  cells?: Record<string, CellValue>;
 } & Partial<SheetSize>;