n_plus_insight 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8ae9f6ffeef6402349d63d9ceb1797a71aeb567e18383019b95e455b32d9b1b
-  data.tar.gz: 86c59f125447834906a627ed2ace73cae60b171ecf4d3ef7183e7864d919cc0f
+  metadata.gz: 158d6070accc936171d9807ac597638529b17fc02e84694e28fc6a10ac250f26
+  data.tar.gz: 0ea83df32503c9f713e979053664b55d13ffc4492249d9d206f545f6ebf68c41
 SHA512:
-  metadata.gz: 137231015fad7ceee3a2658aafb9ab7accea46c44feea299e9d17eb4e5f960e65b4792102592556fa9cff7bfda956cba9f6e5c04c0b02ab641f4e6e0f4541b5c
-  data.tar.gz: f24bbbb97328f57c943a466c586494fbf94147349c99fb209c1232aa398e7058abe6d7c0b9dc5024e0a594b6388a0c9b6ac8999115e45054acf6961407b923c8
+  metadata.gz: a340454688cc2beadcf95c747dd53d928c0e657a7b3c580b5415b011dac3b1640f58c97a5df30e8d853531e787e240a40f5855efb71ffce060cfec87c9bd671b
+  data.tar.gz: 6c483b35801c707df9f88777a0417fd548d9a74996f137673284e9dbca95477b1365e2b011c960a00ec5effb091ff78e05858f42c360ffe08d2157356f4710ce

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.1.3 - 2026-08-03
+
+- Add per-pattern query loading waterfalls to the mounted dashboard and
+  on-page inspector, including individual query offsets, durations, elapsed
+  span, and cumulative database time.
+- Add styled hover and keyboard-focus tooltips to every waterfall query bar.
+- Add expandable backtrace to pattern show page.
+
 ## 0.1.0 - 2026-07-28
 
 - Detect repeated Active Record query shapes within a request.

data/README.md

@@ -15,6 +15,7 @@ For each finding, NPlusInsight shows:
 
 - the application file, line number, and surrounding source code;
 - the repeated SQL shape, query count, and cumulative duration;
+- a query loading waterfall with per-query start offsets and durations;
 - the Active Record models and associations involved;
 - suggested eager-loading and strict-loading remediations;
 - an optional on-page alert and a mounted findings dashboard.
@@ -224,8 +225,9 @@ For each uncached `SELECT` query, it:
 6. combines repeated shapes attributed to the same application source line into
    one finding;
 7. inspects Active Record reflections to infer every relevant model association;
-8. renders the affected associations as a model tree;
-9. generates combined eager-loading and strict-loading suggestions for the
+8. plots each repeated query on a per-pattern loading waterfall;
+9. renders the affected associations as a model tree;
+10. generates combined eager-loading and strict-loading suggestions for the
    complete tree.
 
 For example, if one serializer line lazily loads both `post.comments` and

data/app/assets/n_plus_insight/overlay.css

@@ -104,6 +104,30 @@
 #n1v-root .n1v-line { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; min-width: max-content !important; padding: 0 12px !important; }
 #n1v-root .n1v-line.n1v-active { background: rgba(217, 45, 32, .28) !important; }
 #n1v-root .n1v-line-number { color: #98a2b3 !important; user-select: none !important; }
