Directed graph React component

.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

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",
@@ -37,7 +38,6 @@
     "d3-scale": "^1.0.6",
     "dagre": "^0.7.4",
     "deep-freeze": "^0.0.1",
-    "flow-bin": "^0.64.0",
     "fuzzy": "^0.1.3",
     "global": "^4.3.2",
     "history": "^4.6.3",
@@ -51,9 +51,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,13 @@
+# plexus
+
+plexus is a React component for rendering directed graphs.
+
+## Why?
+
+To support directed graphs in Jaeger-UI, we surveyed the JavaScript libraries and utilities available for rendering directed graphs. The landscape is impressive, but we concluded the venerable [GraphViz](https://graphviz.gitlab.io/) ([alt](https://www.graphviz.org/)) is the right tool for us.
+
+GraphViz is awesome, but the output formats don't fit our needs. We've elected to use GraphViz to generate the layouts (node positioning, edge routing) and React for rendering.
+
+## viz.js
+
+The excellent [viz.js](https://github.com/mdaines/viz.js) is used, in a WebWorker, to generate GraphViz as plain-text output which is then parsed and provided to a React component which does the rendering.

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

@@ -0,0 +1,98 @@
+const paths = `
+packages
+packages/jaeger-ui
+packages/jaeger-ui/build
+packages/jaeger-ui/build/static
+packages/jaeger-ui/build/static/css
+packages/jaeger-ui/build/static/js
+packages/jaeger-ui/build/static/media
+packages/jaeger-ui/node_modules
+packages/jaeger-ui/node_modules/.bin
+packages/jaeger-ui/node_modules/bluebird
+packages/jaeger-ui/node_modules/bluebird/js
+packages/jaeger-ui/node_modules/bluebird/js/browser
+packages/jaeger-ui/node_modules/bluebird/js/release
+packages/jaeger-ui/node_modules/moment
+packages/jaeger-ui/node_modules/moment/locale
+packages/jaeger-ui/node_modules/moment/min
+packages/jaeger-ui/node_modules/moment/src
+packages/jaeger-ui/node_modules/moment/src/lib
+packages/jaeger-ui/node_modules/moment/src/lib/create
+packages/jaeger-ui/node_modules/moment/src/lib/duration
+packages/jaeger-ui/node_modules/moment/src/lib/format
+packages/jaeger-ui/node_modules/moment/src/lib/locale
+packages/jaeger-ui/node_modules/moment/src/lib/moment
+packages/jaeger-ui/node_modules/moment/src/lib/parse
+packages/jaeger-ui/node_modules/moment/src/lib/units
+packages/jaeger-ui/node_modules/moment/src/lib/utils
+packages/jaeger-ui/node_modules/moment/src/locale
+packages/jaeger-ui/public
+packages/jaeger-ui/src
+packages/jaeger-ui/src/actions
+packages/jaeger-ui/src/api
+packages/jaeger-ui/src/components
+packages/jaeger-ui/src/components/App
+packages/jaeger-ui/src/components/DependencyGraph
+packages/jaeger-ui/src/components/SearchTracePage
+packages/jaeger-ui/src/components/SearchTracePage/SearchResults
+packages/jaeger-ui/src/components/TracePage
+packages/jaeger-ui/src/components/TracePage/ArchiveNotifier
+packages/jaeger-ui/src/components/TracePage/SpanGraph
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow
+packages/jaeger-ui/src/components/common
+packages/jaeger-ui/src/constants
+packages/jaeger-ui/src/demo
+packages/jaeger-ui/src/img
+packages/jaeger-ui/src/middlewares
+packages/jaeger-ui/src/model
+packages/jaeger-ui/src/propTypes
+packages/jaeger-ui/src/reducers
+packages/jaeger-ui/src/selectors
+packages/jaeger-ui/src/types
+packages/jaeger-ui/src/utils
+packages/jaeger-ui/src/utils/DraggableManager
+packages/jaeger-ui/src/utils/DraggableManager/demo
+packages/jaeger-ui/src/utils/config
+packages/jaeger-ui/src/utils/test
+packages/jaeger-ui/src/utils/tracking
+packages/plexus
+packages/plexus/demo
+packages/plexus/demo/dist
+packages/plexus/demo/src
+packages/plexus/lib
+packages/plexus/lib/DirectedGraph
+packages/plexus/lib/DirectedGraph/builtins
+packages/plexus/lib/LayoutManager
+packages/plexus/lib/LayoutManager/dot
+packages/plexus/lib/types
+packages/plexus/node_modules
+packages/plexus/node_modules/.bin
+packages/plexus/node_modules/.cache
+packages/plexus/node_modules/.cache/babel-loader
+packages/plexus/src
+packages/plexus/src/DirectedGraph
+packages/plexus/src/DirectedGraph/builtins
+packages/plexus/src/LayoutManager
+packages/plexus/src/LayoutManager/dot
+packages/plexus/src/types
+packages/plexus/umd
+packages/plexus/umd/@jaegertracing
+`;
+
+export const vertices = [];
+export const edges = [];
+
+paths
+  .trim()
+  .split('\n')
+  .forEach(line => {
+    const folders = line.split('/');
+    vertices.push({ key: line, label: folders.slice(-1)[0] });
+    if (folders.length > 1) {
+      edges.push({ from: folders.slice(0, -1).join('/'), to: line });
+    }
+  });