@dxos/plugin-sheet 0.6.13 → 0.6.14-main.1366248

package/src/components/Toolbar/Toolbar.tsx

@@ -2,167 +2,293 @@
 // Copyright 2024 DXOS.org
 //
 
-import {
-  type Icon,
-  Calendar,
-  ChatText,
-  CurrencyDollar,
-  Eraser,
-  HighlighterCircle,
-  TextAlignCenter,
-  TextAlignLeft,
-  TextAlignRight,
-} from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, useCallback } from 'react';
 
+import { useIntentDispatcher } from '@dxos/app-framework';
 import {
-  DensityProvider,
-  ElevationProvider,
-  Toolbar as NaturalToolbar,
+  Icon,
   type ThemedClassName,
+  Toolbar as NaturalToolbar,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarToggleProps as NaturalToolbarToggleProps,
+  Tooltip,
   useTranslation,
 } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+import { nonNullable } from '@dxos/util';
 
-import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
+import {
+  alignKey,
+  type AlignKey,
+  type AlignValue,
+  type CommentKey,
+  type CommentValue,
+  inRange,
+  rangeFromIndex,
+  rangeToIndex,
+  styleKey,
+  type StyleKey,
+  type StyleValue,
+} from '../../defs';
+import { completeCellRangeToThreadCursor } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
-import { type Formatting } from '../../types';
+import { type SheetType } from '../../types';
+import { useSheetContext } from '../SheetContext';
 
 //
-// Root
+// Buttons
 //
 
-export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
+const buttonStyles = 'min-bs-0 p-2';
+const tooltipProps = { side: 'bottom' as const, classNames: 'z-10' };
+
+const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
-export type ToolbarAction = {
-  type: ToolbarActionType;
+//
+// ToolbarItem
+//
+
+type ToolbarItemProps =
+  | (NaturalToolbarButtonProps & { itemType: 'button'; icon: string })
+  | (NaturalToolbarToggleGroupItemProps & { itemType: 'toggleGroupItem'; icon: string })
+  | (NaturalToolbarToggleProps & { itemType: 'toggle'; icon: string });
+
+export const ToolbarItem = ({ itemType, icon, children, ...props }: ToolbarItemProps) => {
+  const Invoker =
+    itemType === 'toggleGroupItem'
+      ? NaturalToolbar.ToggleGroupItem
+      : itemType === 'toggle'
+        ? NaturalToolbar.Toggle
+        : NaturalToolbar.Button;
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        {/* TODO(thure): type the props spread better. */}
+        <Invoker variant='ghost' {...(props as any)} classNames={buttonStyles}>
+          <Icon icon={icon} size={5} />
+          <span className='sr-only'>{children}</span>
+        </Invoker>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
 };
 
-export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
+//
+// Root
+//
+
+type AlignAction = { key: AlignKey; value: AlignValue };
+type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: string };
+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: ToolbarActionAnnotated) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
+    role?: string;
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+const [ToolbarContextProvider, useToolbarContext] = createContext<{
+  onAction: (action: ToolbarActionAnnotated) => 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';
+
+type Range = SheetType['ranges'][number];
+
+const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
+  const { id, model, cursorFallbackRange, cursor } = useSheetContext();
+  const { hasAttention } = useAttention(id);
+  const dispatch = useIntentDispatcher();
+
+  // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
+  const handleAction = useCallback(
+    (action: ToolbarActionAnnotated) => {
+      switch (action.key) {
+        case 'alignment':
+          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,
+              value: action.value,
+            };
+            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.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);
+            }
+          } else if (cursorFallbackRange) {
+            model.sheet.ranges?.push({
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
+              key: action.key,
+              value: action.value,
+            });
+          }
+          break;
+        case 'comment': {
+          // TODO(Zan): We shouldn't hardcode the action ID.
+          if (cursorFallbackRange) {
+            void dispatch({
+              action: 'dxos.org/plugin/thread/action/create',
+              data: {
+                cursor: completeCellRangeToThreadCursor(cursorFallbackRange),
+                name: action.cellContent,
+                subject: model.sheet,
+              },
+            });
+          }
+        }
+      }
+    },
+    [model.sheet, cursorFallbackRange, cursor, dispatch],
+  );
 
-const ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {
   return (
-    <ToolbarContextProvider onAction={onAction}>
-      <DensityProvider density='fine'>
-        <ElevationProvider elevation='chrome'>
-          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>
-            {children}
-          </NaturalToolbar.Root>
-        </ElevationProvider>
-      </DensityProvider>
+    <ToolbarContextProvider onAction={handleAction}>
+      <NaturalToolbar.Root
+        classNames={[
+          'pli-0.5',
+          ...(role === 'section'
+            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
+            : ['attention-surface']),
+          classNames,
+        ]}
+      >
+        {children}
+      </NaturalToolbar.Root>
     </ToolbarContextProvider>
   );
 };
 
 // TODO(burdon): Generalize.
 // TODO(burdon): Detect and display current state.
