Skip to content

Commit

Permalink
Minor improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@imedina
imedina committed Apr 1, 2024
1 parent 68065ce commit f3b1147
Show file tree
Hide file tree
Showing 5 changed files with 268 additions and 22 deletions.
16 changes: 8 additions & 8 deletions src/webcomponents/commons/modal/modal-utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {html, nothing} from "lit";
import LitUtils from "../utils/lit-utils";
import UtilsNew from "../../../core/utils-new";


export default class ModalUtils {
Expand Down Expand Up @@ -28,10 +27,8 @@ export default class ModalUtils {
const modalDraggable = config.display?.modalDraggable || false;
const modalCyDataName = config.display?.modalCyDataName || "";

return html `
<div class="modal fade" id="${id}" data-draggable="${modalDraggable}"
tabindex="-1" role="dialog"
aria-labelledby="DataModalLabel" aria-hidden="true" data-cy="${modalCyDataName}">
return html`
<div id="${id}" class="modal fade" data-draggable="${modalDraggable}" tabindex="-1" role="dialog" aria-labelledby="DataModalLabel" aria-hidden="true" data-cy="${modalCyDataName}">
<div class="modal-dialog" style="width: ${modalWidth}">
<div class="modal-content">
<div class="modal-header">
Expand All @@ -49,9 +46,13 @@ export default class ModalUtils {
${btnsVisible? html`
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal"
@click="${e => LitUtils.dispatchCustomEvent(self, "modalCancel", null, e)}">Cancel</button>
@click="${e => config.onCancel ? config.onCancel(e) : LitUtils.dispatchCustomEvent(self, "modalCancel", null, e)}">
Cancel
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"
@click="${e => LitUtils.dispatchCustomEvent(self, "modalOk", null, e)}">Save</button>
@click="${e => config.onOk ? config.onOk(e) : LitUtils.dispatchCustomEvent(self, "modalOk", null, e)}">
Save
</button>
</div>`: nothing}
</div>
</div>
Expand Down Expand Up @@ -124,5 +125,4 @@ export default class ModalUtils {
modalHeader.style.cursor = "move";
}


}
7 changes: 0 additions & 7 deletions src/webcomponents/commons/opencb-grid-toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,13 +149,6 @@ export default class OpencbGridToolbar extends LitElement {
</div>
`) : nothing}
${this._settings.showRefresh ? html`
<button type="button" class="btn btn-default btn-sm" @click="${() => LitUtils.dispatchCustomEvent(this, "refresh")}">
<i class="fas fa-sync-alt icon-padding"></i> Refresh
</button>
` :nothing}
<!-- Second, display elements configured -->
${this._config?.create && (this._settings.showCreate || this._settings.showNew) ? html`
<div class="btn-group">
Expand Down
105 changes: 105 additions & 0 deletions src/webcomponents/individual/individual-grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -638,11 +638,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`
<button type="button" class="btn btn-default btn-sm" @click="${e => this.onCreateCohortShow(e)}">
<i class="fas fa-users icon-padding"></i> Create Cohort
</button>
`,
}
];
}

render() {
return html`
${this._config.showToolbar ? html`
<opencb-grid-toolbar
.query="${this.filters}"
.rightToolbar="${this.getRightToolbar()}"
.opencgaSession="${this.opencgaSession}"
.settings="${this.toolbarSetting}"
.config="${this.toolbarConfig}"
Expand Down Expand Up @@ -675,6 +745,41 @@ export default class IndividualGrid extends LitElement {
`;
}
})}
${ModalUtils.create(this, `${this._prefix}CreateCohortModal`, {
display: {
modalTitle: "Create Cohort",
modalDraggable: true,
modalbtnsVisible: true
},
render: () => {
return html`
<div style="margin: 10px">Create a new cohort with <span style="font-weight: bold">${this.createCohortSampleIds?.length} samples</span>.
This can take few seconds depending on the number of samples.</div>
${this.createCohortSampleIds?.length === 5000 ? html`
<div><span class="alert alert-warning">No more than 5,000 samples allowed</span></div>
` : nothing}
<div style="margin: 10px">Select the new Cohort ID and Name:</div>
<div>
<form class="form-horizontal">
<div class="form-group">
<label for="${this._prefix}CohortId" class="col-sm-2 control-label">Cohort ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="${this._prefix}CohortId" placeholder="">
</div>
</div>
<div class="form-group">
<label for="${this._prefix}CohortName" class="col-sm-2 control-label">Cohort Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="${this._prefix}CohortName" placeholder="">
</div>
</div>
</form>
</div>
`;
},
onOk: e => this.onCreateCohortSave(e)
})}
`;
}

Expand Down
58 changes: 52 additions & 6 deletions src/webcomponents/job/job-grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,10 +306,6 @@ export default class JobGrid extends LitElement {
this.gridCommons.onColumnChange(e);
}

onRefresh() {
this.table.bootstrapTable("refresh");
}

detailFormatter(value, row) {
let result = "<div class='row' style='padding-bottom: 20px'>";
let detailHtml = "";
Expand Down Expand Up @@ -369,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();
Expand Down Expand Up @@ -436,7 +438,7 @@ export default class JobGrid extends LitElement {
<div style="padding-left: 10px">
${nestedObject}
</div>` :
`<span style="margin: 2px 0; font-weight: bold">${key}:</span> ${params[key]}`}
`<span style="margin: 2px 0; font-weight: bold">${key}:</span> ${params[key]}`}
</div>
`;
}
Expand Down Expand Up @@ -533,6 +535,12 @@ export default class JobGrid extends LitElement {
<span class="caret" style="margin-left: 5px"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a data-action="retry" href="javascript: void 0" class="btn force-text-left">
<i class="fas fa-sync icon-padding" aria-hidden="true"></i> Retry ...
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a data-action="copy-json" href="javascript: void 0" class="btn force-text-left">
<i class="fas fa-copy icon-padding" aria-hidden="true"></i> Copy JSON
Expand Down Expand Up @@ -607,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 [
{
Expand All @@ -624,13 +654,13 @@ export default class JobGrid extends LitElement {
${this._config.showToolbar ? html`
<opencb-grid-toolbar
.query="${this.filters}"
.rightToolbar="${this.getRightToolbar()}"
.opencgaSession="${this.opencgaSession}"
.settings="${this.toolbarSetting}"
.config="${this.toolbarConfig}"
@columnChange="${this.onColumnChange}"
@download="${this.onDownload}"
@export="${this.onDownload}"
@refresh="${this.onRefresh}"
@actionClick="${e => this.onActionClick(e)}"
@jobCreate="${this.renderRemoteTable}">
</opencb-grid-toolbar>
Expand All @@ -640,6 +670,22 @@ export default class JobGrid extends LitElement {
<table id="${this.gridId}"></table>
</div>
${ModalUtils.create(this, `${this._prefix}RetryModal`, {
display: {
modalTitle: "Job Retry",
modalDraggable: true,
modalbtnsVisible: true
},
render: () => {
return html`
<div>This will execute a new Job with the same parameters as the original job.
Are you sure do you want to execute again <span style="font-weight: bold">${this.jobRetryObj?.id}</span>?
</div>
`;
},
onOk: e => this.onJobRetry(e)
})}
${ModalUtils.create(this, `${this._prefix}UpdateModal`, {
display: {
modalTitle: "Job Update",
Expand Down
Loading

0 comments on commit f3b1147

Please sign in to comment.