Skip to content

Commit e8b8a19

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Refactor dependencies to parse file on select
1 parent d384ef2 commit e8b8a19

23 files changed

Lines changed: 609 additions & 784 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"copy-text-to-clipboard": "^1.0.4",
2525
"css-loader": "^0.28.11",
2626
"d3-flextree": "^2.1.1",
27+
"dependency-tree": "^6.3.0",
2728
"directory-tree": "^2.1.0",
2829
"http-server": "^0.11.1",
2930
"js2flowchart": "^1.1.7",
@@ -49,7 +50,7 @@
4950
"babel-loader": "^8.0.4",
5051
"babel-plugin-import": "^1.9.1",
5152
"node-sass": "^4.9.3",
52-
"nodemon": "^1.17.3",
53+
"nodemon": "^1.18.7",
5354
"prettier": "^1.14.0",
5455
"sass-loader": "^7.1.0",
5556
"webpack": "^4.20.2",

‎src/public/dist/bundle.js‎

Lines changed: 198 additions & 327 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/dist/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/js/components/dataBus/store/actions.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const selectNode = fileNode => (dispatch, getState) => {
2222
const { checkedState } = viewSwitches;
2323

2424
// TODO: if sidebar opens - fetch code for selected node
25-
if (!checkedState.sideBar) {
25+
if (!checkedState.sideBar && !checkedState.dependencies) {
2626
return dispatch({
2727
type: ACTIONS.SELECT_NODE,
2828
payload: fileNode
@@ -94,7 +94,7 @@ export const selectCodeCrumbedFlow = flow => (dispatch, getState) => {
9494
export const calcFilesTreeLayoutNodes = () => (dispatch, getState) => {
9595
const state = getState();
9696
const {
97-
filesTree,
97+
sourceTree,
9898
openedFolders,
9999
activeItemsMap,
100100
codeCrumbedFlowsMap,
@@ -103,7 +103,7 @@ export const calcFilesTreeLayoutNodes = () => (dispatch, getState) => {
103103
} = state.dataBus;
104104
const { checkedState } = state.viewSwitches;
105105

106-
if (!filesTree) return;
106+
if (!sourceTree) return;
107107

108108
let activeCodeCrumbs = undefined;
109109
if (checkedState.codeCrumbsKeepOnlySelectedFlow && codeCrumbedFlowsMap[selectedCrumbedFlowKey]) {
@@ -116,7 +116,7 @@ export const calcFilesTreeLayoutNodes = () => (dispatch, getState) => {
116116

117117
return dispatch({
118118
type: ACTIONS.UPDATE_FILES_TREE_LAYOUT_NODES,
119-
payload: getTreeLayout(filesTree, {
119+
payload: getTreeLayout(sourceTree, {
120120
includeFileChildren: checkedState.codeCrumbs && !checkedState.codeCrumbsMinimize,
121121
openedFolders,
122122
activeItemsMap,
@@ -147,22 +147,23 @@ export const setActiveItems = (filesList, foldersMap = {}) => (dispatch, getStat
147147
// TODO: refactor too long does too much
148148
export const updateFoldersByActiveChildren = () => (dispatch, getState) => {
149149
const state = getState();
150+
150151
const {
151152
filesMap,
152-
filteredDependenciesAllModulesMap,
153153
openedFolders,
154154
selectedNode,
155155
codeCrumbedFlowsMap,
156156
selectedCrumbedFlowKey
157157
} = state.dataBus;
158+
158159
const {
159160
dependencies,
160161
codeCrumbs,
161162
sourceKeepOnlyActiveItems,
162163
codeCrumbsKeepOnlySelectedFlow
163164
} = state.viewSwitches.checkedState;
164165

165-
const depFilePaths = dependencies ? Object.keys(filteredDependenciesAllModulesMap) : [];
166+
const depFilePaths = dependencies ? Object.keys(selectedNode.dependencies || {}) : [];
166167
let ccFilePaths = codeCrumbs
167168
? Object.keys(filesMap).filter(path => filesMap[path].hasCodecrumbs)
168169
: [];

‎src/public/js/components/dataBus/store/reducer.js‎

Lines changed: 4 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,15 @@ import { getFileNodesMap } from 'utils/treeLayout';
44
import { FOLDER_OPEN_STATE } from 'utils/constants';
55

66
const DefaultState = {
7-
filesTree: null,
7+
sourceTree: null,
88
filesMap: null,
9-
dependenciesMap: null,
9+
foldersMap: null,
1010

11-
filesTreeLayoutNodes: null,
1211
openedFolders: {},
1312
fileNodesMap: {},
14-
filteredDependenciesList: [],
15-
filteredDependenciesMap: {},
16-
filteredDependenciesAllModulesMap: {},
17-
1813
codeCrumbedFlowsMap: {},
14+
15+
filesTreeLayoutNodes: null,
1916
activeItemsMap: {}
2017
};
2118

@@ -135,12 +132,6 @@ export default (state = DefaultState, action) => {
135132
return {
136133
...state,
137134
dependenciesEntryPoint: depEntryPoint,
138-
...getFilteredDependencies({
139-
//TODO: perf?
140-
dependenciesMap: state.dependenciesMap,
141-
dependenciesEntryPoint: depEntryPoint,
142-
dependenciesShowDirectOnly: action.payload.dependenciesShowDirectOnly
143-
}),
144135
selectedDependencyEdgeNodes: null
145136
};
146137

@@ -156,74 +147,3 @@ export default (state = DefaultState, action) => {
156147
return state;
157148
}
158149
};
159-
160-
export const getFilteredDependencies = ({
161-
dependenciesMap,
162-
dependenciesEntryPoint,
163-
dependenciesShowDirectOnly
164-
}) => {
165-
if (!dependenciesEntryPoint) {
166-
return {
167-
filteredDependenciesList: [],
168-
filteredDependenciesMap: {},
169-
filteredDependenciesAllModulesMap: {}
170-
};
171-
}
172-
173-
let filteredDependenciesList, filteredDependenciesMap;
174-
175-
if (dependenciesShowDirectOnly) {
176-
const depEntryNode = dependenciesMap[dependenciesEntryPoint.path];
177-
filteredDependenciesList = depEntryNode ? [depEntryNode] : [];
178-
filteredDependenciesMap = depEntryNode ? { [dependenciesEntryPoint.path]: depEntryNode } : {};
179-
} else {
180-
const { list, map } = collectDependencies(dependenciesEntryPoint.path, dependenciesMap);
181-
filteredDependenciesList = list;
182-
filteredDependenciesMap = map;
183-
}
184-
185-
return {
186-
filteredDependenciesList,
187-
filteredDependenciesMap,
188-
filteredDependenciesAllModulesMap: getDependenciesAllModules(filteredDependenciesMap)
189-
};
190-
};
191-
192-
export const collectDependencies = (entryModuleName, dependenciesMap) => {
193-
let queue = [].concat(entryModuleName),
194-
list = [],
195-
map = {};
196-
197-
while (queue.length) {
198-
let moduleName = queue.shift(),
199-
entryModule = dependenciesMap[moduleName];
200-
201-
if (entryModule) {
202-
list.push(entryModule);
203-
map[moduleName] = entryModule;
204-
205-
const nodeBody = entryModule.importedModuleNames;
206-
if (nodeBody) {
207-
queue = [...queue, ...nodeBody];
208-
}
209-
} else {
210-
console.error('looks like ' + entryModuleName + 'is not imported anywhere');
211-
}
212-
}
213-
214-
return {
215-
list,
216-
map
217-
};
218-
};
219-
220-
export const getDependenciesAllModules = dependenciesMap => {
221-
const allNodes = {};
222-
223-
Object.values(dependenciesMap).forEach(depModule => {
224-
allNodes[depModule.moduleName] = 1;
225-
(depModule.importedModuleNames || []).forEach(impModuleName => (allNodes[impModuleName] = 1));
226-
});
227-
228-
return allNodes;
229-
};

‎src/public/js/components/explorerBar/ExplorerBarContainer.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@ const mapDispatchToProps = dispatch => ({
3333

3434
onFileClick: node => {
3535
dispatch(selectNode(node));
36-
//TODO: dependenciesDiagramOn &&
37-
dispatch(setDependenciesEntryPoint(node));
3836
}
3937
});
4038

‎src/public/js/components/sideBar/component/Code/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,4 @@ const isMatchLineNumber = (lines, lineNumber) =>
6868
return true;
6969
}
7070
return lines[0] <= lineNumber && lines[1] >= lineNumber;
71-
});
71+
});

‎src/public/js/components/sideBar/component/DependenciesTab/index.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import { connect } from 'react-redux';
33
import { Collapse, Alert } from 'antd';
44

5-
import { convertRelativeToAbsolutePath } from 'utils/path';
65
import Code from '../Code';
76
import {
87
filterImportedDependencies,
@@ -34,9 +33,8 @@ const DependenciesTab = props => {
3433
/>
3534
</Panel>
3635
{importedDependencies.map((file, i) => {
37-
const filePath = convertRelativeToAbsolutePath(selectedNode.path, file.sourceFile);
3836
// TODO: extract code from server before
39-
const fileNode = findFileNode(filePath, filesMap, foldersMap);
37+
const fileNode = findFileNode(file.sourceFile, filesMap, foldersMap);
4038

4139
if (!fileNode) {
4240
return null;
@@ -45,7 +43,7 @@ const DependenciesTab = props => {
4543
const exportedDependencies = extractExportsForImports(
4644
fileNode.fileCode,
4745
file.specifiers,
48-
filePath
46+
file.sourceFile
4947
);
5048
return (
5149
<Panel header={fileNode.path} key={i + 1}>

‎src/public/js/components/treeDiagram/component/Edge/CodeCrumbEdge.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,8 @@ export const CodeCrumbedFlowEdge = props => {
9595
];
9696
}
9797
} else {
98-
if (Math.abs(sourcePt.x - targetPt.x) < 5 ) {
99-
polylinePoints = [
100-
[sourcePt.x, sourcePt.y],
101-
[targetPt.x, targetPt.y]
102-
];
98+
if (Math.abs(sourcePt.x - targetPt.x) < 5) {
99+
polylinePoints = [[sourcePt.x, sourcePt.y], [targetPt.x, targetPt.y]];
103100
} else {
104101
polylinePoints = [
105102
[sourcePt.x, sourcePt.y],

src/public/js/components/treeDiagram/component/Tree/DependenciesTree.js renamed to src/public/js/components/treeDiagram/component/Tree/Dependencies/index.js

Lines changed: 24 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -6,81 +6,29 @@ import {
66
DependenciesOverlappingEdge
77
} from 'components/treeDiagram/component/Edge/DepenenciesEdge';
88
import { FileName } from 'components/treeDiagram/component/Node/File';
9-
import { DepEdgeGroups } from 'components/treeDiagram/store/constants';
109
import { selectDependencyEdge } from 'components/dataBus/store/actions';
10+
import { getGroupsAroundNode, checkIsEdgeSelected } from './utils';
1111

12-
export const getGroupsAroundNode = (moduleNode, importedNodes) => {
13-
const groups = {
14-
[DepEdgeGroups.TOP_LEFT]: [],
15-
[DepEdgeGroups.TOP_RIGHT]: [],
16-
[DepEdgeGroups.BOTTOM_LEFT]: [],
17-
[DepEdgeGroups.BOTTOM_RIGHT]: []
18-
};
19-
20-
const [mX, mY] = [moduleNode.y, moduleNode.x];
21-
22-
importedNodes
23-
.sort((a, b) => {
24-
const aDiff = Math.abs(mY - a.x); // swap coordinates
25-
const bDiff = Math.abs(mY - b.x); // swap coordinates
26-
27-
if (aDiff < bDiff) {
28-
return -1;
29-
}
30-
31-
if (aDiff > bDiff) {
32-
return 1;
33-
}
34-
35-
return 0;
36-
})
37-
.forEach(importedNode => {
38-
const [iX, iY] = [importedNode.y, importedNode.x];
39-
40-
if (iY < mY) {
41-
if (iX < mX) {
42-
groups[DepEdgeGroups.TOP_LEFT].push(importedNode);
43-
} else {
44-
groups[DepEdgeGroups.TOP_RIGHT].push(importedNode);
45-
}
46-
} else {
47-
if (iX < mX) {
48-
groups[DepEdgeGroups.BOTTOM_LEFT].push(importedNode);
49-
} else {
50-
groups[DepEdgeGroups.BOTTOM_RIGHT].push(importedNode);
51-
}
52-
}
53-
});
54-
55-
return groups;
56-
};
57-
58-
const checkIsEdgeSelected = (selectedEdge, target, source) => {
59-
if (selectedEdge.target && selectedEdge.sources.length > 1) {
60-
return selectedEdge.target === target;
61-
}
12+
const DependenciesTree = props => {
13+
const {
14+
selectedNode,
15+
fileNodesMap,
16+
shiftToCenterPoint,
17+
sourceDiagramOn,
18+
onDependencyEdgeClick,
19+
selectedDependencyEdgeNodes
20+
} = props;
6221

63-
if (!source) {
64-
return selectedEdge.target === target;
22+
if (!selectedNode || !selectedNode.dependencies) {
23+
return null;
6524
}
6625

67-
return selectedEdge.target === target && selectedEdge.sources[0] === source;
68-
};
69-
70-
class DependenciesTree extends React.Component {
71-
render() {
72-
const {
73-
filteredDependenciesList,
74-
fileNodesMap,
75-
shiftToCenterPoint,
76-
sourceDiagramOn,
77-
onDependencyEdgeClick,
78-
selectedDependencyEdgeNodes
79-
} = this.props;
80-
81-
return (
82-
<React.Fragment>
83-
{filteredDependenciesList.map(({ moduleName, importedModuleNames }, i) => {
26+
const selectedNodeDependencies = selectedNode.dependencies[selectedNode.path];
27+
console.log(selectedNode.path);
28+
return (
29+
<React.Fragment>
30+
{selectedNodeDependencies &&
31+
[selectedNodeDependencies].map(({ moduleName, importedModuleNames }) => {
8432
const moduleNode = fileNodesMap[moduleName];
8533

8634
if (!moduleNode) return;
@@ -89,7 +37,7 @@ class DependenciesTree extends React.Component {
8937
const targetPosition = shiftToCenterPoint(mX, mY);
9038
const sourceNodes = [];
9139
if (!sourceDiagramOn) {
92-
//TODO: un sync with FileName in SourceTree, duplication
40+
// TODO: un sync with FileName in SourceTree, duplication
9341
sourceNodes.push(
9442
<FileName
9543
key={moduleNode.data.path}
@@ -182,19 +130,18 @@ class DependenciesTree extends React.Component {
182130
</React.Fragment>
183131
);
184132
})}
185-
</React.Fragment>
186-
);
187-
}
188-
}
133+
</React.Fragment>
134+
);
135+
};
189136

190137
const mapStateToProps = state => {
191138
const { checkedState } = state.viewSwitches;
192-
const { fileNodesMap, filteredDependenciesList, selectedDependencyEdgeNodes } = state.dataBus;
139+
const { fileNodesMap, selectedDependencyEdgeNodes, selectedNode } = state.dataBus;
193140

194141
return {
195142
sourceDiagramOn: checkedState.source,
196143
fileNodesMap,
197-
filteredDependenciesList,
144+
selectedNode,
198145
selectedDependencyEdgeNodes
199146
};
200147
};

0 commit comments

Comments
 (0)