feat: add event detail inspector panel

[atharrva01]

was doing a gap analysis between ig-desktop and the plugin. one thing that stood out , ig-desktop lets you click any row and inspect all its fields. plugin had nothing like that. if you're running trace_exec with 15+ columns you literally can't drill into a single event.

built the inspector panel for this.

magnifying glass on any row → side panel with all event fields. header shows event details + proc.comm subtitle, formatted/raw JSON toggle, copy button, close on backdrop click. also added event count chip in the toolbar.

side note, nested fields like k8s.owner were showing [object Object]. fixed that too with a recursive flatten.

files:

• utility.tsx - attaches __raw to each row
• GadgetWithDataSource/index.tsx - icon column, overlay, count chip
• EventDetailPanel/index.tsx - new component

heads up on impl: MUI <Drawer> silently fails here, .MuiDrawer-paper never mounts in Headlamp's bundled MUI. debugged to the DOM level, ended up using a plain position: fixed div instead.

screenshots + recording 👇

Before :-

After :-

hp-feature.mp4

[ashu8912]

Couple of issues i found, on moving from small screen to maximizing it, the layout breaks.

Also on light theme this is not visible

[atharrva01]

hi @ashu8912 I've fixed both! swapped the hardcoded dark color with bgcolor: 'background.paper' for light theme, and changed the width to min(420px, 100%) so it doesn't break on resize.

also cleaned up a few extra things i noticed , ripped out react-json-pretty (it was always dark), added Escape to close, and locked body overflow to stop the panel from shaking on tooltip hover.

[Copilot]

Pull request overview

Adds an “event detail inspector” side panel to improve trace/event usability by letting users drill into all fields for a selected table row, including nested fields.

Changes:

• Attach raw event payloads to buffered rows to support a full-detail inspector view.
• Add an inspect (magnifying glass) action column + overlay panel wiring, plus an event count chip above the table.
• Introduce EventDetailPanel component with formatted (flattened) view, raw JSON toggle, copy-to-clipboard, and Escape/backdrop close behavior.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/gadgets/utility.tsx	Attaches raw event payload (__raw) to each buffered row for inspector use.
src/common/GadgetWithDataSource/index.tsx	Adds inspect action column, overlay/panel mounting, body scroll locking, and an “N events” chip.
src/common/EventDetailPanel/index.tsx	New inspector panel UI: flatten nested fields, show raw JSON, copy, close actions.
package.json	Updates build script to write dist/package.json; removes react-json-pretty.
package-lock.json	Lockfile updates consistent with dependency/script changes and version bump.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

massagedData.__raw = data stores the full raw event object on every buffered row (up to MAX_DATA_LIMIT). For high-volume traces this can significantly increase memory usage and slow down rendering/GC. Consider storing a pruned/raw-string representation (e.g., __rawJson), storing raw only for the last N rows, or making raw attachment conditional on the inspector being enabled.

[atharrva01]

hey @ashu8912 @illume , pushed a fix commit addressing the Copilot suggestions that actually mattered,

• copy feedback now only triggers on successful clipboard write (moved setCopied inside .then())
• added a copyTimerRef to clear the timeout on unmount, no more stale state updates
• aria-labels on the copy and close buttons, and on the inspect icon too
• scroll lock now captures and restores the previous overflow value instead of blindly resetting it

skipped the __raw memory concern for now, at MAX_DATA_LIMIT it's a known trade-off and i'd rather not over-engineer it at this stage. happy to revisit if it's a blocker.

lmk if anything else needs a look!

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/gadgets/utility.tsx:143

• Storing the full raw event object on every buffered row (massagedData.__raw = data) can significantly increase memory usage and UI cost, especially with MAX_DATA_LIMIT set to 20000. Consider a lighter approach (e.g., storing only a JSON string, storing only a subset of raw fields, reducing the limit when __raw is present, or keeping raw events in a separate bounded store keyed by row id).

    // keep raw event for the detail inspector
    massagedData.__raw = data;
    setBufferedGadgetData(prevData => {
      const newData = [...(prevData[dsID] || []), massagedData];
      return {
        ...prevData,
        [dsID]: newData.slice(-MAX_DATA_LIMIT),
      };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[atharrva01]

@ashu8912 @illume , co-pilots reviews addressed!

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.