diff --git a/modules/demo/ssr/graph/index.js b/modules/demo/ssr/graph/index.js
index 4b590c58d..1e56b0bff 100755
--- a/modules/demo/ssr/graph/index.js
+++ b/modules/demo/ssr/graph/index.js
@@ -19,6 +19,7 @@ const fastify = require('fastify')();
 fastify  //
   .register(require('./plugins/webrtc'), require('./plugins/graph')(fastify))
   .register(require('fastify-static'), {root: require('path').join(__dirname, 'public')})
-  .get('/', (req, reply) => reply.sendFile('video.html'));
+  .register(require('./plugins/api'))
+  .get('/', (req, reply) => reply.sendFile('video.html'))
 
 fastify.listen(8080).then(() => console.log('server ready'));
diff --git a/modules/demo/ssr/graph/package.json b/modules/demo/ssr/graph/package.json
index bbf58f11a..6bc0b3f53 100644
--- a/modules/demo/ssr/graph/package.json
+++ b/modules/demo/ssr/graph/package.json
@@ -21,11 +21,14 @@
     "fastify-socket.io": "2.0.0",
     "fastify-static": "4.2.3",
     "fastify": "3.20.2",
+    "fastify-multipart": "5.0.2",
+    "fastify-cors": "6.0.2",
     "nanoid": "3.1.25",
     "rxjs": "6.6.7",
     "shm-typed-array": "0.0.13",
     "simple-peer": "9.11.0",
