@dxos/plugin-sheet 0.6.12 → 0.6.13-main.548ca8d

package/src/graph/util.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// TODO(burdon): Factor out.
+export const parseNumberString = (str: string): number => {
+  return parseFloat(str.replace(/[^\d.]/g, ''));
+};

package/src/hooks/hooks.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useEffect, useState } from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ComputeGraphContextProvider } from '../components';
+import { createSheet } from '../defs';
+import { useComputeGraph, useSheetModel } from '../hooks';
+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(graph, sheet);
+  useEffect(() => {
+    if (space) {
+      const sheet = space.db.add(createSheet());
+      setSheet(sheet);
+    }
+  }, [space]);
+
+  return (
+    <SyntaxHighlighter language='json'>
+      {JSON.stringify({ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id }, null, 2)}
+    </SyntaxHighlighter>
+  );
+};
+
+export default {
+  title: 'plugin-sheet/hooks',
+  component: ComputeGraphContextProvider,
+  decorators: [
+    withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+  ],
+  render: (args: any) => <Story {...args} />,
+};
+
+export const Default = {};

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useComputeGraph';
+export * from './useFormattingModel';
+export * from './useSheetModel';
+export * from './threads';

package/src/hooks/threads.ts

@@ -0,0 +1,147 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+import { type MutableRefObject, 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 { addressFromIndex, addressToIndex, type CellAddress, closest } from '../defs';
+import { SHEET_PLUGIN } from '../meta';
+import { type SheetModel, type Decoration, type Decorations } from '../model';
+
+export const useUpdateFocusedCellOnThreadSelection = (
+  model: SheetModel,
+  grid: MutableRefObject<DxGridElement | null>,
+) => {
+  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;
+          }
+
+          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
+          const cellAddress = addressFromIndex(model.sheet, data.cursor);
+          grid.current?.setFocus({ ...cellAddress, plane: 'grid' }, true);
+        }
+      }
+    },
+    [model.sheet],
+  );
+
+  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+};
+
+export const useSelectThreadOnCellFocus = (model: SheetModel, cursor?: CellAddress) => {
+  const dispatch = useIntentDispatcher();
+
+  const activeThreads = useMemo(
+    () =>
+      model.sheet.threads?.filter(
+        (thread): thread is NonNullable<typeof thread> => !!thread && thread.status === 'active',
+      ) ?? [],
+    [
+      // TODO(thure): Surely we can find a better dependency for this…
+      JSON.stringify(model.sheet.threads),
+    ],
+  );
+
+  const activeThreadAddresses = useMemo(
+    () =>
+      activeThreads
+        .map((thread) => thread.anchor)
+        .filter((anchor): anchor is NonNullable<typeof anchor> => anchor !== undefined)
+        .map((anchor) => addressFromIndex(model.sheet, anchor)),
+    [activeThreads, model.sheet],
+  );
+
+  const selectClosestThread = useCallback(
+    (cellAddress: CellAddress) => {
+      if (!cellAddress || !activeThreads) {
+        return;
+      }
+
+      const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
+      if (closestThreadAnchor) {
+        const closestThread = activeThreads.find(
+          (thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor),
+        );
+
+        if (closestThread) {
+          void dispatch([
+            { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
+          ]);
+        }
+      }
+    },
+    [dispatch, activeThreads, activeThreadAddresses, model.sheet],
+  );
+
+  const debounced = useMemo(() => {
+    return debounce((cellCoords: DxGridPosition) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [selectClosestThread]);
+
+  useEffect(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [cursor, selectClosestThread]);
+};
+
+const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
+  return {
+    type: 'comment',
+    classNames: ['bg-greenFill'],
+    cellIndex,
+  };
+};
+
+export const useThreadDecorations = (model: SheetModel, decorations: Decorations) => {
+  const sheet = useMemo(() => model.sheet, [model.sheet]);
+  const sheetId = useMemo(() => fullyQualifiedId(sheet), [sheet]);
+
+  useEffect(() => {
+    const unsubscribe = effect(() => {
+      const activeThreadAnchors = new Set<string>();
+      if (!sheet.threads) {
+        return;
+      }
+
+      // Process active threads
+      for (const thread of sheet.threads) {
+        if (!thread || thread.anchor === undefined || thread.status === 'resolved') {
+          continue;
+        }
+
+        activeThreadAnchors.add(thread.anchor);
+        const index = thread.anchor;
+
+        // Add decoration only if it doesn't already exist
+        const existingDecorations = decorations.getDecorationsForCell(index);
+        if (!existingDecorations || !existingDecorations.some((d) => d.type === 'comment')) {
+          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
+        }
+      }
+
+      // Remove decorations for resolved or deleted threads
+      for (const decoration of decorations.getAllDecorations()) {
+        if (decoration.type !== 'comment') {
+          continue;
+        }
+
+        if (!activeThreadAnchors.has(decoration.cellIndex)) {
+          decorations.removeDecoration(decoration.cellIndex, 'comment');
+        }
+      }
+    });
+
+    return () => unsubscribe();
+  });
+};

package/src/hooks/useComputeGraph.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+import { type Space } from '@dxos/react-client/echo';
+import { useAsyncState } from '@dxos/react-hooks';
+
+import { ComputeGraphContext } from '../components';
+import { type ComputeGraph } from '../graph';
+
+/**
+ * Get existing or create new compute graph for the given space.
+ */
+export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph = registry.getOrCreateGraph(space);
+      await graph.open();
+      return graph;
+    }
+  }, [space, registry]);
+
+  return graph;
+};

