Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(AutoComplete): Add API source #125

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

feat(AutoComplete): Add API source #125

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
279b3f3
feat(AutoComplete): Add API source
Pooya-Oladazimi Aug 21, 2024
eefa7bd
feat(AutoComplete): Api source flag
Pooya-Oladazimi Aug 26, 2024
6dbcb8d
build(package lock): build the lock
Pooya-Oladazimi Aug 26, 2024
a021dba
build(lock): rebuild package-lock.json
Pooya-Oladazimi Aug 26, 2024
0cc73a8
feat(AutoComplete): Build html
Pooya-Oladazimi Aug 26, 2024
d2bd497
fix(AutoComplete): Fix PR issues
Pooya-Oladazimi Aug 29, 2024
94c0eae
resolve merge conflicts
jusa3 Sep 5, 2024
f56bd4a
update package-lock.json
jusa3 Sep 5, 2024
3a7fdd1
feat(AutoComplete): Added Source Name
Pooya-Oladazimi Sep 16, 2024
8123750
Merge branch 'main' into feat/add-api-source-to-results
Pooya-Oladazimi Sep 27, 2024
e4d88cc
merge main
Pooya-Oladazimi Sep 27, 2024
bba2b28
feat(Autocompelete): used info icon for triggering the hover text.
Pooya-Oladazimi Oct 7, 2024
4f3d5b1
Merge branch 'main' into feat/add-api-source-to-results
Pooya-Oladazimi Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dist_plainjs/manually_maintained_types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ declare global {
allowCustomTerms: boolean;
ts4nfdiGateway: boolean;
singleSuggestionRow?: boolean;
showApiSource?: boolean;
}
)=>void,
createDataContent:(props:{
Expand Down
363 changes: 245 additions & 118 deletions dist_plainjs/terminology-service-suite.js
View file
Open in desktop

Large diffs are not rendered by default.

270 changes: 129 additions & 141 deletions dist_plainjs/terminology-service-suite.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1,786 changes: 874 additions & 912 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions src/app/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,10 @@ export type AutocompleteWidgetProps = EuiComboBoxProps<string> & ParameterObj &
* Use the TS4NFDI Gateway API
*/
ts4nfdiGateway?: boolean;
/**
* Whether to show the api source in the result list or not. Default is true. Only when the API gateway is selected.
*/
showApiSource?: boolean;
};

export type DataContentWidgetProps = ApiObj & ParameterObj;
Expand Down
1 change: 1 addition & 0 deletions src/components/widgets/AutocompleteWidget/AutocompleteWidget.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export {
UseAPIGatewayWithOLS,
UseAPIGatewayWithOntoPortal,
UseAPIGatewayWithSkosmos,
HideApiSourceApiGateway,
WithDefaultsCompact,
WithValue,
WithCustomValue,
Expand Down
74 changes: 42 additions & 32 deletions src/components/widgets/AutocompleteWidget/AutocompleteWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
singleSelection,
singleSuggestionRow,
ts4nfdiGateway = false,
showApiSource = true,
...rest
} = props;

Expand Down Expand Up @@ -66,29 +67,16 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
return label;
}

let hoverText = "";
let prefix = value.type === "ontology"
? value.ontology_name
: value.ontology_name + " > " + value.short_form;

let hoverText = `Type: ${value.type}\n\nLabel: ${value.label}\n\nPrefix: ${prefix}`;
if (value.description != undefined) {
if (value.type === "ontology") {
hoverText = "Type: " + value.type +
"\n\nLabel: " + value.label +
"\n\nPrefix: " + value.ontology_name +
"\n\nDescription: " + value.description;
} else {
hoverText = "Type: " + value.type +
"\n\nLabel: " + value.label +
"\n\nPrefix > Short form: " + value.ontology_name + " > " + value.short_form +
"\n\nDescription: " + value.description;
}
} else {
if (value.type === "ontology") {
hoverText = "Type: " + value.type +
"\n\nLabel: " + value.label +
"\n\nPrefix: " + value.ontology_name;
} else {
hoverText = "type: " + value.type +
"\n\nLabel: " + value.label +
"\n\nPrefix > Short form: " + value.ontology_name + " > " + value.short_form;
jusa3 marked this conversation as resolved.
Show resolved Hide resolved
}
hoverText += `\n\nDescription: ${value.description}`;
}
if (showApiSource && value.source && value.source !== ""){
hoverText += "\n\nSource: " + value.source;
}

