@dxos/plugin-explorer 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/containers/ExplorerArticle/ExplorerArticle.stories.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Filter, Query, Type, View } from '@dxos/echo';
+import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
+import { type ValueGenerator, createObjectFactory, createRelationFactory } from '@dxos/schema/testing';
+import { HasConnection, HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
+
+import { Graph } from '../../types';
+import { ExplorerArticle, type ExplorerArticleVariant } from './ExplorerArticle';
+
+const generator = random as any as ValueGenerator;
+
+random.seed(7);
+
+type DefaultStoryProps = { variant: ExplorerArticleVariant };
+
+const DefaultStory = ({ variant }: DefaultStoryProps) => {
+  const [space] = useSpaces();
+  const [graph] = useQuery(space?.db, Filter.type(Graph.Graph));
+  if (!space || !graph) {
+    return <Loading data={{ space: !!space, graph: !!graph }} />;
+  }
+
+  return <ExplorerArticle role='article' subject={graph as any} attendableId={graph.id} variant={variant} />;
+};
+
+const meta: Meta<DefaultStoryProps> = {
+  title: 'plugins/plugin-explorer/containers/ExplorerArticle',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [
+            Graph.Graph,
+            HasRelationship.HasRelationship,
+            Organization.Organization,
+            Person.Person,
+            Pipeline.Pipeline,
+            View.View,
+          ],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              yield* Effect.promise(() =>
+                createObjectFactory(
+                  personalSpace.db,
+                  generator,
+                )([
+                  { type: Organization.Organization, count: 20 },
+                  { type: Person.Person, count: 30 },
+                  { type: Pipeline.Pipeline, count: 10 },
+                ]),
+              );
+              // Denser HasRelationship graph so the plexus variant shows multiple relation
+              // groups (organization ref + relationships) fanning out from a focused person.
+              yield* Effect.promise(() =>
+                createRelationFactory(
+                  personalSpace.db,
+                  generator,
+                )([
+                  { type: HasRelationship.HasRelationship, count: 40, data: { kind: 'friend' } },
+                  { type: HasConnection.HasConnection, count: 20, data: { kind: 'vendor' } },
+                ]),
+              );
+
+              const { view } = yield* Effect.promise(() =>
+                ViewModel.makeFromDatabase({
+                  db: personalSpace.db,
+                  typename: Type.getTypename(Graph.Graph),
+                }),
+              );
+
+              const graph = personalSpace.db.add(
+                Graph.make({
+                  name: 'Root',
+                  view,
+                  query: {
+                    ast: Query.select(Filter.everything()).ast,
+                  },
+                }),
+              );
+
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
+              return graph;
+            }),
+        }),
+        PreviewPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Force: Story = {
+  args: {
+    variant: 'force',
+  },
+};
+
+export const Cluster: Story = {
+  args: {
+    variant: 'cluster',
+  },
+};
+
+export const Bundle: Story = {
+  args: {
+    variant: 'bundle',
+  },
+};
+
+export const Plexus: Story = {
+  args: {
+    variant: 'plexus',
+  },
+};
+
+export const Lattice: Story = {
+  args: {
+    variant: 'lattice',
+  },
+};
+
+export const Swarm: Story = {
+  args: {
+    variant: 'swarm',
+  },
+};

package/src/containers/ExplorerArticle/ExplorerArticle.tsx

@@ -0,0 +1,120 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Filter, Obj, type View } from '@dxos/echo';
+import { QueryBuilder } from '@dxos/echo-query';
+import { useObject } from '@dxos/react-client/echo';
+import { DxAnchorActivate, Icon, Panel, Toolbar } from '@dxos/react-ui';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import '@dxos/react-ui-graph/styles/graph.css';
+
+import { type TreeNode } from '#components';
+import { useGraphModel } from '#hooks';
+
+import { type ExplorerArticleVariant, VARIANTS, isVariant } from './variants';
+import { Visualization } from './Visualization';
+
+export type { ExplorerArticleVariant } from './variants';
+
+export type ExplorerArticleProps = AppSurface.ObjectArticleProps<View.View>;
+
+export const ExplorerArticle = ({ role, subject, variant }: ExplorerArticleProps) => {
+  const [view] = useObject(subject);
+  const [filter, setFilter] = useState<Filter.Any>();
+
+  const db = view && Obj.getDatabase(view);
+  const model = useGraphModel(db, filter);
+
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
+    (value) => {
+      setFilter(builder.build(value).filter);
+    },
+    [builder],
+  );
+
+  const [selected, setSelected] = useState<ExplorerArticleVariant>(isVariant(variant) ? variant : 'force');
+  useEffect(() => {
+    if (isVariant(variant)) {
+      setSelected(variant);
+    }
+  }, [variant]);
+
+  const handleVariantChange = useCallback((value: string) => {
+    if (isVariant(value)) {
+      setSelected(value);
+    }
+  }, []);
+
+  // Dismiss the preview popover. The dxn/label/trigger fields are placeholders ignored on
+  // `state: false`.
+  const handleDismiss = useCallback(() => {
+    document.defaultView?.dispatchEvent(
+      new DxAnchorActivate({ dxn: '', label: '', trigger: document.body, state: false }),
+    );
+  }, []);
+
+  const handleHover = useCallback((node: TreeNode | null, event?: MouseEvent) => {
+    // Pointer left the node/label: keep the popover open so it can be hovered/interacted with.
+    // The popover is dismissed only on an explicit click on the component surface (handleDismiss).
+    if (!node || !event) {
+      return;
+    }
+    const obj = node.data;
+    if (!obj || !Obj.isObject(obj)) {
+      return;
+    }
+    const dxn = Obj.getURI(obj);
+    if (!dxn) {
+      return;
+    }
+
+    const target = event.target as HTMLElement;
+    target.dispatchEvent(
+      new DxAnchorActivate({
+        dxn,
+        kind: 'card',
+        trigger: target,
+        label: Obj.getLabel(obj) ?? dxn,
+      }),
+    );
+  }, []);
+
+  const showToolbar = role === 'article';
+
+  if (!db || !model) {
+    return null;
+  }
+
+  return (
+    <Panel.Root role={role}>
+      {showToolbar && (
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <QueryEditor db={db} onChange={handleChange} />
+            <Toolbar.ToggleGroup type='single' value={selected} onValueChange={handleVariantChange}>
+              {VARIANTS.map(({ value, icon, label }) => (
+                <Toolbar.ToggleGroupItem key={value} value={value} aria-label={label} title={label}>
+                  <Icon icon={icon} size={4} />
+                </Toolbar.ToggleGroupItem>
+              ))}
+            </Toolbar.ToggleGroup>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+      )}
+      <Panel.Content>
+        <Visualization
+          classNames='bg-base-surface'
+          variant={selected}
+          model={model}
+          onNodeHover={handleHover}
+          onSurfaceClick={handleDismiss}
+        />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};