@dxos/plugin-explorer 0.8.1 → 0.8.2-main.10c050d

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

@@ -0,0 +1,287 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Schema } from 'effect';
+
+import { Type } from '@dxos/echo';
+import { ObjectId, Ref, Expando } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { live } from '@dxos/live-object';
+
+// TODO(burdon): Reconcile with @dxos/graph (i.e., common types).
+
+export const TreeNodeType = Schema.Struct({
+  id: ObjectId,
+  children: Schema.mutable(Schema.Array(ObjectId)),
+  data: Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.Any })),
+  ref: Schema.optional(Ref(Expando)), // TODO(burdon): Generic type?
+}).pipe(Schema.mutable);
+
+export interface TreeNodeType extends Schema.Schema.Type<typeof TreeNodeType> {}
+
+export const TreeType = Schema.Struct({
+  root: ObjectId,
+  nodes: Schema.mutable(Schema.Record({ key: ObjectId, value: TreeNodeType })),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Tree',
+    version: '0.1.0',
+  }),
+);
+
+export interface TreeType extends Schema.Schema.Type<typeof TreeType> {}
+
+/**
+ * Wrapper object for tree.
+ */
+export class Tree {
+  static create = (): TreeType => {
+    const id = ObjectId.random();
+    return live(TreeType, {
+      root: id,
+      nodes: {
+        [id]: {
+          id,
+          children: [],
+          data: { text: '' }, // TODO(burdon): Generic.
+        },
+      },
+    });
+  };
+
+  private _tree: TreeType;
+
+  constructor(tree?: TreeType) {
+    this._tree = tree ?? Tree.create();
+  }
+
+  get tree() {
+    return this._tree;
+  }
+
+  // TODO(burdon): Make reactive.
+  get size() {
+    return Object.keys(this._tree.nodes).length;
+  }
+
+  get root() {
+    return this.getNode(this._tree.root);
+  }
+
+  //
+  // Traversal
+  //
+
+  /**
+   * Recursively traverse the tree until the callback returns a value.
+   */
+  tranverse<T>(
+    callback: (node: TreeNodeType, depth: number) => T | void,
+    root: ObjectId = this._tree.root,
+    depth = 0,
+  ): T | void {
+    const node = this._tree.nodes[root];
+    const result = callback(node, depth);
+    if (result !== undefined) {
+      return result;
+    }
+
+    for (const childId of node.children) {
+      const result = this.tranverse(callback, childId, depth + 1);
+      if (result !== undefined) {
+        return result;
+      }
+    }
+  }
+
+  getNode(id: ObjectId): TreeNodeType {
+    const node = this._tree.nodes[id];
+    invariant(node);
+    return node;
+  }
+
+  /**
+   * Get the children of a node.
+   */
+  getChildNodes(node: TreeNodeType): Array<TreeNodeType> {
+    return node.children.map((id) => this.getNode(id));
+  }
+
+  /**
+   * Get the parent of a node.
+   */
+  getParent(node: TreeNodeType): TreeNodeType | null {
+    const parent = this.tranverse((n) => {
+      if (n.children.includes(node.id)) {
+        return n;
+      }
+    });
+
+    return parent ?? null;
+  }
+
+  /**
+   * Get the next node in the tree.
+   */
+  getNext(node: TreeNodeType, hierarchical = true): TreeNodeType | undefined {
+    if (hierarchical && node.children.length) {
+      // First child.
+      return this.getChildNodes(node)[0];
+    } else {
+      const parent = this.getParent(node);
+      if (parent) {
+        const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
+        if (idx < parent.children.length - 1) {
+          // Next sibling.
+          return this.getNode(parent.children[idx + 1]);
+        } else {
+          // Get parent's next sibling.
+          return this.getNext(parent, false);
+        }
+      }
+    }
+  }
+
+  /**
+   * Get the previous node in the tree.
+   */
+  getPrevious(node: TreeNodeType, hierarchical = true): TreeNodeType | undefined {
+    const parent = this.getParent(node)!;
+    const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
+    if (idx === 0) {
+      if (hierarchical) {
+        return parent;
+      }
+    } else {
+      const previous = this.getNode(parent.children[idx - 1]);
+      if (hierarchical && previous.children.length) {
+        return this.getLastDescendent(previous);
+      }
+
+      return previous;
+    }
+  }
+
+  /**
+   * Get the last descendent of a node.
+   */
+  getLastDescendent(node: TreeNodeType): TreeNodeType | undefined {
+    const children = this.getChildNodes(node);
+    const last = children.length ? children[children.length - 1] : undefined;
+    if (last) {
+      return this.getLastDescendent(last);
+    }
+
+    return node;
+  }
+
+  //
+  // Mutations
+  //
+
+  /**
+   * Clear tree.
+   */
+  clear(): void {
+    const root = this._tree.nodes[this._tree.root];
+    root.children.length = 0;
+    this._tree.nodes = {
+      [root.id]: root,
+    };
+  }
+
+  /**
+   * Add node.
+   */
+  addNode(parent: TreeNodeType, node?: TreeNodeType, index?: number): TreeNodeType {
+    if (!node) {
+      const id = ObjectId.random();
+      node = { id, children: [], data: { text: '' } }; // TODO(burdon): Generic.
+    }
+
+    this._tree.nodes[node.id] = node;
+    parent.children.splice(index ?? parent.children.length, 0, node.id);
+    return node;
+  }
+
+  /**
+   * Delete node.
+   */
+  deleteNode(parent: TreeNodeType, id: ObjectId): TreeNodeType | undefined {
+    const node = this._tree.nodes[id];
+    if (!node) {
+      return undefined;
+    }
+
+    delete this._tree.nodes[node.id];
+    const idx = parent.children.findIndex((child) => child === id);
+    if (idx !== -1) {
+      parent.children.splice(idx, 1);
+    }
+
+    return node;
+  }
+
+  /**
+   * Move child node.
+   */
+  moveNode(node: TreeNodeType, from: number, to: number): TreeNodeType | null {
+    invariant(from >= 0 && from < node.children.length);
+    invariant(to >= 0 && to < node.children.length);
+    if (from === to) {
+      return null;
+    }
+
+    const child = node.children[from];
+    node.children.splice(from, 1);
+    node.children.splice(to, 0, child);
+    return this.getNode(child);
+  }
+
+  /**
+   * Indent node.
+   */
+  indentNode(node: TreeNodeType): void {
+    const parent = this.getParent(node);
+    if (!parent) {
+      return;
+    }
+
+    const idx = parent.children.findIndex((child) => child === node.id);
+    if (idx < 1 || idx >= parent.children.length) {
+      return;
+    }
+
+    const previous = this.getNode(parent.children[idx - 1]);
+    parent.children.splice(idx, 1);
+    previous.children.push(node.id);
+  }
+
+  /**
+   * Unindent node.
+   */
+  unindentNode(node: TreeNodeType): void {
+    const parent = this.getParent(node);
+    if (!parent) {
+      return;
+    }
+
+    const ancestor = this.getParent(parent);
+    if (!ancestor) {
+      return;
+    }
+
+    // Remove node from parent.
+    const nodeIdx = parent.children.findIndex((id) => id === node.id);
+    const [_, ...rest] = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+    parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+
+    // Add to ancestor.
+    const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
+    ancestor.children.splice(parentIdx + 1, 0, node.id);
+
+    // Transplant following siblings to current node.
+    node.children.push(...rest);
+  }
+}

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

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type GraphModel } from '@dxos/graph';
+
+export type TreeNode = {
+  id: string;
+  label?: string;
+  children?: TreeNode[];
+};
+
+export const mapGraphToTreeData = (model: GraphModel, maxDepth = 8): TreeNode | undefined => {
+  // TODO(burdon): Convert to common/graph.
+  // const mapNode = (node: N, depth = 0): TreeNode => {
+  //   const treeNode: TreeNode = {
+  //     id: model.idAccessor(node),
+  //     label: model.idAccessor(node).slice(0, 8),
+  //   };
+
+  //   const links = model.graph.links.filter((link) => link.source === treeNode.id);
+  //   if (depth < maxDepth) {
+  //     treeNode.children = links.map((link) =>
+  //       mapNode(model.graph.nodes.find((node) => model.idAccessor(node) === link.target)!, depth + 1),
+  //     );
+  //   }
+
+  //   return treeNode;
+  // };
+
+  let data: TreeNode | undefined;
+  // TODO(burdon): Selection model.
+  // if (model.selected) {
+  //   const node = model.graph.nodes.find((node) => model.idAccessor(node) === model.selected);
+  //   if (node) {
+  //     data = mapNode(node);
+  //   }
+  // }
+
+  return data;
+};

