@dxos/app-graph 0.3.3-main.052ad73

package/src/stories/Tree.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC, type HTMLAttributes, useState } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Copied form devtools.
+
+export const Tree: FC<{ data?: object }> = ({ data }) => {
+  return (
+    <div className='flex overflow-auto ml-2 border-l-2 border-blue-500'>
+      <Node data={data} root />
+    </div>
+  );
+};
+
+export const Node: FC<{ data?: any; root?: boolean }> = ({ data, root }) => {
+  if (typeof data !== 'object' || data === undefined || data === null) {
+    return <Scalar value={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    return (
+      <div className='flex flex-col space-y-2'>
+        {data.map((value, index) => (
+          <KeyValue key={index} label={String(index)} data={value} className='bg-teal-50' />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col space-y-2'>
+      {Object.entries(data).map(([key, value]) => (
+        <KeyValue key={key} label={key} data={value} className='bg-blue-50' />
+      ))}
+    </div>
+  );
+};
+
+export const KeyValue: FC<{ label: string; data?: any; className?: string }> = ({ label, data, className }) => {
+  const [open, setOpen] = useState(true);
+  if (data === undefined) {
+    return null;
+  }
+
+  return (
+    <div className='flex'>
+      <Box
+        className={mx('border-blue-200 text-sm select-none cursor-pointer', className)}
+        onClick={() => setOpen((open) => !open)}
+      >
+        {label}
+      </Box>
+      {open && <Node data={data} />}
+    </div>
+  );
+};
+
+const Scalar: FC<{ value: any }> = ({ value }) => {
+  return (
+    <Box className='bg-green-50 border-green-200 rounded-r text-sm font-thin'>
+      {(value === undefined && 'undefined') ||
+        (value === null && 'null') ||
+        (typeof value === 'string' && value) ||
+        JSON.stringify(value)}
+    </Box>
+  );
+};
+
+const Box: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...props }) => {
+  return (
+    <div className={mx('flex px-2 border border-l-0 font-mono truncate', className)} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/testing.ts

@@ -0,0 +1,152 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Action } from './action';
+import { type Graph } from './graph';
+import { type NodeBuilder, type Node } from './node';
+
+/**
+ * Create a test node builder that always adds nodes and actions to the specified depth.
+ *
+ * @param id The id of the node builder, used to identify nodes created by this builder.
+ * @param depth The depth at which to add nodes and actions.
+ * @default 1
+ *
+ * @returns A test node builder
+ */
+// TODO(burdon): Change to TestNodeBuilder class (see other builder/generator patterns in client/echo).
+export const createTestNodeBuilder = (id: string, depth = 1) => {
+  const nodes = new Map<string, Node>();
+  const nodeBuilder: NodeBuilder = (parent) => {
+    if (checkDepth(parent) >= depth) {
+      return;
+    }
+
+    const [child] = parent.addNode(id, {
+      id: `${parent.id}-${id}`,
+      label: `${parent.id}-${id}`,
+      data: null,
+      parent,
+    });
+
+    parent.addAction({
+      id: `${parent.id}-${id}`,
+      label: `${parent.id}-${id}`,
+      invoke: () => {},
+    });
+
+    nodes.set(parent.id, parent);
+    nodes.set(child.id, child);
+  };
+
+  const addNode = (parentId: string, node: Pick<Node, 'id' | 'label'> & Partial<Node>) => {
+    const parent = nodes.get(parentId);
+    if (!parent) {
+      return;
+    }
+
+    const [child] = parent.addNode(id, node);
+    nodes.set(child.id, child);
+    return child;
+  };
+
+  const removeNode = (parentId: string, id: string) => {
+    const parent = nodes.get(parentId);
+    if (!parent) {
+      return;
+    }
+
+    return parent.removeNode(id);
+  };
+
+  const addAction = (parentId: string, action: Pick<Action, 'id' | 'label' | 'invoke'> & Partial<Action>) => {
+    const parent = nodes.get(parentId);
+    if (!parent) {
+      return;
+    }
+
+    return parent.addAction(action);
+  };
+
+  const removeAction = (parentId: string, id: string) => {
+    const parent = nodes.get(parentId);
+    if (!parent) {
+      return;
+    }
+
+    return parent.removeAction(id);
+  };
+
+  const addProperty = (parentId: string, key: string, value: any) => {
+    const parent = nodes.get(parentId);
+    if (!parent) {
+      return;
+    }
+
+    return parent.addProperty(key, value);
+  };
+
+  const removeProperty = (parentId: string, key: string) => {
+    const parent = nodes.get(parentId);
+    if (!parent) {
+      return;
+    }
+
+    return parent.removeProperty(key);
+  };
+
+  return { nodeBuilder, addNode, removeNode, addAction, removeAction, addProperty, removeProperty };
+};
+
+/**
+ * Build a graph from a nested list of nodes.
+ *
+ * @param graph Graph to add nodes to.
+ * @param nodes Nodes to add to the
+ *
+ * @example
+ * const graph = new GraphStore();
+ * buildGraph(graph, [
+ *   {
+ *     id: 'test1',
+ *     label: 'test1',
+ *     children: [
+ *       {
+ *         id: 'test1.1',
+ *         label: 'test1.1',
+ *       },
+ *       {
+ *         id: 'test1.2',
+ *         label: 'test1.2',
+ *       },
+ *     ],
+ *   },
+ *   {
+ *     id: 'test2',
+ *     label: 'test2',
+ *   },
+ * ]);
+ */
+
+// TODO(wittjosiah): Type nodes.
+export const buildGraph = (graph: Graph, id: string, nodes: any[]) => {
+  addNodes(graph.root, id, nodes);
+  return graph;
+};
+
+const addNodes = (root: Node, id: string, nodes: any[]) => {
+  nodes.forEach((node) => {
+    const [child] = root.addNode(id, node);
+    addNodes(child, id, node.children || []);
+    node.actions?.forEach((action: any) => child.addAction(action));
+  });
+};
+
+const checkDepth = (node: Node, depth = 0): number => {
+  if (!node.parent) {
+    return depth;
+  }
+
+  return checkDepth(node.parent, depth + 1);
+};