added sepparate constructor and runtime cfg

Author: fergarrui

cfg

@@ -86,7 +86,7 @@
     "reflect-metadata": "^0.1.12",
     "solc": "^0.5.8",
     "terser": "3.14.1",
-    "tsoa": "2.1.8",
+    "tsoa": "2.3.81",
     "web3": "1.0.0-beta.37",
     "winston": "^2.2.0"
   },

package-lock.json

@@ -4,11 +4,8 @@ import { TYPES } from '../../../inversify/types';
 import { ContractService } from '../service/ContractService';
 import { logger } from '../../../Logger';
 import { RunContractFunctionRequest } from '../request/RunContractFunctionRequest';
-import { IWeb3 } from '../../blockchain/IWeb3';
-import { Web3Instance } from '../../blockchain/Web3Instance';
 import { Web3Configuration } from '../../blockchain/Web3Configuration';
 import { DeployContractRequest } from '../request/DeployContractRequest';
-import { TransactionRequest } from '../request/TransactionRequest';
 
 @Route('contract')
 @provideSingleton(ContractController)

package.json

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Graph from '../Graph/Graph';
+
+import styles from './ControlFlowGraphConstructor.scss';
+
+const ControlFlowGraphConstructor = ({ contractName, contractPath, graphResponse }) => {
+  return (
+    <div className={styles['control-flow-graph']}>
+        <Graph 
+          graphType="cfgconstructor" 
+          graphId={contractName} 
+          contractPath={contractPath} 
+          cfg={graphResponse.cfg} 
+          operations={graphResponse.operations}
+        />
+    </div>
+  );
+}
+
+ControlFlowGraphConstructor.displayName = 'ControlFlowGraphConstructor';
+
+export default ControlFlowGraphConstructor;

src/api/service/controller/ContractController.ts

@@ -2,13 +2,13 @@ import React from 'react';
 
 import Graph from '../Graph/Graph';
 
-import styles from './ControlFlowGraph.scss';
+import styles from './ControlFlowGraphRuntime.scss';
 
-const ControlFlowGraph = ({ contractName, contractPath, graphResponse }) => {
+const ControlFlowGraphRuntime = ({ contractName, contractPath, graphResponse }) => {
   return (
     <div className={styles['control-flow-graph']}>
         <Graph 
-          graphType="cfg" 
+          graphType="cfgruntime" 
           graphId={contractName} 
           contractPath={contractPath} 
           cfg={graphResponse.cfg} 
@@ -18,6 +18,6 @@ const ControlFlowGraph = ({ contractName, contractPath, graphResponse }) => {
   );
 }
 
-ControlFlowGraph.displayName = 'ControlFlowGraph';
+ControlFlowGraphRuntime.displayName = 'ControlFlowGraphRuntime';
 
-export default ControlFlowGraph;
+export default ControlFlowGraphRuntime;

src/client/components/ControlFlowGraphConstructor/ControlFlowGraphConstructor.js

@@ -0,0 +1,7 @@
+.control-flow-graph {
+  position: relative;
+
+  &__body {
+    width: 100%;
+  }
+}

src/client/components/ControlFlowGraph/ControlFlowGraph.scss renamed to src/client/components/ControlFlowGraphConstructor/ControlFlowGraphConstructor.scss

@@ -2,12 +2,13 @@ import React from 'react';
 
 import TransactionDebugger from '../../TransactionDebugger/TransactionDebugger';
 import Disassembler from '../../Disassembler/Disassembler';
-import ControlFlowGraph from '../../ControlFlowGraph/ControlFlowGraph';
+import ControlFlowGraphRuntime from '../../ControlFlowGraphRuntime/ControlFlowGraphRuntime';
 import StorageViewer from '../../StorageViewer/StorageViewer';
 
 import styles from './InnerTabPanel.scss';
 
 import classnames from 'classnames/bind';
+import ControlFlowGraphConstructor from '../../ControlFlowGraphConstructor/ControlFlowGraphConstructor';
 
 const cx = classnames.bind(styles);
 
@@ -31,8 +32,16 @@ const InnerTabPanel = ({ type, active, contractName, contractCode, contractPath,
           disassemblerResponse={disassemblerResponse}
         />
       }
-      {type === 'Control Flow Graph' &&
-        <ControlFlowGraph 
+      {type === 'Control Flow Graph Runtime' &&
+        <ControlFlowGraphRuntime 
+          contractPath={contractPath} 
+          contractName={contractName} 
+          contractCode={contractCode}
+          graphResponse={graphResponse}
+        />
+      }
+      {type === 'Control Flow Graph Constructor' &&
+        <ControlFlowGraphConstructor 
           contractPath={contractPath} 
           contractName={contractName} 
           contractCode={contractCode}

src/client/components/ControlFlowGraph/ControlFlowGraph.js renamed to src/client/components/ControlFlowGraphRuntime/ControlFlowGraphRuntime.js

@@ -10,7 +10,7 @@ class SideBar extends React.Component {
 
   render() {
 
-    const { onTransactionDebuggerClick, onControlFlowGraphClick, onDisassemblerClick, onViewStorageClick } = this.props;
+    const { onTransactionDebuggerClick, onControlFlowGraphRuntimeClick, onControlFlowGraphConstructorClick, onDisassemblerClick, onViewStorageClick } = this.props;
 
     return (
       <div className={styles['side-bar']}>
@@ -20,8 +20,11 @@ class SideBar extends React.Component {
         <div className={styles['side-bar__item']} onClick={onDisassemblerClick}>
           <span>Disassembler</span>
         </div>
-        <div className={styles['side-bar__item']} onClick={onControlFlowGraphClick}>
-          <span>Control Flow Graph</span>
+        <div className={styles['side-bar__item']} onClick={onControlFlowGraphConstructorClick}>
+          <span>Control Flow Graph Constructor</span>
+        </div>
+        <div className={styles['side-bar__item']} onClick={onControlFlowGraphRuntimeClick}>
+          <span>Control Flow Graph Runtime</span>
         </div>
         <div className={styles['side-bar__item']} onClick={onViewStorageClick}>
           <span>View Storage</span>