const renderOntology = () => {
Expand Down Expand Up @@ -120,11 +108,25 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
colorFirst={"primary"}
colorSecond={"success"}
/>
{!singleSuggestionRow && value.description ?
<>
{showApiSource && value.source && value.source !== "" &&
<span
className="euiBadge"
style={{
jusa3 marked this conversation as resolved.
Show resolved Hide resolved
backgroundColor: "black",
color: "white",
display: "inline-block",
marginLeft: "10px"
}}
>
{"Source: " + value.source}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it necessary to see the full source API address at first glance?

Would it be more user friendly to just show OLS or SKOSMOS or ONTOPORTAL as the badge? The full source address is then shown in the hover.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the correct badge to use is the question. Like "OLS" as the platform name or "TIB" and "ZBmed" as the provider organizations?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah true. But leaving the end-user with the URL of the API doesn't make sense to me. Maybe both (provider and platform) are interesting, but in a presentation that is easy to read. Furthermore, a badge with a long address might lead to overflow of the line. We have use cases that need a small layout (e.g. #98).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean, this is a general point for the Gateway too. At the moment, it expects "ontoportal, ols, skosmos" as the databases. Is this the use-case? I think we should consider that maybe one wants to search based on the provider like zbmed. Do users care more about the software platform or the provider Org?

cc: @syphax-bouazzouni

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe filtering should be allowed for both, provider and platform. Question is, what information do we present on the small space in the autocomplete drop down menu. I'm not sure anymore, if the user needs the software platform information at all. Also the BreadcrumbWidget, especially the short form (mostly a big number) may not be ideal. Maybe we should ask an end-user/create some use cases.

</span>
}
{!singleSuggestionRow && value.description &&
<>
<br />
{value.description.substring(0, 40) + "..."}
</> : ""}
</>
}
</span>
</EuiHealth>
</span>
Expand Down Expand Up @@ -181,7 +183,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
ontology_name: selection.getOntologyId(),
type: selection.getType(),
short_form: selection.getShortForm(),
description: selection.getDescription()
description: selection.getDescription(),
source: selection.getApiSource()
},
});
}
Expand All @@ -200,7 +203,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
ontology_name: "",
type: "",
short_form: "",
description: ""
description: "",
source: ""
}
});
}
Expand Down Expand Up @@ -246,7 +250,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
ontology_name: selection.getOntologyId(),
type: selection.getType(),
short_form: selection.getShortForm(),
description: selection.getDescription()
description: selection.getDescription(),
source: selection.getApiSource()
}
})
));
Expand All @@ -270,7 +275,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
ontology_name: "",
type: "",
short_form: x.value.short_form,
description: x.value.description
description: x.value.description,
source: x.value.source
};
} else if (x.value.iri == "") {
return {
Expand All @@ -279,7 +285,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
ontology_name: "",
type: "",
short_form: "",
description: ""
description: "",
source: ""
};
} else {
return {
Expand All @@ -288,7 +295,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
ontology_name: x.value.ontology_name,
type: x.value.type,
short_form: x.value.short_form,
description: x.value.description
description: x.value.description,
source: x.value.source
};
}
})
Expand Down Expand Up @@ -319,7 +327,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
ontology_name: "",
type: "",
short_form: "",
description: ""
description: "",
source: ""
}
};

Expand Down Expand Up @@ -370,6 +379,7 @@ function WrappedAutocompleteWidget(props: AutocompleteWidgetProps) {
allowCustomTerms={props.allowCustomTerms}
ts4nfdiGateway={props.ts4nfdiGateway}
singleSuggestionRow={props.singleSuggestionRow}
showApiSource={props.showApiSource}
/>
</QueryClientProvider>
</EuiProvider>
Expand Down
2 changes: 2 additions & 0 deletions src/components/widgets/AutocompleteWidget/AutocompleteWidgetHTML.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ window['SemLookPWidgets'].createAutocomplete(
singleSelection:${args.singleSelection},
ts4nfdiGateway:${args.ts4nfdiGateway},
singleSuggestionRow:${args.singleSuggestionRow},
showApiSource:${args.showApiSource},
},
document.querySelector('#autocomplete_widget_container_${num}')
)
Expand All @@ -50,6 +51,7 @@ export {
UseAPIGatewayWithOLS,
UseAPIGatewayWithOntoPortal,
UseAPIGatewayWithSkosmos,
HideApiSourceApiGateway,
WithDefaultsCompact,
WithValue,
WithCustomValue,
Expand Down
12 changes: 12 additions & 0 deletions src/components/widgets/AutocompleteWidget/AutocompleteWidgetStories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export const AutocompleteWidgetStoryArgTypes = {
},
singleSuggestionRow: {
required: false,
},
showApiSource: {
required: false,
}
}
}
Expand Down Expand Up @@ -90,6 +93,15 @@ export const UseAPIGatewayWithSkosmos = {
},
}

export const HideApiSourceApiGateway = {
args: {
api: "https://ts4nfdi-api-gateway.prod.km.k8s.zbmed.de/api-gateway/",
ts4nfdiGateway: true,
showApiSource: false,
parameter: "database=ols&fieldList=description,label,iri,ontology_name,type,short_form"
},
}

export const WithDefaultsCompact = {
args: {
singleSuggestionRow: true
Expand Down
1 change: 1 addition & 0 deletions src/model/interfaces/SelectResult.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ export interface SelectResult {
getDescription(): string;
getOntologyId(): string;
getShortForm(): string;
getApiSource(): string;
}
4 changes: 4 additions & 0 deletions src/model/ols-model/OLSSelectResult.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,9 @@ export class OLSSelectResult implements SelectResult {
return this.properties["short_form"];
}

getApiSource(): string {
return "";
}


}
3 changes: 3 additions & 0 deletions src/model/ts4nfdi-model/Ts4nfdiSearchResult.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,8 @@ export class Ts4nfdiSearchResult implements SelectResult {
return this.properties["short_form"];
}

getApiSource(): string {
return this.properties["source"];
}

}
Loading