-    "socket.io": "4.1.3"
+    "socket.io": "4.1.3",
+    "glob": "7.2.0"
   },
   "files": [
     "render",
diff --git a/modules/demo/ssr/graph/plugins/api/index.js b/modules/demo/ssr/graph/plugins/api/index.js
new file mode 100644
index 000000000..955a4d96a
--- /dev/null
+++ b/modules/demo/ssr/graph/plugins/api/index.js
@@ -0,0 +1,190 @@
+const {graphs, clients}      = require('../graph');
+const fs                     = require('fs')
+const util                   = require('util')
+const {pipeline}             = require('stream')
+const pump                   = util.promisify(pipeline)
+var glob                     = require('glob');
+const {Float32Buffer}        = require('@rapidsai/cuda');
+const {GraphCOO}             = require('@rapidsai/cugraph');
+const {DataFrame, Uint32}    = require('@rapidsai/cudf');
+const {loadEdges, loadNodes} = require('../graph/loader');
+
+function readDataFrame(path) {
+  let df = new DataFrame({});
+  if (path.indexOf('.csv', path.length - 4) !== -1) {
+    // csv file
+    df = DataFrame.readCSV({sources: [path], header: 0, sourceType: 'files'});
+
+  } else if (path.indexOf('.parquet', path.length - 8) !== -1) {
+    // csv file
+    df = DataFrame.readParquet({sources: [path]});
+  }
+  if (df.names.includes('Unnamed: 0')) { df = df.cast({'Unnamed: 0': new Uint32}); }
+  return df;
+}
+
+async function getNodesForGraph(asDeviceMemory, nodes, numNodes) {
+  let nodesRes = {};
+  const pos    = new Float32Buffer(Array.from(
+    {length: numNodes * 2},
+    () => Math.random() * 1000 * (Math.random() < 0.5 ? -1 : 1),
+    ));
+
+  if (nodes.x in nodes.dataframe.names) {
+    nodesRes.nodeXPositions = asDeviceMemory(nodes.dataframe.get(node.x).data);
+  } else {
+    nodesRes.nodeXPositions = pos.subarray(0, pos.length / 2);
+  }
+  if (nodes.y in nodes.dataframe.names) {
+    nodesRes.nodeYPositions = asDeviceMemory(nodes.dataframe.get(node.y).data);
+  } else {
+    nodesRes.nodeYPositions = pos.subarray(pos.length / 2);
+  }
+  if (nodes.dataframe.names.includes(nodes.size)) {
+    nodesRes.nodeRadius = asDeviceMemory(nodes.dataframe.get(nodes.size).data);
+  }
+  if (nodes.dataframe.names.includes(nodes.color)) {
+    nodesRes.nodeFillColors = asDeviceMemory(nodes.dataframe.get(nodes.color).data);
+  }
+  if (nodes.dataframe.names.includes(nodes.id)) {
+    nodesRes.nodeElementIndices = asDeviceMemory(nodes.dataframe.get(nodes.id).data);
+  }
+  return nodesRes;
+}
+
+async function getEdgesForGraph(asDeviceMemory, edges) {
+  let edgesRes = {};
+
+  if (edges.dataframe.names.includes(edges.color)) {
+    edgesRes.edgeColors = asDeviceMemory(edges.dataframe.get(edges.color).data);
+  }
+  if (edges.dataframe.names.includes(edges.id)) {
+    edgesRes.edgeList = asDeviceMemory(edges.dataframe.get(edges.id).data);
+  }
+  if (edges.dataframe.names.includes(edges.bundle)) {
+    edgesRes.edgeBundles = asDeviceMemory(edges.dataframe.get(edges.bundle).data);
+  }
+  return edgesRes;
+}
+
+module.exports = function(fastify, opts, done) {
+  fastify.register(require('fastify-multipart'))
+  fastify.register(require('fastify-cors'),
+                   {
+                     // put your options here
+                   });
+
+  // fastify.addHook('preValidation', (request, reply, done) => {
+  //   console.log('this is executed', request);
+  //   done()
+  // });
+
+  async function loadGraph(id, data) {
+    if (!(id in fastify[graphs])) {
+      const asDeviceMemory = (buf) => new (buf[Symbol.species])(buf);
+      const src                    = data.edges.dataframe.get(data.edges.src);
+      const dst                    = data.edges.dataframe.get(data.edges.dst);
+      const graph                  = new GraphCOO(src._col, dst._col, {directedEdges: true});
+      fastify[graphs][id]          = {
+        refCount: 0,
+        nodes: await getNodesForGraph(asDeviceMemory, data.nodes, graph.numNodes()),
+        edges: await getEdgesForGraph(asDeviceMemory, data.edges),
+        graph: graph,
+      };
+    }
+
+    ++fastify[graphs][id].refCount;
+
+    return {
+      gravity: 0.0,
+      linLogMode: false,
+      scalingRatio: 5.0,
+      barnesHutTheta: 0.0,
+      jitterTolerance: 0.05,
+      strongGravityMode: false,
+      outboundAttraction: false,
+      graph: fastify[graphs][id].graph,
+      nodes: {
+        ...fastify[graphs][id].nodes,
+        length: fastify[graphs][id].graph.numNodes(),
+      },
+      edges: {
+        ...fastify[graphs][id].edges,
+        length: fastify[graphs][id].graph.numEdges(),
+      },
+    };
+  }
+
+  fastify.get('/getIDValue', async (request, reply) => {
+    console.log(fastify[clients][request.query.id + ':video']);
+    reply.send(fastify[clients][request.query.id + ':video'].graph.dataframes[0].numRows);
+  });
+
+  fastify.post('/uploadFile', async function(req, reply) {
+    const data = await req.file();
+
+    const filepath = `${__dirname}/../../data/${data.filename}`;
+    const target = fs.createWriteStream(filepath);
+    try {
+      await pump(data.file, target);
+      console.log('success');
+    } catch (err) { console.log(err); }
+    reply.send()
+  });
+
+  fastify.get('/getFileNames', async (request, reply) => {
+    if (`${request.query.id}:video` in fastify[clients]) {
+      glob(`*.{csv,parquet}`,
+           {cwd: `${__dirname}/../../data/`},
+           (er, files) => { reply.send(JSON.stringify(files.concat(['defaultExample']))); });
+    } else {
+      reply.code(500).send('client handshake not established');
+    }
+  });
+
+  fastify.get('/loadOnGPU', async (request, reply) => {
+    const id       = `${request.query.id}:video`;
+    const filePath = `${__dirname}/../../data/`
+    if (id in fastify[clients]) {
+      if (fs.existsSync(`${filePath}${request.query.nodes}`) &&
+          fs.existsSync(`${filePath}${request.query.edges}`)) {
+        fastify[clients][id].data.nodes.dataframe =
+          await readDataFrame(`${filePath}${request.query.nodes}`);
+
+        fastify[clients][id].data.edges.dataframe =
+          await readDataFrame(`${filePath}${request.query.edges}`);
+      } else {
+        fastify[clients][id].data.nodes.dataframe = await loadNodes();
+        fastify[clients][id].data.edges.dataframe = await loadEdges();
+      }
+      reply.send('successfully loaded in GPU Memory');
+    }
+    else {
+      reply.code(500).send('client handshake not established');
+    }
+  })
+
+  fastify.get('/fetchDFParameters', async (request, reply) => {
+    const id = `${request.query.id}:video`;
+    if (id in fastify[clients]) {
+      reply.send(JSON.stringify({
+        nodesParams: fastify[clients][id].data.nodes.dataframe.names.concat([null]),
+        edgesParams: fastify[clients][id].data.edges.dataframe.names.concat([null])
+      }));
+    } else {
+      reply.code(500).send('client handshake not established');
+    }
+  });
+
+  fastify.post('/updateRenderColumns', async (request, reply) => {
+    const id = `${request.body.id}:video`;
+    if (id in fastify[clients]) {
+      Object.assign(fastify[clients][id].data.nodes, request.body.nodes);
+      Object.assign(fastify[clients][id].data.edges, request.body.edges);
+      fastify[clients][id].graph = await loadGraph('default', fastify[clients][id].data);
+    } else {
+      reply.code(500).send('client handshake not established');
+    }
+  });
+  done();
+}
diff --git a/modules/demo/ssr/graph/plugins/graph/index.js b/modules/demo/ssr/graph/plugins/graph/index.js
index cba183d25..f88aa5564 100644
--- a/modules/demo/ssr/graph/plugins/graph/index.js
+++ b/modules/demo/ssr/graph/plugins/graph/index.js
@@ -12,14 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const wrtc            = require('wrtc');
-const {MemoryView}    = require('@rapidsai/cuda');
-const {Float32Buffer} = require('@rapidsai/cuda');
-const {GraphCOO}      = require('@rapidsai/cugraph');
-const {Series, Int32} = require('@rapidsai/cudf');
+const wrtc                       = require('wrtc');
+const {MemoryView}               = require('@rapidsai/cuda');
+const {Series, Int32, DataFrame} = require('@rapidsai/cudf');
 
-const {loadNodes, loadEdges} = require('./loader');
-const {RenderCluster}        = require('../../render/cluster');
+const {RenderCluster} = require('../../render/cluster');
 
 const {create: shmCreate, detach: shmDetach} = require('shm-typed-array');
 
@@ -63,24 +60,31 @@ function graphSSRClients(fastify) {
       },
       event: {},
       props: {width, height, layout},
-      graph: await loadGraph(graphId),
+      graph: {},  // await loadGraph(graphId),
+      data: {
+        nodes: {dataframe: new DataFrame({}), color: '', size: '', id: '', x: 'x', y: 'y'},
+        edges: {dataframe: new DataFrame({}), color: '', id: '', bundle: '', src: 'src', dst: 'dst'}
+      },
       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}}
