diff --git a/src/components/BTETableComponent.js b/src/components/BTETableComponent.js
index 05b2c35..f302627 100644
--- a/src/components/BTETableComponent.js
+++ b/src/components/BTETableComponent.js
@@ -3,127 +3,60 @@ import React, { Component } from 'react'
 import { Table, Form, Pagination } from 'semantic-ui-react'
 
 export default class BTETable extends Component {
-  state = {
-    column: null,
-    data: [],
-    display: [],
-    direction: null,
-    activePage: 1,
-    totalPages: 1
-  };
-
-  componentDidUpdate(prevProps) {
-    // Typical usage (don't forget to compare props):
-    if (this.props.content !== prevProps.content) {
-      this.setState({data: this.props.content})
-      if (Array.isArray(this.props.content)){
-        this.setState({display: this.props.content.slice(0, 10),
-                       totalPages: Math.floor(this.props.content.length/10) + 1})
-      }
-    }
-  }
-
-  handleSort = (clickedColumn) => () => {
-    const { column, data, direction } = this.state
-
-    if (column !== clickedColumn) {
-      this.setState({
-        column: clickedColumn,
-        data: _.sortBy(data, [clickedColumn]),
-        direction: 'ascending',
-      });
-
-      return
-    }
-
-    this.setState({
-      data: data.reverse(),
-      direction: direction === 'ascending' ? 'descending' : 'ascending',
-      display: this.state.data.slice(this.state.activePage*10 - 10, this.state.activePage*10),
-    });
-  }
-
-  handlePaginationChange = (e, { activePage }) => {
-    this.setState({display: this.state.data.slice(activePage*10 - 10, activePage*10),
-                   activePage: activePage});
-  }
-
-
   render() {
-    const { column, data, direction } = this.state
-
+    const headers = this.props.table.display.length > 0 ? Object.keys(this.props.table.display[0]) : [];
+    console.log('header', headers)
     const formData = () => (
-      <Form>
+        <Form>
             <h3>Your Query Results</h3>
-            <Table sortable celled fixed>
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell />
-                  <Table.HeaderCell
-                    sorted={column === 'source_node' ? direction : null}
-                    onClick={this.handleSort('source_node')}
-                  >
-                    sourceNode
-                  </Table.HeaderCell>
-                  <Table.HeaderCell
-                    sorted={column === 'pred1' ? direction : null}
-                    onClick={this.handleSort('pred1')}
-                  >
-                    pred1
-                  </Table.HeaderCell>
-                  <Table.HeaderCell
-                    sorted={column === 'intermediate_node' ? direction : null}
-                    onClick={this.handleSort('intermediate_node')}
-                  >
-                    intermediateNode
-                  </Table.HeaderCell>
-                  <Table.HeaderCell
-                    sorted={column === 'pred2' ? direction : null}
-                    onClick={this.handleSort('pred2')}
-                  >
-                    pred2
-                  </Table.HeaderCell>
-                  <Table.HeaderCell
-                    sorted={column === 'target_node' ? direction : null}
-                    onClick={this.handleSort('target_node')}
-                  >
-                    targetNode
-                  </Table.HeaderCell>
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {_.map(this.state.display, (item) => (
-                <Table.Row key={Object.values(item).join('||')}>
-                  <Table.Cell collapsing>
-                      <label>
-                      <input type="checkbox"
-                        name={Object.values(item).join('||')}
-                        onChange={this.props.handleSelect} 
-                        defaultChecked={false} /> 
-                      display
-                    </label>
-                  </Table.Cell>
-                  <Table.Cell>{item['input']}</Table.Cell>
-                  <Table.Cell>{item['pred1']}</Table.Cell>
-                  <Table.Cell>{item['node1_name']}</Table.Cell>
-                  <Table.Cell>{item['pred2']}</Table.Cell>
-                  <Table.Cell>{item['output_name']}</Table.Cell>
-                </Table.Row>
-              ))}
-              </Table.Body>
+            <Table sortable celled compact>
+                <Table.Header>
+                    <Table.Row>
+                        <Table.HeaderCell />
+                        {_.map(headers, (item) => (
+                            <Table.HeaderCell
+                                key={item}
+                                className={item}
+                                value={item}
+                                sorted={this.props.table.column === item ? this.props.table.direction : null}
+                                onClick={this.props.handleSort}
+                            >
+                                {item}
+                            </Table.HeaderCell>
+                        ))}
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    {_.map(this.props.table.display, (item) => (
+                    <Table.Row key={Object.values(item).join('||')}>
+                        <Table.Cell key='checkbox'>
+                            <label>
+                            <input type="checkbox"
+                                name={Object.values(item).join('||')}
+                                onChange={this.props.handleSelect} 
+                                defaultChecked={false} /> 
+                            display
+                            </label>
+                        </Table.Cell>
+                        {_.map(headers, (col) => (
+                            <Table.Cell>{item[col]}</Table.Cell>
+                        ))}
+                    </Table.Row>
+                ))}
+                </Table.Body>
             </Table>
             <Pagination
-              onPageChange={this.handlePaginationChange}
-              defaultActivePage={1}
-              totalPages={this.state.totalPages}
-              siblingRange={1}
-              // Heads up! All items are powered by shorthands, if you want to hide one of them, just pass `null` as value
+                onPageChange={this.props.handlePaginationChange}
+                defaultActivePage={1}
+                totalPages={this.props.table.totalPages}
+                siblingRange={1}
+                // Heads up! All items are powered by shorthands, if you want to hide one of them, just pass `null` as value
             />
-          </Form>
+        </Form>
     )
 
     return (
-      this.props.resultReady ? formData(): null
+        this.props.resultReady ? formData(): null
     )
   }
 }
