@dxos/plugin-explorer 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/src/components/Graph/D3ForceGraph.stories.tsx

@@ -1,64 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { DataType } from '@dxos/schema';
-import { type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme, render } from '@dxos/storybook-utils';
-
-import { D3ForceGraph } from './D3ForceGraph';
-import { generate } from './testing';
-import { useGraphModel } from '../../hooks';
-import { ViewType } from '../../types';
-
-const generator = faker as any as ValueGenerator;
-
-faker.seed(1);
-
-const DefaultStory = () => {
-  const client = useClient();
-  const [space, setSpace] = useState<Space>();
-  const [view, setView] = useState<ViewType>();
-  useEffect(() => {
-    const space = client.spaces.default;
-    void generate(space, generator);
-    const view = space.db.add(Obj.make(ViewType, { name: '', type: '' }));
-    setSpace(space);
-    setView(view);
-  }, []);
-
-  const model = useGraphModel(space);
-  if (!model || !space || !view) {
-    return null;
-  }
-
-  return <D3ForceGraph model={model} />;
-};
-
-const meta: Meta = {
-  title: 'plugins/plugin-explorer/D3ForceGraph',
-  component: D3ForceGraph,
-  render: render(DefaultStory),
-  decorators: [
-    withClientProvider({
-      createSpace: true,
-      types: [ViewType, DataType.Organization, DataType.Project, DataType.Person, DataType.HasRelationship],
-    }),
-    withTheme,
-    withLayout({ fullscreen: true }),
-  ],
-};
-
-export default meta;
-
-export const Default = {};

package/src/components/Graph/D3ForceGraph.tsx

@@ -1,101 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { SelectionModel } from '@dxos/graph';
-import { type ThemedClassName } from '@dxos/react-ui';
-import {
-  type GraphController,
-  GraphForceProjector,
-  type GraphLayoutNode,
-  type GraphProps,
-  SVG,
-  type SVGContext,
-} from '@dxos/react-ui-graph';
-import { getHashColor } from '@dxos/react-ui-theme';
-import { type SpaceGraphNode, type SpaceGraphModel, type SpaceGraphEdge } from '@dxos/schema';
-
-import '@dxos/react-ui-graph/styles/graph.css';
-
-export type D3ForceGraphProps = ThemedClassName<
-  {
-    model?: SpaceGraphModel;
-    match?: RegExp;
-    selection?: SelectionModel;
-    grid?: boolean;
-  } & Pick<GraphProps, 'drag'>
->;
-
-export const D3ForceGraph: FC<D3ForceGraphProps> = ({ classNames, model, selection: _selection, grid, ...props }) => {
-  const context = useRef<SVGContext>(null);
-  const projector = useMemo<GraphForceProjector | undefined>(() => {
-    if (context.current) {
-      return new GraphForceProjector(context.current, {
-        attributes: {
-          linkForce: (edge) => {
-            // TODO(burdon): Check type (currently assumes Employee property).
-            // Edge shouldn't contribute to force if it's not active.
-            return edge.data?.object?.active !== false;
-          },
-        },
-        forces: {
-          point: {
-            strength: 0.01,
-          },
-        },
-      });
-    }
-  }, [context.current]);
-
-  const graph = useRef<GraphController>(null);
-  const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);
-  useEffect(() => graph.current?.repaint(), [selection.selected.value]);
-
-  const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(
-    (node) => {
-      if (selection.contains(node.id)) {
-        selection.remove(node.id);
-      } else {
-        selection.add(node.id);
-      }
-    },
-    [selection],
-  );
-
-  return (
-    <SVG.Root ref={context} classNames={classNames}>
-      <SVG.Markers />
-      {grid && <SVG.Grid axis />}
-      <SVG.Zoom extent={[1 / 2, 2]}>
-        <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>
-          {...props}
-          ref={graph}
-          model={model}
-          projector={projector}
-          labels={{
-            text: (node) => {
-              return node.data?.data.label ?? node.id;
-            },
-          }}
-          attributes={{
-            node: (node: GraphLayoutNode<SpaceGraphNode>) => {
-              const obj = node.data?.data.object;
-              return {
-                data: {
-                  color: getHashColor(obj && Obj.getTypename(obj))?.color,
-                },
-                classes: {
-                  'dx-selected': selection.contains(node.id),
-                },
-              };
-            },
-          }}
-          onSelect={handleSelect}
-        />
-      </SVG.Zoom>
-    </SVG.Root>
-  );
-};

package/src/types/schema.ts

@@ -1,16 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { TypedObject } from '@dxos/echo-schema';
-
-// TODO(burdon): Clashes with sdk/view.
-export class ViewType extends TypedObject({
-  typename: 'dxos.org/type/ExplorerView',
-  version: '0.1.0',
-})({
-  name: Schema.optional(Schema.String),
-  type: Schema.String,
-}) {}

package/src/types/types.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { ViewType } from './schema';
-import { EXPLORER_PLUGIN } from '../meta';
-
-export namespace ExplorerAction {
-  const EXPLORER_ACTION = `${EXPLORER_PLUGIN}/action`;
-
-  export class Create extends Schema.TaggedClass<Create>()(`${EXPLORER_ACTION}/create`, {
-    input: Schema.Struct({
-      name: Schema.optional(Schema.String),
-    }),
-    output: Schema.Struct({
-      object: ViewType,
-    }),
-  }) {}
-}