@dxos/plugin-sheet 0.6.14-main.8b352a0 → 0.6.14-staging.3e2eaca

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -11,6 +11,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
 import { SheetType } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 
@@ -38,6 +39,7 @@ const meta: Meta = {
       classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
     }),
   ],
+  parameters: { translations },
 };
 
 export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 
 import { type Space } from '@dxos/react-client/echo';
+import { StackItem } from '@dxos/react-ui-stack';
 
 import { type SheetType } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
@@ -18,16 +19,16 @@ export const SheetContainer = ({ space, sheet, role }: { space: Space; sheet: Sh
 
   return graph ? (
     <SheetProvider sheet={sheet} graph={graph}>
-      <Toolbar.Root role={role}>
-        <Toolbar.Styles />
-        <Toolbar.Alignment />
-        <Toolbar.Separator />
-        <Toolbar.Actions />
-      </Toolbar.Root>
-      <div role='none' className='border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0'>
+      <StackItem.Content toolbar statusbar classNames='border-bs border-separator'>
+        <Toolbar.Root role={role}>
+          <Toolbar.Styles />
+          <Toolbar.Alignment />
+          <Toolbar.Separator />
+          <Toolbar.Actions />
+        </Toolbar.Root>
         <GridSheet />
         <FunctionEditor />
-      </div>
+      </StackItem.Content>
     </SheetProvider>
   ) : null;
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -3,7 +3,7 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import React, { type PropsWithChildren, useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
 import {
@@ -28,6 +28,7 @@ import {
   inRange,
   rangeFromIndex,
   rangeToIndex,
+  styleKey,
   type StyleKey,
   type StyleValue,
 } from '../../defs';
@@ -89,10 +90,11 @@ type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: strin
 type StyleAction = { key: StyleKey; value: StyleValue };
 
 export type ToolbarAction = StyleAction | AlignAction | CommentAction;
+export type ToolbarActionAnnotated = ToolbarAction & { unset?: boolean };
 
 export type ToolbarActionType = ToolbarAction['key'];
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = (action: ToolbarActionAnnotated) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -100,13 +102,9 @@ export type ToolbarProps = ThemedClassName<
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<{ onAction: (action: ToolbarAction) => void }>(
-  'Toolbar',
-);
-
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-const sectionToolbarLayout =
-  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
+const [ToolbarContextProvider, useToolbarContext] = createContext<{
+  onAction: (action: ToolbarActionAnnotated) => void;
+}>('Toolbar');
 
 type Range = SheetType['ranges'][number];
 
@@ -117,13 +115,16 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
 
   // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
   const handleAction = useCallback(
-    (action: ToolbarAction) => {
+    (action: ToolbarActionAnnotated) => {
       switch (action.key) {
         case 'alignment':
-          if (cursor && cursorFallbackRange) {
-            const index = model.sheet.ranges?.findIndex(
-              (range) => range.key === action.key && inRange(rangeFromIndex(model.sheet, range.range), cursor),
-            );
+          if (cursorFallbackRange) {
+            const index =
+              model.sheet.ranges?.findIndex(
+                (range) =>
+                  range.key === action.key &&
+                  inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+              ) ?? -1;
             const nextRangeEntity = {
               range: rangeToIndex(model.sheet, cursorFallbackRange),
               key: action.key,
@@ -131,14 +132,21 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
             };
             if (index < 0) {
               model.sheet.ranges?.push(nextRangeEntity);
+            } else if (model.sheet.ranges![index].value === action.value) {
+              model.sheet.ranges?.splice(index, 1);
             } else {
               model.sheet.ranges?.splice(index, 1, nextRangeEntity);
             }
           }
           break;
         case 'style':
-          if (action.value === 'unset') {
-            const index = model.sheet.ranges?.findIndex((range) => range.key === action.key);
+          if (action.unset) {
+            const index = model.sheet.ranges?.findIndex(
+              (range) =>
+                range.key === action.key &&
+                cursorFallbackRange &&
+                inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+            );
             if (index >= 0) {
               model.sheet.ranges?.splice(index, 1);
             }
@@ -170,14 +178,7 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
 
   return (
     <ToolbarContextProvider onAction={handleAction}>
-      <NaturalToolbar.Root
-        classNames={[
-          ...(role === 'section'
-            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
-            : ['attention-surface']),
-          classNames,
-        ]}
-      >
+      <NaturalToolbar.Root classNames={['pli-0.5', !hasAttention && 'opacity-20', classNames]}>
         {children}
       </NaturalToolbar.Root>
     </ToolbarContextProvider>
@@ -207,20 +208,20 @@ const Alignment = () => {
   const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const value = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges?.find(
-            ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
-          )?.value
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  const value = cursor
+    ? model.sheet.ranges?.findLast(
+        ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
+      )?.value
+    : undefined;
 
   return (
     <NaturalToolbar.ToggleGroup
       type='single'
-      value={value}
+      value={
+        // TODO(thure): providing `undefined` leaves the last item active which was active rather than showing none.
+        value ?? 'never'
+      }
       onValueChange={(value: AlignValue) => onAction?.({ key: alignKey, value })}
     >
       {alignmentOptions.map(({ value, icon }) => (
@@ -235,25 +236,27 @@ const Alignment = () => {
   );
 };
 
-const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
+const styleOptions: ButtonProps<StyleValue>[] = [
+  { value: 'highlight', icon: 'ph--highlighter--regular' },
+  { value: 'softwrap', icon: 'ph--paragraph--regular' },
+];
 
 const Styles = () => {
-  const { cursor, model } = useSheetContext();
+  const { cursorFallbackRange, model } = useSheetContext();
   const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const activeValues = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges
-            ?.filter(({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursor))
-            .reduce((acc, { value }) => {
-              acc.add(value);
-              return acc;
-            }, new Set())
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  const activeValues = cursorFallbackRange
+    ? model.sheet.ranges
+        ?.filter(
+          ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
+        )
+        .reduce((acc, { value }) => {
+          acc.add(value);
+          return acc;
+        }, new Set())
+    : undefined;
 
   return (
     <>
@@ -262,10 +265,15 @@ const Styles = () => {
           itemType='toggle'
           key={value}
           pressed={activeValues?.has(value)}
-          onPressedChange={(nextPressed: boolean) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}
+          onPressedChange={(nextPressed: boolean) => {
+            onAction?.({ key: 'style', value, unset: !nextPressed });
+          }}
           icon={icon}
         >
-          {t(`toolbar ${value} label`)}
+          {t('toolbar action label', {
+            key: t(`range key ${styleKey} label`),
+            value: t(`range value ${value} label`),
+          })}
         </ToolbarItem>
       ))}
     </>
@@ -281,6 +289,7 @@ const Actions = () => {
   const { cursorFallbackRange, cursor, model } = useSheetContext();
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  // TODO(thure): Can this O(n) call be memoized?
   const overlapsCommentAnchor = (model.sheet.threads ?? [])
     .filter(nonNullable)
     .filter((thread) => thread.status !== 'resolved')
@@ -304,16 +313,16 @@ const Actions = () => {
       icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
       onClick={() => {
-        if (!(cursorFallbackRange && cursor)) {
+        if (!cursorFallbackRange) {
           return;
         }
         return onAction?.({
           key: 'comment',
           value: rangeToIndex(model.sheet, cursorFallbackRange),
-          cellContent: model.getCellText(cursor),
+          cellContent: model.getCellText(cursorFallbackRange.from),
         });
       }}
-      disabled={!cursor || overlapsCommentAnchor}
+      disabled={!cursorFallbackRange || overlapsCommentAnchor}
     >
       {t(tooltipLabelKey)}
     </ToolbarItem>

package/src/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';
@@ -26,8 +27,7 @@ import {
 
 // TODO(burdon): Factor out compute-graph.
 
-// TODO(wittjosiah): Factor out.
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 1 (separator) + 26 (object id).
+const UNKNOWN_BINDING = '__UNKNOWN__';
 
 // TODO(burdon): Factory.
 // export type ComputeNodeGenerator = <T>(obj: T) => ComputeNode;
@@ -44,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.
@@ -64,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,
@@ -72,6 +72,15 @@ 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.
@@ -209,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;
       }
 
@@ -219,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/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/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/sheet-range-types.ts

@@ -16,7 +16,7 @@ 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 => {
@@ -37,7 +37,9 @@ export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number
     case styleKey:
       switch (value) {
         case 'highlight':
-          return 'bg-gridHighlight';
+          return '!bg-gridHighlight';
+        case 'softwrap':
+          return '!whitespace-normal';
         default:
           return undefined;
       }

package/src/defs/util.ts

@@ -47,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 = (

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/sheet-model.test.ts

@@ -2,7 +2,7 @@
 // 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';
@@ -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'));

package/src/model/sheet-model.ts

@@ -8,11 +8,10 @@ import { type SimpleDate, type SimpleDateTime } from 'hyperformula/typings/DateT
 
 import { Event } from '@dxos/async';
 import { Resource } from '@dxos/context';
-import { getTypename } from '@dxos/echo-schema';
+import { getTypename, FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { FieldValueType } from '@dxos/schema';
 
 import { DetailedCellError, ExportedCellChange } from '#hyperformula';
 import { type ComputeGraph, type ComputeNode, type ComputeNodeEvent, createSheetName } from '../compute-graph';
@@ -21,26 +20,29 @@ import {
   addressFromIndex,
   addressToA1Notation,
   addressToIndex,
-  type CellAddress,
-  type CellRange,
   initialize,
   insertIndices,
   isFormula,
+  type CellAddress,
+  type CellRange,
+  ReadonlyException,
   MAX_COLUMNS,
   MAX_ROWS,
-  ReadonlyException,
 } from '../defs';
-import { type CellScalarValue, type CellValue, type SheetType } from '../types';
+import { type CellScalarValue, type CellValue, type SheetType, type RestoreAxis } from '../types';
 
 // Map sheet types to system types.
-const typeMap: Record<string, FieldValueType> = {
-  BOOLEAN: FieldValueType.Boolean,
-  NUMBER_RAW: FieldValueType.Number,
-  NUMBER_PERCENT: FieldValueType.Percent,
-  NUMBER_CURRENCY: FieldValueType.Currency,
-  NUMBER_DATETIME: FieldValueType.DateTime,
-  NUMBER_DATE: FieldValueType.Date,
-  NUMBER_TIME: FieldValueType.Time,
+// https://hyperformula.handsontable.com/guide/types-of-values.html
+//  - https://github.com/handsontable/hyperformula/blob/master/src/Cell.ts (CellValueType)
+//  - https://github.com/handsontable/hyperformula/blob/master/src/interpreter/InterpreterValue.ts (NumberType)
+const typeMap: Record<string, { type: TypeEnum; format?: FormatEnum }> = {
+  BOOLEAN: { type: TypeEnum.Boolean },
+  NUMBER_RAW: { type: TypeEnum.Number },
+  NUMBER_PERCENT: { type: TypeEnum.Number, format: FormatEnum.Percent },
+  NUMBER_CURRENCY: { type: TypeEnum.Number, format: FormatEnum.Currency },
+  NUMBER_DATETIME: { type: TypeEnum.String, format: FormatEnum.DateTime },
+  NUMBER_DATE: { type: TypeEnum.String, format: FormatEnum.Date },
+  NUMBER_TIME: { type: TypeEnum.String, format: FormatEnum.Time },
 };
 
 const getTopLeft = (range: CellRange): CellAddress => {
@@ -111,6 +113,12 @@ export class SheetModel extends Resource {
     log('initialize', { id: this.id });
     initialize(this._sheet);
 
+    this._graph.update.on((event) => {
+      if (event.type === 'functionsUpdated') {
+        this.reset();
+      }
+    });
+
     // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
     this._node = this._graph.getOrCreateNode(createSheetName({ type: getTypename(this._sheet)!, id: this._sheet.id }));
     await this._node.open();
@@ -134,9 +142,14 @@ export class SheetModel extends Resource {
       invariant(this._node);
       const { col, row } = addressFromIndex(this._sheet, key);
       if (isFormula(value)) {
-        value = this._graph.mapFormulaToNative(
-          this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value)),
-        );
+        const binding = this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
+        if (binding) {
+          value = this._graph.mapFormulaToNative(binding);
+        } else {
+          // If binding is not found, render the cell as empty.
+          // This prevents the cell from momentarily rendering an error while the binding is being loaded.
+          value = '';
+        }
       }
 
       this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
@@ -155,12 +168,68 @@ export class SheetModel extends Resource {
   }
 
   insertRows(i: number, n = 1) {
-    insertIndices(this._sheet.rows, i, n, MAX_ROWS);
+    const idx = insertIndices(this._sheet.rows, i, n, MAX_ROWS);
     this.reset();
+    return idx;
   }
 
   insertColumns(i: number, n = 1) {
-    insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    const idx = insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    this.reset();
+    return idx;
+  }
+
+  dropRow(rowIndex: string): RestoreAxis {
+    const range = {
+      from: addressFromIndex(this._sheet, `${this._sheet.columns[0]}@${rowIndex}`),
+      to: addressFromIndex(this._sheet, `${this._sheet.columns[this._sheet.columns.length - 1]}@${rowIndex}`),
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.rows.indexOf(rowIndex);
+    this.clear(range);
+    this._sheet.rows.splice(index, 1);
+    delete this._sheet.rowMeta[rowIndex];
+    this.reset();
+    return { axis: 'row', index, axisIndex: rowIndex, axisMeta: this._sheet.rowMeta[rowIndex], values };
+  }
+
+  dropColumn(colIndex: string): RestoreAxis {
+    const range = {
+      from: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[0]}`),
+      to: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[this._sheet.rows.length - 1]}`),
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.columns.indexOf(colIndex);
+    this.clear(range);
+    this._sheet.columns.splice(index, 1);
+    delete this._sheet.columnMeta[colIndex];
+    this.reset();
+    return { axis: 'col', index, axisIndex: colIndex, axisMeta: this._sheet.rowMeta[colIndex], values };
+  }
+
+  restoreRow({ index, axisIndex, axisMeta, values }: RestoreAxis) {
+    this._sheet.rows.splice(index, 0, axisIndex);
+    values.forEach((value, col) => {
+      if (value) {
+        this._sheet.cells[`${this._sheet.columns[col]}@${axisIndex}`] = { value };
+      }
+    });
+    if (axisMeta) {
+      this._sheet.rowMeta[axisIndex] = axisMeta;
+    }
+    this.reset();
+  }
+
+  restoreColumn({ index, axisIndex, axisMeta, values }: RestoreAxis) {
+    this._sheet.columns.splice(index, 0, axisIndex);
+    values.forEach((value, row) => {
+      if (value) {
+        this._sheet.cells[`${axisIndex}@${this._sheet.rows[row]}`] = { value };
+      }
+    });
+    if (axisMeta) {
+      this._sheet.columnMeta[axisIndex] = axisMeta;
+    }
     this.reset();
   }
 
@@ -265,8 +334,11 @@ export class SheetModel extends Resource {
   getValue(cell: CellAddress): CellScalarValue {
     // Applies rounding and post-processing.
     invariant(this._node);
-    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    const address = toSimpleCellAddress(this._node.sheetId, cell);
+    const value = this._node.graph.hf.getCellValue(address);
     if (value instanceof DetailedCellError) {
+      // TODO(wittjosiah): Error details should be shown in cell `title`.
+      log.info('cell error', { cell, error: value });
       return value.toString();
     }
 
@@ -276,7 +348,7 @@ export class SheetModel extends Resource {
   /**
    * Get value type.
    */
-  getValueType(cell: CellAddress): FieldValueType {
+  getValueDescription(cell: CellAddress): { type: TypeEnum; format?: FormatEnum } | undefined {
     invariant(this._node);
     const addr = toSimpleCellAddress(this._node.sheetId, cell);
     const type = this._node.graph.hf.getCellValueDetailedType(addr);

package/src/translations.ts

@@ -14,10 +14,13 @@ export default [
         'create sheet section label': 'Create sheet',
         'cell placeholder': 'Cell value...',
         'range key alignment label': 'Align',
-        'range value start label': 'left',
-        'range value center label': 'center',
-        'range value end label': 'right',
-        'toolbar action label': '{{key}} {{value}}',
+        'range key style label': 'Style',
+        'range value start label': 'Align left',
+        'range value center label': 'Align center',
+        'range value end label': 'Align right',
+        'range value softwrap label': 'Wrap text',
+        'range value highlight label': 'Highlight',
+        'toolbar action label': '{{value}}',
         'selection overlaps existing comment label': 'Selected cell already has a comment',
         'comment label': 'Add comment',
         'comment ranges not supported label': 'Commenting on ranges is not yet supported',
@@ -30,7 +33,9 @@ export default [
         'add row after label': 'Add row after',
         'delete row label': 'Delete row',
         'range list heading': 'Ranges',
-        'range title': '{{position}} — {{key}}: {{value}}',
+        'range title': '{{position}} — {{value}}',
+        'col dropped label': 'Deleted a column',
+        'row dropped label': 'Deleted a row',
       },
     },
   },