Skip to content

Commit

Permalink
Merge pull request Sage-Bionetworks#370 from jay-hodgson/SWC-4925b
Browse files Browse the repository at this point in the history 
SWC-4925: add renderer support for new multi-value list column types
  • Loading branch information
@leem42
leem42 authored Feb 11, 2020
2 parents 51dc355 + 0dffa65 commit e3df830
Show file tree
Hide file tree
Showing 3 changed files with 232 additions and 10 deletions.
186 changes: 183 additions & 3 deletions src/__tests__/lib/containers/SynapseTable.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,16 @@ describe('basic functionality', () => {
const ENTITYID_INDEX = 0
const USERID_INDEX = 1
const DATE_INDEX = 2
const STRING_LIST_INDEX = 3
const DATE_LIST_INDEX = 4
const BOOLEAN_LIST_INDEX = 5
const INTEGER_LIST_INDEX = 6
const MOCKED_STRING = 'MOCKED_VALUE'
const MOCKED_STRING_LIST = '["MOCKED_VALUE1","MOCKED_VALUE2"]'
const MOCK_DATE_VALUE = '1581360939000'
const MOCKED_DATE_LIST = `[${MOCK_DATE_VALUE}]`
const MOCKED_BOOLEAN_LIST = '[true, false]'
const MOCKED_INTEGER_LIST = '[10, 11]'
const MOCKED_NUM = 1
// syn16787123Json has two columns of type entity, the second
// is of type ENTITYID, the third is USERID
Expand All @@ -396,6 +405,26 @@ describe('basic functionality', () => {
name: MOCKED_STRING,
columnType: 'DATE',
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'STRING_LIST',
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'DATE_LIST',
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'BOOLEAN_LIST',
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'INTEGER_LIST',
},
],
queryResult: {
concreteType: 'org.sagebionetworks.repo.model.table.QueryResult',
Expand All @@ -419,21 +448,41 @@ describe('basic functionality', () => {
name: MOCKED_STRING,
id: MOCKED_STRING,
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'STRING_LIST',
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'DATE_LIST',
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'BOOLEAN_LIST',
},
{
id: MOCKED_STRING,
name: MOCKED_STRING,
columnType: 'INTEGER_LIST',
},
],
rows: [
{
values: ['syn123', 'syn120', '1567525763000'],
values: ['syn123', 'syn120', '1567525763000', MOCKED_STRING_LIST, MOCKED_DATE_LIST, MOCKED_BOOLEAN_LIST, MOCKED_INTEGER_LIST],
versionNumber: MOCKED_NUM,
rowId: MOCKED_NUM,
},
{
// @ts-ignore
values: ['syn124', 'syn120', null],
values: ['syn124', 'syn120', null, MOCKED_STRING_LIST, MOCKED_DATE_LIST, MOCKED_BOOLEAN_LIST, MOCKED_INTEGER_LIST],
versionNumber: MOCKED_NUM,
rowId: MOCKED_NUM,
},
{
values: ['syn125', 'syn121', '1567525763003'],
values: ['syn125', 'syn121', '1567525763003', MOCKED_STRING_LIST, MOCKED_DATE_LIST, MOCKED_BOOLEAN_LIST, MOCKED_INTEGER_LIST],
versionNumber: MOCKED_NUM,
rowId: MOCKED_NUM,
},
Expand All @@ -453,6 +502,16 @@ describe('basic functionality', () => {
expect(userIds).toEqual([USERID_INDEX])
const dates = instance.getColumnIndiciesWithType('DATE')
expect(dates).toEqual([DATE_INDEX])
const stringLists = instance.getColumnIndiciesWithType('STRING_LIST')
expect(stringLists).toEqual([STRING_LIST_INDEX])
const dateLists = instance.getColumnIndiciesWithType('DATE_LIST')
expect(dateLists).toEqual([DATE_LIST_INDEX])
const booleanLists = instance.getColumnIndiciesWithType('BOOLEAN_LIST')
expect(booleanLists).toEqual([BOOLEAN_LIST_INDEX])
const integerLists = instance.getColumnIndiciesWithType('INTEGER_LIST')
expect(integerLists).toEqual([INTEGER_LIST_INDEX])
const dateOrIntegerLists = instance.getColumnIndiciesWithType('DATE_LIST','INTEGER_LIST')
expect(dateOrIntegerLists).toEqual([DATE_LIST_INDEX, INTEGER_LIST_INDEX])
})

it('gets unique entities', () => {
Expand Down Expand Up @@ -482,6 +541,9 @@ describe('basic functionality', () => {
const entityColumnIndicies: number[] = [ENTITYID_INDEX]
const userColumnIndicies: number[] = [USERID_INDEX]
const dateColumnIndicies: number[] = [DATE_INDEX]
const otherListColumnIndicies: number[] = [STRING_LIST_INDEX, INTEGER_LIST_INDEX]
const dateListColumnIndicies: number[] = [DATE_LIST_INDEX]
const booleanListColumnIndicies: number[] = [BOOLEAN_LIST_INDEX]
const mockEntityLinkValue: string = 'syn122'
const mockUserCardValue: string = 'syn123'
const mockAllAuthenticatedUsersValue: string = 'syn124'
Expand Down Expand Up @@ -514,6 +576,9 @@ describe('basic functionality', () => {
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: ENTITYID_INDEX,
columnValue: mockEntityLinkValue,
isBold: '',
Expand All @@ -532,6 +597,9 @@ describe('basic functionality', () => {
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: USERID_INDEX,
columnValue: mockAllAuthenticatedUsersValue,
isBold: '',
Expand All @@ -558,6 +626,9 @@ describe('basic functionality', () => {
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: USERID_INDEX,
columnValue: mockTeamValue,
isBold: '',
Expand All @@ -582,6 +653,9 @@ describe('basic functionality', () => {
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: USERID_INDEX,
columnValue: mockUserCardValue,
isBold: '',
Expand All @@ -601,6 +675,9 @@ describe('basic functionality', () => {
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: USERID_INDEX,
columnValue: mockMarkdownColumnValue,
isBold: '',
Expand All @@ -621,6 +698,9 @@ describe('basic functionality', () => {
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: USERID_INDEX,
columnValue: mockColumnValue,
isBold: '',
Expand All @@ -645,6 +725,9 @@ describe('basic functionality', () => {
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: DATE_INDEX,
columnValue: mockDateValue,
isBold: '',
Expand All @@ -662,6 +745,103 @@ describe('basic functionality', () => {
).toEqual(new Date(Number(mockDateValue)).toLocaleString())
})

it('renders a date list value', () => {
const tableCell = shallow(
<div>
{instance.renderTableCell({
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: DATE_LIST_INDEX,
columnValue: MOCKED_DATE_LIST,
isBold: '',
mapEntityIdToHeader: {},
mapUserIdToHeader,
isMarkdownColumn: false,
})}
</div>,
)
expect(
tableCell
.find('span')
.text()
.trim(),
).toEqual(new Date(Number(MOCK_DATE_VALUE)).toLocaleString())
})

it('renders a integer list value', () => {
const tableCell = shallow(
<div>
{instance.renderTableCell({
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: INTEGER_LIST_INDEX,
columnValue: MOCKED_INTEGER_LIST,
isBold: '',
mapEntityIdToHeader: {},
mapUserIdToHeader,
isMarkdownColumn: false,
})}
</div>,
)
expect(
tableCell
.find('span')
.first()
.text()
.trim(),
).toEqual('10,')
expect(
tableCell
.find('span')
.last()
.text()
.trim(),
).toEqual('11')
})

it('renders a boolean list value', () => {
const tableCell = shallow(
<div>
{instance.renderTableCell({
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
booleanListColumnIndicies,
dateListColumnIndicies,
otherListColumnIndicies,
colIndex: BOOLEAN_LIST_INDEX,
columnValue: MOCKED_BOOLEAN_LIST,
isBold: '',
mapEntityIdToHeader: {},
mapUserIdToHeader,
isMarkdownColumn: false,
})}
</div>,
)
expect(
tableCell
.find('span')
.first()
.text()
.trim(),
).toEqual('true,')
expect(
tableCell
.find('span')
.last()
.text()
.trim(),
).toEqual('false')
})

it('renders an empty cell for null date', () => {
const tableCell = shallow(
<div>
Expand Down
52 changes: 45 additions & 7 deletions src/lib/containers/table/SynapseTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,13 +298,13 @@ export default class SynapseTable extends React.Component<
return distinctEntities
}

public getColumnIndiciesWithType(columnType: EntityColumnType) {
public getColumnIndiciesWithType(...columnTypes: EntityColumnType[]) {
const { data } = this.props
const columnsOfTypeEntity: number[] = []
data &&
data.selectColumns &&
data.selectColumns.forEach((el, index) => {
if (el.columnType === columnType) {
if (columnTypes.includes(el.columnType)) {
columnsOfTypeEntity.push(index)
}
})
Expand Down Expand Up @@ -835,6 +835,9 @@ export default class SynapseTable extends React.Component<
const entityColumnIndicies = this.getColumnIndiciesWithType('ENTITYID')
const userColumnIndicies = this.getColumnIndiciesWithType('USERID')
const dateColumnIndicies = this.getColumnIndiciesWithType('DATE')
const dateListColumnIndicies = this.getColumnIndiciesWithType('DATE_LIST')
const booleanListColumnIndicies = this.getColumnIndiciesWithType('BOOLEAN_LIST')
const otherListColumnIndicies = this.getColumnIndiciesWithType('STRING_LIST', 'INTEGER_LIST')
const isColumnSelectedLen = isColumnSelected.length
// find column indices that are COUNT type
const countColumnIndexes = this.getCountFunctionColumnIndexes(
Expand Down Expand Up @@ -885,6 +888,9 @@ export default class SynapseTable extends React.Component<
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
dateListColumnIndicies,
booleanListColumnIndicies,
otherListColumnIndicies,
colIndex,
columnValue,
isBold,
Expand Down Expand Up @@ -920,6 +926,9 @@ export default class SynapseTable extends React.Component<
entityColumnIndicies,
userColumnIndicies,
dateColumnIndicies,
dateListColumnIndicies,
booleanListColumnIndicies,
otherListColumnIndicies,
colIndex,
columnValue,
isBold,
Expand All @@ -931,6 +940,9 @@ export default class SynapseTable extends React.Component<
entityColumnIndicies: number[]
userColumnIndicies: number[]
dateColumnIndicies: number[]
dateListColumnIndicies: number[]
booleanListColumnIndicies: number[]
otherListColumnIndicies: number[]
colIndex: number
columnValue: string
isBold: string
Expand All @@ -949,6 +961,9 @@ export default class SynapseTable extends React.Component<
return [longString.substr(0, maxCharCount), true]
}
}
if (!columnValue) {
return <></>
}
if (isMarkdownColumn) {
return <MarkdownSynapse renderInline={true} markdown={columnValue} />
}
Expand All @@ -963,14 +978,37 @@ export default class SynapseTable extends React.Component<
/>
)
}
if (dateListColumnIndicies.includes(colIndex)) {
const jsonData:number[] = JSON.parse(columnValue)
return jsonData.map(
(val: number, index: number) => {
return <span className={isBold}>
{new Date(val).toLocaleString()}{index !== jsonData.length-1 ? ', ' : ''}
</span>
})
}
if (booleanListColumnIndicies.includes(colIndex)) {
const jsonData:boolean[] = JSON.parse(columnValue)
return jsonData.map(
(val: boolean, index: number) => {
return <span className={isBold}>
{val ? 'true' : 'false'}{index !== jsonData.length-1 ? ', ' : ''}
</span>
})
}
if (otherListColumnIndicies.includes(colIndex)) {
const jsonData:string[] = JSON.parse(columnValue)
return jsonData.map(
(val: string, index: number) => {
return <span className={isBold}>
{val}{index !== jsonData.length-1 ? ', ' : ''}
</span>
})
}
if (dateColumnIndicies.includes(colIndex)) {
return columnValue ? (
<p className={isBold}>
return <p className={isBold}>
{new Date(Number(columnValue)).toLocaleString()}
</p>
) : (
<></>
)
} else if (
userColumnIndicies.includes(colIndex) &&
Object.prototype.hasOwnProperty.call(mapUserIdToHeader, columnValue)
Expand Down
Loading

0 comments on commit e3df830

Please sign in to comment.