package/src/hooks/index.ts

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

package/src/hooks/useGraphModel.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Filter, type Space } from '@dxos/client/echo';
+import { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';
+
+// TODO(burdon): Factor out.
+export const useGraphModel = (
+  space: Space | undefined,
+  filter?: Filter.Any | undefined,
+  options?: SpaceGraphModelOptions,
+): SpaceGraphModel | undefined => {
+  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) {
+      const model = new SpaceGraphModel().setFilter(filter).setOptions(options);
+      void model.open(space);
+      setModel(model);
+    } else {
+      model.setFilter(filter).setOptions(options);
+    }
+  }, [space, filter, options]);
+
+  return model;
+};

package/src/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-// TODO(burdon): Factor out.
 export * from './components';
+export * from './hooks';
+export * from './meta';
 
 export * from './ExplorerPlugin';
-export * from './meta';

package/src/meta.ts

@@ -11,7 +11,7 @@ export const meta: PluginMeta = {
   name: 'Explorer',
   description: 'Install this plugin to view a hypergraph of all objects inside of your Space.',
   icon: 'ph--graph--regular',
-  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-explorer',
-  tags: ['experimental'],
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',
+  tags: ['labs'],
   screenshots: ['https://dxos.network/plugin-details-explorer-dark.png'],
 };

