diff --git a/modules/deck.gl/src/layers/edges.ts b/modules/deck.gl/src/layers/edges.ts
index f4dd05abf..f01c07640 100644
--- a/modules/deck.gl/src/layers/edges.ts
+++ b/modules/deck.gl/src/layers/edges.ts
@@ -138,7 +138,7 @@ export class EdgeLayer extends (Layer as typeof DeckLayer) {
       this.internalState.selectedSourceNodeId = this.internalState.highlightedSourceNodeId;
       this.internalState.selectedTargetNodeId = this.internalState.highlightedTargetNodeId;
     }
-
+    info.object = info.index;  // deck.gl uses info.object to check if item has already been added
     return info;
   }
   _getModel({gl, shaderCache}: DeckContext) {
diff --git a/modules/deck.gl/src/layers/nodes.ts b/modules/deck.gl/src/layers/nodes.ts
index ecaec95cd..87194b0a1 100644
--- a/modules/deck.gl/src/layers/nodes.ts
+++ b/modules/deck.gl/src/layers/nodes.ts
@@ -133,6 +133,7 @@ export class NodeLayer extends (Layer as typeof DeckLayer) {
       this.internalState.selectedNodeId    = this.internalState.highlightedNodeId;
       this.internalState.selectedNodeIndex = this.internalState.highlightedNodeIndex;
     }
+    info.object = info.index;  // deck.gl uses info.object to check if item has already been added
     return info;
   }
   _getModel({gl, shaderCache}: DeckContext) {
diff --git a/modules/demo/ssr/graph/plugins/graph/index.js b/modules/demo/ssr/graph/plugins/graph/index.js
index f0803db19..f8c036648 100644
--- a/modules/demo/ssr/graph/plugins/graph/index.js
+++ b/modules/demo/ssr/graph/plugins/graph/index.js
@@ -16,6 +16,7 @@ const wrtc            = require('wrtc');
 const {MemoryView}    = require('@nvidia/cuda');
 const {Float32Buffer} = require('@nvidia/cuda');
 const {GraphCOO}      = require('@rapidsai/cugraph');
+const {Series, Int32} = require('@rapidsai/cudf');
 
 const {loadNodes, loadEdges} = require('./loader');
 const {RenderCluster}        = require('../../render/cluster');
@@ -54,12 +55,32 @@ function graphSSRClients(fastify) {
 
     clients[stream.id] = {
       video: source,
-      state: {},
+      state: {
+        pickingMode: 'click',  // 'click', 'boxSelect'
+        selectedInfo: {},
+        boxSelectCoordinates: {rectdata: [{polygon: [[]], show: false}], startPos: null},
+        clearSelections: false
+      },
       event: {},
       props: {width, height, layout},
       graph: await loadGraph(graphId),
       frame: shmCreate(width * height * 3 / 2),
+      peer: peer,
     };
+    if (clients[stream.id].graph.dataframes[0]) {
+      const res = getPaginatedRows(clients[stream.id].graph.dataframes[0]);
+      peer.send(JSON.stringify({
+        type: 'data',
+        data: {nodes: {data: res, length: clients[stream.id].graph.dataframes[0].numRows}}
+      }));
+    }
+    if (clients[stream.id].graph.dataframes[1]) {
+      const res = getPaginatedRows(clients[stream.id].graph.dataframes[1]);
+      peer.send(JSON.stringify({
+        type: 'data',
+        data: {edges: {data: res, length: clients[stream.id].graph.dataframes[1].numRows}}
+      }));
+    }
 
     stream.addTrack(source.createTrack());
     peer.streams.push(stream);
@@ -79,6 +100,18 @@ function graphSSRClients(fastify) {
           clients[stream.id].event[data.type] = data;
           break;
         }
+        case 'pickingMode': {
+          clients[stream.id].state.pickingMode = data;
+          break;
+        }
+        case 'clearSelections': {
+          clients[stream.id].state.clearSelections = JSON.parse(data);
+          break;
+        }
+        case 'layout': {
+          clients[stream.id].props.layout = JSON.parse(data);
+          break;
+        }
       }
     }
   }
