@dxos/plugin-explorer 0.6.8-main.046e6cf

package/dist/types/src/types/view.d.ts

@@ -0,0 +1,14 @@
+import { S } from '@dxos/echo-schema';
+declare const ViewType_base: import("@dxos/echo-schema").AbstractTypedObject<{
+    type: string;
+    name?: string | undefined;
+} & {
+    id: string;
+}, S.Struct.Encoded<{
+    name: S.optional<typeof S.String>;
+    type: typeof S.String;
+}>>;
+export declare class ViewType extends ViewType_base {
+}
+export {};
+//# sourceMappingURL=view.d.ts.map

package/dist/types/src/types/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../../src/types/view.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;;;;;;;;;;AAGnD,qBAAa,QAAS,SAAQ,aAG5B;CAAG"}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@dxos/plugin-explorer",
+  "version": "0.6.8-main.046e6cf",
+  "description": "Braneframe data visualization plugin",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/index.cjs"
+      },
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./meta": {
+      "browser": "./dist/lib/browser/meta.mjs",
+      "node": {
+        "default": "./dist/lib/node/meta.cjs"
+      },
+      "types": "./dist/types/src/meta.d.ts"
+    },
+    "./types": {
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/types/index.cjs"
+      },
+      "types": "./dist/types/src/types/index.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "dist/types/src/meta.d.ts"
+      ],
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@observablehq/plot": "^0.6.11",
+    "@preact/signals-core": "^1.6.0",
+    "d3": "^7.9.0",
+    "lodash.defaultsdeep": "^4.6.1",
+    "lodash.get": "^4.4.2",
+    "react-resize-detector": "^11.0.1",
+    "topojson-client": "^3.1.0",
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/app-framework": "0.6.8-main.046e6cf",
+    "@dxos/client": "0.6.8-main.046e6cf",
+    "@dxos/gem-core": "0.6.8-main.046e6cf",
+    "@dxos/gem-spore": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/log": "0.6.8-main.046e6cf",
+    "@dxos/plugin-client": "0.6.8-main.046e6cf",
+    "@dxos/plugin-graph": "0.6.8-main.046e6cf",
+    "@dxos/plugin-space": "0.6.8-main.046e6cf",
+    "@dxos/plugin-search": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-client": "0.6.8-main.046e6cf"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/d3": "^7.4.3",
+    "@types/d3-hierarchy": "^3.1.6",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/lodash.get": "^4.4.7",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "@types/topojson-client": "^3.1.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "^5.3.4",
+    "@dxos/echo-generator": "0.6.8-main.046e6cf",
+    "@dxos/plugin-outliner": "0.6.8-main.046e6cf",
+    "@dxos/random": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf"
+  },
+  "optionalDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/ExplorerPlugin.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Graph, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
+import { parseClientPlugin } from '@dxos/plugin-client';
+import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { SpaceAction } from '@dxos/plugin-space';
+import { create } from '@dxos/react-client/echo';
+
+import { ExplorerArticle, ExplorerMain } from './components';
+import meta, { EXPLORER_PLUGIN } from './meta';
+import translations from './translations';
+import { ViewType } from './types';
+import { ExplorerAction, type ExplorerPluginProvides } from './types';
+
+export const ExplorerPlugin = (): PluginDefinition<ExplorerPluginProvides> => {
+  return {
+    meta,
+    provides: {
+      metadata: {
+        records: {
+          [ViewType.typename]: {
+            placeholder: ['object title placeholder', { ns: EXPLORER_PLUGIN }],
+            icon: (props: IconProps) => <Graph {...props} />,
+            iconSymbol: 'ph--graph--regular',
+          },
+        },
+      },
+      translations,
+      echo: {
+        schema: [ViewType],
+      },
+      graph: {
+        builder: (plugins) => {
+          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          if (!client || !dispatch) {
+            return [];
+          }
+
+          return createExtension({
+            id: ExplorerAction.CREATE,
+            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
+            actions: ({ node }) => {
+              const id = node.id.split('/').at(-1);
+              const [spaceId, objectId] = id?.split(':') ?? [];
+              const space = client.spaces.get().find((space) => space.id === spaceId);
+              const object = objectId && space?.db.getObjectById(objectId);
+              const target = objectId ? object : space;
+              if (!target) {
+                return;
+              }
+
+              return [
+                {
+                  id: `${EXPLORER_PLUGIN}/create/${node.id}`,
+                  data: async () => {
+                    await dispatch([
+                      { plugin: EXPLORER_PLUGIN, action: ExplorerAction.CREATE },
+                      { action: SpaceAction.ADD_OBJECT, data: { target } },
+                      { action: NavigationAction.OPEN },
+                    ]);
+                  },
+                  properties: {
+                    label: ['create object label', { ns: EXPLORER_PLUGIN }],
+                    icon: (props: IconProps) => <Graph {...props} />,
+                    iconSymbol: 'ph--graph--regular',
+                    testId: 'explorerPlugin.createObject',
+                  },
+                },
+              ];
+            },
+          });
+        },
+      },
+      surface: {
+        component: ({ data, role }) => {
+          switch (role) {
+            case 'main':
+              return data.active instanceof ViewType ? <ExplorerMain view={data.active} /> : null;
+            case 'article':
+              return data.object instanceof ViewType ? <ExplorerArticle view={data.object} /> : null;
+            default:
+              return null;
+          }
+        },
+      },
+      intent: {
+        resolver: (intent) => {
+          switch (intent.action) {
+            case ExplorerAction.CREATE: {
+              return { data: create(ViewType, { name: '', type: '' }) };
+            }
+          }
+        },
+      },
+    },
+  };
+};

