in client/src/components/pipelines/browser/data-storage/index.js [1611:1914]
get columns () {
const tableData = this.items;
const hasAppsColumn = tableData.some(o => o.miew ||
o.vsi ||
o.hcs ||
o.ngb ||
o.documentPreview
);
const hasVersions = tableData.some(o => o.versions);
const getItemIcon = (item) => {
if (!item) {
return null;
}
let restoredStatus = this.getRestoredStatus(item);
if (
restoredStatus &&
item.type !== 'Folder' &&
(!item.archived || (item.isVersion && !restoredStatus.restoreVersions))
) {
restoredStatus = null;
}
if (/^file$/i.test(item.type) && SAMPLE_SHEET_FILE_NAME_REGEXP.test(item.name)) {
return (
<RestoreStatusIcon restoreInfo={restoredStatus}>
<Icon
className={classNames(styles.itemType, 'cp-primary')}
type="appstore-o"
/>
</RestoreStatusIcon>
);
}
return (
<RestoreStatusIcon restoreInfo={restoredStatus}>
<Icon
className={styles.itemType}
type={item.type.toLowerCase()}
/>
</RestoreStatusIcon>
);
};
const filteredStatus = (keys = []) => {
const filtered = keys.some(key => !!this.storage.currentFilter?.[key]);
return {
filtered,
filteredValue: filtered ? ['filtered'] : null
};
};
const hideFilterDropdown = () => {
this.filterDropdownVisible = undefined;
};
const selectionColumn = {
key: 'selection',
className: (this.showVersions || hasVersions)
? styles.checkboxCellVersions
: styles.checkboxCell,
render: (item) => {
if (item.selectable &&
(item.downloadable || item.editable || item.shareAvailable) &&
(!this.isOmicsStore || this.isSequenceStorage)) {
return (
<Checkbox
checked={this.fileIsSelected(item)}
onChange={this.selectFile(item)} />
);
} else {
return <span />;
}
}
};
const typeColumn = {
dataIndex: 'type',
key: 'type',
title: '',
className: styles.itemTypeCell,
onCellClick: (item) => this.didSelectDataStorageItem(item),
render: (text, item) => (
<Observer>
{() => getItemIcon(item)}
</Observer>
)
};
const appsColumn = {
key: 'apps',
className: styles.appCell,
render: (item) => {
const apps = [];
if (item.miew) {
apps.push(
<Popover
mouseEnterDelay={1}
key="miew"
content={
<div className={styles.miewPopoverContainer}>
<EmbeddedMiew
previewMode
s3item={{
storageId: this.props.storageId,
path: item.path,
version: item.version
}} />
</div>
}
trigger="hover">
<Link
className={styles.appLink}
to={
item.version
// eslint-disable-next-line max-len
? `miew?storageId=${this.props.storageId}&path=${item.path}&version=${item.version}`
: `miew?storageId=${this.props.storageId}&path=${item.path}`
}
target="_blank">
<img src="miew_logo.png" />
</Link>
</Popover>
);
}
if (item.vsi) {
apps.push(
<div
className={styles.appLink}
onClick={(event) => this.openPreviewModal(item, event)}
key={item.key}
>
<img src="icons/file-extensions/vsi.png" />
</div>
);
}
if (item.hcs) {
apps.push(
<div
className={styles.appLink}
onClick={(event) => this.openPreviewModal(item, event)}
key={item.key}
>
<img src="icons/file-extensions/hcs.png" />
</div>
);
}
if (item.ngb) {
apps.push(
<div
className={styles.appLink}
onClick={(event) => this.onNgbFileActionClick(item, event)}
key={item.key}
>
<img src="icons/file-extensions/ngb.svg" width={20} height={20} />
</div>
);
}
if (item.documentPreview) {
apps.push(
<div
className={styles.appLink}
onClick={(event) => this.openDataStorageItemPreview(item, event)}
key={item.key}
>
<Icon
type="export"
className="cp-primary"
style={{fontSize: 'larger'}}
/>
</div>
);
}
return apps;
}
};
const renderTitle = (key = '', title) => (
<span
style={{cursor: 'pointer'}}
className={classNames({
'cp-primary': (this.storage.currentSorter.field || '')
.toLowerCase() === key.toLowerCase()
})}
onClick={() => this.storage.toggleSorter(key)}
>
{title}
</span>
);
const nameColumn = {
dataIndex: 'name',
key: 'name',
title: renderTitle('name', 'Name'),
sorter: true,
sortOrder: this.storage.currentSorter.field === 'name' &&
this.storage.currentSorter.order,
className: styles.nameCell,
render: (text, item) => {
const search = this.storage.currentFilter[FILTER_FIELDS.name];
const highlightedText = this.storage.filtersApplied && search
? highlightText(text, search)
: text;
if (item.latest) {
return <span>{highlightedText} (latest)</span>;
}
return highlightedText;
},
filterDropdown: (
<InputFilter
filterKey={FILTER_FIELDS.name}
storage={this.storage}
hideFilterDropdown={hideFilterDropdown}
visible={this.filterDropdownVisible === 'name'}
placeholder="File name"
submitDisabled={value => (value || '').length < 3}
/>
),
filterDropdownVisible: this.filterDropdownVisible === 'name',
onFilterDropdownVisibleChange: (visible) => {
this.filterDropdownVisible = visible ? 'name' : undefined;
},
...filteredStatus([FILTER_FIELDS.name]),
onCellClick: (item) => this.didSelectDataStorageItem(item)
};
const sizeColumn = {
dataIndex: 'size',
key: 'size',
title: renderTitle('size', 'Size'),
sorter: true,
sortOrder: this.storage.currentSorter.field === 'size' &&
this.storage.currentSorter.order,
className: styles.sizeCell,
render: size => displaySize(size),
filterDropdown: (
<SizeFilter
storage={this.storage}
hideFilterDropdown={hideFilterDropdown}
visible={this.filterDropdownVisible === 'size'}
/>
),
filterDropdownVisible: this.filterDropdownVisible === 'size',
onFilterDropdownVisibleChange: (visible) => {
this.filterDropdownVisible = visible ? 'size' : undefined;
},
...filteredStatus([FILTER_FIELDS.sizeGreaterThan, FILTER_FIELDS.sizeLessThan]),
onCellClick: (item) => this.didSelectDataStorageItem(item)
};
const changedColumn = {
dataIndex: 'changed',
key: 'changed',
title: renderTitle('changed', 'Date changed'),
sorter: true,
sortOrder: this.storage.currentSorter.field === 'changed' &&
this.storage.currentSorter.order,
className: styles.changedCell,
render: (date) => date ? displayDate(date) : '',
filterDropdown: (
<DateFilter
storage={this.storage}
hideFilterDropdown={hideFilterDropdown}
visible={this.filterDropdownVisible === 'date'}
/>
),
filterDropdownVisible: this.filterDropdownVisible === 'date',
onFilterDropdownVisibleChange: (visible) => {
this.filterDropdownVisible = visible ? 'date' : undefined;
},
...filteredStatus([FILTER_FIELDS.dateAfter, FILTER_FIELDS.dateBefore]),
onCellClick: (item) => this.didSelectDataStorageItem(item)
};
const labelsColumn = {
dataIndex: 'labels',
key: 'labels',
title: '',
className: styles.labelsCell,
render: (labels) => (
<LabelsRenderer
labelClassName={styles.label}
labels={labels}
/>
),
onCellClick: (item) => this.didSelectDataStorageItem(item)
};
const actionsColumn = {
key: 'actions',
className: styles.itemActions,
title: (
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
{this.storage.resultsFiltered ? (
<Button
size="small"
type="primary"
onClick={() => this.storage.resetFilter(false)}
>
Reset filters
</Button>
) : null}
</div>
),
render: this.actionsRenderer
};
return [
selectionColumn,
typeColumn,
hasAppsColumn && appsColumn,
nameColumn,
sizeColumn,
changedColumn,
labelsColumn,
actionsColumn
].filter(Boolean);
};