@@ -95,22 +128,24 @@ function graphSSRClients(fastify) {
   }
 
   async function loadGraph(id) {
+    let dataframes = [];
+
     if (!(id in graphs)) {
       const asDeviceMemory = (buf) => new (buf[Symbol.species])(buf);
-      const [nodes, edges]         = await Promise.all([loadNodes(id), loadEdges(id)]);
-      const src                    = edges.get('src');
-      const dst                    = edges.get('dst');
+      dataframes                   = await Promise.all([loadNodes(id), loadEdges(id)]);
+      const src                    = dataframes[1].get('src');
+      const dst                    = dataframes[1].get('dst');
       graphs[id]                   = {
         refCount: 0,
         nodes: {
-          nodeRadius: asDeviceMemory(nodes.get('size').data),
-          nodeFillColors: asDeviceMemory(nodes.get('color').data),
-          nodeElementIndices: asDeviceMemory(nodes.get('id').data),
+          nodeRadius: asDeviceMemory(dataframes[0].get('size').data),
+          nodeFillColors: asDeviceMemory(dataframes[0].get('color').data),
+          nodeElementIndices: asDeviceMemory(dataframes[0].get('id').data),
         },
         edges: {
-          edgeList: asDeviceMemory(edges.get('edge').data),
-          edgeColors: asDeviceMemory(edges.get('color').data),
-          edgeBundles: asDeviceMemory(edges.get('bundle').data),
+          edgeList: asDeviceMemory(dataframes[1].get('edge').data),
+          edgeColors: asDeviceMemory(dataframes[1].get('color').data),
+          edgeBundles: asDeviceMemory(dataframes[1].get('bundle').data),
         },
         graph: new GraphCOO(src._col, dst._col, {directedEdges: true}),
       };
@@ -124,7 +159,7 @@ function graphSSRClients(fastify) {
       ));
 
     return {
-      gravity: 1.0,
+      gravity: 0.0,
       linLogMode: false,
       scalingRatio: 5.0,
       barnesHutTheta: 0.0,
@@ -132,16 +167,17 @@ function graphSSRClients(fastify) {
       strongGravityMode: false,
       outboundAttraction: false,
       graph: graphs[id].graph,
-      edges: {
-        ...graphs[id].edges,
-        length: graphs[id].graph.numEdges(),
-      },
       nodes: {
         ...graphs[id].nodes,
         length: graphs[id].graph.numNodes(),
         nodeXPositions: pos.subarray(0, pos.length / 2),
         nodeYPositions: pos.subarray(pos.length / 2),
       },
+      edges: {
+        ...graphs[id].edges,
+        length: graphs[id].graph.numEdges(),
+      },
+      dataframes: dataframes
     };
   }
 }
@@ -152,8 +188,17 @@ function layoutAndRenderGraphs(clients) {
   return () => {
     for (const id in clients) {
       const client = clients[id];
+      const sendToClient =
+        ([nodes, edges]) => {
+          client.peer.send(JSON.stringify(
+            {type: 'data', data: {nodes: {data: getPaginatedRows(nodes), length: nodes.numRows}}}));
+          client.peer.send(JSON.stringify(
+            {type: 'data', data: {edges: {data: getPaginatedRows(edges), length: edges.numRows}}}));
+        }
 
-      if (client.isRendering) { continue; }
+      if (client.isRendering) {
+        continue;
+      }
 
       const state = {...client.state};
       const props = {...client.props};
@@ -170,55 +215,89 @@ function layoutAndRenderGraphs(clients) {
           'mouseup',
           'mouseleave',
           'wheel',
-          'beforeunload'
+          'beforeunload',
+          'shiftKey',
+          'dragStart',
+          'dragOver'
         ].map((x) => client.event[x])
           .filter(Boolean);
 
       if (event.length === 0 && !props.layout) { continue; }
       if (event.length !== 0) { client.event = Object.create(null); }
-      if (props.layout) { client.graph = forceAtlas2(client.graph); }
+      if (props.layout == true) { client.graph = forceAtlas2(client.graph); }
 
       const {
         width  = client.props.width ?? 800,
         height = client.props.height ?? 600,
       } = client.state;
 
+      state.window = {width: width, height: height, ...client.state.window};
+
       if (client.frame?.byteLength !== (width * height * 3 / 2)) {
         shmDetach(client.frame.key, true);
         client.frame = shmCreate(width * height * 3 / 2);
       }
-
       client.isRendering = true;
 
-      renderer.render(id,
-                      {
-                        state,
-                        props,
-                        event,
-                        frame: client.frame.key,
-                        graph: {
-                          ...client.graph,
-                          graph: undefined,
-                          edges: getIpcHandles(client.graph.edges),
-                          nodes: getIpcHandles(client.graph.nodes),
-                        },
-                      },
-                      (error, result) => {
-                        client.isRendering = false;
-                        if (id in clients) {
-                          if (error) { throw error; }
-                          result?.state && Object.assign(client.state, result.state);
-                          // console.log(state?.deck?.props?.initialViewState);
-                          // if (state?.deck?.props) {
-                          //   client.props.initialViewState = state.deck.props.initialViewState;
-                          // }
-                          client.video.onFrame({...result.frame, data: client.frame.buffer});
-                        }
-                      });
+      renderer.render(
+        id,
+        {
+          state,
+          props,
+          event,
+          frame: client.frame.key,
+          graph: {
+            ...client.graph,
+            graph: undefined,
+            edges: getIpcHandles(client.graph.edges),
+            nodes: getIpcHandles(client.graph.nodes),
+          },
+        },
+        (error, result) => {
+          client.isRendering = false;
+          if (id in clients) {
+            if (error) { throw error; }
+            if (client.state.clearSelections == true) {
+              // clear selection is called once
+              result.state.clearSelections = false;
+
+              // reset selected state
+              result.state.selectedInfo.selectedNodes       = [];
+              result.state.selectedInfo.selectedEdges       = [];
+              result.state.selectedInfo.selectedCoordinates = {};
+              result.state.boxSelectCoordinates.rectdata    = [{polygon: [[]], show: false}];
+
+              // send to client
+              if (client.graph.dataframes) { sendToClient(client.graph.dataframes); }
+            } else if (JSON.stringify(client.state.selectedInfo.selectedCoordinates) !==
+                       JSON.stringify(result.state.selectedInfo.selectedCoordinates)) {
+              // selections updated
+              const nodes =
+                Series.new({type: new Int32, data: result.state.selectedInfo.selectedNodes});
+              const edges =
+                Series.new({type: new Int32, data: result.state.selectedInfo.selectedEdges});
+              if (client.graph.dataframes) {
+                sendToClient([
+                  client.graph.dataframes[0].gather(nodes),
+                  client.graph.dataframes[1].gather(edges)
+                ]);
+              }
+            }
+            // copy result state to client's current state
+            result?.state && Object.assign(client.state, result.state);
+
+            client.video.onFrame({...result.frame, data: client.frame.buffer});
+          }
+        });
     }
   }
 }
 