package/src/components/Chart/Chart.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import * as Plot from '@observablehq/plot';
+import React, { useEffect, useState } from 'react';
+
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+
+import { Chart } from './Chart';
+
+// TODO(burdon): Generate data with geo lat/lng.
+// TODO(burdon): How to provide geo service via agent?
+
+export default {
+  title: 'plugin-explorer/Chart',
+  component: Plot,
+  decorators: [withTheme, withFullscreen()],
+};
+
+export const Default = () => <ClientRepeater component={DefaultStory} />;
+const DefaultStory = () => {
+  const [data, setData] = useState<{ cities: any }>();
+  useEffect(() => {
+    setTimeout(async () => {
+      const cities = await (await fetch('/cities.json')).json();
+      setData({
+        cities,
+      });
+    });
+  }, []);
+
+  if (!data) {
+    return null;
+  }
+
+  const cities = data.cities.features.map((feature: any) => ({
+    x: feature.geometry.coordinates[0],
+    y: feature.geometry.coordinates[1],
+  }));
+
+  return <Chart items={cities} accessor={(obj) => ({ x: obj.x, y: obj.y })} options={{ stroke: 'blue' }} />;
+};

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Plot from '@observablehq/plot';
+import { type DotOptions } from '@observablehq/plot';
+import React, { useEffect } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { type Accessor, createAdapter, type Point } from '../plot';
+
+const defaultOptions: DotOptions = {
+  r: 4,
+  stroke: 'gray',
+  fill: 'gray',
+  fillOpacity: 0.2,
+};
+
+export type CharProps = {
+  items?: any[];
+  accessor?: Accessor<Point>;
+  options?: DotOptions;
+};
+
+export const Chart = ({ items = [], accessor, options = defaultOptions }: CharProps) => {
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({ refreshRate: 200 });
+  useEffect(() => {
+    if (!width || !height) {
+      return;
+    }
+
+    const plot = Plot.plot({
+      grid: true,
+      width,
+      height,
+      style: {
+        background: 'transparent',
+      },
+      marks: [
+        Plot.frame(),
+        Plot.dot(items, {
+          x: createAdapter('x', accessor),
+          y: createAdapter('y', accessor),
+          ...options,
+        }),
+      ],
+    });
+
+    containerRef.current!.append(plot);
+    return () => plot?.remove();
+  }, [items, width, height]);
+
+  return <div ref={containerRef} className='grow' />;
+};

package/src/components/Chart/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Chart';

