README for plexus (#425)

README for plexus

packages/plexus/demo/src/SimpleGraph.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+import { LayoutManager } from '../../src';
+// TODO(joe): Update import after killing `DirectedGraph`
+import LayeredDigraph from '../../src/LayeredDigraph';
+import { TVertex } from '../../src/types';
+
+const vertices = [
+  { key: 'web', name: 'web-app : login' },
+  { key: 'users', name: 'user-store : get-user' },
+  { key: 'cache', name: 'cache : get' },
+  { key: 'db', name: 'db : get-user' },
+  { key: 'auth', name: 'auth : login' },
+];
+
+// Edges must refer to the `key` field of vertices.
+const edges = [
+  { from: 'web', to: 'users' },
+  { from: 'web', to: 'auth' },
+  { from: 'users', to: 'cache' },
+  { from: 'users', to: 'db' },
+];
+
+const lm = new LayoutManager({ useDotEdges: true, rankdir: 'TB', ranksep: 1.1 });
+
+const simpleGraph = (
+  <LayeredDigraph
+    edges={edges}
+    vertices={vertices}
+    setOnGraph={{
+      style: {
+        fontFamily: 'sans-serif',
+        height: '100%',
+        position: 'fixed',
+        width: '100%',
+      },
+    }}
+    layoutManager={lm}
+    measurableNodesKey="nodes"
+    layers={[
+      {
+        key: 'edges',
+        edges: true,
+        layerType: 'svg',
+        defs: [{ localId: 'edge-arrow' }],
+        markerEndId: 'edge-arrow',
+      },
+      {
+        key: 'nodes',
+        layerType: 'html',
+        measurable: true,
+        renderNode: (vertex: TVertex) => vertex.name,
+        setOnNode: { style: { padding: '1rem', whiteSpace: 'nowrap', background: '#e8e8e8' } },
+      },
+    ]}
+  />
+);
+
+render(simpleGraph, document.querySelector('#root'));

packages/plexus/demo/src/UxEdges.tsx

@@ -0,0 +1,89 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render } from 'react-dom';
+
+import { LayoutManager } from '../../src';
+// TODO(joe): Update import after killing `DirectedGraph`
+import LayeredDigraph from '../../src/LayeredDigraph';
+import { TVertex } from '../../src/types';
+
+const vertices = [
+  { key: 'web', name: 'web-app : login' },
+  { key: 'users', name: 'user-store : get-user' },
+  { key: 'cache', name: 'cache : get' },
+  { key: 'db', name: 'db : get-user' },
+  { key: 'auth', name: 'auth : login' },
+];
+
+// Edges must refer to the `key` field of vertices.
+const edges = [
+  { from: 'web', to: 'users' },
+  { from: 'web', to: 'auth' },
+  { from: 'users', to: 'cache' },
+  { from: 'users', to: 'db' },
+];
+
+const lm = new LayoutManager({ useDotEdges: true, rankdir: 'TB', ranksep: 1.1 });
+
+const UxEdges = () => (
+  <LayeredDigraph
+    edges={edges}
+    vertices={vertices}
+    setOnGraph={{
+      style: {
+        fontFamily: 'sans-serif',
+        height: '100%',
+        position: 'fixed',
+        width: '100%',
+      },
+    }}
+    layoutManager={lm}
+    measurableNodesKey="nodes"
+    layers={[
+      {
+        key: 'edges-layers',
+        layerType: 'svg',
+        defs: [{ localId: 'arrow-head' }],
+        layers: [
+          {
+            key: 'edges',
+            markerEndId: 'arrow-head',
+            edges: true,
+          },
+          {
+            key: 'edges-pointer-area',
+            edges: true,
+            setOnContainer: { style: { cursor: 'default', opacity: 0, strokeWidth: 4 } },
+            setOnEdge: layoutEdge => ({
+              onMouseOver: () => console.log('mouse over', layoutEdge),
+              onMouseOut: () => console.log('mouse out', layoutEdge),
+            }),
+          },
+        ],
+      },
+      {
+        key: 'nodes',
+        layerType: 'html',
+        measurable: true,
+        renderNode: (vertex: TVertex) => vertex.name,
+        setOnNode: { style: { padding: '1rem', whiteSpace: 'nowrap', background: '#e8e8e8' } },
+      },
+    ]}
+  />
+);
+
+render(<UxEdges />, document.querySelector('#root'));

packages/plexus/demo/src/index.tsx

@@ -25,11 +25,11 @@ import {
   classNameIsSmall as layeredClassNameIsSmall,
   scaleProperty,
 } from '../../src/LayeredDigraph/props-factories';
+import { TLayer, TRendererUtils, TMeasureNodeUtils } from '../../src/LayeredDigraph/types';
 import { TVertex, TLayoutEdge, TLayoutVertex } from '../../src/types';
