[ARVADOS-WORKBENCH2] updated: 2.3.0-196-g155b2f60
Git user
git at public.arvados.org
Fri Mar 4 23:14:12 UTC 2022
Summary of changes:
.../collection-panel-files.tsx | 313 ++++++++++-----------
.../collection-panel/collection-panel-action.ts | 7 -
.../collection-panel-files-actions.ts | 1 -
.../collection-panel/collection-panel-reducer.ts | 4 -
src/views/collection-panel/collection-panel.tsx | 12 +-
5 files changed, 149 insertions(+), 188 deletions(-)
via 155b2f604436b40cad9ebdfda7de10fbf4f0b82d (commit)
via cb318710e49bbacbec31ffedbca49d2e336df8fa (commit)
via d76961538452f09f7a3a7dbcba0c99d17423d69d (commit)
from c231f58f53ab1576b7fda4233b4beea33c0d636a (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 155b2f604436b40cad9ebdfda7de10fbf4f0b82d
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Mar 4 20:10:41 2022 -0300
18787: Removes remaining traces of old big collection loading check.
This turned useless with the new file browser.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 9c36dfde..8590aac1 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -27,7 +27,6 @@ export interface CollectionPanelFilesProps {
items: any;
isWritable: boolean;
isLoading: boolean;
- tooManyFiles: boolean;
onUploadDataClick: () => void;
onSearchChange: (searchValue: string) => void;
onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
@@ -211,6 +210,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
const rightData = pathData[rightKey];
React.useEffect(() => {
+ console.log(' --> useEffect current UUID: ', props.currentItemUuid);
if (props.currentItemUuid) {
setPathData({});
setPath([props.currentItemUuid]);
@@ -244,6 +244,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
.then((requests) => {
const newState = requests.map((request, index) => {
if (request && request.responseXML != null) {
+ console.log(">>> got data for key", keyArray[index]);
const key = keyArray[index];
const result: any = extractFilesData(request.responseXML);
const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
@@ -272,6 +273,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
};
React.useEffect(() => {
+ console.log('---> useEffect rightKey', rightKey);
if (rightKey) {
fetchData(rightKey);
setLeftSearch('');
@@ -281,12 +283,14 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
const currentPDH = (collectionPanel.item || {}).portableDataHash;
React.useEffect(() => {
+ console.log('---> useEffect PDH change:', currentPDH);
if (currentPDH) {
fetchData([leftKey, rightKey], true);
}
}, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
React.useEffect(() => {
+ console.log('---> useEffect rightData:', rightData, dispatch, rightSearch);
if (rightData) {
const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
setCollectionFiles(filtered, false)(dispatch);
@@ -321,6 +325,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
);
React.useEffect(() => {
+ console.log('---> useEffect parentRef:', parentRef, handleRightClick);
let node = null;
if (parentRef && parentRef.current) {
@@ -421,6 +426,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
[props.onOptionsMenuOpen] // eslint-disable-line react-hooks/exhaustive-deps
);
+ console.log('---> render CollectionPanel <------');
return <div data-cy="collection-files-panel" onClick={handleClick} ref={parentRef}>
<div className={classes.pathPanel}>
<div className={classes.pathPanelPathWrapper}>
@@ -502,6 +508,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
<div className={classes.dataWrapper}>{ rightData && !isLoading
? <AutoSizer defaultHeight={500}>{({ height, width }) => {
const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+ console.log("Right Data: ", filtered);
return !!filtered.length
? <FixedSizeList height={height} itemCount={filtered.length}
diff --git a/src/store/collection-panel/collection-panel-action.ts b/src/store/collection-panel/collection-panel-action.ts
index c50ff6a8..55eb5949 100644
--- a/src/store/collection-panel/collection-panel-action.ts
+++ b/src/store/collection-panel/collection-panel-action.ts
@@ -3,9 +3,6 @@
// SPDX-License-Identifier: AGPL-3.0
import { Dispatch } from "redux";
-import {
- COLLECTION_PANEL_LOAD_FILES_THRESHOLD
-} from "./collection-panel-files/collection-panel-files-actions";
import { CollectionResource } from 'models/collection';
import { RootState } from "store/store";
import { ServiceRepository } from "services/services";
@@ -19,7 +16,6 @@ import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
export const collectionPanelActions = unionize({
SET_COLLECTION: ofType<CollectionResource>(),
LOAD_COLLECTION_SUCCESS: ofType<{ item: CollectionResource }>(),
- LOAD_BIG_COLLECTIONS: ofType<boolean>(),
});
export type CollectionPanelAction = UnionOf<typeof collectionPanelActions>;
@@ -33,9 +29,6 @@ export const loadCollectionPanel = (uuid: string, forceReload = false) =>
dispatch<any>(loadDetailsPanel(collection.uuid));
dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item: collection }));
dispatch(resourcesActions.SET_RESOURCES([collection]));
- if (collection.fileCount <= COLLECTION_PANEL_LOAD_FILES_THRESHOLD &&
- !getState().collectionPanel.loadBigCollections) {
- }
return collection;
};
diff --git a/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts b/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
index 71e1f6e8..da6cfeb0 100644
--- a/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
+++ b/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
@@ -30,7 +30,6 @@ export const collectionPanelFilesAction = unionize({
export type CollectionPanelFilesAction = UnionOf<typeof collectionPanelFilesAction>;
export const COLLECTION_PANEL_LOAD_FILES = 'collectionPanelLoadFiles';
-export const COLLECTION_PANEL_LOAD_FILES_THRESHOLD = 40000;
export const setCollectionFiles = (files, joinParents = true) => (dispatch: any) => {
const tree = createCollectionFilesTree(files, joinParents);
diff --git a/src/store/collection-panel/collection-panel-reducer.ts b/src/store/collection-panel/collection-panel-reducer.ts
index a6aa87bd..b9713f5d 100644
--- a/src/store/collection-panel/collection-panel-reducer.ts
+++ b/src/store/collection-panel/collection-panel-reducer.ts
@@ -7,12 +7,10 @@ import { CollectionResource } from "models/collection";
export interface CollectionPanelState {
item: CollectionResource | null;
- loadBigCollections: boolean;
}
const initialState = {
item: null,
- loadBigCollections: false,
};
export const collectionPanelReducer = (state: CollectionPanelState = initialState, action: CollectionPanelAction) =>
@@ -21,8 +19,6 @@ export const collectionPanelReducer = (state: CollectionPanelState = initialStat
SET_COLLECTION: (item) => ({
...state,
item,
- loadBigCollections: false,
}),
LOAD_COLLECTION_SUCCESS: ({ item }) => ({ ...state, item }),
- LOAD_BIG_COLLECTIONS: (loadBigCollections) => ({ ...state, loadBigCollections}),
});
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index dce8ef8f..7ca8f460 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -21,7 +21,7 @@ import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon
import { DetailsAttribute } from 'components/details-attribute/details-attribute';
import { CollectionResource, getCollectionUrl } from 'models/collection';
import { CollectionPanelFiles } from 'views-components/collection-panel-files/collection-panel-files';
-import { navigateToProcess, collectionPanelActions } from 'store/collection-panel/collection-panel-action';
+import { navigateToProcess } from 'store/collection-panel/collection-panel-action';
import { getResource } from 'store/resources/resources';
import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
import { formatDate, formatFileSize } from "common/formatters";
@@ -33,7 +33,7 @@ import { GroupResource } from 'models/group';
import { UserResource } from 'models/user';
import { getUserUuid } from 'common/getuser';
import { getProgressIndicator } from 'store/progress-indicator/progress-indicator-reducer';
-import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
+import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
import { Link } from 'react-router-dom';
import { Link as ButtonLink } from '@material-ui/core';
import { ResourceOwnerWithName, ResponsiblePerson } from 'views-components/data-explorer/renderers';
@@ -115,7 +115,6 @@ interface CollectionPanelDataProps {
isWritable: boolean;
isOldVersion: boolean;
isLoadingFiles: boolean;
- tooManyFiles: boolean;
}
type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
@@ -139,12 +138,11 @@ export const CollectionPanel = withStyles(styles)(
}
const loadingFilesIndicator = getProgressIndicator(COLLECTION_PANEL_LOAD_FILES)(state.progressIndicator);
const isLoadingFiles = (loadingFilesIndicator && loadingFilesIndicator!.working) || false;
- const tooManyFiles = (!state.collectionPanel.loadBigCollections && item && item.fileCount > COLLECTION_PANEL_LOAD_FILES_THRESHOLD) || false;
- return { item, isWritable, isOldVersion, isLoadingFiles, tooManyFiles };
+ return { item, isWritable, isOldVersion, isLoadingFiles };
})(
class extends React.Component<CollectionPanelProps> {
render() {
- const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
+ const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles } = this.props;
const panelsData: MPVPanelState[] = [
{name: "Details"},
{name: "Files"},
@@ -206,9 +204,7 @@ export const CollectionPanel = withStyles(styles)(
<CollectionPanelFiles
isWritable={isWritable}
isLoading={isLoadingFiles}
- tooManyFiles={tooManyFiles}
loadFilesFunc={() => {
- dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
dispatch<any>(loadCollectionFiles(this.props.item.uuid));
}
} />
commit cb318710e49bbacbec31ffedbca49d2e336df8fa
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Mar 4 19:22:19 2022 -0300
18787: Avoids doing useless webdav PROPFIND calls with empty strings as UUIDs.
This is a WIP, the console logging will be cleaned later.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 62cd5900..9c36dfde 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -218,9 +218,10 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
}, [props.currentItemUuid]);
const fetchData = (keys, ignoreCache = false) => {
+ console.log('---> fetchData', keys);
const keyArray = Array.isArray(keys) ? keys : [keys];
- Promise.all(keyArray
+ Promise.all(keyArray.filter(key => !!key)
.map((key) => {
const dataExists = !!pathData[key];
const runningRequest = pathPromise[key];
@@ -232,6 +233,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
pathPromise[key] = true;
+ console.log('>>> fetching data for key', key);
return webdavClient.propfind(`c=${key}`, webDAVRequestConfig);
}
@@ -239,34 +241,34 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
})
.filter((promise) => !!promise)
)
- .then((requests) => {
- const newState = requests.map((request, index) => {
- if (request && request.responseXML != null) {
- const key = keyArray[index];
- const result: any = extractFilesData(request.responseXML);
- const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
- if (n1.type === 'directory' && n2.type !== 'directory') {
- return -1;
- }
- if (n1.type !== 'directory' && n2.type === 'directory') {
- return 1;
- }
- return 0;
- });
-
- return { [key]: sortedResult };
- }
- return {};
- }).reduce((prev, next) => {
- return { ...next, ...prev };
- }, {});
-
- setPathData({ ...pathData, ...newState });
- })
- .finally(() => {
- setIsLoading(false);
- keyArray.forEach(key => delete pathPromise[key]);
- });
+ .then((requests) => {
+ const newState = requests.map((request, index) => {
+ if (request && request.responseXML != null) {
+ const key = keyArray[index];
+ const result: any = extractFilesData(request.responseXML);
+ const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
+ if (n1.type === 'directory' && n2.type !== 'directory') {
+ return -1;
+ }
+ if (n1.type !== 'directory' && n2.type === 'directory') {
+ return 1;
+ }
+ return 0;
+ });
+
+ return { [key]: sortedResult };
+ }
+ return {};
+ }).reduce((prev, next) => {
+ return { ...next, ...prev };
+ }, {});
+
+ setPathData({ ...pathData, ...newState });
+ })
+ .finally(() => {
+ setIsLoading(false);
+ keyArray.forEach(key => delete pathPromise[key]);
+ });
};
React.useEffect(() => {
@@ -459,6 +461,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
return !!filtered.length
? <FixedSizeList height={height} itemCount={filtered.length}
itemSize={35} width={width}>{ ({ index, style }) => {
+ console.log("Left Data ROW: ", filtered[index]);
const { id, type, name } = filtered[index];
return <div data-id={id} style={style} data-item="true"
@@ -503,6 +506,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
return !!filtered.length
? <FixedSizeList height={height} itemCount={filtered.length}
itemSize={35} width={width}>{ ({ index, style }) => {
+ console.log("Right Data ROW: ", filtered[index]);
const { id, type, name, size } = filtered[index];
return <div style={style} data-id={id} data-item="true"
commit d76961538452f09f7a3a7dbcba0c99d17423d69d
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Mar 4 18:51:50 2022 -0300
18787: Attempts to diminish the indentation madness, improving readability.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 1f7e8603..62cd5900 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -419,149 +419,115 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
[props.onOptionsMenuOpen] // eslint-disable-line react-hooks/exhaustive-deps
);
- return (
- <div data-cy="collection-files-panel" onClick={handleClick} ref={parentRef}>
- <div className={classes.pathPanel}>
- <div className={classes.pathPanelPathWrapper}>
- {
- path
- .map((p: string, index: number) => <span
- key={`${index}-${p}`}
- data-item="true"
- className={classes.pathPanelItem}
- data-breadcrumb-path={p}
- >
- <span className={classes.rowActive}>{index === 0 ? 'Home' : p}</span> <b>/</b>
- </span>)
- }
- </div>
- <Tooltip className={classes.pathPanelMenu} title="More options" disableFocusListener>
- <IconButton
- data-cy='collection-files-panel-options-btn'
- onClick={(ev) => {
- onOptionsMenuOpen(ev, isWritable);
- }}>
- <CustomizeTableIcon />
+ return <div data-cy="collection-files-panel" onClick={handleClick} ref={parentRef}>
+ <div className={classes.pathPanel}>
+ <div className={classes.pathPanelPathWrapper}>
+ { path.map((p: string, index: number) => <span
+ key={`${index}-${p}`}
+ data-item="true"
+ className={classes.pathPanelItem}
+ data-breadcrumb-path={p}
+ >
+ <span className={classes.rowActive}>{index === 0 ? 'Home' : p}</span> <b>/</b>
+ </span>) }
+ </div>
+ <Tooltip className={classes.pathPanelMenu} title="More options" disableFocusListener>
+ <IconButton
+ data-cy='collection-files-panel-options-btn'
+ onClick={(ev) => {
+ onOptionsMenuOpen(ev, isWritable);
+ }}>
+ <CustomizeTableIcon />
+ </IconButton>
+ </Tooltip>
+ </div>
+ <div className={classes.wrapper}>
+ <div className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)}>
+ <Tooltip title="Go back" className={path.length > 1 ? classes.backButton : classes.backButtonHidden}>
+ <IconButton onClick={() => setPath([...path.slice(0, path.length -1)])}>
+ <BackIcon />
</IconButton>
</Tooltip>
+ <div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
+ <SearchInput selfClearProp={leftKey} label="Search" value={leftSearch} onSearch={setLeftSearch} />
+ </div>
+ <div className={classes.dataWrapper}>
+ { leftData
+ ? <AutoSizer defaultWidth={0}>{ ({ height, width }) => {
+ const filtered = leftData.filter(({ name }) => name.indexOf(leftSearch) > -1);
+
+ return !!filtered.length
+ ? <FixedSizeList height={height} itemCount={filtered.length}
+ itemSize={35} width={width}>{ ({ index, style }) => {
+ const { id, type, name } = filtered[index];
+
+ return <div data-id={id} style={style} data-item="true"
+ data-type={type} data-parent-path={name} key={id}
+ className={classNames(classes.row, getActiveClass(name))}>
+ { getItemIcon(type, getActiveClass(name)) }
+ <div className={classes.rowName}>
+ {name}
+ </div>
+ { getActiveClass(name)
+ ? <SidePanelRightArrowIcon style={{
+ display: 'inline',
+ marginTop: '5px',
+ marginLeft: '5px' }} />
+ : null }
+ </div>;
+ } }</FixedSizeList>
+ : <div className={classes.rowEmpty}>No directories available</div>
+ } }</AutoSizer>
+ : <div className={classes.row}>
+ <CircularProgress className={classes.loader} size={30} />
+ </div> }
+ </div>
</div>
- <div className={classes.wrapper}>
- <div className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)}>
- <Tooltip title="Go back" className={path.length > 1 ? classes.backButton : classes.backButtonHidden}>
- <IconButton onClick={() => setPath([...path.slice(0, path.length -1)])}>
- <BackIcon />
- </IconButton>
- </Tooltip>
- <div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
- <SearchInput selfClearProp={leftKey} label="Search" value={leftSearch} onSearch={setLeftSearch} />
- </div>
- <div className={classes.dataWrapper}>
- {
- leftData ?
- <AutoSizer defaultWidth={0}>
- {({ height, width }) => {
- const filtered = leftData.filter(({ name }) => name.indexOf(leftSearch) > -1);
-
- return !!filtered.length ? <FixedSizeList
- height={height}
- itemCount={filtered.length}
- itemSize={35}
- width={width}
- >
- {
- ({ index, style }) => {
- const { id, type, name } = filtered[index];
-
- return <div
- data-id={id}
- style={style}
- data-item="true"
- data-type={type}
- data-parent-path={name}
- className={classNames(classes.row, getActiveClass(name))}
- key={id}>
- {getItemIcon(type, getActiveClass(name))}
- <div className={classes.rowName}>
- {name}
- </div>
- {
- getActiveClass(name) ? <SidePanelRightArrowIcon
- style={{ display: 'inline', marginTop: '5px', marginLeft: '5px' }} /> : null
- }
- </div>;
- }
- }
- </FixedSizeList> : <div className={classes.rowEmpty}>No directories available</div>
- }}
- </AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
- }
-
- </div>
+ <div className={classes.rightPanel}>
+ <div className={classes.searchWrapper}>
+ <SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
</div>
- <div className={classes.rightPanel}>
- <div className={classes.searchWrapper}>
- <SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
- </div>
- {
- isWritable &&
- <Button
- className={classes.uploadButton}
- data-cy='upload-button'
- onClick={() => {
- onUploadDataClick();
- }}
- variant='contained'
- color='primary'
- size='small'>
- <DownloadIcon className={classes.uploadIcon} />
- Upload data
- </Button>
- }
- <div className={classes.dataWrapper}>
- {
- rightData && !isLoading ?
- <AutoSizer defaultHeight={500}>
- {({ height, width }) => {
- const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
-
- return !!filtered.length ? <FixedSizeList
- height={height}
- itemCount={filtered.length}
- itemSize={35}
- width={width}
- >
- {
- ({ index, style }) => {
- const { id, type, name, size } = filtered[index];
-
- return <div
- style={style}
- data-id={id}
- data-item="true"
- data-type={type}
- data-subfolder-path={name}
- className={classes.row} key={id}>
- <Checkbox
- color="primary"
- className={classes.rowSelection}
- checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
- />
- {getItemIcon(type, null)} <div className={classes.rowName}>
- {name}
- </div>
- <span className={classes.rowName} style={{ marginLeft: 'auto', marginRight: '1rem' }}>
- {formatFileSize(size)}
- </span>
- </div>
- }
- }
- </FixedSizeList> : <div className={classes.rowEmpty}>This collection is empty</div>
- }}
- </AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
- }
- </div>
+ { isWritable &&
+ <Button className={classes.uploadButton} data-cy='upload-button'
+ onClick={() => {
+ onUploadDataClick();
+ }}
+ variant='contained' color='primary' size='small'>
+ <DownloadIcon className={classes.uploadIcon} />
+ Upload data
+ </Button> }
+ <div className={classes.dataWrapper}>{ rightData && !isLoading
+ ? <AutoSizer defaultHeight={500}>{({ height, width }) => {
+ const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+
+ return !!filtered.length
+ ? <FixedSizeList height={height} itemCount={filtered.length}
+ itemSize={35} width={width}>{ ({ index, style }) => {
+ const { id, type, name, size } = filtered[index];
+
+ return <div style={style} data-id={id} data-item="true"
+ data-type={type} data-subfolder-path={name}
+ className={classes.row} key={id}>
+ <Checkbox color="primary"
+ className={classes.rowSelection}
+ checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
+ />
+ {getItemIcon(type, null)}
+ <div className={classes.rowName}>
+ {name}
+ </div>
+ <span className={classes.rowName} style={{
+ marginLeft: 'auto', marginRight: '1rem' }}>
+ { formatFileSize(size) }
+ </span>
+ </div>
+ } }</FixedSizeList>
+ : <div className={classes.rowEmpty}>This collection is empty</div>
+ }}</AutoSizer>
+ : <div className={classes.row}>
+ <CircularProgress className={classes.loader} size={30} />
+ </div> }
</div>
</div>
</div>
- );
-}));
+ </div>}));
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list