package/src/types/schema.ts

@@ -2,13 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { S, TypedObject } from '@dxos/echo-schema';
+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: S.optional(S.String),
-  type: S.String,
+  name: Schema.optional(Schema.String),
+  type: Schema.String,
 }) {}

package/src/types/types.ts

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

package/dist/lib/browser/ExplorerContainer-HL532ODG.mjs

@@ -1,27 +0,0 @@
-import {
-  Graph
-} from "./chunk-SBLNE7FL.mjs";
-
-// packages/plugins/plugin-explorer/src/components/ExplorerContainer.tsx
-import React from "react";
-import { useGlobalSearch } from "@dxos/plugin-search";
-import { getSpace } from "@dxos/react-client/echo";
-import { StackItem } from "@dxos/react-ui-stack";
-var ExplorerContainer = ({ view, role }) => {
-  const space = getSpace(view);
-  const { match } = useGlobalSearch();
-  if (!space) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(StackItem.Content, {
-    size: role === "section" ? "square" : "intrinsic"
-  }, /* @__PURE__ */ React.createElement(Graph, {
-    space,
-    match
-  }));
-};
-var ExplorerContainer_default = ExplorerContainer;
-export {
-  ExplorerContainer_default as default
-};
-//# sourceMappingURL=ExplorerContainer-HL532ODG.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ExplorerContainer.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { Graph } from './Graph';\nimport { type ViewType } from '../types';\n\nconst ExplorerContainer = ({ view, role }: { view: ViewType; role: string }) => {\n  const space = getSpace(view);\n  const { match } = useGlobalSearch();\n\n  if (!space) {\n    return null;\n  }\n\n  return (\n    <StackItem.Content size={role === 'section' ? 'square' : 'intrinsic'}>\n      <Graph space={space} match={match} />\n    </StackItem.Content>\n  );\n};\n\nexport default ExplorerContainer;\n"],
-  "mappings": ";;;;;AAIA,OAAOA,WAAW;AAElB,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,iBAAiB;AAK1B,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,KAAI,MAAoC;AACzE,QAAMC,QAAQC,SAASH,IAAAA;AACvB,QAAM,EAAEI,MAAK,IAAKC,gBAAAA;AAElB,MAAI,CAACH,OAAO;AACV,WAAO;EACT;AAEA,SACE,sBAAA,cAACI,UAAUC,SAAO;IAACC,MAAMP,SAAS,YAAY,WAAW;KACvD,sBAAA,cAACQ,OAAAA;IAAMP;IAAcE;;AAG3B;AAEA,IAAA,4BAAeL;",
-  "names": ["React", "useGlobalSearch", "getSpace", "StackItem", "ExplorerContainer", "view", "role", "space", "getSpace", "match", "useGlobalSearch", "StackItem", "Content", "size", "Graph"]
-}

