Skip to content

Commit

Permalink
wc - Moved style result to parent component, cellbase-search-autocomp…
Browse files Browse the repository at this point in the history 
…lete

Signed-off-by: gpveronica <[email protected]>
  • Loading branch information
@gpveronica
gpveronica committed Oct 24, 2023
1 parent 0d3eea0 commit aa1e6ca
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 45 deletions.
49 changes: 36 additions & 13 deletions src/webcomponents/commons/filters/cellbase-search-autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export default class CellbaseSearchAutocomplete extends LitElement {
count: false,
};
this.#initResourcesConfig();
this.searchField = "";
}

#initResourcesConfig() {
Expand Down Expand Up @@ -90,20 +91,13 @@ export default class CellbaseSearchAutocomplete extends LitElement {
subcategory: "gene",
operation: "search",
getSearchField: term => {
debugger
return term.startsWith("ENSG0") ? "id" : "name";
// FIXME: Query gene by id is not working! Temporarily returning ALWAYS name
// return term.startsWith("ENSG0") ? "id" : "name";
return term.startsWith("ENSG0") ? "name" : "name";
},
valueField: "name",
placeholder: "Start typing an ensemble gene ID or name...",
queryParams: {},
// CAUTION: query params depends on the resource/operation (i.e. search, info) used
// Q1: Is this component intended to use only the "search" operation?
// N1: Not all the entities in Cellbase have the search operation
// N2: I.e for the subcategory/resource Gene, we are currently using the operations:
// - /startsWith: in feature-filter.js
// - /info: in disease-panel-create.js, this.cellbaseClient.getGeneClient("", "info", "");
// Query params:
query: {},
queryParams: {}, // CAUTION: query params depends on the resource/operation (i.e. search, info) used
},
"VARIANT": {},
"PROTEIN": {},
Expand All @@ -125,6 +119,34 @@ export default class CellbaseSearchAutocomplete extends LitElement {
}

// Templating one option of dropdown
// TODO Vero: Style with default bootstrap
#viewResultStyle() {
return html `
<style>
.result-wrapper {
display: flex;
flex-direction: column;
}
.result-name-wrapper {
display: flex;
align-items: center;
}
.result-source {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 10px;
padding: 2px 4px;
color: white;
background-color: #d91c5e;
border: 1px solid #d91c5e;
border-radius: 2px;
}
</style>
`;
}

#viewResult(option) {
return option.name ? $(`
<div class="result-wrapper">
Expand Down Expand Up @@ -166,7 +188,6 @@ export default class CellbaseSearchAutocomplete extends LitElement {
}

onFilterChange(e) {
debugger
const value = e.detail.value;
const data = e.detail.data.selected ? e.detail.data : {};
if (!UtilsNew.isEmpty(data)) {
Expand Down Expand Up @@ -218,6 +239,7 @@ export default class CellbaseSearchAutocomplete extends LitElement {
const options = {};
if (params?.data?.term) {
const currentSearchField = this.RESOURCES[this.resource].getSearchField(params.data.term);
this.searchField = currentSearchField;
const queryParamsField = {
[`${currentSearchField}`]: `~/${params?.data?.term}/i`,
...queryParams,
Expand All @@ -239,7 +261,8 @@ export default class CellbaseSearchAutocomplete extends LitElement {
},
filterResults: results => this.#filterResults(results),
viewResult: result => this.#viewResult(result),
viewSelection: result => result[this._config.searchField],
viewResultStyle: () => this.#viewResultStyle(),
viewSelection: result => result[this.searchField],
};
}

Expand Down
37 changes: 5 additions & 32 deletions src/webcomponents/commons/forms/select-token-filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,10 @@ export default class SelectTokenFilter extends LitElement {
}
}
if (changedProperties.has("config")) {
this._config = {...this.getDefaultConfig(), ...this.config};
this._config = {
...this.getDefaultConfig(),
...this.config
};
}
super.update(changedProperties);
}
Expand Down Expand Up @@ -233,13 +236,11 @@ export default class SelectTokenFilter extends LitElement {
// join by "," only as the operator (, or ;) is not a concern of this component.
// this component only needs to split by all separators (defined in config) in updated() fn,
// but it doesn't need to reckon which one is being used at the moment (some tokens can contain commas (e.g. in HPO))
debugger
const data = this.select.select2("data") || [];
const selection = data.map(el => el[this.keyObject]).join(",");
// Note 20231021 Vero:
// Bubbles needs to be false, since all parent components are listening to the event and dispatching it again.
// (same decision in select-field-filter.js)
debugger
LitUtils.dispatchCustomEvent(this, "filterChange", selection, {
data: e.params?.data || {},
}, null, {bubbles: false, composed: false});
Expand All @@ -257,33 +258,6 @@ export default class SelectTokenFilter extends LitElement {
</span>`;
}

renderStyle() {
return html `
<style>
.result-wrapper {
display: flex;
flex-direction: column;
}
.result-name-wrapper {
display: flex;
align-items: center;
}
.result-source {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 10px;
padding: 2px 4px;
color: white;
background-color: #d91c5e;
border: 1px solid #d91c5e;
border-radius: 2px;
}
</style>
`;
}

render() {
if (this._config?.fileUpload) {
return html`
Expand All @@ -300,9 +274,8 @@ export default class SelectTokenFilter extends LitElement {
</form>
`;
} else {
// TODO Vero: (1) Make style configurable, remove from here, (2) Default bootstrap
return html`
${this.renderStyle()}
${this._config.viewResultStyle?.() ?? nothing}
<div>
<div class="input-group">
<select
Expand Down

0 comments on commit aa1e6ca

Please sign in to comment.