@dxos/plugin-explorer 0.9.1-main.c7dcc2e112 → 0.10.0

package/src/containers/index.ts

@@ -5,3 +5,4 @@
 import { type ComponentType, lazy } from 'react';
 
 export const ExplorerArticle: ComponentType<any> = lazy(() => import('./ExplorerArticle'));
+export const NeighborhoodCompanion: ComponentType<any> = lazy(() => import('./NeighborhoodCompanion'));

package/src/hooks/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './useGraphModel';
+export * from './useNeighborhoodModel';

package/src/hooks/useNeighborhoodModel.ts

@@ -0,0 +1,81 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';
+
+import { useGraphModel } from './useGraphModel';
+
+/** Default traversal depth (hops) for the neighborhood graph. */
+export const DEFAULT_NEIGHBORHOOD_DEPTH = 2;
+
+/**
+ * Builds an ego graph around `object`: the n-hop neighbourhood reached by following refs and
+ * relations from the active node. The full space graph is materialised (reactively) and then
+ * narrowed to the nodes within `depth` hops, keeping only edges whose endpoints both survive.
+ *
+ * NOTE: Derives the subgraph from the whole-space model — the same cost the main explorer pays.
+ * A direct ECHO traversal that loads only the reachable objects is a future optimisation.
+ */
+export const useNeighborhoodModel = (
+  object: Obj.Unknown | undefined,
+  depth = DEFAULT_NEIGHBORHOOD_DEPTH,
+): SpaceGraphModel | undefined => {
+  const db = object ? Obj.getDatabase(object) : undefined;
+  const fullModel = useGraphModel(db);
+  const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);
+
+  useEffect(() => {
+    if (!fullModel || !object) {
+      setModel(undefined);
+      return;
+    }
+
+    const recompute = () => setModel(buildNeighborhood(fullModel, object.id, depth));
+    recompute();
+    return fullModel.subscribe(recompute);
+  }, [fullModel, object?.id, depth]);
+
+  return model;
+};
+
+/**
+ * Narrow the full graph to the BFS neighbourhood of `rootId` within `depth` hops (edges treated as
+ * undirected so the neighbourhood reads as graph distance regardless of ref/relation direction).
+ */
+const buildNeighborhood = (fullModel: SpaceGraphModel, rootId: string, depth: number): SpaceGraphModel => {
+  const { nodes, edges } = fullModel.graph;
+
+  const adjacency = new Map<string, string[]>();
+  const link = (from: string, to: string) => {
+    const list = adjacency.get(from) ?? [];
+    list.push(to);
+    adjacency.set(from, list);
+  };
+  for (const edge of edges) {
+    link(edge.source, edge.target);
+    link(edge.target, edge.source);
+  }
+
+  const included = new Set<string>([rootId]);
+  let frontier = [rootId];
+  for (let hop = 0; hop < depth && frontier.length; hop++) {
+    const next: string[] = [];
+    for (const id of frontier) {
+      for (const neighbour of adjacency.get(id) ?? []) {
+        if (!included.has(neighbour)) {
+          included.add(neighbour);
+          next.push(neighbour);
+        }
+      }
+    }
+    frontier = next;
+  }
+
+  const subNodes = nodes.filter((node: SpaceGraphNode) => included.has(node.id));
+  const subEdges = edges.filter((edge: SpaceGraphEdge) => included.has(edge.source) && included.has(edge.target));
+  return fullModel.copy({ nodes: subNodes, edges: subEdges });
+};

package/src/testing/relations.ts

@@ -4,6 +4,7 @@
 
 import { type Space } from '@dxos/client/echo';
 import { Obj, Query, Relation } from '@dxos/echo';
