PLT - Aggregate similar solvers in legend

benchopt/plotting/html/static/hover_index.css

@@ -317,3 +317,16 @@ input:checked+.slider:before {
 .space-r-2 > * {
   margin-right: 0.5rem;
 }
+
+.solver-accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}

benchopt/plotting/html/static/result.js

@@ -536,14 +536,65 @@ const makeLegend = () => {
 
   legend.innerHTML = '';
 
-  Object.keys(data().solvers).forEach(solver => {
+  let aggregateName = aggregateButton = aggregateDiv = null;
+
+  for(let solver in data().solvers) {
+    const solverName = solver.split("[")[0];
     const color = data().solvers[solver].color;
     const symbolNumber = data().solvers[solver].marker;
 
-    legend.appendChild(createLegendItem(solver, color, symbolNumber));
-  });
+    if(solverName === aggregateName) {
+      aggregateDiv.appendChild(createLegendItem(solver, color, symbolNumber));
+      continue;
+    }
+
+    // create button to toggle accordion
+    aggregateButton = document.createElement("button");
+    aggregateButton.innerText = solverName;
+    aggregateButton.className = 'solver-accordion';
+
+    // create div to gather the solvers with other bench params
+    aggregateDiv = document.createElement("div");
+    aggregateDiv.style.display = state().disabled_solvers_accordions.includes(solverName) ? "none" : "block"; 
+
+    // add event handler for accordion
+    aggregateButton.addEventListener('click', function () {
+      let currentAggregateDiv = this.nextElementSibling;
+      let solversInAggregate = getSolverInAggregate(currentAggregateDiv);
+
+      if (currentAggregateDiv.style.display === "block") {
+        setState({
+          hidden_solvers: state().hidden_solvers.concat(solversInAggregate),
+          disabled_solvers_accordions: state().disabled_solvers_accordions.concat(solverName)
+        });
+      } 
+      else {
+        setState({
+          hidden_solvers: state().hidden_solvers.filter(hidden => !solversInAggregate.includes(hidden)),
+          disabled_solvers_accordions: state().disabled_solvers_accordions.filter(hidden => !(hidden === solverName))
+        });
+      }
+    });
+
+    legend.appendChild(aggregateButton);
+    legend.appendChild(aggregateDiv);
+    aggregateDiv.appendChild(createLegendItem(solver, color, symbolNumber));
+
+    aggregateName = solverName;
+  }
 }
 
+getSolverInAggregate = (agg) => {
+  let arr = [];
+
+  for (let ele of agg.children) {
+    arr.push(
+      ele.querySelector(".solver").firstChild.nodeValue
+    )
+  }
+
+  return arr
+}
 /**
  * Creates a legend item which contains the solver name,
  * the solver marker as an SVG and an horizontal bar with

benchopt/plotting/html/templates/result.mako.html

@@ -379,7 +379,8 @@ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">System
                     'plot_kind': document.getElementById('plot_kind').value,
                     'scale': document.getElementById('change_scaling').value,
                     'with_quantiles': document.getElementById('change_shades').checked,
-                    'hidden_solvers': []
+                    'hidden_solvers': [],
+                    'disabled_solvers_accordions': []
                 });
             });
         </script>