Skip to content

Commit

Permalink
fix(GtfsPlusVersionSummary): Tame down changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@binh-dam-ibigroup
binh-dam-ibigroup committed Apr 10, 2020
1 parent f2ddd81 commit ade917a
Showing 1 changed file with 37 additions and 120 deletions.
157 changes: 37 additions & 120 deletions lib/gtfsplus/components/GtfsPlusVersionSummary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
ButtonToolbar,
Col,
Glyphicon,
Label,
Panel,
Row,
Table
Expand All @@ -18,7 +17,6 @@ import {browserHistory, Link} from 'react-router'
import * as gtfsPlusActions from '../actions/gtfsplus'
import {getGtfsPlusSpec} from '../../common/util/config'
import type {Props as ContainerProps} from '../containers/ActiveGtfsPlusVersionSummary'
import type {GtfsSpecTable} from '../../types'
import type {GtfsPlusReducerState, ManagerUserState} from '../../types/reducers'

type Issue = {
Expand All @@ -37,17 +35,11 @@ type Props = ContainerProps & {
user: ManagerUserState
}

type State = {
expanded: boolean,
tableExpanded: any
}

type IssueFilter = Issue => boolean
type State = { expanded: boolean }

export default class GtfsPlusVersionSummary extends Component<Props, State> {
state = {
expanded: false,
tableExpanded: {}
expanded: false
}

componentDidMount () {
Expand Down Expand Up @@ -75,18 +67,12 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
}

_getTableLevelIssues = (tableId: string): ?Array<Issue> => {
return this._getIssues(tableId, issue => issue.rowIndex === -1)
}

_getIssues = (tableId: string, filter: ?IssueFilter): ?Array<Issue> => {
const {issuesForTable} = this.props
if (!issuesForTable) return null
if (!(tableId in issuesForTable)) return null

// Filter table level issues or row issues using the specified filter.
filter = filter || (() => true)
const issues = issuesForTable[tableId].filter(filter)
return (issues.length > 0 ? issues : null)
// Table level issues are identified by not having -1 for row index.
const tableLevelIssues = issuesForTable[tableId].filter(issue => issue.rowIndex === -1)
return tableLevelIssues.length > 0 ? tableLevelIssues : null
}

feedStatus () {
Expand Down Expand Up @@ -124,68 +110,6 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
this.setState({ expanded: !expanded })
}

_toggleTableExpanded = (tableName: string): void => {
const { tableExpanded } = this.state
const newTableExpanded = Object.assign(tableExpanded)
newTableExpanded[tableName] = !newTableExpanded[tableName]

this.setState({ tableExpanded: newTableExpanded })
}

renderIssues = (table: GtfsSpecTable) => {
const { tableExpanded } = this.state
const isExpanded = tableExpanded[table.name]
const issueCount = this.validationIssueCount(table.id)
const tableLevelIssues = this._getTableLevelIssues(table.id)
const allIssues = this._getIssues(table.id)
allIssues && allIssues.sort(
(issue1, issue2) => issue1.rowIndex - issue2.rowIndex
)

return (
<div>
<small>
<Button
bsSize='small'
bsStyle='link'
onClick={() => this._toggleTableExpanded(table.name)}
>
<small>
<Glyphicon
glyph={isExpanded ? 'triangle-bottom' : 'triangle-right'}
style={{marginRight: '0.5em'}} />
</small>
{issueCount} validation {issueCount !== 1 ? 'issues' : 'issue' }
{tableLevelIssues && issueCount && ` (${tableLevelIssues.length}/${issueCount} blocking)`}
</Button>

{isExpanded && <Table condensed style={{margin: 0}}>
<thead>
<tr>
<th>Line</th>
<th>Column</th>
<th>Issue</th>
</tr>
</thead>
<tbody>
{allIssues && allIssues.map((issue, index) =>
<tr key={index}>
<td>{issue.rowIndex + 2}</td> {/* This is the line number in the file */}
<td>{issue.fieldName}</td>
<td>
{issue.description}
{' '}
{issue.rowIndex === -1 && <Label bsStyle='danger' htmlFor>BLOCKING</Label>}
</td>
</tr>
)}
</tbody>
</Table>}
</small>
</div>
)
}

render () {
const {
gtfsplus,
Expand Down Expand Up @@ -274,7 +198,7 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
<Row>
<Col xs={12}>
<Panel>
<Table fill>
<Table striped fill>
<thead>
<tr>
<th>Table</th>
Expand All @@ -283,51 +207,44 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
<th>Validation Issues</th>
</tr>
</thead>
{/* FIXME: reinstate this <tbody> after switching to React 16. */}
{/**
* Change the behavior as follows:
* - Table-level issues are still critical and blocking and and displayed in red.
* - Per-row issues are still amber warnings and non-blocking,
* but will now be displayed individually instead of being aggregated.
* Maybe only display the first 25 issues to avoid long rendering times???
* - Issues are displayed on a full-width sub-table for better readability,
* in the same "row" as the issue summary.
* - Tables are sorted alphabetically.
*/}
{getGtfsPlusSpec()
.sort((table1, table2) => table1.name.localeCompare(table2.name))
.map((table, index) => {
const issueCount = this.validationIssueCount(table.id)
const tableLevelIssues = this._getTableLevelIssues(table.id)
const hasIssues = +issueCount > 0
const className = tableLevelIssues
? 'danger'
: (hasIssues ? 'warning' : '')
<tbody>
{getGtfsPlusSpec()
.sort((table1, table2) => table1.name.localeCompare(table2.name))
.map((table, index) => {
const issueCount = this.validationIssueCount(table.id)
const tableLevelIssues = this._getTableLevelIssues(table.id)

return (
// FIXME: Use <React.Fragment key={index}> (React 16+ only.)
<tbody key={index}>
return (
<tr
className={className}
rowSpan={hasIssues ? 2 : 1}
rowSpan={tableLevelIssues ? 2 : 1}
key={index}
className={tableLevelIssues
? 'danger'
: +issueCount > 0 && 'warning'
}
style={{ color: this.isTableIncluded(table.id) === 'Yes' ? 'black' : 'lightGray' }}>
<td>{table.name}</td>
<td>
{table.name}
{tableLevelIssues
? <small>
<br />
{tableLevelIssues.length} critical table issue(s):
<ul>
{tableLevelIssues.map((issue, i) =>
<li key={i}>{issue.fieldName}: {issue.description}</li>)}
</ul>
</small>
: null
}
</td>
<td>{this.isTableIncluded(table.id)}</td>
<td>{this.tableRecordCount(table.id)}</td>
<td>{issueCount}</td>
<td />
</tr>
{hasIssues && (
<tr className={className}>
<td colSpan='4' style={{borderTop: 'none'}}>
{this.renderIssues(table)}
</td>
</tr>
)}
</tbody>
// </React.Fragment>
)
})}
{/* </tbody> */}
)
})}
</tbody>
</Table>
</Panel>
</Col>
Expand Down

0 comments on commit ade917a

Please sign in to comment.