in client/src/components/pipelines/browser/Metadata.js [2086:2327]
get tableColumns () {
const {currentMetadataConditions = []} = this.state;
const onHeaderClicked = (e, key) => {
if (e) {
e.stopPropagation();
}
if (this.isSampleSheetColumn(key)) {
return;
}
const [orderBy] = this.state.filterModel.orderBy.filter(f => f.field === key);
if (!orderBy) {
this.onOrderByChanged(key, DESCEND);
} else if (orderBy.desc) {
this.onOrderByChanged(key, ASCEND);
} else {
this.onOrderByChanged(key);
}
};
const renderTitle = (key) => {
const [orderBy] = this.state.filterModel.orderBy.filter(f => f.field === key);
let icon, orderNumber;
if (orderBy && !this.isSampleSheetColumn(key)) {
let iconStyle = {fontSize: 10, marginRight: 5};
if (this.state.filterModel.orderBy.length > 1) {
const number = this.state.filterModel.orderBy.indexOf(orderBy) + 1;
iconStyle = {fontSize: 10, marginRight: 0};
orderNumber = <sup style={{marginRight: 5}}>{number}</sup>;
}
if (orderBy.desc) {
icon = <Icon style={iconStyle} type="caret-down" />;
} else {
icon = <Icon style={iconStyle} type="caret-up" />;
}
}
return (
<span
onClick={(e) => onHeaderClicked(e, key)}
className={styles.metadataColumnHeader}>
{icon}{orderNumber}{getColumnTitle(key)}
{this.renderFilterButton(key)}
</span>
);
};
const getCellClassName = (item, defaultClass) => {
let selected = false;
if (this.state.selectedItem &&
this.state.selectedItem.rowKey &&
this.state.selectedItem.rowKey.value === item.rowKey.value) {
selected = true;
}
if (selected) {
return `${defaultClass} ${styles.selected}`;
}
return defaultClass;
};
const selection = this.getCurrentSelection();
const spreadSelection = this.getSpreadSelection();
const isSpreadCell = (column, row) => (
!autoFillEntities.cellIsSelected(selection, column, row) &&
!autoFillEntities.cellIsSelected(spreadSelection, column, row) &&
this.isHoveredCell(row, column)
) || (
selection &&
!selection.spreading &&
autoFillEntities.isRightCornerCell(selection, column, row)
);
const isActionsCell = (column, row) => this.state.cellsActions &&
this.state.cellsActions.length > 0 &&
selection &&
autoFillEntities.isRightCornerCell(selection, column, row);
const cellWrapper = (props, reactElementFn) => {
const {column, index} = props;
const item = props.original;
const cellClassName = getCellClassName(item, styles.metadataColumnCell);
const selected = cellClassName.search('selected') > -1;
const condition = currentMetadataConditions[index];
const {
style,
className: filterClassName
} = getConditionStyles(condition, selected);
const className = classNames(
cellClassName,
filterClassName,
{
'cp-library-metadata-table-cell-selected': selected
}
);
return (
<div
className={className}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
...style
}}
>
<AutoFillEntitiesMarker
visible={isSpreadCell(column.index, index)}
/>
{
isActionsCell(column.index, index) && (
<AutoFillEntitiesActions
actions={this.state.cellsActions}
callback={this.applySelectionAction}
/>
)
}
{reactElementFn() || '\u00A0'}
</div>
);
};
return [
{
id: 'selection',
accessor: item => item,
Header: '',
resizable: false,
width: 30,
style: {
cursor: 'pointer',
padding: 0
},
className: classNames(styles.metadataCheckboxCell, 'cp-library-metadata-table-cell'),
Cell: (props) => cellWrapper(props, () => {
const item = props.value;
return (
<Checkbox
style={{borderCollapse: 'separate'}}
checked={this.itemIsSelected(item)}
/>
);
})
},
...this.state.columns.filter(c => c.selected).map(({key}, index) => {
return {
accessor: key,
index,
style: {
cursor: this.props.readOnly || this.isSampleSheetColumn(key)
? 'default'
: 'cell',
padding: 0
},
...(
this.isSampleSheetColumn(key)
? {width: 280, resizable: false, selectable: false}
: {}
),
className: 'cp-library-metadata-table-cell',
Header: () => renderTitle(key),
Cell: props => cellWrapper(props, () => {
const data = props.value;
const item = props.original;
const condition = currentMetadataConditions[props.index];
const icon = index === 0 && condition && condition.scheme && condition.scheme.icon
? (<Icon type={condition.scheme.icon} style={{marginRight: 5}} />)
: undefined;
if (this.isSampleSheetColumn(key)) {
return (
<MetadataSampleSheetValue
value={data ? data.value : undefined}
onChange={content => this.onEditSampleSheet(item, content)}
onRemove={() => this.onRemoveSampleSheet(item)}
>
{icon}
</MetadataSampleSheetValue>
);
}
if (data) {
if (data.type.toLowerCase().startsWith('array')) {
let referenceType = key;
const regex = /array\[(.*)\]/i;
const matchResult = data.type.match(regex);
if (matchResult && matchResult.length > 1) {
referenceType = matchResult[1] || key;
}
let count = 0;
try {
count = JSON.parse(data.value).length;
} catch (___) { }
let value = `${count} ${referenceType}(s)`;
return (
<a
title={value}
className={styles.actionLink}
onClick={(e) => this.onArrayReferencesClick(
e,
key,
data,
referenceType,
item
)}
>
{icon}{value}
</a>
);
}
if (data.type.toLowerCase().endsWith(':id')) {
return <a
title={data.value}
className={styles.actionLink}
onClick={(e) => this.onReferenceTypesClick(e, data)}>
{icon}{data.value}
</a>;
}
if (data.type.toLowerCase() === 'path') {
return (
<AttributeValue
value={data.value}
showFileNameOnly
>
{icon}
</AttributeValue>
);
}
if (/^date$/i.test(data.type)) {
return (
<span title={data.value}>
{icon}
{displayDate(data.value)}
</span>
);
}
if (isRunsValue(data.value)) {
return (
<RunsAttribute
value={data.value}
/>
);
}
return (
<span title={data.value}>
{icon}
{data.value}
</span>
);
}
})
};
})];
};