Add searchbar

src/components/selectionbar/SubgraphNode.vue

@@ -5,6 +5,7 @@ import { watchDebounced } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
 
+import SearchBox from '@/components/common/SearchBox.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import SubgraphNodeWidget from '@/components/selectionbar/SubgraphNodeWidget.vue'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
@@ -14,6 +15,7 @@ const { t } = useI18n()
 const canvasStore = useCanvasStore()
 
 const expandedKeys = ref<Record<string, boolean>>({})
+const searchQuery = ref<string>('')
 
 const triggerUpdate = ref(0)
 
@@ -72,8 +74,9 @@ function toggleVisibility(nodeId, widgetName, isShown) {
   useCanvasStore().canvas.setDirty(true)
 }
 
-const candidateWidgets = computed(() =>{
+const candidateWidgets = computed(() => {
   const node = canvasStore.selectedItems[0] ?? {}
+  if(!node) return []
   triggerUpdate.value//mark dependent
   const pw = node.properties.proxyWidgets ?? []
   const interiorNodes = node?.subgraph?.nodes ?? []
@@ -88,36 +91,69 @@ const candidateWidgets = computed(() =>{
   //TODO: filter enabled/disabled items while keeping order
   return intn
 })
+const filteredCandidates = computed(() => {
+  const query = searchQuery.value.toLowerCase()
+  if (!query) return candidateWidgets.value
+  return candidateWidgets.value.filter(([n,w]) =>
+    n.title.toLowerCase().includes(query)
+    || w.name.toLowerCase().includes(query)
+  )
+})
+const filteredActive = computed(() => {
+  const query = searchQuery.value.toLowerCase()
+  if (!query) {
+    console.error("displaying filtered widgets with no search query")
+    return activeWidgets.value
+  }
+  return activeWidgets.value.filter(([n,w]) =>
+    n.title.toLowerCase().includes(query)
+    || w.name.toLowerCase().includes(query)
+  )
+})
 
 </script>
 <template>
   <SidebarTabTemplate
-      :title="'Subgraph Node'"
-      class="workflows-sidebar-tab bg-[var(--p-tree-background)]"
-      >
-      <template #body>
-        <div class="widgets-section">
-        <draggable
-            v-model="activeWidgets"
-            group="enabledWidgets"
-            class="widget-container"
-            :animation="100"
-            @start="drag=true"
-            @end="drag=false"
-            item-key="id">
-        <template #item="{element}">
-          <SubgraphNodeWidget :item="element" :node="activeNode" :isShown="true"
-            :toggleVisibility="toggleVisibility"/>
-        </template>
-        </draggable>
-        </div>
-        <div class="widgets-section">
-          <div v-for="element in candidateWidgets" class="widget-container">
-            <SubgraphNodeWidget :item="element" :node="activeNode"
-            :toggleVisibility="toggleVisibility"/>
-          </div>
+    :title="'Parameters'"
+    class="workflows-sidebar-tab bg-[var(--p-tree-background)]"
+    >
+    <template #header>
+      <SearchBox
+          v-model:modelValue="searchQuery"
+          class="model-lib-search-box p-2 2xl:p-4"
+          :placeholder="$t('g.search') + '...'"
+          @search="handleSearch"
+          />
+    </template>
+    <template #body>
+      <div class="widgets-section">
+        <div v-if="searchQuery"
+          v-for="element in filteredActive" class="widget-container">
+          <SubgraphNodeWidget :item="element" :node="activeNode"
+          :toggleVisibility="toggleVisibility" :isShown="true"/>
         </div>
+      <draggable
+          v-model="activeWidgets"
+          group="enabledWidgets"
+          class="widget-container"
+          :animation="100"
+          @start="drag=true"
+          @end="drag=false"
+          item-key="id"
+          v-else>
+      <template #item="{element}">
+        <SubgraphNodeWidget :item="element" :node="activeNode" :isShown="true"
+          :toggleVisibility="toggleVisibility" :isDraggable="true"/>
       </template>
+      </draggable>
+      </div>
+      <div class="widgets-section">
+        <div v-for="element in filteredCandidates" class="widget-container">
+          <SubgraphNodeWidget :item="element" :node="activeNode"
+          :toggleVisibility="toggleVisibility"/>
+        </div>
+      </div>
+    </template>
   </SidebarTabTemplate>
 </template>
 <style scoped>

src/components/selectionbar/SubgraphNodeWidget.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
   item: [unknown, unknown],
   node: unknown,
   isShown?: boolean,
+  isDraggable?: boolean,
   toggleVisibility
 }>()
 
@@ -20,7 +21,7 @@ function onClick(e) {
 <template>
   <div class="widget-item">
     <div class="icon">
-      <i-lucide:grip-vertical v-if="draggable"/>
+      <i-lucide:grip-vertical v-if="isDraggable"/>
     </div>
     <div class="widget-title">
       <div class="widget-node">{{item[0].title}}</div>

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -148,7 +148,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     )
 
     this.type = subgraph.id
-    ////FIXME: This breaks subgraph conversion
+    //FIXME: This breaks subgraph conversion
     //this.configure(instanceData)
 
     this.addTitleButton({

src/locales/en/main.json

@@ -75,6 +75,7 @@
     "searchModels": "Search Models",
     "searchKeybindings": "Search Keybindings",
     "searchExtensions": "Search Extensions",
+    "search": "Search",
     "noResultsFound": "No Results Found",
     "searchFailedMessage": "We couldn't find any settings matching your search. Try adjusting your search terms.",
     "noTasksFound": "No Tasks Found",