[feat] Add node library sorting and grouping controls (#4024)

Co-authored-by: github-actions <[email protected]>

Author: christian-byrne

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -13,13 +13,58 @@
         @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
       />
       <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortOrder')"
-        class="sort-button"
-        :icon="alphabeticalSort ? 'pi pi-sort-alpha-down' : 'pi pi-sort-alt'"
+        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
+        :icon="selectedGroupingIcon"
         text
         severity="secondary"
-        @click="alphabeticalSort = !alphabeticalSort"
+        @click="groupingPopover?.toggle($event)"
       />
+      <Button
+        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
+        :icon="selectedSortingIcon"
+        text
+        severity="secondary"
+        @click="sortingPopover?.toggle($event)"
+      />
+      <Button
+        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
+        icon="pi pi-refresh"
+        text
+        severity="secondary"
+        @click="resetOrganization"
+      />
+      <Popover ref="groupingPopover">
+        <div class="flex flex-col gap-1 p-2">
+          <Button
+            v-for="option in groupingOptions"
+            :key="option.id"
+            :icon="option.icon"
+            :label="$t(option.label)"
+            text
+            :severity="
+              selectedGroupingId === option.id ? 'primary' : 'secondary'
+            "
+            class="justify-start"
+            @click="selectGrouping(option.id)"
+          />
+        </div>
+      </Popover>
+      <Popover ref="sortingPopover">
+        <div class="flex flex-col gap-1 p-2">
+          <Button
+            v-for="option in sortingOptions"
+            :key="option.id"
+            :icon="option.icon"
+            :label="$t(option.label)"
+            text
+            :severity="
+              selectedSortingId === option.id ? 'primary' : 'secondary'
+            "
+            class="justify-start"
+            @click="selectSorting(option.id)"
+          />
+        </div>
+      </Popover>
     </template>
     <template #header>
       <SearchBox
@@ -62,6 +107,7 @@
 </template>
 
 <script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
@@ -76,16 +122,20 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
-import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import {
-  ComfyNodeDefImpl,
-  buildNodeDefTree,
-  useNodeDefStore
-} from '@/stores/nodeDefStore'
+  DEFAULT_GROUPING_ID,
+  DEFAULT_SORTING_ID,
+  nodeOrganizationService
+} from '@/services/nodeOrganizationService'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type {
+  GroupingStrategyId,
+  SortingStrategyId
+} from '@/types/nodeOrganizationTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { FuseFilterWithValue } from '@/utils/fuseUtil'
-import { sortedTree } from '@/utils/treeUtil'
 
 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
 
@@ -98,13 +148,67 @@ const nodeBookmarkTreeExplorerRef = ref<InstanceType<
   typeof NodeBookmarkTreeExplorer
 > | null>(null)
 const searchFilter = ref<InstanceType<typeof Popover> | null>(null)
-const alphabeticalSort = ref(false)
+const groupingPopover = ref<InstanceType<typeof Popover> | null>(null)
+const sortingPopover = ref<InstanceType<typeof Popover> | null>(null)
+const selectedGroupingId = useLocalStorage<GroupingStrategyId>(
+  'Comfy.NodeLibrary.GroupBy',
+  DEFAULT_GROUPING_ID
+)
+const selectedSortingId = useLocalStorage<SortingStrategyId>(
+  'Comfy.NodeLibrary.SortBy',
+  DEFAULT_SORTING_ID
+)
 
 const searchQuery = ref<string>('')
 
+const groupingOptions = computed(() =>
+  nodeOrganizationService.getGroupingStrategies().map((strategy) => ({
+    id: strategy.id,
+    label: strategy.label,
+    icon: strategy.icon
+  }))
+)
+const sortingOptions = computed(() =>
+  nodeOrganizationService.getSortingStrategies().map((strategy) => ({
+    id: strategy.id,
+    label: strategy.label,
+    icon: strategy.icon
+  }))
+)
+
+const selectedGroupingIcon = computed(() =>
+  nodeOrganizationService.getGroupingIcon(selectedGroupingId.value)
+)
+const selectedSortingIcon = computed(() =>
+  nodeOrganizationService.getSortingIcon(selectedSortingId.value)
+)
+
+const selectGrouping = (groupingId: string) => {
+  selectedGroupingId.value = groupingId as GroupingStrategyId
+  groupingPopover.value?.hide()
+}
+const selectSorting = (sortingId: string) => {
+  selectedSortingId.value = sortingId as SortingStrategyId
+  sortingPopover.value?.hide()
+}
+
+const resetOrganization = () => {
+  selectedGroupingId.value = DEFAULT_GROUPING_ID
+  selectedSortingId.value = DEFAULT_SORTING_ID
+}
+
 const root = computed(() => {
-  const root = filteredRoot.value || nodeDefStore.nodeTree
-  return alphabeticalSort.value ? sortedTree(root, { groupLeaf: true }) : root
+  // Determine which nodes to use
+  const nodes =
+    filteredNodeDefs.value.length > 0
+      ? filteredNodeDefs.value
+      : nodeDefStore.visibleNodeDefs
+
+  // Use the service to organize nodes
+  return nodeOrganizationService.organizeNodes(nodes, {
+    groupBy: selectedGroupingId.value,
+    sortBy: selectedSortingId.value
+  })
 })
 
 const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
