Added highlighting after filtering basedon method or test. ALso fixed…

… bug that would reset all previous filters after filtering basedon method or test.

package.json

@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.20.0",
     "d3": "^6.0",
+    "lodash": "^4.17.20",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/components/common/FilterMenu.js

@@ -6,7 +6,6 @@ class FilterMenu extends Component {
     constructor(props) {
         super();
 
-        this.onClickMethod = props.onClick;
         this.state = {
             entries: props.entries,
             display: props.entries,
@@ -54,7 +53,7 @@ class FilterMenu extends Component {
                 <div className="filtermenu">
                     <div className="dropdown-content">
                         <input type="text" placeholder={"Search..."} onKeyUp={this.filterFunction.bind(this)}></input>
-                        <select onChange={this.onClickMethod}>
+                        <select onChange={this.props.onClick}>
                             <option> -- select an option -- </option>
                             {this.state.display.map((entry) => (
                                 <option key={entry.get_id()} value={entry.get_id()}>{entry.method_name}</option>

src/components/filters/data_processor.js

@@ -1,6 +1,12 @@
+import { cloneDeep} from 'lodash';
+
 export function process_data (data, fmap) {
-    let filtered_data = data;
-    fmap.get_map().forEach((func) => {
+    let filtered_data = {
+        x: cloneDeep(data.x),
+        y: cloneDeep(data.y),
+        edges: cloneDeep(data.edges),
+    };
+    fmap.get_map().forEach((func, index) => {
         filtered_data = func(filtered_data, data);
     })
     return filtered_data

src/components/filters/method_filters.js

@@ -25,7 +25,7 @@ export function filter_method_by_number_of_times_tested(current_state, all_data,
 }
 
 
-export function filter_by_coexecuted_methods(current_state, all_data, identifier) {
+export function filter_by_coexecuted_methods(current_state, _, identifier) {
     const current = current_state;
 
     let methods = current.x;
@@ -43,14 +43,22 @@ export function filter_by_coexecuted_methods(current_state, all_data, identifier
         return current;
     }
 
-    const test_ids = edges.filter(edge => filter_method.get_id() === edge.method_id)
+    const filtered_method_id = filter_method.get_id();
+
+    const test_ids = edges.filter(edge => filtered_method_id === edge.method_id)
         .map(edge => edge.test_id);
 
     const filtered_tests = test_cases.filter(test => test_ids.includes(test.test_id))
 
     const filtered_edges = edges.filter(
         edge => test_ids.includes(edge.test_id) || edge.method_id === filter_method.method_id)
 
+    filtered_edges.forEach((edge) => {
+        if (edge.method_id === filtered_method_id) {
+            edge.highlight = true;
+        }
+    })
+
     const method_ids = filtered_edges.map(edge => edge.method_id)
 
     const filtered_methods = methods.filter(method => method_ids.includes(method.method_id));

src/components/filters/test_filters.js

@@ -61,7 +61,7 @@ export function filter_by_test_passed(current_state, all_data, value) {
 }
 
 
-export function filter_by_coexecuted_tests(current_state, all_data, identifier) {
+export function filter_by_coexecuted_tests(current_state, _, identifier) {
     const current = current_state;
 
     let methods = current.x;
@@ -79,13 +79,21 @@ export function filter_by_coexecuted_tests(current_state, all_data, identifier)
         return current;
     }
 
-    const method_ids = edges.filter(edge => filter_test.test_id === edge.test_id)
+    const filtered_test_id = filter_test.get_id();
+
+    const method_ids = edges.filter(edge => filtered_test_id === edge.test_id)
         .map(edge => edge.method_id);
 
     const filtered_methods = methods.filter(m => method_ids.includes(m.method_id))
 
-    const filtered_edges = edges.filter(
-        edge => method_ids.includes(edge.method_id) || edge.test_id === filter_test.test_id)
+    let filtered_edges = edges.filter(
+        edge => method_ids.includes(edge.method_id) || edge.test_id === filtered_test_id)
+
+    filtered_edges.forEach( (edge) => {
+        if (edge.test_id === filtered_test_id) {
+            edge.highlight = true;
+        }
+    })
 
     const test_ids = filtered_edges.map(edge => edge.test_id)
 

src/components/routes/TestMatrixView.js

@@ -159,8 +159,8 @@ class TestMatrixView extends Component {
     }
 
     render() {
-        const history = this.state.history
-        const current_filter_map = history[history.length - 1]
+        const history = this.state.history;
+        const current_filter_map = history[history.length - 1];
 
         const current_state = process_data(this.state.data, current_filter_map)
         const labelToggle = history.length > 1 ? true : false;
@@ -251,7 +251,6 @@ class TestMatrixView extends Component {
                                 entries={current_state.y} 
                                 onClick={(event) => {
                                     const identifier = event.target.value;
-
                                     let new_filter_map = new FunctionMap(current_filter_map);
                                     new_filter_map.add_function("filter_by_coexecuted_tests", filter_by_coexecuted_tests, identifier)
 

src/components/visualizations/MatrixVisualization.js

@@ -68,7 +68,8 @@ class MatrixVisualization extends Component {
         //  It should be possible to dynamically change implementation of the get_x(), get_y(), and get_z() functions.
         current.edges.forEach((edge, index) => {
             if  (!(edge["test_id"] === null || edge["method_id"] === null)){
-                edges.push({ x: parseInt(edge["method_id"]), y: parseInt(edge["test_id"]), z: edge["test_result"] ? "#0F0" : "#F00"});
+                const highlight = edge.hasOwnProperty('highlight') ? edge.highlight : false;
+                edges.push({ x: parseInt(edge["method_id"]), y: parseInt(edge["test_id"]), z: edge["test_result"] ? "#0F0" : "#F00", highlight: highlight});
             }
         });
 
@@ -94,6 +95,8 @@ class MatrixVisualization extends Component {
         }
         else if ((prevProps.x !== this.props.x) || (prevProps.y !== this.props.y) || (prevProps.edges !== this.props.edges)) {
             this.labelToggle = this.props.labelToggle;
+            this.onMethodClick = this.props.onMethodClick;
+            this.onTestClick = this.props.onTestClick;
             this.update()
         }
     }
@@ -196,7 +199,9 @@ class MatrixVisualization extends Component {
                 .attr("fill", (d) => d.z)
                 .attr("width", rectWidth)
                 .attr("height", rectHeight)
-                .attr("rx", Math.max(1, xScale.step()/2));
+                .attr("rx", Math.max(1, xScale.step()/2))
+                .attr("stroke", (d) => d.highlight ? 'black' : null)
+                .attr("stoke-width", (d) => d.highlight ? '1px' : '0px')
                 // TODO add tooltip when hovering over a edge
 
         // Tooltip

yarn.lock

@@ -7486,7 +7486,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.5, lodash@~4.17.10:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5, lodash@~4.17.10:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==