Skip to content

feat: adjust layout and add virtual scroll for plugin detail table #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
webfansplz merged 5 commits into from
Aug 19, 2025
Merged

feat: adjust layout and add virtual scroll for plugin detail table #83

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9747ce6
refactor: refactor the plugin details table into a div base flex
CrabSAMA Aug 19, 2025
b07a7f2
feat: add virtual scroll for PluginDetailsTable
CrabSAMA Aug 19, 2025
c83b434
chore: PluginDetailsTable add aria role to simulate table with flex d…
CrabSAMA Aug 19, 2025
4480ab3
chore: add known issue FIXME
CrabSAMA Aug 19, 2025
fd347c9
feat: add selectedFields empty tips case handler, optimize render eff…
CrabSAMA Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 101 additions & 87 deletions packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,94 +71,108 @@ function toggleDurationSortType() {
</script>

<template>
<table w-full border-separate border-spacing-0>
<thead border="b base">
<tr px2 class="[&_th]:(sticky top-0 z10 border-b border-base)">
<th v-if="selectedFields.includes('hookName')" bg-base w32 ws-nowrap p1 text-center font-600>
Hook name
</th>
<th v-if="selectedFields.includes('module')" bg-base min-w100 ws-nowrap p1 text-left font-600>
<button flex="~ row gap1 items-center" w-full>
Module
<VMenu>
<span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
<i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
</span>
<template #popper>
<div class="p2" flex="~ col gap2">
<label
v-for="rule of searchFilterTypes"
:key="rule.name"
border="~ base rounded-md" px2 py1
flex="~ items-center gap-1"
select-none
:title="rule.description"
class="cursor-pointer module-type-filter"
>
<input
type="checkbox"
mr1
:checked="filterModuleTypes?.includes(rule.name)"
@change="toggleModuleType(rule)"
>
<div :class="rule.icon" icon-catppuccin />
<div text-sm>{{ rule.description || rule.name }}</div>
</label>
</div>
</template>
</VMenu>
</button>
</th>
<th v-if="selectedFields.includes('startTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
Start Time
</th>
<th v-if="selectedFields.includes('endTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
End Time
</th>
<th v-if="selectedFields.includes('duration')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
<button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
Duration
<div role="table" w-full>
<div role="row" class="sticky top-0 z10 border-b border-base" flex="~ row">
<div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
Hook name
</div>
<div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
<button flex="~ row gap1 items-center" w-full>
Module
<VMenu>
<span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
<i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
<i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
</span>
</button>
</th>
</tr>
</thead>
<tbody v-if="filtered.length">
<tr v-for="(item, index) in filtered" :key="item.id" class="[&_td]:(border-base border-b-1 border-dashed)" :class="[index === filtered.length - 1 ? '[&_td]:(border-b-0)' : '']">
<td v-if="selectedFields.includes('hookName')" w32 ws-nowrap text-center text-sm op80>
{{ HOOK_NAME_MAP[item.type] }}
</td>
<td v-if="selectedFields.includes('module')" min-w100 text-left text-ellipsis line-clamp-2>
<DisplayModuleId
:id="item.module"
w-full border-none
:session="session"
:link="`/session/${session.id}/graph?module=${item.module}`"
hover="bg-active"
border="~ base rounded" block px2 py1
/>
</td>
<td v-if="selectedFields.includes('startTime')" text-center font-mono text-sm min-w52 op80>
<time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
</td>
<td v-if="selectedFields.includes('endTime')" text-center font-mono text-sm min-w52 op80>
<time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
</td>
<td v-if="selectedFields.includes('duration')" text-center text-sm>
<DisplayDuration :duration="item.duration" />
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td :colspan="selectedFields.length" p4>
<div w-full h-48 flex="~ items-center justify-center" op50 italic>
No data
<template #popper>
<div class="p2" flex="~ col gap2">
<label
v-for="rule of searchFilterTypes"
:key="rule.name"
border="~ base rounded-md" px2 py1
flex="~ items-center gap-1"
select-none
:title="rule.description"
class="cursor-pointer module-type-filter"
>
<input
type="checkbox"
mr1
:checked="filterModuleTypes?.includes(rule.name)"
@change="toggleModuleType(rule)"
>
<div :class="rule.icon" icon-catppuccin />
<div text-sm>{{ rule.description || rule.name }}</div>
</label>
</div>
</template>
</VMenu>
</button>
</div>
<div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
Start Time
</div>
<div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
End Time
</div>
<div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
<button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
Duration
<span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
<i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
</span>
</button>
</div>
</div>

<DataVirtualList
v-if="filtered.length && selectedFields.length"
role="rowgroup"
:items="filtered"
key-prop="id"
>
<template #default="{ item, index }">
<div
role="row"
flex="~ row"
class="border-base border-b-1 border-dashed"
:class="[index === filtered.length - 1 ? 'border-b-0' : '']"
>
<div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
{{ HOOK_NAME_MAP[item.type] }}
</div>
<div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
<DisplayModuleId
:id="item.module"
w-full border-none
:session="session"
:link="`/session/${session.id}/graph?module=${item.module}`"
hover="bg-active"
border="~ base rounded" block px2 py1
/>
</div>
</td>
</tr>
</tbody>
</table>
<div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
<time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
</div>
<div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
<time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
</div>
<div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
<DisplayDuration :duration="item.duration" />
</div>
</div>
</template>
</DataVirtualList>
<div v-else>
<div p4>
<div w-full h-48 flex="~ items-center justify-center" op50 italic>
<p v-if="!selectedFields.length">
No columns selected
</p>
<p v-else>
No data
</p>
</div>
</div>
</div>
</div>
</template>
Loading