Move queue/history display to side bar

index.html

@@ -12,6 +12,7 @@
 				font-family: 'Roboto Mono', 'Noto Color Emoji';
 			}
 		</style> -->
+		<script src="node_modules/reflect-metadata/Reflect.js"></script>
 		<script type="module">
 			window["__COMFYUI_FRONTEND_VERSION__"] = __COMFYUI_FRONTEND_VERSION__;
 			console.log("ComfyUI Front-end version:", __COMFYUI_FRONTEND_VERSION__);

package.json

@@ -49,11 +49,14 @@
     "@comfyorg/litegraph": "^0.7.26",
     "@primevue/themes": "^4.0.0-rc.2",
     "@vitejs/plugin-vue": "^5.0.5",
+    "class-transformer": "^0.5.1",
     "dotenv": "^16.4.5",
     "fuse.js": "^7.0.0",
     "lodash": "^4.17.21",
+    "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "primevue": "^4.0.0-rc.2",
+    "reflect-metadata": "^0.2.2",
     "vue": "^3.4.31",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"

src/App.vue

@@ -9,7 +9,6 @@
         </template>
       </LiteGraphCanvasSplitterOverlay>
     </teleport>
-    <SideToolBar />
   </div>
 </template>
 

src/components/sidebar/SideToolBar.vue

@@ -21,10 +21,12 @@ import SideBarIcon from "./SideBarIcon.vue";
 import SideBarThemeToggleIcon from "./SideBarThemeToggleIcon.vue";
 import SideBarSettingsToggleIcon from "./SideBarSettingsToggleIcon.vue";
 import NodeDetailSideBarItem from "./items/NodeDetailSideBarItem.vue";
+import QueueSideBarItem from "./items/QueueSideBarItem.vue";
 import { markRaw, ref, watch } from "vue";
 
 const items = ref([
   { icon: "pi pi-map", component: markRaw(NodeDetailSideBarItem) },
+  { icon: "pi pi-history", component: markRaw(QueueSideBarItem) },
   { icon: "pi pi-search" },
 ]);
 const selectedItem = ref(null);

src/components/sidebar/items/QueueSideBarItem.vue

@@ -0,0 +1,176 @@
+<template>
+  <DataTable
+    v-if="tasks.length > 0"
+    :value="tasks"
+    dataKey="promptId"
+    class="queue-table"
+  >
+    <Column header="STATUS">
+      <template #body="{ data }">
+        <Tag :severity="taskTagSeverity(data.displayStatus)">
+          {{ data.displayStatus.toUpperCase() }}
+        </Tag>
+      </template>
+    </Column>
+    <Column header="TIME" :pt="{ root: { class: 'queue-time-cell' } }">
+      <template #body="{ data }">
+        <div v-if="data.isHistory" class="queue-time-cell-content">
+          {{ formatTime(data.executionTimeInSeconds) }}
+        </div>
+        <div v-else-if="data.isRunning" class="queue-time-cell-content">
+          <i class="pi pi-spin pi-spinner"></i>
+        </div>
+        <div v-else class="queue-time-cell-content">...</div>
+      </template>
+    </Column>
+    <Column
+      :pt="{
+        headerCell: {
+          class: 'queue-tool-header-cell',
+        },
+        bodyCell: {
+          class: 'queue-tool-body-cell',
+        },
+      }"
+    >
+      <template #header>
+        <Toast />
+        <ConfirmPopup />
+        <Button
+          icon="pi pi-trash"
+          text
+          severity="primary"
+          @click="confirmRemoveAll($event)"
+        />
+      </template>
+      <template #body="{ data }">
+        <Button
+          icon="pi pi-file-export"
+          text
+          severity="primary"
+          @click="data.loadWorkflow()"
+        />
+        <Button
+          icon="pi pi-times"
+          text
+          severity="secondary"
+          @click="removeTask(data)"
+        />
+      </template>
+    </Column>
+  </DataTable>
+  <div>
+    <Message icon="pi pi-info" severity="error">
+      <span class="ml-2">No tasks</span>
+    </Message>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Tag from "primevue/tag";
+import Button from "primevue/button";
+import ConfirmPopup from "primevue/confirmpopup";
+import Toast from "primevue/toast";
+import Message from "primevue/message";
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+import {
+  TaskItemDisplayStatus,
+  TaskItemImpl,
+  useQueueStore,
+} from "@/stores/queueStore";
+import { computed, onMounted } from "vue";
+import { api } from "@/scripts/api";
+
+const confirm = useConfirm();
+const toast = useToast();
+const queueStore = useQueueStore();
+
+const tasks = computed(() => queueStore.tasks);
+const taskTagSeverity = (status: TaskItemDisplayStatus) => {
+  switch (status) {
+    case TaskItemDisplayStatus.Pending:
+      return "secondary";
+    case TaskItemDisplayStatus.Running:
+      return "info";
+    case TaskItemDisplayStatus.Completed:
+      return "success";
+    case TaskItemDisplayStatus.Failed:
+      return "danger";
+    case TaskItemDisplayStatus.Cancelled:
+      return "warning";
+  }
+};
+const formatTime = (time?: number) => {
+  if (time === undefined) {
+    return "";
+  }
+  return `${time.toFixed(2)}s`;
+};
+const removeTask = (task: TaskItemImpl) => {
+  if (task.isRunning) {
+    api.interrupt();
+  }
+  queueStore.delete(task);
+};
+const removeAllTasks = async () => {
+  await queueStore.clear();
+};
+const confirmRemoveAll = (event) => {
+  confirm.require({
+    target: event.currentTarget,
+    message: "Do you want to delete all tasks?",
+    icon: "pi pi-info-circle",
+    rejectProps: {
+      label: "Cancel",
+      severity: "secondary",
+      outlined: true,
+    },
+    acceptProps: {
+      label: "Delete",
+      severity: "danger",
+    },
+    accept: async () => {
+      await removeAllTasks();
+      toast.add({
+        severity: "info",
+        summary: "Confirmed",
+        detail: "Tasks deleted",
+        life: 3000,
+      });
+    },
+  });
+};
+onMounted(() => {
+  api.addEventListener("status", () => {
+    queueStore.update();
+  });
+
+  queueStore.update();
+});
+</script>
+
+<style>
+.queue-tool-header-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.queue-tool-body-cell {
+  display: table-cell;
+  text-align: right !important;
+}
+</style>
+
+<style scoped>
+.queue-time-cell-content {
+  width: fit-content;
+}
+
+.queue-table {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>

src/main.ts

@@ -2,10 +2,13 @@ import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 import Aura from "@primevue/themes/aura";
 import { definePreset } from "@primevue/themes";
+import ConfirmationService from "primevue/confirmationservice";
+import ToastService from "primevue/toastservice";
 import "primeicons/primeicons.css";
 
 import App from "./App.vue";
 import { app as comfyApp } from "@/scripts/app";
+import { createPinia } from "pinia";
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -15,6 +18,7 @@ const ComfyUIPreset = definePreset(Aura, {
 });
 
 const app = createApp(App);
+const pinia = createPinia();
 
 comfyApp.setup().then(() => {
   window["app"] = comfyApp;
@@ -33,5 +37,8 @@ comfyApp.setup().then(() => {
         },
       },
     })
+    .use(ConfirmationService)
+    .use(ToastService)
+    .use(pinia)
     .mount("#vue-app");
 });