Add reset button to plots (#1030)

Fixes #1019
sosy-lab · Apr 29, 2024 · 71dc484 · 71dc484
1 parent 2fb2a05
commit 71dc484
Show file tree

Hide file tree

Showing 9 changed files with 1,345 additions and 6 deletions.
diff --git a/benchexec/tablegenerator/react-table/build/main.min.css b/benchexec/tablegenerator/react-table/build/main.min.css
diff --git a/benchexec/tablegenerator/react-table/build/main.min.js b/benchexec/tablegenerator/react-table/build/main.min.js
diff --git a/benchexec/tablegenerator/react-table/src/App.scss b/benchexec/tablegenerator/react-table/src/App.scss
@@ -841,6 +841,9 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
   }
 }
 
+//------------------plot------------------
+$plot-select-button-height: 25px;
+
 .quantilePlot {
   margin: 20px;
 
@@ -977,6 +980,7 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  align-items: center;
 }
 
 .setting {
@@ -1000,12 +1004,17 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
     margin: 0.4em 1em;
     margin-left: 0;
     border: 1px solid #c3c3c3;
-    height: 25px;
+    height: $plot-select-button-height;
     padding-left: 10px;
     border-radius: 3px;
     cursor: pointer;
   }
 
+  &-button {
+    height: $plot-select-button-height;
+    margin: 0.4em 1em;
+  }
+
   &.disabled,
   .disabled {
     color: rgba(0, 0, 0, 0.4);

diff --git a/benchexec/tablegenerator/react-table/src/components/QuantilePlot.js b/benchexec/tablegenerator/react-table/src/components/QuantilePlot.js
@@ -25,7 +25,7 @@ import {
   getURLParameters,
   getFirstVisibles,
 } from "../utils/utils";
-import { renderSetting } from "../utils/plot";
+import { renderResetButton, renderSetting } from "../utils/plot";
 
 export default class QuantilePlot extends React.Component {
   constructor(props) {
@@ -565,6 +565,14 @@ export default class QuantilePlot extends React.Component {
                 resultsTooltip,
                 this.state.isResultSelectionDisabled,
               )}
+              {renderResetButton(() =>
+                setURLParameter({
+                  selection: null,
+                  plot: null,
+                  scaling: null,
+                  results: null,
+                }),
+              )}
             </div>
           </div>
         </div>

diff --git a/benchexec/tablegenerator/react-table/src/components/ScatterPlot.js b/benchexec/tablegenerator/react-table/src/components/ScatterPlot.js
@@ -32,6 +32,7 @@ import {
   renderOptgroupsSetting,
   getConfidenceIntervalBorders,
   getDataPointsOfRegression,
+  renderResetButton,
 } from "../utils/plot";
 import calcRegression from "regression";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -372,6 +373,18 @@ export default class ScatterPlot extends React.Component {
                 ? this.regressionData.text
                 : undefined,
             )}
+            {renderResetButton(() =>
+              setURLParameter({
+                columnX: null,
+                columnY: null,
+                line: null,
+                regression: null,
+                results: null,
+                scaling: null,
+                toolX: null,
+                toolY: null,
+              }),
+            )}
           </div>
         </div>
       </div>