This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 0a546fc ui: eBPF process picker — row click expands, selection stays
on checkbox
0a546fc is described below
commit 0a546fc49cd49e037910b0cdbea3601fa2084151
Author: Wu Sheng <[email protected]>
AuthorDate: Wed May 20 08:51:25 2026 +0800
ui: eBPF process picker — row click expands, selection stays on checkbox
Row click used to pin/unpin (toggleProcessId), which made the "let me
read the details" gesture pin a process the operator didn't mean to
include in the analyze. Worse, since the watcher on selectedProcessIds
re-runs Analyze on every pin change, a curiosity-driven row click
fired a full analyze request.
Split the gestures:
- Row click → toggleProcessExpanded (open/close the detail panel).
- Checkbox click → toggleProcessId (the only pin/unpin path).
- Chevron button → no own handler; the click bubbles to the row's
expand toggle, which gives keyboard users a focusable expand
affordance for free.
The checkbox cell keeps `@click.stop` so clicks inside the checkbox
column don't double-fire as both a pin and an expand.
---
apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue | 14 ++++++++++++--
1 file changed, 12 insertions(+), 2 deletions(-)
diff --git a/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
b/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
index 09c19ac..abd351b 100644
--- a/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
+++ b/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
@@ -628,10 +628,21 @@ function toggleNewTaskLabel(l: string): void {
</div>
<div v-if="!filteredProcesses.length" class="empty">No
matches.</div>
<template v-for="p in filteredProcesses" :key="p.id">
+ <!-- Row click toggles the detail panel. Selection (pin/
+ unpin) lives entirely on the checkbox — clicking the
+ row body has no effect on selection. This split keeps
+ the "let me read the details" gesture from
+ accidentally pinning a process the operator didn't
+ mean to include in the analyze. The checkbox cell
+ uses `@click.stop` so clicks inside it don't bubble
+ up and trigger the row's expand toggle. The chevron
+ has no own handler — clicking the button bubbles to
+ the row's expand toggle, giving keyboard users a
+ focusable expand affordance for free. -->
<div
class="pr"
:class="{ on: selectedProcessIds.includes(p.id) }"
- @click="toggleProcessId(p.id)"
+ @click="toggleProcessExpanded(p.id)"
>
<div class="cc cc-sel" @click.stop>
<input
@@ -650,7 +661,6 @@ function toggleNewTaskLabel(l: string): void {
:class="{ open: expandedProcessIds.has(p.id) }"
:aria-expanded="expandedProcessIds.has(p.id)"
:aria-label="expandedProcessIds.has(p.id) ? 'Collapse
details' : 'Expand details'"
- @click.stop="toggleProcessExpanded(p.id)"
>
<Icon name="caret" :size="10" />
</button>
