feat(autocomplete): add subtree input property

dist_plainjs/manually_maintained_types.d.ts

@@ -21,6 +21,7 @@ declare global {
       ts4nfdiGateway: boolean;
       singleSuggestionRow?: boolean;
       showApiSource?: boolean;
+      subTreeIris?: string;
     }
     )=>void,
     createDataContent:(props:{

src/app/types.ts

@@ -206,6 +206,10 @@ export type AutocompleteWidgetProps = EuiComboBoxProps<string> & ParameterObj &
    * Whether to show the api source in the result list or not. Default is true. Only when the API gateway is selected.
    */
   showApiSource?: boolean;
+  /**
+   * Comma-separated list of terms Iris. Used for narrowing down the results to sub-tree of the given terms. Example: http://purl.obolibrary.org/obo/OBI_0000070,http://purl.obolibrary.org/obo/IAO_0000027
+   */
+  subTreeIris?: string;
 };
 
 export type DataContentWidgetProps = ApiObj & ParameterObj;

src/components/widgets/AutocompleteWidget/AutocompleteWidget.stories.tsx

@@ -29,7 +29,8 @@ export {
   WithLongForm,
   WithDescriptionAndShortForm,
   TibNFDI4CHEM,
-  TibDataPlant
+  TibDataPlant,
+  SubTreeFiltering
 } from "./AutocompleteWidgetStories"
 
 

src/components/widgets/AutocompleteWidget/AutocompleteWidget.tsx

@@ -30,6 +30,7 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
     placeholder,
     singleSelection,
     singleSuggestionRow,
+    subTreeIris,
     ts4nfdiGateway = false,
     showApiSource = true,
     ...rest
@@ -39,6 +40,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
 
   const visColors = euiPaletteColorBlind();
   const visColorsBehindText = euiPaletteColorBlindBehindText();
+
+
 
   /**
    * The current search value
@@ -55,6 +58,12 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
    */
   const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionOption<any>>>([]);
 
+  /** 
+   * update the input url parameter in case a list of iris for subtree filtering is given.
+   * */
+  const updatedParameter = subTreeIris ? (parameter + `&childrenOf=${subTreeIris}`) : parameter;
+
+
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const renderOption = (option, searchValue) => {
@@ -157,7 +166,7 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
                             {query: option.iri},
                             undefined,
                             undefined,
-                            parameter,
+                            updatedParameter,
 
                             ts4nfdiGateway
                         ).then((response) => {
@@ -227,7 +236,7 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
           { query: searchValue },
           undefined,
           undefined,
-          parameter,
+          updatedParameter,
           ts4nfdiGateway
         ).then((response) => {
           if (response) {
@@ -378,6 +387,7 @@ function WrappedAutocompleteWidget(props: AutocompleteWidgetProps) {
           ts4nfdiGateway={props.ts4nfdiGateway}
           singleSuggestionRow={props.singleSuggestionRow}
           showApiSource={props.showApiSource}
+          subTreeIris={props.subTreeIris}
         />
       </QueryClientProvider>
     </EuiProvider>

src/components/widgets/AutocompleteWidget/AutocompleteWidgetHTML.stories.ts

@@ -36,6 +36,7 @@ window['SemLookPWidgets'].createAutocomplete(
         ts4nfdiGateway:${args.ts4nfdiGateway},
         singleSuggestionRow:${args.singleSuggestionRow},
         showApiSource:${args.showApiSource},
+        subTreeIris: "${args.subTreeIris}",
     },
     document.querySelector('#autocomplete_widget_container_${num}')
 )
@@ -61,5 +62,6 @@ export {
     AllowAddingCustomTerms,
     WithGermanInput,
     WithLongForm,
-    WithDescriptionAndShortForm
+    WithDescriptionAndShortForm,
+    SubTreeFiltering
 } from "./AutocompleteWidgetStories"

src/components/widgets/AutocompleteWidget/AutocompleteWidgetStories.ts

@@ -11,7 +11,8 @@ import {
   selectionChangedEventArgType, showApiSourceArgType,
   singleSelectionArgType,
   singleSuggestionRowArgType,
-  ts4nfdiGatewayArgType
+  ts4nfdiGatewayArgType,
+  subTreeIrisArgType
 } from "../../../stories/storyArgs";
 
 export const AutocompleteWidgetStoryArgTypes = {
@@ -20,6 +21,7 @@ export const AutocompleteWidgetStoryArgTypes = {
     ...selectionChangedEventArgType,
     ...placeholderArgType,
     ...preselectedArgType,
+    ...subTreeIrisArgType,
     ...parameterArgType,
     ...hasShortSelectedLabelArgType,
     ...allowCustomTermsArgType,
@@ -42,6 +44,7 @@ export const AutocompleteWidgetStoryArgsReact = {
     preselected: [],
     showApiSource: true,
     parameter: "ontology=mesh,efo&type=class&collection=nfdi4health&fieldList=description,label,iri,ontology_name,type,short_form",
+    subTreeIris: ""
   },
 };
 
@@ -57,6 +60,7 @@ export const AutocompleteWidgetStoryArgsHTML = {
     preselected: [],
     showApiSource: true,
     parameter: "ontology=mesh,efo&type=class&collection=nfdi4health&fieldList=description,label,iri,ontology_name,type,short_form",
+    subTreeIris: ""
   },
 };
 
@@ -174,4 +178,12 @@ export const TibDataPlant = {
     api: globals.TIB_API_ENDPOINT,
     parameter: "classification=DataPLANT&schema=collection",
   }
+};
+
+export const SubTreeFiltering = {
+  args: {
+    api: globals.TIB_API_ENDPOINT,
+    subTreeIris: "http://purl.obolibrary.org/obo/OBI_0000070,http://purl.obolibrary.org/obo/IAO_0000027",
+    parameter: ""
+  }
 };

src/stories/storyArgs.ts

@@ -45,6 +45,15 @@ export const iriArgType = {
     type: { summary: "string" }
   }
 };
+export const subTreeIrisArgType = {
+  subTreeIris: {
+    required: false,
+    description: `Comma-separated list of terms Iris. Used for narrowing down the results to sub-tree of the given terms.
+      Example: http://purl.obolibrary.org/obo/OBI_0000070,http://purl.obolibrary.org/obo/IAO_0000027
+      `,
+    type: { summary: "string" }
+  }
+};
 export const ontologyIdArgType = {
   ontologyId: {
     required: false,