+function getPaginatedRows(df, page = 1, rowsPerPage = 400) {
+  if (!df) { return {}; }
+  return df.head(page * rowsPerPage).tail(rowsPerPage).toArrow().toArray();
+}
+
 function forceAtlas2({graph, nodes, edges, ...params}) {
   graph.forceAtlas2({...params, positions: nodes.nodeXPositions.buffer});
   return {
diff --git a/modules/demo/ssr/graph/plugins/graph/loader.js b/modules/demo/ssr/graph/plugins/graph/loader.js
index da6938a9b..023e0209d 100644
--- a/modules/demo/ssr/graph/plugins/graph/loader.js
+++ b/modules/demo/ssr/graph/plugins/graph/loader.js
@@ -58,13 +58,7 @@ function getDefaultNodes() {
       'ustr::c',
       'ustr::d'
     ])),
-    id: Series.new({
-      type: new Uint32,
-      data: [
-        0,  1,  2,  3,  4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
-        20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39
-      ]
-    }),
+    id: Series.sequence({type: new Uint32, init: 0, step: 1, size: 40}),
     color: Series.new({
       type: new Uint32,
       data: [
diff --git a/modules/demo/ssr/graph/public/video.html b/modules/demo/ssr/graph/public/video.html
index b4021232b..8b4b9df90 100644
--- a/modules/demo/ssr/graph/public/video.html
+++ b/modules/demo/ssr/graph/public/video.html
@@ -9,11 +9,21 @@
 </head>
 
 <body style="background:#2e2e2e; margin:0;">
+
     <video autoplay muted width="800" height="600"></video>
+    <div>
+        <input type="checkbox" id="box-select" onchange="updatePan()">
+        <label for="box-select">box-select</label>
+    </div>
+
+    <div>
+        <button onclick="updateClearSelections()">clear selections</button>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/simple-peer@9.11.0/simplepeer.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
     <script>
-        const sock = io({ transports: ['websocket'], reconnection: false });
+        const sock = io({ transports: ['websocket'], reconnection: true });
         const video = document.querySelector('video');
         const peer = new SimplePeer({
             trickle: true,
@@ -31,6 +41,11 @@
         // Negotiate handshake
         sock.on('signal', (data) => peer.signal(data));
         peer.on('signal', (data) => sock.emit('signal', data));
+        peer.on('data', (data) => {
+            var decoded = new TextDecoder().decode(data);
+            var decodedjson = JSON.parse(decoded);
+            console.log("got data from peer: ", decodedjson.data);
+        });
 
         // Server video stream
         peer.on('stream', (stream) => {
@@ -64,6 +79,14 @@
             });
         }
 
+        function updatePan(){
+            let value = document.getElementById("box-select").checked;
+            peer.send(JSON.stringify({type: 'pickingMode', data: value? "boxSelect" : "click"}));
+        }
+        function updateClearSelections(){
+            peer.send(JSON.stringify({ type: 'clearSelections', data: true}));
+        }
+
         function serializeEvent(original) {
             return Object
                 .getOwnPropertyNames(Object.getPrototypeOf(original))
diff --git a/modules/demo/ssr/graph/render/render.js b/modules/demo/ssr/graph/render/render.js
index e75a12dc9..f4e81204e 100644
--- a/modules/demo/ssr/graph/render/render.js
+++ b/modules/demo/ssr/graph/render/render.js
@@ -20,7 +20,8 @@ class Renderer {
   constructor() {
     const onAnimationFrameRequested = immediateAnimationFrame(this);
     const jsdom                     = new RapidsJSDOM({module, onAnimationFrameRequested});
-    const {deck, render}            = jsdom.window.evalFn(makeDeck);
+
+    const {deck, render} = jsdom.window.evalFn(makeDeck);
 
     this.deck    = deck;
     this.jsdom   = jsdom;
@@ -31,17 +32,24 @@ class Renderer {
 
     graph = openGraphIpcHandles(graph);
     props && this.deck.setProps(props);
+
     state?.deck && this.deck.restore(state.deck);
     state?.graph && Object.assign(graph, state.graph);
     state?.window && Object.assign(window, state.window);
 
+    state?.selectedInfo && Object.assign(this.deck.selectedInfo, state.selectedInfo);
+    state?.boxSelectCoordinates &&
+      Object.assign(this.deck.boxSelectCoordinates, state.boxSelectCoordinates);
+
     (events || []).forEach((event) => window.dispatchEvent(event));
 
-    await this._render(graph);
+    await this._render(graph,
+                       this.deck.boxSelectCoordinates.rectdata,
+                       state.pickingMode === 'boxSelect' ? {controller: {dragPan: false}}
+                                                         : {controller: {dragPan: true}});
 
     closeIpcHandles(graph.data.nodes);
     closeIpcHandles(graph.data.edges);
-
     return {
       frame: copyFramebuffer(this.deck.animationLoop, frame),
       state: {
@@ -64,7 +72,9 @@ class Renderer {
           modifiers: window.modifiers,
           mouseInWindow: window.mouseInWindow,
         },
-      },
+        boxSelectCoordinates: this.deck.boxSelectCoordinates,
+        selectedInfo: this.deck.selectedInfo
+      }
     };
   }
 }
@@ -97,10 +107,10 @@ function makeDeck() {
   deckLog.level        = 0;
   deckLog.enable(false);
 
-  const {OrthographicView}       = require('@deck.gl/core');
-  const {TextLayer}              = require('@deck.gl/layers');
-  const {DeckSSR, GraphLayer}    = require('@rapidsai/deck.gl');
-  const {OrthographicController} = require('@rapidsai/deck.gl');
+  const {OrthographicView}        = require('@deck.gl/core');
+  const {TextLayer, PolygonLayer} = require('@deck.gl/layers');
+  const {DeckSSR, GraphLayer}     = require('@rapidsai/deck.gl');
+  const {OrthographicController}  = require('@rapidsai/deck.gl');
 
   const makeLayers = (deck, graph = {}) => {
     const [viewport] = (deck?.viewManager?.getViewports() || []);
@@ -130,10 +140,93 @@ function makeDeck() {
                                     : [255, 255, 255, 255],
                          }))
       }),
-      new GraphLayer({pickable: true, ...graph}),
+      new GraphLayer({pickable: true, ...graph})
     ];
   };
 
+  getPolygonLayer = (rectdata) => {
+    return new PolygonLayer({
+      filled: true,
+      stroked: true,
+      getPolygon: d => d.polygon,
+      lineWidthUnits: 'pixels',
+      getLineWidth: 2,
+      getLineColor: [80, 80, 80],
+      getLineColor: [0, 0, 0, 150],
+      getFillColor: [255, 255, 255, 65],
+      data: rectdata
+    })
+  };
+
+  const onDragStart =
+    (info, event) => {
+      if (deck.props.controller.dragPan) { return; }
+      const {x, y}                       = info;
+      const [px, py]                     = info.viewport.unproject([x, y]);
+      deck.boxSelectCoordinates.startPos = [x, y];
+      deck.boxSelectCoordinates.rectdata =
+        [{polygon: [[px, py], [px, py], [px, py], [px, py]], show: true}];
+    }
+
+  const onDragEnd =
+    (info, event) => {
+      if (deck.props.controller.dragPan || !deck.boxSelectCoordinates.startPos ||
+          !deck.boxSelectCoordinates.rectdata) {
+        return;
+      }
+      const {x, y} = info;
+      const sx     = deck.boxSelectCoordinates.startPos[0];
+      const sy     = deck.boxSelectCoordinates.startPos[1];
+
+      deck.boxSelectCoordinates.rectdata =
+        [{polygon: deck.boxSelectCoordinates.rectdata[0].polygon || [], show: true}];
+      deck.boxSelectCoordinates.startPos    = null;
+      deck.selectedInfo.selectedCoordinates = {
+        x: Math.min(sx, x),
+        y: Math.min(sy, y),
+        width: Math.abs(x - sx),
+        height: Math.abs(y - sy),
+        layerIds: ['GraphLayer']
+      };
+
+      deck.selectedInfo.selectedNodes = deck.pickObjects(deck.selectedInfo.selectedCoordinates)
+                                          .filter(selected => selected.hasOwnProperty('nodeId'))
+                                          .map(n => n.nodeId);
+
+      deck.selectedInfo.selectedEdges = deck.pickObjects(deck.selectedInfo.selectedCoordinates)
+                                          .filter(selected => selected.hasOwnProperty('edgeId'))
+                                          .map(n => n.edgeId);
+      console.log('selected Nodes',
+                  deck.selectedInfo.selectedNodes,
+                  '\nselected Edges',
+                  deck.selectedInfo.selectedEdges);
+    }
+
+  const onDrag = (info, event) => {
+    if (deck.props.controller.dragPan) { return; }
+    if (deck.boxSelectCoordinates.startPos) {
+      const {x, y}     = info;
+      const [px, py]   = info.viewport.unproject([x, y]);
+      const startPoint = deck.boxSelectCoordinates.rectdata[0].polygon[0];
+      deck.boxSelectCoordinates.rectdata =
+        [{polygon: [startPoint, [startPoint[0], py], [px, py], [px, startPoint[1]]], show: true}];
+    };
+  };
+
+  const onClick = (info, event) => {
+    deck.selectedInfo.selectedCoordinates = {
+      x: info.x,
+      y: info.y,
+      radius: 1,
+    };
+    deck.selectedInfo.selectedNodes =
+      [deck.pickObject(deck.selectedInfo.selectedCoordinates)]
+        .filter(selected => selected && selected.hasOwnProperty('nodeId'))
+        .map(n => n.nodeId);
+
+    console.log(deck.selectedInfo.selectedNodes, deck.selectedInfo.selectedCoordinates);
+  };
+
   const deck = new DeckSSR({
     createFramebuffer: true,
     initialViewState: {
@@ -153,17 +246,25 @@ function makeDeck() {
           doubleClickZoom: false,
           type: OrthographicController,
           scrollZoom: {speed: 0.01, smooth: false},
-        },
+          // dragPan: false
+        }
       }),
     ],
     onAfterAnimationFrameRender({_loop}) { _loop.pause(); },
   });
 
