@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.54a8bab

package/src/{graph → compute-graph}/compute-graph.stories.tsx

@@ -15,8 +15,9 @@ import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { testFunctionPlugins } from './testing';
+import { useComputeGraph } from '../components';
 import { createSheet } from '../defs';
-import { useComputeGraph, useSheetModel } from '../hooks';
+import { useSheetModel } from '../model';
 import { withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 

package/src/{graph → compute-graph}/compute-graph.ts

@@ -6,6 +6,7 @@ import { type Listeners } from 'hyperformula/typings/Emitter';
 
 import { Event } from '@dxos/async';
 import { type Space, Filter, fullyQualifiedId } from '@dxos/client/echo';
+import { FQ_ID_LENGTH } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
 import { getTypename } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -24,8 +25,9 @@ import {
   EDGE_FUNCTION_NAME,
 } from './functions';
 
-// TODO(wittjosiah): Factor out.
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 1 (separator) + 26 (object id).
+// TODO(burdon): Factor out compute-graph.
+
+const UNKNOWN_BINDING = '__UNKNOWN__';
 
 // TODO(burdon): Factory.
 // export type ComputeNodeGenerator = <T>(obj: T) => ComputeNode;
@@ -42,7 +44,7 @@ export const parseSheetName = (name: string): Partial<ObjectRef> => {
   return id ? { type, id } : { id: type };
 };
 
-export type ComputeGraphEvent = 'functionsUpdated';
+export type ComputeGraphEvent = 'functionsUpdated' | 'valuesUpdated';
 
 /**
  * Per-space compute and dependency graph.
@@ -62,7 +64,7 @@ export class ComputeGraph extends Resource {
   public readonly update = new Event<{ type: ComputeGraphEvent }>();
 
   // The context is passed to all functions.
-  public readonly context = new FunctionContext(this._hf, this._space, this._options);
+  public readonly context: FunctionContext;
 
   constructor(
     private readonly _hf: HyperFormula,
@@ -70,7 +72,17 @@ export class ComputeGraph extends Resource {
     private readonly _options?: Partial<FunctionContextOptions>,
   ) {
     super();
+
+    const contextOptions = {
+      ...this._options,
+      onUpdate: (update) => {
+        this._options?.onUpdate?.(update);
+        this.update.emit({ type: 'valuesUpdated' });
+      },
+    } satisfies Partial<FunctionContextOptions>;
+    this.context = new FunctionContext(this._hf, this._space, contextOptions);
     this._hf.updateConfig({ context: this.context });
+
     // TODO(burdon): If debounce then aggregate changes.
     const onValuesUpdate: Listeners['valuesUpdated'] = (changes) => {
       for (const change of changes) {
@@ -116,7 +128,7 @@ export class ComputeGraph extends Resource {
   getOrCreateNode(name: string): ComputeNode {
     invariant(name.length);
     if (!this._hf.doesSheetExist(name)) {
-      log.info('created node', { space: this._space?.id, sheet: name });
+      log('created node', { space: this._space?.id, sheet: name });
       this._hf.addSheet(name);
     }
 
@@ -130,7 +142,7 @@ export class ComputeGraph extends Resource {
 
   /**
    * Map bound value to custom function invocation.
-   * E.g., "HELLO(...args)" => "EDGE("HELLO", ...args)".
+   * E.g., "HELLO(...args)" => "DX("HELLO", ...args)".
    */
   mapFormulaToNative(formula: string): string {
     return (
@@ -206,9 +218,9 @@ export class ComputeGraph extends Resource {
    * E.g., spaceId:objectId() => HELLO()
    */
   mapFunctionBindingFromId(formula: string) {
-    return formula.replace(/(\w+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
+    const binding = formula.replace(/(\w+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
       const id = `${spaceId}:${objectId}`;
-      if (id.length !== OBJECT_ID_LENGTH) {
+      if (id.length !== FQ_ID_LENGTH) {
         return match;
       }
 
@@ -216,9 +228,15 @@ export class ComputeGraph extends Resource {
       if (fn?.binding) {
         return `${fn.binding}(${args})`;
       } else {
-        return match;
+        return UNKNOWN_BINDING;
       }
     });
+
+    if (binding.startsWith(`=${UNKNOWN_BINDING}`)) {
+      return undefined;
+    } else {
+      return binding;
+    }
   }
 
   protected override async _open() {

package/src/{graph → compute-graph}/compute-node.ts

@@ -10,7 +10,7 @@ import { Resource } from '@dxos/context';
 
 import { DetailedCellError } from '#hyperformula';
 import { type ComputeGraph } from './compute-graph';
-import { type CellAddress } from '../defs';
+import { type CellAddress, isFormula } from '../defs';
 import { type CellScalarValue } from '../types';
 
 export type ComputeNodeEvent = {
@@ -50,8 +50,7 @@ export class ComputeNode extends Resource {
   }
 
   setValue(cell: CellAddress, value: CellScalarValue) {
-    const mappedValue =
-      typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value;
+    const mappedValue = isFormula(value) ? this._graph.mapFormulaToNative(value) : value;
     this._graph.hf.setCellContents({ sheet: this.sheetId, row: cell.row, col: cell.col }, [[mappedValue]]);
   }
 

package/src/{graph → compute-graph}/functions/async-function.ts

@@ -83,6 +83,7 @@ export class FunctionContext {
   ) {
     this._options = defaultsDeep(_options ?? {}, defaultFunctionContextOptions);
     this._onUpdate = debounce((update) => {
+      log('update', update);
       // TODO(burdon): Better way to trigger recalculation? (NOTE: rebuildAndRecalculate resets the undo history.)
       this._hf.resumeEvaluation();
       this._options.onUpdate?.(update);

package/src/{graph → compute-graph}/functions/edge-function.ts

@@ -44,7 +44,7 @@ export class EdgeFunctionPlugin extends AsyncFunctionPlugin {
 
         if (subscribe) {
           const unsubscribe = effect(() => {
-            log.info('function changed', { fn });
+            log('function changed', { fn });
             const _ = fn?.version;
 
             // TODO(wittjosiah): `ttl` should be 0 to force a recalculation when a new version is deployed.
@@ -56,13 +56,15 @@ export class EdgeFunctionPlugin extends AsyncFunctionPlugin {
         }
 
         const path = getUserFunctionUrlInMetadata(getMeta(fn));
-        const result = await fetch(`${this.context.remoteFunctionUrl}${path}`, {
+        const response = await fetch(`${this.context.remoteFunctionUrl}${path}`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ args: args.filter(nonNullable) }),
         });
+        const result = await response.text();
+        log('function executed', { result });
 
-        return await result.text();
+        return result;
       };
 
     return this.runAsyncFunction(ast, state, handler(true), { ttl: FUNCTION_TTL });

package/src/defs/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './sheet-range-types';
 export * from './types';
 export * from './util';
-export * from './sheet-range-types';

package/src/defs/sheet-range-types.ts

@@ -6,7 +6,7 @@ import { type ClassNameValue } from '@dxos/react-ui';
 
 import { type SheetType } from '../types';
 
-export const alignKey = 'align';
+export const alignKey = 'alignment';
 export type AlignKey = typeof alignKey;
 export type AlignValue = 'start' | 'center' | 'end' | 'unset';
 
@@ -16,11 +16,12 @@ export type CommentValue = string;
 
 export const styleKey = 'style';
 export type StyleKey = typeof styleKey;
-export type StyleValue = 'highlight' | 'unset';
+export type StyleValue = 'highlight' | 'softwrap';
 
+// TODO(burdon): Reconcile with plugin-table.
 export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number]): ClassNameValue => {
   switch (key) {
-    case 'align':
+    case alignKey:
       switch (value) {
         case 'start':
           return 'text-start';
@@ -31,12 +32,14 @@ export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number
         default:
           return undefined;
       }
-    case 'comment':
+    case commentKey:
       return 'bg-gridComment';
-    case 'style':
+    case styleKey:
       switch (value) {
         case 'highlight':
-          return 'bg-gridHighlight';
+          return '!bg-gridHighlight';
+        case 'softwrap':
+          return '!whitespace-normal';
         default:
           return undefined;
       }

package/src/defs/types.ts

@@ -13,11 +13,16 @@ export const MAX_COLUMNS = 26 * 2;
 export type CellAddress = { col: number; row: number };
 
 export type CellRange = { from: CellAddress; to?: CellAddress };
+export type CompleteCellRange = { from: CellAddress; to: CellAddress };
 
 export type CellIndex = string;
 
 export type CellContentValue = number | string | boolean | null;
 
+export const RANGE_NOTATION = /^[A-Z]+[0-9]+(:[A-Z]+[0-9]+)?$/;
+
+export const isFormula = (value: any): value is string => typeof value === 'string' && value.charAt(0) === '=';
+
 export const posEquals = (a: CellAddress | undefined, b: CellAddress | undefined) => {
   return a?.col === b?.col && a?.row === b?.row;
 };
@@ -34,7 +39,7 @@ export const addressToA1Notation = ({ col, row }: CellAddress): string => {
   return `${columnLetter(col)}${row + 1}`;
 };
 
-// TODO(burdon): See simpleCellAddressFromString
+// TODO(burdon): See (HF) simpleCellAddressFromString.
 export const addressFromA1Notation = (ref: string): CellAddress => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`);

package/src/defs/util.ts

@@ -9,6 +9,7 @@ import {
   addressFromA1Notation,
   type CellAddress,
   type CellRange,
+  type CompleteCellRange,
   DEFAULT_COLUMNS,
   DEFAULT_ROWS,
   MAX_COLUMNS,
@@ -46,6 +47,7 @@ export const insertIndices = (indices: string[], i: number, n: number, max: numb
 
   const idx = createIndices(n);
   indices.splice(i, 0, ...idx);
+  return idx;
 };
 
 export const initialize = (
@@ -69,6 +71,7 @@ export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}):
     rowMeta: {},
     columnMeta: {},
     ranges: [],
+    threads: [],
   });
 
   initialize(sheet, size);
@@ -111,29 +114,11 @@ export const rangeToIndex = (sheet: SheetType, range: CellRange): string => {
 /**
  * E.g., "CA2@CB3:CC4@CD5" => "A1:B2".
  */
-export const rangeFromIndex = (sheet: SheetType, idx: string): CellRange => {
+export const rangeFromIndex = (sheet: SheetType, idx: string): CompleteCellRange => {
   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.

package/src/extensions/compute.stories.tsx

@@ -23,8 +23,8 @@ 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 { GridSheet, SheetProvider, useComputeGraph } from '../components';
+import { useSheetModel } from '../model';
 import { useTestSheet, withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 

package/src/extensions/compute.ts

@@ -16,10 +16,10 @@ 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 { documentId, singleValueFacet } from '@dxos/react-ui-editor';
 
+import { type ComputeGraph, type ComputeNode, createSheetName } from '../compute-graph';
 import { type CellAddress } from '../defs';
-import { type ComputeGraph, type ComputeNode, createSheetName } from '../graph';
 import { type CellScalarValue } from '../types';
 
 const LANGUAGE_TAG = 'dx';

package/src/extensions/editor/extension.test.ts

@@ -9,7 +9,7 @@ import { spreadsheet } from 'codemirror-lang-spreadsheet';
 import { describe, expect, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../graph';
+import { defaultFunctions } from '../../compute-graph';
 
 describe('formula parser', () => {
   const {

package/src/extensions/editor/extension.ts

@@ -18,10 +18,11 @@ 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 { singleValueFacet } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type FunctionDefinition } from '../../graph';
+import { type FunctionDefinition } from '../../compute-graph';
+import { RANGE_NOTATION } from '../../defs';
 
 /**
  * https://codemirror.net/examples/styling
@@ -195,34 +196,53 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
   ];
 };
 
-export type CellRangeNotifier = (range: string) => void;
-
-type Range = { from: number; to: number };
+export type SelectionRange = { from: number; to: number };
+
+export interface RangeController {
+  setRange(range: string): void;
+}
+
+export type RangeExtensionOptions = {
+  /**
+   * Provides controller callback when extension is initialized.
+   */
+  onInit?: (controller: RangeController) => void;
+  /**
+   * Called when the active range changes.
+   * @param state The current state.
+   * @param state.activeRange undefined if no range is active, otherwise a possibly partially defined range.
+   */
+  onStateChange?: (state: { activeRange: string | undefined }) => void;
+};
 
 /**
  * Tracks the currently active cell within a formula and provides a callback to modify it.
  */
-export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): Extension => {
+export const rangeExtension = ({ onInit, onStateChange }: RangeExtensionOptions): Extension => {
   let view: EditorView;
-  let activeRange: Range | undefined;
-  const provider: CellRangeNotifier = (range: string) => {
-    if (activeRange) {
-      view.dispatch(
-        view.state.update({
-          changes: { ...activeRange, insert: range.toString() },
-          selection: { anchor: activeRange.from + range.length },
-        }),
-      );
-    }
+  let activeRange: SelectionRange | undefined;
 
-    view.focus();
+  // Called externally to provide current range.
+  const notifier: RangeController = {
+    setRange: (range: string) => {
+      if (activeRange) {
+        view.dispatch(
+          view.state.update({
+            changes: { ...activeRange, insert: range.toString() },
+            selection: { anchor: activeRange.from + range.length },
+          }),
+        );
+      }
+
+      view.focus();
+    },
   };
 
   return ViewPlugin.fromClass(
     class {
       constructor(_view: EditorView) {
         view = _view;
-        onInit(provider);
+        onInit?.(notifier);
       }
 
       update(view: ViewUpdate) {
@@ -235,17 +255,15 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
         visitTree(topNode, ({ type, from, to }) => {
           if (from <= anchor && to >= anchor) {
             switch (type.name) {
-              case 'Function': {
+              case 'Function':
                 // Mark but keep looking.
                 activeRange = { from: to, to };
                 break;
-              }
 
-              case 'CloseParen': {
+              case 'CloseParen':
                 // Mark but keep looking.
                 activeRange = { from, to: from };
                 break;
-              }
 
               case 'RangeToken':
               case 'CellToken':
@@ -259,8 +277,15 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
 
         // Allow start of formula.
         if (!activeRange && view.state.doc.toString()[0] === '=') {
-          activeRange = { from: 1, to: view.state.doc.toString().length };
+          const str = view.state.doc.sliceString(1);
+          if (RANGE_NOTATION.test(str)) {
+            activeRange = { from: 1, to: str.length + 1 };
+          }
         }
+
+        onStateChange?.({
+          activeRange: activeRange ? view.state.doc.sliceString(activeRange.from, activeRange.to) : undefined,
+        });
       }
     },
   );

package/src/index.ts

@@ -4,6 +4,6 @@
 
 import { SheetPlugin } from './SheetPlugin';
 
-export default SheetPlugin;
-
 export * from './SheetPlugin';
+
+export default SheetPlugin;

package/src/integrations/index.ts

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

package/src/integrations/thread-ranges.ts

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
+import { debounce } from '@dxos/async';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type DxGridElement, type DxGridPosition } from '@dxos/react-ui-grid';
+
+import { useSheetContext } from '../components';
+import { type CellAddress, type CompleteCellRange, inRange } from '../defs';
+import { SHEET_PLUGIN } from '../meta';
+
+export const completeCellRangeToThreadCursor = (range: CompleteCellRange): string => {
+  return `${range.from.col},${range.from.row},${range.to.col},${range.to.row}`;
+};
+
+export const parseThreadAnchorAsCellRange = (cursor: string): CompleteCellRange | null => {
+  const coords = cursor.split(',');
+  if (coords.length !== 4) {
+    return null;
+  } else {
+    const [fromCol, fromRow, toCol, toRow] = coords;
+    return {
+      from: { col: parseInt(fromCol), row: parseInt(fromRow) },
+      to: { col: parseInt(toCol), row: parseInt(toRow) },
+    };
+  }
+};
+
+export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null) => {
+  const { model, setActiveRefs } = useSheetContext();
+  const handleScrollIntoView: IntentResolver = useCallback(
+    ({ action, data }) => {
+      switch (action) {
+        case LayoutAction.SCROLL_INTO_VIEW: {
+          if (!data?.id || data?.cursor === undefined || data?.id !== fullyQualifiedId(model.sheet)) {
+            return;
+          }
+          setActiveRefs(data.thread);
+          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
+          const range = parseThreadAnchorAsCellRange(data.cursor);
+          range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
+        }
+      }
+    },
+    [model.sheet, setActiveRefs],
+  );
+
+  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+};
+
+export const useSelectThreadOnCellFocus = () => {
+  const { model, cursor } = useSheetContext();
+  const dispatch = useIntentDispatcher();
+
+  const threads = useMemo(
+    () => model.sheet.threads?.filter((thread): thread is NonNullable<typeof thread> => !!thread) ?? [],
+    [
+      // TODO(thure): Surely we can find a better dependency for this…
+      JSON.stringify(model.sheet.threads),
+    ],
+  );
+
+  const selectClosestThread = useCallback(
+    (cellAddress: CellAddress) => {
+      if (!cellAddress || !threads) {
+        return;
+      }
+
+      const closestThread = threads?.find(({ anchor }) => {
+        if (anchor) {
+          const range = parseThreadAnchorAsCellRange(anchor);
+          return range ? inRange(range, cellAddress) : false;
+        } else {
+          return false;
+        }
+      });
+
+      if (closestThread) {
+        void dispatch([
+          { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
+        ]);
+      }
+    },
+    [dispatch, threads],
+  );
+
+  const debounced = useMemo(() => {
+    return debounce((cellCoords: DxGridPosition) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [selectClosestThread]);
+
+  useEffect(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [cursor, debounced]);
+};

package/src/meta.ts

@@ -11,4 +11,5 @@ export default {
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
   icon: 'ph--grid-nine--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-sheet',
 } satisfies PluginMeta;

package/src/model/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './decorations';
 export * from './sheet-model';
+export * from './useSheetModel';

package/src/model/sheet-model.test.ts

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'vitest';
 
 import { Trigger } from '@dxos/async';
 import { FunctionType } from '@dxos/plugin-script/types';
 
 import { SheetModel } from './sheet-model';
+import { TestBuilder, testFunctionPlugins } from '../compute-graph/testing';
 import { addressFromA1Notation, createSheet } from '../defs';
-import { TestBuilder, testFunctionPlugins } from '../graph/testing';
 import { type CellScalarValue } from '../types';
 
 describe('SheetModel', () => {
@@ -36,13 +36,15 @@ describe('SheetModel', () => {
     // Trigger waits for function invocation.
     const trigger = new Trigger<CellScalarValue>();
     model.setValue(addressFromA1Notation('A1'), '=TEST(100)');
-    model.update.once((update) => {
+    // TODO(wittjosiah): Currently this fires twice, once for the binding loading & once for the function invocation.
+    const unsubscribe = model.update.on((update) => {
       const { type } = update;
       if (type === 'valuesUpdated') {
         const value = model.getValue(addressFromA1Notation('A1'));
-        trigger.wake(value);
+        value && trigger.wake(value);
       }
     });
+    onTestFinished(() => unsubscribe());
 
     // Initial value will be null.
     const v1 = model.getValue(addressFromA1Notation('A1'));