Skip to content

Commit 2026f39

Browse files
ddelpianoddelpiano
committed
#435 restoring old tree component for the file browser
1 parent f553e70 commit 2026f39

4 files changed

Lines changed: 245 additions & 2 deletions

File tree

‎webapp/components/general/FileBrowser.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import Tree from '@metacell/geppetto-meta-ui/tree-viewer/Tree';
32
import Button from '@material-ui/core/Button';
43
import { changeNodeAtPath, walk } from 'react-sortable-tree';
54
import Dialog from '@material-ui/core/Dialog';
@@ -10,6 +9,7 @@ import DialogContent from '@material-ui/core/DialogContent';
109
import { Tooltip } from 'netpyne/components';
1110
import IconButton from '@material-ui/core/IconButton';
1211
import Icon from '@material-ui/core/Icon';
12+
import Tree from './tree/Tree';
1313

1414
import Utils from '../../Utils';
1515
import { bgLight, fontColor } from '../../theme';

‎webapp/components/general/tree/Tree.js‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import React from 'react';
2+
3+
var SortableTree = require('react-sortable-tree').default;
4+
var toggleExpandedForAll = require('react-sortable-tree').toggleExpandedForAll;
5+
var changeNodeAtPath = require('react-sortable-tree').changeNodeAtPath;
6+
var walk = require('react-sortable-tree').walk;
7+
require('./Tree.less');
8+
9+
export default class Tree extends React.Component {
10+
constructor (props) {
11+
super(props);
12+
13+
this.updateTreeData = this.updateTreeData.bind(this);
14+
this.expandAll = this.expandAll.bind(this);
15+
this.collapseAll = this.collapseAll.bind(this);
16+
this.state = { treeData: this.props.treeData };
17+
}
18+
19+
updateTreeData(treeData) {
20+
this.setState({ treeData });
21+
}
22+
23+
expand(expanded) {
24+
this.setState({
25+
treeData: toggleExpandedForAll({
26+
treeData: this.state.treeData,
27+
expanded,
28+
}),
29+
});
30+
}
31+
32+
expandAll() {
33+
this.expand(true);
34+
}
35+
36+
collapseAll() {
37+
this.expand(false);
38+
}
39+
40+
handleClick(event, rowInfo) {
41+
var toggleMode = this.props.toggleMode;
42+
var currentTreeData = this.state.treeData;
43+
// If node has children, we expand/collapse the node
44+
if (
45+
rowInfo.node.children != undefined &&
46+
rowInfo.node.children.length > 0
47+
) {
48+
// If parents can be activate, iterate over the whole tree
49+
if (this.props.activateParentsNodeOnClick) {
50+
walk({
51+
treeData: currentTreeData,
52+
getNodeKey: ({ treeIndex }) => treeIndex,
53+
ignoreCollapsed: true,
54+
callback: (rowInfoIter) => {
55+
var isActive = rowInfoIter.treeIndex == rowInfo.treeIndex;
56+
/*
57+
* If toggleMode just toggle to activate/inactivate selected node and expand/collapse
58+
* If non toggle mode inactive all nodes but selected and expand/collapse
59+
*/
60+
if (isActive && toggleMode) {
61+
rowInfoIter.node.active = !rowInfoIter.node.active;
62+
rowInfoIter.node.expanded = !rowInfoIter.node.expanded;
63+
currentTreeData = changeNodeAtPath({
64+
treeData: currentTreeData,
65+
path: rowInfoIter.path,
66+
newNode: rowInfoIter.node,
67+
getNodeKey: ({ treeIndex }) => treeIndex,
68+
ignoreCollapsed: true,
69+
});
70+
} else if (isActive && !toggleMode) {
71+
rowInfoIter.node.active = isActive;
72+
rowInfoIter.node.expanded = !rowInfoIter.node.expanded;
73+
currentTreeData = changeNodeAtPath({
74+
treeData: currentTreeData,
75+
path: rowInfoIter.path,
76+
newNode: rowInfoIter.node,
77+
getNodeKey: ({ treeIndex }) => treeIndex,
78+
ignoreCollapsed: true,
79+
});
80+
} else if (isActive != rowInfoIter.node.active && !toggleMode) {
81+
rowInfoIter.node.active = isActive;
82+
currentTreeData = changeNodeAtPath({
83+
treeData: currentTreeData,
84+
path: rowInfoIter.path,
85+
newNode: rowInfoIter.node,
86+
getNodeKey: ({ treeIndex }) => treeIndex,
87+
ignoreCollapsed: true,
88+
});
89+
}
90+
},
91+
});
92+
} else {
93+
rowInfo.node.expanded = !rowInfo.node.expanded;
94+
currentTreeData = changeNodeAtPath({
95+
treeData: currentTreeData,
96+
path: rowInfo.path,
97+
newNode: rowInfo.node,
98+
getNodeKey: ({ treeIndex }) => treeIndex,
99+
ignoreCollapsed: true,
100+
});
101+
}
102+
} else if (rowInfo.node.children == undefined) {
103+
// If node has no children, we select the node
104+
walk({
105+
treeData: currentTreeData,
106+
getNodeKey: ({ treeIndex }) => treeIndex,
107+
ignoreCollapsed: true,
108+
callback: (rowInfoIter) => {
109+
var isActive = rowInfoIter.treeIndex == rowInfo.treeIndex;
110+
/*
111+
* If toggleMode just toggle to activate/inactivate selected node
112+
* If non toggle mode inactive all nodes but selected
113+
*/
114+
if (isActive && toggleMode) {
115+
rowInfoIter.node.active = !rowInfoIter.node.active;
116+
currentTreeData = changeNodeAtPath({
117+
treeData: currentTreeData,
118+
path: rowInfoIter.path,
119+
newNode: rowInfoIter.node,
120+
getNodeKey: ({ treeIndex }) => treeIndex,
121+
ignoreCollapsed: true,
122+
});
123+
} else if (isActive != rowInfoIter.node.active && !toggleMode) {
124+
rowInfoIter.node.active = isActive;
125+
currentTreeData = changeNodeAtPath({
126+
treeData: currentTreeData,
127+
path: rowInfoIter.path,
128+
newNode: rowInfoIter.node,
129+
getNodeKey: ({ treeIndex }) => treeIndex,
130+
ignoreCollapsed: true,
131+
});
132+
}
133+
},
134+
});
135+
}
136+
137+
// Update tree with latest changes
138+
this.updateTreeData(currentTreeData);
139+
140+
// If there is a callback, we use it
141+
if (this.props.handleClick != undefined) {
142+
this.props.handleClick(event, rowInfo);
143+
}
144+
}
145+
146+
getNodeProps(rowInfo) {
147+
var nodeProps = {};
148+
nodeProps['onClick'] = (event) => this.handleClick(event, rowInfo);
149+
150+
if (this.props.getButtons !== undefined) {
151+
nodeProps['buttons'] = this.props.getButtons(rowInfo);
152+
}
153+
if (rowInfo.node.instance !== undefined) {
154+
nodeProps['style'] = { cursor: 'pointer' };
155+
}
156+
if (rowInfo.node.active) {
157+
nodeProps['className'] = 'activeNode';
158+
}
159+
if (this.props.getNodesProps !== undefined) {
160+
nodeProps['title'] = this.props.getNodesProps(rowInfo);
161+
}
162+
return nodeProps;
163+
}
164+
165+
render() {
166+
var onlyExpandSearchedNodes =
167+
this.props.searchQuery !== undefined && this.props.searchQuery !== null;
168+
return (
169+
<div
170+
key={this.props.id + '_component'}
171+
id={this.props.id + '_component'}
172+
className="treeViewer"
173+
style={this.props.style}
174+
>
175+
{this.props.controls ? this.props.controls : null}
176+
<SortableTree
177+
style={this.props.style}
178+
treeData={this.state.treeData}
179+
canDrag={false}
180+
rowHeight={this.props.rowHeight}
181+
scaffoldBlockPxWidth={22}
182+
generateNodeProps={(rowInfo) => this.getNodeProps(rowInfo)}
183+
onChange={(treeData) => this.updateTreeData(treeData)}
184+
searchQuery={
185+
this.props.searchQuery !== undefined ? this.props.searchQuery : null
186+
}
187+
onlyExpandSearchedNodes={
188+
this.props.onlyExpandSearchedNodes !== undefined
189+
? this.props.onlyExpandSearchedNodes
190+
: false
191+
}
192+
/>
193+
</div>
194+
);
195+
}
196+
};

