Group-mode bar plot: fix inner gap (#2321)

* Group bar: fix inner gap

* Bar color

* [automated] Update CHANGELOG.md

* CSP

---------

Co-authored-by: MultiQC Bot <multiqc-bot@seqera.io>

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### MultiQC updates
 
+- Group-mode bar plot: fix inner gap ([#2321](https://github.com/MultiQC/MultiQC/pull/2321))
+
 ### New modules
 
 ### Module updates

CSP.txt

@@ -2,6 +2,9 @@
 # (Content Security Policy), you will need the following scripts allowlisted:
 
 script-src 'self'
+    # 1.21
+    'sha256-dwM1eUjdMDMsOAYMmE9F86/zv3Zme5VSXoLlJMHLrtg=' # class BarPlot extends Plot {  constructor(dump) {    super(dump);    this.filter
+
     # 1.20
     'sha256-tTUP7XMWeShHDbCfkNfh2MTlcpIsSP6ybV/ChnAPZyo=' # ////////////////////////////////////////////////// Base JS for MultiQC Reports//
     'sha256-GklszK6SQ46EiosR+K0skEd4P6blQVwOIWIXI2k1JkI=' # // Javascript for the FastQC MultiQC Mod///////////////// Per Base Sequence Cont

multiqc/plots/plotly/bar.py

@@ -92,9 +92,7 @@ def create_figure(
                 data = cat["data_pct"] if is_pct else cat["data"]
 
                 params = copy.deepcopy(self.trace_params)
-                marker = params["marker"]
-                marker["color"] = f"rgb({cat['color']})"
-
+                params["marker"]["color"] = f"rgb({cat['color']})"
                 fig.add_trace(
                     go.Bar(
                         y=self.samples,
@@ -166,7 +164,8 @@ def n_bars_to_size(n: int):
             bargap=0.2,
             yaxis=dict(
                 showgrid=False,
-                categoryorder="category descending",  # otherwise the bars will be in reversed order to sample order
+                # Otherwise the bars will be in reversed order to sample order:
+                categoryorder="category descending",
                 automargin=True,  # to make sure there is enough space for ticks labels
                 title=None,
                 hoverformat=self.layout.xaxis.hoverformat,
@@ -183,6 +182,9 @@ def n_bars_to_size(n: int):
                 # like we had a standard bar graph without subplots. We need to remove the space
                 # between the legend groups to make it look like a single legend.
                 tracegroupgap=0,
+                # Plotly plots the grouped bar graph in a reversed order in respect to
+                # the legend, so reversing the legend to match it:
+                traceorder="normal" if barmode != "group" else "reversed",
             ),
             hovermode="y unified",
             hoverlabel=dict(

multiqc/templates/default/assets/js/plots/bar.js

@@ -55,24 +55,44 @@ class BarPlot extends Plot {
     let traceParams = this.datasets[this.activeDatasetIdx]["trace_params"];
 
     return cats.map((cat) => {
-      return this.filteredSettings.map((sample, sampleIdx) => {
+      if (this.layout.barmode === "stack") {
+        // Plotting each sample as a separate trace to be able to set alpha for each
+        // sample color separately, so we can dim the de-highlighted samples.
+        return this.filteredSettings.map((sample, sampleIdx) => {
+          let params = JSON.parse(JSON.stringify(traceParams)); // deep copy
+
+          let alpha = highlighted.length > 0 && sample.highlight === null ? 0.1 : 1;
+          params.marker.color = "rgba(" + cat.color + "," + alpha + ")";
+
+          return {
+            type: "bar",
+            x: [cat.data[sampleIdx]],
+            y: [sample.name],
+            name: cat.name,
+            meta: cat.name,
+            // To make sure the legend uses bright category colors and not the dim ones:
+            showlegend: sampleIdx === firstHighlightedSample,
+            legendgroup: cat.name,
+            ...params,
+          };
+        });
+      } else {
+        // "group"
+        // Plotly adds giant gaps between bars in the group mode when adding each sample as a
+        // separate trace. Sacrificing dimming the de-highlighted bars to get rid of this gap.
         let params = JSON.parse(JSON.stringify(traceParams)); // deep copy
-
-        let alpha = highlighted.length > 0 && sample.highlight === null ? 0.1 : 1;
-        params.marker.color = "rgba(" + cat.color + "," + alpha + ")";
+        samples = this.filteredSettings.map((s) => s.name);
+        params.marker.color = "rgba(" + cat.color + ")";
 
         return {
           type: "bar",
-          x: [cat.data[sampleIdx]],
-          y: [sample.name],
+          x: cat.data,
+          y: samples,
           name: cat.name,
           meta: cat.name,
-          // To make sure the legend uses bright category colors and not the deemed ones.
-          showlegend: sampleIdx === firstHighlightedSample,
-          legendgroup: cat.name,
           ...params,
         };
-      });
+      }
     });
   }