wc: replace select clinical-interpreter & variant-review #TASK-5070

opencb · Nov 15, 2023 · 83953ec · 83953ec
1 parent 8a72400
commit 83953ec
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/src/webcomponents/clinical/interpretation/clinical-interpretation-editor.js b/src/webcomponents/clinical/interpretation/clinical-interpretation-editor.js
@@ -21,7 +21,7 @@ import ClinicalAnalysisUtils from "../clinical-analysis-utils.js";
 import "../clinical-analysis-comment-editor.js";
 import "../../commons/forms/data-form.js";
 import "../../commons/forms/text-field-filter.js";
-
+import "../../commons/forms/select-field-filter2.js";
 
 class ClinicalInterpretationEditor extends LitElement {
 
@@ -87,7 +87,7 @@ class ClinicalInterpretationEditor extends LitElement {
     opencgaSessionObserver() {
         this._users = [];
         if (this.opencgaSession && this.opencgaSession.study) {
-            for (let group of this.opencgaSession.study.groups) {
+            for (const group of this.opencgaSession.study.groups) {
                 if (group.id === "@members") {
                     this._users.push(...group.userIds.filter(user => user !== "*"));
                 }
@@ -118,13 +118,18 @@ class ClinicalInterpretationEditor extends LitElement {
     renderStatus(status) {
         return html`
             <div class="">
-                <select-field-filter .data="${ClinicalAnalysisUtils.getInterpretationStatuses()}" .value="${status.id}"
-                                     .classes="${this.updateParams.status ? "updated" : ""}"
-                                     @filterChange="${e => {e.detail.param = "interpretation.status.id"; this.onFieldChange(e)}}">
-                </select-field-filter>
-                ${status.description
-                        ? html`<span class="help-block" style="padding: 0px 5px">${status.description}</span>`
-                        : null
+                <select-field-filter2
+                    .data="${ClinicalAnalysisUtils.getInterpretationStatuses()}"
+                    .value="${status.id}"
+                    .classes="${this.updateParams.status ? "updated" : ""}"
+                    @filterChange="${e => {
+                        e.detail.param = "interpretation.status.id";
+                        this.onFieldChange(e);
+                    }}">
+                </select-field-filter2>
+                ${status.description ?
+                        html`<span class="help-block" style="padding: 0px 5px">${status.description}</span>` :
+            null
                 }
             </div>`;
     }
@@ -133,7 +138,7 @@ class ClinicalInterpretationEditor extends LitElement {
         switch (e.detail.param) {
             case "interpretation.status.id":
             case "interpretation.analyst.id":
-                let field = e.detail.param.split(".")[1];
+                const field = e.detail.param.split(".")[1];
                 if (this._clinicalAnalysis.interpretation[field]?.id !== e.detail.value && e.detail.value !== null) {
                     this.clinicalAnalysis.interpretation[field].id = e.detail.value;
                     this.updateParams[field] = {
@@ -159,7 +164,7 @@ class ClinicalInterpretationEditor extends LitElement {
     }
 
     onCommentChange(e) {
-        this.commentsUpdate = e.detail
+        this.commentsUpdate = e.detail;
     }
 
     getDefaultConfig() {
@@ -208,8 +213,8 @@ class ClinicalInterpretationEditor extends LitElement {
                             type: "custom",
                             display: {
                                 render: proband => {
-                                    let sex = (proband.sex && proband.sex !== "UNKNOWN") ? `(${proband.sex})` : "";
-                                    let sampleIds = proband.samples.map(sample => sample.id).join(", ");
+                                    const sex = (proband.sex && proband.sex !== "UNKNOWN") ? `(${proband.sex})` : "";
+                                    const sampleIds = proband.samples.map(sample => sample.id).join(", ");
                                     return html`
                                         <span style="padding-right: 25px">${proband.id} ${sex}</span>
                                         <span style="font-weight: bold; padding-right: 10px">Sample(s):</span><span>${sampleIds}</span>`;
@@ -373,11 +378,12 @@ class ClinicalInterpretationEditor extends LitElement {
         }
 
         return html`
-            <data-form  .data="${this.clinicalAnalysis}"
-                        .config="${this._config}"
-                        @fieldChange="${e => this.onFieldChange(e)}"
-                        @clear="${this.onClear}"
-                        @submit="${this.onRun}">
+            <data-form
+                .data="${this.clinicalAnalysis}"
+                .config="${this._config}"
+                @fieldChange="${e => this.onFieldChange(e)}"
+                @clear="${this.onClear}"
+                @submit="${this.onRun}">
             </data-form>
         `;
     }

diff --git a/src/webcomponents/clinical/interpretation/clinical-interpretation-variant-evidence-review.js b/src/webcomponents/clinical/interpretation/clinical-interpretation-variant-evidence-review.js
@@ -18,7 +18,7 @@ import {LitElement, html} from "lit";
 import LitUtils from "../../commons/utils/lit-utils.js";
 import UtilsNew from "../../../core/utils-new.js";
 import "../../commons/filters/acmg-filter.js";
-import "../../commons/forms/select-field-filter.js";
+import "../../commons/forms/select-field-filter2.js";
 
 export default class ClinicalInterpretationVariantEvidenceReview extends LitElement {
 
@@ -149,11 +149,11 @@ export default class ClinicalInterpretationVariantEvidenceReview extends LitElem
                         type: "custom",
                         display: {
                             render: clinicalSignificance => html`
-                                <select-field-filter
+                                <select-field-filter2
                                     .data=${CLINICAL_SIGNIFICANCE}
                                     .value=${(clinicalSignificance || "").toLowerCase()}
                                     @filterChange="${e => this.onFieldChange(e, "clinicalSignificance")}">
-                                </select-field-filter>
+                                </select-field-filter2>
                             `,
                             defaultValue: "",
                         },

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
@@ -1559,9 +1559,9 @@ export default class VariantInterpreterGrid extends LitElement {
 
             <div class="modal fade" id="${this._prefix}ReviewSampleModal" tabindex="-1"
                 role="dialog" aria-hidden="true" style="padding-top:0; overflow-y: visible">
-                <div class="modal-dialog" style="width: 768px">
+                <div class="modal-dialog modal-lg" style="width: 768px">
                     <div class="modal-content">
-                        <div class="modal-header" style="padding: 5px 15px">
+                        <div class="modal-header">
                             <h3>Review Variant</h3>
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js
@@ -932,7 +932,6 @@ export default class VariantInterpreterRearrangementGrid extends LitElement {
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
                         <div class="modal-header" style="padding: 5px 15px">
-
                             <h3>Review Variant</h3>
                         </div>
                         ${this.variantsReview ? html`