+#n1v-root .n1v-waterfall-summary { margin: 0 0 8px !important; color: var(--n1v-muted) !important; font: 11px/1.4 ui-sans-serif, system-ui, sans-serif !important; }
+#n1v-root .n1v-waterfall { min-width: 0 !important; }
+#n1v-root .n1v-waterfall-axis { display: flex !important; justify-content: space-between !important; margin: 0 62px 4px 94px !important; color: var(--n1v-muted) !important; font: 10px/1.3 ui-sans-serif, system-ui, sans-serif !important; }
+#n1v-root .n1v-waterfall-row { display: grid !important; grid-template-columns: 84px minmax(120px, 1fr) 54px !important; gap: 8px !important; align-items: center !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; }
+#n1v-root .n1v-waterfall-row + .n1v-waterfall-row { border-top: 1px solid var(--n1v-border) !important; }
+#n1v-root .n1v-waterfall-label { min-width: 0 !important; padding: 6px 0 !important; }
+#n1v-root .n1v-waterfall-label strong, #n1v-root .n1v-waterfall-label small { display: block !important; overflow: hidden !important; color: var(--n1v-text) !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 600 11px/1.35 ui-sans-serif, system-ui, sans-serif !important; }
+#n1v-root .n1v-waterfall-label small { color: var(--n1v-muted) !important; font-size: 10px !important; font-weight: 400 !important; }
+#n1v-root .n1v-waterfall-track { position: relative !important; height: 20px !important; overflow: visible !important; border-radius: 5px !important; background: repeating-linear-gradient(90deg, var(--n1v-surface) 0, var(--n1v-surface) calc(25% - 1px), var(--n1v-border) 25%) !important; }
+#n1v-root .n1v-waterfall-bar { position: absolute !important; top: 3px !important; left: var(--n1v-waterfall-start) !important; width: var(--n1v-waterfall-width) !important; min-width: 3px !important; height: 14px !important; border-radius: 3px !important; background: var(--n1v-accent) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2) !important; }
+#n1v-root .n1v-waterfall-bar:hover, #n1v-root .n1v-waterfall-bar:focus-visible { z-index: 20 !important; filter: brightness(1.15) !important; outline: 2px solid var(--n1v-accent) !important; outline-offset: 2px !important; }
+#n1v-root .n1v-waterfall-tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 8px) !important; z-index: 30 !important; display: grid !important; grid-template-columns: auto auto !important; gap: 1px 10px !important; width: max-content !important; max-width: 180px !important; margin: 0 !important; padding: 7px 9px !important; border: 1px solid var(--n1v-border) !important; border-radius: 7px !important; background: var(--n1v-text) !important; color: var(--n1v-bg) !important; box-shadow: 0 7px 20px rgba(0,0,0,.25) !important; opacity: 0 !important; pointer-events: none !important; transform: translate(-50%,4px) !important; transition: opacity .12s ease,transform .12s ease !important; font: 10px/1.35 ui-sans-serif,system-ui,sans-serif !important; text-align: left !important; white-space: nowrap !important; }
+#n1v-root .n1v-waterfall-tooltip::after { content: "" !important; position: absolute !important; top: 100% !important; left: 50% !important; border: 5px solid transparent !important; border-top-color: var(--n1v-text) !important; transform: translateX(-50%) !important; }
+#n1v-root .n1v-waterfall-tooltip strong { margin: 0 !important; color: inherit !important; font: 650 10px/1.35 ui-sans-serif,system-ui,sans-serif !important; }
+#n1v-root .n1v-waterfall-tooltip > span { margin: 0 !important; color: inherit !important; font: 700 10px/1.35 ui-sans-serif,system-ui,sans-serif !important; text-align: right !important; }
+#n1v-root .n1v-waterfall-tooltip small { grid-column: 1 / -1 !important; margin: 0 !important; color: inherit !important; opacity: .72 !important; font: 10px/1.35 ui-sans-serif,system-ui,sans-serif !important; }
+#n1v-root .n1v-waterfall-bar:hover .n1v-waterfall-tooltip, #n1v-root .n1v-waterfall-bar:focus-visible .n1v-waterfall-tooltip { opacity: 1 !important; transform: translate(-50%,0) !important; }
+#n1v-root .n1v-waterfall-bar-start .n1v-waterfall-tooltip { left: 0 !important; transform: translate(0,4px) !important; }
+#n1v-root .n1v-waterfall-bar-start:hover .n1v-waterfall-tooltip, #n1v-root .n1v-waterfall-bar-start:focus-visible .n1v-waterfall-tooltip { transform: translate(0,0) !important; }
+#n1v-root .n1v-waterfall-bar-start .n1v-waterfall-tooltip::after { left: 5px !important; transform: none !important; }
+#n1v-root .n1v-waterfall-bar-end .n1v-waterfall-tooltip { right: 0 !important; left: auto !important; transform: translate(0,4px) !important; }
+#n1v-root .n1v-waterfall-bar-end:hover .n1v-waterfall-tooltip, #n1v-root .n1v-waterfall-bar-end:focus-visible .n1v-waterfall-tooltip { transform: translate(0,0) !important; }
+#n1v-root .n1v-waterfall-bar-end .n1v-waterfall-tooltip::after { right: 5px !important; left: auto !important; transform: none !important; }
+#n1v-root .n1v-waterfall-total { color: var(--n1v-muted) !important; text-align: right !important; white-space: nowrap !important; font: 10px/1.3 ui-sans-serif, system-ui, sans-serif !important; }
 #n1v-root .n1v-graph { min-height: 74px !important; overflow: auto !important; padding: 4px 0 !important; }
 #n1v-root .n1v-tree { margin: 0 !important; padding: 0 !important; list-style: none !important; }
 #n1v-root .n1v-tree .n1v-tree { margin-left: 18px !important; padding-left: 18px !important; border-left: 1px solid var(--n1v-border) !important; }