package/src/hooks/useFormattingModel.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type SheetModel, FormattingModel } from '../model';
+
+export const useFormattingModel = (model: SheetModel | undefined): FormattingModel | undefined => {
+  return useMemo(() => model && new FormattingModel(model), [model]);
+};

package/src/hooks/useSheetModel.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type ComputeGraph } from '../graph';
+import { SheetModel } from '../model';
+import { type SheetType } from '../types';
+
+export type UseSheetModelOptions = {
+  readonly?: boolean;
+};
+
+export const useSheetModel = (
+  graph?: ComputeGraph,
+  sheet?: SheetType,
+  { readonly }: UseSheetModelOptions = {},
+): SheetModel | undefined => {
+  const [model, setModel] = useState<SheetModel>();
+  useEffect(() => {
+    if (!graph || !sheet) {
+      return;
+    }
+
+    let model: SheetModel | undefined;
+    const t = setTimeout(async () => {
+      model = new SheetModel(graph, sheet, { readonly });
+      await model.open();
+      setModel(model);
+    });
+
+    return () => {
+      clearTimeout(t);
+      void model?.close();
+    };
+  }, [graph, sheet, readonly]);
+
+  return model;
+};

package/src/meta.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
+
+export default {
+  id: SHEET_PLUGIN,
+  name: 'Sheet',
+  description: 'A simple spreadsheet plugin.',
+  icon: 'ph--grid-nine--regular',
+} satisfies PluginMeta;

package/src/model/decorations.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { create } from '@dxos/echo-schema';
+
+export type Decoration = {
+  type: string;
+  /**
+   * A wrapping render function to encapsulate cell content. This function is applied between
+   * the cell's border and its padding/layout/content, allowing for custom rendering or
+   * additional elements to be inserted around the cell's main content.
+   */
+  decorate?: (props: { children: React.ReactNode }) => React.ReactNode;
+  /**
+   * An array of CSS class names to be applied to the content of the SheetCell.
+   * These classes can be used to style the cell's content independently of its structure.
+   */
+  classNames?: string[];
+  cellIndex: string;
+};
+
+export const createDecorations = () => {
+  // Reactive object to hold decorations
+  // TODO(Zan): Use CELL ID's to key the decoration map.
+  // TODO(Zan): Consider maintaining an index of decorations by type.
+  const { decorations } = create<{ decorations: Record<string, Decoration[]> }>({ decorations: {} });
+
+  const addDecoration = (cellIndex: string, decorator: Decoration) => {
+    decorations[cellIndex] = [...(decorations[cellIndex] || []), decorator];
+  };
+
+  const removeDecoration = (cellIndex: string, type?: string) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+
+  // TODO(Zan): I should check if returning the a value from a map in a deep signal is a reactive slice.
+  const getDecorationsForCell = (cellIndex: string): Decoration[] | undefined => {
+    return decorations[cellIndex];
+  };
+
+  const getAllDecorations = (): Decoration[] => {
+    const result: Decoration[] = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations,
+  } as const;
+};
+
+export type Decorations = ReturnType<typeof createDecorations>;

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

@@ -3,18 +3,28 @@
 //
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
+import { FieldValueType } from '@dxos/schema';
 
-import { type SheetModel, type CellAddress, inRange } from '../../model';
-import { ValueTypeEnum } from '../../types';
+import { type SheetModel } from './sheet-model';
+import { type CellAddress, inRange } from '../defs';
+import { addressToIndex, rangeFromIndex } from '../defs';
 
