From 542baae5a44a9345f7e3e640232ea030dc370c50 Mon Sep 17 00:00:00 2001
From: Benjamin Moser <benjamin.moser@knime.com>
Date: Wed, 17 Dec 2025 11:42:53 +0100
Subject: [PATCH 01/11] generated code

---
 .../src/api/gateway-api/generated-api.ts      | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)

diff --git a/org.knime.ui.js/src/api/gateway-api/generated-api.ts b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
index 5022eb915..d2383494a 100644
--- a/org.knime.ui.js/src/api/gateway-api/generated-api.ts
+++ b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
@@ -1212,6 +1212,112 @@ export interface ComponentPortDescription {
 }
 
 
+/**
+ * ...
+ * @export
+ * @interface ComponentSearchItem
+ */
+export interface ComponentSearchItem {
+
+    /**
+     * The name of the component as given by the component creator
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    name?: string;
+    /**
+     * The description of the component as given by the component creator
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    description?: string;
+    /**
+     * serialised data of component icon
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    icon?: string;
+    /**
+     * The type (a.k.a. \&quot;kind\&quot;) of the component
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    type?: ComponentSearchItem.TypeEnum;
+    /**
+     * The components&#39;s input ports.
+     * @type {Array<ComponentSearchItemPort>}
+     * @memberof ComponentSearchItem
+     */
+    inPorts?: Array<ComponentSearchItemPort>;
+    /**
+     * The node&#39;s output ports.
+     * @type {Array<ComponentSearchItemPort>}
+     * @memberof ComponentSearchItem
+     */
+    outPorts?: Array<ComponentSearchItemPort>;
+
+}
+
+
+/**
+ * @export
+ * @namespace ComponentSearchItem
+ */
+export namespace ComponentSearchItem {
+    /**
+     * @export
+     * @enum {string}
+     */
+    export enum TypeEnum {
+        Source = 'source',
+        Manipulator = 'manipulator',
+        Visualizer = 'visualizer',
+        Learner = 'learner',
+        Sink = 'sink',
+        Other = 'other'
+    }
+}
+/**
+ *
+ * @export
+ * @interface ComponentSearchItemPort
+ */
+export interface ComponentSearchItemPort {
+
+    /**
+     * The name of the port as given by the component creator. Not to be confused with the human-readable name of the port _type_.
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    name: string;
+    /**
+     * The description of the component as given by the component creator.
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    description?: string;
+    /**
+     * The human-readable name of the port type. This is given by the port type implementation.
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    portTypeName?: string;
+    /**
+     * Hex string of port type color
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    color?: string;
+    /**
+     * Whether the port is optional
+     * @type {boolean}
+     * @memberof ComponentSearchItemPort
+     */
+    optional?: boolean;
+
+}
+
+
 /**
  * Event that can consist of multiple generic events.
  * @export
@@ -6923,6 +7029,29 @@ const space = function(rpcClient: RPCClient) {
             
             return rpcClient.call('SpaceService.renameSpace', { ...defaultParams, ...params });
         },
+        /**
+         * Search among components in this provider
+         * @param {string} params.spaceProviderId Identifies a space-provider.
+         * @param {string} [params.query] 
+         * @param {number} [params.limit] 
+         * @param {number} [params.offset] 
+         * @param {*} [params.options] Override http request option.
+         * @throws {RequiredError}
+         * @throws {ServiceCallException} If a Gateway service call failed for some reason.
+         * @throws {LoggedOutException} If a web request could not be authorized because the space provider isn&#39;t logged in
+         * @throws {NetworkException} If a Gateway service call failed due to a network error.
+         */
+        async searchComponents(
+        	params: { spaceProviderId: string,  query?: string,  limit?: number,  offset?: number  }
+        ): Promise<Array<ComponentSearchItem>> {
+            const defaultParams = { 
+                query: null,
+                limit: null,
+                offset: null,
+            }
+            
+            return rpcClient.call('SpaceService.searchComponents', { ...defaultParams, ...params });
+        },
     }
 };
 

From 86f8bc2cabb12435ded15235913993bad7cfd62f Mon Sep 17 00:00:00 2001
From: Benjamin Moser <benjamin.moser@knime.com>
Date: Wed, 17 Dec 2025 16:32:40 +0100
Subject: [PATCH 02/11] required props

---
 org.knime.ui.js/src/api/gateway-api/generated-api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/org.knime.ui.js/src/api/gateway-api/generated-api.ts b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
index d2383494a..5d17283b6 100644
--- a/org.knime.ui.js/src/api/gateway-api/generated-api.ts
+++ b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
@@ -1224,7 +1224,7 @@ export interface ComponentSearchItem {
      * @type {string}
      * @memberof ComponentSearchItem
      */
-    name?: string;
+    name: string;
     /**
      * The description of the component as given by the component creator
      * @type {string}
@@ -1242,7 +1242,7 @@ export interface ComponentSearchItem {
      * @type {string}
      * @memberof ComponentSearchItem
      */
-    type?: ComponentSearchItem.TypeEnum;
+    type: ComponentSearchItem.TypeEnum;
     /**
      * The components&#39;s input ports.
      * @type {Array<ComponentSearchItemPort>}

From 4958bcd56c8ac2dca42cc0d61625bcc278ca1d08 Mon Sep 17 00:00:00 2001
From: Benjamin Moser <benjamin.moser@knime.com>
Date: Wed, 17 Dec 2025 16:34:00 +0100
Subject: [PATCH 03/11] capitalisation of enum values

---
 org.knime.ui.js/src/api/gateway-api/generated-api.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/org.knime.ui.js/src/api/gateway-api/generated-api.ts b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
index 5d17283b6..b7e5c891b 100644
--- a/org.knime.ui.js/src/api/gateway-api/generated-api.ts
+++ b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
@@ -1269,12 +1269,12 @@ export namespace ComponentSearchItem {
      * @enum {string}
      */
     export enum TypeEnum {
-        Source = 'source',
-        Manipulator = 'manipulator',
-        Visualizer = 'visualizer',
-        Learner = 'learner',
-        Sink = 'sink',
-        Other = 'other'
+        Source = 'Source',
+        Manipulator = 'Manipulator',
+        Visualizer = 'Visualizer',
+        Learner = 'Learner',
+        Sink = 'Sink',
+        Other = 'Other'
     }
 }
 /**

From 5ea9854492edb00f8463743c966ac0f6d7c6dc22 Mon Sep 17 00:00:00 2001
From: Helian Rivera <helian.rivera@knime.com>
Date: Wed, 17 Dec 2025 18:38:40 +0100
Subject: [PATCH 04/11] NXT-4296: improve component composition and reusability

NXT-4296 (Gateway API for component search (use HubClient SDK to call Search Service; aggregate and map entities for FE; error handling))
---
 .../InfiniteLoadingList.vue                   | 102 ++++++++++++
 .../common/NodeList/InfiniteNodeList.vue      | 122 ++++++++++++++
 .../components/common/NodeList/NodeList.vue   |  10 +-
 .../common/NodeTemplate/NodeTemplate.vue      |   5 +-
 .../common/skeleton-loader/SkeletonNodes.vue  |   2 +-
 .../SidebarSearchResults.vue                  |   4 +-
 .../NodesGroupedByTag/NodesGroupedByTag.vue   |   6 +-
 .../components/nodeSearch/SearchResults.vue   | 151 +++++-------------
 .../quickAdd/QuickAddNodeSearchResults.vue    |   2 +-
 9 files changed, 275 insertions(+), 129 deletions(-)
 create mode 100644 org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
 create mode 100644 org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue

diff --git a/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue b/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
new file mode 100644
index 000000000..ebf2a60ef
--- /dev/null
+++ b/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { nextTick, ref, toRefs, watch } from "vue";
+
+import ScrollViewContainer from "@/components/common/ScrollViewContainer/ScrollViewContainer.vue";
+import { createStaggeredLoader } from "@/util/createStaggeredLoader";
+
+type Props = {
+  isLoading: boolean;
+  fetchMore: () => Promise<any>;
+};
+const props = defineProps<Props>();
+
+const searchScrollPosition = defineModel<number>({ default: 0 });
+
+const { isLoading } = toRefs(props);
+
+const isLoadingNextPage = ref(false);
+const isLoadingSearchResultsDeferred = ref(false);
+
+const setIsLoadingNextPage = createStaggeredLoader({
+  firstStageCallback: () => {
+    isLoadingNextPage.value = true;
+  },
+  resetCallback: () => {
+    isLoadingNextPage.value = false;
+  },
+});
+
+const setIsLoadingSearchResultsDeferred = createStaggeredLoader({
+  firstStageCallback: () => {
+    isLoadingSearchResultsDeferred.value = true;
+  },
+  resetCallback: () => {
+    isLoadingSearchResultsDeferred.value = false;
+  },
+});
+
+watch(
+  isLoading,
+  (value) => {
+    setIsLoadingSearchResultsDeferred(value);
+  },
+  { immediate: true },
+);
+
+const onSaveScrollPosition = (position: number) => {
+  searchScrollPosition.value = position;
+};
+
+const scroller = ref<InstanceType<typeof ScrollViewContainer> | null>(null);
+const scrollToTop = async () => {
+  // wait for new content to be displayed, then scroll to top
+  await nextTick();
+  if (scroller.value) {
+    scroller.value.$el.scrollTop = 0;
+  }
+};
+
+const loadMoreSearchResults = async () => {
+  setIsLoadingNextPage(true);
+  await props.fetchMore();
+  setIsLoadingNextPage(false);
+};
+
+defineExpose({ scrollToTop });
+</script>
+
+<template>
+  <ScrollViewContainer
+    ref="scroller"
+    class="results"
+    :initial-position="searchScrollPosition"
+    @save-position="onSaveScrollPosition"
+    @scroll-bottom="loadMoreSearchResults"
+  >
+    <div class="content">
+      <slot
+        :is-loading-next-page="isLoadingNextPage"
+        :is-loading-search-results-deferred="isLoadingSearchResultsDeferred"
+      />
+    </div>
+  </ScrollViewContainer>
+</template>
+
+<style lang="postcss" scoped>
+.results {
+  & .content {
+    padding: 0 var(--space-16) var(--space-16);
+
+    & .node-list {
+      margin-bottom: -11px;
+    }
+
+    & .node-list-skeleton {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+}
+</style>
diff --git a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
new file mode 100644
index 000000000..b635499c4
--- /dev/null
+++ b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed, toRefs, useTemplateRef } from "vue";
+
+import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
+import InfiniteLoadingList from "@/components/common/InfiniteLoadingList/InfiniteLoadingList.vue";
+import NodeList, {
+  type NavReachedEvent,
+} from "@/components/common/NodeList/NodeList.vue";
+import SkeletonNodes from "@/components/common/skeleton-loader/SkeletonNodes.vue";
+import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+
+type Props = {
+  nodes: NodeTemplateWithExtendedPorts[];
+  fetchMore: () => Promise<any>;
+  showDetailsFor?: NodeTemplateWithExtendedPorts | null;
+  highlightFirst?: boolean;
+  displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
+  isLoadingSearchResults: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  searchScrollPosition: 0,
+  highlightFirst: false,
+  displayMode: "icon",
+  showDetailsFor: null,
+});
+
+const scrollPosition = defineModel<number>("scrollPosition");
+const selectedNode = defineModel<NodeTemplateWithExtendedPorts | null>(
+  "selectedNode",
+  { default: null },
+);
+
+const emit = defineEmits<{
+  navReachedTop: [event: NavReachedEvent];
+  itemEnterKey: [node: NodeTemplateWithExtendedPorts];
+  showNodeDetails: [node: NodeTemplateWithExtendedPorts];
+}>();
+
+const { nodes, displayMode, isLoadingSearchResults } = toRefs(props);
+
+const isEmpty = computed(() => nodes.value?.length === 0);
+
+const infiniteList = useTemplateRef("infiniteList");
+const scrollToTop = async () => {
+  await infiniteList.value?.scrollToTop();
+};
+
+const nodeList = useTemplateRef("nodeList");
+const focusFirst = () => {
+  nodeList.value?.focusFirst();
+};
+
+defineExpose({ focusFirst, scrollToTop });
+</script>
+
+<template>
+  <InfiniteLoadingList
+    ref="infiniteList"
+    v-model="scrollPosition"
+    :is-loading="isLoadingSearchResults"
+    :fetch-more="fetchMore"
+  >
+    <template #default="{ isLoadingNextPage, isLoadingSearchResultsDeferred }">
+      <div v-if="!isEmpty && !isLoadingSearchResults" class="node-list-wrapper">
+        <NodeList
+          ref="nodeList"
+          v-model:selected-node="selectedNode"
+          class="node-list"
+          :nodes="nodes!"
+          :highlight-first="highlightFirst"
+          :display-mode="displayMode"
+          :show-details-for="showDetailsFor"
+          @nav-reached-top="emit('navReachedTop', $event)"
+          @enter-key="emit('itemEnterKey', $event)"
+          @show-node-details="emit('showNodeDetails', $event)"
+        >
+          <template #item="slotProps">
+            <slot name="nodesTemplate" v-bind="slotProps" />
+          </template>
+        </NodeList>
+
+        <SkeletonNodes
+          v-if="isLoadingNextPage"
+          class="node-list-skeleton"
+          :number-of-nodes="5"
+          :display-mode="displayMode"
+        />
+      </div>
+
+      <SkeletonNodes
+        v-if="isLoadingSearchResultsDeferred"
+        class="node-list-skeleton"
+        :number-of-nodes="5"
+        :display-mode="displayMode"
+      />
+
+      <slot v-if="!isLoadingSearchResults" name="noResults" />
+    </template>
+  </InfiniteLoadingList>
+</template>
+
+<style lang="postcss" scoped>
+@import url("@/assets/mixins.css");
+
+.results {
+  & .content {
+    padding: 0 var(--space-16) var(--space-16);
+
+    & .node-list {
+      margin-bottom: -11px;
+    }
+
+    & .node-list-skeleton {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+}
+</style>
diff --git a/org.knime.ui.js/src/components/common/NodeList/NodeList.vue b/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
index dd4136aaf..32f1513e7 100644
--- a/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
+++ b/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
@@ -17,7 +17,7 @@ type Props = {
   hasMoreNodes?: boolean;
   displayMode?: NodeRepositoryDisplayModesType;
   selectedNode?: NodeTemplateWithExtendedPorts | null;
-  showDescriptionForNode?: NodeTemplateWithExtendedPorts | null;
+  showDetailsFor?: NodeTemplateWithExtendedPorts | null;
   highlightFirst?: boolean;
 };
 
@@ -35,13 +35,13 @@ const props = withDefaults(defineProps<Props>(), {
   hasMoreNodes: false,
   displayMode: "icon",
   selectedNode: null,
-  showDescriptionForNode: null,
+  showDetailsFor: null,
   highlightFirst: false,
 });
 
 const emit = defineEmits<{
   enterKey: [node: NodeTemplateWithExtendedPorts];
-  helpKey: [node: NodeTemplateWithExtendedPorts];
+  showNodeDetails: [node: NodeTemplateWithExtendedPorts];
   showMore: [];
   "update:selectedNode": [node: NodeTemplateWithExtendedPorts | null];
   navReachedTop: [event: NavReachedEvent];
@@ -73,7 +73,7 @@ const nodeTemplateProps = (
     isHighlighted:
       props.selectedNode === null && index === 0 && props.highlightFirst,
     isSelected: props.selectedNode?.id === node.id,
-    isDescriptionActive: props.showDescriptionForNode?.id === node.id,
+    isDescriptionActive: props.showDetailsFor?.id === node.id,
     displayMode: props.displayMode,
   };
 };
@@ -261,7 +261,7 @@ defineExpose({ focusFirst, focusLast });
         :aria-label="`Select node ${node.name}`"
         :data-index="index"
         @keydown.enter.stop.prevent="$emit('enterKey', node)"
-        @keydown.i.stop.prevent="$emit('helpKey', node)"
+        @keydown.i.stop.prevent="$emit('showNodeDetails', node)"
       >
         <slot name="item" v-bind="nodeTemplateProps(node, index)">
           <NodeTemplate v-bind="nodeTemplateProps(node, index)" />
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
index 402d063b8..ed1b37998 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
@@ -12,7 +12,7 @@ import NodeTemplateListMode from "./NodeTemplateListMode.vue";
 /**
  * Basic NodeTemplate without any drag or insert features. This component should stay reusable.
  */
