@@ -124,5 +125,4 @@ export default class ModalUtils {
modalHeader.style.cursor = "move";
}
-
}
diff --git a/src/webcomponents/commons/opencb-grid-toolbar.js b/src/webcomponents/commons/opencb-grid-toolbar.js
index 663ac44c00..eaef8b6ccc 100644
--- a/src/webcomponents/commons/opencb-grid-toolbar.js
+++ b/src/webcomponents/commons/opencb-grid-toolbar.js
@@ -149,13 +149,6 @@ export default class OpencbGridToolbar extends LitElement {
`) : nothing}
- ${this._settings.showRefresh ? html`
-
- ` :nothing}
-
-
${this._config?.create && (this._settings.showCreate || this._settings.showNew) ? html`
diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js
index a44c5e54b2..762ee342bc 100644
--- a/src/webcomponents/disease-panel/disease-panel-grid.js
+++ b/src/webcomponents/disease-panel/disease-panel-grid.js
@@ -67,22 +67,23 @@ export default class DiseasePanelGrid extends LitElement {
this.gridId = this._prefix + this.COMPONENT_ID;
this.active = true;
this._config = this.getDefaultConfig();
- this.displayConfigDefault = {
- header: {
- horizontalAlign: "center",
- verticalAlign: "bottom",
- },
- };
}
- updated(changedProperties) {
- if ((changedProperties.has("opencgaSession") ||
+ update(changedProperties) {
+ if (changedProperties.has("opencgaSession") ||
changedProperties.has("toolId") ||
changedProperties.has("query") ||
- changedProperties.has("config") ||
- changedProperties.has("active")) && this.active) {
+ changedProperties.has("config")) {
this.propertyObserver();
}
+
+ super.update(changedProperties);
+ }
+
+ updated(changedProperties) {
+ if (changedProperties.size > 0 && this.active) {
+ this.renderTable();
+ }
}
propertyObserver() {
@@ -107,12 +108,12 @@ export default class DiseasePanelGrid extends LitElement {
modalDraggable: true,
modalCyDataName: "modal-create",
},
- render: () => html `
+ render: () => html`
- `
+ `,
}
// Uncomment in case we need to change defaults
// export: {
@@ -141,18 +142,14 @@ export default class DiseasePanelGrid extends LitElement {
// `
// }
};
-
- this.renderTable();
}
renderTable() {
- // If this.diseasePanel is provided as property we render the array directly
if (this.diseasePanels?.length > 0) {
this.renderLocalTable();
} else {
this.renderRemoteTable();
}
- this.requestUpdate();
}
renderRemoteTable() {
@@ -171,8 +168,6 @@ export default class DiseasePanelGrid extends LitElement {
sidePagination: "server",
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
-
- // Table properties
uniqueId: "id",
pagination: this._config.pagination,
pageSize: this._config.pageSize,
@@ -183,7 +178,7 @@ export default class DiseasePanelGrid extends LitElement {
detailView: this._config.detailView,
gridContext: this,
formatLoadingMessage: () => String.raw`
`,
- ajax: async params => {
+ ajax: params => {
this.filters = {
study: this.opencgaSession.study.fqn,
limit: params.data.limit,
@@ -194,13 +189,13 @@ export default class DiseasePanelGrid extends LitElement {
// Store the current filters
this.lastFilters = {...this.filters};
- try {
- const data = await this.fetchDiseasePanels(this.filters);
- params.success(data);
- } catch (e) {
- console.log(e);
- params.error(e);
- }
+ this.opencgaSession.opencgaClient.panels()
+ .search(this.filters)
+ .then(response => params.success(response))
+ .catch(error => {
+ console.error(error);
+ params.error(error);
+ });
},
responseHandler: response => {
const result = this.gridCommons.responseHandler(response, $(this.table).bootstrapTable("getOptions"));
@@ -238,16 +233,6 @@ export default class DiseasePanelGrid extends LitElement {
}
}
- async fetchDiseasePanels(query) {
- try {
- return await this.opencgaSession.opencgaClient.panels()
- .search(query);
- } catch (e) {
- console.error(e);
- await Promise.reject(e);
- }
- }
-
renderLocalTable() {
this.table = $("#" + this.gridId);
this.table.bootstrapTable("destroy");
@@ -257,7 +242,6 @@ export default class DiseasePanelGrid extends LitElement {
sidePagination: "local",
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
- // Set table properties, these are read from config property
uniqueId: "id",
pagination: this._config.pagination,
pageSize: this._config.pageSize,
@@ -270,7 +254,7 @@ export default class DiseasePanelGrid extends LitElement {
onPostBody: data => {
// We call onLoadSuccess to select first row
this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 1);
- }
+ },
});
}
@@ -372,64 +356,46 @@ export default class DiseasePanelGrid extends LitElement {
idLinkHtml = `
${row?.id ?? "-"}
- `;
+
+ `;
}
return `
`;
+
+ `;
},
- halign: this.displayConfigDefault.header.horizontalAlign,
- visible: this.gridCommons.isColumnVisible("name")
+ halign: "center",
+ visible: this.gridCommons.isColumnVisible("name"),
},
- // {
- // id: "id",
- // title: "Panel ID",
- // field: "id",
- // rowspan: 2,
- // colspan: 1,
- // formatter: (value, row) => {
- // if (row?.source && row?.source?.project === "PanelApp") {
- // return String.raw`
- //
- // ${row?.id ?? "-"}
- // `;
- // }
- // return row?.id ?? "-";
- // },
- // halign: this.displayConfigDefault.header.horizontalAlign,
- // visible: this.gridCommons.isColumnVisible("id")
- // },
{
id: "disorders",
title: "Disorders",
field: "disorders",
formatter: disorders => CatalogGridFormatter.disorderFormatter(disorders),
- halign: this.displayConfigDefault.header.horizontalAlign,
- visible: this.gridCommons.isColumnVisible("disorders")
+ halign: "center",
+ visible: this.gridCommons.isColumnVisible("disorders"),
},
{
id: "stats",
title: "Stats",
field: "stats",
- formatter: stats => {
- return `
-
-
- Genes: ${stats.numberOfGenes}
-
-
- Regions: ${stats.numberOfRegions}
-
-
- Variants: ${stats.numberOfVariants}
-
+ formatter: stats => `
+
+
+ Genes: ${stats.numberOfGenes}
- `;
- },
+
+ Regions: ${stats.numberOfRegions}
+
+
+ Variants: ${stats.numberOfVariants}
+
+
+ `,
align: "center",
- visible: this.gridCommons.isColumnVisible("stats")
+ visible: this.gridCommons.isColumnVisible("stats"),
},
{
id: "source",
@@ -441,9 +407,10 @@ export default class DiseasePanelGrid extends LitElement {
let projectAndVersion = "";
if (project?.toUpperCase() === "PANELAPP") {
projectAndVersion = `
-
- ${project} ${version}
- `;
+
+ ${project} ${version}
+
+ `;
} else {
projectAndVersion = `${project || ""} ${version}`;
}
@@ -452,7 +419,7 @@ export default class DiseasePanelGrid extends LitElement {
return "-";
},
align: "center",
- visible: this.gridCommons.isColumnVisible("source")
+ visible: this.gridCommons.isColumnVisible("source"),
},
];
@@ -461,46 +428,50 @@ export default class DiseasePanelGrid extends LitElement {
id: "actions",
title: "Actions",
field: "actions",
- halign: this.displayConfigDefault.header.horizontalAlign,
- formatter: (value, row) => `
-
-
-
-
`,
+ align: "center",
+ formatter: () => {
+ const isAdmin = OpencgaCatalogUtils.isAdmin(this.opencgaSession.study, this.opencgaSession.user.id);
+ return `
+
+
+
+
+ `;
+ },
events: {
- "click a": this.onActionClick.bind(this)
+ "click a": this.onActionClick.bind(this),
},
visible: this.gridCommons.isColumnVisible("actions"),
});
@@ -561,8 +532,8 @@ export default class DiseasePanelGrid extends LitElement {
@export="${this.onDownload}"
@actionClick="${e => this.onActionClick(e)}"
@sessionPanelUpdate="${this.renderTable}">
- ` : nothing
- }
+
+ ` : nothing}
diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js
index 9802015778..2e595bdee5 100644
--- a/src/webcomponents/family/family-grid.js
+++ b/src/webcomponents/family/family-grid.js
@@ -61,22 +61,23 @@ export default class FamilyGrid extends LitElement {
this.gridId = this._prefix + this.COMPONENT_ID;
this.active = true;
this._config = this.getDefaultConfig();
- this.displayConfigDefault = {
- header: {
- horizontalAlign: "center",
- verticalAlign: "bottom",
- },
- };
}
- updated(changedProperties) {
- if ((changedProperties.has("opencgaSession") ||
+ update(changedProperties) {
+ if (changedProperties.has("opencgaSession") ||
changedProperties.has("toolId") ||
changedProperties.has("query") ||
- changedProperties.has("config") ||
- changedProperties.has("active")) && this.active) {
+ changedProperties.has("config")) {
this.propertyObserver();
}
+
+ super.update(changedProperties);
+ }
+
+ updated(changedProperties) {
+ if (changedProperties.size > 0 && this.active) {
+ this.renderTable();
+ }
}
propertyObserver() {
@@ -136,9 +137,7 @@ export default class FamilyGrid extends LitElement {
// @configChange="${this.onGridConfigChange}">
// `
// }
-
};
- this.renderTable();
}
renderTable() {
@@ -147,7 +146,6 @@ export default class FamilyGrid extends LitElement {
} else {
this.renderRemoteTable();
}
- this.requestUpdate();
}
renderRemoteTable() {
@@ -168,7 +166,6 @@ export default class FamilyGrid extends LitElement {
icons: GridCommons.GRID_ICONS,
uniqueId: "id",
silentSort: false,
- // Table properties
pagination: this._config.pagination,
pageSize: this._config.pageSize,
pageList: this._config.pageList,
@@ -180,16 +177,11 @@ export default class FamilyGrid extends LitElement {
gridContext: this,
formatLoadingMessage: () => "
",
ajax: params => {
- const sort = this.table.bootstrapTable("getOptions").sortName ? {
- sort: this.table.bootstrapTable("getOptions").sortName,
- order: this.table.bootstrapTable("getOptions").sortOrder
- } : {};
this.filters = {
study: this.opencgaSession.study.fqn,
limit: params.data.limit,
skip: params.data.offset || 0,
count: !this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1,
- ...sort,
...this.query
};
@@ -248,8 +240,8 @@ export default class FamilyGrid extends LitElement {
const result = this.gridCommons.responseHandler(response, $(this.table).bootstrapTable("getOptions"));
return result.response;
},
- onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
- onDblClickRow: (row, element, field) => {
+ onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
+ onDblClickRow: (row, element) => {
// We detail view is active we expand the row automatically.
// FIXME: Note that we use a CSS class way of knowing if the row is expand or collapse, this is not ideal but works.
if (this._config.detailView) {
@@ -260,13 +252,13 @@ export default class FamilyGrid extends LitElement {
}
}
},
- onCheck: (row, $element) => {
+ onCheck: row => {
this.gridCommons.onCheck(row.id, row);
},
onCheckAll: rows => {
this.gridCommons.onCheckAll(rows);
},
- onUncheck: (row, $element) => {
+ onUncheck: row => {
this.gridCommons.onUncheck(row.id, row);
},
onUncheckAll: rows => {
@@ -276,8 +268,6 @@ export default class FamilyGrid extends LitElement {
this.gridCommons.onLoadSuccess(data, 1);
},
onLoadError: (e, restResponse) => this.gridCommons.onLoadError(e, restResponse),
- onPostBody: data => {
- }
});
}
}
@@ -301,11 +291,11 @@ export default class FamilyGrid extends LitElement {
detailFormatter: this.detailFormatter,
gridContext: this,
formatLoadingMessage: () => "
",
- onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
+ onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
onPostBody: data => {
// We call onLoadSuccess to select first row
this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 1);
- }
+ },
});
}
@@ -428,7 +418,7 @@ export default class FamilyGrid extends LitElement {
field: "id",
formatter: familyId => `
${familyId}
`,
sortable: true,
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("id")
},
{
@@ -456,7 +446,7 @@ export default class FamilyGrid extends LitElement {
}
return html;
},
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("members")
},
{
@@ -464,7 +454,7 @@ export default class FamilyGrid extends LitElement {
title: "Disorders",
field: "disorders",
formatter: disorders => CatalogGridFormatter.disorderFormatter(disorders),
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("disorders")
},
{
@@ -472,7 +462,7 @@ export default class FamilyGrid extends LitElement {
title: "Phenotypes",
field: "phenotypes",
formatter: CatalogGridFormatter.phenotypesFormatter,
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("phenotypes")
},
{
@@ -480,7 +470,7 @@ export default class FamilyGrid extends LitElement {
title: "Case ID",
field: "attributes.OPENCGA_CLINICAL_ANALYSIS",
formatter: (value, row) => CatalogGridFormatter.caseFormatter(value, row, row.id, this.opencgaSession),
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("caseId")
},
{
@@ -489,7 +479,7 @@ export default class FamilyGrid extends LitElement {
field: "creationDate",
formatter: CatalogGridFormatter.dateFormatter,
sortable: true,
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("creationDate")
},
];
@@ -503,8 +493,9 @@ export default class FamilyGrid extends LitElement {
id: "actions",
title: "Actions",
field: "actions",
+ align: "center",
formatter: (value, row) => `
-
+ `,
events: {
"click a": this.onActionClick.bind(this)
},
@@ -615,10 +608,10 @@ export default class FamilyGrid extends LitElement {
@export="${this.onDownload}"
@actionClick="${e => this.onActionClick(e)}"
@familyCreate="${this.renderTable}">
- ` : nothing
- }
+
+ ` : nothing}
-
+
diff --git a/src/webcomponents/file/file-grid.js b/src/webcomponents/file/file-grid.js
index e86c89e24c..62961a7386 100644
--- a/src/webcomponents/file/file-grid.js
+++ b/src/webcomponents/file/file-grid.js
@@ -67,14 +67,21 @@ export default class OpencgaFileGrid extends LitElement {
this._config = this.getDefaultConfig();
}
- updated(changedProperties) {
- if ((changedProperties.has("opencgaSession") ||
+ update(changedProperties) {
+ if (changedProperties.has("opencgaSession") ||
changedProperties.has("toolId") ||
changedProperties.has("query") ||
- changedProperties.has("config") ||
- changedProperties.has("active")) && this.active) {
+ changedProperties.has("config")) {
this.propertyObserver();
}
+
+ super.update(changedProperties);
+ }
+
+ updated(changedProperties) {
+ if (changedProperties.size > 0 && this.active) {
+ this.renderTable();
+ }
}
propertyObserver() {
@@ -106,11 +113,10 @@ export default class OpencgaFileGrid extends LitElement {
- `
+
+ `,
},
};
-
- this.renderTable();
}
renderTable() {
@@ -120,7 +126,6 @@ export default class OpencgaFileGrid extends LitElement {
} else {
this.renderRemoteTable();
}
- this.requestUpdate();
}
renderRemoteTable() {
@@ -140,7 +145,6 @@ export default class OpencgaFileGrid extends LitElement {
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
uniqueId: "id",
- // Table properties
pagination: this._config.pagination,
pageSize: this._config.pageSize,
pageList: this._config.pageList,
@@ -207,9 +211,6 @@ export default class OpencgaFileGrid extends LitElement {
this.gridCommons.onLoadSuccess(data, 1);
},
onLoadError: (e, restResponse) => this.gridCommons.onLoadError(e, restResponse),
- // onPostBody: data => {
- // // Add tooltips?
- // }
});
}
}
@@ -227,8 +228,6 @@ export default class OpencgaFileGrid extends LitElement {
sidePagination: "local",
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
-
- // Set table properties, these are read from config property
uniqueId: "id",
pagination: this._config.pagination,
pageSize: this._config.pageSize,
@@ -246,7 +245,7 @@ export default class OpencgaFileGrid extends LitElement {
onPostBody: data => {
// We call onLoadSuccess to select first row
this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 2);
- }
+ },
});
}
@@ -292,13 +291,6 @@ export default class OpencgaFileGrid extends LitElement {
},
visible: this.gridCommons.isColumnVisible("name")
},
- // {
- // id: "directory",
- // title: "Directory",
- // field: "path",
- // formatter: (_, row) => "/" + row.path.replace("/" + row.name, ""),
- // visible: this.gridCommons.isColumnVisible("directory")
- // },
{
id: "sampleIds",
title: "Samples",
@@ -326,13 +318,7 @@ export default class OpencgaFileGrid extends LitElement {
id: "jobId",
title: "Job ID",
field: "jobId",
- formatter: jobId => {
- if (jobId) {
- return `
${jobId}
`;
- } else {
- return "-";
- }
- },
+ formatter: jobId => jobId || "-",
visible: this.gridCommons.isColumnVisible("jobId")
},
{
@@ -348,12 +334,6 @@ export default class OpencgaFileGrid extends LitElement {
field: "format",
visible: this.gridCommons.isColumnVisible("format")
},
- // {
- // id: "bioformat",
- // title: "Bioformat",
- // field: "bioformat",
- // visible: this.gridCommons.isColumnVisible("bioformat")
- // },
{
id: "index",
title: "Variant Index Status",
@@ -401,8 +381,9 @@ export default class OpencgaFileGrid extends LitElement {
id: "actions",
title: "Actions",
field: "actions",
+ align: "center",
formatter: (value, row) => `
-
+
`,
- // valign: "middle",
+
+ `,
events: {
"click a": this.onActionClick.bind(this)
},
@@ -508,10 +489,10 @@ export default class OpencgaFileGrid extends LitElement {
@export="${this.onDownload}"
@actionClick="${e => this.onActionClick(e)}"
@fileCreate="${this.renderTable}">
- ` : nothing
- }
+
+ ` : nothing}
-
+
`;
diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js
index 23d990629b..dc33ec45a2 100644
--- a/src/webcomponents/individual/individual-grid.js
+++ b/src/webcomponents/individual/individual-grid.js
@@ -64,22 +64,23 @@ export default class IndividualGrid extends LitElement {
this.gridId = this._prefix + this.COMPONENT_ID;
this.active = true;
this._config = this.getDefaultConfig();
- this.displayConfigDefault = {
- header: {
- horizontalAlign: "center",
- verticalAlign: "bottom",
- },
- };
}
- updated(changedProperties) {
- if ((changedProperties.has("opencgaSession") ||
+ update(changedProperties) {
+ if (changedProperties.has("opencgaSession") ||
changedProperties.has("toolId") ||
changedProperties.has("query") ||
- changedProperties.has("config") ||
- changedProperties.has("active")) && this.active) {
+ changedProperties.has("config")) {
this.propertyObserver();
}
+
+ super.update(changedProperties);
+ }
+
+ updated(changedProperties) {
+ if (changedProperties.size > 0 && this.active) {
+ this.renderTable();
+ }
}
propertyObserver() {
@@ -141,17 +142,14 @@ export default class IndividualGrid extends LitElement {
// `
// }
};
- this.renderTable();
}
renderTable() {
- // If this.individuals is provided as property we render the array directly
if (this.individuals?.length > 0) {
this.renderLocalTable();
} else {
this.renderRemoteTable();
}
- this.requestUpdate();
}
renderRemoteTable() {
@@ -172,7 +170,6 @@ export default class IndividualGrid extends LitElement {
icons: GridCommons.GRID_ICONS,
uniqueId: "id",
silentSort: false,
- // Table properties
pagination: this._config.pagination,
pageSize: this._config.pageSize,
pageList: this._config.pageList,
@@ -184,16 +181,11 @@ export default class IndividualGrid extends LitElement {
gridContext: this,
formatLoadingMessage: () => "
",
ajax: params => {
- const sort = this.table.bootstrapTable("getOptions").sortName ? {
- sort: this.table.bootstrapTable("getOptions").sortName,
- order: this.table.bootstrapTable("getOptions").sortOrder
- } : {};
this.filters = {
study: this.opencgaSession.study.fqn,
limit: params.data.limit,
skip: params.data.offset || 0,
count: !this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1,
- ...sort,
...this.query
};
@@ -295,7 +287,6 @@ export default class IndividualGrid extends LitElement {
sidePagination: "local",
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
- // Set table properties, these are read from config property
uniqueId: "id",
pagination: this._config.pagination,
pageSize: this._config.pageSize,
@@ -444,8 +435,7 @@ export default class IndividualGrid extends LitElement {
${sexHtml}
`;
},
- sortable: true,
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("id")
},
{
@@ -461,13 +451,14 @@ export default class IndividualGrid extends LitElement {
${sample.id}
(${sample.somatic ? "S" : "G"})
-
`;
+
+ `;
}
html += `
`;
}
return html;
},
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("samples")
},
{
@@ -475,7 +466,7 @@ export default class IndividualGrid extends LitElement {
title: "Father",
field: "father.id",
formatter: fatherId => fatherId || "-",
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("father")
},
{
@@ -483,7 +474,7 @@ export default class IndividualGrid extends LitElement {
title: "Mother",
field: "mother.id",
formatter: motherId => motherId || "-",
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("mother")
},
{
@@ -491,7 +482,7 @@ export default class IndividualGrid extends LitElement {
title: "Disorders",
field: "disorders",
formatter: CatalogGridFormatter.disorderFormatter,
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("disorders")
},
{
@@ -499,23 +490,15 @@ export default class IndividualGrid extends LitElement {
title: "Phenotypes",
field: "phenotypes",
formatter: CatalogGridFormatter.phenotypesFormatter,
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("phenotypes")
},
- // {
- // id: "sex",
- // title: "Sex (Karyotypic)",
- // field: "sex",
- // formatter: this.sexFormatter,
- // halign: this.displayConfigDefault.header.horizontalAlign,
- // visible: this.gridCommons.isColumnVisible("sex")
- // },
{
id: "caseId",
title: "Case ID",
field: "attributes.OPENCGA_CLINICAL_ANALYSIS",
formatter: (value, row) => CatalogGridFormatter.caseFormatter(value, row, row.id, this.opencgaSession),
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("caseId")
},
{
@@ -523,25 +506,15 @@ export default class IndividualGrid extends LitElement {
title: "Ethnicity",
field: "ethnicity",
formatter: (ethnicity, row) => ethnicity?.id || row.population?.name || "-",
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("ethnicity")
},
- // {
- // id: "dateOfBirth",
- // title: "Date of Birth",
- // field: "dateOfBirth",
- // sortable: true,
- // formatter: CatalogGridFormatter.dateFormatter,
- // halign: this.displayConfigDefault.header.horizontalAlign,
- // visible: this.gridCommons.isColumnVisible("dateOfBirth")
- // },
{
id: "creationDate",
title: "Creation Date",
field: "creationDate",
formatter: CatalogGridFormatter.dateFormatter,
- sortable: true,
- halign: this.displayConfigDefault.header.horizontalAlign,
+ halign: "center",
visible: this.gridCommons.isColumnVisible("creationDate")
},
];
@@ -569,8 +542,9 @@ export default class IndividualGrid extends LitElement {
id: "actions",
title: "Actions",
field: "actions",
+ align: "center",
formatter: (value, row) => `
-
+ `,
events: {
- "click a": this.onActionClick.bind(this)
+ "click a": this.onActionClick.bind(this),
},
- visible: this.gridCommons.isColumnVisible("actions")
+ visible: this.gridCommons.isColumnVisible("actions"),
});
}
@@ -670,11 +646,81 @@ export default class IndividualGrid extends LitElement {
});
}
+ onCreateCohortShow() {
+ const filters = {
+ ...this.filters,
+ include: "id,samples.id,samples.internal",
+ limit: 5000,
+ };
+ this.opencgaSession.opencgaClient.individuals()
+ .search(filters)
+ .then(response => {
+ const results = response.getResults();
+ if (results) {
+ this.createCohortSampleIds = [];
+ for (const result of results) {
+ for (const sample of result.samples) {
+ this.createCohortSampleIds.push({"id": sample.id});
+ }
+ }
+ this.requestUpdate();
+ ModalUtils.show(`${this._prefix}CreateCohortModal`);
+ } else {
+ console.error("Error in result format");
+ }
+ })
+ .catch(response => {
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response);
+ });
+ }
+
+ onCreateCohortSave() {
+ const cohortId = document.querySelector(`#${this._prefix}CohortId`).value;
+ const cohortName = document.querySelector(`#${this._prefix}CohortName`).value;
+
+ const params = {
+ study: this.opencgaSession.study.fqn,
+ includeResult: false
+ };
+ let error;
+ this.opencgaSession.opencgaClient.cohorts()
+ .create(
+ {
+ id: cohortId,
+ name: cohortName ?? "",
+ samples: this.createCohortSampleIds,
+ }, params)
+ .then(() => {
+ this.createCohortSampleIds = [];
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, {
+ title: "Cohort Create",
+ message: "Cohort created correctly"
+ });
+ })
+ .catch(reason => {
+ error = reason;
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, reason);
+ });
+ }
+
+ getRightToolbar() {
+ return [
+ {
+ render: () => html`
+
+ `,
+ }
+ ];
+ }
+
render() {
return html`
${this._config.showToolbar ? html`
` : nothing}
-
+
@@ -707,6 +753,41 @@ export default class IndividualGrid extends LitElement {
`;
}
})}
+
+ ${ModalUtils.create(this, `${this._prefix}CreateCohortModal`, {
+ display: {
+ modalTitle: "Create Cohort",
+ modalDraggable: true,
+ modalbtnsVisible: true
+ },
+ render: () => {
+ return html`
+
Create a new cohort with ${this.createCohortSampleIds?.length} samples.
+ This can take few seconds depending on the number of samples.
+ ${this.createCohortSampleIds?.length === 5000 ? html`
+
No more than 5,000 samples allowed
+ ` : nothing}
+
Select the new Cohort ID and Name:
+
+ `;
+ },
+ onOk: e => this.onCreateCohortSave(e)
+ })}
`;
}
diff --git a/src/webcomponents/job/job-grid.js b/src/webcomponents/job/job-grid.js
index 7ef2a79185..cc1709fc1f 100644
--- a/src/webcomponents/job/job-grid.js
+++ b/src/webcomponents/job/job-grid.js
@@ -71,22 +71,22 @@ export default class JobGrid extends LitElement {
this.autoRefresh = false;
this.eventNotifyName = "messageevent";
this._config = this.getDefaultConfig();
- this.displayConfigDefault = {
- header: {
- horizontalAlign: "center",
- verticalAlign: "bottom",
- },
- };
}
- updated(changedProperties) {
- if ((changedProperties.has("opencgaSession") ||
+ update(changedProperties) {
+ if (changedProperties.has("opencgaSession") ||
changedProperties.has("toolId") ||
changedProperties.has("query") ||
- changedProperties.has("config") ||
- changedProperties.has("active")) && this.active) {
+ changedProperties.has("config")) {
this.propertyObserver();
}
+ super.update(changedProperties);
+ }
+
+ updated(changedProperties) {
+ if (changedProperties.size > 0 && this.active) {
+ this.renderTable();
+ }
}
propertyObserver() {
@@ -147,10 +147,7 @@ export default class JobGrid extends LitElement {
// @configChange="${this.onGridConfigChange}">
// `
// }
-
};
- this.requestUpdate();
- this.renderTable();
}
renderTable() {
@@ -159,7 +156,6 @@ export default class JobGrid extends LitElement {
} else {
this.renderRemoteTable();
}
- this.requestUpdate();
}
renderLocalTable() {
@@ -190,22 +186,12 @@ export default class JobGrid extends LitElement {
}
renderRemoteTable() {
- // this.jobs = [];
-
if (this.opencgaSession?.opencgaClient && this.opencgaSession?.study?.fqn) {
- // const filters = {...this.query};
if (this.lastFilters && JSON.stringify(this.lastFilters) === JSON.stringify(this.query)) {
// Abort destroying and creating again the grid. The filters have not changed
return;
}
- // Make a copy of the jobs (if they exist), we will use this private copy until it is assigned to this.jobs
- // if (UtilsNew.isNotUndefined(this.jobs)) {
- // this._jobs = this.jobs;
- // } else {
- // this._jobs = [];
- // }
-
this._columns = this._getDefaultColumns();
this.table = $("#" + this.gridId);
this.table.bootstrapTable("destroy");
@@ -216,14 +202,6 @@ export default class JobGrid extends LitElement {
uniqueId: "id",
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
- // NOTE native Bootstrap table autorefresh doesn't clear interval correctly
- // showRefresh: true,
- // autoRefresh: true,
- // autoRefreshSilent: false,
- // autoRefreshStatus: true,
- // autoRefreshInterval: 5,
-
- // Table properties
pagination: this._config.pagination,
pageSize: this._config.pageSize,
pageList: this._config.pageList,
@@ -278,13 +256,13 @@ export default class JobGrid extends LitElement {
}
}
},
- onCheck: (row, $element) => {
+ onCheck: row => {
this.gridCommons.onCheck(row.id, row);
},
onCheckAll: rows => {
this.gridCommons.onCheckAll(rows);
},
- onUncheck: (row, $element) => {
+ onUncheck: row => {
this.gridCommons.onUncheck(row.id, row);
},
onUncheckAll: rows => {
@@ -328,10 +306,6 @@ export default class JobGrid extends LitElement {
this.gridCommons.onColumnChange(e);
}
- onRefresh() {
- this.table.bootstrapTable("refresh");
- }
-
detailFormatter(value, row) {
let result = "
";
let detailHtml = "";
@@ -391,6 +365,12 @@ export default class JobGrid extends LitElement {
async onActionClick(e, _, row) {
const action = e.target.dataset.action?.toLowerCase();
switch (action) {
+ case "retry":
+ this.jobRetryObj = row;
+ this.requestUpdate();
+ // await this.updateComplete;
+ ModalUtils.show(`${this._prefix}RetryModal`);
+ break;
case "edit":
this.jobUpdateId = row.id;
this.requestUpdate();
@@ -412,26 +392,24 @@ export default class JobGrid extends LitElement {
id: "id",
title: "Job ID",
field: "id",
- formatter: (id, row) => {
- return `
-
- ${id}
- ${row.outDir?.path ? `/${row.outDir.path.replace(id, "").replace("//", "/")}` : ""}
-
`;
- },
+ formatter: (id, row) => `
+
+ ${id}
+ ${row.outDir?.path ? `/${row.outDir.path.replace(id, "").replace("//", "/")}` : ""}
+
+ `,
visible: this.gridCommons.isColumnVisible("id")
},
{
id: "toolId",
title: "Tool ID",
field: "tool.id",
- formatter: (toolId, row) => {
- return `
-
- ${toolId}
- ${row.tool?.type ? `${row.tool.type}` : ""}
-
`;
- },
+ formatter: (toolId, row) => `
+
+ ${toolId}
+ ${row.tool?.type ? `${row.tool.type}` : ""}
+
+ `,
visible: this.gridCommons.isColumnVisible("toolId")
},
{
@@ -460,8 +438,9 @@ export default class JobGrid extends LitElement {
${nestedObject}
` :
- `
${key}: ${params[key]}`}
-
`;
+ `
${key}: ${params[key]}`}
+
";
}
@@ -476,12 +455,6 @@ export default class JobGrid extends LitElement {
formatter: outputFiles => CatalogGridFormatter.fileFormatter(outputFiles, null, "name"),
visible: this.gridCommons.isColumnVisible("output")
},
- // {
- // id: "priority",
- // title: "Priority",
- // field: "priority",
- // visible: this.gridCommons.isColumnVisible("priority")
- // },
{
id: "dependsOn",
title: "Depends On",
@@ -495,7 +468,11 @@ export default class JobGrid extends LitElement {
if (i < 3) {
html += `
${dependsOn[i].id}
`;
} else {
- html += `
... view all jobs (${dependsOn.length})`;
+ html += `
+
+ ... view all jobs (${dependsOn.length})
+
+ `;
break;
}
}
@@ -522,6 +499,7 @@ export default class JobGrid extends LitElement {
const f = moment.utc(duration.asMilliseconds()).format("HH:mm:ss");
return `
${duration.humanize()} `;
}
+ return "-";
},
visible: this.gridCommons.isColumnVisible("executionR")
},
@@ -548,14 +526,21 @@ export default class JobGrid extends LitElement {
id: "actions",
title: "Actions",
field: "actions",
- formatter: (value, row) => `
-
+ align: "center",
+ formatter: () => `
+
-
`,
- // valign: "middle",
+
+ `,
events: {
- "click a": this.onActionClick.bind(this)
+ "click a": this.onActionClick.bind(this),
},
- visible: this.gridCommons.isColumnVisible("actions")
+ visible: this.gridCommons.isColumnVisible("actions"),
});
}
@@ -630,6 +615,28 @@ export default class JobGrid extends LitElement {
});
}
+ onJobRetry() {
+ const params = {
+ study: this.opencgaSession.study.fqn
+ };
+ let error;
+ this.opencgaSession.opencgaClient.jobs()
+ .retry(
+ {
+ job: this.jobRetryObj?.id
+ }, params)
+ .then(() => {
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, {
+ title: "Job Retry",
+ message: "Job executed correctly"
+ });
+ })
+ .catch(reason => {
+ error = reason;
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, reason);
+ });
+ }
+
getRightToolbar() {
return [
{
@@ -647,22 +654,38 @@ export default class JobGrid extends LitElement {
${this._config.showToolbar ? html`
- ` : nothing
- }
+
+ ` : nothing}
+ ${ModalUtils.create(this, `${this._prefix}RetryModal`, {
+ display: {
+ modalTitle: "Job Retry",
+ modalDraggable: true,
+ modalbtnsVisible: true
+ },
+ render: () => {
+ return html`
+
This will execute a new Job with the same parameters as the original job.
+ Are you sure do you want to execute again ${this.jobRetryObj?.id}?
+
+ `;
+ },
+ onOk: e => this.onJobRetry(e)
+ })}
+
${ModalUtils.create(this, `${this._prefix}UpdateModal`, {
display: {
modalTitle: "Job Update",
@@ -679,7 +702,6 @@ export default class JobGrid extends LitElement {
`;
}
})}
-
`;
}
diff --git a/src/webcomponents/sample/sample-grid.js b/src/webcomponents/sample/sample-grid.js
index 3a020d52f0..0751aaadca 100644
--- a/src/webcomponents/sample/sample-grid.js
+++ b/src/webcomponents/sample/sample-grid.js
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import {LitElement, html, nothing} from "lit";
+import {html, LitElement, nothing} from "lit";
import UtilsNew from "../../core/utils-new.js";
import GridCommons from "../commons/grid-commons.js";
import CatalogGridFormatter from "../commons/catalog-grid-formatter.js";
@@ -68,14 +68,20 @@ export default class SampleGrid extends LitElement {
this._config = this.getDefaultConfig();
}
- updated(changedProperties) {
- if ((changedProperties.has("opencgaSession") ||
+ update(changedProperties) {
+ if (changedProperties.has("opencgaSession") ||
changedProperties.has("toolId") ||
changedProperties.has("query") ||
- changedProperties.has("config") ||
- changedProperties.has("active")) && this.active) {
+ changedProperties.has("config")) {
this.propertyObserver();
}
+ super.update(changedProperties);
+ }
+
+ updated(changedProperties) {
+ if (changedProperties.size > 0 && this.active) {
+ this.renderTable();
+ }
}
propertyObserver() {
@@ -107,7 +113,8 @@ export default class SampleGrid extends LitElement {
- `
+
+ `,
},
// Uncomment in case we need to change defaults
// export: {
@@ -136,7 +143,6 @@ export default class SampleGrid extends LitElement {
// `
// }
};
- this.renderTable();
}
renderTable() {
@@ -146,7 +152,6 @@ export default class SampleGrid extends LitElement {
} else {
this.renderRemoteTable();
}
- this.requestUpdate();
}
renderRemoteTable() {
@@ -165,7 +170,6 @@ export default class SampleGrid extends LitElement {
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
uniqueId: "id",
- // Table properties
pagination: this._config.pagination,
pageSize: this._config.pageSize,
pageList: this._config.pageList,
@@ -175,17 +179,12 @@ export default class SampleGrid extends LitElement {
gridContext: this,
formatLoadingMessage: () => "
",
ajax: params => {
- const sort = this.table.bootstrapTable("getOptions").sortName ? {
- sort: this.table.bootstrapTable("getOptions").sortName,
- order: this.table.bootstrapTable("getOptions").sortOrder
- } : {};
this.filters = {
study: this.opencgaSession.study.fqn,
limit: params.data.limit,
skip: params.data.offset || 0,
count: !this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1,
// exclude: "qualityControl",
- ...sort,
...this.query
};
@@ -288,8 +287,6 @@ export default class SampleGrid extends LitElement {
sidePagination: "local",
iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
icons: GridCommons.GRID_ICONS,
-
- // Set table properties, these are read from config property
uniqueId: "id",
pagination: this._config.pagination,
pageSize: this._config.pageSize,
@@ -344,10 +341,10 @@ export default class SampleGrid extends LitElement {
return `
${sampleId}
- ${somaticHtml ? `${somaticHtml}` : nothing}
-
`;
+ ${somaticHtml ? `
${somaticHtml}` : ""}
+
+ `;
},
- sortable: true,
visible: this.gridCommons.isColumnVisible("id")
},
{
@@ -377,12 +374,6 @@ export default class SampleGrid extends LitElement {
formatter: (value, row) => CatalogGridFormatter.caseFormatter(value, row, row.individualId, this.opencgaSession),
visible: this.gridCommons.isColumnVisible("caseId")
},
- // {
- // id: "cohortIds",
- // title: "Cohorts",
- // field: "cohortIds",
- // // visible: this.gridCommons.isColumnVisible("cohorts")
- // },
{
id: "collection.method",
title: "Collection Method",
@@ -395,19 +386,11 @@ export default class SampleGrid extends LitElement {
field: "processing.preparationMethod",
visible: this.gridCommons.isColumnVisible("processing.preparationMethod")
},
- // {
- // id: "cellLine",
- // title: "Cell Line",
- // field: "cellLine",
- // formatter: (value, row) => row.somatic ? "Somatic" : "Germline",
- // visible: this.gridCommons.isColumnVisible("cellLine")
- // },
{
id: "creationDate",
title: "Creation Date",
field: "creationDate",
formatter: CatalogGridFormatter.dateFormatter,
- sortable: true,
visible: this.gridCommons.isColumnVisible("creationDate")
},
];
@@ -421,8 +404,9 @@ export default class SampleGrid extends LitElement {
id: "actions",
title: "Actions",
field: "actions",
+ align: "center",
formatter: (value, row) => `
-
+ `,
events: {
"click a": this.onActionClick.bind(this)
},
@@ -531,11 +516,78 @@ export default class SampleGrid extends LitElement {
});
}
+ onCreateCohortShow() {
+ const filters = {
+ ...this.filters,
+ include: "id",
+ limit: 5000,
+ };
+ this.opencgaSession.opencgaClient.samples()
+ .search(filters)
+ .then(response => {
+ const results = response.getResults();
+ if (results) {
+ this.createCohortSampleIds = results.map(s => {
+ return {"id": s.id};
+ });
+ this.requestUpdate();
+ ModalUtils.show(`${this._prefix}CreateCohortModal`);
+ } else {
+ console.error("Error in result format");
+ }
+ })
+ .catch(response => {
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response);
+ });
+ }
+
+ onCreateCohortSave() {
+ const cohortId = document.querySelector(`#${this._prefix}CohortId`).value;
+ const cohortName = document.querySelector(`#${this._prefix}CohortName`).value;
+
+ const params = {
+ study: this.opencgaSession.study.fqn,
+ includeResult: false
+ };
+ let error;
+ this.opencgaSession.opencgaClient.cohorts()
+ .create(
+ {
+ id: cohortId,
+ name: cohortName ?? "",
+ samples: this.createCohortSampleIds,
+ }, params)
+ .then(() => {
+ this.createCohortSampleIds = [];
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, {
+ title: "Cohort Create",
+ message: "Cohort created correctly"
+ });
+ })
+ .catch(reason => {
+ error = reason;
+ NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, reason);
+ });
+ }
+
+ getRightToolbar() {
+ return [
+ {
+ render: () => html`
+
+ `,
+ }
+ ];
+ }
+
render() {
return html`
${this._config.showToolbar ? html`
- ` : nothing
- }
+ ` : nothing}
@@ -569,6 +620,41 @@ export default class SampleGrid extends LitElement {
`;
}
})}
+
+ ${ModalUtils.create(this, `${this._prefix}CreateCohortModal`, {
+ display: {
+ modalTitle: "Create Cohort",
+ modalDraggable: true,
+ modalbtnsVisible: true
+ },
+ render: () => {
+ return html`
+
Create a new cohort with ${this.createCohortSampleIds?.length} samples.
+ This can take few seconds depending on the number of samples.
+ ${this.createCohortSampleIds?.length === 5000 ? html`
+
No more than 5,000 samples allowed
+ ` : nothing}
+
Select the new Cohort ID and Name:
+
+ `;
+ },
+ onOk: e => this.onCreateCohortSave(e)
+ })}
`;
}
diff --git a/src/webcomponents/variant/variant-browser-grid.js b/src/webcomponents/variant/variant-browser-grid.js
index 5602f9ea25..65d828f527 100644
--- a/src/webcomponents/variant/variant-browser-grid.js
+++ b/src/webcomponents/variant/variant-browser-grid.js
@@ -81,30 +81,29 @@ export default class VariantBrowserGrid extends LitElement {
// TODO move to the configuration?
this.maxNumberOfPages = 1000000;
- }
- firstUpdated() {
- // this.gridCommons = new GridCommons(this.gridId, this, this._config);
- this.table = this.querySelector("#" + this.gridId);
- this._config = {
- ...this.getDefaultConfig(),
- ...this.config
- };
+ this.gridCommons = null;
+ this._config = this.getDefaultConfig();
}
- updated(changedProperties) {
+ update(changedProperties) {
if (changedProperties.has("opencgaSession")) {
this.opencgaSessionObserver();
}
- if (changedProperties.has("query") || changedProperties.has("variants")) {
+
+ if (changedProperties.has("query")) {
this.queryObserver();
- // update config to add new columns by filters as sample
- this.configObserver();
- this.renderVariants();
}
+
if (changedProperties.has("config") || changedProperties.has("toolId")) {
this.configObserver();
- this.requestUpdate();
+ }
+
+ super.update(changedProperties);
+ }
+
+ updated(changedProperties) {
+ if (changedProperties.size > 0) {
this.renderVariants();
}
}
@@ -115,6 +114,7 @@ export default class VariantBrowserGrid extends LitElement {
...this.getDefaultConfig(),
...this.config
};
+
this.gridCommons = new GridCommons(this.gridId, this, this._config);
}
@@ -131,7 +131,6 @@ export default class VariantBrowserGrid extends LitElement {
}
}
this.samples = _samples;
- this.requestUpdate();
}
configObserver() {
@@ -146,8 +145,6 @@ export default class VariantBrowserGrid extends LitElement {
this.toolbarSetting = {
...this._config,
showCreate: false, // Caution: Ignore a possible admin configuration change to showCreate: true.
- // columns: this._getDefaultColumns()[0].filter(col => col.rowspan === 2 && col.colspan === 1 && col.visible !== false), // flat list for the column dropdown
- // gridColumns: this._getDefaultColumns() // original column structure
};
this.toolbarConfig = {
@@ -155,7 +152,7 @@ export default class VariantBrowserGrid extends LitElement {
resource: "VARIANT",
disableCreate: true,
showInterpreterConfig: true,
- columns: this._getDefaultColumns()
+ columns: this._getDefaultColumns(),
};
}
@@ -165,13 +162,11 @@ export default class VariantBrowserGrid extends LitElement {
}
renderVariants() {
- this.opencgaSession;
if (this.variants?.length > 0) {
this.renderFromLocal();
} else {
this.renderRemoteVariants();
}
- // this.requestUpdate();
}
renderRemoteVariants() {
@@ -239,7 +234,8 @@ export default class VariantBrowserGrid extends LitElement {
}
}
- this.opencgaSession.opencgaClient.variants().query(this.filters)
+ this.opencgaSession.opencgaClient.variants()
+ .query(this.filters)
.then(res => {
// FIXME A quick temporary fix -> TASK-947
if (this.opencgaSession?.project?.cellbase?.version === "v4" || this.opencgaSession?.project?.internal?.cellbase?.version === "v4") {
@@ -293,7 +289,6 @@ export default class VariantBrowserGrid extends LitElement {
});
}
}
-
params.success(res);
})
.catch(e => params.error(e))
@@ -355,8 +350,6 @@ export default class VariantBrowserGrid extends LitElement {
data: this.variants,
columns: this._getDefaultColumns(),
sidePagination: "local",
-
- // Set table properties, these are read from config property
uniqueId: "id",
pagination: this._config.pagination,
pageSize: this._config.pageSize,
diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index b45ae996e7..8171013cf7 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -27,7 +27,7 @@ export default class VariantSamples extends LitElement {
constructor() {
super();
- this._init();
+ this.#init();
}
createRenderRoot() {
@@ -44,34 +44,31 @@ export default class VariantSamples extends LitElement {
},
active: {
type: Boolean
- }
+ },
};
}
- _init() {
+ #init() {
this._prefix = UtilsNew.randomString(8);
this.active = false;
this.gridId = this._prefix + "SampleTable";
- this.toolbarConfig = {
+
+ this.toolbarSettings = {
showCreate: false,
showExport: true,
showSettings: false,
};
- }
+ this.toolbarConfig = {
+ resource: "SAMPLE",
+ };
- connectedCallback() {
this.config = this.getDefaultConfig();
this.gridCommons = new GridCommons(this.gridId, this, this.config);
- super.connectedCallback();
}
updated(changedProperties) {
- if (changedProperties.has("opencgaSession")) {
- // this.catalogGridFormatter = new CatalogGridFormatter(this.opencgaSession);
- }
-
- if ((changedProperties.has("variantId") || changedProperties.has("active")) && this.active) {
+ if (changedProperties.size > 0 && this.active) {
this.renderTable();
}
}
@@ -120,7 +117,7 @@ export default class VariantSamples extends LitElement {
}
renderTable() {
- if (!this.opencgaSession) {
+ if (!this.opencgaSession || !this.variantId) {
return;
}
this.table = $("#" + this.gridId);
@@ -399,14 +396,6 @@ export default class VariantSamples extends LitElement {
this.requestUpdate();
}
- getDefaultConfig() {
- return {
- pagination: true,
- pageSize: 10,
- pageList: [10, 25, 50],
- };
- }
-
render() {
return html`
@@ -420,11 +409,12 @@ export default class VariantSamples extends LitElement {
` : null}
+ @export="${this.onDownload}">
@@ -433,6 +423,14 @@ export default class VariantSamples extends LitElement {
`;
}
+ getDefaultConfig() {
+ return {
+ pagination: true,
+ pageSize: 10,
+ pageList: [10, 25, 50],
+ };
+ }
+
}
customElements.define("variant-samples", VariantSamples);