feat: gray out non-matches when searching (#554)

* feat: gray out non-matches when searching

This PR reduces the saturation (from 60 to 10) for non-matches.

Fixes #553

* Add changelog entry

---------

Co-authored-by: Vesa Laakso <482561+valscion@users.noreply.github.com>

CHANGELOG.md

@@ -14,6 +14,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
  * **Improvement**
    * Support reading large (>500MB) stats.json files ([#423](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/423) by [@henry-alakazhang](https://github.com/henry-alakazhang))
+   * Improve search UX by graying out non-matches ([#554](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/554) by [@starpit](https://github.com/starpit))
 
 ## 4.7.0
 

client/components/Treemap.jsx

@@ -22,11 +22,7 @@ export default class Treemap extends Component {
         dataObject: this.getTreemapDataObject(nextProps.data)
       });
     } else if (nextProps.highlightGroups !== this.props.highlightGroups) {
-      const groupsToRedraw = [
-        ...nextProps.highlightGroups,
-        ...this.props.highlightGroups
-      ];
-      setTimeout(() => this.treemap.redraw(false, groupsToRedraw));
+      setTimeout(() => this.treemap.redraw());
     }
   }
 
@@ -102,6 +98,11 @@ export default class Treemap extends Component {
             b: 0,
             a: 0.8
           };
+        } else if (highlightGroups && highlightGroups.size > 0) {
+          // this means a search (e.g.) is active, but this module
+          // does not match; gray it out
+          // https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/553
+          variables.groupColor.s = 10;
         }
       },
       /**