@dxos/plugin-explorer 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc

package/src/containers/ExplorerArticle/ExplorerArticle.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+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 { ForceGraph } from '#components';
+import { HierarchicalEdgeBundling, RadialTree, spaceGraphToHierarchy, type TreeNode } from '#components';
+import { useGraphModel } from '#hooks';
+
+/** Visualization variants exposed by `ExplorerArticle`. */
+export type ExplorerArticleVariant = 'force' | 'cluster' | 'bundle';
+
+const VARIANTS: { value: ExplorerArticleVariant; icon: string; label: string }[] = [
+  {
+    value: 'force',
+    icon: 'ph--graph--regular',
+    label: 'Force-directed',
+  },
+  {
+    value: 'cluster',
+    icon: 'ph--asterisk-simple--regular',
+    label: 'Radial cluster',
+  },
+  {
+    value: 'bundle',
+    icon: 'ph--circles-three-plus--regular',
+    label: 'Edge bundling',
+  },
+];
+
+export type ExplorerArticleProps = AppSurface.ObjectArticleProps<View.View>;
+
+export const ExplorerArticle = ({ role, subject, variant }: ExplorerArticleProps) => {
+  const [view] = useObject(subject);
+  const db = view && Obj.getDatabase(view);
+  const [filter, setFilter] = useState<Filter.Any>();
+  const model = useGraphModel(db, filter);
+
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {
+    setFilter(builder.build(value).filter);
+  }, []);
+
+  // The `variant` prop is the initial value; user can toggle via the toolbar tabs.
+  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);
+    }
+  }, []);
+
+  const handleHoverPreview = useCallback((node: TreeNode | null, event?: MouseEvent) => {
+    if (!node || !event) {
+      return;
+    }
+    const obj = node.data;
+    if (!obj || !Obj.isObject(obj)) {
+      return;
+    }
+    const dxn = Obj.getDXN(obj)?.toString();
+    if (!dxn) {
+      return;
+    }
+    const target = event.target as HTMLElement;
+    target.dispatchEvent(
+      new DxAnchorActivate({
+        dxn,
+        label: Obj.getLabel(obj) ?? dxn,
+        trigger: target,
+        kind: 'card',
+      }),
+    );
+  }, []);
+
+  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 variant={selected} model={model} onNodeHover={handleHoverPreview} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const isVariant = (value: unknown): value is ExplorerArticleVariant =>
+  value === 'force' || value === 'cluster' || value === 'bundle';
+
+type VisualizationProps = {
+  variant: ExplorerArticleVariant;
+  model: NonNullable<ReturnType<typeof useGraphModel>>;
+  onNodeHover?: (node: TreeNode | null, event?: MouseEvent) => void;
+};
+
+const Visualization = ({ variant, model, onNodeHover }: VisualizationProps) => {
+  if (variant === 'force') {
+    // ForceGraph subscribes to model.graphAtom internally; don't re-render the wrapper on every tick.
+    return (
+      <ForceGraph
+        model={model}
+        onInspect={(node, event) => onNodeHover?.({ id: node.id, data: node.data?.data?.object }, event)}
+      />
+    );
+  }
+
+  return <HierarchyVisualization variant={variant} model={model} onNodeHover={onNodeHover} />;
+};
+
+/**
+ * Read from the model's reactive graph atom so the hierarchy is rebuilt as objects/relations stream in.
+ */
+const HierarchyVisualization = ({ variant, model, onNodeHover }: VisualizationProps) => {
+  // Capture the atom snapshot so the memo's dep list explicitly tracks each push from the atom.
+  const graphSnapshot = useAtomValue(model.graphAtom);
+  const { tree, edges } = useMemo(() => spaceGraphToHierarchy(model), [model, graphSnapshot]);
+  if (variant === 'cluster') {
+    return <RadialTree data={tree} cluster onNodeHover={onNodeHover} />;
+  }
+
+  return <HierarchicalEdgeBundling data={tree} edges={edges} onNodeHover={onNodeHover} />;
+};

package/src/containers/ExplorerArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { ExplorerArticle as default } from './ExplorerArticle';

package/src/containers/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const ExplorerArticle: ComponentType<any> = lazy(() => import('./ExplorerArticle'));

package/src/hooks/useGraphModel.ts

