Enh/nxt 4296 Component search

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",

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;

org.knime.ui.js/src/api/gateway-api/generated-api.ts

@@ -1212,6 +1212,118 @@ export interface ComponentPortDescription {
 }
 
 
+/**
+ * ...
+ * @export
+ * @interface ComponentSearchItem
+ */
+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}
+     * @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. \"kind\") of the component
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    type: ComponentSearchItem.TypeEnum;
+    /**
+     * The components'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 +7035,28 @@ const space = function(rpcClient: RPCClient) {
 
             return rpcClient.call('SpaceService.renameSpace', { ...defaultParams, ...params });
         },
+        /**
+         * Search among components in this 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: { query?: string,  limit?: number,  offset?: number  }
+        ): Promise<Array<ComponentSearchItem>> {
+            const defaultParams = { 
+                query: null,
+                limit: null,
+                offset: null,
+            }
+
+            return rpcClient.call('SpaceService.searchComponents', { ...defaultParams, ...params });
+        },
     }
 };
 

org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { nextTick, ref, toRefs, useTemplateRef, 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);
+
+/**
+ * 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: () => {
+    isLoadingNextPage.value = true;
+  },
+  resetCallback: () => {
+    isLoadingNextPage.value = false;
+  },
+});
+
+const setIsLoadingDeferred = createStaggeredLoader({
+  firstStageCallback: () => {
+    isLoadingDeferred.value = true;
+  },
+  resetCallback: () => {
+    isLoadingDeferred.value = false;
+  },
+});
+
+watch(
+  isLoading,
+  (value) => {
+    setIsLoadingDeferred(value);
+  },
+  { immediate: true },
+);
+
+const onSaveScrollPosition = (position: number) => {
+  searchScrollPosition.value = position;
+};
+
+const scroller = useTemplateRef("scroller");
+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-deferred="isLoadingDeferred"
+      />
+    </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>