diff --git a/src/components/ExplainComponent.js b/src/components/ExplainComponent.js
index 6f38b51..74a7468 100644
--- a/src/components/ExplainComponent.js
+++ b/src/components/ExplainComponent.js
@@ -24,8 +24,15 @@ class Explain extends Component {
             selectedOutput: {},
             paths: [],
             selectedPaths: new Set(),
-            queryResults: {},
+            queryResults: [],
             queryLog: [],
+            table: {
+                column: null,
+                display: [],
+                direction: null,
+                activePage: 1,
+                totalPages: 1
+            },
             selectedQueryResults: new Set(),
             graph: {nodes: [{id: 'kevin'}], links: []},
             showInput: true,
@@ -43,6 +50,8 @@ class Explain extends Component {
         this.handleBackToStep2 = this.handleBackToStep2.bind(this);
         this.handleBackToStep3 = this.handleBackToStep3.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.handlePaginationChange = this.handlePaginationChange.bind(this);
+        this.handleSort = this.handleSort.bind(this);
     };
 
     //this function will be passed to autocomplete component
@@ -183,9 +192,13 @@ class Explain extends Component {
             })
             .then(response => response.json())
             .then(response => {
-                console.log('response', response);
                 this.setState({
                     queryResults: response['data'],
+                    table: {
+                        ...this.state.table,
+                        display: response['data'].slice(this.state.table.activePage*10 - 10, this.state.table.activePage*10),
+                        totalPages: Math.ceil(response['data'].length/10)
+                    },
                     queryLog: response['log'],
                     resultReady: true,
                     step3Complete: true
@@ -218,10 +231,47 @@ class Explain extends Component {
         }) 
     }
 
+    handleSort(event) {
+        let clickedColumn = event.target.className.split(' ').slice(-1)[0];
+        
+        const { column, direction } = this.state.table;
+    
+        if (column !== clickedColumn) {
+            this.setState({
+                table: {
+                    ...this.state.table,
+                    column: clickedColumn,
+                    direction: 'descending',
+                },
+                queryResults: _.sortBy(this.state.queryResults, [clickedColumn])
+          });
+          return
+        }
+    
+        this.setState({
+            table: {
+                ...this.state.table,
+                direction: direction === 'ascending' ? 'descending' : 'ascending',
+                display: this.state.queryResults.slice(this.state.table.activePage*10 - 10, this.state.table.activePage*10),
+            },
+            queryResults: this.state.queryResults.reverse(),
+        });
+    }
+    
+    handlePaginationChange = (e, { activePage }) => {
+        this.setState({
+            table:{
+                ...this.state.table,
+                display: this.state.queryResults.slice(activePage*10 - 10, activePage*10),
+                activePage: activePage
+            }      
+        });
+    }
+
     posOrNeg(num) {
         if (num === 0) {
             return 0
-        } else if(num % 2 === 0) {
+        } else if (num % 2 === 0) {
             return 1
         } else {
             return -1
@@ -232,19 +282,31 @@ class Explain extends Component {
         records = Array.from(records);
         let graph = {nodes: [{id: 'kevin'}], links: []};
         if (Array.isArray(records) && records.length) {
-          graph['nodes'] = [{id: records[0].split('||')[0], color: 'green', x: 20, y: 200},
-                            {id: records[0].split('||')[14], color: 'blue', x: 700, y:200}]
+            graph['nodes'] = [
+                {
+                    id: records[0].split('||')[0],
+                    color: 'green',
+                    x: 20,
+                    y: 200
+                },
+                {
+                    id: records[0].split('||')[7],
+                    color: 'blue',
+                    x: 700,
+                    y:200
+                }
+            ]
         };
         for (let i = 0; i < records.length; i++) {
             if (i < 10) {
                 let rec = records[i].split('||')
                 graph['links'].push({'source': rec[0],
+                                     'target': rec[3],
+                                     'label': rec[1]})
+                graph['links'].push({'source': rec[3],
                                      'target': rec[7],
-                                     'label': rec[2]})
-                graph['links'].push({'source': rec[7],
-                                     'target': rec[14],
-                                     'label': rec[9]})
-                graph['nodes'].push({id: rec[7], color: 'red', x: 360, y: 200 + this.posOrNeg(i) * Math.ceil(i/2) * 30})
+                                     'label': rec[5]})
+                graph['nodes'].push({id: rec[3], color: 'red', x: 360, y: 200 + this.posOrNeg(i) * Math.ceil(i/2) * 30})
             }
         }
         return graph
@@ -298,6 +360,9 @@ class Explain extends Component {
                     shouldHide={this.state.showResult}
                     resultReady={this.state.resultReady}
                     content={this.state.queryResults}
+                    table={this.state.table}
+                    handleSort={this.handleSort}
+                    handlePaginationChange={this.handlePaginationChange}
                     logs={this.state.queryLog}
                     handleSelect={this.handleQueryResultSelect}
                     graph={this.state.graph}
diff --git a/src/components/ExplainQueryResultComponent.js b/src/components/ExplainQueryResultComponent.js
index 34c4324..59fca51 100644
--- a/src/components/ExplainQueryResultComponent.js
+++ b/src/components/ExplainQueryResultComponent.js
@@ -2,15 +2,15 @@ import D3Graph from './D3GraphComponent';
 import BTETable from './BTETableComponent';
 import ReactLoader from './DimerComponent';
 import React, { Component } from 'react';
-import { Segment, Divider, Button, Header, Icon, Image, Modal } from 'semantic-ui-react';
+import { Segment, Divider, Button,  Modal } from 'semantic-ui-react';
 
 
 export default class ExplainQueryResult extends Component {
 
     render() {
-        const paragraphs = this.props.logs.map((log) => {
+        const paragraphs = this.props.logs.map((log, i) => {
             return (
-                <p>{log}</p>
+                <p key={i}>{log}</p>
             )
         })
         return (
@@ -18,18 +18,21 @@ export default class ExplainQueryResult extends Component {
                 <Segment color='blue'>
                     <h2> Step 3: Select the Query Result you want to display.</h2>
                     <hr />
-                    {this.props.resultReady ? <Modal trigger={<Button basic color="red">Query Execution Logs</Button>} closeIcon>
+                    {this.props.resultReady ? <div><Modal trigger={<Button basic color="red">Query Execution Logs</Button>} closeIcon>
                         <Modal.Header>Query Execution Logs</Modal.Header>
                         <Modal.Description>
                             {paragraphs}
                         </Modal.Description>
-                    </Modal> : null}
-                    <br></br><br></br>
+                    </Modal><br></br><br></br></div> : null}
+                    
                     {this.props.resultReady ? null: <ReactLoader />}
                     <BTETable
                         resultReady={this.props.resultReady}
-                        content={this.props.content}
                         handleSelect={this.props.handleSelect}
+                        content={this.props.content}
+                        table={this.props.table}
+                        handleSort={this.props.handleSort}
+                        handlePaginationChange={this.props.handlePaginationChange}
                     />
                     <Divider />
                     {this.props.graph.links.length === 0 ? null: 
diff --git a/src/components/MetaPathFormComponent.js b/src/components/MetaPathFormComponent.js
index 7bac0cc..b3053b3 100644
--- a/src/components/MetaPathFormComponent.js
+++ b/src/components/MetaPathFormComponent.js
@@ -16,9 +16,9 @@ class MetaPathForm extends Component {
 
 
     render() {
-        const rows = this.props.paths.map((path) => {
+        const rows = this.props.paths.map((path, i) => {
             return (
-                <Table.Row textAlign='right'>
+                <Table.Row textAlign='right' key={i}>
                     <Table.Cell>
                         <label>
                             <input type="checkbox"
diff --git a/src/components/PredictComponent.js b/src/components/PredictComponent.js
index 4f99367..8cea8a2 100644
--- a/src/components/PredictComponent.js
+++ b/src/components/PredictComponent.js
@@ -6,6 +6,7 @@ import Steps from './StepsComponent';
 import PredictInput from './PredictInputComponent';
 import MetaPathForm from './MetaPathFormComponent';
 import PredictQueryResult from './PredictQueryResultComponent';
+let _ = require('lodash');
 
 class Predict extends Component {
 
@@ -25,8 +26,15 @@ class Predict extends Component {
             selectedPaths: new Set(),
             queryResults: {},
             queryLog: [],
+            table: {
+                column: null,
+                display: [],
+                direction: null,
+                activePage: 1,
+                totalPages: 1
+            },
             selectedQueryResults: new Set(),
-            graph: {nodes: [{id: 'kevin'}], links: []},
+            graph: {},
             showInput: true,
             showMetaPath: false,
             showResult: false,
@@ -40,6 +48,8 @@ class Predict extends Component {
         this.handleBackToStep1 = this.handleBackToStep1.bind(this);
         this.handleBackToStep2 = this.handleBackToStep2.bind(this);
         this.handleBackToStep3 = this.handleBackToStep3.bind(this);
+        this.handlePaginationChange = this.handlePaginationChange.bind(this);
+        this.handleSort = this.handleSort.bind(this);
     };
 
     //this function will be passed to autocomplete component
@@ -60,7 +70,6 @@ class Predict extends Component {
 
     handleMetaPathSelect(event){
         const selectedPaths = this.state.selectedPaths;
-        console.log('meta path select', event)
         if (event.target.checked) {
             selectedPaths.add(event.target.name)
         } else {
@@ -94,7 +103,7 @@ class Predict extends Component {
             selectedPaths: new Set(),
             queryResults: {},
             selectedQueryResults: new Set(),
-            graph: {nodes: [{id: 'kevin'}], links: []},
+            graph: {},
             showInput: false,
             showMetaPath: true,
             showResult: false
@@ -173,6 +182,11 @@ class Predict extends Component {
                 this.setState({
                     queryResults: response['data'],
                     queryLog: response['log'],
+                    table: {
+                        ...this.state.table,
+                        display: response['data'].slice(this.state.table.activePage*10 - 10, this.state.table.activePage*10),
+                        totalPages: Math.ceil(response['data'].length/10)
+                    },
                     resultReady: true,
                     step3Complete: true
                 });
@@ -204,6 +218,43 @@ class Predict extends Component {
         }) 
     }
 
+    handleSort(event) {
+        let clickedColumn = event.target.className.split(' ').slice(-1)[0];
+        
+        const { column, direction } = this.state.table;
+    
+        if (column !== clickedColumn) {
+            this.setState({
+                table: {
+                    ...this.state.table,
+                    column: clickedColumn,
+                    direction: 'descending',
+                },
+                queryResults: _.sortBy(this.state.queryResults, [clickedColumn])
+          });
+          return
+        }
+    
+        this.setState({
+            table: {
+                ...this.state.table,
+                direction: direction === 'ascending' ? 'descending' : 'ascending',
+                display: this.state.queryResults.slice(this.state.table.activePage*10 - 10, this.state.table.activePage*10),
+            },
+            queryResults: this.state.queryResults.reverse(),
+        });
+    }
+    
+    handlePaginationChange = (e, { activePage }) => {
+        this.setState({
+            table:{
+                ...this.state.table,
+                display: this.state.queryResults.slice(activePage*10 - 10, activePage*10),
+                activePage: activePage
+            }      
+        });
+    }
+
     recordsToTreeGraph(records) {
         records = Array.from(records);
         let tree_dict = {};
@@ -213,10 +264,10 @@ class Predict extends Component {
         };
         for (let i = 0; i < records.length; i++) {
           let rec = records[i].split('||')
-          if (!(rec[7] in tree_dict)) {
-              tree_dict[rec[7]] = new Set([rec[14]]);
+          if (!(rec[3] in tree_dict)) {
+              tree_dict[rec[3]] = new Set([rec[7]]);
           } else {
-              tree_dict[rec[7]].add(rec[14])
+              tree_dict[rec[3]].add(rec[7])
           }
         };
         for (const prop in tree_dict) {
@@ -273,6 +324,9 @@ class Predict extends Component {
                     shouldHide={this.state.showResult}
                     resultReady={this.state.resultReady}
                     content={this.state.queryResults}
+                    table={this.state.table}
+                    handleSort={this.handleSort}
+                    handlePaginationChange={this.handlePaginationChange}
                     logs={this.state.queryLog}
                     handleSelect={this.handleQueryResultSelect}
                     graph={this.state.graph}
@@ -283,6 +337,4 @@ class Predict extends Component {
     }
 }
 
-export default Predict;
-
-
+export default Predict;
\ No newline at end of file
diff --git a/src/components/PredictQueryResultComponent.js b/src/components/PredictQueryResultComponent.js
index 30c39aa..15ae376 100644
--- a/src/components/PredictQueryResultComponent.js
+++ b/src/components/PredictQueryResultComponent.js
@@ -29,14 +29,17 @@ export default class PredictQueryResult extends Component {
                         resultReady={this.props.resultReady}
                         content={this.props.content}
                         handleSelect={this.props.handleSelect}
+                        table={this.props.table}
+                        handleSort={this.props.handleSort}
+                        handlePaginationChange={this.props.handlePaginationChange}
                     />
                     <Divider />
-                    <div className={this.props.shouldHide ? '' : 'hidden'}>
+                    {Object.keys(this.props.graph).length === 0 ? null: 
                         <TreeGraph
                             graph={this.props.graph}
                             resultReady={this.props.resultReady}
                         />
-                    </div>
+                    }           
                 </Segment>
             </div>
         )