+export type CellFormat = {
+  value?: string;
+  classNames?: ClassNameValue;
+};
+
+/**
+ * @deprecated See react-ui-data.
+ */
 export class FormattingModel {
-  constructor(private readonly model: SheetModel) {}
+  constructor(private readonly _model: SheetModel) {}
 
   /**
    * Get formatted string value and className for cell.
    */
-  getFormatting(cell: CellAddress): { value?: string; classNames?: ClassNameValue } {
-    const value = this.model.getValue(cell);
+  getFormatting(cell: CellAddress): CellFormat {
+    const value = this._model.getValue(cell);
     if (value === undefined || value === null) {
       return {};
     }
@@ -23,15 +33,15 @@ export class FormattingModel {
     const locales = undefined;
 
     // Cell-specific formatting.
-    const idx = this.model.addressToIndex(cell);
-    let formatting = this.model.sheet.formatting?.[idx] ?? {};
+    const idx = addressToIndex(this._model.sheet, cell);
+    let formatting = this._model.sheet.formatting.find?.(({ range }) => range === 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 = this.model.rangeFromIndex(idx);
+    for (const [idx, _formatting] of Object.entries(this._model.sheet.formatting)) {
+      const range = rangeFromIndex(this._model.sheet, idx);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
@@ -46,9 +56,9 @@ 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: {
+      case FieldValueType.Boolean: {
         return {
           value: (value as boolean).toLocaleString().toUpperCase(),
           classNames: [...classNames, value ? '!text-greenText' : '!text-orangeText'],
@@ -59,15 +69,15 @@ export class FormattingModel {
       // Numbers.
       //
 
-      case ValueTypeEnum.Number: {
+      case FieldValueType.Number: {
         return { value: value.toLocaleString(locales), classNames: [...classNames, defaultNumber] };
       }
 
-      case ValueTypeEnum.Percent: {
+      case FieldValueType.Percent: {
         return { value: (value as number) * 100 + '%', classNames: [...classNames, defaultNumber] };
       }
 
-      case ValueTypeEnum.Currency: {
+      case FieldValueType.Currency: {
         return {
           value: (value as number).toLocaleString(locales, {
             style: 'currency',
@@ -83,18 +93,18 @@ export class FormattingModel {
       // Dates.
       //
 
-      case ValueTypeEnum.DateTime: {
-        const date = this.model.toLocalDate(value as number);
+      case FieldValueType.DateTime: {
+        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);
+      case FieldValueType.Date: {
+        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);
+      case FieldValueType.Time: {
+        const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleTimeString(locales), classNames };
       }
 

package/src/model/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './functions';
-export * from './model';
-export * from './types';
+export * from './decorations';
+export * from './formatting-model';
+export * from './sheet-model';

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

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { FunctionType } from '@dxos/plugin-script/types';
+
+import { SheetModel } from './sheet-model';
+import { addressFromA1Notation, createSheet } from '../defs';
+import { TestBuilder, testFunctionPlugins } from '../graph/testing';
+import { type CellScalarValue } from '../types';
+
+describe('SheetModel', () => {
+  let testBuilder: TestBuilder;
+  beforeEach(async () => {
+    testBuilder = new TestBuilder({ types: [FunctionType], plugins: testFunctionPlugins });
+    await testBuilder.open();
+  });
+  afterEach(async () => {
+    await testBuilder.close();
+  });
+
+  test('async function', async () => {
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+    await graph.open();
+
+    // TODO(burdon): Create via factory.
+    const sheet = createSheet({ rows: 5, columns: 5 });
+    const model = new SheetModel(graph, sheet);
+    await model.open();
+    testBuilder.ctx.onDispose(() => model.close());
+
+    // Trigger waits for function invocation.
+    const trigger = new Trigger<CellScalarValue>();
+    model.setValue(addressFromA1Notation('A1'), '=TEST(100)');
+    model.update.once((update) => {
+      const { type } = update;
+      if (type === 'valuesUpdated') {
+        const value = model.getValue(addressFromA1Notation('A1'));
+        trigger.wake(value);
+      }
+    });
+
+    // Initial value will be null.
+    const v1 = model.getValue(addressFromA1Notation('A1'));
+    expect(v1).to.be.null;
+    expect(graph.context.info.invocations.TEST).not.to.exist;
+
+    // Wait until async update triggered.
+    const v2 = await trigger.wait();
+    expect(v2).to.eq(100);
+    expect(graph.context.info.invocations.TEST).to.eq(1);
+  });
+});