src/components/data-explorer/data-explorer.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton } from '@material-ui/core';
   7 import MoreVertIcon from "@material-ui/icons/MoreVert";
   8 import { ColumnSelector } from "../column-selector/column-selector";
   9 import { DataTable, DataColumns } from "../data-table/data-table";
  10 import { DataColumn } from "../data-table/data-column";
  11 import { DataTableFilterItem } from '../data-table-filters/data-table-filters';
  12 import { SearchInput } from '../search-input/search-input';
  13 import { ArvadosTheme } from "../../common/custom-theme";
  14 import { DefaultView } from '../default-view/default-view';
  15 import { ProjectIcon } from '../icon/icon';
  16
  17 type CssRules = 'searchBox' | "toolbar" | 'defaultRoot' | 'defaultMessage' | 'defaultIcon';
  18
  19 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     searchBox: {
  21         paddingBottom: theme.spacing.unit * 2
  22     },
  23     toolbar: {
  24         paddingTop: theme.spacing.unit * 2
  25     },
  26     defaultRoot: {
  27         position: 'absolute',
  28         width: '100%',
  29         top: '50%',
  30         transform: 'translate(0%, -50%)'
  31     },
  32     defaultMessage: {
  33         fontSize: '1.75rem',
  34     },
  35     defaultIcon: {
  36         fontSize: '6rem'
  37     }
  38 });
  39
  40 interface DataExplorerDataProps<T> {
  41     items: T[];
  42     itemsAvailable: number;
  43     columns: DataColumns<T>;
  44     searchValue: string;
  45     rowsPerPage: number;
  46     rowsPerPageOptions: number[];
  47     page: number;
  48 }
  49
  50 interface DataExplorerActionProps<T> {
  51     onSearch: (value: string) => void;
  52     onRowClick: (item: T) => void;
  53     onRowDoubleClick: (item: T) => void;
  54     onColumnToggle: (column: DataColumn<T>) => void;
  55     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
  56     onSortToggle: (column: DataColumn<T>) => void;
  57     onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
  58     onChangePage: (page: number) => void;
  59     onChangeRowsPerPage: (rowsPerPage: number) => void;
  60     extractKey?: (item: T) => React.Key;
  61 }
  62
  63 type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules>;
  64
  65 export const DataExplorer = withStyles(styles)(
  66     class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
  67         render() {
  68             const {
  69                 columns, onContextMenu, onFiltersChange, onSortToggle, extractKey,
  70                 rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
  71                 items, itemsAvailable, onRowClick, onRowDoubleClick, classes
  72             } = this.props;
  73             return <div>
  74                 { items.length > 0 ? (
  75                     <Paper>
  76                         <Toolbar className={classes.toolbar}>
  77                             <Grid container justify="space-between" wrap="nowrap" alignItems="center">
  78                                 <div className={classes.searchBox}>
  79                                     <SearchInput
  80                                         value={searchValue}
  81                                         onSearch={onSearch}/>
  82                                 </div>
  83                                 <ColumnSelector
  84                                     columns={columns}
  85                                     onColumnToggle={onColumnToggle}/>
  86                             </Grid>
  87                         </Toolbar>
  88                         <DataTable
  89                             columns={[...columns, this.contextMenuColumn]}
  90                             items={items}
  91                             onRowClick={(_, item: T) => onRowClick(item)}
  92                             onContextMenu={onContextMenu}
  93                             onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)}
  94                             onFiltersChange={onFiltersChange}
  95                             onSortToggle={onSortToggle}
  96                             extractKey={extractKey}/>
  97                         <Toolbar>
  98                             <Grid container justify="flex-end">
  99                                 <TablePagination
 100                                     count={itemsAvailable}
 101                                     rowsPerPage={rowsPerPage}
 102                                     rowsPerPageOptions={rowsPerPageOptions}
 103                                     page={this.props.page}
 104                                     onChangePage={this.changePage}
 105                                     onChangeRowsPerPage={this.changeRowsPerPage}
 106                                     component="div" />
 107                             </Grid>
 108                         </Toolbar>
 109                     </Paper>
 110                 ) : (
 111                     <DefaultView
 112                         classRoot={classes.defaultRoot}
 113                         icon={ProjectIcon}
 114                         classIcon={classes.defaultIcon}
 115                         messages={['Your project is empty. Please create a project', 'or create a collection and upload a data.']}
 116                         classMessage={classes.defaultMessage} />
 117                 )}
 118             </div>;
 119         }
 120
 121         changePage = (event: React.MouseEvent<HTMLButtonElement>, page: number) => {
 122             this.props.onChangePage(page);
 123         }
 124
 125         changeRowsPerPage: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> = (event) => {
 126             this.props.onChangeRowsPerPage(parseInt(event.target.value, 10));
 127         }
 128
 129         renderContextMenuTrigger = (item: T) =>
 130             <Grid container justify="flex-end">
 131                 <IconButton onClick={event => this.props.onContextMenu(event, item)}>
 132                     <MoreVertIcon/>
 133                 </IconButton>
 134             </Grid>
 135
 136         contextMenuColumn = {
 137             name: "Actions",
 138             selected: true,
 139             configurable: false,
 140             key: "context-actions",
 141             render: this.renderContextMenuTrigger,
 142             width: "auto"
 143         };
 144     }
 145 );