[ARVADOS-WORKBENCH2] updated: 1.4.1-371-g159c84a1
Git user
git at public.arvados.org
Fri Jun 26 20:29:07 UTC 2020
Summary of changes:
src/components/file-tree/file-tree.tsx | 3 +-
src/components/tree/tree.tsx | 2 -
src/components/tree/virtual-tree.tsx | 59 ++++++++++++----------
src/models/tree.ts | 2 -
.../collection-panel-files-actions.ts | 10 ----
.../collection-panel-files.ts | 38 +++-----------
6 files changed, 41 insertions(+), 73 deletions(-)
via 159c84a15b7739c02dc4bc0d9626b515e8426b92 (commit)
from 8edacc9b2dac6520ace9a2d420979bbeb5558a6f (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 159c84a15b7739c02dc4bc0d9626b515e8426b92
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Fri Jun 26 17:25:10 2020 -0300
15610: Adds behaviors like the original Tree, and max height on VirtualTree.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/components/file-tree/file-tree.tsx b/src/components/file-tree/file-tree.tsx
index b5d98c08..d4b47be9 100644
--- a/src/components/file-tree/file-tree.tsx
+++ b/src/components/file-tree/file-tree.tsx
@@ -4,7 +4,7 @@
import * as React from "react";
import { TreeItem, TreeItemStatus } from "../tree/tree";
-import { VirtualTree as Tree } from "../tree/virtual-tree";
+import { VirtualTree } from "../tree/virtual-tree";
import { FileTreeData } from "./file-tree-data";
import { FileTreeItem } from "./file-tree-item";
@@ -17,6 +17,7 @@ export interface FileTreeProps {
currentItemUuid?: string;
}
+const Tree = VirtualTree(20);
export class FileTree extends React.Component<FileTreeProps> {
render() {
return <Tree
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 28833b85..76fbf011 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -79,8 +79,6 @@ export interface TreeItem<T> {
selected?: boolean;
status: TreeItemStatus;
items?: Array<TreeItem<T>>;
- itemCount?: number;
- level?: number;
}
export interface TreeProps<T> {
diff --git a/src/components/tree/virtual-tree.tsx b/src/components/tree/virtual-tree.tsx
index 467969fa..9330fbe5 100644
--- a/src/components/tree/virtual-tree.tsx
+++ b/src/components/tree/virtual-tree.tsx
@@ -13,6 +13,7 @@ import { ArvadosTheme } from '~/common/custom-theme';
import { TreeItem, TreeProps, TreeItemStatus } from './tree';
import { ListItem, Radio, Checkbox, CircularProgress, ListItemIcon } from '@material-ui/core';
import { SidePanelRightArrowIcon } from '../icon/icon';
+import { min } from 'lodash';
type CssRules = 'list'
| 'listItem'
@@ -71,35 +72,35 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
}
});
-// export const RowA = <T, _>(items: TreeItem<T>[], render:any) => (index: number) => {
-// return <div>
-// {render(items[index])}
-// </div>;
-// };
+export interface VirtualTreeItem<T> extends TreeItem<T> {
+ itemCount?: number;
+ level?: number;
+}
// For some reason, on TSX files it isn't accepted just one generic param, so
// I'm using <T, _> as a workaround.
-export const Row = <T, _>(itemList: TreeItem<T>[], render: any) => withStyles(styles)(
- (props: React.PropsWithChildren<ListChildComponentProps> & TreeProps<T> & WithStyles<CssRules>) => {
- const { index, style } = props;
+export const Row = <T, _>(itemList: VirtualTreeItem<T>[], render: any, treeProps: TreeProps<T>) => withStyles(styles)(
+ (props: React.PropsWithChildren<ListChildComponentProps> & WithStyles<CssRules>) => {
+ const { index, style, classes } = props;
const it = itemList[index];
const level = it.level || 0;
- const { classes, toggleItemActive, disableRipple, currentItemUuid, useRadioButtons } = props;
+ const { toggleItemActive, disableRipple, currentItemUuid, useRadioButtons } = treeProps;
const { listItem, loader, toggableIconContainer, renderContainer } = classes;
- const { levelIndentation = 20, itemRightPadding = 20 } = props;
+ const { levelIndentation = 20, itemRightPadding = 20 } = treeProps;
- const showSelection = typeof props.showSelection === 'function'
- ? props.showSelection
- : () => props.showSelection ? true : false;
+ const showSelection = typeof treeProps.showSelection === 'function'
+ ? treeProps.showSelection
+ : () => treeProps.showSelection ? true : false;
- const handleRowContextMenu = (item: TreeItem<T>) =>
- (event: React.MouseEvent<HTMLElement>) =>
- props.onContextMenu(event, item);
+ const handleRowContextMenu = (item: VirtualTreeItem<T>) =>
+ (event: React.MouseEvent<HTMLElement>) => {
+ treeProps.onContextMenu(event, item);
+ };
- const handleToggleItemOpen = (item: TreeItem<T>) =>
+ const handleToggleItemOpen = (item: VirtualTreeItem<T>) =>
(event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation();
- props.toggleItemOpen(event, item);
+ treeProps.toggleItemOpen(event, item);
};
const getToggableIconClassNames = (isOpen?: boolean, isActive?: boolean) => {
@@ -120,8 +121,8 @@ export const Row = <T, _>(itemList: TreeItem<T>[], render: any) => withStyles(s
return isSidePanelIconNotNeeded(status, itemCount) ? <span /> : <SidePanelRightArrowIcon style={{ fontSize: '14px' }} />;
};
- const handleCheckboxChange = (item: TreeItem<T>) => {
- const { toggleItemSelection } = props;
+ const handleCheckboxChange = (item: VirtualTreeItem<T>) => {
+ const { toggleItemSelection } = treeProps;
return toggleItemSelection
? (event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation();
@@ -166,24 +167,30 @@ export const Row = <T, _>(itemList: TreeItem<T>[], render: any) => withStyles(s
</div>;
});
-export const VirtualList = <T, _>(height: number, width: number, items: TreeItem<T>[], render: any) =>
+const itemSize = 30;
+
+export const VirtualList = <T, _>(height: number, width: number, items: VirtualTreeItem<T>[], render: any, treeProps: TreeProps<T>) =>
<FixedSizeList
height={height}
itemCount={items.length}
- itemSize={30}
+ itemSize={itemSize}
width={width}
>
- {Row(items, render)}
+ {Row(items, render, treeProps)}
</FixedSizeList>;
-export const VirtualTree = withStyles(styles)(
+export const VirtualTree = (maxElements: number) => withStyles(styles)(
class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
render(): ReactElement<any> {
const { items, render } = this.props;
- return <div className={this.props.classes.virtualizedList}><AutoSizer>
+ // Virtual list viewport's maximum height
+ const itemsQty = items && items.length || 0;
+ const viewportHeight = min([itemsQty, maxElements])! * itemSize;
+
+ return <div style={{height: viewportHeight}}><AutoSizer>
{({ height, width }) => {
- return VirtualList(height, width, items || [], render);
+ return VirtualList(height, width, items || [], render, this.props);
}}
</AutoSizer></div>;
}
diff --git a/src/models/tree.ts b/src/models/tree.ts
index 69224059..c7713cbc 100644
--- a/src/models/tree.ts
+++ b/src/models/tree.ts
@@ -16,7 +16,6 @@ export interface TreeNode<T = any> {
selected: boolean;
expanded: boolean;
status: TreeNodeStatus;
- level?: number;
}
export enum TreeNodeStatus {
@@ -194,7 +193,6 @@ export const initTreeNode = <T>(data: Pick<TreeNode<T>, 'id' | 'value'> & { pare
expanded: false,
status: TreeNodeStatus.INITIAL,
parent: '',
- level: 0,
...data,
});
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 175a8cef..204d4c0e 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
@@ -31,25 +31,15 @@ export const COLLECTION_PANEL_LOAD_FILES_THRESHOLD = 40000;
export const loadCollectionFiles = (uuid: string) =>
async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- let step = Date.now();
dispatch(progressIndicatorActions.START_WORKING(COLLECTION_PANEL_LOAD_FILES));
const files = await services.collectionService.files(uuid);
- console.log('Get files: ', (Date.now()-step)/1000);
// Given the array of directories and files, create the appropriate tree nodes,
// sort them, and add the complete url to each.
- step = Date.now();
const tree = createCollectionFilesTree(files);
- console.log('Create tree: ', (Date.now()-step)/1000);
- step = Date.now();
const sorted = sortFilesTree(tree);
- console.log('Sort tree: ', (Date.now()-step)/1000);
- step = Date.now();
const mapped = mapTreeValues(services.collectionService.extendFileURL)(sorted);
- console.log('Add URL: ', (Date.now()-step)/1000);
- step = Date.now();
dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES(mapped));
- console.log('Dispatch: ', (Date.now()-step)/1000);
dispatch(progressIndicatorActions.STOP_WORKING(COLLECTION_PANEL_LOAD_FILES));
};
diff --git a/src/views-components/collection-panel-files/collection-panel-files.ts b/src/views-components/collection-panel-files/collection-panel-files.ts
index 3cc3569d..79970003 100644
--- a/src/views-components/collection-panel-files/collection-panel-files.ts
+++ b/src/views-components/collection-panel-files/collection-panel-files.ts
@@ -8,7 +8,8 @@ import {
CollectionPanelFilesProps
} from "~/components/collection-panel-files/collection-panel-files";
import { RootState } from "~/store/store";
-import { TreeItem, TreeItemStatus } from "~/components/tree/tree";
+import { TreeItemStatus } from "~/components/tree/tree";
+import { VirtualTreeItem as TreeItem } from "~/components/tree/virtual-tree";
import {
CollectionPanelDirectory,
CollectionPanelFile,
@@ -75,10 +76,9 @@ const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps,
},
});
-
export const CollectionPanelFiles = connect(memoizedMapStateToProps(), mapDispatchToProps)(Component);
-export const collectionItemToList = (level: number) => (tree: Tree<CollectionPanelDirectory | CollectionPanelFile>) =>
+const collectionItemToList = (level: number) => (tree: Tree<CollectionPanelDirectory | CollectionPanelFile>) =>
(id: string): TreeItem<FileTreeData>[] => {
const node: TreeNode<CollectionPanelDirectory | CollectionPanelFile> = getNode(id)(tree) || initTreeNode({
id: '',
@@ -107,38 +107,12 @@ export const collectionItemToList = (level: number) => (tree: Tree<CollectionPan
level,
};
- const treeItemChilds = [].concat.apply([], node.children.map(collectionItemToList(level+1)(tree)));
+ const treeItemChilds = treeItem.open
+ ? [].concat.apply([], node.children.map(collectionItemToList(level+1)(tree)))
+ : [];
return [
treeItem,
...treeItemChilds,
];
};
-
-const collectionItemToTreeItem = (tree: Tree<CollectionPanelDirectory | CollectionPanelFile>) =>
- (id: string): TreeItem<FileTreeData> => {
- const node: TreeNode<CollectionPanelDirectory | CollectionPanelFile> = getNode(id)(tree) || initTreeNode({
- id: '',
- parent: '',
- value: {
- ...createCollectionDirectory({ name: 'Invalid file' }),
- selected: false,
- collapsed: true
- }
- });
- return {
- active: false,
- data: {
- name: node.value.name,
- size: node.value.type === CollectionFileType.FILE ? node.value.size : undefined,
- type: node.value.type,
- url: node.value.url,
- },
- id: node.id,
- items: getNodeChildrenIds(node.id)(tree)
- .map(collectionItemToTreeItem(tree)),
- open: node.value.type === CollectionFileType.DIRECTORY ? !node.value.collapsed : false,
- selected: node.value.selected,
- status: TreeItemStatus.LOADED
- };
- };
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list