package/src/components/ExplorerArticle.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useGlobalSearch } from '@dxos/plugin-search';
+import { getSpace } from '@dxos/react-client/echo';
+
+import { Graph } from './Graph';
+import { type ViewType } from '../types';
+
+const ExplorerArticle = ({ view }: { view: ViewType }) => {
+  const space = getSpace(view);
+  const { match } = useGlobalSearch();
+
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <div role='none' className='row-span-2 overflow-auto'>
+      <Graph space={space} match={match} />
+    </div>
+  );
+};
+
+export default ExplorerArticle;

package/src/components/ExplorerMain.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useGlobalSearch } from '@dxos/plugin-search';
+import { getSpace } from '@dxos/react-client/echo';
+import { Main } from '@dxos/react-ui';
+import {
+  baseSurface,
+  topbarBlockPaddingStart,
+  fixedInsetFlexLayout,
+  bottombarBlockPaddingEnd,
+} from '@dxos/react-ui-theme';
+
+import { Graph } from './Graph';
+import { type ViewType } from '../types';
+
+const ExplorerMain = ({ view }: { view: ViewType }) => {
+  const space = getSpace(view);
+  const { match } = useGlobalSearch();
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <Main.Content classNames={[baseSurface, fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>
+      <Graph space={space} match={match} />
+    </Main.Content>
+  );
+};
+
+export default ExplorerMain;

package/src/components/Globe/Globe.stories.tsx

@@ -0,0 +1,115 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import * as Plot from '@observablehq/plot';
+import * as d3 from 'd3';
+import React, { useEffect, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import * as topojson from 'topojson-client';
+
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+
+import { Globe } from './Globe';
+
+// TODO(burdon): Generate data with geo lat/lng.
+// TODO(burdon): How to provide geo service via agent?
+
+export default {
+  title: 'plugin-explorer/Globe',
+  component: Plot,
+  decorators: [withTheme, withFullscreen()],
+};
+
+export const Default = () => <ClientRepeater component={DefaultStory} createSpace />;
+
+const DefaultStory = () => {
+  const [data, setData] = useState<{ world: any; cities: any }>();
+  useEffect(() => {
+    setTimeout(async () => {
+      const world = await (await fetch('/countries-110m.json')).json();
+      const cities = await (await fetch('/cities.json')).json();
+      setData({
+        world,
+        cities,
+      });
+    });
+  }, []);
+
+  if (!data) {
+    return null;
+  }
+
+  const cities = data.cities.features.map((feature: any) => ({
+    lat: feature.geometry.coordinates[0],
+    lng: feature.geometry.coordinates[1],
+  }));
+
+  return <Globe items={cities} />;
+};
+
+export const Extended = () => <ClientRepeater component={ExtendedStory} createSpace />;
+const ExtendedStory = () => {
+  const [data, setData] = useState<{ world: any; cities: any }>();
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({ refreshRate: 200 });
+  useEffect(() => {
+    setTimeout(async () => {
+      const world = await (await fetch('/countries-110m.json')).json();
+      const cities = await (await fetch('/cities.json')).json();
+      setData({
+        world,
+        cities,
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!data || !width || !height) {
+      return;
+    }
+
+    const land = topojson.feature(data.world, data.world.objects.land);
+    const cities = data.cities.features.map((feature: any) => ({
+      lat: feature.geometry.coordinates[0],
+      lng: feature.geometry.coordinates[1],
+    }));
+
+    const city = cities[0];
+    const circle = d3.geoCircle().center([city.lat, city.lng]).radius(16)();
+
+    // https://observablehq.com/plot/marks/geo
+    // https://observablehq.com/@observablehq/plot-earthquake-globe?intent=fork
+    const plot = Plot.plot({
+      // https://observablehq.com/plot/features/projections
+      projection: { type: 'orthographic', rotate: [-city.lat + 30, -30] },
+      // projection: { type: 'equirectangular', rotate: [-140, -30] },
+      width,
+      height,
+      style: {
+        background: 'transparent',
+      },
+      marks: [
+        Plot.sphere({ fill: 'lightblue', fillOpacity: 0.5 }),
+        Plot.geo(land, { fill: 'green', fillOpacity: 0.3 }),
+        Plot.graticule(),
+        Plot.geo(circle, { stroke: 'black', fill: 'darkblue', fillOpacity: 0.1, strokeWidth: 2 }),
+        Plot.dot(cities, {
+          x: 'lat',
+          y: 'lng',
+          r: 6,
+          stroke: 'red',
+          fill: 'red',
+          fillOpacity: 0.2,
+        }),
+      ],
+    });
+
+    containerRef.current!.append(plot);
+    return () => plot?.remove();
+  }, [data, width, height]);
+
+  return <div ref={containerRef} className='grow p-8' />;
+};

package/src/components/Globe/Globe.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { DotOptions } from '@observablehq/plot';
+import * as Plot from '@observablehq/plot';
+import React, { useEffect } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import * as topojson from 'topojson-client';
+
+// @ts-ignore
+import world from '../../../public/countries-110m.json?json';
+import { type Accessor, createAdapter, type GeoLocation } from '../plot';
+
+const defaultOptions: DotOptions = {
+  r: 4,
+  fill: '#003300',
+};
+
+export type GlobeProps = {
+  items?: any[];
+  accessor?: Accessor<GeoLocation>;
+  projection?: Plot.ProjectionName;
+  options?: DotOptions;
+};
+
+export const Globe = ({ items = [], accessor, projection = 'orthographic', options = defaultOptions }: GlobeProps) => {
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({ refreshRate: 200 });
+  const land = topojson.feature(world, world.objects.land);
+
+  useEffect(() => {
+    if (!width || !height) {
+      return;
+    }
+
+    // https://observablehq.com/plot/marks/geo
+    // https://observablehq.com/@observablehq/plot-earthquake-globe?intent=fork
+    const plot = Plot.plot({
+      // https://observablehq.com/plot/features/projections
+      projection: { type: projection, rotate: [-100, -20] },
+      // projection: { type: 'equirectangular', rotate: [-140, -30] },
+      width,
+      height,
+      style: {
+        background: 'transparent',
+      },
+      // TODO(burdon): Create simple wrapper for Plot with good defaults.
+      marks: [
+        Plot.sphere({ fill: 'lightblue', fillOpacity: 0.5 }),
+        Plot.geo(land, { fill: 'darkgreen', fillOpacity: 0.5 }),
+        Plot.graticule(),
+        Plot.dot(items, {
+          x: createAdapter('lat', accessor),
+          y: createAdapter('lng', accessor),
+          ...options,
+        }),
+      ],
+    });
+
+    containerRef.current!.append(plot);
+    return () => plot?.remove();
+  }, [items, width, height]);
+
+  return <div ref={containerRef} className='grow p-4' />;
+};

package/src/components/Globe/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Globe';

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

@@ -0,0 +1,59 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useEffect, useState } from 'react';
+
+import { createSpaceObjectGenerator, TestSchemaType } from '@dxos/echo-generator';
+import { create } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+
+import { Graph } from './Graph';
+import { ViewType } from '../../types';
+
+faker.seed(1);
+
+const Story = () => {
+  const client = useClient();
+  const [space, setSpace] = useState<Space>();
+  const [view, setView] = useState<ViewType>();
+  useEffect(() => {
+    const space = client.spaces.default;
+    const generator = createSpaceObjectGenerator(space);
+    generator.addSchemas();
+    void generator
+      .createObjects({
+        [TestSchemaType.organization]: 20,
+        [TestSchemaType.contact]: 50,
+      })
+      .catch();
+
+    const view = space.db.add(create(ViewType, { name: '', type: '' }));
+    setSpace(space);
+    setView(view);
+  }, []);
+
+  if (!space || !view) {
+    return null;
+  }
+
+  return <Graph space={space} />;
+};
+
+export default {
+  title: 'plugin-explorer/Graph',
+  component: Graph,
+  render: () => <ClientRepeater component={Story} createSpace types={[ViewType]} />,
+  decorators: [withTheme, withFullscreen()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};