From f7ea8f4e05bd9fc91554243cee9ca000111eba50 Mon Sep 17 00:00:00 2001
From: Joshua Benjamin <benjamin@syncromatics.com>
Date: Wed, 13 May 2020 22:24:33 -0700
Subject: [PATCH] (+semver: feature) Add processor watcher (#8)

Signed-off-by: Joshua Benjamin <joshuabnjmn@gmail.com>
---
 package.json                               |   2 +
 server/index.ts                            |   1 +
 server/server.ts                           |  57 ++++---
 src/App.tsx                                |  18 +++
 src/Body/ComponentView/ComponentView.tsx   |  15 +-
 src/Body/ProcessorView/OperationCard.tsx   |  69 +++++++++
 src/Body/ProcessorView/OperationsList.tsx  |  36 +++++
 src/Body/ProcessorView/ProcessorView.tsx   | 149 ++++++++++++++++++
 src/Body/ProcessorView/models.ts           |  49 ++++++
 src/Graphs/Component/Component.stories.tsx |   3 +-
 src/Graphs/Component/Component.tsx         |  27 +++-
 src/index.tsx                              |  42 ++++-
 src/schema.ts                              |  69 ++++++++-
 src/types.json                             | 172 +++++++++++++++++++++
 tsconfig.json                              |   3 +-
 webpack/webpack.app.config.js              |   3 +-
 yarn.lock                                  |  33 +++-
 17 files changed, 712 insertions(+), 36 deletions(-)
 create mode 100644 src/Body/ProcessorView/OperationCard.tsx
 create mode 100644 src/Body/ProcessorView/OperationsList.tsx
 create mode 100644 src/Body/ProcessorView/ProcessorView.tsx
 create mode 100644 src/Body/ProcessorView/models.ts
 create mode 100644 src/types.json

diff --git a/package.json b/package.json
index 4cb3a28..a41823a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 		"apollo-boost": "^0.4.7",
 		"apollo-cache-inmemory": "^1.6.5",
 		"apollo-link-http": "^1.5.17",
+		"apollo-link-ws": "^1.0.20",
 		"awesome-typescript-loader": "^5.2.1",
 		"cytoscape": "^3.14.0",
 		"cytoscape-cose-bilkent": "^4.1.0",
@@ -32,6 +33,7 @@
 		"react-scripts": "^3.4.1",
 		"source-map-loader": "^0.2.4",
 		"styled-components": "^5.0.1",
+		"subscriptions-transport-ws": "^0.9.16",
 		"ts-loader": "^7.0.2",
 		"ts-node": "^8.10.1",
 		"typescript": "^3.8.3",
diff --git a/server/index.ts b/server/index.ts
index d328bd5..6f5433c 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -10,5 +10,6 @@ if (graphQL == undefined || graphQL == '') {
 	throw 'KAFMESH_URL is not set';
 }
 
+console.log('kafmesh url: ' + graphQL);
 const server = new Server(app, graphQL);
 server.start(Number(port));
diff --git a/server/server.ts b/server/server.ts
index 4b29c4c..d3a2d5b 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -1,35 +1,48 @@
 import { Express, Request, Response } from 'express';
 import express from 'express';
 import * as path from 'path';
-import proxy from 'express-http-proxy';
+import proxy from 'http-proxy';
 import http from 'http';
 import * as terminus from '@godaddy/terminus';
 
 export class Server {
 	private app: Express;
+	private proxy: proxy;
+	private graphQLServer: string;
 
 	constructor(app: Express, graphQLServer: string) {
 		this.app = app;
+		this.graphQLServer = graphQLServer;
+
+		this.proxy = proxy.createProxy({
+			ws: true,
+			toProxy: true,
+			changeOrigin: true,
+			autoRewrite: true,
+			headers: {
+				host: graphQLServer
+			}
+		});
+
+		this.proxy.on('error', function(err, req, res) {
+			res.end('Something went wrong. And we are reporting a custom error message.');
+		});
 
 		this.app.use(express.static(path.resolve('./') + '/app'));
 
-		this.app.use(
-			'/query',
-			proxy(graphQLServer, {
-				proxyReqPathResolver: function(req) {
-					return '/query';
-				}
-			})
-		);
-
-		this.app.use(
-			'/playground',
-			proxy(graphQLServer, {
-				proxyReqPathResolver: function(req) {
-					return '/';
-				}
-			})
-		);
+		this.app.use('/query', (req, resp) => {
+			this.proxy.web(req, resp, {
+				ignorePath: true,
+				target: 'http://' + graphQLServer + '/query'
+			});
+		});
+
+		this.app.use('/playground', (req, resp) => {
+			this.proxy.web(req, resp, {
+				ignorePath: true,
+				target: 'http://' + graphQLServer + '/'
+			});
+		});
 
 		this.app.all('*', (req: Request, res: Response): void => {
 			res.sendFile(path.resolve('./') + '/app/index.html');
@@ -52,6 +65,14 @@ export class Server {
 			healthChecks: { '/healthcheck': this.onHealthCheck },
 			onSignal: this.onSignal
 		});
+
+		var app = this;
+		server.on('upgrade', function(req, socket, head) {
+			app.proxy.ws(req, socket, head, {
+				target: 'ws://' + app.graphQLServer
+			});
+		});
+
 		console.log('started server');
 		server.listen(port, () => console.log(`Server listening on port ${port}!`));
 	}
diff --git a/src/App.tsx b/src/App.tsx
index 586411c..32f933e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Header from './Header';
 import ServicesView from './Body/ServicesView/ServicesView';
 import ServiceView from './Body/ServiceView/ServiceView';
 import ComponentView from './Body/ComponentView/ComponentView';
+import ProcessorView, { Props } from './Body/ProcessorView/ProcessorView';
 import Footer from './Footer';
 
 const AppContainer = styled.div`
@@ -35,7 +36,9 @@ const App = () => (
 						<Services />
 					</Route>
 					<Route path="/services/:id" children={<Service />} />
+					<Route path="/processors/:id/:key" children={<ProcessorWithKey />} />
 					<Route path="/components/:id" children={<Component />} />
+					<Route path="/processors/:id" children={<Processor />} />
 				</Switch>
 				<Footer />
 			</AppItems>
@@ -59,4 +62,19 @@ function Component() {
 	return <ComponentView component={id} />;
 }
 
+function Processor() {
+	let { id } = useParams();
+	return <ProcessorView processor={id} />;
+}
+
+function ProcessorWithKey() {
+	const { id, key } = useParams();
+	const options: Props = {
+		processor: Number(id),
+		topicKey: String(key)
+	};
+
+	return <ProcessorView {...options} />;
+}
+
 export default App;
diff --git a/src/Body/ComponentView/ComponentView.tsx b/src/Body/ComponentView/ComponentView.tsx
index dc9af4a..95e36ee 100644
--- a/src/Body/ComponentView/ComponentView.tsx
+++ b/src/Body/ComponentView/ComponentView.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
-import * as Componentraph from '../../Graphs/Component/Component';
+import * as Graph from '../../Graphs/Component/Component';
 
 const BodyContainer = styled.div`
 	width: 100%;
@@ -16,13 +16,20 @@ export type Props = {
 // Flex # corresponds to vertical section divider location
 const Component: FunctionComponent<Props> = ({ component }) => {
 	const history = useHistory();
-	const props: Componentraph.Props = {
-		component: component
+	const props: Graph.Props = {
+		component: component,
+		onItemSelected(event: Graph.itemSelectedEvent): void {
+			switch (event.item.type) {
+				case 'processorItem':
+					history.push('/processors/' + event.item.id);
+					break;
+			}
+		}
 	};
 
 	return (
 		<BodyContainer>
-			<Componentraph.Component {...props} />
+			<Graph.Component {...props} />
 		</BodyContainer>
 	);
 };
diff --git a/src/Body/ProcessorView/OperationCard.tsx b/src/Body/ProcessorView/OperationCard.tsx
new file mode 100644
index 0000000..6e43e0d
--- /dev/null
+++ b/src/Body/ProcessorView/OperationCard.tsx
@@ -0,0 +1,69 @@
+import React, { FunctionComponent } from 'react';
+import { operation, action } from './models';
+
+type Props = {
+	operation: operation;
+};
+
+const actionRender = (action: action) => {
+	switch (action.type) {
+		case 'Join':
+			return (
+				<div>
+					{action.type} {action.topic}: {action.value}
+				</div>
+			);
+		case 'Lookup':
+			return (
+				<div>
+					{action.type} {action.topic}({action.key}): {action.value}
+				</div>
+			);
+		case 'SetState':
+			return (
+				<div>
+					{action.type} {action.topic}: {action.value}
+				</div>
+			);
+		case 'GetState':
+			return (
+				<div>
+					{action.type} {action.topic}: {action.value}
+				</div>
+			);
+		case 'Output':
+			return (
+				<div>
+					{action.type} {action.topic}({action.key}): {action.value}
+				</div>
+			);
+	}
+};
+
+export const Component: FunctionComponent<Props> = ({ operation }) => {
+	return (
+		<div style={operationStyle}>
+			input: "{operation.input.topic}": {operation.input.value}
+			<ol>
+				{operation.actions.map((action, index) => {
+					return (
+						<li key={index} style={{ margin: '4px' }}>
+							{actionRender(action)}
+						</li>
+					);
+				})}
+			</ol>
+		</div>
+	);
+};
+
+export default Component;
+
+const operationStyle: React.CSSProperties = {
+	borderWidth: '2px',
+	borderStyle: 'solid',
+	borderColor: 'black',
+	padding: '10px',
+	margin: '5px',
+	backgroundColor: 'white'
+};
diff --git a/src/Body/ProcessorView/OperationsList.tsx b/src/Body/ProcessorView/OperationsList.tsx
new file mode 100644
index 0000000..39e2223
--- /dev/null
+++ b/src/Body/ProcessorView/OperationsList.tsx
@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from 'react';
+import OperationCard from './OperationCard';
+import { ApolloError } from 'apollo-client';
+import { operation } from './models';
+
+export type Props = {
+	loading: boolean;
+	error?: ApolloError;
+	operations: Array<operation>;
+};
+
+export const Component: FunctionComponent<Props> = ({ loading, operations, error }) => {
+	if (loading) {
+		return <div style={{ width: '100%', height: '100%' }}>Loading</div>;
+	}
+	if (error) {
+		return (
+			<div style={{ width: '100%', height: '100%' }}>
+				{error.name} : {error.message}
+			</div>
+		);
+	}
+	return (
+		<ol>
+			{operations.map((op, index) => {
+				return (
+					<li key={index}>
+						<OperationCard operation={op} />
+					</li>
+				);
+			})}
+		</ol>
+	);
+};
+
+export default Component;
diff --git a/src/Body/ProcessorView/ProcessorView.tsx b/src/Body/ProcessorView/ProcessorView.tsx
new file mode 100644
index 0000000..50ef8a3
--- /dev/null
+++ b/src/Body/ProcessorView/ProcessorView.tsx
@@ -0,0 +1,149 @@
+import React, { FunctionComponent, useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
+import gql from 'graphql-tag';
+import { useSubscription } from '@apollo/react-hooks';
+import OperationsList from './OperationsList';
+import { operation } from './models';
+
+const WatchProcessor = gql`
+	subscription watchProcessor($options: WatchProcessorInput!) {
+		watchProcessor(options: $options) {
+			input {
+				topic
+				message
+				value
+			}
+			actions {
+				type: __typename
+				... on Join {
+					topic
+					message
+					value
+				}
+				... on Lookup {
+					topic
+					message
+					key
+					value
+				}
+				... on GetState {
+					topic
+					message
+					value
+				}
+				... on SetState {
+					topic
+					message
+					value
+				}
+				... on Output {
+					topic
+					message
+					key
+					value
+				}
+			}
+		}
+	}
+`;
+
+const BodyContainer = styled.div`
+	width: 100%;
+	height: 100%;
+	display: flex;
+`;
+
+const Button = styled.button`
+	background-color: white;
+	margin-bottom: 10px;
+	margin-left: 7px;
+	font-size: 17px;
+	font-family: arial;
+	padding: 4px;
+	border-radius: 4px;
+	box-shadow: 0.1px 0.1px 0.1px 0.1px rgba(0, 0, 0, 0.25);
+`;
+
+type watchProcessorOptions = {
+	processorId: number;
+	key: string;
+};
+
+type watchProcessorVariables = {
+	options: watchProcessorOptions;
+};
+
+type watchProcessorResponse = {
+	watchProcessor: operation;
+};
+
+export type Props = {
+	processor: number;
+	topicKey?: string;
+};
+
+// Flex # corresponds to vertical section divider location
+export const Component: FunctionComponent<Props> = ({ processor, topicKey }) => {
+	const history = useHistory();
+	const inputRef = useRef<HTMLInputElement>();
+
+	useEffect(
+		() => {
+			if (inputRef == null) return;
+			if (topicKey == null) return;
+			inputRef.current.value = topicKey;
+		},
+		[ topicKey, inputRef ]
+	);
+
+	const KeyInput = () => (
+		<div style={{ flex: 1, flexDirection: 'row' }}>
+			<label>
+				Key:
+				<input ref={inputRef} type="text" />{' '}
+			</label>
+			<Button
+				onClick={() => {
+					history.push('/processors/' + processor + '/' + inputRef.current.value);
+				}}
+			>
+				Watch
+			</Button>
+		</div>
+	);
+
+	if (topicKey == null) {
+		return (
+			<BodyContainer>
+				<KeyInput />
+			</BodyContainer>
+		);
+	}
+
+	const [ getOperations, setOperations ] = useState<Array<operation>>([]);
+	const { loading, error } = useSubscription<watchProcessorResponse, watchProcessorVariables>(WatchProcessor, {
+		variables: {
+			options: {
+				processorId: processor,
+				key: topicKey
+			}
+		},
+		shouldResubscribe: true,
+		onSubscriptionData: (event) => {
+			if (event.subscriptionData.data == null) return;
+
+			setOperations(getOperations.concat(event.subscriptionData.data.watchProcessor));
+		}
+	});
+	return (
+		<BodyContainer>
+			<KeyInput />
+			<div style={{ flex: 2 }}>
+				<OperationsList loading={loading} operations={getOperations} error={error} />
+			</div>
+		</BodyContainer>
+	);
+};
+
+export default Component;
diff --git a/src/Body/ProcessorView/models.ts b/src/Body/ProcessorView/models.ts
new file mode 100644
index 0000000..1275729
--- /dev/null
+++ b/src/Body/ProcessorView/models.ts
@@ -0,0 +1,49 @@
+export interface operation {
+	input: input;
+	actions: Array<action>;
+}
+
+interface input {
+	topic: string;
+	message: string;
+	value: string;
+}
+
+export type action = join | lookup | getState | setState | output;
+
+interface join {
+	type: 'Join';
+	topic: string;
+	message: string;
+	value: string;
+}
+
+interface lookup {
+	type: 'Lookup';
+	topic: string;
+	message: string;
+	key: string;
+	value: string;
+}
+
+interface getState {
+	type: 'GetState';
+	topic: string;
+	message: string;
+	value: string;
+}
+
+interface setState {
+	type: 'SetState';
+	topic: string;
+	message: string;
+	value: string;
+}
+
+interface output {
+	type: 'Output';
+	topic: string;
+	message: string;
+	key: string;
+	value: string;
+}
diff --git a/src/Graphs/Component/Component.stories.tsx b/src/Graphs/Component/Component.stories.tsx
index 4ff5769..b97bcea 100644
--- a/src/Graphs/Component/Component.stories.tsx
+++ b/src/Graphs/Component/Component.stories.tsx
@@ -107,7 +107,8 @@ storiesOf('Graphs', module)
 	)
 	.add('Component Graph', () => {
 		let testServices: Service.Props = {
-			component: 12
+			component: 12,
+			onItemSelected: (item) => {}
 		};
 
 		return <Service.Component {...testServices} />;
diff --git a/src/Graphs/Component/Component.tsx b/src/Graphs/Component/Component.tsx
index 331c5c1..62ceb9a 100644
--- a/src/Graphs/Component/Component.tsx
+++ b/src/Graphs/Component/Component.tsx
@@ -96,11 +96,21 @@ interface variables {
 
 const layout: Graph.coseBilkentLayout = { name: 'cose-bilkent', animate: false };
 
+export type itemSelectedEvent = {
+	item: processorItem;
+};
+
+type processorItem = {
+	type: 'processorItem';
+	id: number;
+};
+
 export type Props = {
 	component: number;
+	onItemSelected(event: itemSelectedEvent): void;
 };
 
-export const Component: FunctionComponent<Props> = ({ component }) => {
+export const Component: FunctionComponent<Props> = ({ component, onItemSelected }) => {
 	const { loading, data, error } = useQuery<data, variables>(query, {
 		variables: {
 			id: component
@@ -121,7 +131,20 @@ export const Component: FunctionComponent<Props> = ({ component }) => {
 		return <div style={{ width: '100%', height: '100%' }}>Component {component} not found.</div>;
 	}
 
-	const handleSelect = (item: Graph.itemSelectEvent) => {};
+	const handleSelect = (event: Graph.itemSelectEvent) => {
+		switch (event.item.type) {
+			case 'node':
+				if (event.item.id.includes('processor_')) {
+					onItemSelected({
+						item: {
+							type: 'processorItem',
+							id: Number(event.item.id.replace('processor_', ''))
+						}
+					});
+					return;
+				}
+		}
+	};
 
 	const elements = mapToGraphElements(data.componentById);
 
diff --git a/src/index.tsx b/src/index.tsx
index cf68bd7..236d977 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,49 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ApolloClient from 'apollo-boost';
 import { ApolloProvider } from '@apollo/react-hooks';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import App from './App';
+import ApolloClient from 'apollo-client';
+// Setup the network "links"
+import { WebSocketLink } from 'apollo-link-ws';
+import { HttpLink } from 'apollo-link-http';
+import { split } from 'apollo-link';
+import { getMainDefinition } from 'apollo-utilities';
+import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
+import types from './types.json';
 
+const fragmentMatcher = new IntrospectionFragmentMatcher({
+	introspectionQueryResultData: types
+});
+
+const httpLink = new HttpLink({
+	uri: '/query/'
+});
+
+// Create a WebSocket link:
+const wsLink = new WebSocketLink({
+	uri: 'ws://' + window.location.host + '/query', // use wss for a secure endpoint
+	options: {
+		reconnect: true
+	}
+});
+
+// using the ability to split links, you can send data to each link
+// depending on what kind of operation is being sent
+const link = split(
+	// split based on operation type
+	({ query }) => {
+		const definition = getMainDefinition(query);
+		return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
+	},
+	wsLink,
+	httpLink
+);
+
+// Instantiate client
 const client = new ApolloClient({
-	uri: '/query/',
-	cache: new InMemoryCache()
+	link,
+	cache: new InMemoryCache({ fragmentMatcher })
 });
 
 ReactDOM.render(
diff --git a/src/schema.ts b/src/schema.ts
index d378f2a..0c9af01 100644
--- a/src/schema.ts
+++ b/src/schema.ts
@@ -140,13 +140,74 @@ type ViewSource {
 type Query {
 	services: [Service!]!
 	pods: [Pod!]!
-    topics: [Topic!]!
+  topics: [Topic!]!
 
-    serviceById(id: ID!): Service
-    componentById(id: ID!): Component
+  serviceById(id: ID!): Service
+  componentById(id: ID!): Component
+}
+
+type Operation {
+	input: Input!
+	startTime: Int!
+	endTime: Int!
+	actions: [Action!]!
+}
+
+type Input {
+	topic: String!
+	message: String!
+	value: String!
+}
+
+interface Action {
+	topic: String!
+	message: String!
+	value: String!
+}
+
+type Join implements Action {
+	topic: String!
+	message: String!
+	value: String!
+}
+
+type Lookup implements Action {
+	topic: String!
+	message: String!
+	value: String!
+	key: String!
+}
+
+type GetState implements Action {
+	topic: String!
+	message: String!
+	value: String!
+}
+
+type SetState implements Action {
+	topic: String!
+	message: String!
+	value: String!
+}
+
+type Output implements Action {
+	topic: String!
+	message: String!
+	value: String!
+	key: String!
+}
+
+input WatchProcessorInput {
+	processorId: ID!
+	key: String!
+}
+
+type Subscription {
+	watchProcessor(options: WatchProcessorInput): Operation!
 }
 
 schema {
-	query: Query
+  query: Query
+  subscription: Subscription
 }
 `;
diff --git a/src/types.json b/src/types.json
new file mode 100644
index 0000000..4628dee
--- /dev/null
+++ b/src/types.json
@@ -0,0 +1,172 @@
+{
+	"__schema": {
+		"types": [
+			{
+				"kind": "OBJECT",
+				"name": "ProcessorOutput",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "SetState",
+				"possibleTypes": []
+			},
+			{
+				"kind": "SCALAR",
+				"name": "Boolean",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "ViewSink",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Operation",
+				"possibleTypes": []
+			},
+			{
+				"kind": "SCALAR",
+				"name": "String",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Source",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "ProcessorJoin",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "View",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Input",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "GetState",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Service",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Pod",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Subscription",
+				"possibleTypes": []
+			},
+			{
+				"kind": "SCALAR",
+				"name": "Int",
+				"possibleTypes": []
+			},
+			{
+				"kind": "SCALAR",
+				"name": "Float",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Lookup",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Component",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "ProcessorInput",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Topic",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "ViewSource",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Output",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Query",
+				"possibleTypes": []
+			},
+			{
+				"kind": "INPUT_OBJECT",
+				"name": "WatchProcessorInput",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "ProcessorLookup",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Sink",
+				"possibleTypes": []
+			},
+			{
+				"kind": "SCALAR",
+				"name": "ID",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Join",
+				"possibleTypes": []
+			},
+			{
+				"kind": "OBJECT",
+				"name": "Processor",
+				"possibleTypes": []
+			},
+			{
+				"kind": "INTERFACE",
+				"name": "Action",
+				"possibleTypes": [
+					{
+						"name": "Join"
+					},
+					{
+						"name": "Lookup"
+					},
+					{
+						"name": "GetState"
+					},
+					{
+						"name": "SetState"
+					},
+					{
+						"name": "Output"
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/tsconfig.json b/tsconfig.json
index 059bc76..86439b5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,8 @@
 		"jsx": "react",
 		"esModuleInterop": true,
 		"emitDecoratorMetadata": true,
-		"experimentalDecorators": true
+		"experimentalDecorators": true,
+		"resolveJsonModule": true
 	},
 	"include": [ "./src/**/*" ],
 	"typeRoots": [ "./node_modules/@types/" ]
diff --git a/webpack/webpack.app.config.js b/webpack/webpack.app.config.js
index 5182c43..e844396 100644
--- a/webpack/webpack.app.config.js
+++ b/webpack/webpack.app.config.js
@@ -65,7 +65,8 @@ module.exports = {
     historyApiFallback: true,
     proxy: {
       '/query': {
-        target: 'http://127.0.0.1:5000'
+        target: 'http://127.0.0.1:5000',
+        ws: true
       }
     }
   },
diff --git a/yarn.lock b/yarn.lock
index 673615e..fba3cfe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3276,6 +3276,14 @@ apollo-link-http@^1.5.17:
     apollo-link-http-common "^0.2.16"
     tslib "^1.9.3"
 
+apollo-link-ws@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.20.tgz#dfad44121f8445c6d7b7f8101a1b24813ba008ed"
+  integrity sha512-mjSFPlQxmoLArpHBeUb2Xj+2HDYeTaJqFGOqQ+I8NVJxgL9lJe84PDWcPah/yMLv3rB7QgBDSuZ0xoRFBPlySw==
+  dependencies:
+    apollo-link "^1.2.14"
+    tslib "^1.9.3"
+
 apollo-link@^1.0.0, apollo-link@^1.0.6, apollo-link@^1.2.13:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.13.tgz#dff00fbf19dfcd90fddbc14b6a3f9a771acac6c4"
@@ -4615,6 +4623,11 @@ babylon@^6.18.0:
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
   integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
+backo2@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+  integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -7102,6 +7115,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+eventemitter3@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 eventemitter3@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
@@ -9313,7 +9331,7 @@ istanbul-reports@^2.2.6:
   dependencies:
     html-escaper "^2.0.0"
 
-iterall@^1.3.0:
+iterall@^1.2.1, iterall@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
   integrity sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==
@@ -15168,6 +15186,17 @@ stylelint@^13.0.0:
     v8-compile-cache "^2.1.0"
     write-file-atomic "^3.0.1"
 
+subscriptions-transport-ws@^0.9.16:
+  version "0.9.16"
+  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.16.tgz#90a422f0771d9c32069294c08608af2d47f596ec"
+  integrity sha512-pQdoU7nC+EpStXnCfh/+ho0zE0Z+ma+i7xvj7bkXKb1dvYHSZxgRPaU6spRP+Bjzow67c/rRDoix5RT0uU9omw==
+  dependencies:
+    backo2 "^1.0.2"
+    eventemitter3 "^3.1.0"
+    iterall "^1.2.1"
+    symbol-observable "^1.0.4"
+    ws "^5.2.0"
+
 sugarss@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
@@ -15230,7 +15259,7 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@^1.0.2:
+symbol-observable@^1.0.2, symbol-observable@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==