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 <[email protected]>
webpack-contrib · Feb 13, 2023 · f959f9c · f959f9c
1 parent e231c77
commit f959f9c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/client/components/Treemap.jsx b/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;
         }
       },
       /**