@@ -4,33 +4,44 @@
 
 import { useEffect, useState } from 'react';
 
-import { type Filter, type Queue, type Space } from '@dxos/client/echo';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
+import { type Database, type Entity, type Filter } from '@dxos/echo';
 import { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';
 
 // TODO(burdon): Factor out.
 export const useGraphModel = (
-  space: Space | undefined,
+  db: Database.Database | undefined,
   filter?: Filter.Any | undefined,
   options?: SpaceGraphModelOptions,
-  queue?: Queue,
+  items?: readonly Entity.Unknown[],
 ): SpaceGraphModel | undefined => {
+  const registry = useCapability(Capabilities.AtomRegistry);
   const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);
+
   useEffect(() => {
-    if (!space) {
-      void model?.close();
+    if (!db) {
       setModel(undefined);
       return;
     }
 
-    // TODO(burdon): Does this need to be a dependency?
-    if (!model || model.queue !== queue) {
-      const model = new SpaceGraphModel().setFilter(filter).setOptions(options);
-      void model.open(space, queue);
-      setModel(model);
-    } else {
-      model.setFilter(filter).setOptions(options);
-    }
-  }, [space, filter, options, queue]);
+    const newModel = new SpaceGraphModel(registry);
+    void newModel.open(db);
+    setModel(newModel);
+
+    return () => {
+      setModel(undefined);
+      void newModel.close();
+    };
+  }, [db, registry]);
+
+  useEffect(() => {
+    model?.setFilter(filter).setOptions(options);
+  }, [model, filter, options]);
+
+  useEffect(() => {
+    model?.setItems(items);
+  }, [model, items]);
 
   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

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
-  id: 'dxos.org/plugin/explorer',
+export const meta: Plugin.Meta = {
+  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/testing.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// Eager re-export of `ExplorerPlugin`. See `@dxos/plugin-testing/src/core.ts`
+// for the rationale.
+export * from './ExplorerPlugin';

package/src/translations.ts

@@ -2,27 +2,30 @@
 // Copyright 2023 DXOS.org
 //
 
+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': {
-      [Graph.Graph.typename]: {
-        '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',
+      [Type.getTypename(Graph.Graph)]: {
+        '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,26 +4,17 @@
 
 import * as Schema from 'effect/Schema';
 
-import { SpaceSchema } from '@dxos/react-client/echo';
-import { DataType, TypenameAnnotationId } from '@dxos/schema';
-
-import { meta } from '../meta';
-
-const EXPLORER_ACTION = `${meta.id}/action`;
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space';
 
 export const GraphProps = Schema.Struct({
   name: Schema.optional(Schema.String),
-  typename: Schema.String.annotations({
-    [TypenameAnnotationId]: ['used-static', 'dynamic'],
-    title: 'Select graph record type',
-  }),
+  // TODO(wittjosiah): This should be a query input instead.
+  typename: Schema.String.pipe(
+    Schema.annotations({ title: 'Select type' }),
+    TypeInputOptionsAnnotation.set({
+      location: ['database', 'runtime'],
+      kind: ['user'],
+    }),
+    Schema.optional,
+  ),
 });
-
-export class CreateGraph extends Schema.TaggedClass<CreateGraph>()(`${EXPLORER_ACTION}/create-graph`, {
-  input: Schema.Struct({
-    space: SpaceSchema,
-  }).pipe(Schema.extend(GraphProps)),
-  output: Schema.Struct({
-    object: DataType.View,
-  }),
-}) {}

package/src/types/Graph.ts

@@ -4,42 +4,45 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Filter, Obj, Query, QueryAST, Type } from '@dxos/echo';
-import { LabelAnnotation, ViewAnnotation } from '@dxos/echo/internal';
-import { type CreateViewFromSpaceProps, createViewFromSpace } from '@dxos/schema';
+import { Annotation, Filter, Obj, Query, QueryAST, Ref, Type, View } from '@dxos/echo';
+import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
+import { ViewAnnotation } from '@dxos/schema';
 
-export const Graph = Schema.Struct({
+const GraphSchema = Schema.Struct({
   name: Schema.optional(Schema.String),
+
+  view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),
+
   query: Schema.Struct({
     raw: Schema.optional(Schema.String),
     ast: QueryAST.Query,
-  }).pipe(Schema.mutable),
+  }).pipe(FormInputAnnotation.set(false)),
 }).pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/Graph',
+  Type.object({
+    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;
 
-export type Graph = Schema.Schema.Type<typeof Graph>;
-
-/**
- * Make a graph object.
- */
-export const make = (
-  props: Obj.MakeProps<typeof Graph> = { query: { raw: '', ast: Query.select(Filter.nothing()).ast } },
-) => Obj.make(Graph, props);
-
-type MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {
-  presentation?: Omit<Obj.MakeProps<typeof Graph>, 'name'>;
+type MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {
+  view: View.View;
 };
 
 /**
  * Make a graph as a view of a data set.
  */
-export const makeView = async ({ presentation, ...props }: MakeViewProps) => {
-  const graph = make(presentation);
-  return createViewFromSpace({ ...props, presentation: graph });
+export const make = ({
+  name,
+  query = { raw: '', ast: Query.select(Filter.nothing()).ast },
+  view,
+}: MakeProps): Graph => {
+  return Obj.make(Graph, { name, view: Ref.make(view), query });
 };

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-L5RVUJRL.mjs

@@ -1,50 +0,0 @@
-import {
-  useGraphModel
-} from "./chunk-2MKBRIUT.mjs";
-import {
-  D3ForceGraph
-} from "./chunk-6BVXZQPP.mjs";
-import "./chunk-J5LGTIGS.mjs";
-
-// src/components/ExplorerContainer.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React, { useCallback, useMemo, useState } from "react";
-import { QueryBuilder } from "@dxos/echo-query";
-import { useGlobalSearch } from "@dxos/plugin-search";
-import { getSpace } from "@dxos/react-client/echo";
-import { Toolbar } from "@dxos/react-ui";
-import { QueryEditor } from "@dxos/react-ui-components";
-import { StackItem } from "@dxos/react-ui-stack";
-var ExplorerContainer = ({ role, view }) => {
-  var _effect = _useSignals();
-  try {
-    const space = getSpace(view);
-    const [filter, setFilter] = useState();
-    const model = useGraphModel(space, filter);
-    const { match } = useGlobalSearch();
-    const builder = useMemo(() => new QueryBuilder(), []);
-    const handleChange = useCallback((value) => {
-      setFilter(builder.build(value).filter);
-    }, []);
-    const showToolbar = role === "article";
-    if (!space || !model) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(StackItem.Content, {
-      toolbar: showToolbar
-    }, showToolbar && /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(QueryEditor, {
-      db: space.db,
-      onChange: handleChange
-    })), /* @__PURE__ */ React.createElement(D3ForceGraph, {
-      model,
-      match
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var ExplorerContainer_default = ExplorerContainer;
-export {
-  ExplorerContainer_default as default
-};
-//# sourceMappingURL=ExplorerContainer-L5RVUJRL.mjs.map

package/dist/lib/browser/ExplorerContainer-L5RVUJRL.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ExplorerContainer.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type Filter } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { type DataType } from '@dxos/schema';\n\nimport { useGraphModel } from '../hooks';\n\nimport { D3ForceGraph } from './Graph';\n\ntype ExplorerContainerProps = {\n  role: string;\n  view: DataType.View;\n};\n\nconst ExplorerContainer = ({ role, view }: ExplorerContainerProps) => {\n  const space = 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    <StackItem.Content toolbar={showToolbar}>\n      {showToolbar && (\n        <Toolbar.Root>\n          <QueryEditor db={space.db} onChange={handleChange} />\n        </Toolbar.Root>\n      )}\n      <D3ForceGraph model={model} match={match} />\n    </StackItem.Content>\n  );\n};\n\nexport default ExplorerContainer;\n"],
-  "mappings": ";;;;;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAGtD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,mBAA0C;AACnD,SAASC,iBAAiB;AAY1B,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,KAAI,MAA0B;;;AAC/D,UAAMC,QAAQC,SAASF,IAAAA;AACvB,UAAM,CAACG,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,UAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,UAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,UAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,UAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,gBAAUM,QAAQM,MAAMD,KAAAA,EAAOZ,MAAM;IACvC,GAAG,CAAA,CAAE;AAEL,UAAMc,cAAclB,SAAS;AAE7B,QAAI,CAACE,SAAS,CAACK,OAAO;AACpB,aAAO;IACT;AAEA,WACE,sBAAA,cAACY,UAAUC,SAAO;MAACC,SAASH;OACzBA,eACC,sBAAA,cAACI,QAAQC,MAAI,MACX,sBAAA,cAACC,aAAAA;MAAYC,IAAIvB,MAAMuB;MAAIC,UAAUZ;SAGzC,sBAAA,cAACa,cAAAA;MAAapB;MAAcE;;;;;AAGlC;AAEA,IAAA,4BAAeV;",
-  "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "Toolbar", "QueryEditor", "StackItem", "ExplorerContainer", "role", "view", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "StackItem", "Content", "toolbar", "Toolbar", "Root", "QueryEditor", "db", "onChange", "D3ForceGraph"]
-}

package/dist/lib/browser/chunk-2MKBRIUT.mjs

@@ -1,31 +0,0 @@
-// src/hooks/useGraphModel.ts
-import { useEffect, useState } from "react";
-import { SpaceGraphModel } from "@dxos/schema";
-var useGraphModel = (space, filter, options, queue) => {
-  const [model, setModel] = useState(void 0);
-  useEffect(() => {
-    if (!space) {
-      void model?.close();
-      setModel(void 0);
-      return;
-    }
-    if (!model || model.queue !== queue) {
-      const model2 = new SpaceGraphModel().setFilter(filter).setOptions(options);
-      void model2.open(space, queue);
-      setModel(model2);
-    } else {
-      model.setFilter(filter).setOptions(options);
-    }
-  }, [
-    space,
-    filter,
-    options,
-    queue
-  ]);
-  return model;
-};
-
-export {
-  useGraphModel
-};
-//# sourceMappingURL=chunk-2MKBRIUT.mjs.map

package/dist/lib/browser/chunk-2MKBRIUT.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/hooks/useGraphModel.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Filter, type Queue, type Space } from '@dxos/client/echo';\nimport { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';\n\n// TODO(burdon): Factor out.\nexport const useGraphModel = (\n  space: Space | undefined,\n  filter?: Filter.Any | undefined,\n  options?: SpaceGraphModelOptions,\n  queue?: Queue,\n): SpaceGraphModel | undefined => {\n  const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);\n  useEffect(() => {\n    if (!space) {\n      void model?.close();\n      setModel(undefined);\n      return;\n    }\n\n    // TODO(burdon): Does this need to be a dependency?\n    if (!model || model.queue !== queue) {\n      const model = new SpaceGraphModel().setFilter(filter).setOptions(options);\n      void model.open(space, queue);\n      setModel(model);\n    } else {\n      model.setFilter(filter).setOptions(options);\n    }\n  }, [space, filter, options, queue]);\n\n  return model;\n};\n"],
-  "mappings": ";AAIA,SAASA,WAAWC,gBAAgB;AAGpC,SAASC,uBAAoD;AAGtD,IAAMC,gBAAgB,CAC3BC,OACAC,QACAC,SACAC,UAAAA;AAEA,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAsCC,MAAAA;AAChEC,YAAU,MAAA;AACR,QAAI,CAACR,OAAO;AACV,WAAKI,OAAOK,MAAAA;AACZJ,eAASE,MAAAA;AACT;IACF;AAGA,QAAI,CAACH,SAASA,MAAMD,UAAUA,OAAO;AACnC,YAAMC,SAAQ,IAAIM,gBAAAA,EAAkBC,UAAUV,MAAAA,EAAQW,WAAWV,OAAAA;AACjE,WAAKE,OAAMS,KAAKb,OAAOG,KAAAA;AACvBE,eAASD,MAAAA;IACX,OAAO;AACLA,YAAMO,UAAUV,MAAAA,EAAQW,WAAWV,OAAAA;IACrC;EACF,GAAG;IAACF;IAAOC;IAAQC;IAASC;GAAM;AAElC,SAAOC;AACT;",
-  "names": ["useEffect", "useState", "SpaceGraphModel", "useGraphModel", "space", "filter", "options", "queue", "model", "setModel", "useState", "undefined", "useEffect", "close", "SpaceGraphModel", "setFilter", "setOptions", "open"]
-}