Toggle low impact sections

CHANGELOG.md

@@ -4,8 +4,9 @@
 ## Unreleased
 
 * Compress data before sending
-* Integrate Rails' new ActiveSupport::Editor feature in local profiler
-* Fix Safari's incompatible date format bug in local profiler
+* [local profiler] Integrate Rails' new ActiveSupport::Editor feature
+* [local profiler] Toggle low impact sections visibility
+* [local profiler] Fix Safari's incompatible date format bug
 
 ## 1.10.1 (2025-12-24)
 

lib/rorvswild/local/javascript/local.js

@@ -74,6 +74,18 @@ RorVsWild.Local.prototype.toggleCommand = function(event) {
   document.querySelector(event.currentTarget.dataset.target).classList.toggle("is-open")
 }
 
+RorVsWild.Local.prototype.toggleLowImpactSections = function(event) {
+  var button = event.currentTarget
+  var sections = document.querySelectorAll(".rorvswild-local-panel__details__section[data-low-impact]")
+  var isHidden = sections[0].classList.contains("is-hidden")
+
+  sections.forEach(function(section) {
+    section.classList.toggle("is-hidden")
+  })
+
+  button.textContent = isHidden ? "↑ Hide low impact sections" : "↓ View low impact sections"
+}
+
 RorVsWild.Local.prototype.expand = function() {
   this.active = true
   this.goToRequestDetail(event)
@@ -190,9 +202,11 @@ RorVsWild.Local.Request.prototype.runtime = function() {
 RorVsWild.Local.Request.prototype.sections = function() {
   return this.data.sections.map(function(section) {
     var runtime = (section.total_runtime - section.children_runtime)
+    var impactValue = runtime * 100 / this.data.runtime
     return {
       id: RorVsWild.Local.nextId(),
-      impact: RorVsWild.Local.formatImpact(runtime * 100 / this.data.runtime),
+      impact: RorVsWild.Local.formatImpact(impactValue),
+      isLowImpact: impactValue < 1,
       language: RorVsWild.Local.kindToLanguage(section.kind),
       totalRuntime: RorVsWild.Local.relevantRounding(section.total_runtime),
       asyncRuntime: RorVsWild.Local.relevantRounding(section.async_runtime),
@@ -213,6 +227,10 @@ RorVsWild.Local.Request.prototype.sections = function() {
   }.bind(this)).sort(function(a, b) { return b.selfRuntime - a.selfRuntime })
 }
 
+RorVsWild.Local.Request.prototype.hasLowImpactSections = function() {
+  return this.sections().some(function(section) { return section.isLowImpact })
+}
+
 RorVsWild.Local.Request.prototype.sectionsImpactPerKind = function() {
   var total = 0
   var perKind = this.sections().reduce(function(object, section) {

lib/rorvswild/local/local.html.erb

@@ -148,6 +148,11 @@
     {{#sections}}
       {{> RorVsWild.Local.Section}}
     {{/sections}}
+    {{#hasLowImpactSections}}
+      <div class="rorvswild-local-panel__toggle-low-impact">
+        <button data-events="click->toggleLowImpactSections" class="rorvswild-local-panel__toggle-low-impact__button">↓ view low impact sections</button>
+      </div>
+    {{/hasLowImpactSections}}
   </div>
 </script>
 
@@ -162,7 +167,7 @@
 </script>
 
 <script type="x-tmpl-mustache" data-partial="RorVsWild.Local.Section">
-  <div class="rorvswild-local-panel__details__section" id="section-{{id}}">
+  <div class="rorvswild-local-panel__details__section {{#isLowImpact}}is-hidden{{/isLowImpact}}" {{#isLowImpact}}data-low-impact{{/isLowImpact}} id="section-{{id}}">
     <div class="rorvswild-local-panel__details__section__main">
       <span class="rorvswild-local-panel__details__section__file">
         <button data-events="click->toggleCommand" data-target="#section-{{id}}" class="rorvswild-local-panel__details__section__kind"><span>{{kind}}</button>

lib/rorvswild/local/stylesheet/local.css

@@ -351,6 +351,10 @@ h2.rorvswild-local-panel__title {
   display: block !important;
 }
 
+.rorvswild-local-panel__details__section.is-hidden {
+  display: none !important;
+}
+
 .rorvswild-local-panel__details__section:hover {
   background: rgb(26 29 36) !important;
   transition: all .3s !important;
@@ -595,6 +599,31 @@ span.rorvswild-local-panel__details__section__kind {
   overflow-wrap: break-word !important;
 }
 
+.rorvswild-local-panel__toggle-low-impact {
+  padding: 12px !important;
+}
+
+.rorvswild-local-panel__toggle-low-impact__button {
+  background: transparent !important;
+  color: rgb(199 203 214) !important;
+  border: 1px solid rgb(72 75 80) !important;
+  box-shadow: none !important;
+  padding: 0px 8px !important;
+  font-size: 10px !important;
+  line-height: 24px !important;
+  text-transform: uppercase !important;
+  letter-spacing: 1px !important;
+  cursor: pointer !important;
+  font-weight: 700 !important;
+  transition: all 0.2s !important;
+}
+
+.rorvswild-local-panel__toggle-low-impact__button:hover {
+  background: transparent !important;
+  color: rgb(223 228 242) !important;
+  border-color: rgb(147 149 156) !important;
+}
+
 /* Panel Footer */
 .rorvswild-local-panel__footer {
   width: 100% !important;