@@ -144,12 +248,6 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
 })
 
 const filteredNodeDefs = ref<ComfyNodeDefImpl[]>([])
-const filteredRoot = computed<TreeNode | null>(() => {
-  if (!filteredNodeDefs.value.length) {
-    return null
-  }
-  return buildNodeDefTree(filteredNodeDefs.value)
-})
 const filters: Ref<
   (SearchFilter & { filter: FuseFilterWithValue<ComfyNodeDefImpl, string> })[]
 > = ref([])
@@ -175,8 +273,10 @@ const handleSearch = async (query: string) => {
   )
 
   await nextTick()
-  // @ts-expect-error fixme ts strict error
-  expandNode(filteredRoot.value)
+  // Expand the search results tree
+  if (filteredNodeDefs.value.length > 0) {
+    expandNode(root.value)
+  }
 }
 
 const onAddFilter = async (

src/locales/en/main.json

@@ -416,7 +416,23 @@
     "openWorkflow": "Open workflow in local file system",
     "newBlankWorkflow": "Create a new blank workflow",
     "nodeLibraryTab": {
-      "sortOrder": "Sort Order"
+      "groupBy": "Group By",
+      "sortMode": "Sort Mode",
+      "resetView": "Reset View to Default",
+      "groupStrategies": {
+        "category": "Category",
+        "categoryDesc": "Group by node category",
+        "module": "Module",
+        "moduleDesc": "Group by module source",
+        "source": "Source",
+        "sourceDesc": "Group by source type (Core, Custom, API)"
+      },
+      "sortBy": {
+        "original": "Original",
+        "originalDesc": "Keep original order",
+        "alphabetical": "Alphabetical",
+        "alphabeticalDesc": "Sort alphabetically within groups"
+      }
     },
     "modelLibrary": "Model Library",
     "downloads": "Downloads",

src/locales/es/main.json

@@ -1065,7 +1065,23 @@
     "newBlankWorkflow": "Crear un nuevo flujo de trabajo en blanco",
     "nodeLibrary": "Biblioteca de nodos",
     "nodeLibraryTab": {
-      "sortOrder": "Orden de clasificación"
+      "groupBy": "Agrupar por",
+      "groupStrategies": {
+        "category": "Categoría",
+        "categoryDesc": "Agrupar por categoría de nodo",
+        "module": "Módulo",
+        "moduleDesc": "Agrupar por fuente del módulo",
+        "source": "Fuente",
+        "sourceDesc": "Agrupar por tipo de fuente (Core, Custom, API)"
+      },
+      "resetView": "Restablecer vista a la predeterminada",
+      "sortBy": {
+        "alphabetical": "Alfabético",
+        "alphabeticalDesc": "Ordenar alfabéticamente dentro de los grupos",
+        "original": "Original",
+        "originalDesc": "Mantener el orden original"
+      },
+      "sortMode": "Modo de ordenación"
     },
     "openWorkflow": "Abrir flujo de trabajo en el sistema de archivos local",
     "queue": "Cola",

src/locales/fr/main.json

@@ -1065,7 +1065,23 @@
     "newBlankWorkflow": "Créer un nouveau flux de travail vierge",
     "nodeLibrary": "Bibliothèque de nœuds",
     "nodeLibraryTab": {
-      "sortOrder": "Ordre de tri"
+      "groupBy": "Grouper par",
+      "groupStrategies": {
+        "category": "Catégorie",
+        "categoryDesc": "Grouper par catégorie de nœud",
+        "module": "Module",
+        "moduleDesc": "Grouper par source du module",
+        "source": "Source",
+        "sourceDesc": "Grouper par type de source (Core, Custom, API)"
+      },
+      "resetView": "Réinitialiser la vue par défaut",
+      "sortBy": {
+        "alphabetical": "Alphabétique",
+        "alphabeticalDesc": "Trier alphabétiquement dans les groupes",
+        "original": "Original",
+        "originalDesc": "Conserver l'ordre d'origine"
+      },
+      "sortMode": "Mode de tri"
     },
     "openWorkflow": "Ouvrir le flux de travail dans le système de fichiers local",
     "queue": "File d'attente",

src/locales/ja/main.json

@@ -1065,7 +1065,23 @@
     "newBlankWorkflow": "新しい空のワークフローを作成",
     "nodeLibrary": "ノードライブラリ",
     "nodeLibraryTab": {
-      "sortOrder": "並び順"
+      "groupBy": "グループ化",
+      "groupStrategies": {
+        "category": "カテゴリ",
+        "categoryDesc": "ノードカテゴリでグループ化",
+        "module": "モジュール",
+        "moduleDesc": "モジュールソースでグループ化",
+        "source": "ソース",
+        "sourceDesc": "ソースタイプ（Core、Custom、API）でグループ化"
+      },
+      "resetView": "ビューをデフォルトにリセット",
+      "sortBy": {
+        "alphabetical": "アルファベット順",
+        "alphabeticalDesc": "グループ内でアルファベット順に並び替え",
+        "original": "元の順序",
+        "originalDesc": "元の順序を維持"
+      },
+      "sortMode": "並び替えモード"
     },
     "openWorkflow": "ローカルでワークフローを開く",
     "queue": "キュー",

src/locales/ko/main.json

@@ -1065,7 +1065,23 @@
     "newBlankWorkflow": "새 빈 워크플로 만들기",
     "nodeLibrary": "노드 라이브러리",
     "nodeLibraryTab": {
-      "sortOrder": "정렬 순서"
+      "groupBy": "그룹 기준",
+      "groupStrategies": {
+        "category": "카테고리",
+        "categoryDesc": "노드 카테고리별로 그룹화",
+        "module": "모듈",
+        "moduleDesc": "모듈 소스별로 그룹화",
+        "source": "소스",
+        "sourceDesc": "소스 유형(Core, Custom, API)별로 그룹화"
+      },
+      "resetView": "기본 보기로 재설정",
+      "sortBy": {
+        "alphabetical": "알파벳순",
+        "alphabeticalDesc": "그룹 내에서 알파벳순으로 정렬",
+        "original": "원본 순서",
+        "originalDesc": "원래 순서를 유지"
+      },
+      "sortMode": "정렬 방식"
     },
     "openWorkflow": "로컬 파일 시스템에서 워크플로 열기",
     "queue": "실행 대기열",

src/locales/ru/main.json

@@ -1065,7 +1065,23 @@
     "newBlankWorkflow": "Создайте новый пустой рабочий процесс",
     "nodeLibrary": "Библиотека нод",
     "nodeLibraryTab": {
-      "sortOrder": "Порядок сортировки"
+      "groupBy": "Группировать по",
+      "groupStrategies": {
+        "category": "Категория",
+        "categoryDesc": "Группировать по категории узла",
+        "module": "Модуль",
+        "moduleDesc": "Группировать по источнику модуля",
+        "source": "Источник",
+        "sourceDesc": "Группировать по типу источника (Core, Custom, API)"
+      },
+      "resetView": "Сбросить вид по умолчанию",
+      "sortBy": {
+        "alphabetical": "По алфавиту",
+        "alphabeticalDesc": "Сортировать по алфавиту внутри групп",
+        "original": "Оригинальный порядок",
+        "originalDesc": "Сохранять исходный порядок"
+      },
+      "sortMode": "Режим сортировки"
     },
     "openWorkflow": "Открыть рабочий процесс в локальной файловой системе",
     "queue": "Очередь",

src/locales/zh/main.json

@@ -1065,7 +1065,23 @@
     "newBlankWorkflow": "创建空白工作流",
     "nodeLibrary": "节点库",
     "nodeLibraryTab": {
-      "sortOrder": "排序顺序"
+      "groupBy": "分组方式",
+      "groupStrategies": {
+        "category": "类别",
+        "categoryDesc": "按节点类别分组",
+        "module": "模块",
+        "moduleDesc": "按模块来源分组",
+        "source": "来源",
+        "sourceDesc": "按来源类型分组（核心，自定义，API）"
+      },
+      "resetView": "重置视图为默认",
+      "sortBy": {
+        "alphabetical": "字母顺序",
+        "alphabeticalDesc": "在分组内按字母顺序排序",
+        "original": "原始顺序",
+        "originalDesc": "保持原始顺序"
+      },
+      "sortMode": "排序模式"
     },
     "openWorkflow": "在本地文件系统中打开工作流",
     "queue": "队列",