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

package/src/components/ComputeGraph/graph.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type FunctionPluginDefinition, HyperFormula } from 'hyperformula';
+import { type FunctionTranslationsPackage } from 'hyperformula/typings/interpreter';
+
+import { Event } from '@dxos/async';
+import { type Space } from '@dxos/client/echo';
+import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
+
+import { FunctionContext, type FunctionContextOptions } from './async-function';
+
+/**
+ * Create root graph for space.
+ */
+export const createComputeGraph = (
+  // TODO(wittjosiah): Factor out this type to make these easier to define.
+  functionPlugins: { plugin: FunctionPluginDefinition; translations: FunctionTranslationsPackage }[] = [],
+  space?: Space,
+  options?: Partial<FunctionContextOptions>,
+): ComputeGraph => {
+  functionPlugins.forEach(({ plugin, translations }) => {
+    HyperFormula.registerFunctionPlugin(plugin, translations);
+  });
+
+  const hf = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' });
+  return new ComputeGraph(hf, space, options);
+};
+
+/**
+ * Per-space compute and dependency graph.
+ */
+// TODO(burdon): Create instance for each space.
+export class ComputeGraph {
+  public readonly id = `graph-${PublicKey.random().truncate()}`;
+  public readonly update = new Event();
+
+  // The context is passed to all functions.
+  public readonly context = new FunctionContext(
+    this.hf,
+    this._space,
+    () => {
+      this.refresh();
+    },
+    this._options,
+  );
+
+  constructor(
+    public readonly hf: HyperFormula,
+    private readonly _space?: Space,
+    private readonly _options?: Partial<FunctionContextOptions>,
+  ) {
+    this.hf.updateConfig({ context: this.context });
+  }
+
+  refresh() {
+    log('refresh', { id: this.id });
+    this.update.emit();
+  }
+}

package/src/components/ComputeGraph/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './ComputeGraphContextProvider';
+export * from './async-function';
+export * from './custom';
+export * from './graph';

package/src/components/Sheet/Sheet.stories.tsx

@@ -4,34 +4,31 @@
 
 import '@dxos-theme';
 
-import React, { useState } from 'react';
+import { type Decorator } from '@storybook/react';
+import React, { useContext, useEffect, useState } from 'react';
 