-      }));
-    }
+
+    // if (clients[stream.id].graph !== {}) {
+    //   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);
@@ -110,6 +114,7 @@ function graphSSRClients(fastify) {
         }
         case 'layout': {
           clients[stream.id].props.layout = JSON.parse(data);
+          console.log(JSON.parse(data));
           break;
         }
       }
@@ -126,60 +131,6 @@ function graphSSRClients(fastify) {
       }
     }
   }
-
-  async function loadGraph(id) {
-    let dataframes = [];
-
-    if (!(id in graphs)) {
-      const asDeviceMemory = (buf) => new (buf[Symbol.species])(buf);
-      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(dataframes[0].get('size').data),
-          nodeFillColors: asDeviceMemory(dataframes[0].get('color').data),
-          nodeElementIndices: asDeviceMemory(dataframes[0].get('id').data),
-        },
-        edges: {
-          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}),
-      };
-    }
-
-    ++graphs[id].refCount;
-
-    const pos = new Float32Buffer(Array.from(
-      {length: graphs[id].graph.numNodes() * 2},
-      () => Math.random() * 1000 * (Math.random() < 0.5 ? -1 : 1),
-      ));
-
-    return {
-      gravity: 0.0,
-      linLogMode: false,
-      scalingRatio: 5.0,
-      barnesHutTheta: 0.0,
-      jitterTolerance: 0.05,
-      strongGravityMode: false,
-      outboundAttraction: false,
-      graph: graphs[id].graph,
-      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
-    };
-  }
 }
 
 function layoutAndRenderGraphs(clients) {
@@ -200,6 +151,8 @@ function layoutAndRenderGraphs(clients) {
         continue;
       }
 
+      if (client.graph == {}) { continue; }
+
       const state = {...client.state};
       const props = {...client.props};
       const event =
@@ -224,7 +177,7 @@ function layoutAndRenderGraphs(clients) {
 
       if (event.length === 0 && !props.layout) { continue; }
       if (event.length !== 0) { client.event = Object.create(null); }
-      if (props.layout == true) { client.graph = forceAtlas2(client.graph); }
+      if (props.layout == true && client.graph !== {}) { client.graph = forceAtlas2(client.graph); }
 
       const {
         width  = client.props.width ?? 800,
@@ -268,7 +221,7 @@ function layoutAndRenderGraphs(clients) {
               result.state.boxSelectCoordinates.rectdata    = [{polygon: [[]], show: false}];
 
               // send to client
-              if (client.graph.dataframes) { sendToClient(client.graph.dataframes); }
+              sendToClient([client.data.nodes.dataframe, client.data.edges.dataframe]);
             } else if (JSON.stringify(client.state.selectedInfo.selectedCoordinates) !==
                        JSON.stringify(result.state.selectedInfo.selectedCoordinates)) {
               // selections updated
@@ -276,12 +229,10 @@ function layoutAndRenderGraphs(clients) {
                 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)
-                ]);
-              }
+              sendToClient([
+                client.data.nodes.dataframe.gather(nodes),
+                client.data.edges.dataframe.gather(edges)
+              ]);
             }
             // copy result state to client's current state
             result?.state && Object.assign(client.state, result.state);
