From 2a21eac01019d1af603aa8e0479d1b91f51bb02b Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Fri, 17 Mar 2023 09:29:10 +0100
Subject: [PATCH] Don't use collapsible accordion for workers detail

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
---
 src/components/PlanNodeDetail.vue | 38 +++++++++++--------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/components/PlanNodeDetail.vue b/src/components/PlanNodeDetail.vue
index e21674c3..f5e960c2 100644
--- a/src/components/PlanNodeDetail.vue
+++ b/src/components/PlanNodeDetail.vue
@@ -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)">
@@ -579,8 +567,8 @@ watch(activeTab, () => {
                     </tr>
                   </template>
                 </table>
-              </div>
-            </div>
+              </li>
+            </ul>
           </div>
         </template>
       </div>