+import TNonEmptyArray from '../../src/types/TNonEmptyArray';
 
 import './index.css';
-import TNonEmptyArray from '../../src/types/TNonEmptyArray';
-import { TLayer, TRendererUtils, TMeasureNodeUtils } from '../../src/LayeredDigraph/types';
 
 type TState = {
   hoveredEdge: TLayoutEdge<any> | null;

packages/plexus/src/LayeredDigraph/HtmlLayer.tsx

@@ -42,10 +42,14 @@ export default class HtmlLayer<T = {}, U = {}> extends React.PureComponent<TProp
     } = this.props;
     const { zoomTransform } = graphState;
     const zoomStyle = { style: topLayer || standalone ? ZoomManager.getZoomStyle(zoomTransform) : {} };
-    const containerProps = assignMergeCss(getProps(setOnContainer, graphState), zoomStyle, {
-      className: getClassName(classNamePart),
-      style: STYLE,
-    });
+    const containerProps = assignMergeCss(
+      {
+        className: getClassName(classNamePart),
+        style: STYLE,
+      },
+      zoomStyle,
+      getProps(setOnContainer, graphState)
+    );
     return <div {...containerProps}>{children}</div>;
   }
 }

packages/plexus/src/LayeredDigraph/MeasurableNode.tsx