+import { type BundleEdge, type TreeNode } from '@dxos/react-ui-graph';
 import {
   type RelationSpec,
   type TypeSpec,
@@ -13,9 +14,6 @@ import {
 } from '@dxos/schema/testing';
 import { HasConnection, Organization, Person } from '@dxos/types';
 
-import { type BundleEdge } from '../components/Tree/layout';
-import { type TreeNode } from '../components/Tree/types';
-
 const SECTORS = ['Technology', 'Finance', 'Research', 'Media'];
 const CONNECTION_KINDS = ['partner', 'investor', 'vendor', 'customer'];
 

package/src/translations.ts

@@ -26,6 +26,9 @@ export const translations = [
       [meta.profile.key]: {
         'plugin.name': 'Explorer',
         'object-title.label': 'Title',
+        'neighborhood-companion.label': 'Graph',
+        'depth.label_one': '{{count}} hop',
+        'depth.label_other': '{{count}} hops',
       },
     },
   },

package/src/types/Graph.ts

@@ -4,29 +4,27 @@
 
 import * as Schema from 'effect/Schema';
 
-import { DXN, Annotation, Filter, Obj, Query, QueryAST, Ref, Type, View } from '@dxos/echo';
+import { Annotation, DXN, Filter, Obj, Query, QueryAST, Ref, Type, View } from '@dxos/echo';
 import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/Annotation';
 import { ViewAnnotation } from '@dxos/schema';
 