+import { Client } from '@dxos/client';
+import { type EchoReactiveObject } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
-import { useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { getSpace, type Space } from '@dxos/react-client/echo';
 import { Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { Sheet } from './Sheet';
 import { type SizeMap } from './grid';
 import { useSheetContext } from './sheet-context';
-import { addressToIndex, rangeToIndex } from '../../defs';
-import { type ComputeGraph } from '../../graph';
-import { testPlugins } from '../../graph/testing';
-import { useComputeGraph } from '../../hooks';
-import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
-import { SheetType, ValueTypeEnum } from '../../types';
+import { createTestSheet, testSheetName } from '../../testing';
+import { ValueTypeEnum, SheetType } from '../../types';
+import { type ComputeGraph, createComputeGraph } from '../ComputeGraph';
+// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
+import { ComputeGraphContext, ComputeGraphContextProvider, useComputeGraph } from '../ComputeGraph/graph-context';
 import { Toolbar, type ToolbarActionHandler } from '../Toolbar';
 
 // TODO(burdon): Allow toolbar to access sheet context; provide state for current cursor/range.
-const SheetWithToolbar = ({ graph, debug }: { graph: ComputeGraph; debug?: boolean }) => {
+const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) => {
   const { model, cursor, range } = useSheetContext();
 
-  const handleRefresh = () => {
-    // graph?.refresh(); // TODO(burdon): ???
-  };
-
   // TODO(burdon): Factor out.
   const handleAction: ToolbarActionHandler = ({ type }) => {
     log.info('action', { type, cursor, range });
@@ -39,7 +36,7 @@ const SheetWithToolbar = ({ graph, debug }: { graph: ComputeGraph; debug?: boole
       return;
     }
 
-    const idx = range ? rangeToIndex(model.sheet, range) : addressToIndex(model.sheet, cursor);
+    const idx = range ? model.rangeToIndex(range) : model.addressToIndex(cursor);
     model.sheet.formatting[idx] ??= {};
     const format = model.sheet.formatting[idx];
 
@@ -78,12 +75,14 @@ const SheetWithToolbar = ({ graph, debug }: { graph: ComputeGraph; debug?: boole
         format.precision = 2;
         break;
       }
-      case 'comment': {
-        break;
-      }
     }
   };
 
+  const graph = useComputeGraph(space);
+  const handleRefresh = () => {
+    graph.refresh();
+  };
+
   return (
     <div className='flex flex-col overflow-hidden'>
       <Toolbar.Root onAction={handleAction}>
@@ -100,43 +99,56 @@ const SheetWithToolbar = ({ graph, debug }: { graph: ComputeGraph; debug?: boole
   );
 };
 
+const withGraphDecorator: Decorator = (Story) => {
+  const [graphs, setGraphs] = useState<Record<string, ComputeGraph>>({});
+
+  const setGraph = (key: string, graph: ComputeGraph) => {
+    if (!graph.hf.doesSheetExist(testSheetName)) {
+      const sheetName = graph.hf.addSheet(testSheetName);
+      const sheet = graph.hf.getSheetId(sheetName)!;
+      graph.hf.setCellContents({ sheet, col: 0, row: 0 }, Math.random());
+    }
+
+    setGraphs((graphs) => ({ ...graphs, [key]: graph }));
+  };
+
+  return (
+    <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
+      <Story />
+    </ComputeGraphContextProvider>
+  );
+};
+
 export default {
   title: 'plugin-sheet/Sheet',
   component: Sheet,
-  decorators: [
-    withClientProvider({ types: [SheetType], createIdentity: true }),
-    withComputeGraphDecorator({ plugins: testPlugins }),
-    withTheme,
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }),
-  ],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }), withGraphDecorator],
 };
 
 export const Default = () => {
   const [debug, setDebug] = useState(false);
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!graph || !sheet) {
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
+  if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root graph={graph} sheet={sheet} onInfo={() => setDebug((debug) => !debug)}>
-      <SheetWithToolbar graph={graph} debug={debug} />
+    <Sheet.Root sheet={sheet} space={space} onInfo={() => setDebug((debug) => !debug)}>
+      <SheetWithToolbar debug={debug} space={space} />
     </Sheet.Root>
   );
 };
 
 export const Debug = () => {
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!graph || !sheet) {
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
+  if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root graph={graph} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Main />
       <Sheet.Debug />
     </Sheet.Root>
@@ -145,15 +157,14 @@ export const Debug = () => {
 
 export const Rows = () => {
   const [rowSizes, setRowSizes] = useState<SizeMap>({});
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!graph || !sheet) {
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
+  if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root graph={graph} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Rows
         rows={sheet.rows}
         sizes={rowSizes}
@@ -165,15 +176,14 @@ export const Rows = () => {
 
 export const Columns = () => {
   const [columnSizes, setColumnSizes] = useState<SizeMap>({});
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!graph || !sheet) {
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
+  if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root graph={graph} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Columns
         columns={sheet.columns}
         sizes={columnSizes}
@@ -184,19 +194,18 @@ export const Columns = () => {
 };
 
 export const Main = () => {
-  const space = useSpace();
-  const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!graph || !sheet) {
+  const sheet = useTestSheet();
+  const space = getSpace(sheet);
+  if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root graph={graph} sheet={sheet}>
+    <Sheet.Root sheet={sheet} space={space}>
       <Sheet.Grid
         size={{
           numRows: 50,
-          numCols: 26,
+          numColumns: 26,
         }}
         rows={sheet.rows}
         columns={sheet.columns}
@@ -249,3 +258,30 @@ export const GridLayout = () => {
 const Cell = ({ className, label }: { className?: string; label: string }) => (
   <div className={mx('flex items-center justify-center border', className)}>{label}</div>
 );
+
+const useTestSheet = () => {
+  const { graphs, setGraph } = useContext(ComputeGraphContext);
+  const [sheet, setSheet] = useState<EchoReactiveObject<SheetType>>();
+  useEffect(() => {
+    const t = setTimeout(async () => {
+      const client = new Client();
+      await client.initialize();
+      await client.halo.createIdentity();
+      const space = await client.spaces.create();
+      client.addTypes([SheetType]);
+
+      const graph = graphs[space.id] ?? createComputeGraph();
+      if (!graphs[space.id]) {
+        setGraph(space.id, graph);
+      }
+
+      const sheet = await createTestSheet({ graph });
+      space.db.add(sheet);
+      setSheet(sheet);
+    });
+
+    return () => clearTimeout(t);
+  }, []);
+
+  return sheet;
+};

package/src/components/Sheet/Sheet.tsx

@@ -60,7 +60,6 @@ import {
 } from './grid';
 import { type GridSize, handleArrowNav, handleNav, useRangeSelect } from './nav';
 import { type SheetContextProps, SheetContextProvider, useSheetContext } from './sheet-context';
-import { useThreads } from './threads';
 import { getRectUnion, getRelativeClientRect, scrollIntoView } from './util';
 import {
   type CellIndex,
@@ -69,9 +68,7 @@ import {
   columnLetter,
   posEquals,
   rangeToA1Notation,
-  addressToIndex,
-  addressFromIndex,
-} from '../../defs';
+} from '../../model';
 import {
   CellEditor,
   type CellRangeNotifier,
@@ -138,16 +135,12 @@ const SheetRoot = ({ children, ...props }: PropsWithChildren<SheetContextProps>)
 
 type SheetMainProps = ThemedClassName<Partial<GridSize>>;
 
-const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numCols }, forwardRef) => {
+const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numColumns }, forwardRef) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
 
   // Scrolling.
   const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
 
-  // Threads.
-  // TODO(Zan): Move this to an extension once we have an extension model.
-  useThreads();
-
   //
   // Order of Row/columns.
   //
@@ -177,21 +170,21 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
   }, [rows, columns]);
 
   const handleMoveRows: SheetRowsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
+    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
     const [rows] = model.sheet.rows.splice(from, num);
     model.sheet.rows.splice(to, 0, rows);
     if (cursorIdx) {
-      setCursor(addressFromIndex(model.sheet, cursorIdx));
+      setCursor(model.addressFromIndex(cursorIdx));
     }
     setRows([...model.sheet.rows]);
   };
 
   const handleMoveColumns: SheetColumnsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
+    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
     const columns = model.sheet.columns.splice(from, num);
     model.sheet.columns.splice(to, 0, ...columns);
     if (cursorIdx) {
-      setCursor(addressFromIndex(model.sheet, cursorIdx));
+      setCursor(model.addressFromIndex(cursorIdx));
     }
     setColumns([...model.sheet.columns]);
   };
@@ -263,8 +256,8 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         ref={columnsRef}
         columns={columns}
         sizes={columnSizes}
-        selected={cursor?.col}
-        onSelect={(col) => setCursor(cursor?.col === col ? undefined : { row: -1, col })}
+        selected={cursor?.column}
+        onSelect={(column) => setCursor(cursor?.column === column ? undefined : { row: -1, column })}
         onResize={handleResizeColumn}
         onMove={handleMoveColumns}
       />
@@ -274,13 +267,13 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         rows={rows}
         sizes={rowSizes}
         selected={cursor?.row}
-        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, col: -1 })}
+        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, column: -1 })}
         onResize={handleResizeRow}
         onMove={handleMoveRows}
       />
       <SheetGrid
         ref={contentRef}
