From 44ed35562b43408fccec67b94c3fecc2d37875f2 Mon Sep 17 00:00:00 2001
From: Matthias De Smet <11850640+matthdsm@users.noreply.github.com>
Date: Tue, 24 Mar 2026 12:13:42 +0100
Subject: [PATCH] feat: Implement task trace detail editing and persistence via
 API endpoint and UI.

---
 frontend/components.d.ts                      |  2 +
 frontend/src/components/TaskDetail.vue        | 37 +++++++++++++++++--
 frontend/src/stores/tasks.ts                  | 20 ++++++++--
 frontend/src/views/TaskView.vue               |  1 +
 .../cachebrowser/mn/StorageService.groovy     |  2 +
 .../mn/controller/ApiController.groovy        |  6 +++
 .../mn/storages/AbstractStorage.groovy        | 11 ++++++
 .../mn/storages/DuckdbStorage.groovy          | 11 +++++-
 8 files changed, 82 insertions(+), 8 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 6117b75..000432b 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -22,11 +22,13 @@ declare module 'vue' {
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    InputText: typeof import('primevue/inputtext')['default']
     Menubar: typeof import('primevue/menubar')['default']
     Panel: typeof import('primevue/panel')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TaskDetail: typeof import('./src/components/TaskDetail.vue')['default']
     TasksTable: typeof import('./src/components/TasksTable.vue')['default']
+    ToggleButton: typeof import('primevue/togglebutton')['default']
   }
 }
diff --git a/frontend/src/components/TaskDetail.vue b/frontend/src/components/TaskDetail.vue
index 2633bd5..26ba64b 100644
--- a/frontend/src/components/TaskDetail.vue
+++ b/frontend/src/components/TaskDetail.vue
@@ -1,14 +1,42 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useTasksStore } from '@/stores/tasks';
 