-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(FormInputAnnotation.set(false)),
-}).pipe(
-  LabelAnnotation.set(['name']),
-  ViewAnnotation.set(['view']),
-  Annotation.IconAnnotation.set({ icon: 'ph--graph--regular', hue: 'green' }),
-  Type.makeObject(DXN.make('org.dxos.type.graph', '0.1.0')),
-);
-// TODO(wittjosiah): Try to clean up this type inference.
-export interface Graph extends Type.InstanceType<typeof GraphSchema> {}
-export const Graph: Type.Obj<Graph> = GraphSchema as any;
+export class Graph extends Type.makeObject<Graph>(DXN.make('org.dxos.type.graph', '0.1.0'))(
+  Schema.Struct({
+    name: Schema.optional(Schema.String),
+    view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false), Schema.optional),
+    query: Schema.Struct({
+      raw: Schema.optional(Schema.String),
+      ast: QueryAST.Query,
+    }).pipe(FormInputAnnotation.set(false)),
+  }).pipe(
+    LabelAnnotation.set(['name']),
+    ViewAnnotation.set(['view']),
+    Annotation.IconAnnotation.set({ icon: 'ph--graph--regular', hue: 'green' }),
+  ),
+) {}
 
 type MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {
-  view: View.View;
+  view?: View.View;
 };
 
 /**
@@ -36,6 +34,6 @@ 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 });
+}: MakeProps = {}): Graph => {
+  return Obj.make(Graph, { name, view: view && Ref.make(view), query });
 };

package/dist/lib/neutral/ExplorerArticle-MHEINWUL.mjs

@@ -1,460 +0,0 @@
-import {
-  getNodeFillForObject
-} from "./chunk-IKHJV3Q4.mjs";
-import "./chunk-J5LGTIGS.mjs";
-
-// src/containers/ExplorerArticle/ExplorerArticle.tsx
-import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
-import { AppSurface } from "@dxos/app-toolkit/ui";
-import { Obj as Obj2 } 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 } from "@dxos/react-ui-components";
-import "@dxos/react-ui-graph/styles/graph.css";
-import { useGraphModel } from "#hooks";
-
-// src/containers/ExplorerArticle/variants.ts
-var VARIANTS = [
-  {
-    value: "force",
-    icon: "ph--graph--regular",
-    label: "Force-directed"
-  },
-  {
-    value: "cluster",
-    icon: "ph--asterisk-simple--regular",
-    label: "Radial"
-  },
-  {
-    value: "bundle",
-    icon: "ph--circles-three-plus--regular",
-    label: "Connections"
-  },
-  {
-    value: "plexus",
-    icon: "ph--share-network--regular",
-    label: "Plexus"
-  },
-  {
-    value: "lattice",
-    icon: "ph--grid-four--regular",
-    label: "Lattice"
-  },
-  {
-    value: "swarm",
-    icon: "ph--microscope--regular",
-    label: "Swarm"
-  }
-];
-var isVariant = (value) => value === "force" || value === "cluster" || value === "bundle" || value === "lattice" || value === "swarm" || value === "plexus";
-
-// src/containers/ExplorerArticle/Visualization.tsx
-import { curveCatmullRom, line as d3Line } from "d3";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Obj } from "@dxos/echo";
-import { CLUSTER_NODE_TYPE_LEAF, CLUSTER_NODE_TYPE_ROOT, GraphBundleProjector, GraphClusterProjector, GraphForceProjector, GraphLatticeProjector, GraphPlexusProjector, GraphSwarmProjector, PLEXUS_NODE_TYPE_FOCUS, PLEXUS_NODE_TYPE_RELATION, SVG, appendRadialGroupLabel, appendRadialLeafLabel, appendRootLabel } from "@dxos/react-ui-graph";
-import { mx } from "@dxos/ui-theme";
-var Visualization = ({ classNames, debug = true, variant, model, onNodeHover, onSurfaceClick }) => {
-  const svgRef = useRef(null);
-  const [projector, setProjector] = useState();
-  const projectorRef = useRef(void 0);
-  projectorRef.current = projector;
-  const [focusId, setFocusId] = useState(void 0);
-  const lastLayoutRef = useRef(void 0);
-  useEffect(() => model?.subscribe(() => void 0), [
-    model
-  ]);
-  useEffect(() => {
-    if (variant !== "plexus") {
-      setFocusId(void 0);
-    }
-  }, [
-    variant
-  ]);
-  useEffect(() => {
-    if (projectorRef.current?.layout) {
-      lastLayoutRef.current = projectorRef.current.layout;
-    }
-    if (!svgRef.current) {
-      return;
-    }
-    setProjector(createProjector(svgRef.current, variant, focusId, lastLayoutRef.current));
-  }, [
-    variant,
-    focusId
-  ]);
-  const handleSelect = useCallback((node) => {
-    if (variant !== "plexus") {
-      return;
-    }
-    if (!node.data?.data?.object) {
-      return;
-    }
-    setFocusId((current) => current === node.id ? void 0 : node.id);
-  }, [
-    variant
-  ]);
-  const renderNode = useMemo(() => createRenderNode(variant), [
-    variant
-  ]);
-  const applyNode = useMemo(() => variant === "swarm" ? applyNodeSwarm : void 0, [
-    variant
-  ]);
-  const handlePointerMove = useCallback((point) => {
-    if (projector instanceof GraphSwarmProjector) {
-      projector.setCursor(point.x, point.y);
-    }
-  }, [
-    projector
-  ]);
-  const handlePointerLeave = useCallback(() => {
-    if (projector instanceof GraphSwarmProjector) {
-      projector.setCursor(null);
-    }
-  }, [
-    projector
-  ]);
-  const handleInspect = useCallback((node, event) => {
-    if (variant === "plexus") {
-      return;
-    }
-    onNodeHover?.(node ? {
-      id: node.id,
-      data: node.data?.data?.object
-    } : null, event);
-  }, [
-    variant === "plexus" ? void 0 : onNodeHover
-  ]);
-  const swarmPointerProps = variant === "swarm" ? {
-    onPointerMove: handlePointerMove,
-    onPointerLeave: handlePointerLeave
-  } : void 0;
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mx("dx-expander relative", classNames),
-    onClick: onSurfaceClick
-  }, /* @__PURE__ */ React.createElement(SVG.Root, {
-    ref: svgRef
-  }, /* @__PURE__ */ React.createElement(SVG.Zoom, {
-    extent: [
-      1 / 2,
-      2
-    ]
-  }, /* @__PURE__ */ React.createElement(SVG.Graph, {
-    model,
-    projector,
-    renderNode,
-    applyNode,
-    edgeOpacity: variant === "swarm" ? 0.3 : void 0,
-    drag: variant === "force",
-    highlightOnHover: variant === "bundle",
-    onSelect: handleSelect,
-    onInspect: handleInspect,
-    ...swarmPointerProps
-  })), debug && /* @__PURE__ */ React.createElement(SVG.FPS, null)));
-};
-var TWEEN_MS = 500;
-var LABEL_FADE_MS = 200;
-var PLEXUS_LEAF_RADIUS = 5;
-var PLEXUS_FOCUS_RADIUS = PLEXUS_LEAF_RADIUS * 2;
-var swarmTrailLine = d3Line().curve(curveCatmullRom.alpha(0.5));
-var applyNodeSwarm = (group, node) => {
-  const swarm = node;
-  const path = group.querySelector("path.dx-swarm-tail");
-  const grad = group.querySelector("linearGradient");
-  if (!path || !grad) {
-    return;
-  }
-  const history = swarm.history ?? [];
-  if (history.length === 0) {
-    path.setAttribute("d", "");
-    return;
-  }
-  const hx = swarm.x ?? 0;
-  const hy = swarm.y ?? 0;
-  const points = [
-    [
-      0,
-      0
-    ]
-  ];
-  for (let i = history.length - 1; i >= 0; i--) {
-    points.push([
-      history[i].x - hx,
-      history[i].y - hy
-    ]);
-  }
-  path.setAttribute("d", swarmTrailLine(points) ?? "");
-  const oldest = history[0];
-  grad.setAttribute("x2", String(oldest.x - hx));
-  grad.setAttribute("y2", String(oldest.y - hy));
-};
-var createProjector = (ctx, variant, focusId, prev) => {
-  switch (variant) {
-    case "force":
-      return new GraphForceProjector(ctx, void 0, void 0, prev);
-    case "swarm":
-      return new GraphSwarmProjector(ctx, void 0, void 0, prev);
-    case "lattice":
-      return new GraphLatticeProjector(ctx, {
-        duration: TWEEN_MS,
-        // Plugin-explorer overrides the projector's force-matched default (6)
-        // with a smaller node so the lattice reads as a dense matrix.
-        radius: 4,
-        // Cluster by typename first so same-type rects sit together; break ties by label.
-        sortBy: (node) => {
-          const obj = node.data?.data?.object;
-          const typename = obj ? Obj.getTypename(obj) ?? "(untyped)" : "(untyped)";
-          const label = (obj && Obj.getLabel(obj)) ?? node.data?.data?.label ?? node.id;
-          return `${typename} ${label}`;
-        }
-      }, void 0, prev);
-    case "cluster":
-      return new GraphClusterProjector(ctx, {
-        duration: TWEEN_MS,
-        groupOf: typenameGroupOf,
-        rootLabel: "Database",
-        groupLabel: shortTypename,
-        // All three node kinds share the same radius — leaves, groups, and root read
-        // as members of the same circle rather than ranked by size.
-        rootRadius: 4,
-        groupRadius: 4
-      }, void 0, prev);
-    case "bundle":
-      return new GraphBundleProjector(ctx, {
-        duration: TWEEN_MS,
-        groupOf: typenameGroupOf
-      }, void 0, prev);
-    case "plexus":
-      if (!focusId) {
-        return new GraphBundleProjector(ctx, {
-          duration: TWEEN_MS,
-          groupOf: typenameGroupOf
-        }, void 0, prev);
-      }
-      return new GraphPlexusProjector(ctx, {
-        duration: TWEEN_MS,
-        focus: focusId,
-        relationOf: plexusRelationOf,
-        leafRadius: PLEXUS_LEAF_RADIUS,
-        relationRadius: PLEXUS_LEAF_RADIUS,
-        focusRadius: PLEXUS_FOCUS_RADIUS
-      }, void 0, prev);
-  }
-};
-var plexusRelationOf = (edge, focusId) => {
-  const outgoing = edge.source.id === focusId;
-  const incoming = edge.target.id === focusId;
-  if (!outgoing && !incoming) {
-    return void 0;
-  }
-  const direction = outgoing ? "out" : "in";
-  const arrow = outgoing ? "\u2192" : "\u2190";
-  if (edge.type === "relation") {
-    const relation = edge.data?.object;
-    const typename = relation ? Obj.getTypename(relation) : void 0;
-    const name = typename ? shortTypename(typename) : "Relation";
-    return {
-      key: `relation:${direction}:${typename ?? "?"}`,
-      label: `${name} ${arrow}`
-    };
-  }
-  if (edge.type === "ref") {
-    const property = edge.data?.property;
-    const name = property ?? "References";
-    return {
-      key: `ref:${direction}:${property ?? "?"}`,
-      label: `${name} ${arrow}`
-    };
-  }
-  return void 0;
-};
-var createRenderNode = (variant) => {
-  switch (variant) {
-    case "force":
-      return (group, node) => {
-        const r = node.r ?? 6;
-        group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", getNodeFillForObject(node.data?.data?.object));
-      };
-    case "swarm":
-      return (group, node) => {
-        const fill = getNodeFillForObject(node.data?.data?.object);
-        const r = node.r ?? 6;
-        const strokeWidth = Math.max(1, r * 0.6);
-        const gradId = `dx-swarm-grad-${String(node.id).replace(/[^\w-]/g, "_")}`;
-        const grad = group.append("defs").append("linearGradient").attr("id", gradId).attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 0);
-        grad.append("stop").attr("offset", 0).attr("stop-color", fill).attr("stop-opacity", 0.7);
-        grad.append("stop").attr("offset", 1).attr("stop-color", fill).attr("stop-opacity", 0);
-        group.append("path").classed("dx-swarm-tail", true).attr("fill", "none").attr("stroke", `url(#${gradId})`).attr("stroke-width", strokeWidth).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("pointer-events", "none");
-        group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", fill);
-      };
-    case "lattice":
-      return (group, node) => {
-        const r = node.r ?? 6;
-        const sz = r * 2;
-        group.append("rect").attr("x", -r).attr("y", -r).attr("width", sz).attr("height", sz).attr("rx", r * 0.3).attr("ry", r * 0.3).style("cursor", "pointer").style("fill", getNodeFillForObject(node.data?.data?.object));
-      };
-    case "cluster":
-      return (group, node) => {
-        const obj = node.data?.data?.object;
-        const r = node.r ?? 4;
-        group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", obj ? getNodeFillForObject(obj) : "var(--color-neutral-500)");
-        const labelOptions = {
-          delay: TWEEN_MS,
-          duration: LABEL_FADE_MS
-        };
-        if (node.type === CLUSTER_NODE_TYPE_LEAF) {
-          const text = labelForLeaf(node, obj);
-          if (text) {
-            appendRadialLeafLabel(group, node, text, r, labelOptions);
-          }
-        } else if (node.type === CLUSTER_NODE_TYPE_ROOT) {
-          if (node.label) {
-            appendRootLabel(group, node.label, r, labelOptions);
-          }
-        } else {
-          if (node.label) {
-            appendRadialGroupLabel(group, node, node.label, r, labelOptions);
-          }
-        }
-      };
-    case "bundle":
-      return (group, node) => {
-        const obj = node.data?.data?.object;
-        const r = node.r ?? 4;
-        group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", obj ? getNodeFillForObject(obj) : "var(--color-neutral-500)");
-        const text = labelForLeaf(node, obj);
-        if (text) {
-          appendRadialLeafLabel(group, node, text, r, {
-            delay: TWEEN_MS,
-            duration: LABEL_FADE_MS
-          });
-        }
-      };
-    case "plexus":
-      return (group, node) => {
-        const obj = node.data?.data?.object;
-        const labelOptions = {
-          delay: TWEEN_MS,
-          duration: LABEL_FADE_MS
-        };
-        if (node.type === PLEXUS_NODE_TYPE_RELATION) {
-          const r2 = PLEXUS_LEAF_RADIUS;
-          group.append("circle").attr("r", r2).style("cursor", "default").style("fill", "var(--color-neutral-500)");
-          if (node.label) {
-            appendRadialGroupLabel(group, node, node.label, r2, labelOptions);
-          }
-          return;
-        }
-        const isFocus = node.type === PLEXUS_NODE_TYPE_FOCUS;
-        const r = isFocus ? PLEXUS_FOCUS_RADIUS : PLEXUS_LEAF_RADIUS;
-        group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", obj ? getNodeFillForObject(obj) : "var(--color-neutral-500)");
-        const text = labelForLeaf(node, obj);
-        if (text) {
-          if (isFocus) {
-            appendRootLabel(group, text, r, labelOptions);
-          } else {
-            appendRadialLeafLabel(group, node, text, r, labelOptions);
-          }
-        }
-      };
-  }
-};
-var typenameGroupOf = (node) => {
-  const obj = node.data?.data?.object;
-  return obj ? Obj.getTypename(obj) ?? "(untyped)" : void 0;
-};
-var shortTypename = (typename) => {
-  const last = typename.split(".").pop() ?? typename;
-  return last.charAt(0).toUpperCase() + last.slice(1);
-};
-var labelForLeaf = (node, obj) => (obj && Obj.getLabel(obj)) ?? node.data?.data?.label ?? node.id;
-
-// src/containers/ExplorerArticle/ExplorerArticle.tsx
-var ExplorerArticle = ({ role, subject, variant }) => {
-  const [view] = useObject(subject);
-  const [filter, setFilter] = useState2();
-  const db = view && Obj2.getDatabase(view);
-  const model = useGraphModel(db, filter);
-  const builder = useMemo2(() => new QueryBuilder(), []);
-  const handleChange = useCallback2((value) => {
-    setFilter(builder.build(value).filter);
-  }, [
-    builder
-  ]);
-  const [selected, setSelected] = useState2(isVariant(variant) ? variant : "force");
-  useEffect2(() => {
-    if (isVariant(variant)) {
-      setSelected(variant);
-    }
-  }, [
-    variant
-  ]);
-  const handleVariantChange = useCallback2((value) => {
-    if (isVariant(value)) {
-      setSelected(value);
-    }
-  }, []);
-  const handleDismiss = useCallback2(() => {
-    document.defaultView?.dispatchEvent(new DxAnchorActivate({
-      dxn: "",
-      label: "",
-      trigger: document.body,
-      state: false
-    }));
-  }, []);
-  const handleHover = useCallback2((node, event) => {
-    if (!node || !event) {
-      return;
-    }
-    const obj = node.data;
-    if (!obj || !Obj2.isObject(obj)) {
-      return;
-    }
-    const dxn = Obj2.getURI(obj);
-    if (!dxn) {
-      return;
-    }
-    const target = event.target;
-    target.dispatchEvent(new DxAnchorActivate({
-      dxn,
-      kind: "card",
-      trigger: target,
-      label: Obj2.getLabel(obj) ?? dxn
-    }));
-  }, []);
-  const showToolbar = role === AppSurface.Article.role;
-  if (!db || !model) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(Panel.Root, {
-    role
-  }, showToolbar && /* @__PURE__ */ React2.createElement(Panel.Toolbar, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Toolbar.Root, null, /* @__PURE__ */ React2.createElement(QueryEditor, {
-    db,
-    onChange: handleChange
-  }), /* @__PURE__ */ React2.createElement(Toolbar.ToggleGroup, {
-    type: "single",
-    value: selected,
-    onValueChange: handleVariantChange
-  }, VARIANTS.map(({ value, icon, label }) => /* @__PURE__ */ React2.createElement(Toolbar.ToggleGroupItem, {
-    key: value,
-    value,
-    "aria-label": label,
-    title: label
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    icon,
-    size: 4
-  })))))), /* @__PURE__ */ React2.createElement(Panel.Content, null, /* @__PURE__ */ React2.createElement(Visualization, {
-    classNames: "bg-base-surface",
-    variant: selected,
-    model,
-    onNodeHover: handleHover,
-    onSurfaceClick: handleDismiss
-  })));
-};
-export {
-  ExplorerArticle as default
-};
-//# sourceMappingURL=ExplorerArticle-MHEINWUL.mjs.map