Directed graph layout and presentation

.flowconfig

@@ -3,6 +3,7 @@
 .*/node_modules/redux-form/.*
 .*/node_modules/react-motion/.*
 .*/node_modules/draft-js/.*
+.*/node_modules/nwb/.*
 
 [include]
 
@@ -12,4 +13,4 @@
 [options]
 
 [version]
-0.64.0
+0.71.0

.gitignore

@@ -15,3 +15,4 @@ coverage
 npm-debug.log
 .vscode
 yarn-error.log
+*.ignore.*

package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "license": "Apache-2.0",
   "devDependencies": {
     "babel-eslint": "^7.2.3",
     "eslint": "^4.5.0",
@@ -10,6 +11,7 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.2.1",
+    "flow-bin": "^0.71.0",
     "glow": "^1.2.2",
     "husky": "^0.14.3",
     "lerna": "^2.10.2",
@@ -26,7 +28,7 @@
     "lint": "npm run eslint && npm run prettier && npm run flow && npm run check-license",
     "precommit": "lint-staged",
     "prettier":
-      "prettier --write '{.,scripts}/*.{js,json,md}' 'packages/*/src/**/*.{css,js,json,md}' 'packages/*/*.{css,js,json,md}'",
+      "prettier --write '{.,scripts}/*.{js,json,md}' 'packages/*/{src,demo/src}/**/*.{css,js,json,md}' 'packages/*/*.{css,js,json,md}'",
     "test": "lerna run test"
   },
   "prettier": {

packages/jaeger-ui/package.json

@@ -1,8 +1,9 @@
 {
+  "private": true,
   "name": "jaeger-ui",
   "version": "0.0.1",
   "main": "src/index.js",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "proxy": {
     "/api": {
       "target": "http://localhost:16686",
@@ -51,9 +52,9 @@
     "prop-types": "^15.5.10",
     "query-string": "^5.0.0",
     "raven-js": "^3.22.1",
-    "react": "^16.3.0",
+    "react": "^16.3.2",
     "react-dimensions": "^1.3.0",
-    "react-dom": "^16.3.0",
+    "react-dom": "^16.3.2",
     "react-ga": "^2.4.1",
     "react-helmet": "^5.1.3",
     "react-icons": "^2.2.7",

packages/jaeger-ui/src/components/App/TopNav.js

@@ -72,14 +72,16 @@ export default function TopNav(props: TopNavProps) {
   return (
     <div>
       <Menu theme="dark" mode="horizontal" selectable={false} className="ub-right" selectedKeys={[activeKey]}>
-        {menuItems.map(item => {
-          if (item.items) {
+        {menuItems.map(m => {
+          if (m.items != null) {
+            const group = ((m: any): ConfigMenuGroup);
             return (
-              <Menu.Item key={item.label}>
-                <CustomNavDropdown key={item.label} {...item} />
+              <Menu.Item key={group.label}>
+                <CustomNavDropdown key={group.label} {...group} />
               </Menu.Item>
             );
           }
+          const item = ((m: any): ConfigMenuItem);
           return (
             <Menu.Item key={item.label}>
               <a href={item.url} target="_blank" rel="noopener noreferrer">

packages/plexus/.gitignore

@@ -0,0 +1,4 @@
+demo/dist
+es
+lib
+umd

packages/plexus/README.md

@@ -0,0 +1,3 @@
+# plexus
+
+Describe plexus here.

packages/plexus/demo/src/data-small.js

@@ -0,0 +1,84 @@
+// Copyright (c) 2017 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';
+
+export const varied = {
+  vertices: [
+    { key: 'string key 0', data: { value: new Date(), message: 'vertex w a string key that has spaces' } },
+    {
+      key: 1,
+      label: 'Key is the number 1Key is the number 1Key',
+      data: { err: new Error(9), message: 'vertex with a number key and a string label' },
+    },
+    { key: '2', label: <h3>OMG an H3</h3>, data: { message: 'label is an H3 React element' } },
+    {
+      key: 33,
+      label: 'Key is the number 1Key is the number 1Key',
+      data: { value: /abc/, message: 'data contains a RegExp and the node lacks a label' },
+    },
+  ],
+  edges: [
+    { from: 'string key 0', to: 1, label: 'The Great Edge Label', data: 'Edge with a string label' },
+    {
+      from: 'string key 0',
+      to: '2',
+      label: <strong>Drop it like its hot</strong>,
+      data: 'edge with a React.Node label',
+    },
+    { from: '1', to: '2', data: 'edge sans label' },
+    { from: '2', to: 33, isBidirectional: true, data: 'A bidirection edge' },
+  ],
+};
+
+export const colored = {
+  vertices: [
+    { key: 'string key 0', data: 'red' },
+    {
+      key: 1,
+      label: 'Key is the number 1',
+      data: 'blue',
+    },
+    { key: '2', label: <h3>OMG an H3</h3>, data: 'green' },
+    { key: 33, data: 'teal' },
+  ],
+  edges: [
+    { from: 'string key 0', to: 1, label: 'The Great Edge Label', data: '#c00' },
+    {
+      from: 'string key 0',
+      to: '2',
+      label: <strong>Drop it like its hot</strong>,
+      data: '#0c0',
+    },
+    { from: '1', to: '2', data: '#00c' },
+    { from: '2', to: 33, isBidirectional: true, data: '#c0c' },
+  ],
+};
+
+export function getColorNodeLabel(vertex) {
+  let { label } = vertex;
+  label = label == null ? String(vertex.key) : label;
+  if (typeof label !== 'string' && !React.isValidElement(label)) {
+    label = String(label);
+  }
+  return <span style={{ color: vertex.data }}>{label}</span>;
+}
+
+export function setOnColorNode(vertex) {
+  const style = { border: `1px solid ${vertex.data}` };
+  return { style };
+}
+export function setOnColorEdge(edge) {
+  return { stroke: edge.data };
+}

packages/plexus/demo/src/index.css

@@ -0,0 +1,3 @@
+html {
+  font-family: Arial, Helvetica, sans-serif;
+}

packages/plexus/demo/src/index.js

@@ -0,0 +1,70 @@
+// Copyright (c) 2017 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 large from './data-large.ignore';
+import { varied, colored, getColorNodeLabel, setOnColorEdge, setOnColorNode } from './data-small';
+import { DirectedGraph, LayoutManager } from '../../src';
+
+import './index.css';
+
+const addAnAttr = () => ({ 'data-rando': Math.random() });
+
+class Demo extends React.Component {
+  state = {
+    data: colored,
+    colorData: true,
+  };
+
+  constructor(props) {
+    super(props);
+    this.layoutManager = new LayoutManager();
+  }
+
+  handleClick = () => {
+    const { colorData } = this.state;
+    this.setState({
+      colorData: !colorData,
+      data: colorData ? varied : colored,
+    });
+  };
+
+  render() {
+    const { data, colorData } = this.state;
+    return (
+      <div>
+        <h1>
+          <a href="#" onClick={this.handleClick}>
+            plexus Demo
+          </a>
+        </h1>
+        <DirectedGraph
+          layoutManager={this.layoutManager}
+          getNodeLabel={colorData ? getColorNodeLabel : null}
+          setOnEdgePath={colorData ? setOnColorEdge : null}
+          setOnNode={colorData ? setOnColorNode : null}
+          setOnEdgesContainer={addAnAttr}
+          setOnNodesContainer={addAnAttr}
+          setOnRoot={addAnAttr}
+          {...data}
+        />
+      </div>
+    );
+  }
+}
+
+render(<Demo />, document.querySelector('#demo'));

packages/plexus/nwb.config.js

@@ -0,0 +1,67 @@
+// Copyright (c) 2017 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.
+
+// make sure the worker files are run through the babel-loader before the worker-loader
+function setBabelPre(config) {
+  const babel = config.module.rules.find(rule => /babel-loader/.test(rule.loader));
+  babel.enforce = 'pre';
+  return config;
+}
+
+module.exports = function nwbConfig() {
+  return {
+    type: 'react-component',
+    npm: {
+      esModules: false,
+      cjs: true,
+      umd: {
+        global: 'JaegerPlexus',
+        externals: {
+          react: 'React',
+          'react-dom': 'ReactDom',
+        },
+      },
+    },
+    babel: {
+      config(cfg) {
+        // eslint-disable-next-line no-param-reassign
+        cfg.compact = true;
+        return cfg;
+      },
+    },
+    devServer: { hot: false },
+    webpack: {
+      extractText: {
+        filename: process.env.NODE_ENV === 'production' ? `plexus.[contenthash:8].css` : 'plexus.css',
+      },
+      extra: {
+        devtool: 'source-map',
+        module: {
+          rules: [
+            {
+              test: /\.worker\.js$/,
+              use: [
+                {
+                  loader: require.resolve('worker-loader'),
+                  options: { inline: true, fallback: false, name: '[name].[hash:8].js' },
+                },
+              ],
+            },
+          ],
+        },
+      },
+      config: setBabelPre,
+    },
+  };
+};

packages/plexus/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@jaegertracing/plexus",
+  "version": "0.0.1-dev.2",
+  "description": "Direct Graph React component",
+  "main": "umd/@jaegertracing/plexus.js",
+  "files": ["lib", "umd"],
+  "scripts": {
+    "build": "nwb build-react-component",
+    "clean": "nwb clean-module && nwb clean-demo",
+    "start": "nwb serve-react-demo",
+    "test": "echo 'NO TESTS YET'",
+    "coverage": "echo 'NO TESTS YET'",
+    "test:dev": "nwb test-react --server"
+  },
+  "dependencies": {
+    "viz.js": "^1.8.1"
+  },
+  "peerDependencies": {
+    "react": "16.x"
+  },
+  "devDependencies": {
+    "nwb": "0.21.x",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "worker-loader": "^1.1.1"
+  },
+  "author": "",
+  "homepage": "https://github.com/jaegertracing/jaeger-ui",
+  "license": "Apache-2.0",
+  "repository": "https://github.com/jaegertracing/jaeger-ui.git",
+  "keywords": ["react-component"]
+}