-defineProps<{
-  task: any | null
+const props = defineProps<{
+  task: any | null,
+  session?: string
 }>();
 
+const tasksStore = useTasksStore();
+const editMode = ref(false);
+const editableTrace = ref<any>({});
+
+watch(() => props.task, (newVal) => {
+  if (newVal && newVal.trace) {
+    editableTrace.value = { ...newVal.trace };
+  } else {
+    editableTrace.value = {};
+  }
+}, { immediate: true, deep: true });
+
+const saveChanges = async () => {
+  if (props.task && props.session) {
+    await tasksStore.updateTask(props.session, props.task.id, editableTrace.value);
+    editMode.value = false;
+  }
+};
 </script>
 
 <template>
     <Panel>
-        <DataTable :value="task?.trace" tableStyle="min-width: 50rem" scrollable scrollHeight="400px">
+        <template #header>
+            <div style="display: flex; gap: 1rem; align-items: center;">
+                <span class="p-panel-title">Trace Details</span>
+                <ToggleButton v-model="editMode" onLabel="Editing" offLabel="Edit Mode" onIcon="pi pi-check" offIcon="pi pi-pencil" style="width: 8rem" />
+                <Button v-if="editMode" label="Save" icon="pi pi-save" severity="success" @click="saveChanges" />
+            </div>
+        </template>
+        <DataTable :value="editMode ? editableTrace : task?.trace" tableStyle="min-width: 50rem" scrollable scrollHeight="400px">
           <Column header="Key">
             <template #body="slotProps">
               {{ slotProps.index }}
@@ -16,7 +44,8 @@ defineProps<{
           </Column>
           <Column header="Value">
             <template #body="slotProps">
-              {{ slotProps.data }}
+              <InputText v-if="editMode" v-model="editableTrace[slotProps.index]" style="width: 100%" />
+              <span v-else>{{ slotProps.data }}</span>
             </template>
           </Column>
         </DataTable>
diff --git a/frontend/src/stores/tasks.ts b/frontend/src/stores/tasks.ts
index 2cd37f8..63ee1cf 100644
--- a/frontend/src/stores/tasks.ts
+++ b/frontend/src/stores/tasks.ts
@@ -3,9 +3,9 @@ import {defineStore} from 'pinia'
 
 export const useTasksStore = defineStore('tasks', () => {
 
-  const tasks = ref([])
+  const tasks = ref<any[]>([])
 
-  const taskSelected = ref(null)
+  const taskSelected = ref<any>(null)
 
   const load = async (id:string)=>{
     const data = await fetch(`${import.meta.env.VITE_API_URL}/tasks/${id}`)
@@ -16,5 +16,19 @@ export const useTasksStore = defineStore('tasks', () => {
     taskSelected.value = task
   }
 
-  return { tasks, load, taskSelected, setSelected }
+  const updateTask = async (session: string, taskId: number, updates: any) => {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/tasks/${session}/${taskId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(updates)
+    })
+    tasks.value = await response.json()
+    if (taskSelected.value && taskSelected.value.id === taskId) {
+      taskSelected.value = tasks.value.find((t: any) => t.id === taskId) || taskSelected.value
+    }
+  }
+
+  return { tasks, load, taskSelected, setSelected, updateTask }
 })
diff --git a/frontend/src/views/TaskView.vue b/frontend/src/views/TaskView.vue
index a87040a..39d88a4 100644
--- a/frontend/src/views/TaskView.vue
+++ b/frontend/src/views/TaskView.vue
@@ -43,6 +43,7 @@ const goBack = ()=>{
       <div class="content-container">
         <TaskDetail
             :task="store.taskSelected"
+            :session="refIds.id"
         />
       </div>
     </div>
diff --git a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/StorageService.groovy b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/StorageService.groovy
index 93d2a48..857d00d 100644
--- a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/StorageService.groovy
+++ b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/StorageService.groovy
@@ -10,4 +10,6 @@ interface StorageService {
     List<TaskDetail> tasks(String session)
 
     void renameWorkDir(String oldPath, String newPath, String task)
+
+    void updateTask(String session, Long taskId, Map<String, Object> traceUpdates)
 }
\ No newline at end of file
diff --git a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/controller/ApiController.groovy b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/controller/ApiController.groovy
index 7c80c44..ae51389 100644
--- a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/controller/ApiController.groovy
+++ b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/controller/ApiController.groovy
@@ -32,4 +32,10 @@ class ApiController {
         storageService.renameWorkDir(renameRequest.oldPath(), renameRequest.newPath(), renameRequest.task())
         executions()
     }
+
+    @Put("/tasks/{session}/{taskId}")
+    List<TaskDetail> updateTask(String session, Long taskId, @Body Map<String, Object> updates){
+        storageService.updateTask(session, taskId, updates)
+        tasks(session)
+    }
 }
diff --git a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/AbstractStorage.groovy b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/AbstractStorage.groovy
index b45497b..2863a1f 100644
--- a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/AbstractStorage.groovy
+++ b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/AbstractStorage.groovy
@@ -30,6 +30,17 @@ abstract class AbstractStorage implements StorageService{
         renameWorkDir0(oldPath, newPath, task)
     }
 
+    final void updateTask(String session, Long taskId, Map<String, Object> traceUpdates) {
+        def details = tasks(session)
+        def task = details.find { it.id == taskId }
+        if (task) {
+            traceUpdates.each { k, v ->
+                task.trace[k] = v
+            }
+            saveTasks(session, details)
+        }
+    }
+
     private void renameWorkDir0(String oldPath, String newPath, String task){
         newPath = newPath.endsWith("/") ? newPath : "$newPath/"
         def executions = executions()
diff --git a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/DuckdbStorage.groovy b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/DuckdbStorage.groovy
index 8a5f2ee..90f3740 100644
--- a/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/DuckdbStorage.groovy
+++ b/src/main/groovy/com/incsteps/nextflow/cachebrowser/mn/storages/DuckdbStorage.groovy
@@ -101,6 +101,15 @@ class DuckdbStorage extends AbstractStorage{
 
     @Override
     protected void saveTasks(String session, List<TaskDetail> tasks) {
-
+        validateConnection()
+        tasks.each { task ->
+            def payload = [
+                    KryoHelper.serialize(task.trace),
+                    task.context ? KryoHelper.serialize(task.context) : new byte[0],
+                    Integer.valueOf(task.refCount)
+            ]
+            byte[] bytes = KryoHelper.serialize(payload)
+            sql.execute("update CACHE_ENTRIES set entry=? where id=? and session_id=?", [bytes, task.id, session])
+        }
     }
 }