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

package/src/components/Tree/types/tree.ts

@@ -24,7 +24,7 @@ export const TreeType = Schema.Struct({
   nodes: Schema.mutable(Schema.Record({ key: Key.ObjectId, value: TreeNodeType })),
 }).pipe(
   Type.object({
-    typename: 'dxos.org/type/Tree',
+    typename: 'org.dxos.type.tree',
     version: '0.1.0',
   }),
 );
@@ -185,8 +185,8 @@ export class Tree {
   clear(): void {
     const root = this._tree.nodes[this._tree.root];
     root.children.length = 0;
-    Obj.change(this._tree, (t) => {
-      t.nodes = {
+    Obj.update(this._tree, (obj) => {
+      obj.nodes = {
         [root.id]: root,
       };
     });
@@ -202,8 +202,8 @@ export class Tree {
     }
 
     const nodeToAdd = node;
-    Obj.change(this._tree, (t) => {
-      t.nodes[nodeToAdd.id] = nodeToAdd;
+    Obj.update(this._tree, (obj) => {
+      obj.nodes[nodeToAdd.id] = nodeToAdd;
       parent.children.splice(index ?? parent.children.length, 0, nodeToAdd.id);
     });
     return node;
@@ -218,12 +218,12 @@ export class Tree {
       return undefined;
     }
 
-    Obj.change(this._tree, (t) => {
-      delete t.nodes[node.id];
+    Obj.update(this._tree, (obj) => {
+      delete obj.nodes[node.id];
     });
     const idx = parent.children.findIndex((child) => child === id);
     if (idx !== -1) {
-      Obj.change(this._tree, () => {
+      Obj.update(this._tree, () => {
         parent.children.splice(idx, 1);
       });
     }
@@ -242,7 +242,7 @@ export class Tree {
     }
 
     const child = node.children[from];
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       node.children.splice(from, 1);
       node.children.splice(to, 0, child);
     });
@@ -264,7 +264,7 @@ export class Tree {
     }
 
     const previous = this.getNode(parent.children[idx - 1]);
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       parent.children.splice(idx, 1);
       previous.children.push(node.id);
     });
@@ -287,19 +287,19 @@ export class Tree {
     // Remove node from parent and get following siblings.
     const nodeIdx = parent.children.findIndex((id) => id === node.id);
     let rest: Key.ObjectId[] = [];
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       const removed = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
       rest = removed.slice(1); // Skip the node itself.
     });
 
     // Add to ancestor.
     const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       ancestor.children.splice(parentIdx + 1, 0, node.id);
     });
 
     // Transplant following siblings to current node.
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       node.children.push(...rest);
     });
   }

package/src/containers/ExplorerContainer/ExplorerContainer.tsx

@@ -4,26 +4,24 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Filter } from '@dxos/echo';
 import { type View } from '@dxos/echo';
 import { QueryBuilder } from '@dxos/echo-query';
-import { useGlobalSearch } from '@dxos/plugin-search';
 import { getSpace, useObject } from '@dxos/react-client/echo';
 import { Panel, Toolbar } from '@dxos/react-ui';
 import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
 
-import { D3ForceGraph } from '../../components';
-import { useGraphModel } from '../../hooks';
+import { ForceGraph } from '#components';
+import { useGraphModel } from '#hooks';
 
-export type ExplorerContainerProps = SurfaceComponentProps<View.View>;
+export type ExplorerContainerProps = AppSurface.ObjectArticleProps<View.View>;
 
-export const ExplorerContainer = ({ role, subject: view }: ExplorerContainerProps) => {
-  useObject(view);
+export const ExplorerContainer = ({ role, subject, attendableId: _attendableId }: ExplorerContainerProps) => {
+  const [view] = useObject(subject);
   const space = view && getSpace(view);
   const [filter, setFilter] = useState<Filter.Any>();
   const model = useGraphModel(space, filter);
-  const { match } = useGlobalSearch();
 
   const builder = useMemo(() => new QueryBuilder(), []);
   const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {
@@ -46,7 +44,7 @@ export const ExplorerContainer = ({ role, subject: view }: ExplorerContainerProp
         </Panel.Toolbar>
       )}
       <Panel.Content asChild>
-        <D3ForceGraph model={model} match={match} />
+        <ForceGraph model={model} />
       </Panel.Content>
     </Panel.Root>
   );

package/src/containers/ExplorerContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ExplorerContainer } from './ExplorerContainer';
-
-export default ExplorerContainer;
+export { ExplorerContainer as default } from './ExplorerContainer';

package/src/hooks/useGraphModel.ts

@@ -18,22 +18,26 @@ export const useGraphModel = (
 ): SpaceGraphModel | undefined => {
   const registry = useCapability(Capabilities.AtomRegistry);
   const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);