-export interface Props {
+export type Props = {
   /**
    * Additional to the properties of the NodeTemplate from the gateway API, this object
    * contains the port information (color and kind) which was mapped from the store
@@ -23,7 +23,7 @@ export interface Props {
   isDescriptionActive?: boolean;
   isHighlighted?: boolean;
   showFloatingHelpIcon?: boolean;
-}
+};
 
 const props = withDefaults(defineProps<Props>(), {
   displayMode: "icon",
@@ -86,6 +86,7 @@ defineExpose({ getNodePreview });
         :in-ports="nodeTemplate.inPorts"
         :out-ports="nodeTemplate.outPorts"
         :icon="nodeTemplate.icon"
+        :is-component="nodeTemplate.component"
       />
     </template>
   </Component>
diff --git a/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue b/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue
index 825bcdd8d..d7cf353cf 100644
--- a/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue
+++ b/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue
@@ -3,7 +3,7 @@ import SkeletonItem from "./SkeletonItem.vue";
 
 type Props = {
   numberOfNodes?: number;
-  displayMode?: string;
+  displayMode?: "icon" | "list";
 };
 
 withDefaults(defineProps<Props>(), {
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
index dd56386d1..f4f68a8a7 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
@@ -56,7 +56,7 @@ const focusFirst = () => {
   searchResults.value?.focusFirst();
 };
 
-const onHelpKey = (node: NodeTemplateWithExtendedPorts) => {
+const onShowNodeDetails = (node: NodeTemplateWithExtendedPorts) => {
   emit("showNodeDescription", {
     nodeTemplate: node,
     isDescriptionActive: showDescriptionForNode.value?.id === node.id,
@@ -87,7 +87,7 @@ const displayModeSupported = computed(() => {
     :num-filtered-out-nodes="totalNumFilteredNodesFound"
     :is-loading-search-results="isLoadingSearchResults"
     @item-enter-key="addNodeToWorkflow({ nodeFactory: $event.nodeFactory! })"
-    @help-key="onHelpKey"
+    @show-node-details="onShowNodeDetails"
     @nav-reached-top="$emit('navReachedTop', $event)"
   >
     <template #nodesTemplate="slotProps">
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
index c807f8435..cd8a1c06d 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
@@ -56,7 +56,7 @@ const onSelectTag = (tag: string) => {
   nodeRepositoryStore.updateSelectedTags([tag]);
 };
 
-const onHelpKey = (node: NodeTemplateWithExtendedPorts) => {
+const onShowNodeDetails = (node: NodeTemplateWithExtendedPorts) => {
   emit("showNodeDescription", {
     nodeTemplate: node,
     isDescriptionActive: showDescriptionForNode.value?.id === node.id,
@@ -117,11 +117,11 @@ defineExpose({ focusFirst });
             :nodes="nodes"
             class="tag-node-list"
             :has-more-nodes="nodes.length >= TAG_LIMIT"
-            :show-description-for-node="showDescriptionForNode"
+            :show-details-for="showDescriptionForNode"
             :display-mode="displayMode"
             @show-more="onSelectTag(tag)"
             @enter-key="addNodeToWorkflow"
-            @help-key="onHelpKey"
+            @show-node-details="onShowNodeDetails"
             @nav-reached-top="onNavReachedTop(index, $event)"
             @nav-reached-end="onNavReachedEnd(index, $event)"
           >
diff --git a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
index 3d97be172..585bc7782 100644
--- a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, toRefs, watch } from "vue";
+import { computed, toRefs, useTemplateRef, watch } from "vue";
 
 import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
-import NodeList, {
-  type NavReachedEvent,
-} from "@/components/common/NodeList/NodeList.vue";
-import ScrollViewContainer from "@/components/common/ScrollViewContainer/ScrollViewContainer.vue";
-import SkeletonNodes from "@/components/common/skeleton-loader/SkeletonNodes.vue";
+import { type NavReachedEvent } from "@/components/common/NodeList/NodeList.vue";
 import { knimeExternalUrls } from "@/plugins/knimeExternalUrls";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
-import { createStaggeredLoader } from "@/util/createStaggeredLoader";
+import InfiniteNodeList from "../common/NodeList/InfiniteNodeList.vue";
 
 import SearchResultsInfo from "./SearchResultsInfo.vue";
 
@@ -24,20 +20,17 @@ type Props = {
   nodes: NodeTemplateWithExtendedPorts[] | null;
   query: string;
   selectedTags?: string[];
-  searchScrollPosition?: number;
-  selectedNode: NodeTemplateWithExtendedPorts | null;
   showDescriptionForNode?: NodeTemplateWithExtendedPorts | null;
   searchActions: SearchActions;
   numFilteredOutNodes: number;
   highlightFirst?: boolean;
-  displayMode?: NodeRepositoryDisplayModesType;
+  displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
   isLoadingSearchResults: boolean;
   isQuickAddNodeMenu?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   selectedTags: () => [],
-  searchScrollPosition: 0,
   highlightFirst: false,
   displayMode: "icon",
   isQuickAddNodeMenu: false,
@@ -45,16 +38,13 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: "navReachedTop", event: NavReachedEvent): void;
-  (e: "update:searchScrollPosition", position: number): void;
-  (e: "update:selectedNode", value: NodeTemplateWithExtendedPorts | null): void;
-  (e: "itemEnterKey", node: NodeTemplateWithExtendedPorts): void;
-  (e: "helpKey", node: NodeTemplateWithExtendedPorts): void;
+  navReachedTop: [event: NavReachedEvent];
+  itemEnterKey: [node: NodeTemplateWithExtendedPorts];
+  showNodeDetails: [node: NodeTemplateWithExtendedPorts];
 }>();
 
 const {
   nodes,
-  selectedNode,
   query,
   selectedTags,
   searchActions,
@@ -62,124 +52,55 @@ const {
   isLoadingSearchResults,
 } = toRefs(props);
 
-const isLoadingNextPage = ref(false);
-const isLoadingSearchResultsDeferred = ref(false);
 const { KNIME_HUB_SEARCH_URL } = knimeExternalUrls;
 
-const setIsLoadingNextPage = createStaggeredLoader({
-  firstStageCallback: () => {
-    isLoadingNextPage.value = true;
-  },
-  resetCallback: () => {
-    isLoadingNextPage.value = false;
-  },
-});
-
-const setIsLoadingSearchResultsDeferred = createStaggeredLoader({
-  firstStageCallback: () => {
-    isLoadingSearchResultsDeferred.value = true;
-  },
-  resetCallback: () => {
-    isLoadingSearchResultsDeferred.value = false;
-  },
-});
+const isNodeListEmpty = computed(() => nodes.value?.length === 0);
 
-watch(
-  isLoadingSearchResults,
-  (value) => {
-    setIsLoadingSearchResultsDeferred(value);
-  },
-  { immediate: true },
+const scrollPosition = defineModel<number>("scrollPosition", { default: 0 });
+const selectedNode = defineModel<NodeTemplateWithExtendedPorts | null>(
+  "selectedNode",
+  { default: null },
 );
 
-const isNodeListEmpty = computed(() => nodes.value?.length === 0);
-const selectedNodeModel = computed({
-  get() {
-    return selectedNode.value;
-  },
-  set(value) {
-    emit("update:selectedNode", value);
-  },
-});
 const searchHubLink = computed(() =>
   KNIME_HUB_SEARCH_URL.replace("%s", encodeURIComponent(query.value)),
 );
 
-const onSaveScrollPosition = (position: number) => {
-  emit("update:searchScrollPosition", position);
-};
+const infiniteList = useTemplateRef("infiniteList");
 
-const scroller = ref<InstanceType<typeof ScrollViewContainer> | null>(null);
 const onSearchChanged = async () => {
-  // wait for new content to be displayed, then scroll to top
-  await nextTick();
-  if (scroller.value) {
-    scroller.value.$el.scrollTop = 0;
-  }
-};
-
-const loadMoreSearchResults = async () => {
-  setIsLoadingNextPage(true);
-  await searchActions.value.searchNodesNextPage();
-  setIsLoadingNextPage(false);
+  await infiniteList.value?.scrollToTop();
 };
+watch(query, onSearchChanged);
+watch(selectedTags, onSearchChanged);
 
-const nodeList = ref<InstanceType<typeof NodeList> | null>(null);
 const focusFirst = () => {
-  nodeList.value?.focusFirst();
+  infiniteList.value?.focusFirst();
 };
 
-watch(query, onSearchChanged);
-watch(selectedTags, onSearchChanged);
-
 defineExpose({ focusFirst });
 </script>
 
 <template>
-  <ScrollViewContainer
-    ref="scroller"
-    class="results"
-    :initial-position="searchScrollPosition"
-    @save-position="onSaveScrollPosition"
-    @scroll-bottom="loadMoreSearchResults"
+  <InfiniteNodeList
+    ref="infiniteList"
+    v-model:selected-node="selectedNode"
+    v-model:scroll-position="scrollPosition"
+    :nodes="nodes ?? []"
+    :highlight-first="highlightFirst"
+    :display-mode="displayMode"
+    :show-details-for="showDescriptionForNode"
+    :fetch-more="searchActions.searchNodesNextPage"
+    :is-loading-search-results="isLoadingSearchResults"
+    @nav-reached-top="emit('navReachedTop', $event)"
+    @enter-key="emit('itemEnterKey', $event)"
+    @show-node-details="emit('showNodeDetails', $event)"
   >
-    <div class="content">
-      <div
-        v-if="!isNodeListEmpty && !isLoadingSearchResults"
-        class="node-list-wrapper"
-      >
-        <NodeList
-          ref="nodeList"
-          v-model:selected-node="selectedNodeModel"
-          class="node-list"
-          :nodes="nodes!"
-          :highlight-first="highlightFirst"
-          :display-mode="displayMode"
-          :show-description-for-node="showDescriptionForNode"
-          @nav-reached-top="emit('navReachedTop', $event)"
-          @enter-key="emit('itemEnterKey', $event)"
-          @help-key="emit('helpKey', $event)"
-        >
-          <template #item="slotProps">
-            <slot name="nodesTemplate" v-bind="slotProps" />
-          </template>
-        </NodeList>
-
-        <SkeletonNodes
-          v-if="isLoadingNextPage"
-          class="node-list-skeleton"
-          :number-of-nodes="5"
-          :display-mode="displayMode"
-        />
-      </div>
-
-      <SkeletonNodes
-        v-if="isLoadingSearchResultsDeferred"
-        class="node-list-skeleton"
-        :number-of-nodes="5"
-        :display-mode="displayMode"
-      />
+    <template #nodesTemplate="slotProps">
+      <slot name="nodesTemplate" v-bind="slotProps" />
+    </template>
 
+    <template #noResults>
       <SearchResultsInfo
         v-if="!isLoadingSearchResults"
         :num-filtered-out-nodes="numFilteredOutNodes"
@@ -187,8 +108,8 @@ defineExpose({ focusFirst });
         :search-hub-link="searchHubLink"
         :mini="isQuickAddNodeMenu"
       />
-    </div>
-  </ScrollViewContainer>
+    </template>
+  </InfiniteNodeList>
 </template>
 
 <style lang="postcss" scoped>
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
index 00c094974..88343be0c 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
@@ -10,7 +10,7 @@ import type { NodeRepositoryDisplayModesType } from "@/store/settings";
 
 type Props = {
   selectedNode: NodeTemplateWithExtendedPorts | null;
-  displayMode?: NodeRepositoryDisplayModesType;
+  displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
 };
 
 withDefaults(defineProps<Props>(), {

From 72ddf2cb97c867b4b5a9d0e9be43b6be4478fec9 Mon Sep 17 00:00:00 2001
From: Helian Rivera <helian.rivera@knime.com>
Date: Thu, 18 Dec 2025 11:17:49 +0100
Subject: [PATCH 05/11] NXT-4296: setup structure for component search

NXT-4296 (Gateway API for component search (use HubClient SDK to call Search Service; aggregate and map entities for FE; error handling))
---
 .../common/NodeList/InfiniteNodeList.vue      |   4 +-
 .../ComponentSearchResults.vue                |  39 +++++++
 .../nodeRepository/NodeRepository.vue         |  12 ++
 .../header/NodeRepositoryHeader.vue           |  58 +++++++--
 .../src/store/componentSearch/index.ts        | 110 ++++++++++++++++++
 .../src/test/factories/componentSearch.ts     |  29 +++++
 6 files changed, 242 insertions(+), 10 deletions(-)
 create mode 100644 org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
 create mode 100644 org.knime.ui.js/src/store/componentSearch/index.ts
 create mode 100644 org.knime.ui.js/src/test/factories/componentSearch.ts

diff --git a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
index b635499c4..694025859 100644
--- a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
+++ b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
@@ -11,7 +11,7 @@ import type { NodeRepositoryDisplayModesType } from "@/store/settings";
 
 type Props = {
   nodes: NodeTemplateWithExtendedPorts[];
-  fetchMore: () => Promise<any>;
+  fetchMore: () => Promise<void>;
   showDetailsFor?: NodeTemplateWithExtendedPorts | null;
   highlightFirst?: boolean;
   displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
@@ -62,7 +62,7 @@ defineExpose({ focusFirst, scrollToTop });
     :fetch-more="fetchMore"
   >
     <template #default="{ isLoadingNextPage, isLoadingSearchResultsDeferred }">
-      <div v-if="!isEmpty && !isLoadingSearchResults" class="node-list-wrapper">
+      <div v-if="!isEmpty" class="node-list-wrapper">
         <NodeList
           ref="nodeList"
           v-model:selected-node="selectedNode"
diff --git a/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue b/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
new file mode 100644
index 000000000..be82c1eee
--- /dev/null
+++ b/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { toRef, watch } from "vue";
+import { storeToRefs } from "pinia";
+
+import InfiniteNodeList from "@/components/common/NodeList/InfiniteNodeList.vue";
+import { useComponentSearchStore } from "@/store/componentSearch";
+import DraggableNodeTemplate from "../common/NodeTemplate/DraggableNodeTemplate.vue";
+
+type Props = {
+  active: boolean;
+};
+const props = defineProps<Props>();
+
+const componentSearchStore = useComponentSearchStore();
+const { isLoading, hasLoaded, results, searchScrollPosition } =
+  storeToRefs(componentSearchStore);
+
+watch(toRef(props, "active"), () => {
+  if (props.active && !hasLoaded.value) {
+    componentSearchStore.searchComponents();
+  }
+});
+</script>
+
+<template>
+  <InfiniteNodeList
+    ref="infiniteList"
+    v-model:scroll-position="searchScrollPosition"
+    :nodes="results"
+    :fetch-more="() => componentSearchStore.searchComponents({ append: true })!"
+    :is-loading-search-results="isLoading"
+  >
+    <template #nodesTemplate="slotProps">
+      <DraggableNodeTemplate v-bind="slotProps" />
+    </template>
+
+    <template #noResults> There are no components </template>
+  </InfiniteNodeList>
+</template>
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
index 1c51c6306..0ad6c5068 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
@@ -11,6 +11,7 @@ import { useLifecycleStore } from "@/store/application/lifecycle";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import { usePanelStore } from "@/store/panel";
 import { useSettingsStore } from "@/store/settings";
+import ComponentSearchResults from "../componentSearch/ComponentSearchResults.vue";
 
 import CategoryTree from "./CategoryTree.vue";
 import NodeRepositoryLoader from "./NodeRepositoryLoader.vue";
@@ -112,18 +113,22 @@ const handleNavReachedTop = (event: { key: NavigationKey }) => {
     header.value?.focusSearchInput();
   }
 };
+
+const searchContext = ref<"nodes" | "components">("nodes");
 </script>
 
 <template>
   <div class="node-repo">
     <NodeRepositoryHeader
       ref="header"
+      v-model="searchContext"
       @search-bar-down-key="onSearchBarDownKey"
     />
 
     <template v-if="nodeRepositoryLoaded">
       <SidebarSearchResults
         v-if="searchIsActive"
+        v-show="searchContext === 'nodes'"
         ref="searchResults"
         :display-mode="displayMode"
         @nav-reached-top="handleNavReachedTop($event)"
@@ -131,6 +136,7 @@ const handleNavReachedTop = (event: { key: NavigationKey }) => {
       />
       <NodesGroupedByTag
         v-else-if="displayMode !== 'tree'"
+        v-show="searchContext === 'nodes'"
         ref="nodesGroupedByTag"
         :display-mode="displayMode"
         @nav-reached-top="handleNavReachedTop($event)"
@@ -138,10 +144,16 @@ const handleNavReachedTop = (event: { key: NavigationKey }) => {
       />
       <CategoryTree
         v-else
+        v-show="searchContext === 'nodes'"
         ref="categoryTree"
         @nav-reached-top="handleNavReachedTop($event)"
         @show-node-description="toggleNodeDescription"
       />
+
+      <ComponentSearchResults
+        v-show="searchContext === 'components'"
+        :active="searchContext === 'components'"
+      />
     </template>
 
     <template v-else>
diff --git a/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue b/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
index 8a459a305..0960ce5b2 100644
--- a/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
@@ -7,6 +7,7 @@ import {
   type MenuItem,
   SearchInput,
   SubMenu,
+  ValueSwitch,
 } from "@knime/components";
 import DisplayModeListIcon from "@knime/styles/img/icons/list.svg";
 import DisplayModeTreeIcon from "@knime/styles/img/icons/unordered-list.svg";
@@ -15,6 +16,7 @@ import DisplayModeGridIcon from "@knime/styles/img/icons/view-cards.svg";
 import ActionBreadcrumb from "@/components/common/ActionBreadcrumb.vue";
 import { useApplicationStore } from "@/store/application/application";
 import { useApplicationSettingsStore } from "@/store/application/settings";
+import { useComponentSearchStore } from "@/store/componentSearch";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import {
   type NodeRepositoryDisplayModesType,
@@ -24,11 +26,10 @@ import {
 import CloseableTagList from "./CloseableTagList.vue";
 
 const nodeRepositoryStore = useNodeRepositoryStore();
-const {
-  searchIsActive,
-  tagsOfVisibleNodes: tags,
-  query,
-} = storeToRefs(nodeRepositoryStore);
+const { searchIsActive, tagsOfVisibleNodes: tags } =
+  storeToRefs(nodeRepositoryStore);
+
+const componentSearchStore = useComponentSearchStore();
 
 const selectedTags = computed({
   get() {
@@ -49,7 +50,34 @@ const { hasNodeCollectionActive, activeNodeCollection } = storeToRefs(
 );
 const { nodeRepositoryLoaded } = storeToRefs(useApplicationStore());
 
+const searchContext = defineModel<"nodes" | "components">();
+const isComponentSearch = computed(() => searchContext.value === "components");
+
+const currentSearchQuery = computed(() => {
+  if (isComponentSearch.value) {
+    return componentSearchStore.query;
+  } else {
+    return nodeRepositoryStore.query;
+  }
+});
+
+const updateSearchQuery = (value: string) => {
+  if (isComponentSearch.value) {
+    componentSearchStore.updateQuery(value);
+  } else {
+    nodeRepositoryStore.updateQuery(value);
+  }
+};
+
+const switchSearchContext = (value: "nodes" | "components") => {
+  searchContext.value = value;
+};
+
 const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
+  if (isComponentSearch.value) {
+    return [{ text: "Components" }];
+  }
+
   // If search results are shown, it's possible to navigate back
   return searchIsActive.value
     ? [{ text: "Nodes", id: "clear" }, { text: "Results" }]
@@ -114,7 +142,19 @@ defineExpose({ focusSearchInput });
         />
 
         <div class="actions">
+          <ValueSwitch
+            compact
+            :disabled="!nodeRepositoryLoaded"
+            :model-value="searchContext"
+            :possible-values="[
+              { id: 'nodes', text: 'nodes' },
+              { id: 'components', text: 'components' },
+            ]"
+            @update:model-value="switchSearchContext"
+          />
+
           <SubMenu
+            v-if="!isComponentSearch"
             :items="displayModeSubMenuItems"
             :teleport-to-body="false"
             class="display-modes-sub-menu"
@@ -134,9 +174,10 @@ defineExpose({ focusSearchInput });
           </SubMenu>
         </div>
       </div>
+
       <SearchInput
         ref="searchBar"
-        :model-value="query"
+        :model-value="currentSearchQuery"
         spellcheck="false"
         compact
         :maxlength="$characterLimits.searchFields"
@@ -149,11 +190,12 @@ defineExpose({ focusSearchInput });
         class="search-bar"
         @keydown.down.prevent="$emit('searchBarDownKey')"
         @clear="nodeRepositoryStore.clearSearchParams"
-        @update:model-value="nodeRepositoryStore.updateQuery($event)"
+        @update:model-value="updateSearchQuery"
       />
     </div>
+
     <CloseableTagList
-      v-if="searchIsActive && tags.length"
+      v-if="searchIsActive && tags.length && !isComponentSearch"
       v-model="selectedTags"
       :tags="tags"
     />
diff --git a/org.knime.ui.js/src/store/componentSearch/index.ts b/org.knime.ui.js/src/store/componentSearch/index.ts
new file mode 100644
index 000000000..b12a9ff1e
--- /dev/null
+++ b/org.knime.ui.js/src/store/componentSearch/index.ts
@@ -0,0 +1,110 @@
+import { readonly, ref } from "vue";
+import { debounce } from "lodash-es";
+import { defineStore } from "pinia";
+
+import { promise } from "@knime/utils";
+
+import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
+import {
+  createData,
+  fromComponentSearchItemToNodeTemplate,
+} from "@/components/componentSearch/mocks";
+
+const PAGE_SIZE = 50;
+
+export const useComponentSearchStore = defineStore("componentSearch", () => {
+  const isLoading = ref(false);
+  const hasLoaded = ref(false);
+  const query = ref("");
+  const currentOffset = ref(0);
+  const searchScrollPosition = ref(0);
+
+  const results = ref<NodeTemplateWithExtendedPorts[]>([]);
+
+  let abortController: AbortController;
+
+  const searchComponents = async (
+    params: { append?: boolean } = {},
+  ): Promise<void> => {
+    const { append = false } = params;
+
+    isLoading.value = true;
+
+    const { abortController: newAbortController, runAbortablePromise } =
+      promise.createAbortablePromise();
+
+    if (abortController) {
+      abortController.abort();
+    }
+
+    abortController = newAbortController;
+
+    try {
+      console.log("FETCHING  :>> ", {
+        query: query.value,
+        offset: currentOffset.value,
+        limit: PAGE_SIZE,
+      });
+      consola.info("componentSearch:: Fetching components", {
+        query: query.value,
+        offset: currentOffset.value,
+        limit: PAGE_SIZE,
+      });
+
+      const response = await runAbortablePromise(async () => {
+        // eslint-disable-next-line no-magic-numbers
+        await new Promise((r) => setTimeout(r, 5000));
+
+        if (query.value === "foo") {
+          return [];
+        }
+
+        const response = createData(
+          PAGE_SIZE,
+          PAGE_SIZE * currentOffset.value,
+        ).map(fromComponentSearchItemToNodeTemplate);
+
+        return response;
+      });
+
+      console.log("FETCHED  :>> ", {
+        query: query.value,
+        offset: currentOffset.value,
+        limit: PAGE_SIZE,
+      });
+
+      results.value = append ? results.value.concat(response) : response;
+
+      isLoading.value = false;
+      hasLoaded.value = true;
+      currentOffset.value++;
+    } catch (error) {
+      if (error instanceof promise.AbortError) {
+        return;
+      }
+
+      throw error;
+    }
+  };
+
+  const debouncedSearch = debounce(() => searchComponents(), 300);
+
+  const updateQuery = (value: string) => {
+    query.value = value;
+    currentOffset.value = 0;
+    results.value = [];
+    hasLoaded.value = false;
+    isLoading.value = true;
+    debouncedSearch();
+  };
+
+  return {
+    searchScrollPosition,
+    query: readonly(query),
+    isLoading: readonly(isLoading),
+    hasLoaded: readonly(hasLoaded),
+    results,
+    searchComponents,
+    updateQuery,
+  };
+});
diff --git a/org.knime.ui.js/src/test/factories/componentSearch.ts b/org.knime.ui.js/src/test/factories/componentSearch.ts
new file mode 100644
index 000000000..1437d9b18
--- /dev/null
+++ b/org.knime.ui.js/src/test/factories/componentSearch.ts
@@ -0,0 +1,29 @@
+import { merge } from "lodash-es";
+
+import { ComponentSearchItem } from "@/api/gateway-api/generated-api";
+import type { DeepPartial } from "../utils";
+
+import { PORT_TYPE_IDS } from "./common";
+
+export const createComponentSearchItem = (
+  data: DeepPartial<ComponentSearchItem>,
+) => {
+  return merge(
+    {
+      type: ComponentSearchItem.TypeEnum.Manipulator,
+      description: "This is the component description",
+      name: "Awesome component",
+      inPorts: [
+        {
+          name: PORT_TYPE_IDS.BufferedDataTable,
+          color: "#000",
+          description: "This is the first port",
+          optional: false,
+          portTypeName: "table",
+        },
+      ],
+      outPorts: [],
+    } satisfies ComponentSearchItem,
+    data,
+  );
+};

From cece9e2e8c7dd58ae13cfea0b1b1f6d1f64eb83f Mon Sep 17 00:00:00 2001
From: Helian Rivera <helian.rivera@knime.com>
Date: Thu, 18 Dec 2025 12:14:46 +0100
Subject: [PATCH 06/11] NXT-4296: rework data mapper utils

NXT-4296 (Gateway API for component search (use HubClient SDK to call Search Service; aggregate and map entities for FE; error handling))
---
 .../nodeDescription/NodeDescription.vue       |   2 +-
 .../NodeDescriptionContent.vue                |   2 +-
 .../NodeDescriptionExtensionInfo.vue          |   2 +-
 .../uiExtensions/ValidationInfo.vue           |   6 +-
 .../portViews/PortViewTabOutput.vue           |   4 +-
 .../ContextMenu/ContextMenu.vue               |   4 +-
 .../SVGKanvas/ports/NodePort/NodePort.vue     |   4 +-
 .../WebGLKanvas/ports/NodePort.vue            |   4 +-
 .../workflowMetadata/ComponentMetadata.vue    |  14 +-
 .../src/store/common/useNodeSearch.ts         |   4 +-
 .../src/store/componentSearch/index.ts        |  26 ++-
 .../store/nodeDescription/nodeDescription.ts  |  23 ++-
 org.knime.ui.js/src/store/nodeRepository.ts   |   8 +-
 .../src/store/nodeTemplates/nodeTemplates.ts  |   4 +-
 org.knime.ui.js/src/store/quickAddNodes.ts    |   4 +-
 .../src/test/factories/nodeRepository.ts      |   6 +-
 .../src/util/compatibleConnections.ts         |   8 +-
 .../__tests__/componentDescription.test.ts    | 143 +++++++++++++++
 .../__tests__/nodeDescription.test.ts         | 144 +++++++++++++++
 .../__tests__/nodeTemplate.test.ts            | 112 ++++++++++++
 .../util/dataMappers/__tests__/ports.test.ts  |  86 +++++++++
 .../util/dataMappers/componentDescription.ts  |  31 ++++
 .../src/util/dataMappers/componentSearch.ts   |  18 ++
 org.knime.ui.js/src/util/dataMappers/index.ts |  18 ++
 .../src/util/dataMappers/nodeDescription.ts   |  79 +++++++++
 .../src/util/dataMappers/nodeTemplate.ts      |  26 +++
 org.knime.ui.js/src/util/dataMappers/ports.ts |  39 ++++
 .../src/util/fuzzyPortTypeSearch.js           |   6 +-
 org.knime.ui.js/src/util/portDataMapper.ts    | 166 ------------------
 29 files changed, 764 insertions(+), 229 deletions(-)
 create mode 100644 org.knime.ui.js/src/util/dataMappers/__tests__/componentDescription.test.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/__tests__/nodeDescription.test.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/__tests__/nodeTemplate.test.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/__tests__/ports.test.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/componentDescription.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/componentSearch.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/index.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/ports.ts
 delete mode 100644 org.knime.ui.js/src/util/portDataMapper.ts

diff --git a/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue b/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue
index 917abf4db..4b01dcadc 100644
--- a/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue
+++ b/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue
@@ -12,7 +12,7 @@ import { useNodeDescriptionStore } from "@/store/nodeDescription/nodeDescription
 import type {
   ComponentNodeDescriptionWithExtendedPorts,
   NativeNodeDescriptionWithExtendedPorts,
-} from "@/util/portDataMapper";
+} from "@/util/dataMappers";
 import SidebarPanelLayout from "../common/side-panel/SidebarPanelLayout.vue";
 import SidebarPanelScrollContainer from "../common/side-panel/SidebarPanelScrollContainer.vue";
 
diff --git a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue
index ba7431b3d..7912d07a3 100644
--- a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue
+++ b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue
@@ -8,7 +8,7 @@ import MetadataDescription from "@/components/workflowMetadata/MetadataDescripti
 import type {
   ComponentNodeDescriptionWithExtendedPorts,
   NativeNodeDescriptionWithExtendedPorts,
-} from "@/util/portDataMapper";
+} from "@/util/dataMappers";
 
 type Props = {
   descriptionData:
diff --git a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue
index b6bc68a94..f1d75cc86 100644
--- a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue
+++ b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue
@@ -2,7 +2,7 @@
 import KNIMETriangleIcon from "@knime/styles/img/KNIME_Triangle.svg";
 import ExtensionIcon from "@knime/styles/img/icons/extension.svg";
 
-import type { NativeNodeDescriptionWithExtendedPorts } from "@/util/portDataMapper";
+import type { NativeNodeDescriptionWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   descriptionData: NativeNodeDescriptionWithExtendedPorts;
diff --git a/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue b/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue
index a6dcae2f7..5f845813f 100644
--- a/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue
+++ b/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue
@@ -8,8 +8,8 @@ import { useApplicationStore } from "@/store/application/application";
 import { useNodeConfigurationStore } from "@/store/nodeConfiguration/nodeConfiguration";
 import { useUIControlsStore } from "@/store/uiControls/uiControls";
 import { useExecutionStore } from "@/store/workflow/execution";
+import { ports } from "@/util/dataMappers";
 import * as nodeUtils from "@/util/nodeUtil";
-import { toExtendedPortObject } from "@/util/portDataMapper";
 
 import ExecuteButton from "./ExecuteButton.vue";
 import LegacyPortViewButtons from "./LegacyPortViewButtons.vue";
@@ -40,7 +40,9 @@ const fullPortObject = computed(() => {
 
     const selectedPort = props.selectedNode.outPorts[props.selectedPortIndex];
 
-    return toExtendedPortObject(availablePortTypes.value)(selectedPort.typeId);
+    return ports.toExtendedPortObject(availablePortTypes.value)(
+      selectedPort.typeId,
+    );
   } catch (_error) {
     return null;
   }
diff --git a/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue b/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue
index eabc69f72..be923ea13 100644
--- a/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue
+++ b/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue
@@ -3,7 +3,7 @@ import { computed, watch } from "vue";
 import { API } from "@api";
 
 import type { AvailablePortTypes, KnimeNode } from "@/api/custom-types";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import {
   buildMiddleware,
   validateNodeConfigurationState,
@@ -116,7 +116,7 @@ const portViews = computed(() => {
     return null;
   }
 
-  const fullPortObject = toExtendedPortObject(props.availablePortTypes)(
+  const fullPortObject = ports.toExtendedPortObject(props.availablePortTypes)(
     selectedPort.value.typeId,
   );
 
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
index dcad689df..dd09a0c1f 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
@@ -23,6 +23,7 @@ import { useUIControlsStore } from "@/store/uiControls/uiControls";
 import { useExecutionStore } from "@/store/workflow/execution";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
+import { ports } from "@/util/dataMappers";
 import { getPortViewByViewDescriptors } from "@/util/getPortViewByViewDescriptors";
 import { menuGroupsBuilder } from "@/util/menuGroupsBuilder";
 import {
@@ -31,7 +32,6 @@ import {
   isNodeComponent,
   isNodeMetaNode,
 } from "@/util/nodeUtil";
-import { toExtendedPortObject } from "@/util/portDataMapper";
 import { getFloatingMenuComponent } from "../getFloatingMenuComponent";
 
 type ShortcutItem = { name: ShortcutName; isVisible: boolean };
@@ -117,7 +117,7 @@ const portViews = (): MenuItem[] => {
 
   const nodeId = node.id;
   const allOutPorts = node.outPorts.map((port: NodePort) =>
-    toExtendedPortObject(availablePortTypes.value)(port),
+    ports.toExtendedPortObject(availablePortTypes.value)(port),
   );
 
   return allOutPorts.flatMap((port, portIndex) => {
diff --git a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue
index a0020743f..f9d50cb46 100644
--- a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue
@@ -11,7 +11,7 @@ import { useApplicationStore } from "@/store/application/application";
 import { useCanvasAnchoredComponentsStore } from "@/store/canvasAnchoredComponents/canvasAnchoredComponents";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import NodePortActiveConnector from "../NodePortActiveConnector.vue";
 
 import NodePortActions from "./NodePortActions.vue";
@@ -45,7 +45,7 @@ const anchorPoint = inject<XY>("anchorPoint");
 const { availablePortTypes } = storeToRefs(useApplicationStore());
 
 const portTemplate = computed(() => {
-  const template = toExtendedPortObject(availablePortTypes.value)(
+  const template = ports.toExtendedPortObject(availablePortTypes.value)(
     props.port.typeId,
   );
   if (!template) {
diff --git a/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue b/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue
index 35ffd1421..99dec0b23 100644
--- a/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue
@@ -12,7 +12,7 @@ import { useCanvasAnchoredComponentsStore } from "@/store/canvasAnchoredComponen
 import { useFloatingConnectorStore } from "@/store/floatingConnector/floatingConnector";
 import { portSize } from "@/style/shapes";
 import * as $shapes from "@/style/shapes";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import { type ContainerInst, type GraphicsInst } from "@/vue3-pixi";
 import type { TooltipDefinition } from "../../types";
 import { useAnimatePixiContainer } from "../common/useAnimatePixiContainer";
@@ -56,7 +56,7 @@ const hitArea = new Rectangle(
 );
 
 const portTemplate = computed(() => {
-  const template = toExtendedPortObject(availablePortTypes.value)(
+  const template = ports.toExtendedPortObject(availablePortTypes.value)(
     props.port.typeId,
   );
   if (!template) {
diff --git a/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue b/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue
index d0c3a53b1..b8566dc34 100644
--- a/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue
+++ b/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue
@@ -15,7 +15,7 @@ import {
 import ExternalResourcesList from "@/components/common/ExternalResourcesList.vue";
 import ComponentIconEditor from "@/components/workflowMetadata/ComponentIconEditor.vue";
 import ComponentTypeEditor from "@/components/workflowMetadata/ComponentTypeEditor.vue";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import { recreateLinebreaks } from "@/util/recreateLineBreaks";
 import SidebarPanelLayout from "../common/side-panel/SidebarPanelLayout.vue";
 import SidebarPanelScrollContainer from "../common/side-panel/SidebarPanelScrollContainer.vue";
@@ -53,8 +53,10 @@ const nodeFeatures = computed(() => {
   } = componentMetadata.value;
 
   return {
-    inPorts: inPorts.map(toExtendedPortObject(props.availablePortTypes)),
-    outPorts: outPorts.map(toExtendedPortObject(props.availablePortTypes)),
+    inPorts: inPorts.map(ports.toExtendedPortObject(props.availablePortTypes)),
+    outPorts: outPorts.map(
+      ports.toExtendedPortObject(props.availablePortTypes),
+    ),
     views,
     options,
   };
@@ -143,8 +145,10 @@ const nodePreview = computed(() => {
   const icon = getMetadataFieldValue("icon") || null;
 
   return {
-    inPorts: inPorts.map(toExtendedPortObject(props.availablePortTypes)),
-    outPorts: outPorts.map(toExtendedPortObject(props.availablePortTypes)),
+    inPorts: inPorts.map(ports.toExtendedPortObject(props.availablePortTypes)),
+    outPorts: outPorts.map(
+      ports.toExtendedPortObject(props.availablePortTypes),
+    ),
     icon,
     type,
     isComponent: true,
diff --git a/org.knime.ui.js/src/store/common/useNodeSearch.ts b/org.knime.ui.js/src/store/common/useNodeSearch.ts
index 9ca0947d2..e3ac876bf 100644
--- a/org.knime.ui.js/src/store/common/useNodeSearch.ts
+++ b/org.knime.ui.js/src/store/common/useNodeSearch.ts
@@ -9,7 +9,7 @@ import type {
 import { createAbortablePromise } from "@/api/utils";
 import { useApplicationStore } from "@/store/application/application";
 import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import { nodeTemplate } from "@/util/dataMappers";
 
 /**
  * This composable is meant to be shared and used by other stores
@@ -188,7 +188,7 @@ export const useNodeSearch = () => {
       } = searchResponse;
 
       const withMappedPorts = fetchedNodes.map(
-        toNodeTemplateWithExtendedPorts(
+        nodeTemplate.toNodeTemplateWithExtendedPorts(
           useApplicationStore().availablePortTypes,
         ),
       );
diff --git a/org.knime.ui.js/src/store/componentSearch/index.ts b/org.knime.ui.js/src/store/componentSearch/index.ts
index b12a9ff1e..6c73e5022 100644
--- a/org.knime.ui.js/src/store/componentSearch/index.ts
+++ b/org.knime.ui.js/src/store/componentSearch/index.ts
@@ -5,10 +5,15 @@ import { defineStore } from "pinia";
 import { promise } from "@knime/utils";
 
 import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
-import {
-  createData,
-  fromComponentSearchItemToNodeTemplate,
-} from "@/components/componentSearch/mocks";
+import { createComponentSearchItem } from "@/test/factories/componentSearch";
+import { componentSearch } from "@/util/dataMappers";
+
+export const createData = (total: number, startOffset = 0) =>
+  new Array(total)
+    .fill(0)
+    .map((_, i) =>
+      createComponentSearchItem({ name: `Component ${startOffset + i}` }),
+    );
 
 const PAGE_SIZE = 50;
 
@@ -40,11 +45,6 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
     abortController = newAbortController;
 
     try {
-      console.log("FETCHING  :>> ", {
-        query: query.value,
-        offset: currentOffset.value,
-        limit: PAGE_SIZE,
-      });
       consola.info("componentSearch:: Fetching components", {
         query: query.value,
         offset: currentOffset.value,
@@ -62,17 +62,11 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
         const response = createData(
           PAGE_SIZE,
           PAGE_SIZE * currentOffset.value,
-        ).map(fromComponentSearchItemToNodeTemplate);
+        ).map(componentSearch.toNodeTemplateWithExtendedPorts);
 
         return response;
       });
 
-      console.log("FETCHED  :>> ", {
-        query: query.value,
-        offset: currentOffset.value,
-        limit: PAGE_SIZE,
-      });
-
       results.value = append ? results.value.concat(response) : response;
 
       isLoading.value = false;
diff --git a/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts b/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts
index 8fdfda18f..0bddb502f 100644
--- a/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts
+++ b/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts
@@ -10,9 +10,9 @@ import { useWorkflowStore } from "@/store/workflow/workflow";
 import {
   type ComponentNodeDescriptionWithExtendedPorts,
   type NativeNodeDescriptionWithExtendedPorts,
-  toComponentNodeDescriptionWithExtendedPorts,
-  toNativeNodeDescriptionWithExtendedPorts,
-} from "@/util/portDataMapper";
+  componentDescription,
+  nodeDescription,
+} from "@/util/dataMappers";
 
 /**
  * Store that manages state for node and component descriptions.
@@ -47,12 +47,12 @@ export const useNodeDescriptionStore = defineStore("nodeDescription", {
       };
 
       try {
-        const nodeDescription = await API.node.getNodeDescription(params);
+        const nativeNodeDescription = await API.node.getNodeDescription(params);
 
         const nodeDescriptionWithExtendedPorts =
-          toNativeNodeDescriptionWithExtendedPorts(
+          nodeDescription.toNativeNodeDescriptionWithExtendedPorts(
             useApplicationStore().availablePortTypes,
-          )(nodeDescription);
+          )(nativeNodeDescription);
 
         this.cache.set(factoryId, nodeDescriptionWithExtendedPorts);
 
@@ -83,14 +83,13 @@ export const useNodeDescriptionStore = defineStore("nodeDescription", {
       };
 
       try {
-        const componentDescription =
-          (await API.component.getComponentDescription(
-            params,
-          )) as ComponentNodeDescription; // TODO: NXT-2023 - remove type cast
+        const rawDescription = (await API.component.getComponentDescription(
+          params,
+        )) as ComponentNodeDescription; // TODO: NXT-2023 - remove type cast
 
-        return toComponentNodeDescriptionWithExtendedPorts(
+        return componentDescription.toComponentNodeDescriptionWithExtendedPorts(
           useApplicationStore().availablePortTypes,
-        )(componentDescription);
+        )(rawDescription);
       } catch (error) {
         consola.error(
           "action::getComponentDescription -> Error calling API.node.getComponentDescription",
diff --git a/org.knime.ui.js/src/store/nodeRepository.ts b/org.knime.ui.js/src/store/nodeRepository.ts
index 1c34bc739..4dbe6f23c 100644
--- a/org.knime.ui.js/src/store/nodeRepository.ts
+++ b/org.knime.ui.js/src/store/nodeRepository.ts
@@ -7,7 +7,7 @@ import type {
   NodeTemplateWithExtendedPorts,
 } from "@/api/custom-types";
 import { useNodeSearch } from "@/store/common/useNodeSearch";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import { nodeTemplate } from "@/util/dataMappers";
 
 import { useApplicationStore } from "./application/application";
 import { useNodeTemplatesStore } from "./nodeTemplates/nodeTemplates";
@@ -139,7 +139,9 @@ export const useNodeRepositoryStore = defineStore("nodeRepository", () => {
     });
 
     const nodesWithMappedPorts = (nodeCategoryResult.nodes ?? []).map(
-      toNodeTemplateWithExtendedPorts(useApplicationStore().availablePortTypes),
+      nodeTemplate.toNodeTemplateWithExtendedPorts(
+        useApplicationStore().availablePortTypes,
+      ),
     );
 
     useNodeTemplatesStore().updateCacheFromSearchResults({
@@ -182,7 +184,7 @@ export const useNodeRepositoryStore = defineStore("nodeRepository", () => {
 
     const withMappedPorts = groups.map(({ nodes, tag }) => ({
       nodes: nodes.map(
-        toNodeTemplateWithExtendedPorts(
+        nodeTemplate.toNodeTemplateWithExtendedPorts(
           useApplicationStore().availablePortTypes,
         ),
       ),
diff --git a/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts b/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
index 930d8df50..c7e44bcb1 100644
--- a/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
+++ b/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
@@ -7,7 +7,7 @@ import type {
 } from "@/api/custom-types";
 import type { NodeTemplate } from "@/api/gateway-api/generated-api";
 import { useApplicationStore } from "@/store/application/application";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import { nodeTemplate } from "@/util/dataMappers";
 
 type NodeTemplateDictionary = Record<string, NodeTemplateWithExtendedPorts>;
 
@@ -34,7 +34,7 @@ const toNodeTemplateDictionary = (
   return arrayToDictionary(
     Object.values(nodeTemplates)
       // add expanded port information
-      .map(toNodeTemplateWithExtendedPorts(availablePortTypes)),
+      .map(nodeTemplate.toNodeTemplateWithExtendedPorts(availablePortTypes)),
     "id",
   );
 };
diff --git a/org.knime.ui.js/src/store/quickAddNodes.ts b/org.knime.ui.js/src/store/quickAddNodes.ts
index d0312103d..9606287ce 100644
--- a/org.knime.ui.js/src/store/quickAddNodes.ts
+++ b/org.knime.ui.js/src/store/quickAddNodes.ts
@@ -9,7 +9,7 @@ import type {
 import { useApplicationStore } from "@/store/application/application";
 import { useNodeSearch } from "@/store/common/useNodeSearch";
 import { useWorkflowStore } from "@/store/workflow/workflow";
-import { toNodeTemplateWithExtendedPorts } from "../util/portDataMapper";
+import { nodeTemplate } from "@/util/dataMappers";
 
 /**
  * Store that manages quick add nodes menu states.
@@ -62,7 +62,7 @@ export const useQuickAddNodesStore = defineStore("quick", () => {
 
     setRecommendedNodes(
       recommendedNodesResult.map(
-        toNodeTemplateWithExtendedPorts(
+        nodeTemplate.toNodeTemplateWithExtendedPorts(
           useApplicationStore().availablePortTypes,
         ),
       ),
diff --git a/org.knime.ui.js/src/test/factories/nodeRepository.ts b/org.knime.ui.js/src/test/factories/nodeRepository.ts
index 78a4dd764..214c78603 100644
--- a/org.knime.ui.js/src/test/factories/nodeRepository.ts
+++ b/org.knime.ui.js/src/test/factories/nodeRepository.ts
@@ -7,7 +7,7 @@ import {
   type NodeTemplate,
   PortType,
 } from "@/api/gateway-api/generated-api";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import { nodeTemplate } from "@/util/dataMappers";
 
 import { PORT_TYPE_IDS, type PortTypeId } from "./common";
 import { createAvailablePortTypes } from "./ports";
@@ -59,5 +59,7 @@ export const createNodeTemplateWithExtendedPorts = (
 
   const template = createNodeTemplate(data);
 
-  return toNodeTemplateWithExtendedPorts(availablePortTypes)(template);
+  return nodeTemplate.toNodeTemplateWithExtendedPorts(availablePortTypes)(
+    template,
+  );
 };
diff --git a/org.knime.ui.js/src/util/compatibleConnections.ts b/org.knime.ui.js/src/util/compatibleConnections.ts
index 523db5095..27369a8a9 100644
--- a/org.knime.ui.js/src/util/compatibleConnections.ts
+++ b/org.knime.ui.js/src/util/compatibleConnections.ts
@@ -4,7 +4,7 @@ import type {
   Workflow,
 } from "@/api/custom-types";
 import type { Connection, NodePort } from "@/api/gateway-api/generated-api";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 
 export type Direction = "in" | "out";
 
@@ -102,8 +102,10 @@ export const checkPortCompatibility = ({
   toPort: { typeId: string };
   availablePortTypes: AvailablePortTypes;
 }) => {
-  const fromPortObjectInfo = toExtendedPortObject(availablePortTypes)(fromPort);
-  const toPortObjectInfo = toExtendedPortObject(availablePortTypes)(toPort);
+  const fromPortObjectInfo =
+    ports.toExtendedPortObject(availablePortTypes)(fromPort);
+  const toPortObjectInfo =
+    ports.toExtendedPortObject(availablePortTypes)(toPort);
   const { compatibleTypes } = toPortObjectInfo;
   const { kind: fromPortKind } = fromPortObjectInfo;
   const { kind: toPortKind } = toPortObjectInfo;
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/componentDescription.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/componentDescription.test.ts
new file mode 100644
index 000000000..ae7d5e9ba
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/componentDescription.test.ts
@@ -0,0 +1,143 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createAvailablePortTypes,
+  createComponentNodeDescription,
+} from "@/test/factories";
+import { componentDescription } from "../componentDescription";
+
+describe("componentDescription data mapper", () => {
+  it("adds port information to the component description", () => {
+    const availablePortTypes = createAvailablePortTypes();
+    const data = createComponentNodeDescription();
+    const result =
+      componentDescription.toComponentNodeDescriptionWithExtendedPorts(
+        availablePortTypes,
+      )(data);
+    expect(result).toStrictEqual({
+      description: {
+        contentType: "text/html",
+        value: "<p>Awesome description</p>",
+      },
+      inPorts: [
+        {
+          color: "#FF4B4B",
+          description: "No description available",
+          kind: "flowVariable",
+          name: "Port 1",
+          optional: false,
+          type: "flowVariable",
+          typeId:
+            "org.knime.core.node.port.flowvariable.FlowVariablePortObject",
+          typeName: "Flow Variable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Flow variables",
+              },
+              {
+                label: "Flow variables",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+        {
+          color: "#9B9B9B",
+          description: "No description available",
+          kind: "generic",
+          name: "Port 2",
+          optional: false,
+          type: "generic",
+          typeId: "org.knime.core.node.port.PortObject",
+          typeName: "Generic Port",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      metadataType: "component",
+      name: "Component",
+      outPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Port 1",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          typeName: "Table",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Port 2",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          typeName: "Table",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/nodeDescription.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeDescription.test.ts
new file mode 100644
index 000000000..c8f6701d0
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeDescription.test.ts
@@ -0,0 +1,144 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createAvailablePortTypes,
+  createNativeNodeDescription,
+} from "@/test/factories";
+import { nodeDescription } from "../nodeDescription";
+
+describe("nodeDescription data mapper", () => {
+  it("adds port information to the NativeNode description", () => {
+    const availablePortTypes = createAvailablePortTypes();
+    const data = createNativeNodeDescription();
+    const result =
+      nodeDescription.toNativeNodeDescriptionWithExtendedPorts(
+        availablePortTypes,
+      )(data);
+
+    expect(result).toStrictEqual({
+      description: "This is a node.",
+      dynInPorts: [
+        {
+          groupDescription: "No description available",
+          groupName: "inGroupName",
+          types: [
+            {
+              color: "#000000",
+              description: "No description available",
+              kind: "table",
+              name: "Table",
+              type: "table",
+              typeId: "org.knime.core.node.BufferedDataTable",
+              typeName: "Table",
+              views: {
+                descriptorMapping: {
+                  configured: [0, 2],
+                  executed: [1, 2],
+                },
+                descriptors: [
+                  {
+                    isSpecView: true,
+                    label: "Table",
+                  },
+                  {
+                    label: "Table",
+                  },
+                  {
+                    label: "Statistics",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+      dynOutPorts: [
+        {
+          groupDescription: "This is the description",
+          groupName: "outGroupName",
+          types: [
+            {
+              color: "#000000",
+              description: "No description available",
+              kind: "table",
+              name: "Table",
+              type: "table",
+              typeId: "org.knime.core.node.BufferedDataTable",
+              typeName: "Table",
+              views: {
+                descriptorMapping: {
+                  configured: [0, 2],
+                  executed: [1, 2],
+                },
+                descriptors: [
+                  {
+                    isSpecView: true,
+                    label: "Table",
+                  },
+                  {
+                    label: "Table",
+                  },
+                  {
+                    label: "Statistics",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+      dynamicInPortGroupDescriptions: [
+        {
+          identifier: "inGroupName",
+          name: "table",
+          supportedPortTypes: [
+            {
+              typeId: "org.knime.core.node.BufferedDataTable",
+            },
+          ],
+        },
+      ],
+      dynamicOutPortGroupDescriptions: [
+        {
+          description: "This is the description",
+          identifier: "outGroupName",
+          name: "table",
+          supportedPortTypes: [
+            {
+              typeId: "org.knime.core.node.BufferedDataTable",
+            },
+          ],
+        },
+      ],
+      inPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Table",
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      outPorts: [],
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/nodeTemplate.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeTemplate.test.ts
new file mode 100644
index 000000000..dcced093a
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeTemplate.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from "vitest";
+
+import { createAvailablePortTypes, createNodeTemplate } from "@/test/factories";
+import { nodeTemplate } from "../nodeTemplate";
+
+describe("nodeTemplate data mapper", () => {
+  it("extends the port information in a NodeTemplate", () => {
+    const availablePortTypes = createAvailablePortTypes();
+    const nodeTemplateData = createNodeTemplate();
+
+    const result =
+      nodeTemplate.toNodeTemplateWithExtendedPorts(availablePortTypes)(
+        nodeTemplateData,
+      );
+    expect(result).toStrictEqual({
+      component: false,
+      icon: "data:image/png;base64,xxx",
+      id: "org.knime.base.node.preproc.filter.column.DataColumnSpecFilterNodeFactory",
+      inPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Table",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      name: "Column Filter",
+      nodeFactory: {
+        className:
+          "org.knime.base.node.preproc.filter.column.DataColumnSpecFilterNodeFactory",
+      },
+      outPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Table",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+        {
+          color: "#FF4B4B",
+          description: "No description available",
+          kind: "other",
+          name: "Table",
+          optional: false,
+          type: "other",
+          typeId: "org.some.otherPorType",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      type: "Manipulator",
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/ports.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/ports.test.ts
new file mode 100644
index 000000000..228a57b6e
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/ports.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+
+import { PORT_TYPE_IDS, createAvailablePortTypes } from "@/test/factories";
+import { ports } from "../ports";
+
+describe("ports data mapper", () => {
+  const availablePortTypes = createAvailablePortTypes();
+
+  it("maps to extended port from a single typeId string", () => {
+    const typeId = PORT_TYPE_IDS.BufferedDataTable;
+
+    const result = ports.toExtendedPortObject(availablePortTypes)(typeId);
+    expect(result).toStrictEqual({
+      color: "#000000",
+      description: "No description available",
+      kind: "table",
+      name: "Table",
+      type: "table",
+      typeId: "org.knime.core.node.BufferedDataTable",
+      views: {
+        descriptorMapping: {
+          configured: [0, 2],
+          executed: [1, 2],
+        },
+        descriptors: [
+          { isSpecView: true, label: "Table" },
+          { label: "Table" },
+          { label: "Statistics" },
+        ],
+      },
+    });
+  });
+
+  it("maps to extended port from an object containint a typeId string property", () => {
+    const typeId = PORT_TYPE_IDS.BufferedDataTable;
+
+    const result = ports.toExtendedPortObject(availablePortTypes)({ typeId });
+    expect(result).toStrictEqual({
+      color: "#000000",
+      description: "No description available",
+      kind: "table",
+      name: "Table",
+      type: "table",
+      typeId: "org.knime.core.node.BufferedDataTable",
+      views: {
+        descriptorMapping: {
+          configured: [0, 2],
+          executed: [1, 2],
+        },
+        descriptors: [
+          { isSpecView: true, label: "Table" },
+          { label: "Table" },
+          { label: "Statistics" },
+        ],
+      },
+    });
+  });
+
+  it("can exclude the `type` property", () => {
+    const typeId = PORT_TYPE_IDS.BufferedDataTable;
+
+    const result = ports.toExtendedPortObject(
+      availablePortTypes,
+      false,
+    )({ typeId });
+
+    expect(result).toStrictEqual({
+      color: "#000000",
+      description: "No description available",
+      kind: "table",
+      name: "Table",
+      typeId: "org.knime.core.node.BufferedDataTable",
+      views: {
+        descriptorMapping: {
+          configured: [0, 2],
+          executed: [1, 2],
+        },
+        descriptors: [
+          { isSpecView: true, label: "Table" },
+          { label: "Table" },
+          { label: "Statistics" },
+        ],
+      },
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/componentDescription.ts b/org.knime.ui.js/src/util/dataMappers/componentDescription.ts
new file mode 100644
index 000000000..677844a59
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/componentDescription.ts
@@ -0,0 +1,31 @@
+import type {
+  AvailablePortTypes,
+  ComponentNodeDescription,
+  ExtendedPortType,
+} from "@/api/custom-types";
+
+import { ports } from "./ports";
+
+export type ComponentNodeDescriptionWithExtendedPorts =
+  ComponentNodeDescription & {
+    inPorts: ExtendedPortType[];
+    outPorts: ExtendedPortType[];
+  };
+
+const toComponentNodeDescriptionWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (
+    node: ComponentNodeDescription,
+  ): ComponentNodeDescriptionWithExtendedPorts => {
+    const { inPorts = [], outPorts = [] } = node;
+
+    return {
+      ...node,
+      inPorts: inPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      outPorts: outPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+    };
+  };
+
+export const componentDescription = {
+  toComponentNodeDescriptionWithExtendedPorts,
+};
diff --git a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
new file mode 100644
index 000000000..c3073b9c6
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
@@ -0,0 +1,18 @@
+import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
+import type { ComponentSearchItem } from "@/api/gateway-api/generated-api";
+
+const toNodeTemplateWithExtendedPorts = (
+  input: ComponentSearchItem,
+): NodeTemplateWithExtendedPorts => {
+  return {
+    id: input.name,
+    name: input.name,
+    type: input.type,
+    component: true,
+    icon: input.icon,
+    inPorts: [],
+    outPorts: [],
+  };
+};
+
+export const componentSearch = { toNodeTemplateWithExtendedPorts };
diff --git a/org.knime.ui.js/src/util/dataMappers/index.ts b/org.knime.ui.js/src/util/dataMappers/index.ts
new file mode 100644
index 000000000..280c5cfca
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/index.ts
@@ -0,0 +1,18 @@
+/**
+ * The purpose of these helpers is to map information that
+ * is not directly provided by the API, particularly around ports. Normally, port objects
+ * have limited information and only list their typeId which uniquely identifies that port.
+ * Any other information on ports, such as color, kind, and other properties declared in
+ * PortType are only available by accessing the global dictionary of
+ * installed ports via the global application state property `availablePortTypes` and then
+ * indexing in using the unique port typeId.
+ *
+ * These mapping utilities are tailored to different features that in one way or another
+ * need port information. Thus, new mappers should be created accordingly based on this principle
+ */
+
+export * from "./ports";
+export * from "./nodeTemplate";
+export * from "./nodeDescription";
+export * from "./componentDescription";
+export * from "./componentSearch";
diff --git a/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts b/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
new file mode 100644
index 000000000..49fa025c9
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
@@ -0,0 +1,79 @@
+import type { AvailablePortTypes, ExtendedPortType } from "@/api/custom-types";
+import type {
+  DynamicPortGroupDescription,
+  NativeNodeDescription,
+} from "@/api/gateway-api/generated-api";
+
+import { ports } from "./ports";
+
+type PortGroupDescription = {
+  groupName: string;
+  groupDescription: string;
+  types: Array<ExtendedPortType & { typeName: string }>;
+};
+
+/**
+ * Processes a dynamic port group description so it can be rendered.
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @returns A function that maps the raw port group description as it was received to the format needed to
+ * to render it.
+ */
+const toPortGroupDescriptionWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (portGroupDescription: DynamicPortGroupDescription): PortGroupDescription => {
+    const {
+      identifier,
+      description = "No description available",
+      supportedPortTypes = [],
+    } = portGroupDescription;
+
+    const types: PortGroupDescription["types"] = supportedPortTypes
+      .map(ports.toExtendedPortObject(availablePortTypes))
+      .map((fullPortType) => ({
+        ...fullPortType,
+        typeName: fullPortType.name,
+      }));
+
+    return {
+      groupName: identifier,
+      groupDescription: description,
+      types,
+    };
+  };
+
+export type NativeNodeDescriptionWithExtendedPorts = NativeNodeDescription & {
+  inPorts: ExtendedPortType[];
+  outPorts: ExtendedPortType[];
+  dynInPorts: PortGroupDescription[];
+  dynOutPorts: PortGroupDescription[];
+};
+
+/**
+ * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @returns mapping function that takes a node to which all the port information will be added
+ */
+const toNativeNodeDescriptionWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (node: NativeNodeDescription): NativeNodeDescriptionWithExtendedPorts => {
+    const {
+      inPorts = [],
+      outPorts = [],
+      dynamicInPortGroupDescriptions = [],
+      dynamicOutPortGroupDescriptions = [],
+    } = node;
+
+    return {
+      ...node,
+      inPorts: inPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      outPorts: outPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      dynInPorts: dynamicInPortGroupDescriptions.map(
+        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
+      ),
+      dynOutPorts: dynamicOutPortGroupDescriptions.map(
+        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
+      ),
+    };
+  };
+
+export const nodeDescription = { toNativeNodeDescriptionWithExtendedPorts };
diff --git a/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts b/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
new file mode 100644
index 000000000..cfe5b6baf
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
@@ -0,0 +1,26 @@
+import type {
+  AvailablePortTypes,
+  NodeTemplateWithExtendedPorts,
+} from "@/api/custom-types";
+import type { NodeTemplate } from "@/api/gateway-api/generated-api";
+
+import { ports } from "./ports";
+
+/**
+ * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @returns mapping function that takes a node to which all the port information will be added
+ */
+const toNodeTemplateWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (node: NodeTemplate): NodeTemplateWithExtendedPorts => {
+    const { inPorts = [], outPorts = [] } = node;
+
+    return {
+      ...node,
+      inPorts: inPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      outPorts: outPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+    };
+  };
+
+export const nodeTemplate = { toNodeTemplateWithExtendedPorts };
diff --git a/org.knime.ui.js/src/util/dataMappers/ports.ts b/org.knime.ui.js/src/util/dataMappers/ports.ts
new file mode 100644
index 000000000..46e563f1a
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/ports.ts
@@ -0,0 +1,39 @@
+import type { AvailablePortTypes, ExtendedPortType } from "@/api/custom-types";
+
+/**
+ * Maps a port `typeId` string or a object with a `typeId` property to a port object with all the properties of the
+ * PortObject schema from the API
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @param includeType whether to include a `type` property holding the value of the port kind.
+ * This is necessary when the data will injected (down the line) into the PortIcon component from webapps-common
+ * which uses a `type` prop instead of a `kind`
+ * @returns mapping function that takes either a string that represents the port type id, or an object
+ * with a `typeId` property. This mapping function will return the whole port object with information about color, kind,
+ * etc
+ */
+const toExtendedPortObject =
+  (availablePortTypes: AvailablePortTypes, includeType = true) =>
+  (input: string | { typeId: string }): ExtendedPortType => {
+    const isStringInput = typeof input === "string";
+    const fullPortObject = isStringInput
+      ? availablePortTypes[input]
+      : availablePortTypes[input.typeId];
+
+    const result: ExtendedPortType = {
+      ...fullPortObject,
+      description: "No description available",
+      typeId: isStringInput ? input : input?.typeId,
+    };
+
+    return includeType
+      ? {
+          ...result,
+          // NodePreview component in webapps-common uses a `type` prop instead of kind.
+          // See: WorkflowMetadata.vue or NodeTemplate.vue
+          type: fullPortObject.kind,
+          ...(typeof input === "string" ? {} : input),
+        }
+      : result;
+  };
+
+export const ports = { toExtendedPortObject };
diff --git a/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js b/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js
index 921ff5666..bddcb9dff 100644
--- a/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js
+++ b/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js
@@ -1,6 +1,6 @@
 import Fuse from "fuse.js";
 
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 
 const fuseOptions = {
   shouldSort: true,
@@ -47,11 +47,11 @@ export const makeTypeSearch = ({
 }) => {
   const includeType = false;
   const suggestedPorts = suggestedTypeIds.map(
-    toExtendedPortObject(availablePortTypes, includeType),
+    ports.toExtendedPortObject(availablePortTypes, includeType),
   );
 
   const otherPorts = typeIds
-    .map(toExtendedPortObject(availablePortTypes, includeType))
+    .map(ports.toExtendedPortObject(availablePortTypes, includeType))
     // sort non-suggested ports by name
     .sort((a, b) => a.name.localeCompare(b.name));
 
diff --git a/org.knime.ui.js/src/util/portDataMapper.ts b/org.knime.ui.js/src/util/portDataMapper.ts
deleted file mode 100644
index 1caf628ba..000000000
--- a/org.knime.ui.js/src/util/portDataMapper.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import type {
-  AvailablePortTypes,
-  ComponentNodeDescription,
-  ExtendedPortType,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
-import type {
-  DynamicPortGroupDescription,
-  NativeNodeDescription,
-  NodeTemplate,
-} from "@/api/gateway-api/generated-api";
-
-/**
- * The purpose of these helpers is to map all required information on ports that
- * is not directly provided by the API. Normally, port objects
- * have limited information and only list their typeId which uniquely identifies that port.
- * Any other information on ports, such as color, kind, and other properties declared in
- * PortType are only available by accessing the global dictionary of
- * installed ports via the global application state property `availablePortTypes` and then
- * indexing in using the unique port typeId. These mapping utilities provide reusable
- * functionality to do just that, returning `ExtendedPort`s that contain all the information
- * from their corresponding PortTypes
- */
-
-/**
- * Maps a port `typeId` string or a object with a `typeId` property to a port object with all the properties of the
- * PortObject schema from the API
- * @param availablePortTypes Dictionary of all available port types and their information
- * @param includeType whether to include a `type` property holding the value of the port kind.
- * This is necessary when the data will injected (down the line) into the PortIcon component from webapps-common
- * which uses a `type` prop instead of a `kind`
- * @returns mapping function that takes either a string that represents the port type id, or an object
- * with a `typeId` property. This mapping function will return the whole port object with information about color, kind,
- * etc
- */
-export const toExtendedPortObject =
-  (availablePortTypes: AvailablePortTypes, includeType = true) =>
-  (input: string | { typeId: string }): ExtendedPortType => {
-    const isStringInput = typeof input === "string";
-    const fullPortObject = isStringInput
-      ? availablePortTypes[input]
-      : availablePortTypes[input.typeId];
-
-    const result: ExtendedPortType = {
-      ...fullPortObject,
-      description: "No description available",
-      typeId: isStringInput ? input : input?.typeId,
-    };
-
-    return includeType
-      ? {
-          ...result,
-          // NodePreview component in webapps-common uses a `type` prop instead of kind.
-          // See: WorkflowMetadata.vue or NodeTemplate.vue
-          type: fullPortObject.kind,
-          ...(typeof input === "string" ? {} : input),
-        }
-      : result;
-  };
-
-/**
- * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
- * @param availablePortTypes Dictionary of all available port types and their information
- * @returns mapping function that takes a node to which all the port information will be added
- */
-export const toNodeTemplateWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (node: NodeTemplate): NodeTemplateWithExtendedPorts => {
-    const { inPorts = [], outPorts = [] } = node;
-
-    return {
-      ...node,
-      inPorts: inPorts.map(toExtendedPortObject(availablePortTypes)),
-      outPorts: outPorts.map(toExtendedPortObject(availablePortTypes)),
-    };
-  };
-
-type PortGroupDescription = {
-  groupName: string;
-  groupDescription: string;
-  types: Array<ExtendedPortType & { typeName: string }>;
-};
-
-/**
- * Processes a dynamic port group description so it can be rendered.
- * @param availablePortTypes Dictionary of all available port types and their information
- * @returns A function that maps the raw port group description as it was received to the format needed to
- * to render it.
- */
-const toPortGroupDescriptionWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (portGroupDescription: DynamicPortGroupDescription): PortGroupDescription => {
-    const {
-      identifier,
-      description = "No description available",
-      supportedPortTypes = [],
-    } = portGroupDescription;
-
-    const types: PortGroupDescription["types"] = supportedPortTypes
-      .map(toExtendedPortObject(availablePortTypes))
-      .map((fullPortType) => ({
-        ...fullPortType,
-        typeName: fullPortType.name,
-      }));
-
-    return {
-      groupName: identifier,
-      groupDescription: description,
-      types,
-    };
-  };
-
-export type NativeNodeDescriptionWithExtendedPorts = NativeNodeDescription & {
-  inPorts: ExtendedPortType[];
-  outPorts: ExtendedPortType[];
-  dynInPorts: PortGroupDescription[];
-  dynOutPorts: PortGroupDescription[];
-};
-
-/**
- * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
- * @param availablePortTypes Dictionary of all available port types and their information
- * @returns mapping function that takes a node to which all the port information will be added
- */
-export const toNativeNodeDescriptionWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (node: NativeNodeDescription): NativeNodeDescriptionWithExtendedPorts => {
-    const {
-      inPorts = [],
-      outPorts = [],
-      dynamicInPortGroupDescriptions = [],
-      dynamicOutPortGroupDescriptions = [],
-    } = node;
-
-    return {
-      ...node,
-      inPorts: inPorts.map(toExtendedPortObject(availablePortTypes)),
-      outPorts: outPorts.map(toExtendedPortObject(availablePortTypes)),
-      dynInPorts: dynamicInPortGroupDescriptions.map(
-        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
-      ),
-      dynOutPorts: dynamicOutPortGroupDescriptions.map(
-        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
-      ),
-    };
-  };
-
-export type ComponentNodeDescriptionWithExtendedPorts =
-  ComponentNodeDescription & {
-    inPorts: ExtendedPortType[];
-    outPorts: ExtendedPortType[];
-  };
-
-export const toComponentNodeDescriptionWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (
-    node: ComponentNodeDescription,
-  ): ComponentNodeDescriptionWithExtendedPorts => {
-    const { inPorts = [], outPorts = [] } = node;
-
-    return {
-      ...node,
-      inPorts: inPorts.map(toExtendedPortObject(availablePortTypes)),
-      outPorts: outPorts.map(toExtendedPortObject(availablePortTypes)),
-    };
-  };

From cf2d489ffbcae6e0a0336444f2e29901d586ec55 Mon Sep 17 00:00:00 2001
From: Helian Rivera <helian.rivera@knime.com>
Date: Thu, 18 Dec 2025 14:06:38 +0100
Subject: [PATCH 07/11] NXT-4296: rework add node to canvas logic

NXT-4296 (Gateway API for component search (use HubClient SDK to call Search Service; aggregate and map entities for FE; error handling))
---
 .../NodeTemplate/DraggableNodeTemplate.vue    |  4 +-
 .../kai/chat/message/SuggestedNodes.vue       |  4 +-
 .../nodeRepository/CategoryTree.vue           |  4 +-
 .../SidebarSearchResults.vue                  |  4 +-
 .../NodesGroupedByTag/NodesGroupedByTag.vue   |  4 +-
 .../src/composables/useAddNodeToWorkflow.ts   | 63 +++++++++++++------
 .../src/composables/useDragNodeIntoCanvas.ts  | 26 +++-----
 7 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue b/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
index e6542ec6b..4a02e4bd5 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
   showNodeDescription: [];
 }>();
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const panelStore = usePanelStore();
 const { isExtensionPanelOpen } = storeToRefs(panelStore);
@@ -100,7 +100,7 @@ const onDragEnd = (event: DragEvent) => {
     :show-floating-help-icon="true"
     @dragstart="onDragStart"
     @dragend="onDragEnd"
-    @dblclick="addNodeToWorkflow(nodeTemplate)"
+    @dblclick="addNodeWithAutoPositioning(nodeTemplate.nodeFactory!)"
     @drag="dragNodeIntoCanvas.onDrag"
     @help-icon-click="emit('showNodeDescription')"
   />
diff --git a/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue b/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
index 8500506f6..55779ad4c 100644
--- a/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
+++ b/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
@@ -16,7 +16,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const { toggleNodeDescription } = useKaiExtensionPanel();
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const hasNodeTemplates = computed(() => props.nodeTemplates.length > 0);
 
@@ -24,7 +24,7 @@ const selectedNode = ref<NodeTemplateWithExtendedPorts | null>(null);
 
 const handleEnterKey = (node: NodeTemplateWithExtendedPorts) => {
   if (node.nodeFactory) {
-    addNodeToWorkflow({ nodeFactory: node.nodeFactory });
+    addNodeWithAutoPositioning(node.nodeFactory);
   }
 };
 </script>
diff --git a/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue b/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue
index 20d213a7f..72e371e4d 100644
--- a/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue
@@ -162,13 +162,13 @@ const onShowNodeDescription = (treeNode: BaseTreeNode) => {
   }
 };
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 const addTreeNodeToWorkflow = (treeNode: BaseTreeNode) => {
   const nodeFactory = (treeNode.origin as ExtendedTreeNodeOptions)?.nodeTemplate
     ?.nodeFactory;
 
   if (nodeFactory) {
-    addNodeToWorkflow({ nodeFactory });
+    addNodeWithAutoPositioning(nodeFactory);
   }
 };
 
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
index f4f68a8a7..1cd369165 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
@@ -44,7 +44,7 @@ const {
   selectedNode,
 } = storeToRefs(nodeRepositoryStore);
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const searchActions = {
   searchNodesNextPage: () => nodeRepositoryStore.searchNodesNextPage(),
@@ -86,7 +86,7 @@ const displayModeSupported = computed(() => {
     :nodes="nodes"
     :num-filtered-out-nodes="totalNumFilteredNodesFound"
     :is-loading-search-results="isLoadingSearchResults"
-    @item-enter-key="addNodeToWorkflow({ nodeFactory: $event.nodeFactory! })"
+    @item-enter-key="addNodeWithAutoPositioning($event.nodeFactory!)"
     @show-node-details="onShowNodeDetails"
     @nav-reached-top="$emit('navReachedTop', $event)"
   >
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
index cd8a1c06d..1bfa36beb 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), { displayMode: "icon" });
 
 const emit = defineEmits(["showNodeDescription", "navReachedTop"]);
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const nodeRepositoryStore = useNodeRepositoryStore();
 const { showDescriptionForNode, tagScrollPosition, nodesPerTag, selectedNode } =
@@ -120,7 +120,7 @@ defineExpose({ focusFirst });
             :show-details-for="showDescriptionForNode"
             :display-mode="displayMode"
             @show-more="onSelectTag(tag)"
-            @enter-key="addNodeToWorkflow"
+            @enter-key="addNodeWithAutoPositioning($event.nodeFactory!)"
             @show-node-details="onShowNodeDetails"
             @nav-reached-top="onNavReachedTop(index, $event)"
             @nav-reached-end="onNavReachedEnd(index, $event)"
diff --git a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
index 9c4d81a90..3104a468d 100644
--- a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
+++ b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
@@ -1,25 +1,47 @@
+/* eslint-disable no-undefined */
 import { storeToRefs } from "pinia";
 
 import {
   AddNodeCommand,
   type NodeFactoryKey,
+  type XY,
 } from "@/api/gateway-api/generated-api";
 import { useCurrentCanvasStore } from "@/store/canvas/useCurrentCanvasStore";
 import { useSelectionStore } from "@/store/selection";
 import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
+import { getToastPresets } from "@/toastPresets";
 import { geometry } from "@/util/geometry";
 
-/**
- * Add a node to the workflow by a node template factory.
- * It will automatically position the node in the canvas according to available
- * space and inside the visible frame as well as connecting the newly added node
- * to a selected node (if any)
- */
 export const useAddNodeToWorkflow = () => {
   const { isWritable, activeWorkflow } = storeToRefs(useWorkflowStore());
+  const { toastPresets } = getToastPresets();
 
-  return ({ nodeFactory }: { nodeFactory?: NodeFactoryKey }) => {
+  const addNodeByPosition = async (
+    position: XY,
+    nodeFactory: NodeFactoryKey,
+    autoConnectOptions?: {
+      sourceNodeId: string;
+      nodeRelation: AddNodeCommand.NodeRelationEnum;
+    },
+  ) => {
+    try {
+      await useNodeInteractionsStore().addNode({
+        position,
+        nodeFactory,
+        sourceNodeId: autoConnectOptions?.sourceNodeId,
+        nodeRelation: autoConnectOptions?.nodeRelation,
+      });
+    } catch (error) {
+      consola.error({
+        message: "Error adding node to canvas with auto-placement",
+        error,
+      });
+      toastPresets.workflow.addNodeToCanvas({ error });
+    }
+  };
+
+  const addNodeWithAutoPositioning = async (nodeFactory: NodeFactoryKey) => {
     // do not try to add a node to a read only workflow
     if (!isWritable.value) {
       return;
@@ -38,18 +60,19 @@ export const useAddNodeToWorkflow = () => {
           visibleFrame: canvasStore.value.getVisibleFrame,
           nodes: activeWorkflow.value!.nodes,
         });
-    // eslint-disable-next-line no-undefined
-    const sourceNodeId = singleSelectedNode.value?.id ?? undefined;
-    const nodeRelation = singleSelectedNode.value
-      ? AddNodeCommand.NodeRelationEnum.SUCCESSORS
-      : // eslint-disable-next-line no-undefined
-        undefined;
-
-    useNodeInteractionsStore().addNode({
-      position,
-      nodeFactory,
-      sourceNodeId,
-      nodeRelation,
-    });
+
+    const autoConnectOptions = singleSelectedNode.value
+      ? {
+          sourceNodeId: singleSelectedNode.value.id,
+          nodeRelation: AddNodeCommand.NodeRelationEnum.SUCCESSORS,
+        }
+      : undefined;
+
+    await addNodeByPosition(position, nodeFactory, autoConnectOptions);
+  };
+
+  return {
+    addNodeByPosition,
+    addNodeWithAutoPositioning,
   };
 };
diff --git a/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts b/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
index 79542febc..7fcb26358 100644
--- a/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
+++ b/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
@@ -11,7 +11,8 @@ import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
 import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
-import { getToastPresets } from "@/toastPresets";
+
+import { useAddNodeToWorkflow } from "./useAddNodeToWorkflow";
 
 export const KNIME_MIME = "application/vnd.knime.ap.noderepo+json";
 
@@ -26,8 +27,8 @@ const getNodeFactoryFromEvent = (event: DragEvent) => {
 };
 
 // One key characteristic of this composable, which can be confusing at first glance,
-// is that the dragStart and onDrag handlers to not happen at the same location in the code.
-// This is because the drag start handler, which mainly manipulates that event will likely
+// is that the dragStart and onDrag handlers are not bound/called at the same location in the code.
+// This is because the drag start handler, which mainly manipulates that event, will likely
 // be bound at a separate location than the onDrag. This means that the variables declared
 // inside this composable are not stable across usages, unless declared outside of it
 
@@ -35,10 +36,10 @@ let dragStartTime: number | null;
 
 const DRAG_TO_EDGE_BUFFER_MS = 300;
 
-export const useDragNodeIntoCanvas = () => {
-  const isKnimeNode = (event: DragEvent) =>
-    event.dataTransfer?.types.includes(KNIME_MIME);
+const isKnimeNode = (event: DragEvent) =>
+  event.dataTransfer?.types.includes(KNIME_MIME);
 
+export const useDragNodeIntoCanvas = () => {
   const { isWritable } = storeToRefs(useWorkflowStore());
 
   const canvasStore = useCurrentCanvasStore();
@@ -46,7 +47,7 @@ export const useDragNodeIntoCanvas = () => {
   const nodeInteractionsStore = useNodeInteractionsStore();
   const webglCanvasStore = useWebGLCanvasStore();
   const { isWebGLRenderer } = useCanvasRendererUtils();
-  const { toastPresets } = getToastPresets();
+  const { addNodeByPosition } = useAddNodeToWorkflow();
   const nodeReplacementOrInsertion = useNodeReplacementOrInsertion();
 
   const { startPanningToEdge, stopPanningToEdge } = useDragNearEdgePanning();
@@ -135,15 +136,6 @@ export const useDragNodeIntoCanvas = () => {
     }
   };
 
-  const addNodeToCanvas = async (position: XY, nodeFactory: NodeFactoryKey) => {
-    try {
-      await nodeInteractionsStore.addNode({ position, nodeFactory });
-    } catch (error) {
-      consola.error({ message: "Error adding node to workflow", error });
-      toastPresets.workflow.addNodeToCanvas({ error });
-    }
-  };
-
   const onDrop = async (event: DragEvent) => {
     dragStartTime = null;
     stopPanningToEdge();
@@ -177,7 +169,7 @@ export const useDragNodeIntoCanvas = () => {
         nodeFactory,
       });
     } else {
-      await addNodeToCanvas(dropPosition, nodeFactory);
+      await addNodeByPosition(dropPosition, nodeFactory);
     }
   };
 

From 88e14aae5c0dd21a8385378d7a3bb7c95dd4342e Mon Sep 17 00:00:00 2001
From: Benjamin Moser <benjamin.moser@knime.com>
Date: Thu, 18 Dec 2025 15:02:33 +0100
Subject: [PATCH 08/11] use real data in FE

---
 .../src/api/gateway-api/generated-api.ts      | 13 ++++--
 .../src/store/componentSearch/index.ts        | 38 ++++++++++-------
 .../src/test/factories/componentSearch.ts     |  1 +
 .../src/util/dataMappers/componentSearch.ts   | 41 +++++++++++++++++--
 4 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/org.knime.ui.js/src/api/gateway-api/generated-api.ts b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
index b7e5c891b..696e93456 100644
--- a/org.knime.ui.js/src/api/gateway-api/generated-api.ts
+++ b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
@@ -1219,6 +1219,12 @@ export interface ComponentPortDescription {
  */
 export interface ComponentSearchItem {
 
+    /**
+     * Space item ID of this component
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    id: string;
     /**
      * The name of the component as given by the component creator
      * @type {string}
@@ -1289,7 +1295,7 @@ export interface ComponentSearchItemPort {
      * @type {string}
      * @memberof ComponentSearchItemPort
      */
-    name: string;
+    name?: string;
     /**
      * The description of the component as given by the component creator.
      * @type {string}
@@ -1301,7 +1307,7 @@ export interface ComponentSearchItemPort {
      * @type {string}
      * @memberof ComponentSearchItemPort
      */
-    portTypeName?: string;
+    portTypeName: string;
     /**
      * Hex string of port type color
      * @type {string}
@@ -7031,7 +7037,6 @@ const space = function(rpcClient: RPCClient) {
         },
         /**
          * Search among components in this provider
-         * @param {string} params.spaceProviderId Identifies a space-provider.
          * @param {string} [params.query] 
          * @param {number} [params.limit] 
          * @param {number} [params.offset] 
@@ -7042,7 +7047,7 @@ const space = function(rpcClient: RPCClient) {
          * @throws {NetworkException} If a Gateway service call failed due to a network error.
          */
         async searchComponents(
-        	params: { spaceProviderId: string,  query?: string,  limit?: number,  offset?: number  }
+        	params: { query?: string,  limit?: number,  offset?: number  }
         ): Promise<Array<ComponentSearchItem>> {
             const defaultParams = { 
                 query: null,
diff --git a/org.knime.ui.js/src/store/componentSearch/index.ts b/org.knime.ui.js/src/store/componentSearch/index.ts
index 6c73e5022..d8d1ceab9 100644
--- a/org.knime.ui.js/src/store/componentSearch/index.ts
+++ b/org.knime.ui.js/src/store/componentSearch/index.ts
@@ -1,4 +1,5 @@
 import { readonly, ref } from "vue";
+import { API } from "@api";
 import { debounce } from "lodash-es";
 import { defineStore } from "pinia";
 
@@ -9,11 +10,12 @@ import { createComponentSearchItem } from "@/test/factories/componentSearch";
 import { componentSearch } from "@/util/dataMappers";
 
 export const createData = (total: number, startOffset = 0) =>
-  new Array(total)
-    .fill(0)
-    .map((_, i) =>
-      createComponentSearchItem({ name: `Component ${startOffset + i}` }),
-    );
+  new Array(total).fill(0).map((_, i) =>
+    createComponentSearchItem({
+      name: `Component ${startOffset + i}`,
+      id: `id-${i}`,
+    }),
+  );
 
 const PAGE_SIZE = 50;
 
@@ -52,19 +54,27 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
       });
 
       const response = await runAbortablePromise(async () => {
-        // eslint-disable-next-line no-magic-numbers
-        await new Promise((r) => setTimeout(r, 5000));
-
         if (query.value === "foo") {
           return [];
         }
 
-        const response = createData(
-          PAGE_SIZE,
-          PAGE_SIZE * currentOffset.value,
-        ).map(componentSearch.toNodeTemplateWithExtendedPorts);
-
-        return response;
+        const responseFromAPI = await API.space.searchComponents({
+          query: query.value,
+          offset: currentOffset.value * PAGE_SIZE,
+          limit: PAGE_SIZE,
+        });
+
+        // const response = createData(
+        //   PAGE_SIZE,
+        //   PAGE_SIZE * currentOffset.value,
+        // ).map(componentSearch.toNodeTemplateWithExtendedPorts);
+        //
+        // // return response;
+
+        let mapped = responseFromAPI.map(
+          componentSearch.toNodeTemplateWithExtendedPorts,
+        );
+        return mapped;
       });
 
       results.value = append ? results.value.concat(response) : response;
diff --git a/org.knime.ui.js/src/test/factories/componentSearch.ts b/org.knime.ui.js/src/test/factories/componentSearch.ts
index 1437d9b18..fc0e8c863 100644
--- a/org.knime.ui.js/src/test/factories/componentSearch.ts
+++ b/org.knime.ui.js/src/test/factories/componentSearch.ts
@@ -10,6 +10,7 @@ export const createComponentSearchItem = (
 ) => {
   return merge(
     {
+      id: "foo",
       type: ComponentSearchItem.TypeEnum.Manipulator,
       description: "This is the component description",
       name: "Awesome component",
diff --git a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
index c3073b9c6..8f4cb3155 100644
--- a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
+++ b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
@@ -1,17 +1,50 @@
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
-import type { ComponentSearchItem } from "@/api/gateway-api/generated-api";
+import type {
+  ExtendedPortType,
+  NodeTemplateWithExtendedPorts,
+} from "@/api/custom-types";
+import {
+  type ComponentSearchItem,
+  type NodePortTemplate,
+  PortType,
+} from "@/api/gateway-api/generated-api";
+
+import KindEnum = PortType.KindEnum;
 
 const toNodeTemplateWithExtendedPorts = (
   input: ComponentSearchItem,
 ): NodeTemplateWithExtendedPorts => {
+  let inPorts = input.inPorts ?? [];
+  let mappedIn = inPorts.map((p) => {
+    return {
+      name: p.name ?? "",
+      typeId: "typeid",
+      optional: p.optional ?? false,
+      color: p.color,
+      type: p.portTypeName,
+      description: p.description ?? "",
+      kind: KindEnum.Other, // ~todo
+    } satisfies NodePortTemplate & ExtendedPortType;
+  });
+  const mappedOut = (input.outPorts ?? []).map((p) => {
+    return {
+      name: p.name ?? "",
+      typeId: "typeid",
+      optional: p.optional ?? false,
+      color: p.color,
+      type: p.portTypeName,
+      description: p.description ?? "",
+      kind: KindEnum.Other, // ~todo
+    } satisfies NodePortTemplate & ExtendedPortType;
+  });
+  // const outPorts = input.outPorts ?? [];
   return {
     id: input.name,
     name: input.name,
     type: input.type,
     component: true,
     icon: input.icon,
-    inPorts: [],
-    outPorts: [],
+    inPorts: mappedIn,
+    outPorts: mappedOut,
   };
 };
 

From 9ba8901f47125a5360e919b797de7ed74aa07e58 Mon Sep 17 00:00:00 2001
From: Helian Rivera <helian.rivera@knime.com>
Date: Thu, 18 Dec 2025 16:23:25 +0100
Subject: [PATCH 09/11] NXT-4296: move ExtendedPortTypes into data mappers

NXT-4296 (Gateway API for component search (use HubClient SDK to call Search Service; aggregate and map entities for FE; error handling))
---
 org.knime.ui.js/src/api/custom-types.ts       | 18 -------
 .../common/NodeList/InfiniteNodeList.vue      |  2 +-
 .../components/common/NodeList/NodeList.vue   |  2 +-
 .../NodeTemplate/DraggableNodeTemplate.vue    |  2 +-
 .../common/NodeTemplate/NodeTemplate.vue      |  2 +-
 .../NodeTemplate/NodeTemplateIconMode.vue     |  2 +-
 .../NodeTemplate/NodeTemplateListMode.vue     |  2 +-
 .../kai/chat/message/SuggestedNodes.vue       |  2 +-
 .../kai/chat/message/useNodeTemplates.ts      |  2 +-
 .../nodeRepository/NodeRepository.vue         |  8 ++--
 .../NodeRepositoryTree.vue}                   |  9 ++--
 .../NodeRepositoryTree/types.ts               |  6 +++
 .../SidebarSearchResults.vue                  |  2 +-
 .../NodesGroupedByTag/NodesGroupedByTag.vue   |  2 +-
 .../components/nodeSearch/SearchResults.vue   |  2 +-
 .../ContextMenu/ContextMenu.vue               |  4 +-
 .../quickAdd/QuickAddNodeMenu.vue             | 11 ++---
 .../quickAdd/QuickAddNodeRecommendations.vue  |  2 +-
 .../quickAdd/QuickAddNodeSearchResults.vue    |  2 +-
 .../connectors/useConnectionReplacement.ts    |  2 +-
 .../WorkflowMonitorMessage.vue                |  2 +-
 .../src/composables/useAddNodeToWorkflow.ts   | 42 +++++++++++++---
 .../src/composables/useDragNodeIntoCanvas.ts  |  2 +-
 .../src/store/common/useNodeSearch.ts         |  6 +--
 .../src/store/componentSearch/index.ts        |  2 +-
 org.knime.ui.js/src/store/nodeRepository.ts   |  6 +--
 .../src/store/nodeTemplates/nodeTemplates.ts  |  6 +--
 org.knime.ui.js/src/store/quickAddNodes.ts    |  6 +--
 .../src/test/factories/nodeRepository.ts      |  2 +-
 .../src/util/dataMappers/common.ts            | 12 +++++
 .../util/dataMappers/componentDescription.ts  |  2 +-
 .../src/util/dataMappers/componentSearch.ts   | 48 +++++++++----------
 org.knime.ui.js/src/util/dataMappers/index.ts |  1 +
 .../src/util/dataMappers/nodeDescription.ts   |  3 +-
 .../src/util/dataMappers/nodeTemplate.ts      |  6 +--
 org.knime.ui.js/src/util/dataMappers/ports.ts |  4 +-
 36 files changed, 126 insertions(+), 108 deletions(-)
 rename org.knime.ui.js/src/components/nodeRepository/{CategoryTree.vue => NodeRepositoryTree/NodeRepositoryTree.vue} (96%)
 create mode 100644 org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/types.ts
 create mode 100644 org.knime.ui.js/src/util/dataMappers/common.ts

diff --git a/org.knime.ui.js/src/api/custom-types.ts b/org.knime.ui.js/src/api/custom-types.ts
index 1a8fc74bc..c83366b1f 100644
--- a/org.knime.ui.js/src/api/custom-types.ts
+++ b/org.knime.ui.js/src/api/custom-types.ts
@@ -4,9 +4,7 @@ import type {
   EditableMetadata,
   MetaNode,
   NativeNode,
-  NodeCategory,
   NodeDescription,
-  NodeTemplate,
   PortGroup,
   PortType,
   ProjectMetadata,
@@ -152,18 +150,6 @@ export interface Schedule {
   user: string;
   workflowPath: string;
 }
-
-export type ExtendedPortType = PortType & {
-  typeId: string;
-  type?: string;
-  description: string;
-};
-
-export type NodeTemplateWithExtendedPorts = NodeTemplate & {
-  inPorts: ExtendedPortType[];
-  outPorts: ExtendedPortType[];
-};
-
 export type WorkflowObject = XY & {
   id: string;
   type: "node" | "annotation" | "componentPlaceholder";
@@ -187,10 +173,6 @@ export type ExampleProject = {
 
 export type NodeRelation = "PREDECESSORS" | "SUCCESSORS";
 
-export type NodeCategoryWithExtendedPorts = NodeCategory & {
-  nodes?: NodeTemplateWithExtendedPorts[];
-};
-
 export type AncestorInfo = {
   ancestorItemIds: string[];
   itemName: string | null;
diff --git a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
index 694025859..70f62818c 100644
--- a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
+++ b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed, toRefs, useTemplateRef } from "vue";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import InfiniteLoadingList from "@/components/common/InfiniteLoadingList/InfiniteLoadingList.vue";
 import NodeList, {
   type NavReachedEvent,
 } from "@/components/common/NodeList/NodeList.vue";
 import SkeletonNodes from "@/components/common/skeleton-loader/SkeletonNodes.vue";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   nodes: NodeTemplateWithExtendedPorts[];
diff --git a/org.knime.ui.js/src/components/common/NodeList/NodeList.vue b/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
index 32f1513e7..069843866 100644
--- a/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
+++ b/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
@@ -5,9 +5,9 @@ import { useActiveElement } from "@vueuse/core";
 import { Button, useKeyPressedUntilMouseClick } from "@knime/components";
 import CircleArrowIcon from "@knime/styles/img/icons/circle-arrow-right.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeTemplate from "@/components/common/NodeTemplate/NodeTemplate.vue";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 const NODES_PER_ROW_ICON_MODE = 3;
 const NODES_PER_ROW_LIST_MODE = 1;
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue b/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
index 4a02e4bd5..a832c794a 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
@@ -2,11 +2,11 @@
 import { ref, useTemplateRef } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useDragNodeIntoCanvas } from "@/composables/useDragNodeIntoCanvas";
 import { usePanelStore } from "@/store/panel";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import NodeTemplate from "../NodeTemplate/NodeTemplate.vue";
 
 /**
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
index ed1b37998..9065bba54 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
@@ -3,8 +3,8 @@ import { computed, ref } from "vue";
 
 import { NodePreview } from "@knime/components";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 import NodeTemplateIconMode from "./NodeTemplateIconMode.vue";
 import NodeTemplateListMode from "./NodeTemplateListMode.vue";
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue
index d783c2e4e..9957380ab 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 
 import ExtensionCommunityIcon from "@knime/styles/img/icons/extension-community.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 import NodeTemplateHelpIcon from "./NodeTemplateHelpIcon.vue";
 
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue
index 5eadea16d..97c4c42bb 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 
 import ExtensionCommunityIcon from "@knime/styles/img/icons/extension-community.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 import NodeTemplateHelpIcon from "./NodeTemplateHelpIcon.vue";
 
diff --git a/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue b/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
index 55779ad4c..626436160 100644
--- a/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
+++ b/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
@@ -3,10 +3,10 @@ import { computed, ref } from "vue";
 
 import NodeIcon from "@knime/styles/img/icons/node.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeList from "@/components/common/NodeList/NodeList.vue";
 import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { useKaiExtensionPanel } from "../../useKaiExtensionPanel";
 
 type Props = {
diff --git a/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts b/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts
index 56eb7fbcb..3552d93b4 100644
--- a/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts
+++ b/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts
@@ -1,8 +1,8 @@
 import { type Ref, ref, watch } from "vue";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import { KaiMessage } from "@/api/gateway-api/generated-api";
 import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import type {
   ExtensionWithNodes,
   Extensions,
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
index 0ad6c5068..d8d86cdf2 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
@@ -2,7 +2,6 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NavigationKey } from "@/components/common/NodeList/NodeList.vue";
 import NodeDescription from "@/components/nodeDescription/NodeDescription.vue";
 import SidebarSearchResults from "@/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue";
@@ -11,10 +10,11 @@ import { useLifecycleStore } from "@/store/application/lifecycle";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import { usePanelStore } from "@/store/panel";
 import { useSettingsStore } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import ComponentSearchResults from "../componentSearch/ComponentSearchResults.vue";
 
-import CategoryTree from "./CategoryTree.vue";
 import NodeRepositoryLoader from "./NodeRepositoryLoader.vue";
+import NodeRepositoryTree from "./NodeRepositoryTree/NodeRepositoryTree.vue";
 import NodesGroupedByTag from "./NodesGroupedByTag/NodesGroupedByTag.vue";
 import NodeRepositoryHeader from "./header/NodeRepositoryHeader.vue";
 
@@ -22,7 +22,7 @@ const nodeRepositoryStore = useNodeRepositoryStore();
 const { nodesPerTag, showDescriptionForNode, searchIsActive } =
   storeToRefs(nodeRepositoryStore);
 
-const categoryTree = ref<InstanceType<typeof CategoryTree>>();
+const categoryTree = ref<InstanceType<typeof NodeRepositoryTree>>();
 
 const displayMode = computed(
   () => useSettingsStore().settings.nodeRepositoryDisplayMode,
@@ -142,7 +142,7 @@ const searchContext = ref<"nodes" | "components">("nodes");
         @nav-reached-top="handleNavReachedTop($event)"
         @show-node-description="toggleNodeDescription"
       />
-      <CategoryTree
+      <NodeRepositoryTree
         v-else
         v-show="searchContext === 'nodes'"
         ref="categoryTree"
diff --git a/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/NodeRepositoryTree.vue
similarity index 96%
rename from org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue
rename to org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/NodeRepositoryTree.vue
index 72e371e4d..c15e9d4f8 100644
--- a/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/NodeRepositoryTree.vue
@@ -10,17 +10,16 @@ import {
   type TreeNodeOptions,
 } from "@knime/virtual-tree";
 
-import type {
-  NodeCategoryWithExtendedPorts,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
 import type { CategoryMetadata } from "@/api/gateway-api/generated-api";
 import type { NavigationKey } from "@/components/common/NodeList/NodeList.vue";
+import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useApplicationSettingsStore } from "@/store/application/settings";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { hasAllObjectPropertiesDefined } from "@/util/hasAllObjectPropertiesDefined";
-import DraggableNodeTemplate from "../common/NodeTemplate/DraggableNodeTemplate.vue";
+
+import type { NodeCategoryWithExtendedPorts } from "./types";
 
 type ExtendedTreeNodeOptions = TreeNodeOptions & {
   nodeTemplate?: NodeTemplateWithExtendedPorts;
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/types.ts b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/types.ts
new file mode 100644
index 000000000..82a721eb6
--- /dev/null
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/types.ts
@@ -0,0 +1,6 @@
+import type { NodeCategory } from "@/api/gateway-api/generated-api";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+
+export type NodeCategoryWithExtendedPorts = NodeCategory & {
+  nodes?: NodeTemplateWithExtendedPorts[];
+};
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
index 1cd369165..40cce4b9c 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
@@ -2,13 +2,13 @@
 import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NavReachedEvent } from "@/components/common/NodeList/NodeList.vue";
 import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
 import SearchResults from "@/components/nodeSearch/SearchResults.vue";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 /**
  * Search results that use nodeRepository store and the draggable node template (which also uses the store)
  */
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
index 1bfa36beb..33e391d7a 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
@@ -4,7 +4,6 @@ import { storeToRefs } from "pinia";
 
 import { Tag } from "@knime/components";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NavReachedEvent } from "@/components/common/NodeList/NodeList.vue";
 import NodeList from "@/components/common/NodeList/NodeList.vue";
 import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
@@ -12,6 +11,7 @@ import ScrollViewContainer from "@/components/common/ScrollViewContainer/ScrollV
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 const TAG_LIMIT = 8;
 
diff --git a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
index 585bc7782..916de9c53 100644
--- a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, toRefs, useTemplateRef, watch } from "vue";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import { type NavReachedEvent } from "@/components/common/NodeList/NodeList.vue";
 import { knimeExternalUrls } from "@/plugins/knimeExternalUrls";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import InfiniteNodeList from "../common/NodeList/InfiniteNodeList.vue";
 
 import SearchResultsInfo from "./SearchResultsInfo.vue";
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
index dd09a0c1f..da3df0934 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
@@ -7,7 +7,7 @@ import { MenuItems } from "@knime/components";
 import { type MenuItem } from "@knime/components";
 import FlowVariableIcon from "@knime/styles/img/icons/expose-flow-variables.svg";
 
-import type { ExtendedPortType, KnimeNode } from "@/api/custom-types";
+import type { KnimeNode } from "@/api/custom-types";
 import {
   ComponentPlaceholder,
   type NodePort,
@@ -23,7 +23,7 @@ import { useUIControlsStore } from "@/store/uiControls/uiControls";
 import { useExecutionStore } from "@/store/workflow/execution";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
-import { ports } from "@/util/dataMappers";
+import { type ExtendedPortType, ports } from "@/util/dataMappers";
 import { getPortViewByViewDescriptors } from "@/util/getPortViewByViewDescriptors";
 import { menuGroupsBuilder } from "@/util/menuGroupsBuilder";
 import {
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue
index 8552eeea3..5c0db1141 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue
@@ -4,12 +4,7 @@ import { storeToRefs } from "pinia";
 
 import { SearchInput } from "@knime/components";
 
-import type {
-  AvailablePortTypes,
-  ExtendedPortType,
-  NodeRelation,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { AvailablePortTypes, NodeRelation } from "@/api/custom-types";
 import {
   AddNodeCommand,
   type NodePort,
@@ -25,6 +20,10 @@ import { useSettingsStore } from "@/store/settings";
 import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import { checkPortCompatibility } from "@/util/compatibleConnections";
+import type {
+  ExtendedPortType,
+  NodeTemplateWithExtendedPorts,
+} from "@/util/dataMappers";
 import { portPositions } from "@/util/portShift";
 
 import QuickAddNodeDisabledWorkflowCoach from "./QuickAddNodeDisabledWorkflowCoach.vue";
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue
index eabd70efc..455256c65 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue
@@ -2,11 +2,11 @@
 import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeList from "@/components/common/NodeList/NodeList.vue";
 import NodeTemplate from "@/components/common/NodeTemplate/NodeTemplate.vue";
 import { useQuickAddNodesStore } from "@/store/quickAddNodes";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   selectedNode: NodeTemplateWithExtendedPorts | null;
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
index 88343be0c..2db04db87 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
@@ -2,11 +2,11 @@
 import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeTemplate from "@/components/common/NodeTemplate/NodeTemplate.vue";
 import SearchResults from "@/components/nodeSearch/SearchResults.vue";
 import { useQuickAddNodesStore } from "@/store/quickAddNodes";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   selectedNode: NodeTemplateWithExtendedPorts | null;
diff --git a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts
index e3eb3aa1d..4e360080e 100644
--- a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts
+++ b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts
@@ -1,7 +1,6 @@
 import { type Ref, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { ExtendedPortType } from "@/api/custom-types";
 import type { NodeFactoryKey } from "@/api/gateway-api/generated-api";
 import { useConnectedNodeObjects } from "@/composables/useConnectedNodeObjects";
 import { KNIME_MIME } from "@/composables/useDragNodeIntoCanvas";
@@ -13,6 +12,7 @@ import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
 import { checkPortCompatibility } from "@/util/compatibleConnections";
+import type { ExtendedPortType } from "@/util/dataMappers";
 
 type UseConnectionReplacementOptions = {
   /**
diff --git a/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue b/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue
index 2000f9dc9..186f779ca 100644
--- a/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue
+++ b/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue
@@ -5,12 +5,12 @@ import { FunctionButton, NodePreview } from "@knime/components";
 import ArrowNextIcon from "@knime/styles/img/icons/arrow-next.svg";
 import ArrowRightIcon from "@knime/styles/img/icons/arrow-right.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type {
   ComponentNodeAndDescription,
   WorkflowMonitorMessage,
 } from "@/api/gateway-api/generated-api";
 import SkeletonItem from "@/components/common/skeleton-loader/SkeletonItem.vue";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   message?: WorkflowMonitorMessage | null;
diff --git a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
index 3104a468d..395895fa4 100644
--- a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
+++ b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
@@ -4,6 +4,7 @@ import { storeToRefs } from "pinia";
 import {
   AddNodeCommand,
   type NodeFactoryKey,
+  SpaceItemReference,
   type XY,
 } from "@/api/gateway-api/generated-api";
 import { useCurrentCanvasStore } from "@/store/canvas/useCurrentCanvasStore";
@@ -17,6 +18,16 @@ export const useAddNodeToWorkflow = () => {
   const { isWritable, activeWorkflow } = storeToRefs(useWorkflowStore());
   const { toastPresets } = getToastPresets();
 
+  const nodeInteractionsStore = useNodeInteractionsStore();
+
+  const handleError = (error: unknown) => {
+    consola.error({
+      message: "Error adding node to canvas with auto-placement",
+      error,
+    });
+    toastPresets.workflow.addNodeToCanvas({ error });
+  };
+
   const addNodeByPosition = async (
     position: XY,
     nodeFactory: NodeFactoryKey,
@@ -26,18 +37,14 @@ export const useAddNodeToWorkflow = () => {
     },
   ) => {
     try {
-      await useNodeInteractionsStore().addNode({
+      await nodeInteractionsStore.addNode({
         position,
         nodeFactory,
         sourceNodeId: autoConnectOptions?.sourceNodeId,
         nodeRelation: autoConnectOptions?.nodeRelation,
       });
     } catch (error) {
-      consola.error({
-        message: "Error adding node to canvas with auto-placement",
-        error,
-      });
-      toastPresets.workflow.addNodeToCanvas({ error });
+      handleError(error);
     }
   };
 
@@ -71,8 +78,31 @@ export const useAddNodeToWorkflow = () => {
     await addNodeByPosition(position, nodeFactory, autoConnectOptions);
   };
 
+  const addComponentWithAutoPositioning = async (
+    componentName: string,
+    spaceItemReference: SpaceItemReference,
+  ) => {
+    const canvasStore = useCurrentCanvasStore();
+
+    const position = geometry.findFreeSpaceAroundCenterWithFallback({
+      visibleFrame: canvasStore.value.getVisibleFrame,
+      nodes: activeWorkflow.value!.nodes,
+    });
+
+    try {
+      await nodeInteractionsStore.addNode({
+        position,
+        spaceItemReference,
+        componentName,
+      });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
   return {
     addNodeByPosition,
     addNodeWithAutoPositioning,
+    addComponentWithAutoPositioning,
   };
 };
diff --git a/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts b/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
index 7fcb26358..4e76f5aea 100644
--- a/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
+++ b/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
@@ -1,6 +1,5 @@
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NodeFactoryKey, XY } from "@/api/gateway-api/generated-api";
 import { useNodeReplacementOrInsertion } from "@/components/workflowEditor/WebGLKanvas/common/useNodeReplacementOrInsertion";
 import { useDragNearEdgePanning } from "@/components/workflowEditor/WebGLKanvas/kanvas/useDragNearEdgePanning";
@@ -11,6 +10,7 @@ import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
 import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 import { useAddNodeToWorkflow } from "./useAddNodeToWorkflow";
 
diff --git a/org.knime.ui.js/src/store/common/useNodeSearch.ts b/org.knime.ui.js/src/store/common/useNodeSearch.ts
index e3ac876bf..189a3f598 100644
--- a/org.knime.ui.js/src/store/common/useNodeSearch.ts
+++ b/org.knime.ui.js/src/store/common/useNodeSearch.ts
@@ -2,13 +2,11 @@ import { computed, ref } from "vue";
 import { API } from "@api";
 import { debounce } from "lodash-es";
 
-import type {
-  NodeRelation,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { NodeRelation } from "@/api/custom-types";
 import { createAbortablePromise } from "@/api/utils";
 import { useApplicationStore } from "@/store/application/application";
 import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { nodeTemplate } from "@/util/dataMappers";
 
 /**
diff --git a/org.knime.ui.js/src/store/componentSearch/index.ts b/org.knime.ui.js/src/store/componentSearch/index.ts
index d8d1ceab9..cd2d9c5e4 100644
--- a/org.knime.ui.js/src/store/componentSearch/index.ts
+++ b/org.knime.ui.js/src/store/componentSearch/index.ts
@@ -5,8 +5,8 @@ import { defineStore } from "pinia";
 
 import { promise } from "@knime/utils";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import { createComponentSearchItem } from "@/test/factories/componentSearch";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { componentSearch } from "@/util/dataMappers";
 
 export const createData = (total: number, startOffset = 0) =>
diff --git a/org.knime.ui.js/src/store/nodeRepository.ts b/org.knime.ui.js/src/store/nodeRepository.ts
index 4dbe6f23c..d3126adb9 100644
--- a/org.knime.ui.js/src/store/nodeRepository.ts
+++ b/org.knime.ui.js/src/store/nodeRepository.ts
@@ -2,11 +2,9 @@ import { reactive, ref } from "vue";
 import { API } from "@api";
 import { defineStore } from "pinia";
 
-import type {
-  NodeCategoryWithExtendedPorts,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { NodeCategoryWithExtendedPorts } from "@/components/nodeRepository/NodeRepositoryTree/types";
 import { useNodeSearch } from "@/store/common/useNodeSearch";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { nodeTemplate } from "@/util/dataMappers";
 
 import { useApplicationStore } from "./application/application";
diff --git a/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts b/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
index c7e44bcb1..9ae961e3f 100644
--- a/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
+++ b/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
@@ -1,12 +1,10 @@
 import { API } from "@api";
 import { defineStore } from "pinia";
 
-import type {
-  AvailablePortTypes,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { AvailablePortTypes } from "@/api/custom-types";
 import type { NodeTemplate } from "@/api/gateway-api/generated-api";
 import { useApplicationStore } from "@/store/application/application";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { nodeTemplate } from "@/util/dataMappers";
 
 type NodeTemplateDictionary = Record<string, NodeTemplateWithExtendedPorts>;
diff --git a/org.knime.ui.js/src/store/quickAddNodes.ts b/org.knime.ui.js/src/store/quickAddNodes.ts
index 9606287ce..e0c10204c 100644
--- a/org.knime.ui.js/src/store/quickAddNodes.ts
+++ b/org.knime.ui.js/src/store/quickAddNodes.ts
@@ -2,13 +2,11 @@ import { computed, ref } from "vue";
 import { API } from "@api";
 import { defineStore } from "pinia";
 
-import type {
-  NodeRelation,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { NodeRelation } from "@/api/custom-types";
 import { useApplicationStore } from "@/store/application/application";
 import { useNodeSearch } from "@/store/common/useNodeSearch";
 import { useWorkflowStore } from "@/store/workflow/workflow";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { nodeTemplate } from "@/util/dataMappers";
 
 /**
diff --git a/org.knime.ui.js/src/test/factories/nodeRepository.ts b/org.knime.ui.js/src/test/factories/nodeRepository.ts
index 214c78603..f9707a23e 100644
--- a/org.knime.ui.js/src/test/factories/nodeRepository.ts
+++ b/org.knime.ui.js/src/test/factories/nodeRepository.ts
@@ -1,12 +1,12 @@
 import { merge } from "lodash-es";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import {
   NativeNodeInvariants,
   type NodePortTemplate,
   type NodeTemplate,
   PortType,
 } from "@/api/gateway-api/generated-api";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { nodeTemplate } from "@/util/dataMappers";
 
 import { PORT_TYPE_IDS, type PortTypeId } from "./common";
diff --git a/org.knime.ui.js/src/util/dataMappers/common.ts b/org.knime.ui.js/src/util/dataMappers/common.ts
new file mode 100644
index 000000000..8dd5798f8
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/common.ts
@@ -0,0 +1,12 @@
+import type { NodeTemplate, PortType } from "@/api/gateway-api/generated-api";
+
+export type ExtendedPortType = PortType & {
+  typeId: string;
+  type?: string;
+  description: string;
+};
+
+export type NodeTemplateWithExtendedPorts = NodeTemplate & {
+  inPorts: ExtendedPortType[];
+  outPorts: ExtendedPortType[];
+};
diff --git a/org.knime.ui.js/src/util/dataMappers/componentDescription.ts b/org.knime.ui.js/src/util/dataMappers/componentDescription.ts
index 677844a59..a385a101d 100644
--- a/org.knime.ui.js/src/util/dataMappers/componentDescription.ts
+++ b/org.knime.ui.js/src/util/dataMappers/componentDescription.ts
@@ -1,9 +1,9 @@
 import type {
   AvailablePortTypes,
   ComponentNodeDescription,
-  ExtendedPortType,
 } from "@/api/custom-types";
 
+import type { ExtendedPortType } from "./common";
 import { ports } from "./ports";
 
 export type ComponentNodeDescriptionWithExtendedPorts =
diff --git a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
index 8f4cb3155..77f283804 100644
--- a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
+++ b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
@@ -1,50 +1,46 @@
-import type {
-  ExtendedPortType,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
 import {
-  type ComponentSearchItem,
+  ComponentSearchItem,
   type NodePortTemplate,
   PortType,
 } from "@/api/gateway-api/generated-api";
 
-import KindEnum = PortType.KindEnum;
+import type { ExtendedPortType, NodeTemplateWithExtendedPorts } from "./common";
 
 const toNodeTemplateWithExtendedPorts = (
   input: ComponentSearchItem,
 ): NodeTemplateWithExtendedPorts => {
-  let inPorts = input.inPorts ?? [];
-  let mappedIn = inPorts.map((p) => {
+  const inPorts = (input.inPorts ?? []).map((port) => {
     return {
-      name: p.name ?? "",
-      typeId: "typeid",
-      optional: p.optional ?? false,
-      color: p.color,
-      type: p.portTypeName,
-      description: p.description ?? "",
-      kind: KindEnum.Other, // ~todo
+      name: port.name ?? "",
+      typeId: port.portTypeName,
+      optional: port.optional ?? false,
+      color: port.color,
+      type: port.portTypeName,
+      description: port.description ?? "",
+      kind: PortType.KindEnum.Other, // TODO: add port info
     } satisfies NodePortTemplate & ExtendedPortType;
   });
-  const mappedOut = (input.outPorts ?? []).map((p) => {
+
+  const outPorts = (input.outPorts ?? []).map((port) => {
     return {
-      name: p.name ?? "",
-      typeId: "typeid",
-      optional: p.optional ?? false,
-      color: p.color,
-      type: p.portTypeName,
-      description: p.description ?? "",
-      kind: KindEnum.Other, // ~todo
+      name: port.name ?? "",
+      typeId: port.portTypeName,
+      optional: port.optional ?? false,
+      color: port.color,
+      type: port.portTypeName,
+      description: port.description ?? "",
+      kind: PortType.KindEnum.Other, // TODO: add port info
     } satisfies NodePortTemplate & ExtendedPortType;
   });
-  // const outPorts = input.outPorts ?? [];
+
   return {
     id: input.name,
     name: input.name,
     type: input.type,
     component: true,
     icon: input.icon,
-    inPorts: mappedIn,
-    outPorts: mappedOut,
+    inPorts,
+    outPorts,
   };
 };
 
diff --git a/org.knime.ui.js/src/util/dataMappers/index.ts b/org.knime.ui.js/src/util/dataMappers/index.ts
index 280c5cfca..1ed3f5ff4 100644
--- a/org.knime.ui.js/src/util/dataMappers/index.ts
+++ b/org.knime.ui.js/src/util/dataMappers/index.ts
@@ -16,3 +16,4 @@ export * from "./nodeTemplate";
 export * from "./nodeDescription";
 export * from "./componentDescription";
 export * from "./componentSearch";
+export * from "./common";
diff --git a/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts b/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
index 49fa025c9..23df1949a 100644
--- a/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
+++ b/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
@@ -1,9 +1,10 @@
-import type { AvailablePortTypes, ExtendedPortType } from "@/api/custom-types";
+import type { AvailablePortTypes } from "@/api/custom-types";
 import type {
   DynamicPortGroupDescription,
   NativeNodeDescription,
 } from "@/api/gateway-api/generated-api";
 
+import type { ExtendedPortType } from "./common";
 import { ports } from "./ports";
 
 type PortGroupDescription = {
diff --git a/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts b/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
index cfe5b6baf..677ea84d0 100644
--- a/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
+++ b/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
@@ -1,9 +1,7 @@
-import type {
-  AvailablePortTypes,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { AvailablePortTypes } from "@/api/custom-types";
 import type { NodeTemplate } from "@/api/gateway-api/generated-api";
 
+import type { NodeTemplateWithExtendedPorts } from "./common";
 import { ports } from "./ports";
 
 /**
diff --git a/org.knime.ui.js/src/util/dataMappers/ports.ts b/org.knime.ui.js/src/util/dataMappers/ports.ts
index 46e563f1a..632b8ab36 100644
--- a/org.knime.ui.js/src/util/dataMappers/ports.ts
+++ b/org.knime.ui.js/src/util/dataMappers/ports.ts
@@ -1,4 +1,6 @@
-import type { AvailablePortTypes, ExtendedPortType } from "@/api/custom-types";
+import type { AvailablePortTypes } from "@/api/custom-types";
+
+import type { ExtendedPortType } from "./common";
 
 /**
  * Maps a port `typeId` string or a object with a `typeId` property to a port object with all the properties of the

From f2ed3a0e1d480343a382bcab6ffc2367e9821350 Mon Sep 17 00:00:00 2001
From: Helian Rivera <helian.rivera@knime.com>
Date: Thu, 18 Dec 2025 17:17:50 +0100
Subject: [PATCH 10/11] NXT-4296: remove leftovers from mocked api

NXT-4296 (Gateway API for component search (use HubClient SDK to call Search Service; aggregate and map entities for FE; error handling))
---
 .../src/store/componentSearch/index.ts        | 33 ++++---------------
 .../src/util/dataMappers/componentSearch.ts   |  6 ++--
 2 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/org.knime.ui.js/src/store/componentSearch/index.ts b/org.knime.ui.js/src/store/componentSearch/index.ts
index cd2d9c5e4..9c9f4a7fa 100644
--- a/org.knime.ui.js/src/store/componentSearch/index.ts
+++ b/org.knime.ui.js/src/store/componentSearch/index.ts
@@ -5,19 +5,11 @@ import { defineStore } from "pinia";
 
 import { promise } from "@knime/utils";
 
-import { createComponentSearchItem } from "@/test/factories/componentSearch";
 import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { componentSearch } from "@/util/dataMappers";
 
-export const createData = (total: number, startOffset = 0) =>
-  new Array(total).fill(0).map((_, i) =>
-    createComponentSearchItem({
-      name: `Component ${startOffset + i}`,
-      id: `id-${i}`,
-    }),
-  );
-
 const PAGE_SIZE = 50;
+const SEARCH_DEBOUNCE_MS = 300;
 
 export const useComponentSearchStore = defineStore("componentSearch", () => {
   const isLoading = ref(false);
@@ -54,27 +46,13 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
       });
 
       const response = await runAbortablePromise(async () => {
-        if (query.value === "foo") {
-          return [];
-        }
-
-        const responseFromAPI = await API.space.searchComponents({
+        const apiResponse = await API.space.searchComponents({
           query: query.value,
           offset: currentOffset.value * PAGE_SIZE,
           limit: PAGE_SIZE,
         });
 
-        // const response = createData(
-        //   PAGE_SIZE,
-        //   PAGE_SIZE * currentOffset.value,
-        // ).map(componentSearch.toNodeTemplateWithExtendedPorts);
-        //
-        // // return response;
-
-        let mapped = responseFromAPI.map(
-          componentSearch.toNodeTemplateWithExtendedPorts,
-        );
-        return mapped;
+        return apiResponse.map(componentSearch.toNodeTemplateWithExtendedPorts);
       });
 
       results.value = append ? results.value.concat(response) : response;
@@ -91,7 +69,10 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
     }
   };
 
-  const debouncedSearch = debounce(() => searchComponents(), 300);
+  const debouncedSearch = debounce(
+    () => searchComponents(),
+    SEARCH_DEBOUNCE_MS,
+  );
 
   const updateQuery = (value: string) => {
     query.value = value;
diff --git a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
index 77f283804..870efd395 100644
--- a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
+++ b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
@@ -13,7 +13,7 @@ const toNodeTemplateWithExtendedPorts = (
     return {
       name: port.name ?? "",
       typeId: port.portTypeName,
-      optional: port.optional ?? false,
+      optional: port.optional,
       color: port.color,
       type: port.portTypeName,
       description: port.description ?? "",
@@ -25,7 +25,7 @@ const toNodeTemplateWithExtendedPorts = (
     return {
       name: port.name ?? "",
       typeId: port.portTypeName,
-      optional: port.optional ?? false,
+      optional: port.optional,
       color: port.color,
       type: port.portTypeName,
       description: port.description ?? "",
@@ -34,7 +34,7 @@ const toNodeTemplateWithExtendedPorts = (
   });
 
   return {
-    id: input.name,
+    id: input.id,
     name: input.name,
     type: input.type,
     component: true,

From b81172506b5ae78d1e615438ff2b9c123090b73a Mon Sep 17 00:00:00 2001
From: Helian Rivera <helian.rivera@knime.com>
Date: Fri, 19 Dec 2025 17:32:12 +0100
Subject: [PATCH 11/11] NXT-4296: improvements

- keyboard navigation
- error handling
- empty state

NXT-4296 (Gateway API for component search (use HubClient SDK to call Search Service; aggregate and map entities for FE; error handling))
---
 org.knime.ui.js/package.json                  |  2 +-
 org.knime.ui.js/pnpm-lock.yaml                | 21 ++---
 .../InfiniteLoadingList.vue                   | 22 +++--
 .../common/NodeList/InfiniteNodeList.vue      | 19 +++--
 .../ComponentSearchResults.vue                | 32 ++++++-
 .../nodeRepository/NodeRepository.vue         | 77 +++++++++--------
 ...sults.vue => SidebarNodeSearchResults.vue} |  0
 ...st.js => SidebarNodeSearchResults.test.ts} | 10 +--
 .../header/NodeRepositoryHeader.vue           | 84 ++++++++-----------
 .../components/nodeSearch/SearchResults.vue   | 10 +--
 .../src/composables/useAddNodeToWorkflow.ts   | 24 ------
 .../src/store/componentSearch/index.ts        | 16 ++--
 org.knime.ui.js/src/toastPresets/index.ts     |  6 ++
 org.knime.ui.js/src/toastPresets/search.ts    | 26 ++++++
 14 files changed, 187 insertions(+), 162 deletions(-)
 rename org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/{SidebarSearchResults.vue => SidebarNodeSearchResults.vue} (100%)
 rename org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/{SidebarSearchResults.test.js => SidebarNodeSearchResults.test.ts} (90%)
 create mode 100644 org.knime.ui.js/src/toastPresets/search.ts

diff --git a/org.knime.ui.js/package.json b/org.knime.ui.js/package.json
index a35eabf9b..d4842afbf 100644
--- a/org.knime.ui.js/package.json
+++ b/org.knime.ui.js/package.json
@@ -46,7 +46,7 @@
     "@knime/rich-text-editor": "^1.7.11",
     "@knime/styles": "^1.14.3",
     "@knime/ui-extension-renderer": "2.3.0",
-    "@knime/utils": "^1.7.1",
+    "@knime/utils": "^1.9.1",
     "@knime/virtual-tree": "^1.6.11",
     "@open-rpc/client-js": "^1.8.1",
     "@tiptap/extension-heading": "^2.26.1",
diff --git a/org.knime.ui.js/pnpm-lock.yaml b/org.knime.ui.js/pnpm-lock.yaml
index 25818e243..c002a1e33 100644
--- a/org.knime.ui.js/pnpm-lock.yaml
+++ b/org.knime.ui.js/pnpm-lock.yaml
@@ -51,8 +51,8 @@ importers:
         specifier: 2.3.0
         version: 2.3.0(@fontsource/roboto-mono@4.5.10)(@fontsource/roboto@4.5.8)(@popperjs/core@2.11.8)(consola@3.4.2)(focus-trap@7.6.4)(vue@3.5.18(typescript@5.8.3))
       '@knime/utils':
-        specifier: ^1.7.1
-        version: 1.7.1(@fontsource/roboto-mono@4.5.10)(@fontsource/roboto@4.5.8)(consola@3.4.2)
+        specifier: ^1.9.1
+        version: 1.9.1(consola@3.4.2)
       '@knime/virtual-tree':
         specifier: ^1.6.11
         version: 1.6.11(@fontsource/roboto-mono@4.5.10)(@fontsource/roboto@4.5.8)(@popperjs/core@2.11.8)(consola@3.4.2)(focus-trap@7.6.4)(vue@3.5.18(typescript@5.8.3))
@@ -1307,8 +1307,8 @@ packages:
     peerDependencies:
       consola: 3.x
 
-  '@knime/utils@1.8.0':
-    resolution: {integrity: sha512-XvOAVfaHQTML8l8mD5phmqsyCPXseLvaPxLB7AjAyMNw7Zd7ZjcwG4ki5Qnw1Z17/Xiy7QrQ3ktNb0u1PwA4jw==}
+  '@knime/utils@1.9.1':
+    resolution: {integrity: sha512-JnnudAxop5wziV7/YQEOFShHC08nn1bctYu7m1qbdI+Cr/ZtJlfPSJoDR+pAIUMe10Gg/GXH8kW2/HdFp8iEug==}
     engines: {node: '>=22 <25'}
     peerDependencies:
       consola: 3.x
@@ -2799,9 +2799,6 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.2.7:
-    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
-
   dompurify@3.3.0:
     resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
@@ -7458,7 +7455,7 @@ snapshots:
   '@knime/kds-components@0.5.2(@vueuse/core@13.8.0(vue@3.5.18(typescript@5.8.3)))(vue@3.5.18(typescript@5.8.3))':
     dependencies:
       '@knime/kds-styles': 0.5.2
-      '@knime/utils': 1.8.0(consola@3.4.2)
+      '@knime/utils': 1.9.1(consola@3.4.2)
       '@vueuse/core': 13.8.0(vue@3.5.18(typescript@5.8.3))
       consola: 3.4.2
       vue: 3.5.18(typescript@5.8.3)
@@ -7608,12 +7605,12 @@ snapshots:
       consola: 3.4.2
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
-      dompurify: 3.2.7
+      dompurify: 3.3.0
     transitivePeerDependencies:
       - '@fontsource/roboto'
       - '@fontsource/roboto-mono'
 
-  '@knime/utils@1.8.0(consola@3.4.2)':
+  '@knime/utils@1.9.1(consola@3.4.2)':
     dependencies:
       consola: 3.4.2
       date-fns: 2.30.0
@@ -9210,10 +9207,6 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.2.7:
-    optionalDependencies:
-      '@types/trusted-types': 2.0.7
-
   dompurify@3.3.0:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
diff --git a/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue b/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
index ebf2a60ef..4cf277da3 100644
--- a/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
+++ b/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref, toRefs, watch } from "vue";
+import { nextTick, ref, toRefs, useTemplateRef, watch } from "vue";
 
 import ScrollViewContainer from "@/components/common/ScrollViewContainer/ScrollViewContainer.vue";
 import { createStaggeredLoader } from "@/util/createStaggeredLoader";
@@ -15,7 +15,13 @@ const searchScrollPosition = defineModel<number>({ default: 0 });
 const { isLoading } = toRefs(props);
 
 const isLoadingNextPage = ref(false);
-const isLoadingSearchResultsDeferred = ref(false);
+
+/**
+ * State used to mirror the loading state but with a small
+ * time offset, so as not to immediately show the loading state
+ * if the results arrive quickly
+ * */
+const isLoadingDeferred = ref(false);
 
 const setIsLoadingNextPage = createStaggeredLoader({
   firstStageCallback: () => {
@@ -26,19 +32,19 @@ const setIsLoadingNextPage = createStaggeredLoader({
   },
 });
 
-const setIsLoadingSearchResultsDeferred = createStaggeredLoader({
+const setIsLoadingDeferred = createStaggeredLoader({
   firstStageCallback: () => {
-    isLoadingSearchResultsDeferred.value = true;
+    isLoadingDeferred.value = true;
   },
   resetCallback: () => {
-    isLoadingSearchResultsDeferred.value = false;
+    isLoadingDeferred.value = false;
   },
 });
 
 watch(
   isLoading,
   (value) => {
-    setIsLoadingSearchResultsDeferred(value);
+    setIsLoadingDeferred(value);
   },
   { immediate: true },
 );
@@ -47,7 +53,7 @@ const onSaveScrollPosition = (position: number) => {
   searchScrollPosition.value = position;
 };
 
-const scroller = ref<InstanceType<typeof ScrollViewContainer> | null>(null);
+const scroller = useTemplateRef("scroller");
 const scrollToTop = async () => {
   // wait for new content to be displayed, then scroll to top
   await nextTick();
@@ -76,7 +82,7 @@ defineExpose({ scrollToTop });
     <div class="content">
       <slot
         :is-loading-next-page="isLoadingNextPage"
-        :is-loading-search-results-deferred="isLoadingSearchResultsDeferred"
+        :is-loading-deferred="isLoadingDeferred"
       />
     </div>
   </ScrollViewContainer>
diff --git a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
index 70f62818c..cb20bf349 100644
--- a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
+++ b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
@@ -15,11 +15,10 @@ type Props = {
   showDetailsFor?: NodeTemplateWithExtendedPorts | null;
   highlightFirst?: boolean;
   displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
-  isLoadingSearchResults: boolean;
+  isLoading: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  searchScrollPosition: 0,
   highlightFirst: false,
   displayMode: "icon",
   showDetailsFor: null,
@@ -37,7 +36,7 @@ const emit = defineEmits<{
   showNodeDetails: [node: NodeTemplateWithExtendedPorts];
 }>();
 
-const { nodes, displayMode, isLoadingSearchResults } = toRefs(props);
+const { nodes, displayMode, isLoading } = toRefs(props);
 
 const isEmpty = computed(() => nodes.value?.length === 0);
 
@@ -58,10 +57,10 @@ defineExpose({ focusFirst, scrollToTop });
   <InfiniteLoadingList
     ref="infiniteList"
     v-model="scrollPosition"
-    :is-loading="isLoadingSearchResults"
+    :is-loading="isLoading"
     :fetch-more="fetchMore"
   >
-    <template #default="{ isLoadingNextPage, isLoadingSearchResultsDeferred }">
+    <template #default="{ isLoadingNextPage, isLoadingDeferred }">
       <div v-if="!isEmpty" class="node-list-wrapper">
         <NodeList
           ref="nodeList"
@@ -89,13 +88,19 @@ defineExpose({ focusFirst, scrollToTop });
       </div>
 
       <SkeletonNodes
-        v-if="isLoadingSearchResultsDeferred"
+        v-if="isLoadingDeferred"
         class="node-list-skeleton"
         :number-of-nodes="5"
         :display-mode="displayMode"
       />
 
-      <slot v-if="!isLoadingSearchResults" name="noResults" />
+      <slot
+        name="listBottom"
+        :is-empty="isEmpty"
+        :is-loading="isLoading"
+        :is-loading-deferred="isLoadingDeferred"
+        :is-loading-next-page="isLoadingNextPage"
+      />
     </template>
   </InfiniteLoadingList>
 </template>
diff --git a/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue b/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
index be82c1eee..eb0e10f84 100644
--- a/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
+++ b/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { toRef, watch } from "vue";
+import { toRef, useTemplateRef, watch } from "vue";
 import { storeToRefs } from "pinia";
 
 import InfiniteNodeList from "@/components/common/NodeList/InfiniteNodeList.vue";
 import { useComponentSearchStore } from "@/store/componentSearch";
+import type { NavReachedEvent } from "../common/NodeList/NodeList.vue";
 import DraggableNodeTemplate from "../common/NodeTemplate/DraggableNodeTemplate.vue";
 
 type Props = {
@@ -11,6 +12,10 @@ type Props = {
 };
 const props = defineProps<Props>();
 
+const emit = defineEmits<{
+  navReachedTop: [event: NavReachedEvent];
+}>();
+
 const componentSearchStore = useComponentSearchStore();
 const { isLoading, hasLoaded, results, searchScrollPosition } =
   storeToRefs(componentSearchStore);
@@ -20,6 +25,12 @@ watch(toRef(props, "active"), () => {
     componentSearchStore.searchComponents();
   }
 });
+
+const infiniteList = useTemplateRef("infiniteList");
+const focusFirst = () => {
+  infiniteList.value?.focusFirst();
+};
+defineExpose({ focusFirst });
 </script>
 
 <template>
@@ -28,12 +39,27 @@ watch(toRef(props, "active"), () => {
     v-model:scroll-position="searchScrollPosition"
     :nodes="results"
     :fetch-more="() => componentSearchStore.searchComponents({ append: true })!"
-    :is-loading-search-results="isLoading"
+    :is-loading="isLoading"
+    @nav-reached-top="emit('navReachedTop', $event)"
   >
     <template #nodesTemplate="slotProps">
       <DraggableNodeTemplate v-bind="slotProps" />
     </template>
 
-    <template #noResults> There are no components </template>
+    <template #listBottom="{ isEmpty }">
+      <div v-if="isEmpty && !isLoading" class="empty-state">
+        No results were found. Please try a different search term.
+      </div>
+    </template>
   </InfiniteNodeList>
 </template>
+
+<style lang="postcss" scoped>
+.empty-state {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-32) var(--space-8);
+  font-size: 13px;
+  text-align: center;
+}
+</style>
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
index d8d86cdf2..521d619a6 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
 import { storeToRefs } from "pinia";
 
 import type { NavigationKey } from "@/components/common/NodeList/NodeList.vue";
 import NodeDescription from "@/components/nodeDescription/NodeDescription.vue";
-import SidebarSearchResults from "@/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue";
+import SidebarNodeSearchResults from "@/components/nodeRepository/NodeSearchResults/SidebarNodeSearchResults.vue";
 import { useApplicationStore } from "@/store/application/application";
 import { useLifecycleStore } from "@/store/application/lifecycle";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
@@ -22,8 +22,6 @@ const nodeRepositoryStore = useNodeRepositoryStore();
 const { nodesPerTag, showDescriptionForNode, searchIsActive } =
   storeToRefs(nodeRepositoryStore);
 
-const categoryTree = ref<InstanceType<typeof NodeRepositoryTree>>();
-
 const displayMode = computed(
   () => useSettingsStore().settings.nodeRepositoryDisplayMode,
 );
@@ -87,24 +85,30 @@ const toggleNodeDescription = ({
   panelStore.closeExtensionPanel();
 };
 
-const header = ref<InstanceType<typeof NodeRepositoryHeader>>();
+const searchContext = ref<"nodes" | "components">("nodes");
 
-const searchResults = ref<InstanceType<typeof SidebarSearchResults>>();
-const nodesGroupedByTag = ref<InstanceType<typeof NodesGroupedByTag>>();
+const header = useTemplateRef("header");
+const nodeSearchResults = useTemplateRef("nodeSearchResults");
+const nodesGroupedByTag = useTemplateRef("nodesGroupedByTag");
+const nodeRepositoryTree = useTemplateRef("nodeRepositoryTree");
+const componentSearchResults = useTemplateRef("componentSearchResults");
 
 const onSearchBarDownKey = () => {
-  // search (regardless of display mode)
+  if (searchContext.value === "components") {
+    componentSearchResults.value?.focusFirst();
+    return;
+  }
+
   if (searchIsActive.value) {
-    searchResults.value?.focusFirst();
+    nodeSearchResults.value?.focusFirst();
     return;
   }
 
-  // tree
   if (displayMode.value === "tree") {
-    categoryTree.value?.focusFirst();
+    nodeRepositoryTree.value?.focusFirst();
     return;
   }
-  // tag
+
   nodesGroupedByTag.value?.focusFirst();
 };
 
@@ -113,8 +117,6 @@ const handleNavReachedTop = (event: { key: NavigationKey }) => {
     header.value?.focusSearchInput();
   }
 };
-
-const searchContext = ref<"nodes" | "components">("nodes");
 </script>
 
 <template>
@@ -126,33 +128,34 @@ const searchContext = ref<"nodes" | "components">("nodes");
     />
 
     <template v-if="nodeRepositoryLoaded">
-      <SidebarSearchResults
-        v-if="searchIsActive"
-        v-show="searchContext === 'nodes'"
-        ref="searchResults"
-        :display-mode="displayMode"
-        @nav-reached-top="handleNavReachedTop($event)"
-        @show-node-description="toggleNodeDescription"
-      />
-      <NodesGroupedByTag
-        v-else-if="displayMode !== 'tree'"
-        v-show="searchContext === 'nodes'"
-        ref="nodesGroupedByTag"
-        :display-mode="displayMode"
-        @nav-reached-top="handleNavReachedTop($event)"
-        @show-node-description="toggleNodeDescription"
-      />
-      <NodeRepositoryTree
-        v-else
-        v-show="searchContext === 'nodes'"
-        ref="categoryTree"
-        @nav-reached-top="handleNavReachedTop($event)"
-        @show-node-description="toggleNodeDescription"
-      />
+      <div v-show="searchContext === 'nodes'" style="height: 100%">
+        <SidebarNodeSearchResults
+          v-if="searchIsActive"
+          ref="nodeSearchResults"
+          :display-mode="displayMode"
+          @nav-reached-top="handleNavReachedTop($event)"
+          @show-node-description="toggleNodeDescription"
+        />
+        <NodesGroupedByTag
+          v-else-if="displayMode !== 'tree'"
+          ref="nodesGroupedByTag"
+          :display-mode="displayMode"
+          @nav-reached-top="handleNavReachedTop($event)"
+          @show-node-description="toggleNodeDescription"
+        />
+        <NodeRepositoryTree
+          v-else
+          ref="nodeRepositoryTree"
+          @nav-reached-top="handleNavReachedTop($event)"
+          @show-node-description="toggleNodeDescription"
+        />
+      </div>
 
       <ComponentSearchResults
         v-show="searchContext === 'components'"
+        ref="componentSearchResults"
         :active="searchContext === 'components'"
+        @nav-reached-top="handleNavReachedTop($event)"
       />
     </template>
 
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarNodeSearchResults.vue
similarity index 100%
rename from org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
rename to org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarNodeSearchResults.vue
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarSearchResults.test.js b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarNodeSearchResults.test.ts
similarity index 90%
rename from org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarSearchResults.test.js
rename to org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarNodeSearchResults.test.ts
index dc490b142..309861569 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarSearchResults.test.js
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarNodeSearchResults.test.ts
@@ -5,9 +5,9 @@ import { mount } from "@vue/test-utils";
 import SearchResults from "@/components/nodeSearch/SearchResults.vue";
 import { createNodeTemplateWithExtendedPorts } from "@/test/factories";
 import { mockStores } from "@/test/utils/mockStores";
-import SidebarSearchResults from "../SidebarSearchResults.vue";
+import SidebarNodeSearchResults from "../SidebarNodeSearchResults.vue";
 
-describe("SidebarSearchResults", () => {
+describe("SidebarNodeSearchResults", () => {
   const doMount = () => {
     const { nodeRepositoryStore, testingPinia } = mockStores();
 
@@ -32,11 +32,11 @@ describe("SidebarSearchResults", () => {
 
     nodeRepositoryStore.isLoadingSearchResults = false;
 
-    vi.mocked(nodeRepositoryStore.searchNodesNextPage).mockImplementation(
-      () => {},
+    vi.mocked(nodeRepositoryStore.searchNodesNextPage).mockImplementation(() =>
+      Promise.resolve(),
     );
 
-    const wrapper = mount(SidebarSearchResults, {
+    const wrapper = mount(SidebarNodeSearchResults, {
       props: { displayMode: "icon" },
       global: { plugins: [testingPinia] },
     });
diff --git a/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue b/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
index 0960ce5b2..768655c81 100644
--- a/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
@@ -3,7 +3,6 @@ import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
 import {
-  type BreadcrumbItem,
   type MenuItem,
   SearchInput,
   SubMenu,
@@ -13,7 +12,6 @@ import DisplayModeListIcon from "@knime/styles/img/icons/list.svg";
 import DisplayModeTreeIcon from "@knime/styles/img/icons/unordered-list.svg";
 import DisplayModeGridIcon from "@knime/styles/img/icons/view-cards.svg";
 
-import ActionBreadcrumb from "@/components/common/ActionBreadcrumb.vue";
 import { useApplicationStore } from "@/store/application/application";
 import { useApplicationSettingsStore } from "@/store/application/settings";
 import { useComponentSearchStore } from "@/store/componentSearch";
@@ -22,9 +20,11 @@ import {
   type NodeRepositoryDisplayModesType,
   useSettingsStore,
 } from "@/store/settings";
+import { getToastPresets } from "@/toastPresets";
 
 import CloseableTagList from "./CloseableTagList.vue";
 
+const { toastPresets } = getToastPresets();
 const nodeRepositoryStore = useNodeRepositoryStore();
 const { searchIsActive, tagsOfVisibleNodes: tags } =
   storeToRefs(nodeRepositoryStore);
@@ -61,11 +61,17 @@ const currentSearchQuery = computed(() => {
   }
 });
 
-const updateSearchQuery = (value: string) => {
-  if (isComponentSearch.value) {
-    componentSearchStore.updateQuery(value);
-  } else {
-    nodeRepositoryStore.updateQuery(value);
+const updateSearchQuery = async (value: string) => {
+  try {
+    const updateQueryFn = isComponentSearch.value
+      ? componentSearchStore.updateQuery
+      : nodeRepositoryStore.updateQuery;
+    await updateQueryFn(value);
+  } catch (error) {
+    const handler = isComponentSearch.value
+      ? toastPresets.search.componentSearch
+      : toastPresets.search.nodeSearch;
+    handler({ error });
   }
 };
 
@@ -73,23 +79,6 @@ const switchSearchContext = (value: "nodes" | "components") => {
   searchContext.value = value;
 };
 
-const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
-  if (isComponentSearch.value) {
-    return [{ text: "Components" }];
-  }
-
-  // If search results are shown, it's possible to navigate back
-  return searchIsActive.value
-    ? [{ text: "Nodes", id: "clear" }, { text: "Results" }]
-    : [{ text: "Nodes" }];
-});
-
-const onBreadcrumbClick = (event: { id: string }) => {
-  if (event.id === "clear") {
-    nodeRepositoryStore.clearSearchParams();
-  }
-};
-
 type MenuItemWithDisplayMode = MenuItem<{
   displayMode: NodeRepositoryDisplayModesType;
 }>;
@@ -129,30 +118,34 @@ const focusSearchInput = () => {
   searchBar.value?.focus();
 };
 defineExpose({ focusSearchInput });
+
+const searchPlaceholderText = computed(() => {
+  if (isComponentSearch.value) {
+    return "Search components in the KNIME Hub";
+  }
+
+  return hasNodeCollectionActive.value
+    ? `Search in ${activeNodeCollection} nodes`
+    : "Search all nodes";
+});
 </script>
 
 <template>
   <div class="header">
     <div class="title-and-search">
-      <div class="search-header" style="margin-bottom: 8px">
-        <ActionBreadcrumb
-          :items="breadcrumbItems"
-          class="repo-breadcrumb"
-          @click="onBreadcrumbClick"
+      <div class="search-header">
+        <ValueSwitch
+          compact
+          :disabled="!nodeRepositoryLoaded"
+          :model-value="searchContext"
+          :possible-values="[
+            { id: 'nodes', text: 'Nodes' },
+            { id: 'components', text: 'Components' },
+          ]"
+          @update:model-value="switchSearchContext"
         />
 
         <div class="actions">
-          <ValueSwitch
-            compact
-            :disabled="!nodeRepositoryLoaded"
-            :model-value="searchContext"
-            :possible-values="[
-              { id: 'nodes', text: 'nodes' },
-              { id: 'components', text: 'components' },
-            ]"
-            @update:model-value="switchSearchContext"
-          />
-
           <SubMenu
             v-if="!isComponentSearch"
             :items="displayModeSubMenuItems"
@@ -182,11 +175,7 @@ defineExpose({ focusSearchInput });
         compact
         :maxlength="$characterLimits.searchFields"
         :disabled="!nodeRepositoryLoaded"
-        :placeholder="
-          hasNodeCollectionActive
-            ? `Search in ${activeNodeCollection} nodes`
-            : 'Search all nodes'
-        "
+        :placeholder="searchPlaceholderText"
         class="search-bar"
         @keydown.down.prevent="$emit('searchBarDownKey')"
         @clear="nodeRepositoryStore.clearSearchParams"
@@ -218,12 +207,11 @@ defineExpose({ focusSearchInput });
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: var(--space-8);
+      margin: var(--space-12) 0;
+      min-height: 30px;
 
       & .actions {
         display: flex;
-        margin-top: var(--space-4);
-        gap: var(--space-4);
         align-items: center;
       }
 
diff --git a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
index 916de9c53..afb088524 100644
--- a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
@@ -54,8 +54,6 @@ const {
 
 const { KNIME_HUB_SEARCH_URL } = knimeExternalUrls;
 
-const isNodeListEmpty = computed(() => nodes.value?.length === 0);
-
 const scrollPosition = defineModel<number>("scrollPosition", { default: 0 });
 const selectedNode = defineModel<NodeTemplateWithExtendedPorts | null>(
   "selectedNode",
@@ -91,7 +89,7 @@ defineExpose({ focusFirst });
     :display-mode="displayMode"
     :show-details-for="showDescriptionForNode"
     :fetch-more="searchActions.searchNodesNextPage"
-    :is-loading-search-results="isLoadingSearchResults"
+    :is-loading="isLoadingSearchResults"
     @nav-reached-top="emit('navReachedTop', $event)"
     @enter-key="emit('itemEnterKey', $event)"
     @show-node-details="emit('showNodeDetails', $event)"
@@ -100,11 +98,11 @@ defineExpose({ focusFirst });
       <slot name="nodesTemplate" v-bind="slotProps" />
     </template>
 
-    <template #noResults>
+    <template #listBottom="{ isEmpty, isLoading }">
       <SearchResultsInfo
-        v-if="!isLoadingSearchResults"
+        v-if="!isLoading"
         :num-filtered-out-nodes="numFilteredOutNodes"
-        :is-node-list-empty="isNodeListEmpty"
+        :is-node-list-empty="isEmpty"
         :search-hub-link="searchHubLink"
         :mini="isQuickAddNodeMenu"
       />
diff --git a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
index 395895fa4..3cec20145 100644
--- a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
+++ b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
@@ -4,7 +4,6 @@ import { storeToRefs } from "pinia";
 import {
   AddNodeCommand,
   type NodeFactoryKey,
-  SpaceItemReference,
   type XY,
 } from "@/api/gateway-api/generated-api";
 import { useCurrentCanvasStore } from "@/store/canvas/useCurrentCanvasStore";
@@ -78,31 +77,8 @@ export const useAddNodeToWorkflow = () => {
     await addNodeByPosition(position, nodeFactory, autoConnectOptions);
   };
 
-  const addComponentWithAutoPositioning = async (
-    componentName: string,
-    spaceItemReference: SpaceItemReference,
-  ) => {
-    const canvasStore = useCurrentCanvasStore();
-
-    const position = geometry.findFreeSpaceAroundCenterWithFallback({
-      visibleFrame: canvasStore.value.getVisibleFrame,
-      nodes: activeWorkflow.value!.nodes,
-    });
-
-    try {
-      await nodeInteractionsStore.addNode({
-        position,
-        spaceItemReference,
-        componentName,
-      });
-    } catch (error) {
-      handleError(error);
-    }
-  };
-
   return {
     addNodeByPosition,
     addNodeWithAutoPositioning,
-    addComponentWithAutoPositioning,
   };
 };
diff --git a/org.knime.ui.js/src/store/componentSearch/index.ts b/org.knime.ui.js/src/store/componentSearch/index.ts
index 9c9f4a7fa..0deb74814 100644
--- a/org.knime.ui.js/src/store/componentSearch/index.ts
+++ b/org.knime.ui.js/src/store/componentSearch/index.ts
@@ -1,6 +1,6 @@
 import { readonly, ref } from "vue";
+import { useDebounceFn } from "@vueuse/core";
 import { API } from "@api";
-import { debounce } from "lodash-es";
 import { defineStore } from "pinia";
 
 import { promise } from "@knime/utils";
@@ -39,7 +39,7 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
     abortController = newAbortController;
 
     try {
-      consola.info("componentSearch:: Fetching components", {
+      consola.info("componentSearch:: Fetching results", {
         query: query.value,
         offset: currentOffset.value,
         limit: PAGE_SIZE,
@@ -57,7 +57,6 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
 
       results.value = append ? results.value.concat(response) : response;
 
-      isLoading.value = false;
       hasLoaded.value = true;
       currentOffset.value++;
     } catch (error) {
@@ -66,21 +65,20 @@ export const useComponentSearchStore = defineStore("componentSearch", () => {
       }
 
       throw error;
+    } finally {
+      isLoading.value = false;
     }
   };
 
-  const debouncedSearch = debounce(
-    () => searchComponents(),
-    SEARCH_DEBOUNCE_MS,
-  );
+  const debouncedSearch = useDebounceFn(searchComponents, SEARCH_DEBOUNCE_MS);
 
-  const updateQuery = (value: string) => {
+  const updateQuery = async (value: string) => {
     query.value = value;
     currentOffset.value = 0;
     results.value = [];
     hasLoaded.value = false;
     isLoading.value = true;
-    debouncedSearch();
+    await debouncedSearch();
   };
 
   return {
diff --git a/org.knime.ui.js/src/toastPresets/index.ts b/org.knime.ui.js/src/toastPresets/index.ts
index 0d5008731..1359c7d66 100644
--- a/org.knime.ui.js/src/toastPresets/index.ts
+++ b/org.knime.ui.js/src/toastPresets/index.ts
@@ -14,6 +14,10 @@ import {
   type ConnectivityPresets,
   getPresets as getConnectivityPresets,
 } from "./connectivity";
+import {
+  type SearchToastPresets,
+  getPresets as getSearchPresets,
+} from "./search";
 import {
   type SpacesToastPresets,
   getPresets as getSpacesPresets,
@@ -30,6 +34,7 @@ import {
 type ToastPresetRegistry = {
   app: ApplicationToastPresets;
   connectivity: ConnectivityPresets;
+  search: SearchToastPresets;
   spaces: SpacesToastPresets;
   versions: VersionsToastPresets;
   workflow: WorkflowToastPresets;
@@ -42,6 +47,7 @@ const initToastPresets = ($toastService: ToastServiceProvider) => {
   registry = Object.freeze({
     app: getApplicationPresets($toastService),
     connectivity: getConnectivityPresets($toastService),
+    search: getSearchPresets($toastService),
     spaces: getSpacesPresets($toastService),
     versions: getVersionsPresets($toastService),
     workflow: getWorkflowPresets($toastService),
diff --git a/org.knime.ui.js/src/toastPresets/search.ts b/org.knime.ui.js/src/toastPresets/search.ts
new file mode 100644
index 000000000..7b2d31dbb
--- /dev/null
+++ b/org.knime.ui.js/src/toastPresets/search.ts
@@ -0,0 +1,26 @@
+import type { ToastServiceProvider } from "@knime/components";
+
+import { defaultAPIErrorHandler } from "./defaultAPIErrorHandler";
+import { type ToastPresetErrorHandler } from "./types";
+
+export type SearchToastPresets = {
+  nodeSearch: ToastPresetErrorHandler;
+  componentSearch: ToastPresetErrorHandler;
+};
+
+export const getPresets = (
+  $toast: ToastServiceProvider,
+): SearchToastPresets => {
+  return {
+    nodeSearch: ({ error }) =>
+      defaultAPIErrorHandler($toast, error, {
+        type: "error",
+        headline: "Failed to search for nodes",
+      }),
+    componentSearch: ({ error }) =>
+      defaultAPIErrorHandler($toast, error, {
+        type: "error",
+        headline: "Failed to search for components",
+      }),
+  };
+};