@@ -56,18 +56,21 @@ export default class MeasurableHtmlNode<T = {}> extends React.PureComponent<TPro
   private renderHtml() {
     const { getClassName, hidden, renderNode, renderUtils, setOnNode, vertex, layoutVertex } = this.props;
     const { height = null, left = null, top = null, width = null } = layoutVertex || {};
-    const props = assignMergeCss(getProps(setOnNode, vertex, renderUtils, layoutVertex), {
-      className: getClassName('MeasurableHtmlNode'),
-      style: {
-        height,
-        width,
-        boxSizing: 'border-box',
-        position: 'absolute',
-        transform:
-          left == null || top == null ? undefined : `translate(${left.toFixed()}px,${top.toFixed()}px)`,
-        visibility: hidden ? 'hidden' : undefined,
+    const props = assignMergeCss(
+      {
+        className: getClassName('MeasurableHtmlNode'),
+        style: {
+          height,
+          width,
+          boxSizing: 'border-box',
+          position: 'absolute',
+          transform:
+            left == null || top == null ? undefined : `translate(${left.toFixed()}px,${top.toFixed()}px)`,
+          visibility: hidden ? 'hidden' : undefined,
+        },
       },
-    });
+      getProps(setOnNode, vertex, renderUtils, layoutVertex)
+    );
     return (
       <div ref={this.htmlRef} {...props}>
         {renderNode(vertex, renderUtils, layoutVertex)}
@@ -78,11 +81,14 @@ export default class MeasurableHtmlNode<T = {}> extends React.PureComponent<TPro
   private renderSvg() {
     const { getClassName, hidden, renderNode, renderUtils, setOnNode, vertex, layoutVertex } = this.props;
     const { left = null, top = null } = layoutVertex || {};
-    const props = assignMergeCss(getProps(setOnNode, vertex, renderUtils, layoutVertex), {
-      className: getClassName('MeasurableSvgNode'),
-      transform: left == null || top == null ? undefined : `translate(${left.toFixed()}, ${top.toFixed()})`,
-      style: hidden ? SVG_HIDDEN_STYLE : null,
-    });
+    const props = assignMergeCss(
+      {
+        className: getClassName('MeasurableSvgNode'),
+        transform: left == null || top == null ? undefined : `translate(${left.toFixed()}, ${top.toFixed()})`,
+        style: hidden ? SVG_HIDDEN_STYLE : null,
+      },
+      getProps(setOnNode, vertex, renderUtils, layoutVertex)
+    );
     return (
       <g ref={this.svgRef} {...props}>
         {renderNode(vertex, renderUtils, layoutVertex)}

packages/plexus/src/LayeredDigraph/Node.tsx

@@ -39,11 +39,14 @@ export default class Node<T = {}> extends React.PureComponent<TProps<T>> {
   render() {
     const { getClassName, layerType, renderNode, renderUtils, setOnNode, layoutVertex } = this.props;
     const { left, top } = layoutVertex;
-    const props = assignMergeCss(getProps(setOnNode, layoutVertex, renderUtils), {
-      className: getClassName('Node'),
-      style: layerType === ELayerType.Html ? getHtmlStyle(layoutVertex) : null,
-      transform: layerType === ELayerType.Svg ? `translate(${left.toFixed()},${top.toFixed()})` : null,
-    });
+    const props = assignMergeCss(
+      {
+        className: getClassName('Node'),
+        style: layerType === ELayerType.Html ? getHtmlStyle(layoutVertex) : null,
+        transform: layerType === ELayerType.Svg ? `translate(${left.toFixed()},${top.toFixed()})` : null,
+      },
+      getProps(setOnNode, layoutVertex, renderUtils)
+    );
     const Wrapper = layerType === ELayerType.Html ? 'div' : 'g';
     return <Wrapper {...props}>{renderNode(layoutVertex, renderUtils)}</Wrapper>;
   }

packages/plexus/src/LayeredDigraph/SvgDefEntry.tsx

@@ -62,9 +62,12 @@ export default class SvgDefEntry<T = {}, U = {}> extends React.PureComponent<TPr
   render() {
     const { getClassName, localId, graphState, renderEntry = renderDefaultMarker, setOnEntry } = this.props;
     const id = graphState.renderUtils.getLocalId(localId);
-    const entryProps = assignMergeCss(getProps(setOnEntry, graphState), {
-      className: getClassName('DefEntry'),
-    });
+    const entryProps = assignMergeCss(
+      {
+        className: getClassName('DefEntry'),
+      },
+      getProps(setOnEntry, graphState)
+    );
     return renderEntry(graphState, entryProps, id);
   }
 }

packages/plexus/src/LayeredDigraph/SvgEdge.tsx

@@ -41,9 +41,12 @@ export default class SvgEdge<U = {}> extends React.PureComponent<TProps<U>> {
     const d = pathPoints.map((pt, i) => `${PATH_D_CMDS[i] || ''}${pt.join(',')}`).join(' ');
     const markerEnd = makeIriRef(renderUtils, markerEndId);
     const markerStart = makeIriRef(renderUtils, markerStartId);
-    const customProps = assignMergeCss(getProps(setOnEdge, layoutEdge, renderUtils), {
-      className: getClassName('SvgEdge'),
-    });
+    const customProps = assignMergeCss(
+      {
+        className: getClassName('SvgEdge'),
+      },
+      getProps(setOnEdge, layoutEdge, renderUtils)
+    );
     return (
       <path
         d={d}

packages/plexus/src/LayeredDigraph/SvgLayer.tsx

@@ -31,7 +31,13 @@ type TProps<T = {}, U = {}> = Record<string, unknown> &
     topLayer?: boolean;
   };
 
-const STYLE: React.CSSProperties = { minHeight: '100%', minWidth: '100%', position: 'absolute' };
+const STYLE: React.CSSProperties = {
+  left: 0,
+  minHeight: '100%',
+  minWidth: '100%',
+  position: 'absolute',
+  top: 0,
+};
 
 export default class SvgLayer<T = {}, U = {}> extends React.PureComponent<TProps<T, U>> {
   render() {
@@ -47,9 +53,12 @@ export default class SvgLayer<T = {}, U = {}> extends React.PureComponent<TProps
       topLayer,
     } = this.props;
 
-    const containerProps = assignMergeCss(getProps(setOnContainer, graphState), {
-      className: getClassName(classNamePart),
-    });
+    const containerProps = assignMergeCss(
+      {
+        className: getClassName(classNamePart),
+      },
+      getProps(setOnContainer, graphState)
+    );
     let content = (
       <g {...containerProps}>
         {defs && (

packages/plexus/src/LayeredDigraph/index.tsx

@@ -27,6 +27,7 @@ import {
   TLayer,
   TRendererUtils,
   ELayerType,
+  TSetProps,
 } from './types';
 import { assignMergeCss, getProps } from './utils';
 // TODO(joe): don't use stuff in ../DirectedGraph
@@ -49,7 +50,7 @@ type TLayeredDigraphProps<T = {}, U = {}> = {
   measurableNodesKey: string;
   minimap?: boolean;
   minimapClassName?: string;
-  setOnGraph?: TFromGraphStateFn<T, U>;
+  setOnGraph?: TSetProps<TFromGraphStateFn<T, U>>;
   style?: React.CSSProperties;
   vertices: TVertex<T>[];
   zoom?: boolean;
@@ -266,12 +267,12 @@ export default class LayeredDigraph<T = {}, U = {}> extends React.PureComponent<
       style,
     } = this.props;
     const rootProps = assignMergeCss(
-      { className, style },
-      getProps(setOnGraph, { ...this.state, renderUtils: this.renderUtils }),
       {
         style: this.zoomManager ? WRAPPER_STYLE_ZOOM : WRAPPER_STYLE,
         className: `${classNamePrefix} ${classNamePrefix}-LayeredDigraph`,
-      }
+      },
+      { className, style },
+      getProps(setOnGraph, { ...this.state, renderUtils: this.renderUtils })
     );
     return (
       <div {...rootProps} ref={this.rootRef}>