Skip to content

Commit 5815785

Browse files
jmjuanesjmjuanes
committed
wc: migrate study-vairant-config to new token-dropdown
1 parent 7b18c95 commit 5815785

File tree

1 file changed

+84
-78
lines changed

1 file changed

+84
-78
lines changed

‎src/webcomponents/study/configuration/study-variant-config.js‎

Lines changed: 84 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,15 @@
1414
* limitations under the License.
1515
*/
1616

17-
import {LitElement, html, nothing} from "lit";
17+
import {LitElement, html} from "lit";
1818
import "./config-list-update.js";
19-
import LitUtils from "../../commons/utils/lit-utils.js";
20-
import UtilsNew from "../../../core/utils-new.js";
19+
import "../../commons/forms/token-dropdown.js";
2120

2221
export default class StudyVariantConfig extends LitElement {
2322

2423
constructor() {
2524
super();
26-
this._init();
25+
this.#init();
2726
}
2827

2928
createRenderRoot() {
@@ -44,20 +43,20 @@ export default class StudyVariantConfig extends LitElement {
4443
};
4544
}
4645

47-
_init() {
48-
// console.log("init study variant config");
49-
50-
}
51-
52-
connectedCallback() {
53-
super.connectedCallback();
54-
this._config = {...this.getDefaultConfig(), ...this.config};
46+
#init() {
47+
this._config = this.getDefaultConfig();
5548
}
5649

5750
update(changedProperties) {
5851
if (changedProperties.has("variantEngineConfig")) {
5952
this.variantEngineConfigObserver();
6053
}
54+
if (changedProperties.has("config")) {
55+
this._config = {
56+
...this.getDefaultConfig(),
57+
...this.config,
58+
};
59+
}
6160
super.update(changedProperties);
6261
}
6362

@@ -167,7 +166,6 @@ export default class StudyVariantConfig extends LitElement {
167166
onSubmit() {
168167
// operation/variant/configure
169168
console.log("submit variant configs", this.variantEngineConfig);
170-
171169
}
172170

173171
configVariant(key, item, modal) {
@@ -223,10 +221,11 @@ export default class StudyVariantConfig extends LitElement {
223221
width: 12,
224222
style: "padding-left: 0px",
225223
render: variant => html`
226-
<select-token-filter-static
227-
.data=${variant}
224+
<token-dropdown
225+
.values=${variant}
228226
.value="${variant?.join(",")}">
229-
</select-token-filter-static>`
227+
</token-dropdown>
228+
`,
230229
}
231230
},
232231
{
@@ -240,10 +239,11 @@ export default class StudyVariantConfig extends LitElement {
240239
width: 12,
241240
style: "padding-left: 0px",
242241
render: data => html`
243-
<select-token-filter-static
244-
.data=${data}
242+
<token-dropdown
243+
.values=${data}
245244
.value="${data?.join(",")}">
246-
</select-token-filter-static>`
245+
</token-dropdown>
246+
`,
247247
}
248248
},
249249
{
@@ -262,7 +262,8 @@ export default class StudyVariantConfig extends LitElement {
262262
.node=${node}
263263
.data="${{items: valuesMapping}}"
264264
.config=${this.configVariant("valuesMapping", {}, true)}>
265-
</list-update>`;
265+
</list-update>
266+
`;
266267
}
267268
}
268269
},
@@ -302,10 +303,11 @@ export default class StudyVariantConfig extends LitElement {
302303
type: "custom",
303304
display: {
304305
render: data => html `
305-
<select-token-filter-static
306-
.data=${data}
306+
<token-dropdown
307+
.values=${data}
307308
.value="${data?.join(",")}">
308-
</select-token-filter-static>`
309+
</token-dropdown>
310+
`,
309311
}
310312
}
311313
]
@@ -329,7 +331,8 @@ export default class StudyVariantConfig extends LitElement {
329331
.node=${node}
330332
.data="${{items: variant}}"
331333
.config=${this.configVariant("populations", {title: "study", subtitle: "population"}, true)}>
332-
</list-update>`
334+
</list-update>
335+
`,
333336
}
334337
},
335338
{
@@ -343,10 +346,11 @@ export default class StudyVariantConfig extends LitElement {
343346
width: 12,
344347
style: "padding-left: 0px",
345348
render: data => html`
346-
<select-token-filter-static
347-
.data=${data}
349+
<token-dropdown
350+
.values=${data}
348351
.value="${data?.join(",")}">
349-
</select-token-filter-static>`
352+
</token-dropdown>
353+
`,
350354
}
351355
},
352356
]
@@ -390,10 +394,11 @@ export default class StudyVariantConfig extends LitElement {
390394
width: 12,
391395
style: "padding-left: 0px",
392396
render: variant => html`
393-
<select-token-filter-static
394-
.data=${variant}
397+
<token-dropdown
398+
.values=${variant}
395399
.value="${variant?.join(",")}">
396-
</select-token-filter-static>`
400+
</token-dropdown>
401+
`,
397402
}
398403
},
399404
{
@@ -411,7 +416,8 @@ export default class StudyVariantConfig extends LitElement {
411416
.node=${node}
412417
.data="${{items: valuesMapping}}"
413418
.config=${this.configVariant("valuesMapping", {}, true)}>
414-
</list-update>`;
419+
</list-update>
420+
`;
415421
}
416422
}
417423
},
@@ -469,6 +475,53 @@ export default class StudyVariantConfig extends LitElement {
469475
};
470476
}
471477

478+
render() {
479+
if (!this.variantEngineConfig) {
480+
// If the study does not have a configuration
481+
// It'll create a new configuration object to add value.
482+
const indexFieldConfiguration = {
483+
source: "",
484+
key: "",
485+
type: "",
486+
values: [],
487+
valuesMapping: {},
488+
nullable: false
489+
};
490+
491+
this.variantEngineConfig = {
492+
sampleIndex: {
493+
fileIndexConfiguration: {
494+
customFields: [],
495+
},
496+
annotationIndexConfiguration: {
497+
populationFrequency: {
498+
populations: [],
499+
thresholds: []
500+
},
501+
biotype: {...indexFieldConfiguration},
502+
consequenceType: {...indexFieldConfiguration},
503+
clinicalSource: {...indexFieldConfiguration},
504+
clinicalSignificance: {...indexFieldConfiguration},
505+
transcriptFlagIndexConfiguration: {...indexFieldConfiguration}
506+
}
507+
}
508+
};
509+
510+
}
511+
return html`
512+
<div style="margin: 25px 40px">
513+
<data-form
514+
.data=${this.variantEngineConfig}
515+
.config=${this._config}
516+
@fieldChange="${e => this.onFieldChange(e)}"
517+
@addValues="${e => this.onAddValues(e)}"
518+
@clear="${this.onClear}"
519+
@submit="${this.onSubmit}">
520+
</data-form>
521+
</div>
522+
`;
523+
}
524+
472525
getDefaultConfig() {
473526
return {
474527
type: "form",
@@ -550,53 +603,6 @@ export default class StudyVariantConfig extends LitElement {
550603
};
551604
}
552605

553-
render() {
554-
if (!this.variantEngineConfig) {
555-
// If the study does not have a configuration
556-
// It'll create a new configuration object to add value.
557-
const indexFieldConfiguration = {
558-
source: "",
559-
key: "",
560-
type: "",
561-
values: [],
562-
valuesMapping: {},
563-
nullable: false
564-
};
565-
566-
this.variantEngineConfig = {
567-
sampleIndex: {
568-
fileIndexConfiguration: {
569-
customFields: [],
570-
},
571-
annotationIndexConfiguration: {
572-
populationFrequency: {
573-
populations: [],
574-
thresholds: []
575-
},
576-
biotype: {...indexFieldConfiguration},
577-
consequenceType: {...indexFieldConfiguration},
578-
clinicalSource: {...indexFieldConfiguration},
579-
clinicalSignificance: {...indexFieldConfiguration},
580-
transcriptFlagIndexConfiguration: {...indexFieldConfiguration}
581-
}
582-
}
583-
};
584-
585-
}
586-
return html`
587-
<div style="margin: 25px 40px">
588-
<data-form
589-
.data=${this.variantEngineConfig}
590-
.config=${this._config}
591-
@fieldChange="${e => this.onFieldChange(e)}"
592-
@addValues="${e => this.onAddValues(e)}"
593-
@clear="${this.onClear}"
594-
@submit="${this.onSubmit}">
595-
</data-form>
596-
</div>
597-
`;
598-
}
599-
600606
}
601607

602608
customElements.define("study-variant-config", StudyVariantConfig);

0 commit comments

Comments
 (0)