+  deck.selectedInfo         = {selectedCoordinates: {}, selected: []};
+  deck.boxSelectCoordinates = {rectdata: [{polygon: [[]], show: false}], startPos: null};
+  deck.setProps({onClick, onDrag, onDragStart, onDragEnd});
+
   return {
     deck,
-    render(graph) {
+    render(graph, rectdata, cb_props = {}) {
       const done = deck.animationLoop.waitForRender();
-      deck.setProps({layers: makeLayers(deck, graph)});
+      deck.setProps({
+        layers: makeLayers(deck, graph).concat(rectdata[0].show ? getPolygonLayer(rectdata) : []),
+        ...cb_props
+      });
       deck.animationLoop.start();
       return done;
     },
diff --git a/modules/demo/viz-app/Readme.md b/modules/demo/viz-app/Readme.md
new file mode 100644
index 000000000..334f5df0b
--- /dev/null
+++ b/modules/demo/viz-app/Readme.md
@@ -0,0 +1,16 @@
+# Server-Side Rendered Viz Demos
+
+Collection of react-based dashboard which include interactive vizualizations which are rendered on the server-side (server app can be found in [demos/ssr/graph](../ssr/graph/).
+
+
+# Running Instructions:
+
+```bash
+# Terminal 1: start the rendering server
+yarn demo modules/demo/ssr/graph
+
+# Terminal 2: start hhe front-end viz-app
+yarn demo modules/demo/viz-app
+```
+
+Visit `localhost:3000/demo/graph` to access the demo.
diff --git a/modules/demo/viz-app/components/demo-dashboard/extended-table/extended-table.jsx b/modules/demo/viz-app/components/demo-dashboard/extended-table/extended-table.jsx
index 5566844d2..0ff9efd48 100644
--- a/modules/demo/viz-app/components/demo-dashboard/extended-table/extended-table.jsx
+++ b/modules/demo/viz-app/components/demo-dashboard/extended-table/extended-table.jsx
@@ -17,8 +17,7 @@ import { useTable, useSortBy, usePagination } from 'react-table';
 import styles from './extended-table.module.css';
 
 export default function ExtendedTable({ cols, data }) {
-  const columns = React.useMemo(
-    () => cols, []);
+  const columns = cols;
 
   const {
     getTableProps,
diff --git a/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.jsx b/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.jsx
index 91656e59c..f4d0ea158 100644
--- a/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.jsx
+++ b/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.jsx
@@ -22,7 +22,7 @@ export default class ToolBar extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      selectedTool: 'none',
+      selectedTool: 'click',
     }
     this.selectTool = this.selectTool.bind(this);
   }
@@ -53,10 +53,10 @@ export default class ToolBar extends React.Component {
   render() {
     return (
       <div className={styles.toolBar}>
-        {this.createTool('box', faVectorSquare, this.state.selectedTool)}
-        {this.createTool('poly', faDrawPolygon, this.state.selectedTool)}
-        {this.createTool('node', faMousePointer, this.state.selectedTool)}
-        {this.createButton(<Image src="/images/zoom.png" width={20} height={20} />, this.props.onResetClick)}
+        {this.createTool('boxSelect', faVectorSquare, this.state.selectedTool)}
+        {/* {this.createTool('poly', faDrawPolygon, this.state.selectedTool)} */}
+        {this.createTool('click', faMousePointer, this.state.selectedTool)}
+        {/* {this.createButton(<Image src="/images/zoom.png" width={20} height={20} />, this.props.onResetClick)} */}
         {this.createButton(<Image src="/images/reset.png" width={20} height={20} />, this.props.onClearClick)}
       </div>
     );
diff --git a/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.module.css b/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.module.css
index 44a7e24f9..f15bcb4b9 100644
--- a/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.module.css
+++ b/modules/demo/viz-app/components/demo-dashboard/tool-bar/tool-bar.module.css
@@ -36,5 +36,6 @@
 }
 
 .selected {
+    background-color: hsla(0, 7%, 25%, 0.643);
     border: 2px solid #99d0ef;
 }
diff --git a/modules/demo/viz-app/package.json b/modules/demo/viz-app/package.json
index e94570a9a..98de22bec 100755
--- a/modules/demo/viz-app/package.json
+++ b/modules/demo/viz-app/package.json
@@ -35,7 +35,10 @@
     "react-map-gl": "5.3.16",
     "react-burger-menu": "3.0.6",
     "react-tabs": "3.2.2",
-    "react-table": "7.7.0"
+    "react-table": "7.7.0",
+    "simple-peer": "9.11.0",
+    "socket.io-client": "4.2.0",
+    "react-native-webrtc": "1.92.2"
   },
   "files": [
     "pages",
diff --git a/modules/demo/viz-app/pages/demo/graph.jsx b/modules/demo/viz-app/pages/demo/graph.jsx
new file mode 100644
index 000000000..dbef11347
--- /dev/null
+++ b/modules/demo/viz-app/pages/demo/graph.jsx
@@ -0,0 +1,254 @@
+// Copyright (c) 2021, NVIDIA CORPORATION.
+//
+// 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 { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import React from 'react';
+import DemoDashboard from "../../components/demo-dashboard/demo-dashboard";
+import HeaderUnderline from '../../components/demo-dashboard/header-underline/header-underline';
+import ExtendedTable from '../../components/demo-dashboard/extended-table/extended-table';
+import ToolBar from '../../components/demo-dashboard/tool-bar/tool-bar';
+
+import { io } from "socket.io-client";
+import SimplePeer from "simple-peer";
+import wrtc from 'wrtc';
+
+function onlyH264(sdp) {
+  // remove non-h264 codecs from the supported codecs list
+  const videos = sdp.match(/^m=video.*$/gm);
+  if (videos) {
+    return videos.map((video) => [video, [
+      ...getCodecIds(sdp, 'VP9'),
+      ...getCodecIds(sdp, 'VP8'),
+      ...getCodecIds(sdp, 'HEVC'),
+      ...getCodecIds(sdp, 'H265')
+    ]]).reduce((sdp, [video, ids]) => ids.reduce((sdp, id) => [
+      new RegExp(`^a=fmtp:${id}(.*?)$`, 'gm'),
+      new RegExp(`^a=rtpmap:${id}(.*?)$`, 'gm'),
+      new RegExp(`^a=rtcp-fb:${id}(.*?)$`, 'gm'),
+    ].reduce((sdp, expr) => sdp.replace(expr, ''), sdp), sdp)
+      .replace(video, ids.reduce((video, id) => video.replace(` ${id}`, ''), video)), sdp)
+      .replace('\r\n', '\n').split('\n').map((x) => x.trim()).filter(Boolean).join('\r\n') + '\r\n';
+  }
+
+  return sdp;
+
+  function getCodecIds(sdp, codec) {
+    return getIdsForMatcher(sdp, new RegExp(
+      `^a=rtpmap:(?<id>\\d+)\\s+${codec}\\/\\d+$`, 'm'
+    )).reduce((ids, id) => [
+      ...ids, id, ...getIdsForMatcher(sdp, new RegExp(
+        `^a=fmtp:(?<id>\\d+)\\s+apt=${id}$`, 'm'
+      ))
+    ], []);
+  }
+
+  function getIdsForMatcher(sdp, matcher) {
+    const ids = [];
+    /** @type RegExpMatchArray */
+    let res, str = '' + sdp, pos = 0;
+    for (; res = str.match(matcher); str = str.slice(pos)) {
+      pos = res.index + res[0].length;
+      if (res.groups) { ids.push(res.groups.id); }
+    }
+    return ids;
+  }
+}
+
+
+function serializeEvent(original) {
+  return Object
+    .getOwnPropertyNames(Object.getPrototypeOf(original))
+    .reduce((serialized, field) => {
+      switch (typeof original[field]) {
+        case 'object':
+        case 'symbol':
+        case 'function': break;
+        default: serialized[field] = original[field];
+      }
+      serialized = { ...serialized, x: serialized.layerX, y: serialized.layerY };
+      return serialized;
+    }, { type: original.type });
+}
+
+export default class Graph extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.dataTable = this.dataTable.bind(this);
+    this.dataMetrics = this.dataMetrics.bind(this);
+    this.videoRef = React.createRef();
+    this.peerConnected = false;
+    this.state = {
+      nodes: {
+        tableData: [{}],
+        tableColumns: [{ Header: "Loading...", accessor: "Loading..." }],
+        length: 0
+      },
+      edges: {
+        tableData: [{}],
+        tableColumns: [{ Header: "Loading...", accessor: "Loading..." }],
+        length: 0
+      }
+    }
+  }
+
+  componentDidMount() {
+    console.log(this.videoRef.current.width);
+    this.socket = io("localhost:8080", { transports: ['websocket'], reconnection: true, query: { width: this.videoRef.current.width, height: this.videoRef.current.height } });
+    this.peer = new SimplePeer({
+      wrtc: wrtc,
+      trickle: true,
+      initiator: true,
+      sdpTransform: (sdp) => {
+        // Remove bandwidth restrictions
+        // https://github.com/webrtc/samples/blob/89f17a83ed299ef28d45b933419d809b93d41759/src/content/peerconnection/bandwidth/js/main.js#L240
+        sdp = sdp.replace(/b=AS:.*\r\n/, '').replace(/b=TIAS:.*\r\n/, '');
+        // Force h264 encoding by removing all VP8/9 codecs from the sdp
+        sdp = onlyH264(sdp);
+        return sdp;
+      }
+    });
+
+    // Negotiate handshake
+    this.socket.on('signal', (data) => this.peer.signal(data));
+    this.peer.on('signal', (data) => this.socket.emit('signal', data));
+    this.peer.on('stream', (stream) => {
+      this.videoRef.current.srcObject = stream;
+    });
+    this.peer.on('connect', () => {
+      this.peerConnected = true;
+    });
+
+    function processColumns(columnObject) {
+      return Object.keys(columnObject).reduce(
+        (prev, curr) => {
+          return prev.concat([{ "Header": curr, "accessor": curr }]);
+        }, []);
+    }
+
+    this.peer.on('data', (data) => {
+      const decodedjson = JSON.parse(new TextDecoder().decode(data));
+      const keys = Object.keys(decodedjson.data);
+      keys.forEach((key) => {
+        if (['edges', 'nodes'].includes(key) && decodedjson.data[[key]].data.length > 0) {
+          this.setState({
+            [key]: {
+              tableColumns: processColumns(decodedjson.data[[key]].data[0]),
+              tableData: decodedjson.data[[key]].data,
+              length: decodedjson.data[[key]].length
+            }
+          });
+        }
+      });
+
+
+    });
+
+    this.dispatchRemoteEvent(this.videoRef.current, 'blur');
+    this.dispatchRemoteEvent(this.videoRef.current, 'wheel');
+    this.dispatchRemoteEvent(this.videoRef.current, 'mouseup');
+    this.dispatchRemoteEvent(this.videoRef.current, 'mousemove');
+    this.dispatchRemoteEvent(this.videoRef.current, 'mousedown');
+    this.dispatchRemoteEvent(this.videoRef.current, 'mouseenter');
+    this.dispatchRemoteEvent(this.videoRef.current, 'mouseleave');
+  }
+
+  dispatchRemoteEvent(target, type) {
+    let timeout = null;
+    target.addEventListener(type, (e) => {
+      if (e.target === this.videoRef.current) {
+        e.preventDefault();
+      }
+      if (!timeout) {
+        timeout = setTimeout(() => { timeout = null; }, 1000 / 60);
+        if (this.peerConnected) {
+          this.peer.send(JSON.stringify({ type: 'event', data: serializeEvent(e) }));
+        }
+      }
+    });
+  }
+
+
+
+  demoView() {
+    return (
+      <div style={{ width: "2000px", height: "500px", display: "flex" }}>
+        <video autoPlay muted width="1860px" height="500px" style={{ flexDirection: "row", float: "left" }}
+          ref={this.videoRef}
+        /**
+         *  Using synthetic react events is throwing:
+         * `Unable to preventDefault inside passive event listener due to target being treated as passive`,
+         *  Temporarily using dom event listeners
+        */
+        // onMouseUp={remoteEvent}
+        // onMouseDown={remoteEvent} onMouseMove={remoteEvent}
+        // onMouseLeave={remoteEvent} onWheel={remoteEvent}
+        // onMouseEnter={remoteEvent} onBlur={remoteEvent}
+        />
+        <ToolBar style={{ flexDirection: "row", width: "200px" }}
+          onResetClick={() => { console.log("reset") }}
+          onClearClick={() => { this.peer.send(JSON.stringify({ type: 'clearSelections', data: true })); }}
+          onToolSelect={(tool) => { this.peer.send(JSON.stringify({ type: 'pickingMode', data: tool })); }}
+        />
+      </div>
+    );
+  }
+
+  dataTable() {
+    return (
+      <Tabs>
+        <TabList>
+          <Tab>Node List</Tab>
+          <Tab>Edge List</Tab>
+        </TabList>
+
+        <TabPanel>
+          <ExtendedTable
+            cols={this.state.nodes.tableColumns}
+            data={this.state.nodes.tableData}
+          />
+        </TabPanel>
+        <TabPanel>
+          <ExtendedTable
+            cols={this.state.edges.tableColumns}
+            data={this.state.edges.tableData}
+          />
+        </TabPanel>
+      </Tabs>
+    )
+  }
+
+  dataMetrics() {
+    return (
+      <div style={{ padding: 10, color: 'white' }}>
+        <HeaderUnderline title={"Data Metrics"} fontSize={18} color={"white"}>
+          <div>{'>'} {this.state.nodes.length} Edges</div>
+          <div>{'>'} {this.state.edges.length} Nodes</div>
+        </HeaderUnderline>
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <DemoDashboard demoName={"Graph Demo"}
+        demoView={this.demoView()}
+        onLoadClick={(fileName) => { console.log(fileName) }}
+        onRenderClick={() => { console.log("Render Clicked") }}
+        dataTable={this.dataTable()}
+        dataMetrics={this.dataMetrics()}
+      />
+    )
+  }
+}
diff --git a/modules/demo/viz-app/pages/index.jsx b/modules/demo/viz-app/pages/index.jsx
index 666345989..66c368137 100644
--- a/modules/demo/viz-app/pages/index.jsx
+++ b/modules/demo/viz-app/pages/index.jsx
@@ -19,9 +19,9 @@ export default function Home() {
 
   const demos = [
     {
-      title: 'UMAP',
-      description: 'This is the description of the UMAP demo.',
-      href: '/demo/umap'
+      title: 'Graph',
+      description: 'This is the description of the Graph demo.',
+      href: '/demo/graph'
     }
   ];