Skip to content

Commit

Permalink
Merge pull request #12 from kevinxin90/improve-table
Browse files Browse the repository at this point in the history 
Improve table
  • Loading branch information
@kevinxin90
kevinxin90 authored Apr 14, 2020
2 parents d95623e + 09f1f6b commit b29da1f
Show file tree
Hide file tree
Showing 6 changed files with 198 additions and 142 deletions.
157 changes: 45 additions & 112 deletions src/components/BTETableComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
)
}
}
85 changes: 75 additions & 10 deletions src/components/ExplainComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand Down
17 changes: 10 additions & 7 deletions src/components/ExplainQueryResultComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,37 @@ 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 (
<div className={this.props.shouldHide ? '' : 'hidden'}>
<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:
Expand Down
4 changes: 2 additions & 2 deletions src/components/MetaPathFormComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit b29da1f

Please sign in to comment.