+
   useEffect(() => {
     if (!space) {
-      void model?.close();
       setModel(undefined);
       return;
     }
 
-    // TODO(burdon): Does this need to be a dependency?
-    if (!model || model.queue !== queue) {
-      const model = new SpaceGraphModel(registry).setFilter(filter).setOptions(options);
-      void model.open(space.db, queue);
-      setModel(model);
-    } else {
-      model.setFilter(filter).setOptions(options);
-    }
-  }, [space, filter, options, queue, registry]);
+    const newModel = new SpaceGraphModel(registry);
+    void newModel.open(space.db, queue);
+    setModel(newModel);
+
+    return () => {
+      setModel(undefined);
+      void newModel.close();
+    };
+  }, [space, registry, queue]);
+
+  useEffect(() => {
+    model?.setFilter(filter).setOptions(options);
+  }, [model, filter, options]);
 
   return model;
 };

package/src/index.ts

@@ -2,8 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './components';
-export * from './hooks';
 export * from './meta';
-
-export * from './ExplorerPlugin';
+export * from './types';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/explorer',
+  id: 'org.dxos.plugin.explorer',
   name: 'Explorer',
   description: trim`
     Interactive hypergraph visualization that reveals relationships between objects in your workspace.

package/src/plugin.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const ExplorerPlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/translations.ts

@@ -4,27 +4,28 @@
 
 import { Type } from '@dxos/echo';
 import { type Resource } from '@dxos/react-ui';
-import { translations as componentsTranslations } from '@dxos/react-ui-components';
+import { translations as componentsTranslations } from '@dxos/react-ui-components/translations';
 
-import { meta } from './meta';
-import { Graph } from './types';
+import { meta } from '#meta';
+import { Graph } from '#types';
 
 export const translations = [
   {
     'en-US': {
       [Type.getTypename(Graph.Graph)]: {
-        'typename label': 'Explorer',
-        'typename label_zero': 'Explorers',
-        'typename label_one': 'Explorer',
-        'typename label_other': 'Explorers',
-        'object name placeholder': 'New explorer',
-        'rename object label': 'Rename explorer',
-        'delete object label': 'Delete explorer',
-        'object deleted label': 'Explorer deleted',
+        'typename.label': 'Explorer',
+        'typename.label_zero': 'Explorers',
+        'typename.label_one': 'Explorer',
+        'typename.label_other': 'Explorers',
+        'object-name.placeholder': 'New explorer',
+        'add-object.label': 'Add explorer',
+        'rename-object.label': 'Rename explorer',
+        'delete-object.label': 'Delete explorer',
+        'object-deleted.label': 'Explorer deleted',
       },
       [meta.id]: {
-        'plugin name': 'Explorer',
-        'object title label': 'Title',
+        'plugin.name': 'Explorer',
+        'object-title.label': 'Title',
       },
     },
   },

package/src/types/ExplorerAction.ts

@@ -4,7 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space';
 
 export const GraphProps = Schema.Struct({
   name: Schema.optional(Schema.String),
@@ -14,7 +14,6 @@ export const GraphProps = Schema.Struct({
     TypeInputOptionsAnnotation.set({
       location: ['database', 'runtime'],
       kind: ['user'],
-      registered: ['registered'],
     }),
     Schema.optional,
   ),

package/src/types/Graph.ts

@@ -4,7 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Filter, Obj, Query, QueryAST, Ref, Type } from '@dxos/echo';
+import { Annotation, Filter, Obj, Query, QueryAST, Ref, Type } from '@dxos/echo';
 import { View } from '@dxos/echo';
 import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
 import { ViewAnnotation } from '@dxos/schema';
@@ -20,11 +20,15 @@ const GraphSchema = Schema.Struct({
   }).pipe(FormInputAnnotation.set(false)),
 }).pipe(
   Type.object({
-    typename: 'dxos.org/type/Graph',
-    version: '0.2.0',
+    typename: 'org.dxos.type.graph',
+    version: '0.1.0',
   }),
   LabelAnnotation.set(['name']),
-  ViewAnnotation.set(true),
+  ViewAnnotation.set(['view']),
+  Annotation.IconAnnotation.set({
+    icon: 'ph--graph--regular',
+    hue: 'green',
+  }),
 );
 export interface Graph extends Schema.Schema.Type<typeof GraphSchema> {}
 export const Graph: Type.Obj<Graph> = GraphSchema as any;
@@ -43,21 +47,3 @@ export const make = ({
 }: MakeProps): Graph => {
   return Obj.make(Graph, { name, view: Ref.make(view), query });
 };
-
-//
-// V1
-//
-
-export const GraphV1 = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  query: Schema.Struct({
-    raw: Schema.optional(Schema.String),
-    ast: QueryAST.Query,
-  }),
-}).pipe(
-  Type.object({
-    typename: 'dxos.org/type/Graph',
-    version: '0.1.0',
-  }),
-  LabelAnnotation.set(['name']),
-);

package/src/typings.d.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+declare module '*.css' {
+  const content: undefined;
+  export default content;
+}

package/dist/lib/browser/ExplorerContainer-4RB2TY3G.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/containers/ExplorerContainer/ExplorerContainer.tsx", "../../../src/containers/ExplorerContainer/index.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';\nimport { type Filter } from '@dxos/echo';\nimport { type View } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace, useObject } from '@dxos/react-client/echo';\nimport { Panel, Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\n\nimport { D3ForceGraph } from '../../components';\nimport { useGraphModel } from '../../hooks';\n\nexport type ExplorerContainerProps = SurfaceComponentProps<View.View>;\n\nexport const ExplorerContainer = ({ role, subject: view }: ExplorerContainerProps) => {\n  useObject(view);\n  const space = view && getSpace(view);\n  const [filter, setFilter] = useState<Filter.Any>();\n  const model = useGraphModel(space, filter);\n  const { match } = useGlobalSearch();\n\n  const builder = useMemo(() => new QueryBuilder(), []);\n  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {\n    setFilter(builder.build(value).filter);\n  }, []);\n\n  const showToolbar = role === 'article';\n\n  if (!space || !model) {\n    return null;\n  }\n\n  return (\n    <Panel.Root role={role}>\n      {showToolbar && (\n        <Panel.Toolbar asChild>\n          <Toolbar.Root>\n            <QueryEditor db={space.db} onChange={handleChange} />\n          </Toolbar.Root>\n        </Panel.Toolbar>\n      )}\n      <Panel.Content asChild>\n        <D3ForceGraph model={model} match={match} />\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ExplorerContainer } from './ExplorerContainer';\n\nexport default ExplorerContainer;\n"],
-  "mappings": ";;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAKtD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,UAAUC,iBAAiB;AACpC,SAASC,OAAOC,eAAe;AAC/B,SAASC,mBAA0C;AAO5C,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,SAASC,KAAI,MAA0B;AAC/EC,YAAUD,IAAAA;AACV,QAAME,QAAQF,QAAQG,SAASH,IAAAA;AAC/B,QAAM,CAACI,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,QAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,QAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,QAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,QAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,cAAUM,QAAQM,MAAMD,KAAAA,EAAOZ,MAAM;EACvC,GAAG,CAAA,CAAE;AAEL,QAAMc,cAAcpB,SAAS;AAE7B,MAAI,CAACI,SAAS,CAACK,OAAO;AACpB,WAAO;EACT;AAEA,SACE,sBAAA,cAACY,MAAMC,MAAI;IAACtB;KACToB,eACC,sBAAA,cAACC,MAAME,SAAO;IAACC,SAAAA;KACb,sBAAA,cAACD,QAAQD,MAAI,MACX,sBAAA,cAACG,aAAAA;IAAYC,IAAItB,MAAMsB;IAAIC,UAAUX;QAI3C,sBAAA,cAACK,MAAMO,SAAO;IAACJ,SAAAA;KACb,sBAAA,cAACK,cAAAA;IAAapB;IAAcE;;AAIpC;;;AC9CA,IAAA,4BAAemB;",
-  "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "useObject", "Panel", "Toolbar", "QueryEditor", "ExplorerContainer", "role", "subject", "view", "useObject", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "Panel", "Root", "Toolbar", "asChild", "QueryEditor", "db", "onChange", "Content", "D3ForceGraph", "ExplorerContainer"]
-}

package/dist/lib/browser/chunk-4NFGHCGO.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/ExplorerAction.ts", "../../../src/types/Graph.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';\n\nexport const GraphProps = Schema.Struct({\n  name: Schema.optional(Schema.String),\n  // TODO(wittjosiah): This should be a query input instead.\n  typename: Schema.String.pipe(\n    Schema.annotations({ title: 'Select type' }),\n    TypeInputOptionsAnnotation.set({\n      location: ['database', 'runtime'],\n      kind: ['user'],\n      registered: ['registered'],\n    }),\n    Schema.optional,\n  ),\n});\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Filter, Obj, Query, QueryAST, Ref, Type } from '@dxos/echo';\nimport { View } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';\nimport { ViewAnnotation } from '@dxos/schema';\n\nconst GraphSchema = Schema.Struct({\n  name: Schema.optional(Schema.String),\n\n  view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n  query: Schema.Struct({\n    raw: Schema.optional(Schema.String),\n    ast: QueryAST.Query,\n  }).pipe(FormInputAnnotation.set(false)),\n}).pipe(\n  Type.object({\n    typename: 'dxos.org/type/Graph',\n    version: '0.2.0',\n  }),\n  LabelAnnotation.set(['name']),\n  ViewAnnotation.set(true),\n);\nexport interface Graph extends Schema.Schema.Type<typeof GraphSchema> {}\nexport const Graph: Type.Obj<Graph> = GraphSchema as any;\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {\n  view: View.View;\n};\n\n/**\n * Make a graph as a view of a data set.\n */\nexport const make = ({\n  name,\n  query = { raw: '', ast: Query.select(Filter.nothing()).ast },\n  view,\n}: MakeProps): Graph => {\n  return Obj.make(Graph, { name, view: Ref.make(view), query });\n};\n\n//\n// V1\n//\n\nexport const GraphV1 = Schema.Struct({\n  name: Schema.optional(Schema.String),\n  query: Schema.Struct({\n    raw: Schema.optional(Schema.String),\n    ast: QueryAST.Query,\n  }),\n}).pipe(\n  Type.object({\n    typename: 'dxos.org/type/Graph',\n    version: '0.1.0',\n  }),\n  LabelAnnotation.set(['name']),\n);\n"],
-  "mappings": ";;;;;AAAA;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,kCAAkC;AAEpC,IAAMC,aAAoBC,cAAO;EACtCC,MAAaC,gBAAgBC,aAAM;;EAEnCC,UAAiBD,cAAOE,KACfC,mBAAY;IAAEC,OAAO;EAAc,CAAA,GAC1CC,2BAA2BC,IAAI;IAC7BC,UAAU;MAAC;MAAY;;IACvBC,MAAM;MAAC;;IACPC,YAAY;MAAC;;EACf,CAAA,GACOV,eAAQ;AAEnB,CAAA;;;ACpBA;;;;;;AAIA,YAAYW,aAAY;AAExB,SAASC,QAAQC,KAAKC,OAAOC,UAAUC,KAAKC,YAAY;AACxD,SAASC,YAAY;AACrB,SAASC,qBAAqBC,uBAAuB;AACrD,SAASC,sBAAsB;AAE/B,IAAMC,cAAqBC,eAAO;EAChCC,MAAaC,iBAAgBC,cAAM;EAEnCC,MAAMC,IAAIA,IAAIC,KAAKA,IAAI,EAAEC,KAAKC,oBAAoBC,IAAI,KAAA,CAAA;EAEtDC,OAAcV,eAAO;IACnBW,KAAYT,iBAAgBC,cAAM;IAClCS,KAAKC,SAASC;EAChB,CAAA,EAAGP,KAAKC,oBAAoBC,IAAI,KAAA,CAAA;AAClC,CAAA,EAAGF,KACDQ,KAAKC,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBV,IAAI;EAAC;CAAO,GAC5BW,eAAeX,IAAI,IAAA,CAAA;AAGd,IAAMY,QAAyBtB;AAS/B,IAAMuB,OAAO,CAAC,EACnBrB,MACAS,QAAQ;EAAEC,KAAK;EAAIC,KAAKE,MAAMS,OAAOC,OAAOC,QAAO,CAAA,EAAIb;AAAI,GAC3DR,KAAI,MACM;AACV,SAAOsB,IAAIJ,KAAKD,OAAO;IAAEpB;IAAMG,MAAMC,IAAIiB,KAAKlB,IAAAA;IAAOM;EAAM,CAAA;AAC7D;AAMO,IAAMiB,UAAiB3B,eAAO;EACnCC,MAAaC,iBAAgBC,cAAM;EACnCO,OAAcV,eAAO;IACnBW,KAAYT,iBAAgBC,cAAM;IAClCS,KAAKC,SAASC;EAChB,CAAA;AACF,CAAA,EAAGP,KACDQ,KAAKC,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBV,IAAI;EAAC;CAAO,CAAA;",
-  "names": ["Schema", "TypeInputOptionsAnnotation", "GraphProps", "Struct", "name", "optional", "String", "typename", "pipe", "annotations", "title", "TypeInputOptionsAnnotation", "set", "location", "kind", "registered", "Schema", "Filter", "Obj", "Query", "QueryAST", "Ref", "Type", "View", "FormInputAnnotation", "LabelAnnotation", "ViewAnnotation", "GraphSchema", "Struct", "name", "optional", "String", "view", "Ref", "View", "pipe", "FormInputAnnotation", "set", "query", "raw", "ast", "QueryAST", "Query", "Type", "object", "typename", "version", "LabelAnnotation", "ViewAnnotation", "Graph", "make", "select", "Filter", "nothing", "Obj", "GraphV1"]
-}