fix: peformance for flow steps

Bogdan-Lyashenko · Bogdan-Lyashenko · commit 05cb5527e3b1 · 2019-08-10T20:17:21.000+02:00
diff --git a/package.json b/package.json
@@ -42,8 +42,8 @@
     "lodash.debounce": "^4.0.8",
     "madge": "^3.4.4",
     "portscanner": "^2.2.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-redux": "^5.0.7",
     "react-syntax-highlighter": "8.0.1",
     "redux": "^4.0.0",
diff --git a/src/public/js/components/sideBar/component/Code/index.js b/src/public/js/components/sideBar/component/Code/index.js
@@ -11,7 +11,7 @@ const PADDING_TOP = 5;
 //TODO: add select with several themes
 //TODO: scrool to/highlight crumbed lines
 //https://github.com/conorhastings/react-syntax-highlighter/blob/master/README.md
-export default class extends React.Component {
+export default class extends React.PureComponent {
   fixScroll() {
     const { dependenciesLines = [], crumbedLines = [], lineHeight } = this.props;
     if (!this.codeRef || !this.codeRef.scrollTo) {
diff --git a/src/public/js/components/sideBar/component/CrumbsTab/index.js b/src/public/js/components/sideBar/component/CrumbsTab/index.js
@@ -8,8 +8,7 @@ import 'antd/es/alert/style';
 
 import { NO_TRAIL_FLOW } from '../../../../shared-constants';
 import { getCodeCrumbsUserChoice } from '../../../../core/dataBus/selectors';
-import { getNamespacesList } from '../../../../core/dataBus/selectors';
-import { gatherFlowStepsData } from '../../../treeDiagram/component/Tree/CodeCrumbs/helpers';
+import { getSharedFlowStepsData } from '../../../../core/namespaceIntegration/selectors';
 
 import Code from '../Code';
 import './index.less';
@@ -58,7 +57,6 @@ const CrumbsTab = props => {
 };
 
 const mapStateToProps = (state, props) => {
-  const namespacesList = getNamespacesList(state);
   const { namespace } = props;
 
   const {
@@ -69,10 +67,7 @@ const mapStateToProps = (state, props) => {
     namespace
   });
 
-  const { involvedNsData, sortedFlowSteps } = gatherFlowStepsData(state, {
-    currentSelectedCrumbedFlowKey,
-    namespacesList
-  });
+  const { involvedNsData, sortedFlowSteps } = getSharedFlowStepsData(state);
 
   if (currentSelectedCrumbedFlowKey === NO_TRAIL_FLOW) {
     return {
diff --git a/src/public/js/components/topBar/controls/ViewSwitches/Item/ViewSwitch.js b/src/public/js/components/topBar/controls/ViewSwitches/Item/ViewSwitch.js
@@ -12,7 +12,7 @@ import 'antd/es/icon/style';
 import { VIEW_TYPES } from '../../../../../core/controlsBus/constants';
 import './ViewSwitch.less';
 
-class ViewSwitch extends React.Component {
+class ViewSwitch extends React.PureComponent {
   renderMenu() {
     const {
       name,
diff --git a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.js b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.js
@@ -35,7 +35,7 @@ const DetailsComponent = props => {
 };
 
 const ccUnderlayPaddingH = 20;
-class CodeComponent extends React.Component {
+class CodeComponent extends React.PureComponent {
   state = {};
 
   onMouseEnter = () => {
@@ -101,7 +101,7 @@ const ExtraInfoSet = ({
   namespace,
   language
 }) => {
-  if (!detailsEnabled && !codePreviewEnabled) return null;
+  if ((!detailsEnabled && !codePreviewEnabled) || !sortedFlowSteps) return null;
 
   const crumbs = sortedFlowSteps.length ? sortedFlowSteps : flowSteps;
   return (
diff --git a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/FlowEdge.js b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/FlowEdge.js
@@ -17,6 +17,10 @@ export default props => {
     selectedCcFlowEdgeNodes
   } = props;
 
+  if (!involvedNsData || !involvedNsData[namespace]) {
+    return null;
+  }
+
   const { codecrumbsLayoutMap } = involvedNsData[namespace];
   const ccNamespacesKeys = Object.keys(involvedNsData || {});
 
diff --git a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js
@@ -19,6 +19,10 @@ const Tree = props => {
     selectedCcFlowEdgeNodes
   } = props;
 
+  if (!ccShiftIndexMap) {
+    return null;
+  }
+
   return (
     <React.Fragment>
       {Object.keys(codecrumbsLayoutMap).map(key => {
diff --git a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/helpers.js b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/helpers.js
@@ -1,6 +1,3 @@
-import { getCodeCrumbsUserChoice, getSourceLayout } from '../../../../../core/dataBus/selectors';
-import { NO_TRAIL_FLOW } from '../../../../../core/constants';
-
 export const isCodeCrumbsEqual = (cc, currentCc) =>
   cc.name === currentCc.name && cc.flowStep === currentCc.flowStep;
 
@@ -13,100 +10,4 @@ export const isCodeCrumbSelected = (selectedCcFlowEdgeNodes, cc) => {
   );
 };
 
-const stepSorter = (a, b) => a.step - b.step;
-
-const getFlowSteps = ({
-  namespace,
-  codeCrumbedFlowsMap,
-  selectedCrumbedFlowKey,
-  codecrumbsLayoutMap
-}) => {
-  const currentFlow = codeCrumbedFlowsMap[selectedCrumbedFlowKey] || {};
-
-  return Object.keys(currentFlow).reduce((flowSteps, filePath) => {
-    const steps = ((codecrumbsLayoutMap[filePath] && codecrumbsLayoutMap[filePath].children) || [])
-      .filter(({ data }) => data.params.flow === selectedCrumbedFlowKey)
-      .map(({ data, x, y }) => ({
-        ...data,
-        namespace,
-        filePath,
-        step: data.params.flowStep,
-        flow: selectedCrumbedFlowKey,
-        x,
-        y
-      }));
-
-    return [...flowSteps, ...steps];
-  }, []);
-};
-
-const createCcShiftIndexMap = sortedFlowSteps => {
-  const ccMap = {};
-  let shiftOrderIndex = 0;
-
-  sortedFlowSteps.forEach((crumb, i, list) => {
-    if (!i) {
-      ccMap[crumb.id] = shiftOrderIndex;
-      return;
-    }
-
-    if (crumb.x < list[i - 1].x) {
-      shiftOrderIndex++;
-    }
-
-    ccMap[crumb.id] = shiftOrderIndex;
-  });
-
-  return ccMap;
-};
-
-export const gatherFlowStepsData = (state, { namespacesList, currentSelectedCrumbedFlowKey }) => {
-  const flowStepsData = namespacesList.reduce(
-    (acc, ns) => {
-      const namespaceProps = { namespace: ns };
-      const { selectedCrumbedFlowKey, codeCrumbedFlowsMap } = getCodeCrumbsUserChoice(
-        state,
-        namespaceProps
-      );
-
-      if (currentSelectedCrumbedFlowKey !== selectedCrumbedFlowKey) {
-        return acc;
-      }
-
-      const { codecrumbsLayoutMap, ccAlightPoint } = getSourceLayout(state, namespaceProps);
-
-      const flowSteps = getFlowSteps({
-        namespace: ns,
-        codeCrumbedFlowsMap,
-        selectedCrumbedFlowKey,
-        codecrumbsLayoutMap
-      });
-
-      return {
-        flowSteps,
-        sortedFlowSteps:
-          selectedCrumbedFlowKey !== NO_TRAIL_FLOW
-            ? [...acc.sortedFlowSteps, ...flowSteps].sort(stepSorter)
-            : [],
-        involvedNsData: {
-          ...acc.involvedNsData,
-          [ns]: { codecrumbsLayoutMap, ccAlightPoint }
-        }
-      };
-    },
-    { involvedNsData: {}, flowSteps: [], sortedFlowSteps: [] }
-  );
-
-  return {
-    ...flowStepsData,
-    ccShiftIndexMap: createCcShiftIndexMap(flowStepsData.sortedFlowSteps)
-  };
-};
-
 export const getCcPosition = (x, index = 0) => x + 70 * index;
-
-export const getMaxWidthForNs = (state, { namespacesList }) =>
-  namespacesList.reduce((maxWidth, namespace) => {
-    const { layoutSize } = getSourceLayout(state, { namespace });
-    return layoutSize && layoutSize.width > maxWidth ? layoutSize.width : maxWidth;
-  }, 0);
diff --git a/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js b/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js
@@ -114,7 +114,7 @@ const SourceTree = props => {
               selectedNodeDependencies[path] &&
               !selectedNodeDependencies[path].importedModuleNames.length
             }
-            onNodeClick={e => onFileNodeClick(e, fileNode)}
+            onNodeClick={e => selectedNode !== fileNode && onFileNodeClick(e, fileNode)}
           />
         );
       } else if (type === DIR_NODE_TYPE) {
diff --git a/src/public/js/components/treeDiagram/component/TreeDiagram.js b/src/public/js/components/treeDiagram/component/TreeDiagram.js
@@ -8,22 +8,17 @@ import { UnderLayer } from './UnderLayer';
 import './TreeDiagram.less';
 
 import { buildShiftToPoint } from '../../../core/dataBus/utils/geometry';
-import {
-  getProjectMetadata,
-  getSourceLayout,
-  getCodeCrumbsUserChoice,
-  getNamespacesList
-} from '../../../core/dataBus/selectors';
+import { getProjectMetadata, getSourceLayout } from '../../../core/dataBus/selectors';
 import { getCheckedState, getValuesState } from '../../../core/controlsBus/selectors';
 import {
   selectDependencyEdge,
   selectCcFlowEdge,
   saveTreeDiagramContentId
 } from '../../../core/dataBus/actions';
 import { setActiveNamespace } from '../../../core/namespaceIntegration/actions';
-import { gatherFlowStepsData, getMaxWidthForNs } from './Tree/CodeCrumbs/helpers';
+import { getSharedFlowStepsData } from '../../../core/namespaceIntegration/selectors';
 
-class TreeDiagram extends React.Component {
+class TreeDiagram extends React.PureComponent {
   componentDidUpdate(prevProps) {
     if (!prevProps.layoutSize && this.props.layoutSize) {
       this.props.saveContentId(this.treeDiagramContent.getAttribute('id'));
@@ -121,31 +116,7 @@ const mapStateToProps = (state, props) => {
   const { diagramZoom } = getValuesState(state);
   const { codeCrumbsDiagramOn } = getCheckedState(state);
 
-  let extendedCcProps = {};
-  if (codeCrumbsDiagramOn) {
-    const codeCrumbsUserChoice = getCodeCrumbsUserChoice(state, {
-      namespace
-    });
-
-    const namespacesList = getNamespacesList(state);
-    const { flowSteps, sortedFlowSteps, involvedNsData, ccShiftIndexMap } = gatherFlowStepsData(
-      state,
-      {
-        currentSelectedCrumbedFlowKey: codeCrumbsUserChoice.selectedCrumbedFlowKey,
-        namespacesList
-      }
-    );
-
-    const maxWidth = getMaxWidthForNs(state, { namespacesList });
-
-    extendedCcProps = {
-      flowSteps,
-      sortedFlowSteps,
-      involvedNsData,
-      ccShiftIndexMap,
-      maxWidth
-    };
-  }
+  const extendedCcProps = codeCrumbsDiagramOn ? getSharedFlowStepsData(state) : {};
 
   return {
     namespace,
diff --git a/src/public/js/core/dataBus/index.js b/src/public/js/core/dataBus/index.js
@@ -10,7 +10,7 @@ import {
   updateFiles
 } from './actions';
 
-class DataBusContainer extends React.Component {
+class DataBusContainer extends React.PureComponent {
   componentDidMount() {
     const { standalone } = this.props;
 
diff --git a/src/public/js/core/namespaceIntegration/actions.js b/src/public/js/core/namespaceIntegration/actions.js
@@ -1,10 +1,31 @@
 import { ACTIONS } from './constants';
+import { gatherFlowStepsData } from './utils/sharedCcFlows';
+import { getCodeCrumbsUserChoice, getNamespacesList } from '../dataBus/selectors';
+import { getActiveNamespace } from './selectors';
 
 export const setActiveNamespace = payload => ({
   type: ACTIONS.SET_ACTIVE_NAMESPACE,
   payload
 });
 
+export const calcSharedFlowStepsData = () => (dispatch, getState) => {
+  const state = getState();
+
+  const namespace = getActiveNamespace(state);
+  const namespacesList = getNamespacesList(state);
+  const { selectedCrumbedFlowKey: currentSelectedCrumbedFlowKey } = getCodeCrumbsUserChoice(state, {
+    namespace
+  });
+
+  dispatch({
+    type: ACTIONS.CALC_SHARED_FLOW_STEPS_DATA,
+    payload: gatherFlowStepsData(state, {
+      currentSelectedCrumbedFlowKey,
+      namespacesList
+    })
+  });
+};
+
 export const setFullState = payload => ({
   type: ACTIONS.SET_FULL_STATE,
   payload
diff --git a/src/public/js/core/namespaceIntegration/constants.js b/src/public/js/core/namespaceIntegration/constants.js
@@ -1,5 +1,6 @@
 export const ACTIONS = {
   SET_ACTIVE_NAMESPACE: 'NAMESPACE_INTEGRATION.SET_ACTIVE_NAMESPACE',
+  CALC_SHARED_FLOW_STEPS_DATA: 'NAMESPACE_INTEGRATION.CALC_SHARED_FLOW_STEPS_DATA',
   SET_FULL_STATE: 'NAMESPACE_INTEGRATION.SET_FULL_STATE',
   RESET_ALL: 'NAMESPACE_INTEGRATION.RESET_ALL'
 };
diff --git a/src/public/js/core/namespaceIntegration/reducer.js b/src/public/js/core/namespaceIntegration/reducer.js
@@ -1,7 +1,8 @@
 import { ACTIONS } from './constants';
 
 const DefaultState = {
-  activeNamespace: undefined
+  activeNamespace: undefined,
+  sharedFlowStepsData: null
 };
 
 export default (state = DefaultState, action) => {
@@ -12,6 +13,12 @@ export default (state = DefaultState, action) => {
         activeNamespace: action.payload
       };
 
+    case ACTIONS.CALC_SHARED_FLOW_STEPS_DATA:
+      return {
+        ...state,
+        sharedFlowStepsData: action.payload
+      };
+
     case ACTIONS.SET_FULL_STATE:
       return {
         ...state,
diff --git a/src/public/js/core/namespaceIntegration/selectors.js b/src/public/js/core/namespaceIntegration/selectors.js
@@ -1 +1,2 @@
 export const getActiveNamespace = state => state.namespaceIntegration.activeNamespace;
+export const getSharedFlowStepsData = state => state.namespaceIntegration.sharedFlowStepsData;
diff --git a/src/public/js/core/namespaceIntegration/utils/sharedCcFlows.js b/src/public/js/core/namespaceIntegration/utils/sharedCcFlows.js
diff --git a/src/public/js/core/store/sagas.js b/src/public/js/core/store/sagas.js
diff --git a/src/public/webpack.dev.js b/src/public/webpack.dev.js

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ const SourceTree = props => {`
`114`	`114`	`selectedNodeDependencies[path] &&`
`115`	`115`	`!selectedNodeDependencies[path].importedModuleNames.length`
`116`	`116`	`}`
`117`		`- onNodeClick={e => onFileNodeClick(e, fileNode)}`
	`117`	`+ onNodeClick={e => selectedNode !== fileNode && onFileNodeClick(e, fileNode)}`
`118`	`118`	`/>`
`119`	`119`	`);`
`120`	`120`	`} else if (type === DIR_NODE_TYPE) {`