@dxos/plugin-sheet 0.6.12-main.15a606f → 0.6.12-main.568932b

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import React, { useState } from 'react';
 
 import { log } from '@dxos/log';
-import { type Space, useSpace } from '@dxos/react-client/echo';
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -17,18 +17,19 @@ 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 { testFunctionPlugins } from '../../graph/testing';
 import { useComputeGraph } from '../../hooks';
-import { useTestSheet, withGraphDecorator } from '../../testing';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { SheetType, ValueTypeEnum } from '../../types';
 import { Toolbar, type ToolbarActionHandler } from '../Toolbar';
 
 // TODO(burdon): Allow toolbar to access sheet context; provide state for current cursor/range.
-const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) => {
+const SheetWithToolbar = ({ graph, debug }: { graph: ComputeGraph; debug?: boolean }) => {
   const { model, cursor, range } = useSheetContext();
 
-  const graph = useComputeGraph(space);
   const handleRefresh = () => {
-    graph?.refresh();
+    // graph?.refresh(); // TODO(burdon): ???
   };
 
   // TODO(burdon): Factor out.
@@ -104,7 +105,7 @@ export default {
   component: Sheet,
   decorators: [
     withClientProvider({ types: [SheetType], createIdentity: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withTheme,
     withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }),
   ],
@@ -114,14 +115,14 @@ export const Default = () => {
   const [debug, setDebug] = useState(false);
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!space || !sheet) {
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet} onInfo={() => setDebug((debug) => !debug)}>
-      <SheetWithToolbar debug={debug} space={space} />
+    <Sheet.Root graph={graph} sheet={sheet} onInfo={() => setDebug((debug) => !debug)}>
+      <SheetWithToolbar graph={graph} debug={debug} />
     </Sheet.Root>
   );
 };
@@ -129,13 +130,13 @@ export const Default = () => {
 export const Debug = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Main />
       <Sheet.Debug />
     </Sheet.Root>
@@ -147,12 +148,12 @@ export const Rows = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Rows
         rows={sheet.rows}
         sizes={rowSizes}
@@ -167,12 +168,12 @@ export const Columns = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Columns
         columns={sheet.columns}
         sizes={columnSizes}
@@ -185,13 +186,13 @@ export const Columns = () => {
 export const Main = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Grid
         size={{
           numRows: 50,

package/src/components/Sheet/Sheet.tsx

@@ -25,6 +25,7 @@ import { Resizable, type ResizeCallback, type ResizeStartCallback } from 're-res
 import React, {
   type CSSProperties,
   type DOMAttributes,
+  type KeyboardEventHandler,
   type PropsWithChildren,
   forwardRef,
   useEffect,
@@ -40,7 +41,7 @@ import { debounce } from '@dxos/async';
 import { fullyQualifiedId, createDocAccessor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
+import { ATTENABLE_ATTRIBUTE, useAttendableAttributes, useAttention, useAttentionPath } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import {
@@ -861,10 +862,8 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
       columnSizes,
     });
 
-    // TODO(burdon): Prevent scroll if not attended.
     const id = fullyQualifiedId(model.sheet);
-    const attendableAttrs = createAttendableAttributes(id);
-    const hasAttention = useHasAttention(id);
+    const { hasAttention } = useAttention(id);
 
     return (
       <div ref={containerRef} role='grid' className='relative flex grow overflow-hidden'>
@@ -872,6 +871,7 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
         <div className={mx('z-20 absolute inset-0 border border-gridLine pointer-events-none')} />
 
         {/* Grid scroll container. */}
+        {/* NOTE: Prevents scroll if not attended. */}
         <div ref={scrollerRef} className={mx('grow', hasAttention && 'overflow-auto scrollbar-thin')}>
           {/* Scroll content. */}
           <div
@@ -952,21 +952,37 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
         </div>
 
         {/* Hidden input for key navigation. */}
-        {createPortal(
-          <input
-            ref={inputRef}
-            autoFocus
-            className='absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent'
-            onKeyDown={handleKeyDown}
-            {...attendableAttrs}
-          />,
-          document.body,
-        )}
+        {createPortal(<SheetInput ref={inputRef} id={id} onKeyDown={handleKeyDown} />, document.body)}
       </div>
     );
   },
 );
 
+type SheetInputProps = {
+  id: string;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+
+const SheetInput = forwardRef<HTMLInputElement, SheetInputProps>(({ id, onKeyDown }, forwardedRef) => {
+  const path = useAttentionPath();
+  const attendableAttrs = useAttendableAttributes(id);
+
+  // TODO(wittjosiah): Consider factoring out as an attention util.
+  // Wrap input in attendable divs for each part of the path.
+  // This ensures that the sheet stays attended when the input is focused.
+  return path.toReversed().reduce(
+    (acc, part) => {
+      return <div {...{ [ATTENABLE_ATTRIBUTE]: part }}>{acc}</div>;
+    },
+    <input
+      ref={forwardedRef}
+      className='absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent'
+      onKeyDown={onKeyDown}
+      {...attendableAttrs}
+    />,
+  );
+});
+
 //
 // Selection
 //

package/src/components/Sheet/sheet-context.tsx

@@ -5,10 +5,10 @@
 import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type Space } from '@dxos/react-client/echo';
 
 import { createDecorations } from './decorations';
 import { type CellAddress, type CellRange } from '../../defs';
+import { type ComputeGraph } from '../../graph';
 import { useSheetModel, useFormattingModel } from '../../hooks';
 import { type FormattingModel, type SheetModel } from '../../model';
 import { type SheetType } from '../../types';
@@ -45,19 +45,19 @@ export const useSheetContext = (): SheetContextType => {
 };
 
 export type SheetContextProps = {
+  graph: ComputeGraph;
   sheet: SheetType;
-  space: Space;
   readonly?: boolean;
 } & Pick<SheetContextType, 'onInfo'>;
 
 export const SheetContextProvider = ({
   children,
+  graph,
   sheet,
-  space,
   readonly,
   onInfo,
 }: PropsWithChildren<SheetContextProps>) => {
-  const model = useSheetModel(space, sheet, { readonly });
+  const model = useSheetModel(graph, sheet, { readonly });
   const formatting = useFormattingModel(model);
 
   // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.

package/src/components/SheetContainer.tsx

@@ -6,27 +6,22 @@ import React, { useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { useIsDirectlyAttended } from '@dxos/react-ui-attention';
+import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
 import { focusRing, mx } from '@dxos/react-ui-theme';
 
 import { Sheet, type SheetRootProps } from './Sheet';
 import { Toolbar, type ToolbarAction } from './Toolbar';
 
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
-
 // TODO(Zan): Factor out, copied this from MarkdownPlugin.
 export const sectionToolbarLayout =
   'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
 
-const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string }) => {
+const SheetContainer = ({ graph, sheet, role }: SheetRootProps & { role?: string }) => {
   const dispatch = useIntentDispatcher();
 
   const id = fullyQualifiedId(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
+  const attendableAttrs = useAttendableAttributes(id);
+  const { hasAttention } = useAttention(id);
 
   // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
   const handleAction = useCallback(
@@ -49,15 +44,19 @@ const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string
   );
 
   return (
-    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root space={space} sheet={sheet}>
+    <div
+      role='none'
+      className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}
+      {...(role === 'article' && attendableAttrs)}
+    >
+      <Sheet.Root graph={graph} sheet={sheet}>
         <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
           <Toolbar.Root
             onAction={handleAction}
             classNames={mx(
               role === 'section'
-                ? ['z-[2] group-focus-within/section:visible', !isDirectlyAttended && 'invisible', sectionToolbarLayout]
-                : 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
+                ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
+                : 'attention-surface',
             )}
           >
             {/* TODO(Zan): Restore some of this functionality */}
@@ -73,9 +72,8 @@ const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string
           className={mx(
             role === 'section' && 'aspect-square border-is border-bs border-be border-separator',
             role === 'article' &&
-              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator',
+              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator attention-surface',
             focusRing,
-            attentionFragment,
           )}
         >
           <Sheet.Main />

package/src/defs/types.ts

@@ -34,6 +34,7 @@ export const addressToA1Notation = ({ col, row }: CellAddress): string => {
   return `${columnLetter(col)}${row + 1}`;
 };
 
+// TODO(burdon): See simpleCellAddressFromString
 export const addressFromA1Notation = (ref: string): CellAddress => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`);

package/src/defs/util.ts

@@ -5,7 +5,15 @@
 import { randomBytes } from '@dxos/crypto';
 import { create } from '@dxos/echo-schema';
 
-import { type CellAddress, type CellRange, DEFAULT_COLUMNS, DEFAULT_ROWS, MAX_COLUMNS, MAX_ROWS } from './types';
+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.
@@ -52,9 +60,9 @@ export const initialize = (
   }
 };
 
-export const createSheet = ({ title, ...size }: CreateSheetOptions = {}): SheetType => {
+export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}): SheetType => {
   const sheet = create(SheetType, {
-    title,
+    name,
     cells: {},
     rows: [],
     columns: [],
@@ -64,6 +72,14 @@ export const createSheet = ({ title, ...size }: CreateSheetOptions = {}): SheetT
   });
 
   initialize(sheet, size);
+
+  if (cells) {
+    Object.entries(cells).forEach(([key, { value }]) => {
+      const idx = addressToIndex(sheet, addressFromA1Notation(key));
+      sheet.cells[idx] = { value };
+    });
+  }
+
   return sheet;
 };
 

package/src/extensions/compute.stories.tsx

@@ -3,8 +3,9 @@
 //
 
 import '@dxos-theme';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
+import { PublicKey } from '@dxos/keys';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -13,16 +14,16 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  documentId,
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { nonNullable } from '@dxos/util';
 
-import { compute } from './compute';
+import { compute, computeGraphFacet } from './compute';
 import { Sheet } from '../components';
-import { type ComputeNode } from '../graph';
 import { useComputeGraph, useSheetModel } from '../hooks';
-import { useTestSheet, withGraphDecorator } from '../testing';
+import { useTestSheet, withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 
 const str = (...lines: string[]) => lines.join('\n');
@@ -34,20 +35,15 @@ type EditorProps = {
 // TODO(burdon): Implement named expressions.
 //  https://hyperformula.handsontable.com/guide/cell-references.html
 
-const DOC_NAME = 'Test Doc';
+// TODO(burdon): Inline Adobe eCharts.
+
 const SHEET_NAME = 'Test Sheet';
 
 const Editor = ({ text }: EditorProps) => {
+  const id = useMemo(() => PublicKey.random(), []);
   const { themeMode } = useThemeContext();
   const space = useSpace();
-  const graph = useComputeGraph(space);
-  const [node, setNode] = useState<ComputeNode>();
-  // TODO(burdon): Virtualize SheetModel.
-  useEffect(() => {
-    if (graph) {
-      setNode(graph.getOrCreateNode(DOC_NAME));
-    }
-  }, [graph]);
+  const computeGraph = useComputeGraph(space);
   const { parentRef, focusAttributes } = useTextEditor(
     () => ({
       initialValue: text,
@@ -55,11 +51,13 @@ const Editor = ({ text }: EditorProps) => {
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        node && compute(node),
+        documentId.of(id.toHex()),
+        computeGraph && computeGraphFacet.of(computeGraph),
+        compute(),
         decorateMarkdown(),
       ].filter(nonNullable),
     }),
-    [node, themeMode],
+    [computeGraph, themeMode],
   );
 
   return <div className='w-[40rem] overflow-hidden' ref={parentRef} {...focusAttributes} />;
@@ -68,21 +66,21 @@ const Editor = ({ text }: EditorProps) => {
 const Grid = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { title: SHEET_NAME });
-  const model = useSheetModel(space, sheet);
+  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 (!space || !sheet) {
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
     <div className='flex w-[40rem] overflow-hidden'>
-      <Sheet.Root space={space} sheet={sheet}>
+      <Sheet.Root graph={graph} sheet={sheet}>
         <Sheet.Main classNames='border border-separator' />
       </Sheet.Root>
     </div>
@@ -102,13 +100,14 @@ export default {
   title: 'plugin-sheet/extensions',
   decorators: [
     withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator(),
     withTheme,
     withLayout({ fullscreen: true, classNames: 'justify-center' }),
   ],
   parameters: { layout: 'fullscreen' },
 };
 
+// TODO(burdon): Inline formulae.
 export const Default = {
   render: Editor,
   args: {
@@ -146,6 +145,7 @@ export const Graph = {
       `="${SHEET_NAME}"!A5`,
       '```',
       '',
+      '',
     ),
   },
 };

package/src/extensions/compute.ts

@@ -14,85 +14,134 @@ import {
 } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 
-import { type ComputeNode } from '../graph';
+import { type UnsubscribeCallback, debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+import { documentId, singleValueFacet } from '@dxos/react-ui-editor/state';
+
+import { type CellAddress } from '../defs';
+import { type ComputeGraph, type ComputeNode, createSheetName } from '../graph';
+import { type CellScalarValue } from '../types';
 
 const LANGUAGE_TAG = 'dx';
 
 // TODO(burdon): Create marker just for our decorator?
 const updateAllDecorations = StateEffect.define<void>();
 
+export const computeGraphFacet = singleValueFacet<ComputeGraph>();
+
 export type ComputeOptions = {};
 
-export const compute = (computeNode: ComputeNode, options: ComputeOptions = {}): Extension => {
-  const update = (state: EditorState) => {
-    const builder = new RangeSetBuilder();
-    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 content = state.sliceDoc(text.from, text.to);
-                // TODO(burdon): Map unique reference onto cell; e.g., track ordered list?
-                computeNode.setValue({ col: 0, row: 0 }, content);
-                const value = computeNode.getValue({ col: 0, row: 0 });
-                builder.add(
-                  node.from,
-                  node.to,
-                  Decoration.replace({
-                    widget: new DxWidget(String(value)),
-                  }),
-                );
+export const compute = (options: ComputeOptions = {}): Extension => {
+  let computeNode: ComputeNode | undefined;
+
+  const update = (state: EditorState, current?: RangeSet<Decoration>) => {
+    const builder = new RangeSetBuilder<Decoration>();
+    if (computeNode) {
+      computeNode.clear();
+      syntaxTree(state).iterate({
+        enter: (node) => {
+          switch (node.name) {
+            case '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 = current?.iter(node.node.from);
+                    if (iter?.value && iter?.value.spec.formula === formula) {
+                      // Add existing widget.
+                      builder.add(node.from, node.to, iter.value);
+                    } else {
+                      // TODO(burdon): Create ordered list of cells on each decoration run.
+                      const cell: CellAddress = { col: node.node.from, row: 0 };
+                      invariant(computeNode);
+                      // NOTE: This triggers re-render (below).
+                      computeNode.setValue(cell, formula);
+                      const value = computeNode.getValue(cell);
+                      builder.add(
+                        node.from,
+                        node.to,
+                        Decoration.replace({
+                          widget: new ComputeWidget(formula, value),
+                          formula,
+                        }),
+                      );
+                    }
+                  }
+                }
               }
+
+              break;
             }
           }
-        }
-      },
-    });
+        },
+      });
+    }
 
     return builder.finish();
   };
 
   return [
-    // Graph subscription.
     ViewPlugin.fromClass(
       class {
-        private readonly _subscription: any;
+        // Graph subscription.
+        private _subscription?: UnsubscribeCallback;
         constructor(view: EditorView) {
-          this._subscription = computeNode.graph.update.on(() => {
-            view.dispatch({
-              effects: updateAllDecorations.of(),
+          const id = view.state.facet(documentId);
+          const computeGraph = view.state.facet(computeGraphFacet);
+          if (id && computeGraph) {
+            queueMicrotask(async () => {
+              computeNode = computeGraph.getOrCreateNode(createSheetName({ type: '', id }));
+              await computeNode.open();
+
+              // Trigger re-render if values updated.
+              // TODO(burdon): Trigger only if formula value updated (currently triggered during render).
+              this._subscription = computeNode.update.on(
+                debounce(({ type, ...rest }) => {
+                  if (type === 'valuesUpdated') {
+                    view.dispatch({
+                      effects: updateAllDecorations.of(),
+                    });
+                  }
+                }, 250),
+              );
             });
-          });
+          }
         }
 
         destroy() {
-          this._subscription();
+          this._subscription?.();
+          void computeNode?.close();
+          computeNode = undefined;
         }
       },
     ),
 
-    // Decorations.
-    StateField.define<RangeSet<any>>({
+    StateField.define<RangeSet<Decoration>>({
       create: (state) => update(state),
-      update: (_: RangeSet<any>, tr: Transaction) => update(tr.state),
+      update: (rangeSet: RangeSet<Decoration>, tr: Transaction) => update(tr.state, rangeSet),
       provide: (field) => EditorView.decorations.from(field),
     }),
   ];
 };
 
-class DxWidget extends WidgetType {
-  constructor(private readonly value: string) {
+// TODO(burdon): Click to edit.
+class ComputeWidget extends WidgetType {
+  constructor(
+    private readonly formula: string,
+    private readonly value: CellScalarValue,
+  ) {
     super();
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(_view: EditorView) {
     const div = document.createElement('div');
-    div.innerText = this.value;
+    div.setAttribute('title', this.formula);
+    div.innerText = String(this.value);
     return div;
   }
 }