Skip to content

Commit

Permalink
wc: Improvement variant-interpreter-grid style #TASK-5060
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rodielm
Rodielm committed Sep 26, 2023
1 parent 53104fe commit 0ffac41
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 57 deletions.
40 changes: 23 additions & 17 deletions src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,18 +345,8 @@ class VariantInterpreterBrowserTemplate extends LitElement {
this.requestUpdate();
}

render() {
// Check Project exists
if (!this.opencgaSession?.study) {
return html`
<div class="guard-page">
<i class="fas fa-lock fa-5x"></i>
<h3>No project available to browse. Please login to continue</h3>
</div>
`;
}

return html`
renderStyles() {
return html `
<style>
.prioritization-center {
margin: auto;
Expand Down Expand Up @@ -394,6 +384,22 @@ class VariantInterpreterBrowserTemplate extends LitElement {
margin: 20px 0;
}
</style>
`;
}

render() {
// Check Project exists
if (!this.opencgaSession?.study) {
return html`
<div class="guard-page">
<i class="fas fa-lock fa-5x"></i>
<h3>No project available to browse. Please login to continue</h3>
</div>
`;
}

return html`
${this._config.showTitle ? html`
<tool-header
Expand All @@ -404,17 +410,17 @@ class VariantInterpreterBrowserTemplate extends LitElement {
${this.clinicalAnalysis.interpretation.locked ? html`
<div class="row">
<div class="panel panel-warning col-sm-8 col-sm-offset-2" style="padding: 0">
<div class="panel-heading" style="font-size: 1.1em">
<div class="card text-bg-warning col-sm-8 offset-sm-2 p-0">
<div class="card-header" style="font-size: 1.1em">
<label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
<span style="font-style: italic;">Case Info >> Interpretation Manager</span>.
<span class="fst-italic">Case Info >> Interpretation Manager</span>.
</div>
</div>
</div>` : null
}
<div class="row">
<div class="col-md-2 mb-3">
<div class="col-2">
<div class="d-grid gap-2 mb-3 cy-search-button-wrapper">
<button type="button" class="btn btn-primary btn-block" ?disabled="${!this.searchActive}" @click="${this.onSearch}">
<i class="fa fa-search" aria-hidden="true"></i>
Expand All @@ -434,7 +440,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
</variant-browser-filter>
</div> <!-- Close col-md-2 -->
<div class="col-md-10">
<div class="col-10">
<div>
<variant-interpreter-browser-toolbar
.clinicalAnalysis="${this.clinicalAnalysis}"
Expand Down
45 changes: 21 additions & 24 deletions src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import VariantGridFormatter from "../variant-grid-formatter.js";
import UtilsNew from "../../../core/utils-new.js";
import BioinfoUtils from "../../../core/bioinfo/bioinfo-utils.js";


export default class VariantInterpreterGridFormatter {

static roleInCancerFormatter(value, row, index) {
Expand Down Expand Up @@ -123,23 +122,21 @@ export default class VariantInterpreterGridFormatter {
const clinicalSignificance = CLINICAL_SIGNIFICANCE_SETTINGS[re.classification.clinicalSignificance].id;
clinicalSignificanceHtml = `
<div style="margin: 5px 0px; color: ${CLINICAL_SIGNIFICANCE_SETTINGS[re.classification.clinicalSignificance].color}">${clinicalSignificance}</div>
<div class="help-block">${re.classification.acmg.map(acmg => acmg.classification).join(", ")}</div>
<div class="text-body-secondary">${re.classification.acmg.map(acmg => acmg.classification).join(", ")}</div>
`;
clinicalSignificanceTooltipText = `<div class='col-md-12 predictionTooltip-inner' style='padding: 0px'>
<form class='form-horizontal'>
<div class='form-group' style='margin: 0px 2px'>
<label class='col-md-5'>ACMG</label>
<div class='col-md-7'>${re.classification.acmg.join(", ")}</div>
</div>
<div class='form-group' style='margin: 0px 2px'>
<label class='col-md-5'>ACMG Tier</label>
<div class='col-md-7'>${re.classification.tier}</div>
</div>
</form>
</div>`;
clinicalSignificanceTooltipText = `<div class='p-1' style='width: 250px;'>
<div class='row mb-2'>
<div class='col-6'>ACMG</div>
<div class='col-6'>${re.classification?.acmg?.join(", ")}</div>
</div>
<div class='row mb-2'>
<div class='col-6'>ACMG Tier</div>
<div class='col-6'>${re.classification.tier}</div>
</div>
</div>`;
}
}
return `<a class='predictionTooltip' tooltip-title="Classification" tooltip-text="${clinicalSignificanceTooltipText}">
return `<a class='predictionTooltip text-decoration-none' tooltip-title="Classification" tooltip-text="${clinicalSignificanceTooltipText}">
${clinicalSignificanceHtml}
</a>`;
}
Expand Down Expand Up @@ -320,7 +317,7 @@ export default class VariantInterpreterGridFormatter {
}
</div>
${gene.modesOfInheritance ? `
<div class="help-block" style="margin: 5px 0" title="Panel Mode of Inheritance of gene ${gene.name}">${gene.modesOfInheritance.join(", ")}</div>
<div class="text-body-secondary" style="margin: 5px 0" title="Panel Mode of Inheritance of gene ${gene.name}">${gene.modesOfInheritance.join(", ")}</div>
` : ""
}
${gene.confidence ? `
Expand Down Expand Up @@ -350,7 +347,7 @@ export default class VariantInterpreterGridFormatter {
</div>
` : ""
}
<div class="help-block">${re.classification.acmg?.map(acmg => acmg.classification || acmg)?.join(", ")}</div>
<div class="text-body-secondary">${re.classification.acmg?.map(acmg => acmg.classification || acmg)?.join(", ")}</div>
`;
}

Expand All @@ -364,7 +361,7 @@ export default class VariantInterpreterGridFormatter {
</div>
` : ""
}
<div class="help-block">${re.review.acmg?.map(acmg => acmg.classification)?.join(", ")}</div>
<div class="text-body-secondary">${re.review.acmg?.map(acmg => acmg.classification)?.join(", ")}</div>
`;
}

Expand Down Expand Up @@ -514,9 +511,9 @@ export default class VariantInterpreterGridFormatter {

// Get tooltip text
const tooltipText = VariantInterpreterGridFormatter._getSampleGenotypeTooltipText(row, sampleEntry, file);
resultHtml += `<a class="zygositySampleTooltip" tooltip-title="Variant Call Information" tooltip-text='${tooltipText}'>
${content}
</a><br>`;
resultHtml += `<a class="zygositySampleTooltip text-decoration-none" tooltip-title="Variant Call Information" tooltip-text='${tooltipText}'>
${content}
</a><br>`;
}
}

Expand Down Expand Up @@ -992,12 +989,12 @@ export default class VariantInterpreterGridFormatter {
return `
<div>
${config?.showEditReview ? `
<button id="${prefix}${row.id}VariantReviewButton" class="btn btn-link" data-index="${index}" data-variant-id="${row.id}" ${disabled}>
<i class="fa fa-edit icon-padding" aria-hidden="true"></i>&nbsp;Edit ...
<button id="${prefix}${row.id}VariantReviewButton" class="btn btn-link text-decoration-none" data-index="${index}" data-variant-id="${row.id}" ${disabled}>
<i class="fa fa-edit icon-padding" aria-hidden="true"></i>Edit ...
</button>
`: ""}
${checked && row?.status ? `
<div class="help-block" style="margin: 5px 0">${row.status}</div>
<div class="text-body-secondary" style="margin: 5px 0">${row.status}</div>
` : ""}
${checked && (row.comments?.length > 0 || row.discussion?.text) ? `
<div style="">
Expand Down
14 changes: 9 additions & 5 deletions src/webcomponents/variant/interpretation/variant-interpreter-grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -847,10 +847,9 @@ export default class VariantInterpreterGrid extends LitElement {
<div class="dropdown">
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
<i class="fas fa-toolbox" aria-hidden="true"></i>
<span>Actions</span>
<span class="caret" style="margin-left: 5px"></span>
Actions
</button>
<ul class="dropdown-menu dropdown-menu-end
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a id="${reviewId}" href="javascript: void 0" class="dropdown-item reviewButton" data-action="edit" ${reviewDisabled}>
<i class="fas fa-edit reviewButton" aria-hidden="true"></i> Edit ...
Expand Down Expand Up @@ -1523,7 +1522,7 @@ export default class VariantInterpreterGrid extends LitElement {
return [];
}

render() {
renderStyle() {
return html`
<style>
.variant-link-dropdown:hover .dropdown-menu {
Expand All @@ -1537,6 +1536,11 @@ export default class VariantInterpreterGrid extends LitElement {
transform: scale(1.2);
}
</style>
`;
}

render() {
return html`
<opencb-grid-toolbar
.config="${this.toolbarConfig}"
Expand Down Expand Up @@ -1576,7 +1580,7 @@ export default class VariantInterpreterGrid extends LitElement {
</div>
<div class="modal fade pt-0" id="${this._prefix}EvidenceReviewModal" tabindex="-1"
role="dialog" aria-hidden="true" style="overflow-y: visible">
role="dialog" aria-hidden="true" style="overflow-y: visible">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
Expand Down
25 changes: 14 additions & 11 deletions src/webcomponents/variant/variant-grid-formatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ export default class VariantGridFormatter {
tooltipText += `
<div class="dropdown-header" style="padding-top: 5px;padding-left: 5px">External Links</div>
<div style="padding: 5px">
<a target="_blank" href="${BioinfoUtils.getVariantLink(variantId, variantRegion, "decipher")}">
<a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(variantId, variantRegion, "decipher")}">
Decipher
</a>
</div>
<div style="padding: 5px" data-cy="varsome-variant-link">
<a target="_blank" ${row.type === "COPY_NUMBER" ? `class="${"disabled"}"` : `href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "varsome", assembly)}"`}>
<a class="text-decoration-none" target="_blank" ${row.type === "COPY_NUMBER" ? `class="${"disabled"}"` : `href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "varsome", assembly)}"`}>
Varsome ${row.type === "COPY_NUMBER" ? "<small>(Disabled)</small>" : ""}
</a>
</div>
Expand All @@ -102,12 +102,12 @@ export default class VariantGridFormatter {
tooltipText += `
<div class="dropdown-header" style="padding-top: 5px;padding-left: 5px">External Genome Browsers</div>
<div style="padding: 5px">
<a target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ensembl_genome_browser", assembly)}">
<a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ensembl_genome_browser", assembly)}">
Ensembl Genome Browser
</a>
</div>
<div style="padding: 5px">
<a target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ucsc_genome_browser")}">
<a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ucsc_genome_browser")}">
UCSC Genome Browser
</a>
</div>
Expand Down Expand Up @@ -173,9 +173,9 @@ export default class VariantGridFormatter {

if (snpId) {
if (assembly.toUpperCase() === "GRCH37") {
return "<a target='_blank' href='http://grch37.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
return "<a class='text-decoration-none' target='_blank' href='http://grch37.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
} else {
return "<a target='_blank' href='http://www.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
return "<a class='text-decoration-none' target='_blank' href='http://www.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
}
}
return snpId;
Expand Down Expand Up @@ -232,8 +232,8 @@ export default class VariantGridFormatter {
// If gene contains one of the query.ct
if (geneHasQueryCt.has(geneName)) {
geneWithCtLinks.push(`<a class="gene-tooltip text-decoration-none" tooltip-title="Links" tooltip-text="${tooltipText}" style="margin-left: 2px;">
${geneName}
</a>`);
${geneName}
</a>`);
} else {
geneLinks.push(`<a class="gene-tooltip text-decoration-none" tooltip-title="Links" tooltip-text="${tooltipText}" style="margin-left: 2px;color: darkgray;font-style: italic">
${geneName}
Expand Down Expand Up @@ -282,7 +282,9 @@ export default class VariantGridFormatter {

static getGeneTooltip(geneName, assembly) {
return `
<div class='dropdown-header ps-1 pt-1'>External Links</div>
<div class='dropdown-header ps-1 mt-2 mb-1'>
External Links
</div>
<div class='p-1'>
<a class='text-decoration-none' target='_blank' href='${BioinfoUtils.getEnsemblLink(geneName, "gene", assembly)}'>Ensembl</a>
</div>
Expand All @@ -295,8 +297,9 @@ export default class VariantGridFormatter {
<div class='p-1' data-cy='varsome-gene-link'>
<a class='text-decoration-none' target='_blank' href='${BioinfoUtils.getGeneLink(geneName, "varsome", assembly)}'>Varsome</a>
</div>
<div class='dropdown-header ps-1 pt-1'>Clinical Resources</div>
<div class='dropdown-header ps-1 mt-2 mb-1'>
Clinical Resources
</div>
<hr class='dropdown-divider'>
<div class='p-1'>
<a class='text-decoration-none' target='_blank' href='${BioinfoUtils.getGeneLink(geneName, "decipher")}'>Decipher</a>
Expand Down

0 comments on commit 0ffac41

Please sign in to comment.