Control flow graph tool rework (#3899)

* Removed old code * Base functionality * Work on edge offsets * Setup interval trees for edges * linter things * Formatting * Added syntax highlighting * Cleanup and simplification. Improved handling of direct dropdown edges. * Basic zoom/pan * Remove old blocks from output * Fix distance calculation * Added function selector * Improved zoom behavior * figue 8 logic * Canvas scaling / repainting, updated colors * Don't truncate output, also removed some console.logs * Tweak to zoom system * Replaced canvas stuff with svg * Experimenting with adding shadows to edges * Removed shadows, was causing problems. Improved how blocks with lots of incident edges are handled. * Slightly improved edge system * some work on implementing segment priority system from cutter * Optimization to rendering process. I was worried the graph layout algorithm was causing the page to hang but it turns out it was adding elements to the page with += * Removed need for storing the previous segment * refactor, splitting up some logic * Cleaned up logic and got horizontal edges working better * Remove vis-network dependency * Updated package-lock, removed @import vis-network css stuff, added a todo for myself * Cleaned up notes and error messages. Added comments. Clear the pane if there's no function to display * Added layout time information, implemented .resize * Light theme * State work and bug fix for dragiing * Re-dading lost dark theme changes * Added jquery import * Cleaned up console.logs * Added basic block count * Incorporated PR review comments; Fixed cypress (hopefully), added documentation, improved the dropdown, and fixed dropdown items not being cleared with an empty result.cfg * Ran format
compiler-explorer · Nov 30, 2022 · 1294c3f · 1294c3f
1 parent ab98ce9
commit 1294c3f
Show file tree

Hide file tree

Showing 20 changed files with 1,385 additions and 537 deletions.
diff --git a/cypress/integration/frontend-testing.js b/cypress/integration/frontend-testing.js
@@ -18,7 +18,7 @@ const PANE_DATA_MAP = {
     dump: {name: 'Tree/RTL', selector: 'view-gccdump'},
     tree: {name: 'Tree', selector: 'view-gnatdebugtree'},
     debug: {name: 'Debug', selector: 'view-gnatdebug'},
-    cfg: {name: 'Graph', selector: 'view-cfg'},
+    cfg: {name: 'CFG', selector: 'view-cfg'},
 };
 
 describe('Individual pane testing', () => {

diff --git a/lib/cfg.js b/lib/cfg.js
@@ -217,7 +217,7 @@ function splitToCanonicalBasicBlock(basicBlock) {
 
 function concatInstructions(asmArr, first, last) {
     return _.chain(asmArr.slice(first, last))
-        .map(x => x.text.substr(0, 50))
+        .map(x => x.text)
         .value()
         .join('\n');
 }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "cache": false
   },
   "dependencies": {
+    "@flatten-js/interval-tree": "^1.0.18",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@sentry/browser": "^6.16.1",
     "@sentry/node": "^6.16.1",
@@ -82,7 +83,6 @@
     "tslib": "^2.3.1",
     "underscore": "^1.13.2",
     "url-join": "^4.0.1",
-    "vis-network": "^9.1.0",
     "whatwg-fetch": "^3.6.2",
     "which": "^2.0.2",
     "winston": "^3.3.3",

diff --git a/static/components.interfaces.ts b/static/components.interfaces.ts
@@ -23,6 +23,7 @@
 // POSSIBILITY OF SUCH DAMAGE.
 
 import {CompilerOutputOptions} from '../types/features/filters.interfaces';
+import {CfgState} from './panes/cfg-view.interfaces';
 import {LLVMOptPipelineViewState} from './panes/llvm-opt-pipeline.interfaces';
 export const COMPILER_COMPONENT_NAME = 'compiler';
 export const EXECUTOR_COMPONENT_NAME = 'executor';
@@ -175,10 +176,11 @@ export type PopulatedGccDumpViewState = {
 } & (Record<GccDumpOptions, unknown> | EmptyState);
 
 export type EmptyCfgViewState = EmptyState;
-export type PopulatedCfgViewState = StateWithId & {
-    editorid: number;
-    treeid: number;
-};
+export type PopulatedCfgViewState = StateWithId &
+    CfgState & {
+        editorid: number;
+        treeid: number;
+    };
 
 export type EmptyConformanceViewState = EmptyState; // TODO: unusued?
 export type PopulatedConformanceViewState = {

diff --git a/static/components.ts b/static/components.ts
@@ -526,6 +526,8 @@ export function getCfgViewWith(id: number, editorid: number, treeid: number): Co
         type: 'component',
         componentName: CFG_VIEW_COMPONENT_NAME,
         componentState: {
+            selectedFunction: null,
+            zoom: 1,
             id,
             editorid,
             treeid,