-type ButtonProps = {
-  type: ToolbarActionType;
-  Icon: Icon;
-  getState: (state: Formatting) => boolean;
-  disabled?: (state: Formatting) => boolean;
+type ButtonProps<T> = {
+  value: T;
+  icon: string;
+  disabled?: (state: Range) => boolean;
 };
 
 //
 // Alignment
 //
 
-const formatOptions: ButtonProps[] = [
-  { type: 'date', Icon: Calendar, getState: (state) => false },
-  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },
-];
-
-const Format = () => {
-  const { onAction } = useToolbarContext('Format');
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  return (
-    <NaturalToolbar.ToggleGroup
-      type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    >
-      {formatOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
-        >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
-      ))}
-    </NaturalToolbar.ToggleGroup>
-  );
-};
-
-const alignmentOptions: ButtonProps[] = [
-  { type: 'left', Icon: TextAlignLeft, getState: (state) => false },
-  { type: 'center', Icon: TextAlignCenter, getState: (state) => false },
-  { type: 'right', Icon: TextAlignRight, getState: (state) => false },
+const alignmentOptions: ButtonProps<AlignValue>[] = [
+  { value: 'start', icon: 'ph--text-align-left--regular' },
+  { value: 'center', icon: 'ph--text-align-center--regular' },
+  { value: 'end', icon: 'ph--text-align-right--regular' },
 ];
 
 const Alignment = () => {
+  const { cursor, model } = useSheetContext();
   const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  // 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={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
+      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(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
-        >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+      {alignmentOptions.map(({ value, icon }) => (
+        <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
+          {t('toolbar action label', {
+            key: t(`range key ${alignKey} label`),
+            value: t(`range value ${value} label`),
+          })}
+        </ToolbarItem>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const styleOptions: ButtonProps[] = [
-  { type: 'clear', Icon: Eraser, getState: (state) => false },
-  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },
+const styleOptions: ButtonProps<StyleValue>[] = [
+  { value: 'highlight', icon: 'ph--highlighter--regular' },
+  { value: 'softwrap', icon: 'ph--paragraph--regular' },
 ];
 
 const Styles = () => {
-  const { onAction } = useToolbarContext('Alignment');
+  const { cursorFallbackRange, model } = useSheetContext();
+  const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  // 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 (
-    <NaturalToolbar.ToggleGroup
-      type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    >
-      {styleOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
+    <>
+      {styleOptions.map(({ value, icon }) => (
+        <ToolbarItem
+          itemType='toggle'
+          key={value}
+          pressed={activeValues?.has(value)}
+          onPressedChange={(nextPressed: boolean) => {
+            onAction?.({ key: 'style', value, unset: !nextPressed });
+          }}
+          icon={icon}
         >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+          {t('toolbar action label', {
+            key: t(`range key ${styleKey} label`),
+            value: t(`range value ${value} label`),
+          })}
+        </ToolbarItem>
       ))}
-    </NaturalToolbar.ToggleGroup>
+    </>
   );
 };
 
@@ -171,18 +297,47 @@ const Styles = () => {
 //
 
 const Actions = () => {
-  // const { onAction } = useToolbarContext('Actions');
+  const { onAction } = useToolbarContext('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')
+    .some((thread) => {
+      if (!cursorFallbackRange) {
+        return false;
+      }
+      return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
+    });
+
+  const tooltipLabelKey = !cursor
+    ? 'no cursor label'
+    : overlapsCommentAnchor
+      ? 'selection overlaps existing comment label'
+      : 'comment label';
+
   return (
-    <ToolbarButton
+    <ToolbarItem
+      itemType='button'
       value='comment'
-      Icon={ChatText}
+      icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
-      // onClick={() => onAction?.({ type: 'comment' })}
-      // disabled={!state || state.comment || !state.selection}
+      onClick={() => {
+        if (!cursorFallbackRange) {
+          return;
+        }
+        return onAction?.({
+          key: 'comment',
+          value: rangeToIndex(model.sheet, cursorFallbackRange),
+          cellContent: model.getCellText(cursorFallbackRange.from),
+        });
+      }}
+      disabled={!cursorFallbackRange || overlapsCommentAnchor}
     >
-      {t('comment label')}
-    </ToolbarButton>
+      {t(tooltipLabelKey)}
+    </ToolbarItem>
   );
 };
 
@@ -190,7 +345,6 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Separator: ToolbarSeparator,
   Alignment,
-  Format,
   Styles,
   Actions,
 };

package/src/components/index.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { lazy } from 'react';
 
 export * from './ComputeGraph';
+export * from './GridSheet';
+export * from './RangeList';
+export * from './SheetContext';
 
-// Lazily load components for content surfaces.
-export const SheetContainer = React.lazy(() => import('./SheetContainer'));
+export const SheetContainer = lazy(() => import('./SheetContainer'));

package/src/compute-graph/compute-graph-registry.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { FunctionPluginDefinition } from 'hyperformula';
+import type { ConfigParams } from 'hyperformula/typings/ConfigParams';
+import type { FunctionTranslationsPackage } from 'hyperformula/typings/interpreter';
+import defaultsDeep from 'lodash.defaultsdeep';
+
+import { type SpaceId, type Space } from '@dxos/client/echo';
+import { Resource } from '@dxos/context';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+
+import { HyperFormula } from '#hyperformula';
+import { ComputeGraph } from './compute-graph';
+import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations, type FunctionContextOptions } from './functions';
+
+export type ComputeGraphPlugin = {
+  plugin: FunctionPluginDefinition;
+  translations: FunctionTranslationsPackage;
+};
+
+export type ComputeGraphOptions = {
+  plugins?: ComputeGraphPlugin[];
+} & Partial<FunctionContextOptions> &
+  Partial<ConfigParams>;
+
+export const defaultOptions: ComputeGraphOptions = {
+  licenseKey: 'gpl-v3',
+};
+
+export const defaultPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: EdgeFunctionPlugin,
+    translations: EdgeFunctionPluginTranslations,
+  },
+];
+
+/**
+ * Manages a collection of ComputeGraph instances for each space.
+ *
+ * [ComputePlugin] => [ComputeGraphRegistry] => [ComputeGraph(Space)] => [ComputeNode(Object)]
+ *
+ * NOTE: The ComputeGraphRegistry manages the hierarchy of resources via its root Context.
+ * NOTE: The package.json file defines the packaged #hyperformula module.
+ */
+// TODO(burdon): Move graph into separate plugin; isolate HF deps.
+export class ComputeGraphRegistry extends Resource {
+  private readonly _graphs = new Map<SpaceId, ComputeGraph>();
+
+  private readonly _options: ComputeGraphOptions;
+
+  constructor(options: ComputeGraphOptions = { plugins: defaultPlugins }) {
+    super();
+    this._options = defaultsDeep({}, options, defaultOptions);
+    this._options.plugins?.forEach(({ plugin, translations }) => {
+      HyperFormula.registerFunctionPlugin(plugin, translations);
+    });
+  }
+
+  getGraph(spaceId: SpaceId): ComputeGraph | undefined {
+    return this._graphs.get(spaceId);
+  }
+
+  getOrCreateGraph(space: Space): ComputeGraph {
+    let graph = this._graphs.get(space.id);
+    if (!graph) {
+      log('create graph', { space: space.id });
+      graph = this.createGraph(space);
+    }
+
+    return graph;
+  }
+
+  createGraph(space: Space): ComputeGraph {
+    invariant(!this._graphs.has(space.id), `ComputeGraph already exists for space: ${space.id}`);
+    const hf = HyperFormula.buildEmpty(this._options);
+    const graph = new ComputeGraph(hf, space, this._options);
+    this._graphs.set(space.id, graph);
+    return graph;
+  }
+
+  protected override async _close() {
+    for (const graph of this._graphs.values()) {
+      await graph.close();
+    }
+    this._graphs.clear();
+  }
+}

package/src/compute-graph/compute-graph.stories.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { FunctionType } from '@dxos/plugin-script/types';
+import { create, useSpace, Filter } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { Toolbar, Button, Input } from '@dxos/react-ui';
+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 { useSheetModel } from '../model';
+import { withComputeGraphDecorator } from '../testing';
+import { SheetType } from '../types';
+
+const FUNCTION_NAME = 'TEST';
+
+const Story = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const [sheet, setSheet] = useState<SheetType>();
+  const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
+  const [result, setResult] = useState<any>();
+  const model = useSheetModel(graph, sheet);
+  useEffect(() => {
+    if (space) {
+      const sheet = space.db.add(createSheet());
+      setSheet(sheet);
+    }
+  }, [space]);
+
+  useEffect(() => {
+    if (space && graph) {
+      graph.update.on(() => {
+        const f1 = graph.getFunctions({ standard: true, echo: false });
+        const f2 = graph.getFunctions({ standard: false, echo: true });
+        setResult({ functions: { standard: f1.length, echo: f2.length } });
+      });
+
+      space.db.add(create(FunctionType, { version: 1, binding: FUNCTION_NAME }));
+    }
+  }, [space, graph]);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const handleTest = async () => {
+    if (space && graph) {
+      const { objects } = await space.db.query(Filter.schema(FunctionType)).run();
+      const mapped = graph.mapFunctionBindingToId(text);
+      const unmapped = graph.mapFunctionBindingFromId(mapped);
+      const internal = graph.mapFormulaToNative(text);
+      setResult({ mapped, unmapped, internal, functions: objects.map((object) => object.id) });
+    }
+
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className='flex flex-col gap-2 '>
+      <Toolbar.Root>
+        <Input.Root>
+          <Input.TextInput
+            ref={inputRef}
+            placeholder='Formula'
+            value={text}
+            onChange={(ev) => setText(ev.target.value)}
+          />
+        </Input.Root>
+        <Button onClick={handleTest}>Test</Button>
+      </Toolbar.Root>
+      <SyntaxHighlighter language='json'>
+        {JSON.stringify({ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id, result }, null, 2)}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-sheet/functions',
+  decorators: [
+    withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
+    withTheme,
+  ],
+  render: (args: any) => <Story {...args} />,
+};
+
+export default meta;