‎webapp/components/general/tree/Tree.less‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.treeViewer {
2+
height: 100%;
3+
}
4+
.rst__tree {
5+
height:100%;
6+
}
7+
.rst__rowTitleWithSubtitle{
8+
height: initial;
9+
}
10+
.rst__rowContents{
11+
background: #2e2a2a;
12+
border: 0px;
13+
color: #e9e9e9;
14+
min-width: 160px;
15+
}
16+
17+
.rst__lineChildren:after {
18+
background-color: white;
19+
}
20+
21+
.rst__lineBlock:before,
22+
.rst__lineBlock:after {
23+
background-color: white;
24+
}
25+
26+
.rst__rowWrapper {
27+
padding: 3px 10px 2px 0;
28+
}
29+
30+
.rst__collapseButton,
31+
.rst__expandButton {
32+
box-shadow: 0 0 0 1px #FFF;
33+
width: 12px;
34+
height: 12px;
35+
}
36+
37+
.rst__collapseButton:hover:not(:active),
38+
.rst__expandButton:hover:not(:active){
39+
width: 12px;
40+
height: 12px;
41+
background-size: initial;
42+
}
43+
44+
.rst__collapseButton:focus,
45+
.rst__expandButton:focus{
46+
box-shadow: 0 0 0 1px #FFF, 0 0 1px 3px #83bef9;
47+
}

‎webapp/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"react-dom": "^16.4.0",
3535
"react-json-view": "^1.21.3",
3636
"react-redux": "^7.2.0",
37-
"react-sortable-tree": "^2.8.0",
37+
"react-sortable-tree": "^2.6.2",
3838
"redux": "^4.1.0",
3939
"sass": "^1.49.0",
4040
"sass-loader": "^7.2.0",

0 commit comments

Comments
 (0)