package/dist/lib/browser/chunk-QLQLPZNI.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/schema.ts", "../../../src/types/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { S, TypedObject } from '@dxos/echo-schema';\n\n// TODO(burdon): Clashes with sdk/view.\nexport class ViewType extends TypedObject({\n  typename: 'dxos.org/type/ExplorerView',\n  version: '0.1.0',\n})({\n  name: S.optional(S.String),\n  type: S.String,\n}) {}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { S } from '@dxos/echo-schema';\n\nimport { ViewType } from './schema';\nimport { EXPLORER_PLUGIN } from '../meta';\n\nexport namespace ExplorerAction {\n  const EXPLORER_ACTION = `${EXPLORER_PLUGIN}/action`;\n\n  export class Create extends S.TaggedClass<Create>()(`${EXPLORER_ACTION}/create`, {\n    input: S.Struct({\n      name: S.optional(S.String),\n    }),\n    output: S.Struct({\n      object: ViewType,\n    }),\n  }) {}\n}\n"],
-  "mappings": ";;;;;AAIA,SAASA,GAAGC,mBAAmB;AAGxB,IAAMC,WAAN,cAAuBC,YAAY;EACxCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAG;EACDC,MAAMC,EAAEC,SAASD,EAAEE,MAAM;EACzBC,MAAMH,EAAEE;AACV,CAAA,EAAA;AAAI;;;ACTJ,SAASE,KAAAA,UAAS;;UAKDC,iBAAAA;AACf,QAAMC,kBAAkB,GAAGC,eAAAA;EAEpB,MAAMC,eAAeC,GAAEC,YAAW,EAAW,GAAGJ,eAAAA,WAA0B;IAC/EK,OAAOF,GAAEG,OAAO;MACdC,MAAMJ,GAAEK,SAASL,GAAEM,MAAM;IAC3B,CAAA;IACAC,QAAQP,GAAEG,OAAO;MACfK,QAAQC;IACV,CAAA;EACF,CAAA,EAAA;EAAI;kBAPSV,SAAAA;AAQf,GAXiBH,mBAAAA,iBAAAA,CAAAA,EAAAA;",
-  "names": ["S", "TypedObject", "ViewType", "TypedObject", "typename", "version", "name", "S", "optional", "String", "type", "S", "ExplorerAction", "EXPLORER_ACTION", "EXPLORER_PLUGIN", "Create", "S", "TaggedClass", "input", "Struct", "name", "optional", "String", "output", "object", "ViewType"]
-}

package/dist/lib/browser/chunk-SBLNE7FL.mjs