-        size={{ numRows: numRows ?? rows.length, numCols: numCols ?? columns.length }}
+        size={{ numRows: numRows ?? rows.length, numColumns: numColumns ?? columns.length }}
         rows={rows}
         columns={columns}
         rowSizes={rowSizes}
@@ -885,11 +878,11 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
 
             {/* Grid cells. */}
             {rowRange.map(({ row, top, height }) => {
-              return columnRange.map(({ col, left, width }) => {
+              return columnRange.map(({ column, left, width }) => {
                 const style: CSSProperties = { position: 'absolute', top, left, width, height };
-                const cell: CellAddress = { row, col };
+                const cell = { row, column };
                 const id = addressToA1Notation(cell);
-                const idx = addressToIndex(model.sheet, cell);
+                const idx = model.addressToIndex(cell);
                 const active = posEquals(cursor, cell);
                 if (active && editing) {
                   const value = initialText.current ?? model.getCellText(cell) ?? '';
@@ -1010,46 +1003,16 @@ type SheetCellProps = {
 };
 
 const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
-  const {
-    formatting,
-    editing,
-    setRange,
-    decorations,
-    model: { sheet },
-  } = useSheetContext();
+  const { formatting, editing, setRange } = useSheetContext();
   const { value, classNames } = formatting.getFormatting(cell);
 
-  const decorationsForCell = decorations.getDecorationsForCell(addressToIndex(sheet, cell)) ?? [];
-  const decorationAddedClasses = useMemo(
-    () => decorationsForCell.flatMap((d) => d.classNames ?? []),
-    [decorationsForCell],
-  );
-  const decoratedContent = decorationsForCell.reduce(
-    (children, { decorate }) => {
-      if (!decorate) {
-        return children;
-      }
-      const DecoratorComponent = decorate;
-      return <DecoratorComponent>{children}</DecoratorComponent>;
-    },
-    <div
-      role='none'
-      className={mx(
-        'flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer',
-        ...decorationAddedClasses,
-      )}
-    >
-      {value}
-    </div>,
-  );
-
   return (
     <div
       {...{ [`data-${CELL_DATA_KEY}`]: id }}
       role='cell'
       style={style}
       className={mx(
-        'border border-gridLine cursor-pointer',
+        'flex w-full h-full px-2 py-1 truncate items-center border border-gridLine cursor-pointer',
         fragments.cell,
         active && ['z-20', fragments.cellSelected],
         classNames,
@@ -1063,7 +1026,7 @@ const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
       }}
       onDoubleClick={() => onSelect?.(cell, true)}
     >
-      {decoratedContent}
+      {value}
     </div>
   );
 };
@@ -1082,11 +1045,10 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
       notifier.current?.(rangeToA1Notation(range));
     }
   }, [range]);
-
   const extension = useMemo(
     () => [
       editorKeys({ onNav, onClose }),
-      sheetExtension({ functions: model.graph.getFunctions() }),
+      sheetExtension({ functions: model.functions }),
       rangeExtension((fn) => (notifier.current = fn)),
     ],
     [model],
@@ -1110,13 +1072,12 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
 
 const SheetStatusBar = () => {
   const { model, cursor, range } = useSheetContext();
-
   let value;
   let isFormula = false;
   if (cursor) {
     value = model.getCellValue(cursor);
     if (typeof value === 'string' && value.charAt(0) === '=') {
-      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
+      value = model.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
       isFormula = true;
     } else if (value != null) {
       value = String(value);

package/src/{model/formatting-model.ts → components/Sheet/formatting.ts}

@@ -4,24 +4,17 @@
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
-import { type SheetModel } from './sheet-model';
-import { type CellAddress, inRange } from '../defs';
-import { addressToIndex, rangeFromIndex } from '../defs';
-import { ValueTypeEnum } from '../types';
-
-export type CellFormat = {
-  value?: string;
-  classNames?: ClassNameValue;
-};
+import { type SheetModel, type CellAddress, inRange } from '../../model';
+import { ValueTypeEnum } from '../../types';
 
 export class FormattingModel {
-  constructor(private readonly _model: SheetModel) {}
+  constructor(private readonly model: SheetModel) {}
 
   /**
    * Get formatted string value and className for cell.
    */
-  getFormatting(cell: CellAddress): CellFormat {
-    const value = this._model.getValue(cell);
+  getFormatting(cell: CellAddress): { value?: string; classNames?: ClassNameValue } {
+    const value = this.model.getValue(cell);
     if (value === undefined || value === null) {
       return {};
     }
@@ -30,15 +23,15 @@ export class FormattingModel {
     const locales = undefined;
 
     // Cell-specific formatting.
-    const idx = addressToIndex(this._model.sheet, cell);
-    let formatting = this._model.sheet.formatting?.[idx] ?? {};
+    const idx = this.model.addressToIndex(cell);
+    let formatting = this.model.sheet.formatting?.[idx] ?? {};
     const classNames = [...(formatting?.classNames ?? [])];
 
     // Range formatting.
     // TODO(burdon): NOTE: D0 means the D column.
     // TODO(burdon): Cache model formatting (e.g., for ranges). Create class out of this function.
-    for (const [idx, _formatting] of Object.entries(this._model.sheet.formatting)) {
-      const range = rangeFromIndex(this._model.sheet, idx);
+    for (const [idx, _formatting] of Object.entries(this.model.sheet.formatting)) {
+      const range = this.model.rangeFromIndex(idx);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
@@ -53,7 +46,7 @@ export class FormattingModel {
 
     const defaultNumber = 'justify-end font-mono';
 
-    const type = formatting?.type ?? this._model.getValueType(cell);
+    const type = formatting?.type ?? this.model.getValueType(cell);
     switch (type) {
       case ValueTypeEnum.Boolean: {
         return {
@@ -91,17 +84,17 @@ export class FormattingModel {
       //
 
       case ValueTypeEnum.DateTime: {
-        const date = this._model.toLocalDate(value as number);
+        const date = this.model.toLocalDate(value as number);
         return { value: date.toLocaleString(locales), classNames };
       }
 
       case ValueTypeEnum.Date: {
-        const date = this._model.toLocalDate(value as number);
+        const date = this.model.toLocalDate(value as number);
         return { value: date.toLocaleDateString(locales), classNames };
       }
 
       case ValueTypeEnum.Time: {
-        const date = this._model.toLocalDate(value as number);
+        const date = this.model.toLocalDate(value as number);
         return { value: date.toLocaleTimeString(locales), classNames };
       }
 

package/src/components/Sheet/grid.ts

@@ -4,7 +4,7 @@
 
 import { type MouseEvent, useEffect, useState } from 'react';
 
-import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../defs';
+import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../model';
 
 // export type Bounds = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
 // export type Dimension = Pick<DOMRect, 'width' | 'height'>;
@@ -12,7 +12,7 @@ import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Not
 export type SizeMap = Record<string, number>;
 
 export type RowPosition = { row: number } & Pick<DOMRect, 'top' | 'height'>;
-export type ColumnPosition = { col: number } & Pick<DOMRect, 'left' | 'width'>;
+export type ColumnPosition = { column: number } & Pick<DOMRect, 'left' | 'width'>;
 
 export const axisWidth = 'calc(var(--rail-size)-2px)';
 export const axisHeight = 34;
@@ -88,7 +88,7 @@ export const useGridLayout = ({
         const width = columnSizes?.[idx] ?? defaultWidth;
         const left = x;
         x += width - 1;
-        return { col: i, left, width };
+        return { column: i, left, width };
       }),
     );
   }, [columns, columnSizes]);