Skip to content

Commit

Permalink
Don't use collapsible accordion for workers detail
Browse files Browse the repository at this point in the history
This doesn't work well with the new d3 layout because we would need to
compute the layout again on panel collapse/expand, and this is a pain in
the ass. Instead we use a list with an vertical scroll.

Fixes #566
  • Loading branch information
pgiraud committed Mar 20, 2023
1 parent 9e53a2d commit 2a21eac
Showing 1 changed file with 13 additions and 25 deletions.
38 changes: 13 additions & 25 deletions src/components/PlanNodeDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -543,34 +543,22 @@ watch(activeTab, () => {
</em>
</div>

<div class="accordion" v-if="_.isArray(node[NodeProp.WORKERS])">
<div
v-if="_.isArray(node[NodeProp.WORKERS])"
class="overflow-auto"
style="max-height: 300px"
@wheel.stop
>
<template
v-for="(worker, index) in node[NodeProp.WORKERS]"
:key="index"
>
<div class="card">
<div class="card-header p-0">
<button
class="btn btn-link btn-sm text-secondary"
type="button"
data-toggle="collapse"
:data-target="'#collapse-' + node.nodeId + '-' + index"
style="font-size: inherit"
>
<font-awesome-icon
fixed-width
icon="chevron-right"
></font-awesome-icon>
<font-awesome-icon
fixed-width
icon="chevron-down"
></font-awesome-icon>
Worker {{ worker[WorkerProp.WORKER_NUMBER] }}
</button>
<div class="card mt-2">
<div class="card-header">
<b>Worker {{ worker[WorkerProp.WORKER_NUMBER] }}</b>
</div>

<div :id="'collapse-' + node.nodeId + '-' + index" class="collapse">
<div class="card-body p-0">
<ul class="list-group list-group-flush">
<li class="list-group-item p-0">
<table class="table table-sm prop-list mb-0">
<template v-for="(value, key) in worker" :key="key">
<tr v-if="shouldShowProp(key as string, value)">
Expand All @@ -579,8 +567,8 @@ watch(activeTab, () => {
</tr>
</template>
</table>
</div>
</div>
</li>
</ul>
</div>
</template>
</div>
Expand Down

0 comments on commit 2a21eac

Please sign in to comment.