@@ -131,8 +155,11 @@
 @media (max-width: 560px) {
   #n1v-root { right: 10px !important; bottom: 10px !important; }
   #n1v-root .n1v-panel { width: calc(100vw - 20px) !important; max-height: calc(100vh - 84px) !important; bottom: 62px !important; }
+  #n1v-root .n1v-waterfall-axis { margin-left: 72px !important; }
+  #n1v-root .n1v-waterfall-row { grid-template-columns: 64px minmax(96px, 1fr) 48px !important; gap: 5px !important; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   #n1v-root .n1v-launcher { animation: none !important; }
+  #n1v-root .n1v-waterfall-tooltip { transition: none !important; }
 }

data/app/assets/n_plus_insight/overlay.js

@@ -23,16 +23,38 @@
     }
   }
 
+  function formatMilliseconds(value) {
+    return (Number(value) || 0)
+      .toFixed(2)
+      .replace(/\.00$/, "")
+      .replace(/(\.\d)0$/, "$1");
+  }
+
   function queryGroupsFor(finding) {
     if ((finding.query_groups || []).length) return finding.query_groups;
     return [{
       sql: finding.sql,
       query_count: finding.query_count,
       total_ms: finding.total_ms,
-      tables: []
+      tables: [],
+      waterfall: []
     }];
   }
 