@@ -299,6 +250,7 @@ function getPaginatedRows(df, page = 1, rowsPerPage = 400) {
 }
 
 function forceAtlas2({graph, nodes, edges, ...params}) {
+  if (graph == undefined) { return {}; }
   graph.forceAtlas2({...params, positions: nodes.nodeXPositions.buffer});
   return {
     graph,
diff --git a/modules/demo/ssr/graph/public/video.html b/modules/demo/ssr/graph/public/video.html
index 8b4b9df90..0dc26de56 100644
--- a/modules/demo/ssr/graph/public/video.html
+++ b/modules/demo/ssr/graph/public/video.html
@@ -24,6 +24,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
     <script>
         const sock = io({ transports: ['websocket'], reconnection: true });
+        console.log(sock);
         const video = document.querySelector('video');
         const peer = new SimplePeer({
             trickle: true,
diff --git a/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx b/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx
index 2db483b39..8129d837b 100644
--- a/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx
+++ b/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx
@@ -29,6 +29,7 @@ export default class DemoDashboard extends React.Component {
         <SlideMenu
           onLoadClick={this.props.onLoadClick}
           onRenderClick={this.props.onRenderClick}
+          customComponents={this.props.customComponents}
         />
         <Layout id="page-wrap" title={demoName} isLoading={isLoading}>
           <DemoView demoView={this.props.demoView} />
diff --git a/modules/demo/viz-app/components/demo-dashboard/file-input/file-input.jsx b/modules/demo/viz-app/components/demo-dashboard/file-input/file-input.jsx
index bafba7b32..69c125b70 100644
--- a/modules/demo/viz-app/components/demo-dashboard/file-input/file-input.jsx
+++ b/modules/demo/viz-app/components/demo-dashboard/file-input/file-input.jsx
@@ -18,17 +18,18 @@ export default class FileInput extends React.Component {
   constructor(props) {
     super(props)
     this.uploadFile = this.uploadFile.bind(this);
+    this.inputRef = React.createRef();
   }
 
   uploadFile(event) {
     let file = event.target.files[0];
-    this.props.onChange(file.name);
+    this.props.onChange(file, this.props.name);
   }
 
   render() {
     return <label style={{ width: 130, height: 0 }}>
       <p className={this.props?.useWhite ? "whiteTextButton" : "textButton"}>{this.props.children}</p>
-      <input type="file" style={{ display: "none" }} onChange={this.uploadFile} />
+      <input type="file" style={{ display: "none" }} onChange={this.uploadFile} ref={this.inputRef} />
     </label>
   }
 }
diff --git a/modules/demo/viz-app/components/demo-dashboard/slide-menu/slide-menu.jsx b/modules/demo/viz-app/components/demo-dashboard/slide-menu/slide-menu.jsx
index e4982e2e4..ee50e65de 100644
--- a/modules/demo/viz-app/components/demo-dashboard/slide-menu/slide-menu.jsx
+++ b/modules/demo/viz-app/components/demo-dashboard/slide-menu/slide-menu.jsx
@@ -22,46 +22,48 @@ export default class SlideMenu extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      selectedFilePath: "",
+      selectedFile: {}
     }
     this.onDataChange = this.onDataChange.bind(this);
     this.onLoadClick = this.onLoadClick.bind(this);
     this.onRenderClick = this.onRenderClick.bind(this);
   }
 
-  onDataChange(filePath) {
+  onDataChange(file) {
     this.setState({
-      selectedFilePath: filePath
+      selectedFile: file,
     });
   }
 
   onLoadClick() {
-    this.props.onLoadClick(this.state.selectedFilePath);
+    console.log("hereherhehre");
+    this.props.onLoadClick(this.state.selectedFile);
   }
 
   onRenderClick() {
     this.props.onRenderClick();
   }
 
+
   render() {
     return (
       <Menu pageWrapId={"page-wrap"} outerContainerId={"outer-container"} width={'50vw'}>
         <HeaderUnderline title={"Data Source"}>
           <Row>
-            <Col className={"col-auto"}>
-              <FileInput onChange={this.onDataChange}>
-                Select Data ▼
-              </FileInput>
-              <p style={{ color: "black" }}>Selection: {this.state.selectedFilePath}</p>
+            <Col className={"col-auto"}><FileInput onChange={this.onDataChange}>
+              Select file to upload ▼
+            </FileInput>
             </Col>
+            <p style={{ color: "black" }}>Selection: {this.state.selectedFile.name}</p>
             <Col className={"max"} ><div className={"d-flex"} /></Col>
             <Col className={"col-auto"}>
-              <p className={"textButton"} onClick={this.onLoadClick}>[Load]</p>
+              <p className={"textButton"} onClick={this.onLoadClick}>[upload]</p>
             </Col>
           </Row>
         </HeaderUnderline>
         <div style={{ height: 20 }} />
         <HeaderUnderline title={"Visualization"}>
+          {this.props.customComponents}
           <p className={"textButton"} onClick={this.onRenderClick}>[Render]</p>
         </HeaderUnderline>
       </Menu >
diff --git a/modules/demo/viz-app/package.json b/modules/demo/viz-app/package.json
index 98de22bec..48db64b4e 100755
--- a/modules/demo/viz-app/package.json
+++ b/modules/demo/viz-app/package.json
@@ -38,7 +38,8 @@
     "react-table": "7.7.0",
     "simple-peer": "9.11.0",
     "socket.io-client": "4.2.0",
-    "react-native-webrtc": "1.92.2"
+    "react-native-webrtc": "1.92.2",
+    "fetch": "1.1.0"
   },
   "files": [
     "pages",
diff --git a/modules/demo/viz-app/pages/demo/graph.jsx b/modules/demo/viz-app/pages/demo/graph.jsx
index dbef11347..4ba08483f 100644
--- a/modules/demo/viz-app/pages/demo/graph.jsx
+++ b/modules/demo/viz-app/pages/demo/graph.jsx
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import { Form, Col, Row } from 'react-bootstrap';
 import React from 'react';
 import DemoDashboard from "../../components/demo-dashboard/demo-dashboard";
 import HeaderUnderline from '../../components/demo-dashboard/header-underline/header-underline';
@@ -22,6 +23,7 @@ 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';
+import axios from 'axios';
 
 function onlyH264(sdp) {
   // remove non-h264 codecs from the supported codecs list
@@ -99,13 +101,36 @@ export default class Graph extends React.Component {
         tableData: [{}],
         tableColumns: [{ Header: "Loading...", accessor: "Loading..." }],
         length: 0
-      }
+      },
+      fileUploadStatus: {},
+      nodesFileOptions: [],
+      edgesFileOptions: [],
+      nodesFile: "",
+      edgesFile: "",
+      nodesParams: [],
+      edgesParams: [],
+      nodesRenderColumns: {
+        x: "x",
+        y: "y",
+        color: "",
+        size: "",
+        id: ""
+      },
+      edgesRenderColumns: {
+        src: "src", dst: "dst",
+        color: "", bundle: "", id: ""
+      },
+      gpuLoadStatus: "not loaded",
+      forceAtlas2: false
     }
   }
 
   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.socket = io("localhost:8080", {
+      transports: ['websocket'], reconnection: true,
+      query: { width: this.videoRef.current.width, height: this.videoRef.current.height, layout: this.state.forceAtlas2 }
+    });
     this.peer = new SimplePeer({
       wrtc: wrtc,
       trickle: true,
@@ -240,12 +265,166 @@ export default class Graph extends React.Component {
     )
   }
 
+  uploadFile(file) {
+    console.log("uploading", file.name, this);
+    let formData = new FormData();
+    formData.append("file", file);
+    axios.post("http://localhost:8080/uploadFile", formData, {
+    }).then(respone => { console.log(respone.statusText); })
+      .then(success => {
+        console.log("file uploaded successfully");
+      })
+      .catch(error => {
+        console.log("error");
+      });
+  }
+
+  reloadFiles() {
+    axios.get("http://localhost:8080/getFileNames?id=" + this.socket.id).then((response) => {
+      this.setState({
+        nodesFileOptions: response.data,
+        edgesFileOptions: response.data,
+        nodesFile: response.data[0],
+        edgesFile: response.data[0]
+      })
+    }).catch((error) => {
+      // handle error
+      console.log(error);
+    }).then(() => {
+      console.log("request complete")
+    })
+  }
+
+  fetchDFParameters() {
+    axios.get("http://localhost:8080/fetchDFParameters", {
+      params: {
+        id: this.socket.id
+      }
+    }).then((response) => {
+      this.setState({
+        nodesParams: response.data.nodesParams,
+        edgesParams: response.data.edgesParams,
+        nodesRenderColumns: {
+          x: response.data.nodesParams[0],
+          y: response.data.nodesParams[0],
+          color: response.data.nodesParams[0],
+          size: response.data.nodesParams[0],
+          id: response.data.nodesParams[0]
+        },
+        edgesRenderColumns: {
+          src: response.data.edgesParams[0], dst: response.data.edgesParams[0],
+          color: response.data.edgesParams[0], bundle: response.data.edgesParams[0], id: response.data.edgesParams[0]
+        }
+      });
+    }).catch((error) => { }).then(() => { });
+  }
+
+  loadOnGPU() {
+    axios.get("http://localhost:8080/loadOnGPU", {
+      params: {
+        id: this.socket.id,
+        nodes: this.state.nodesFile,
+        edges: this.state.edgesFile
+      }
+    }).then((response) => {
+      this.setState({
+        gpuLoadStatus: response.data
+      });
+    }).catch((error) => {
+      this.setState({
+        gpuLoadStatus: "not loaded"
+      })
+    }).then(() => {
+      this.fetchDFParameters()
+    });
+  }
+
+  updateRenderColumns(df, param, value) {
+    if (df == "nodes") {
+      this.setState({
+        nodesRenderColumns: Object.assign(this.state.nodesRenderColumns, { [param]: value })
+      });
+    } else {
+      this.setState({
+        edgesRenderColumns: Object.assign(this.state.edgesRenderColumns, { [param]: value })
+      });
+    }
+  }
+
+  getDFParameters() {
+    if (this.state.gpuLoadStatus !== "not loaded") {
+      return (
+        <Form.Group>
+          <Form.Label>Nodes</Form.Label>
+          <Form.Row>
+            {["x", "y", "color", "size", "id"].map((param) => <Form.Group as={Col} md="2">
+              <Form.Label>{param}</Form.Label>
+              <Form.Control as="select" custom onChange={(e) => { this.updateRenderColumns("nodes", param, e.target.value); }}>
+                {this.state.nodesParams.map((obj) => <option value={obj}>{obj}</option>)}
+              </Form.Control>
+            </Form.Group>)}
+          </Form.Row>
+          <Form.Label>Edges</Form.Label>
+          <Form.Row>
+            {["src", "dst", "color", "bundle", "id"].map((param) => <Form.Group as={Col} md="2">
+              <Form.Label>{param}</Form.Label>
+              <Form.Control as="select" custom onChange={(e) => { this.updateRenderColumns("edges", param, e.target.value); }}>
+                {this.state.edgesParams.map((obj) => <option value={obj}>{obj}</option>)}
+              </Form.Control>
+            </Form.Group>)}
+          </Form.Row>
+        </Form.Group>
+      )
+    } else {
+      return (<></>)
+    }
+  }
+
+  getCustomComponents() {
+    return (<div>
+      <p className={"textButton"} onClick={() => this.reloadFiles()}>[Refresh files]</p>
+      <Form.Group>
+        <Form.Label>Select Nodes</Form.Label>
+        <Form.Control as="select" custom onChange={(e) => { this.setState({ nodesFile: e.target.value }); }}>
+          {this.state.nodesFileOptions.map((obj) => <option value={obj}>{obj}</option>)}
+        </Form.Control>
+        <Form.Label>Select Edges</Form.Label>
+        <Form.Control as="select" custom onChange={(e) => { this.setState({ edgesFile: e.target.value }); }}>
+          {this.state.edgesFileOptions.map((obj) => <option value={obj}>{obj}</option>)}
+        </Form.Control>
+        <p className={"textButton"} onClick={() => this.loadOnGPU()}>[Load on GPU] {this.state.gpuLoadStatus}</p>
+      </Form.Group>
+      {this.getDFParameters()}
+
+      <h4 style={{ color: 'black' }}><Form.Check
+        type="switch"
+        id="custom-switch"
+        label="ForceAtlas2"
+        onChange={((e) => {
+          this.peer.send(JSON.stringify({ type: 'layout', data: e.target.checked }));
+        })}
+      /> </h4>
+    </div >)
+  }
+
+  onRenderClick() {
+    axios.post("http://localhost:8080/updateRenderColumns", {
+      nodes: this.state.nodesRenderColumns,
+      edges: this.state.edgesRenderColumns,
+      id: this.socket.id
+    }).then((response) => {
+      console.log("success");
+    }).catch((error) => {
+      console.log("error");
+    })
+  }
   render() {
     return (
       <DemoDashboard demoName={"Graph Demo"}
         demoView={this.demoView()}
-        onLoadClick={(fileName) => { console.log(fileName) }}
-        onRenderClick={() => { console.log("Render Clicked") }}
+        onLoadClick={this.uploadFile}
+        customComponents={this.getCustomComponents()}
+        onRenderClick={() => this.onRenderClick()}
         dataTable={this.dataTable()}
         dataMetrics={this.dataMetrics()}
       />