Merge pull request #6 from carolabadeer/axis-labels

added axis labels for visualization and history components
spideruci · Dec 3, 2020 · 04bf8d0 · 04bf8d0
2 parents e06dee4 + 22a013f
commit 04bf8d0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/components/routes/HistoryMatrixView.js b/src/components/routes/HistoryMatrixView.js
@@ -42,7 +42,7 @@ class HistoryMatrixView extends Component {
             projects: [],
             commits: [],
             expanded: false,
-            reset: false
+            reset: false,
         }
 
         this.backInTime = this.backInTime.bind(this);
@@ -192,8 +192,6 @@ class HistoryMatrixView extends Component {
     updateReset(){
         this.setState({reset: false});
     }
-
-
     render() {
         const history = this.state.history;
         const current_filter_map = history[history.length - 1];
@@ -208,6 +206,8 @@ class HistoryMatrixView extends Component {
             });
         }
 
+
+
         return (
             <div className='test-visualization'>
                 {((current_state.x.length >= 0) || (current_state.y.length >= 0)) &&
@@ -231,9 +231,10 @@ class HistoryMatrixView extends Component {
                                 history: this.state.history.concat(new_filter_map)
                             })
                         }}
-                        labelToggle={labelToggle}/>
+                        labelToggle={labelToggle}
+                        xlabel={"commits"}/>
+
                 }
-
                 <div id='toolbox'>
                     <h4>Toolbar</h4>
                     <Accordion expanded={this.state.expanded === 'panel1'} onChange={handleChange('panel1')}>
@@ -242,11 +243,10 @@ class HistoryMatrixView extends Component {
                             aria-controls="panel1a-content"
                             id="data-set-selector"
                         >
-                        <span>Project selector</span>
+                        <span>Project Selector</span>
                         </AccordionSummary>
                         <AccordionDetails className="accordion-block">
-                            <Menu title="Projects" onChange={this.onProjectChange} entries={this.state.projects} reset={this.state.reset} updateReset={this.updateReset}/>
-                            <Menu title="Commit" onChange={this.onCommitChange} entries={this.state.commits} reset={this.state.reset} updateReset={this.updateReset}/>
+                        <Menu title="Projects" onChange={this.onProjectChange} entries={this.state.projects} reset={this.state.reset} updateReset={this.updateReset}/> 
                         </AccordionDetails>
                     </Accordion>
                     <Accordion expanded={this.state.expanded === 'panel2'} onChange={handleChange('panel2')}>
@@ -437,14 +437,16 @@ class HistoryMatrixView extends Component {
                         </AccordionDetails>
                     </Accordion>
 
-                    <ResultTextBox title="Methods" entries={current_state.x}/>
+                    <ResultTextBox title="Commits" entries={current_state.x}/>
                     <ResultTextBox title="Tests" entries={current_state.y}/>
 
                     <div id="control-tools">
                         <button onClick={this.backInTime}>Back</button>
                         <button onClick={this.reset}>Reset</button>
                     </div>
+
                 </div>
+
             </div>
         )
     }

diff --git a/src/components/routes/TestMatrixView.js b/src/components/routes/TestMatrixView.js
@@ -231,7 +231,8 @@ class TestMatrixView extends Component {
                                 history: this.state.history.concat(new_filter_map)
                             })
                         }}
-                        labelToggle={labelToggle}/>
+                        labelToggle={labelToggle}
+                        xlabel={"methods"}/>
                 }
 
                 <div id='toolbox'>

diff --git a/src/components/visualizations/MatrixVisualization.js b/src/components/visualizations/MatrixVisualization.js
@@ -18,6 +18,7 @@ class MatrixVisualization extends Component {
         this.state = {
             width: 0,
             height: 0,
+            xlabel: props.xlabel,
         }
 
         this.margin = {
@@ -219,6 +220,14 @@ class MatrixVisualization extends Component {
             .style("font-size", "12px")
 
         // Add X and Y axis to the visualization
+
+        // text label for the x axis
+        svg.append("text")
+        .attr("x", this.state.width/2 )
+        .attr("y",  11 )
+        .style("text-anchor", "middle")
+        .text(this.state.xlabel);
+
         select("g.x-axis")
             .attr("transform", `translate(${this.margin.left}, ${this.margin.top})`)
             .call(xAxis);
@@ -271,7 +280,6 @@ class MatrixVisualization extends Component {
                         .style("visibility", "hidden");
                 })
                 .on('click', this.onMethodClick);
-
         select("g.y-axis")
             .attr("transform", `translate(${this.margin.left}, ${this.margin.top})`)
             .call(yAxis);
@@ -322,6 +330,14 @@ class MatrixVisualization extends Component {
                         .style("visibility", "hidden");
                 })
                 .on('click', this.onTestClick);
+
+        svg.append("text")
+                .attr("transform", "rotate(-90)")
+                .attr("y", 1)
+                .attr("x",-this.state.height/2)
+                .attr("dy", "0.7em")
+                .style("text-anchor", "middle")
+                .text("test cases");
     }
 
     createTestMatrixView() {