+  function waterfallEntriesFor(group) {
+    if ((group.waterfall || []).length) return group.waterfall;
+
+    var count = Number(group.query_count) || 0;
+    var duration = count ? (Number(group.total_ms) || 0) / count : 0;
+    return Array.from({ length: count }, function (_value, index) {
+      return {
+        index: index + 1,
+        offset_ms: duration * index,
+        duration_ms: duration
+      };
+    });
+  }
+
   var findings = decodePayload(root.dataset.payload || "");
   var initialFindingIndex = findings.reduce(function (bestIndex, finding, index) {
     var best = findings[bestIndex];
@@ -130,6 +152,78 @@
     container.appendChild(section);
   }
 
+  function renderWaterfall(container, finding) {
+    var groups = queryGroupsFor(finding);
+    var span = Number(finding.waterfall_ms) || groups.reduce(function (maximum, group) {
+      return Math.max(maximum, waterfallEntriesFor(group).reduce(function (groupMaximum, query) {
+        return Math.max(groupMaximum, Number(query.offset_ms) + Number(query.duration_ms));
+      }, 0));
+    }, 0);
+    span = Math.max(span, 0.01);
+
+    var section = element("section", "n1v-section");
+    section.appendChild(element("h3", "n1v-heading", "Query loading waterfall"));
+    section.appendChild(element(
+      "p",
+      "n1v-waterfall-summary",
+      formatMilliseconds(finding.waterfall_ms || span) +
+        " ms elapsed · " + finding.total_ms + " ms database time · Hover a bar for timing"
+    ));
+
+    var waterfall = element("div", "n1v-waterfall");
+    waterfall.setAttribute("role", "img");
+    waterfall.setAttribute(
+      "aria-label",
+      "Waterfall of repeated query patterns over " + Number(finding.waterfall_ms || span) + " milliseconds"
+    );
+
+    var axis = element("div", "n1v-waterfall-axis");
+    axis.setAttribute("aria-hidden", "true");
+    axis.appendChild(element("span", "", "0 ms"));
+    axis.appendChild(element("span", "", formatMilliseconds(finding.waterfall_ms || span) + " ms"));
+    waterfall.appendChild(axis);
+
+    groups.forEach(function (group, groupIndex) {
+      var row = element("div", "n1v-waterfall-row");
+      var label = element("div", "n1v-waterfall-label");
+      label.appendChild(element("strong", "", "Pattern " + (groupIndex + 1)));
+      label.appendChild(element("small", "", (group.tables || []).join(", ") || "Repeated query"));
+      row.appendChild(label);
+
+      var track = element("div", "n1v-waterfall-track");
+      waterfallEntriesFor(group).forEach(function (query, queryIndex) {
+        var offset = Math.max(Number(query.offset_ms) || 0, 0);
+        var duration = Math.max(Number(query.duration_ms) || 0, 0);
+        var startPercent = Math.min(offset / span * 100, 100);
+        var widthPercent = Math.min(duration / span * 100, 100 - startPercent);
+        var edgeClass = startPercent < 20 ? " n1v-waterfall-bar-start" :
+          (startPercent > 80 ? " n1v-waterfall-bar-end" : "");
+        var bar = element("span", "n1v-waterfall-bar" + edgeClass);
+        var queryNumber = query.index || queryIndex + 1;
+        bar.style.setProperty("--n1v-waterfall-start", startPercent.toFixed(4) + "%");
+        bar.style.setProperty("--n1v-waterfall-width", widthPercent.toFixed(4) + "%");
+        bar.tabIndex = 0;
+
+        var tooltip = element("span", "n1v-waterfall-tooltip");
+        var tooltipId = "n1v-waterfall-tooltip-" + groupIndex + "-" + queryIndex;
+        tooltip.id = tooltipId;
+        tooltip.setAttribute("role", "tooltip");
+        tooltip.appendChild(element("strong", "", "Query " + queryNumber));
+        tooltip.appendChild(element("span", "", formatMilliseconds(duration) + " ms"));
+        tooltip.appendChild(element("small", "", "Started +" + formatMilliseconds(offset) + " ms"));
+        bar.setAttribute("aria-describedby", tooltipId);
+        bar.appendChild(tooltip);
+        track.appendChild(bar);
+      });
+      row.appendChild(track);
+      row.appendChild(element("span", "n1v-waterfall-total", group.total_ms + " ms"));
+      waterfall.appendChild(row);
+    });
+
+    section.appendChild(waterfall);
+    container.appendChild(section);
+  }
+
   function renderTreeNode(entry) {
     var item = element("li", "n1v-tree-item");
     if (entry.association) {
@@ -223,6 +317,7 @@
 
     var finding = findings[index];
     renderSource(body, finding);
+    renderWaterfall(body, finding);
     renderGraph(body, finding);
     renderQueries(body, finding);
     renderFixes(body, finding);

data/app/views/layouts/n_plus_insight/application.html.erb

@@ -32,6 +32,31 @@
       .source div.active { background:rgba(180,35,24,.28); } .source b { color:#9ca3af; font-weight:400; user-select:none; }
       .query-pattern + .query-pattern { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
       .query-pattern h3 { margin-bottom:8px; }
+      .waterfall-summary { margin-bottom:14px; }
+      .waterfall { min-width:0; }
+      .waterfall-axis { display:flex; justify-content:space-between; margin:0 76px 5px 136px; color:var(--muted); font-size:11px; }
+      .waterfall-row { display:grid; grid-template-columns:124px minmax(180px,1fr) 64px; gap:12px; align-items:center; min-height:38px; }
+      .waterfall-row + .waterfall-row { border-top:1px solid var(--line); }
+      .waterfall-label { min-width:0; padding:8px 0; }
+      .waterfall-label strong,.waterfall-label small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+      .waterfall-label small { color:var(--muted); font-size:11px; }
+      .waterfall-track { position:relative; height:22px; overflow:visible; border-radius:5px; background:repeating-linear-gradient(90deg,var(--bg) 0,var(--bg) calc(25% - 1px),var(--line) 25%); }
+      .waterfall-bar { position:absolute; top:3px; left:var(--waterfall-start); width:var(--waterfall-width); min-width:3px; height:16px; border-radius:4px; background:var(--accent); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
+      .waterfall-bar:hover,.waterfall-bar:focus-visible { z-index:20; filter:brightness(1.15); outline:2px solid var(--accent); outline-offset:2px; }
+      .waterfall-tooltip { position:absolute; left:50%; bottom:calc(100% + 9px); z-index:30; display:grid; grid-template-columns:auto auto; gap:1px 12px; width:max-content; max-width:190px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--text); color:var(--panel); box-shadow:0 7px 20px rgba(0,0,0,.22); opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .12s ease,transform .12s ease; font:11px/1.35 ui-sans-serif,system-ui,-apple-system,sans-serif; }
+      .waterfall-tooltip::after { content:""; position:absolute; top:100%; left:50%; border:5px solid transparent; border-top-color:var(--text); transform:translateX(-50%); }
+      .waterfall-tooltip strong { color:inherit; font-size:11px; }
+      .waterfall-tooltip > span { color:inherit; font-weight:700; text-align:right; }
+      .waterfall-tooltip small { grid-column:1 / -1; color:inherit; opacity:.72; }
+      .waterfall-bar:hover .waterfall-tooltip,.waterfall-bar:focus-visible .waterfall-tooltip { opacity:1; transform:translate(-50%,0); }
+      .waterfall-bar-start .waterfall-tooltip { left:0; transform:translate(0,4px); }
+      .waterfall-bar-start:hover .waterfall-tooltip,.waterfall-bar-start:focus-visible .waterfall-tooltip { transform:translate(0,0); }
+      .waterfall-bar-start .waterfall-tooltip::after { left:6px; transform:none; }
+      .waterfall-bar-end .waterfall-tooltip { right:0; left:auto; transform:translate(0,4px); }
+      .waterfall-bar-end:hover .waterfall-tooltip,.waterfall-bar-end:focus-visible .waterfall-tooltip { transform:translate(0,0); }
+      .waterfall-bar-end .waterfall-tooltip::after { right:6px; left:auto; transform:none; }
+      .waterfall-total { color:var(--muted); font-size:12px; text-align:right; white-space:nowrap; }
+      .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
       .tree-wrap { overflow:auto; padding:4px 0; }
       .model-tree { list-style:none; margin:0; padding:0; }
       .model-tree .model-tree { margin-left:22px; padding-left:20px; border-left:1px solid var(--line); }
@@ -42,8 +67,18 @@
       .tree-node small { color:var(--muted); }
       .tree-edge { display:block; margin:0 0 5px; color:var(--muted); font-size:12px; }
       .suggestion + .suggestion { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
+      .method-backtrace summary { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; cursor:pointer; list-style-position:outside; }
+      .method-backtrace summary strong,.method-backtrace summary small { display:block; }
+      .method-backtrace summary small { margin-top:3px; color:var(--muted); font-size:13px; font-weight:400; }
+      .method-backtrace ol { margin:18px 0 0; padding-left:28px; }
+      .method-backtrace li { padding:7px 0 7px 5px; }
+      .method-backtrace li + li { border-top:1px solid var(--line); }
+      .method-backtrace li code,.method-backtrace li span { display:block; overflow-wrap:anywhere; }
+      .method-backtrace li code { color:var(--text); font-weight:650; }
+      .method-backtrace li span { color:var(--muted); font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
       .crumb { display:inline-block; margin-bottom:18px; }
-      @media (max-width:760px) { .grid { grid-template-columns:1fr; } main, header div { width:min(100% - 20px,1120px); } .row { flex-direction:column; } }
+      @media (max-width:760px) { .grid { grid-template-columns:1fr; } main, header div { width:min(100% - 20px,1120px); } .row { flex-direction:column; } .waterfall-axis { margin-left:88px; } .waterfall-row { grid-template-columns:76px minmax(130px,1fr) 56px; gap:7px; } }
+      @media (prefers-reduced-motion:reduce) { .waterfall-tooltip { transition:none; } }
     </style>
   </head>
   <body>

data/app/views/n_plus_insight/detections/show.html.erb

@@ -40,6 +40,58 @@
       </div>
     </section>
 
+    <section>
+      <div class="row">
+        <div>
+          <h2>Query loading waterfall</h2>
+          <p class="muted waterfall-summary">
+            <%= @detection.waterfall_ms %> ms elapsed
+            &middot; <%= @detection.total_ms %> ms database time
+            &middot; Hover a bar for its start time and duration
+          </p>
+        </div>
+        <span class="badge"><%= @detection.query_count %> queries</span>
+      </div>
+      <div
+        class="waterfall"
+        role="img"
+        aria-label="Waterfall of repeated query patterns over <%= @detection.waterfall_ms %> milliseconds">
+        <div class="waterfall-axis" aria-hidden="true">
+          <span>0 ms</span>
+          <span><%= @detection.waterfall_ms %> ms</span>
+        </div>
+        <% span_ms = [@detection.waterfall_ms.to_f, 0.01].max %>
+        <% @detection.query_groups.each_with_index do |group, pattern_index| %>
+          <div class="waterfall-row">
+            <div class="waterfall-label">
+              <strong>Pattern <%= pattern_index + 1 %></strong>
+              <small><%= group[:tables].join(", ") %></small>
+            </div>
+            <div class="waterfall-track">
+              <% (group[:waterfall] || []).each do |query| %>
+                <% start_percent = [[query[:offset_ms].to_f / span_ms * 100, 0].max, 100].min %>
+                <% width_percent = [[query[:duration_ms].to_f / span_ms * 100, 0].max, 100 - start_percent].min %>
+                <% edge_class = start_percent < 20 ? "waterfall-bar-start" : (start_percent > 80 ? "waterfall-bar-end" : nil) %>
+                <% tooltip_id = "waterfall-tooltip-#{pattern_index}-#{query[:index]}" %>
+                <span
+                  class="waterfall-bar <%= edge_class %>"
+                  style="--waterfall-start:<%= start_percent.round(4) %>%;--waterfall-width:<%= width_percent.round(4) %>%"
+                  tabindex="0"
+                  aria-describedby="<%= tooltip_id %>">
+                  <span class="waterfall-tooltip" id="<%= tooltip_id %>" role="tooltip">
+                    <strong>Query <%= query[:index] %></strong>
+                    <span><%= query[:duration_ms] %> ms</span>
+                    <small>Started +<%= query[:offset_ms] %> ms</small>
+                  </span>
+                </span>
+              <% end %>
+            </div>
+            <span class="waterfall-total"><%= group[:total_ms] %> ms</span>
+          </div>
+        <% end %>
+      </div>
+    </section>
+
     <section>
       <h2>Suggested fixes</h2>
       <% @detection.suggestions.each do |suggestion| %>
@@ -50,6 +102,29 @@
         </div>
       <% end %>
     </section>
+
+    <% if @detection.location %>
+      <% frames = @detection.location.backtrace.presence || [{ path: @detection.location.path, line: @detection.location.line, label: @detection.location.label }] %>
+      <section>
+        <details class="method-backtrace">
+          <summary>
+            <span>
+              <strong>Method backtrace</strong>
+              <small>Expand to trace the query through serializers and other application methods</small>
+            </span>
+            <span class="badge"><%= frames.length %> frame<%= "s" unless frames.one? %></span>
+          </summary>
+          <ol>
+            <% frames.each do |frame| %>
+              <li>
+                <code><%= frame[:label].presence || "(unknown method)" %></code>
+                <span><%= frame[:path] %>:<%= frame[:line] %></span>
+              </li>
+            <% end %>
+          </ol>
+        </details>
+      </section>
+    <% end %>
   </div>
 
   <section>

data/lib/n_plus_insight/analyzer.rb

@@ -24,6 +24,7 @@ module NPlusInsight
 
     def build_detection(query_groups)
       location = dominant_location(query_groups.flatten)
+      timeline_origin = query_groups.flatten.filter_map(&:started_at).map(&:to_f).min
       graph_models = {}
       graph_edges = []
 
@@ -39,7 +40,8 @@ module NPlusInsight
           sql: queries.first.normalized_sql,
           query_count: queries.length,
           total_ms: queries.sum(&:duration_ms).round(2),
-          tables: tables
+          tables: tables,
+          waterfall: serialize_waterfall(queries, timeline_origin)
         }
       end
 
@@ -54,6 +56,7 @@ module NPlusInsight
         created_at: Time.now.utc.iso8601,
         query_count: serialized_groups.sum { |group| group[:query_count] },
         total_ms: serialized_groups.sum { |group| group[:total_ms] }.round(2),
+        waterfall_ms: waterfall_span(query_groups.flatten, timeline_origin),
         sql: serialized_groups.first[:sql],
         query_groups: serialized_groups,
         location: location,
@@ -64,6 +67,43 @@ module NPlusInsight
       )
     end
 
+    def serialize_waterfall(queries, timeline_origin)
+      fallback_offset = 0.0
+
+      queries
+        .each_with_index
+        .sort_by { |query, index| [query.started_at ? query.started_at.to_f : Float::INFINITY, index] }
+        .map.with_index do |(query, _original_index), index|
+          duration = query.duration_ms.to_f
+          offset = if timeline_origin && query.started_at
+            (query.started_at.to_f - timeline_origin) * 1000
+          else
+            fallback_offset
+          end
+          fallback_offset = [fallback_offset, offset + duration].max
+
+          {
+            index: index + 1,
+            name: query.name,
+            offset_ms: offset.round(2),
+            duration_ms: duration.round(2)
+          }
+        end
+    end
+
+    def waterfall_span(queries, timeline_origin)
+      if timeline_origin
+        finishes = queries.filter_map do |query|
+          next unless query.started_at
+
+          ((query.started_at.to_f - timeline_origin) * 1000) + query.duration_ms.to_f
+        end
+        return finishes.max.to_f.round(2) if finishes.any?
+      end
+
+      queries.sum { |query| query.duration_ms.to_f }.round(2)
+    end
+
     def dominant_location(queries)
       queries
         .filter_map(&:location)

data/lib/n_plus_insight/detection.rb

@@ -1,6 +1,6 @@
 module NPlusInsight
   Detection = Struct.new(
-    :id, :request_id, :method, :path, :created_at, :query_count, :total_ms,
+    :id, :request_id, :method, :path, :created_at, :query_count, :total_ms, :waterfall_ms,
     :sql, :query_groups, :location, :models, :edges, :tree, :suggestions,
     keyword_init: true
   ) do

data/lib/n_plus_insight/overlay.rb

@@ -21,6 +21,7 @@ module NPlusInsight
           path: detection.path,
           query_count: detection.query_count,
           total_ms: detection.total_ms,
+          waterfall_ms: detection.waterfall_ms,
           sql: detection.sql,
           query_groups: detection.query_groups,
           location: detection.location&.as_json,

data/lib/n_plus_insight/query.rb

@@ -1,5 +1,5 @@
 module NPlusInsight
-  Query = Struct.new(:sql, :name, :duration_ms, :cached, :location, :tables, keyword_init: true) do
+  Query = Struct.new(:sql, :name, :started_at, :duration_ms, :cached, :location, :tables, keyword_init: true) do
     def normalized_sql
       sql.to_s
         .gsub(/'(?:[^']|'')*'/, "?")

data/lib/n_plus_insight/source_location.rb

@@ -1,21 +1,30 @@
 module NPlusInsight
-  SourceLocation = Struct.new(:path, :line, :label, :snippet, keyword_init: true) do
+  SourceLocation = Struct.new(:path, :line, :label, :snippet, :backtrace, keyword_init: true) do
     FRAME_PATTERN = /\A(.+?):(\d+)(?::in [`'](.+)[`'])?\z/
+    MAX_BACKTRACE_FRAMES = 30
 
     def self.from(caller_lines)
       root = defined?(Rails) && Rails.respond_to?(:root) && Rails.root ? Rails.root.to_s.tr("\\", "/") : nil
-      frame = caller_lines.find do |entry|
+      frames = caller_lines.filter_map do |entry|
         path = entry.to_s.tr("\\", "/")
-        root ? path.start_with?("#{root}/app/", "#{root}/lib/") : !path.include?("/gems/")
-      end
-      return unless frame
+        next unless root ? path.start_with?("#{root}/app/", "#{root}/lib/") : !path.include?("/gems/")
+
+        match = FRAME_PATTERN.match(entry.to_s)
+        next unless match
 
-      match = FRAME_PATTERN.match(frame.to_s)
-      return unless match
+        path, line, label = match.captures
+        { path: path, line: line.to_i, label: label }
+      end.first(MAX_BACKTRACE_FRAMES)
+      return if frames.empty?
 
-      path, line, label = match.captures
-      line = line.to_i
-      new(path: path, line: line, label: label, snippet: read_snippet(path, line))
+      frame = frames.first
+      new(
+        path: frame[:path],
+        line: frame[:line],
+        label: frame[:label],
+        snippet: read_snippet(frame[:path], frame[:line]),
+        backtrace: frames
+      )
     end
 
     def self.read_snippet(path, line)
@@ -29,7 +38,7 @@ module NPlusInsight
     end
 
     def as_json(*)
-      { path: path, line: line, label: label, snippet: snippet }
+      { path: path, line: line, label: label, snippet: snippet, backtrace: backtrace }
     end
   end
 end

data/lib/n_plus_insight/subscriber.rb

@@ -22,6 +22,7 @@ module NPlusInsight
         collector << Query.new(
           sql: sql,
           name: payload[:name],
+          started_at: started.to_f,
           duration_ms: (finished - started) * 1000,
           cached: payload[:cached],
           location: SourceLocation.from(caller),

data/lib/n_plus_insight/version.rb

@@ -1,3 +1,3 @@
 module NPlusInsight
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: n_plus_insight
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Jory Leech