[WIP] - Rewrite sup-tree view

.flowconfig

@@ -1,10 +1,12 @@
 [ignore]
-<PROJECT_ROOT>/node_modules/fbjs/.*
-<PROJECT_ROOT>/node_modules/find-elm-dependencies/.*
-<PROJECT_ROOT>/node_modules/elm-webpack-loader/.*
+.*/node_modules/fbjs/.*
+.*/node_modules/find-elm-dependencies/.*
+.*/node_modules/elm-webpack-loader/.*
+.*/node_modules/styled-components/.*
 
 [include]
 
 [libs]
 
-[options]
+[options]
+suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

package.json

@@ -65,12 +65,14 @@
     "react-measure": "^1.4.5",
     "react-motion": "^0.4.7",
     "react-redux": "^5.0.2",
+    "react-reflex": "^2.0.0",
     "react-router-dom": "^4.0.0",
     "react-router-redux": "next",
+    "react-sigma": "^1.2.17",
     "react-virtualized": "^9.0.4",
     "recharts": "^0.21.2",
     "redux": "^3.6.0",
-    "vivagraphjs": "^0.8.2",
+    "styled-components": "^2.0.0",
     "vizceral-react": "4.4.0"
   },
   "scripts": {

ui/src/App.css

@@ -11,9 +11,13 @@
   margin-left: 60px;
 }
 
+button, a {
+  outline: none;
+}
 
 ::-webkit-scrollbar {
   width: 5px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {

ui/src/core/components/Loader.css

@@ -0,0 +1,59 @@
+.loader {
+  z-index: 1;
+  background-color: #282c34;
+  position: absolute;
+  left: 60px;
+  right: 0;
+  top: 0;
+  bottom: 30px;
+}
+
+.loader > div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* loader animation */
+
+.spinner {
+  margin: 0px auto 10px;
+  width: 70px;
+  text-align: center;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  background-color: #9da5b4;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

ui/src/core/components/Loader.js

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+
+import './Loader.css';
+
+type Props = {
+  text: string
+};
+
+const Loader = ({ text }: Props) => (
+  <div className="loader">
+    <div className="text-center">
+      <div className="spinner">
+        <div className="bounce1" />
+        <div className="bounce2" />
+        <div className="bounce3" />
+      </div>
+      <span>{text}</span>
+    </div>
+  </div>
+);
+
+export default Loader;

ui/src/core/components/PluginWrapper.js

@@ -0,0 +1,80 @@
+// @flow
+import React, { Component } from 'react';
+import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
+
+import 'react-reflex/styles.css';
+
+import Loader from './Loader';
+import SidePanel from './SidePanel';
+import { Container, Content } from './styled';
+
+type Props = {
+  sidePanel?: React$Element<*>,
+  className?: string,
+  loading?: boolean,
+  loaderText?: string,
+  children?: React$Element<*>
+};
+
+class PluginWrapper extends Component {
+  state: { panel: boolean };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      panel: props.sidePanel ? true : false
+    };
+  }
+
+  static defaultProps = {
+    className: '',
+    loaderText: 'Loading...',
+    loading: false
+  };
+
+  render() {
+    if (this.props.loading) {
+      return <Loader text={this.props.loaderText} />;
+    }
+
+    const content = (
+      <Content>
+        {this.props.children}
+      </Content>
+    );
+
+    // NOTE: when no side panel we don;t need Relfex
+    if (!this.state.panel) {
+      return (
+        <Container>
+          {content}
+        </Container>
+      );
+    }
+
+    return (
+      <Container className={this.props.className}>
+        <ReflexContainer orientation="vertical">
+          <ReflexElement flex={0.75}>
+            {content}
+          </ReflexElement>
+
+          <ReflexSplitter
+            style={{
+              borderColor: '#181a1f'
+            }}
+          />
+
+          <ReflexElement flex={0.25}>
+            <SidePanel>
+              {this.props.sidePanel}
+            </SidePanel>
+          </ReflexElement>
+
+        </ReflexContainer>
+      </Container>
+    );
+  }
+}
+
+export default PluginWrapper;

ui/src/core/components/SidePanel.js

@@ -0,0 +1,16 @@
+// @flow
+import React, { Component } from 'react';
+
+import { SidePanelContainer } from './styled';
+
+class SidePanel extends Component {
+  render() {
+    return (
+      <SidePanelContainer>
+        {this.props.children}
+      </SidePanelContainer>
+    );
+  }
+}
+
+export default SidePanel;

ui/src/core/components/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+export const Content = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+export const SidePanelContainer = styled.div`
+
+`;

ui/src/plugins/epl-sup-tree/actionTypes.js

@@ -1,5 +1,7 @@
 // @flow
 
 export const UPDATE_APPS_INFO = 'epl-sup-tree/UPDATE_APPS_INFO';
-
 export const UPDATE_NODE_INFO = 'epl-sup-tree/UPDATE_NODE_INFO';
+export const SELECT_APPS = 'epl-sup-tree/SELECT_APP';
+export const CLEAR_APPS = 'epl-sup-tree/CLEAR_APPS';
+export const CENTER = 'epl-sup-tree/CENTER';

ui/src/plugins/epl-sup-tree/actions.js

@@ -1,12 +1,28 @@
 // @flow
-import * as t from './actionTypes';
+import * as type from './actionTypes';
 
 export const updateAppsInfo = (data: any) => ({
-  type: t.UPDATE_APPS_INFO,
+  type: type.UPDATE_APPS_INFO,
   data
 });
 
 export const updateNodeInfo = (info: any) => ({
-  type: t.UPDATE_NODE_INFO,
+  type: type.UPDATE_NODE_INFO,
   info
 });
+
+export const selectApps = (apps: Array<string>) => ({
+  type: type.SELECT_APPS,
+  apps
+});
+
+export const clearApps = (apps: Array<string>) => ({
+  type: type.CLEAR_APPS,
+  apps
+});
+
+export const center = (x: number, y: number) => ({
+  type: type.CENTER,
+  x,
+  y
+});