@@ -1,205 +0,0 @@
-// packages/plugins/plugin-explorer/src/components/Graph/graph-model.ts
-import { getSchema, getSchemaDXN, AST, ReferenceAnnotationId, SchemaValidator, StoredSchema } from "@dxos/echo-schema";
-import { GraphModel } from "@dxos/gem-spore";
-import { log } from "@dxos/log";
-import { CollectionType } from "@dxos/plugin-space/types";
-import { Filter } from "@dxos/react-client/echo";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-explorer/src/components/Graph/graph-model.ts";
-var SpaceGraphModel = class extends GraphModel {
-  constructor(_options = {}) {
-    super();
-    this._options = _options;
-    this._graph = {
-      nodes: [],
-      links: []
-    };
-  }
-  get graph() {
-    return this._graph;
-  }
-  get objects() {
-    return this._objects ?? [];
-  }
-  // TODO(burdon): Alternative diagram types:
-  // - https://observablehq.com/@d3/radial-tree/2
-  // - https://observablehq.com/@d3/disjoint-force-directed-graph/2
-  // - https://observablehq.com/@mbostock/tadpoles
-  // - https://observablehq.com/@d3/psr-b1919-21
-  // - https://vasturiano.github.io/react-force-graph/example/basic (3D)
-  async open(space, objectId) {
-    if (!this._schemaSubscription) {
-      const schemaaQuery = space.db.schemaRegistry.query({});
-      const schemas = await schemaaQuery.run();
-      const onSchemaUpdate = ({ results }) => this._schema = results;
-      this._schemaSubscription = schemaaQuery.subscribe(onSchemaUpdate);
-      onSchemaUpdate({
-        results: schemas
-      });
-      this._objectsSubscription = space.db.query(Filter.not(Filter.or(Filter.schema(StoredSchema), Filter.schema(CollectionType)))).subscribe(({ objects }) => {
-        this._objects = objects;
-        const currentNodes = this._graph.nodes;
-        this._graph.nodes = [];
-        this._graph.links = [];
-        const addSchema = (typename) => {
-          const current = currentNodes.find((node) => node.id === typename);
-          if (typename) {
-            this._graph.nodes.push({
-              ...current,
-              id: typename,
-              type: "schema",
-              data: {
-                typename
-              }
-            });
-          }
-        };
-        space.db.graph.schemaRegistry.schemas.forEach((schema) => {
-          const typename = getSchemaDXN(schema)?.typename;
-          if (typename) {
-            addSchema(typename);
-          }
-        });
-        this._schema?.forEach((schema) => {
-          const typename = getSchemaDXN(schema)?.typename;
-          if (typename) {
-            addSchema(typename);
-          }
-        });
-        this._objects.forEach((object) => {
-          const schema = getSchema(object);
-          if (schema) {
-            const typename = getSchemaDXN(schema)?.typename;
-            if (typename) {
-              const current = currentNodes.find((node) => node.id === object.id);
-              this._graph.nodes.push({
-                ...current,
-                id: object.id,
-                type: "object",
-                data: {
-                  typename,
-                  object
-                }
-              });
-              const schemaNode = this._graph.nodes.find((node) => node.type === "schema" && node.data.typename === typename);
-              if (schemaNode) {
-                this._graph.links.push({
-                  id: `${object.id}-${schemaNode.id}`,
-                  source: object.id,
-                  target: schemaNode.id
-                });
-              } else {
-                log.info("schema node not found", {
-                  typename
-                }, {
-                  F: __dxlog_file,
-                  L: 147,
-                  S: this,
-                  C: (f, a) => f(...a)
-                });
-              }
-              AST.getPropertySignatures(schema.ast).forEach((prop) => {
-                if (!SchemaValidator.hasTypeAnnotation(schema, prop.name.toString(), ReferenceAnnotationId)) {
-                  return;
-                }
-                const value = object[String(prop.name)];
-                if (value) {
-                  const refs = Array.isArray(value) ? value : [
-                    value
-                  ];
-                  for (const ref of refs) {
-                    if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {
-                      this._graph.links.push({
-                        id: `${object.id}-${String(prop.name)}-${ref.id}`,
-                        source: object.id,
-                        target: ref.id
-                      });
-                    }
-                  }
-                }
-              });
-            }
-          }
-        });
-        this.triggerUpdate();
-      }, {
-        fire: true
-      });
-    }
-    this.setSelected(objectId);
-    return this;
-  }
-  close() {
-    this._schemaSubscription?.();
-    this._schemaSubscription = void 0;
-    this._objectsSubscription?.();
-    this._objectsSubscription = void 0;
-    return this;
-  }
-};
-
-// packages/plugins/plugin-explorer/src/components/Graph/Graph.tsx
-import { forceLink, forceManyBody } from "d3";
-import ForceGraph from "force-graph";
-import React, { useEffect, useRef } from "react";
-import { useResizeDetector } from "react-resize-detector";
-import { filterObjectsSync } from "@dxos/plugin-search";
-import { useAsyncState } from "@dxos/react-ui";
-var Graph = ({ space, match }) => {
-  const { ref, width, height } = useResizeDetector({
-    refreshRate: 200
-  });
-  const rootRef = useRef(null);
-  const forceGraph = useRef();
-  const [model] = useAsyncState(async () => space ? new SpaceGraphModel({
-    schema: true
-  }).open(space) : void 0, [
-    space
-  ]);
-  const filteredRef = useRef();
-  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
-  useEffect(() => {
-    if (rootRef.current) {
-      forceGraph.current = new ForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => {
-        if (node.type === "schema") {
-          return node.data.typename;
-        }
-        return node.id;
-      }).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkColor(() => "rgba(255,255,255,0.25)");
-    }
-    return () => {
-      forceGraph.current?.pauseAnimation().graphData({
-        nodes: [],
-        links: []
-      });
-      forceGraph.current = void 0;
-    };
-  }, []);
-  useEffect(() => {
-    if (forceGraph.current && width && height && model) {
-      forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
-        handleZoomToFit();
-      }).d3Force("link", forceLink().distance(160).strength(0.5)).d3Force("charge", forceManyBody().strength(-30)).graphData(model.graph).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
-    }
-  }, [
-    model,
-    width,
-    height
-  ]);
-  const handleZoomToFit = () => {
-    forceGraph.current?.zoomToFit(400, 40);
-  };
-  return /* @__PURE__ */ React.createElement("div", {
-    ref,
-    className: "relative grow",
-    onClick: handleZoomToFit
-  }, /* @__PURE__ */ React.createElement("div", {
-    ref: rootRef,
-    className: "absolute inset-0"
-  }));
-};
-
-export {
-  SpaceGraphModel,
-  Graph
-};
-//# sourceMappingURL=chunk-SBLNE7FL.mjs.map